feat: display actual products on homepage

- Fetch products from API instead of hardcoded placeholders
- Show product images with hover effect
- Add 'Design Your Own' button
- Link products to detail pages
- Revalidate every 60 seconds

frontend/app/page.tsx

@@ -1,6 +1,31 @@
 import Link from "next/link";
 
-export default function HomePage() {
+interface Product {
+  slug: string;
+  name: string;
+  description: string;
+  category: string;
+  product_type: string;
+  image_url: string;
+  base_price: number;
+}
+
+async function getProducts(): Promise<Product[]> {
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api"}/products`,
+      { next: { revalidate: 60 } } // Revalidate every minute
+    );
+    if (!res.ok) return [];
+    return res.json();
+  } catch {
+    return [];
+  }
+}
+
+export default async function HomePage() {
+  const products = await getProducts();
+
   return (
     <div className="container mx-auto px-4 py-16">
       <div className="max-w-3xl mx-auto text-center">
@@ -18,24 +43,49 @@ export default function HomePage() {
           >
             Browse Products
           </Link>
+          <Link
+            href="/design"
+            className="inline-flex items-center justify-center rounded-md border border-primary px-8 py-3 text-lg font-medium text-primary hover:bg-primary/10 transition-colors"
+          >
+            Design Your Own
+          </Link>
         </div>
       </div>
 
       <div className="mt-24">
-        <h2 className="text-2xl font-bold text-center mb-12">Featured</h2>
+        <h2 className="text-2xl font-bold text-center mb-12">Featured Products</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {products.length === 0 ? (
+          <p className="text-center text-muted-foreground">
+            No products available yet. Check back soon!
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            {products.map((product) => (
+              <Link
+                key={product.slug}
+                href={`/products/${product.slug}`}
+                className="group"
+              >
                 <div className="border rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
-            <div className="aspect-square bg-muted flex items-center justify-center">
+                  <div className="aspect-square bg-muted relative overflow-hidden">
-              <span className="text-muted-foreground">Coming Soon</span>
+                    <img
+                      src={`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api"}/designs/${product.slug}/image`}
+                      alt={product.name}
+                      className="object-cover w-full h-full group-hover:scale-105 transition-transform"
+                    />
                   </div>
                   <div className="p-4">
-              <h3 className="font-semibold">Build Tools Not Empires</h3>
+                    <h3 className="font-semibold">{product.name}</h3>
-              <p className="text-sm text-muted-foreground">Sticker</p>
+                    <p className="text-sm text-muted-foreground capitalize">
-              <p className="font-bold mt-2">$3.50</p>
+                      {product.product_type}
+                    </p>
+                    <p className="font-bold mt-2">${product.base_price.toFixed(2)}</p>
                   </div>
                 </div>
-          {/* More products will be loaded from API */}
+              </Link>
+            ))}
           </div>
+        )}
       </div>
     </div>
   );