Update components/hero.tsx

components/hero.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+
+export function Hero() {
+  return (
+    <section className="relative min-h-[80vh] flex items-center overflow-hidden bg-neutral-50">
+      <Container className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-20">
+        <div className="max-w-2xl">
+          <Heading className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900">
+            Step Into <span className="text-primary">Excellence</span>
+          </Heading>
+          <Subheading className="mt-6 text-lg md:text-xl text-neutral-600 leading-relaxed">
+            Discover our curated collection of high-quality footwear. From formal elegance to casual comfort, find the perfect pair for every occasion.
+          </Subheading>
+          <div className="flex flex-wrap gap-4 mt-10">
+            <Button size="lg" asChild className="px-8 py-6 text-lg">
+              <Link href="/shop">Shop New Arrivals</Link>
+            </Button>
+            <Button size="lg" variant="outline" asChild className="px-8 py-6 text-lg">
+              <Link href="/book">Book a Fitting</Link>
+            </Button>
+          </div>
+          <div className="mt-12 flex items-center gap-8">
+            <div>
+              <p className="text-2xl font-bold text-neutral-900">5k+</p>
+              <p className="text-sm text-neutral-500">Happy Customers</p>
+            </div>
+            <div className="w-px h-10 bg-neutral-200" />
+            <div>
+              <p className="text-2xl font-bold text-neutral-900">200+</p>
+              <p className="text-sm text-neutral-500">Unique Styles</p>
+            </div>
+          </div>
+        </div>
+        <div className="relative aspect-square lg:aspect-auto lg:h-[600px] rounded-3xl overflow-hidden shadow-2xl">
+          <Image
+            src="https://images.unsplash.com/photo-1600202280810-e0b3f6f1933e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
+            alt="Premium Leather Boots"
+            fill
+            className="object-cover"
+            priority
+          />
+        </div>
+      </Container>
+      <div className="absolute top-0 right-0 w-1/3 h-full bg-neutral-100 -z-0 hidden lg:block" />
+    </section>
+  );
+}