Deploy

src/components/sections/NewArrivalsSection.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Card, CardContent, CardTitle } from '@/components/ui/Card'
+import Badge from '@/components/ui/Badge'
+import Button from '@/components/ui/Button'
+
+export default function NewArrivalsSection() {
+  const { items, loading } = useVulaContent('product_carousels')
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-16">
+        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
+      </div>
+    )
+  }
+
+  if (items.length === 0) return null
+
+  return (
+    <section
+      id="new-arrivals"
+      data-vula-section="newarrivals"
+      data-vula-cms="product_carousels"
+      className="py-20 bg-white"
+    >
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <Badge className="bg-[#16a34a] text-white mb-4">Fresh Drops</Badge>
+          <h2 className="text-4xl md:text-5xl font-black uppercase text-[#18181b]">New Arrivals</h2>
+          <p className="text-gray-600 mt-2 max-w-xl mx-auto">Straight from the design studio to the pavement.</p>
+        </div>
+
+        <div className="flex overflow-x-auto gap-6 pb-4 snap-x snap-mandatory scrollbar-hide">
+          {items.map((item) => {
+            const d = item.data as { title?: string; description?: string; price?: number; image?: string }
+            return (
+              <Card key={item.id} className="min-w-[280px] snap-start border-2 border-[#e7eaef] shadow-[4px_4px_0_0_#18181b] hover:shadow-[6px_6px_0_0_#16a34a] transition-all duration-200">
+                <div className="relative aspect-square overflow-hidden">
+                  {d.image ? (
+                    <Image
+                      src={d.image}
+                      alt={d.title || 'New arrival'}
+                      fill
+                      sizes="280px"
+                      className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-gray-100 flex items-center justify-center text-gray-400">
+                      No Image
+                    </div>
+                  )}
+                </div>
+                <CardContent className="p-4">
+                  <CardTitle className="text-lg font-bold uppercase text-[#18181b]">
+                    {d.title || ''}
+                  </CardTitle>
+                  {d.description && (
+                    <p className="text-sm text-gray-500 mt-1 line-clamp-2">{d.description}</p>
+                  )}
+                  <div className="flex items-center justify-between mt-3">
+                    {d.price !== undefined && (
+                      <span className="text-xl font-black text-[#16a34a]">
+                        R{Number(d.price || 0).toFixed(2)}
+                      </span>
+                    )}
+                    <Link href="/products">
+                      <button className="text-sm font-semibold uppercase tracking-wider border-2 border-[#18181b] px-3 py-1.5 hover:bg-[#16a34a] hover:text-white hover:border-[#16a34a] transition-all">
+                        Shop
+                      </button>
+                    </Link>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+
+        <div className="text-center mt-8">
+          <Link href="/products">
+            <Button variant="outline" className="border-2 border-[#18181b] text-[#18181b] hover:bg-[#18181b] hover:text-white uppercase font-bold">
+              View All Drops
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}