Update components/hero.tsx

components/hero.tsx

@@ -0,0 +1,38 @@
+"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 h-[90vh] flex items-center justify-center overflow-hidden bg-[#F9F7F2]">
+      <Container className="relative z-10 text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          <Heading className="text-5xl md:text-7xl font-light tracking-tight text-neutral-900 mb-6">
+            Indian Soul. <br /> Western Ease.
+          </Heading>
+          <Subheading className="max-w-2xl mx-auto text-lg md:text-xl text-neutral-600 mb-10">
+            Soft luxury women and kids clothing rooted in Indian soul and shaped by Western ease. Designed in Greater Noida, India.
+          </Subheading>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" className="bg-neutral-900 text-white hover:bg-neutral-800 px-8 py-6 text-lg rounded-none">
+              Explore Women
+            </Button>
+            <Button size="lg" variant="outline" className="border-neutral-900 text-neutral-900 hover:bg-neutral-50 px-8 py-6 text-lg rounded-none">
+              Explore Kids
+            </Button>
+          </div>
+        </motion.div>
+      </Container>
+      <div className="absolute inset-0 z-0 opacity-20">
+        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581338834647-b0fb40704e21?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center" />
+      </div>
+    </section>
+  );
+}