import React from 'react'; // ─── Design: Browser wireframe আঁকা হচ্ছে ───────────────────────────────── const DesignSVG: React.FC = () => ( ); // ─── Development: Terminal code টাইপিং ───────────────────────────────────── const DevelopmentSVG: React.FC = () => ( ); // ─── E-commerce: Products cart-এ উড়ে আসছে + counter ────────────────────── const EcommerceSVG: React.FC = () => ( ); // ─── AI Automation: Circuit + data pulse ──────────────────────────────────── const AutomationSVG: React.FC = () => ( ); // ─── The 4 cards config ────────────────────────────────────────────────────── const heroCards = [ { title: 'Web Design', description: 'Pixel-perfect UI', gradient: 'from-blue-600 to-cyan-500', shadow: 'shadow-blue-500/40', Animation: DesignSVG, }, { title: 'Development', description: 'Clean, fast code', gradient: 'from-violet-600 to-purple-500', shadow: 'shadow-violet-500/40', Animation: DevelopmentSVG, }, { title: 'E-Commerce', description: 'Sell more, faster', gradient: 'from-emerald-500 to-teal-500', shadow: 'shadow-emerald-500/40', Animation: EcommerceSVG, }, { title: 'AI Automation', description: 'Smart workflows', gradient: 'from-rose-500 to-pink-500', shadow: 'shadow-rose-500/40', Animation: AutomationSVG, }, ]; const HeroAnimationCards: React.FC = () => (

{/* Soft ambient glow behind grid */}

{heroCards.map((card, i) => (

{/* Gradient top strip */}

{/* Animation area */}

{/* Text */}

{card.title}

{card.description}

{/* Hover inner glow */}

))}

); export default HeroAnimationCards;