Deploy

src/components/sections/BestsellersGridSection.tsx

@@ -0,0 +1,73 @@
+'use client';
+import { useMedusaProducts } from '@/hooks/useMedusaProducts';
+import Image from 'next/image';
+import Link from 'next/link';
+import Button from '@/components/ui/Button';
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card';
+import Badge from '@/components/ui/Badge';
+import { TrendingUp } from 'lucide-react';
+
+const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£' };
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '');
+  return `${sym}${(amount / 100).toFixed(2)}`;
+};
+
+export default function BestsellersGridSection() {
+  const { products, isLoading } = useMedusaProducts(6);
+
+  if (isLoading) {
+    return (
+      <div data-vula-section="bestsellersgrid" className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-[#6b8e23] border-t-transparent animate-spin" />
+      </div>
+    );
+  }
+  if (!products || products.length === 0) return null;
+
+  return (
+    <section id="bestsellers-grid" className="py-20 bg-[#f4f5f2]">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-[#2c331f] text-center mb-2">Top Picks Loved by Our Community</h2>
+        <p className="text-center text-[#8b5a3c] mb-10 max-w-xl mx-auto">Real results, trusted by thousands across South Africa.</p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+          {products.map((product) => {
+            const price = product.variants?.[0]?.prices?.[0];
+            return (
+              <Card key={product.id} className="rounded-[20px] shadow-lg hover:shadow-xl transition-shadow duration-200 overflow-hidden bg-white">
+                <div className="relative aspect-square overflow-hidden">
+                  <Image
+                    src={product.thumbnail ?? '/placeholder-product.svg'}
+                    alt={product.title}
+                    fill
+                    className="object-cover hover:scale-105 transition-transform duration-500"
+                    sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
+                  />
+                  <Badge variant="default" className="absolute top-3 left-3 bg-[#8b5a3c] text-white text-xs px-3 py-1">
+                    <TrendingUp className="w-3 h-3 inline mr-1" />Bestseller
+                  </Badge>
+                </div>
+                <CardHeader className="px-4 pt-4 pb-0">
+                  <CardTitle className="text-sm font-semibold text-[#2c331f]">{product.title}</CardTitle>
+                </CardHeader>
+                <CardContent className="px-4 pb-4">
+                  {price && (
+                    <p className="text-lg font-bold text-[#6b8e23]">{formatPrice(price.amount, price.currency_code)}</p>
+                  )}
+                  <p className="text-xs text-[#8b5a3c] mt-1">Deep hydration &amp; gentle care</p>
+                </CardContent>
+                <CardFooter className="px-4 pb-4">
+                  <Link href={`/products/${product.id}`}>
+                    <Button variant="outline" size="sm" className="w-full border-[#6b8e23] text-[#6b8e23] hover:bg-[#6b8e23] hover:text-white transition-all duration-200">
+                      Shop Now
+                    </Button>
+                  </Link>
+                </CardFooter>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}