From 4b2e9e1ec88bc23cd8b9e2f63b9ff00d0123e383 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Mon, 27 Jul 2026 18:06:16 +0000
Subject: [PATCH] Deploy

---
 .../sections/LimitedEditionDropsSection.tsx   | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/components/sections/LimitedEditionDropsSection.tsx

diff --git a/src/components/sections/LimitedEditionDropsSection.tsx b/src/components/sections/LimitedEditionDropsSection.tsx
new file mode 100644
index 0000000..93b9345
--- /dev/null
+++ b/src/components/sections/LimitedEditionDropsSection.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Image from 'next/image'
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+import Badge from '@/components/ui/Badge'
+
+export default function LimitedEditionDropsSection() {
+  const { items, loading } = useVulaContent('campaigns')
+
+  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
+
+  const first = items[0]
+  const d = first.data as { title?: string; headline?: string; body?: string; cta_text?: string; image?: string }
+
+  return (
+    <section
+      id="limited-drops"
+      data-vula-section="limitededitiondrops"
+      data-vula-cms="campaigns"
+      className="py-20 bg-[#18181b] text-white"
+    >
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Text side */}
+          <div className="space-y-6">
+            <Badge variant="outline" className="border-[#16a34a] text-[#16a34a] uppercase text-xs">
+              Limited Drop
+            </Badge>
+            <h2 className="text-5xl lg:text-6xl font-black uppercase leading-tight">
+              {d.headline || d.title}
+            </h2>
+            <p className="text-lg text-gray-300 leading-relaxed">
+              {d.body || ''}
+            </p>
+            {d.cta_text && (
+              <Link href="/products">
+                <Button variant="default" size="lg" className="bg-[#16a34a] text-white hover:bg-[#138a3e]">
+                  {d.cta_text}
+                </Button>
+              </Link>
+            )}
+            <div className="border-t-2 border-[#16a34a] pt-4 flex items-center gap-2 text-sm uppercase tracking-wider">
+              <span className="text-[#16a34a]">&#x2713;</span> One-time drop — never restocked
+            </div>
+          </div>
+
+          {/* Image side */}
+          {d.image && (
+            <div className="relative aspect-[4/5] overflow-hidden border-2 border-white shadow-[6px_6px_0_0_#16a34a]">
+              <Image
+                src={d.image}
+                alt={d.title || 'Limited edition drop'}
+                fill
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}