Deploy

src/components/sections/JoinTheHustleCTASection.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useState } from 'react'
+
+export default function JoinTheHustleCTASection() {
+  const [email, setEmail] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (email) setSubmitted(true)
+  }
+
+  return (
+    <section data-vula-section="jointhehustlecta" id="shop-cta" className="bg-[#18181b] text-white py-20 px-6">
+      <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+        <div>
+          <h2 className="text-5xl font-bold uppercase leading-tight">Claim Your Stripes</h2>
+          <p className="mt-4 text-lg">Limited drops, bold African prints. Join the movement.</p>
+          <div className="mt-8 flex flex-wrap gap-4 items-center">
+            <Link href="/products">
+              <Button
+                variant="default"
+                size="lg"
+                className="bg-[#ea580c] hover:bg-[#d94d0a] border-2 border-[#ea580c] shadow-[4px_4px_0_0_#d4a017] transition-all duration-200"
+              >
+                Shop the Drop
+              </Button>
+            </Link>
+            {!submitted ? (
+              <form onSubmit={handleSubmit} className="flex gap-2 items-center">
+                <Input
+                  type="email"
+                  placeholder="Enter email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="border-2 border-white bg-transparent text-white placeholder-gray-400"
+                  required
+                />
+                <Button
+                  type="submit"
+                  variant="outline"
+                  size="lg"
+                  className="border-2 border-[#d4a017] text-[#d4a017] hover:bg-[#d4a017] hover:text-black shadow-[4px_4px_0_0_#d4a017] transition-all duration-200"
+                >
+                  Get Early Access
+                </Button>
+              </form>
+            ) : (
+              <p className="text-[#16a34a] text-lg font-semibold">You're in. Welcome to the movement.</p>
+            )}
+          </div>
+        </div>
+        <div className="relative h-64 md:h-80 overflow-hidden border-2 border-[#ea580c] shadow-[6px_6px_0_0_#d4a017]">
+          <Image
+            src="https://images.pexels.com/photos/4903412/pexels-photo-4903412.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+            alt="Street style in Soweto"
+            fill
+            className="object-cover"
+            sizes="(max-width: 768px) 100vw, 50vw"
+          />
+        </div>
+      </div>
+    </section>
+  )
+}