Update components/hero.tsx

components/hero.tsx

@@ -0,0 +1,58 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+export function Hero() {
+  return (
+    <section className="relative pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
+      <Container>
+        <div className="flex flex-col items-center text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Heading className="text-5xl md:text-7xl font-bold tracking-tight">
+              Propulsez votre entreprise <br />
+              <span className="text-neutral-500">vers le futur</span>
+            </Heading>
+          </motion.div>
+          
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            <Subheading className="mt-6 max-w-2xl text-lg md:text-xl text-neutral-600">
+              Des solutions innovantes pour transformer votre vision en réalité. 
+              Nous accompagnons les entreprises dans leur croissance digitale.
+            </Subheading>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="mt-10 flex flex-col sm:flex-row gap-4"
+          >
+            <Button size="lg" className="px-8 h-12 text-base">
+              Commencer maintenant
+            </Button>
+            <Button size="lg" variant="outline" className="px-8 h-12 text-base">
+              En savoir plus
+            </Button>
+          </motion.div>
+        </div>
+      </Container>
+      
+      {/* Background decoration */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 pointer-events-none">
+        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-neutral-100 rounded-full blur-3xl opacity-50" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-neutral-100 rounded-full blur-3xl opacity-50" />
+      </div>
+    </section>
+  );
+}