Deploy

2026-07-27 18:34:55 +00:00
parent a59f3b1c7b
commit 6e85a72eaf
1 changed files with 62 additions and 0 deletions
@@ -0,0 +1,62 @@
+'use client'
+
+import { useState } from 'react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function NewsletterSection() {
+  const [email, setEmail] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!email) return
+    // In real app: POST to API
+    setSubmitted(true)
+    setEmail('')
+  }
+
+  return (
+    <section data-vula-section="newsletter" id="newsletter" className="py-20 bg-[#18181b] border-t-2 border-[#d4af37]">
+      <div className="max-w-3xl mx-auto px-4 text-center">
+        <h2 className="text-4xl md:text-5xl font-extrabold uppercase tracking-tight text-[#d4af37]">
+          Stay in the Loop,
+          <br />
+          <span className="text-white">Stay Stylish</span>
+        </h2>
+        <p className="mt-4 text-gray-400 text-lg">
+          Early drop alerts, behind-the-scenes, and exclusive access.
+        </p>
+        {submitted ? (
+          <p className="mt-8 text-[#d4af37] font-bold text-xl">
+            🔥 You&apos;re in! Check your inbox for the first drop.
+          </p>
+        ) : (
+          <form onSubmit={handleSubmit} className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
+            <div className="flex-1 max-w-sm mx-auto sm:mx-0">
+              <Input
+                type="email"
+                placeholder="your@email.co.za"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="w-full border-2 border-[#d4af37] bg-transparent text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#d4af37] px-4 py-3"
+              />
+            </div>
+            <Button
+              type="submit"
+              variant="default"
+              size="lg"
+              className="bg-[#d4af37] text-[#18181b] font-bold border-2 border-[#d4af37] shadow-[4px_4px_0_0_#18181b] hover:shadow-[2px_2px_0_0_#18181b] transition-all duration-200 uppercase"
+            >
+              Sign Up
+            </Button>
+          </form>
+        )}
+        <p className="mt-4 text-sm text-gray-500 italic">
+          No spam, just fresh fits.
+        </p>
+      </div>
+    </section>
+  )
+}