Update components/hero.tsx

components/hero.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { BlurImage } from "@/components/blur-image";
+
+export function Hero() {
+  return (
+    <section className="relative py-20 md:py-32 overflow-hidden">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div className="space-y-6">
+            <Heading className="text-left">
+              Transform Your Space with Premium Furniture
+            </Heading>
+            <Subheading className="text-left">
+              Discover our curated collection of modern, stylish furniture designed to elevate every room in your home. Quality craftsmanship meets affordable luxury.
+            </Subheading>
+            <div className="flex gap-4">
+              <Link href="/shop">
+                <Button size="lg" className="text-base">
+                  Shop Now
+                </Button>
+              </Link>
+              <Link href="/categories">
+                <Button size="lg" variant="outline" className="text-base">
+                  Browse Categories
+                </Button>
+              </Link>
+            </div>
+            <div className="flex gap-8 pt-4">
+              <div>
+                <p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">500+</p>
+                <p className="text-sm text-neutral-600 dark:text-neutral-400">Products</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">10k+</p>
+                <p className="text-sm text-neutral-600 dark:text-neutral-400">Happy Customers</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-neutral-900 dark:text-neutral-100">Free</p>
+                <p className="text-sm text-neutral-600 dark:text-neutral-400">Delivery</p>
+              </div>
+            </div>
+          </div>
+          <div className="relative h-[400px] lg:h-[500px] rounded-2xl overflow-hidden">
+            <BlurImage
+              src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80"
+              alt="Modern living room with stylish furniture"
+              fill
+              className="object-cover"
+            />
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}