Update app/page.tsx

app/page.tsx

@@ -0,0 +1,106 @@
+import { Hero } from "@/components/hero";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { products, categories } from "@/lib/data";
+import { ProductCard } from "@/components/product-card";
+import { Footer } from "@/components/footer";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+export default function Home() {
+  const featuredProducts = products.slice(0, 4);
+  const offerProducts = products.filter(p => p.isOffer).slice(0, 4);
+
+  return (
+    <main className="min-h-screen bg-white">
+      <Hero />
+
+      {/* Categories Section */}
+      <section className="py-16 bg-white">
+        <Container>
+          <div className="flex items-center justify-between mb-8">
+            <Heading level={2} className="text-2xl font-bold">Shop by Category</Heading>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {categories.map((cat) => (
+              <Link 
+                key={cat.name} 
+                href={`/products?category=${cat.name}`}
+                className="group flex flex-col items-center p-6 rounded-2xl bg-neutral-50 hover:bg-blue-50 transition-colors border border-transparent hover:border-blue-100"
+              >
+                <span className="text-4xl mb-3 group-hover:scale-110 transition-transform">{cat.icon}</span>
+                <span className="font-medium text-neutral-900">{cat.name}</span>
+              </Link>
+            ))}
+          </div>
+        </Container>
+      </section>
+
+      {/* Featured Products */}
+      <section className="py-16 bg-neutral-50">
+        <Container>
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <Heading level={2} className="text-2xl font-bold">Featured Products</Heading>
+              <p className="text-neutral-500 text-sm mt-1">Handpicked for you</p>
+            </div>
+            <Button variant="ghost" asChild className="text-blue-600 hover:text-blue-700">
+              <Link href="/products" className="flex items-center gap-2">
+                View All <ArrowRight className="w-4 h-4" />
+              </Link>
+            </Button>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {featuredProducts.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        </Container>
+      </section>
+
+      {/* Offers Section */}
+      <section className="py-16 bg-white">
+        <Container>
+          <div className="bg-blue-600 rounded-3xl p-8 md:p-12 overflow-hidden relative">
+            <div className="relative z-10 max-w-md">
+              <span className="text-blue-100 font-bold tracking-widest uppercase text-xs">Limited Time Offer</span>
+              <h2 className="text-3xl md:text-4xl font-bold text-white mt-4 mb-6">
+                Up to 50% Off on Electronics & Gadgets
+              </h2>
+              <Button size="lg" variant="secondary" asChild className="rounded-full">
+                <Link href="/products?category=Electronics">Grab the Deal</Link>
+              </Button>
+            </div>
+            <div className="absolute top-0 right-0 w-1/2 h-full opacity-20 hidden md:block">
+              <img 
+                src="https://images.unsplash.com/photo-1498049794561-7780e7231661?q=80&w=1000&auto=format&fit=crop" 
+                alt="Offer" 
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      {/* Best Deals */}
+      <section className="py-16 bg-white">
+        <Container>
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <Heading level={2} className="text-2xl font-bold">Best Deals</Heading>
+              <p className="text-neutral-500 text-sm mt-1">Unbeatable prices on top brands</p>
+            </div>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {offerProducts.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        </Container>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}