Deploy

src/components/sections/FeaturedCollectionsSection.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { useMedusaProducts } from '@/hooks/useMedusaProducts'
+import { useMedusaCart } from '@/hooks/useMedusaCart'
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card'
+import Button from '@/components/ui/Button'
+import Badge from '@/components/ui/Badge'
+import Image from 'next/image'
+import Link from 'next/link'
+
+const formatPrice = (amount: number, code?: string) => {
+  const syms: Record<string, string> = { zar: 'R', usd: '$', eur: '€' }
+  const sym = syms[(code || '').toLowerCase()] || (code?.toUpperCase() || 'R')
+  return `${sym}${(amount / 100).toFixed(2)}`
+}
+
+export default function FeaturedCollectionsSection() {
+  const { products, isLoading } = useMedusaProducts(8)
+  const { addToCart } = useMedusaCart()
+
+  if (isLoading) {
+    return (
+      <section data-vula-section="featuredcollections" id="featured-collections" className="flex justify-center py-24 bg-[#18181b]">
+        <div className="w-8 h-8 rounded-full border-2 border-[#c0c0c0] border-t-transparent animate-spin" />
+      </section>
+    )
+  }
+
+  if (!products || products.length === 0) return null
+
+  return (
+    <section id="featured-collections" className="py-24 px-6 bg-[#18181b]">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center justify-center gap-4 mb-12">
+          <span className="block w-14 h-0.5 bg-[#c0c0c0]" />
+          <h2 className="text-3xl md:text-4xl font-light text-[#e7e7ee] font-['Cormorant_Garamond'] uppercase tracking-wider">
+            Featured <span className="italic text-[#c0c0c0]">Collections</span>
+          </h2>
+          <span className="block w-14 h-0.5 bg-[#c0c0c0]" />
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {products.map((product) => {
+            const price = product.variants?.[0]?.prices?.[0]
+            const priceStr = price ? formatPrice(price.amount, price.currency_code) : 'Price on request'
+
+            return (
+              <Card key={product.id} className="bg-[#0f0f17] border border-[#303040] hover:border-[#c0c0c0] transition-all duration-200 ease-out">
+                <Link href={`/products/${product.id}`} className="block">
+                  <div className="aspect-square overflow-hidden">
+                    <Image
+                      src={product.thumbnail || 'https://images.pexels.com/photos/5698859/pexels-photo-5698859.jpeg?auto=compress&cs=tinysrgb&h=350'}
+                      alt={product.title}
+                      width={400}
+                      height={400}
+                      className="object-cover w-full h-full hover:scale-105 transition-transform duration-500 ease-out"
+                    />
+                  </div>
+                </Link>
+                <CardHeader className="p-4 pb-0">
+                  <CardTitle className="text-[#e7e7ee] font-['Cormorant_Garamond'] text-lg">
+                    {product.title}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="p-4 pt-2">
+                  <p className="text-[#c0c0c0] font-semibold">{priceStr}</p>
+                </CardContent>
+                <CardFooter className="p-4 pt-0">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full border-[#c0c0c0] text-[#c0c0c0] hover:bg-[#c0c0c0] hover:text-[#0f0f17]"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      const variantId = product.variants?.[0]?.id
+                      if (variantId) {
+                        addToCart(variantId, 1)
+                        window.dispatchEvent(new CustomEvent('cart-drawer-open'))
+                      }
+                    }}
+                  >
+                    Add to Cart
+                  </Button>
+                </CardFooter>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}