Deploy

src/components/sections/ExclusiveDropSignupSection.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from 'react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function ExclusiveDropSignupSection() {
+  const [email, setEmail] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Placeholder — connect to mailing list API
+    alert('You\'re in the loop. We\'ll hit you up when the next drop lands.')
+    setEmail('')
+  }
+
+  return (
+    <section data-vula-section="exclusivedropsignup" id="drop-signup" className="bg-[#18181b] py-20 px-6">
+      <div className="max-w-3xl mx-auto text-center">
+        <h2 className="text-4xl md:text-5xl font-bold text-white mb-4 uppercase tracking-tight">
+          Stay Ahead of the Drop
+        </h2>
+        <p className="text-lg text-white/80 mb-8 max-w-lg mx-auto">
+          No cap — our best tees sell out fast. Slide your email below and be the first to cop new drops, exclusive collabs, and limited editions.
+        </p>
+        <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+          <Input
+            type="email"
+            placeholder="your@email.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="flex-1 bg-white text-[#18181b] border-0 placeholder:text-gray-400 focus:ring-2 focus:ring-[#36454F]"
+          />
+          <Button type="submit" variant="default" className="bg-white text-[#18181b] hover:opacity-90 font-bold px-6 py-3 rounded-lg">
+            Join the Crew
+          </Button>
+        </form>
+        <p className="text-sm text-white/50 mt-6">
+          No spam, just heat. Unsubscribe anytime.
+        </p>
+      </div>
+    </section>
+  )
+}