Deploy

src/components/sections/CollabEnquirySection.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useState, type FormEvent } from 'react'
+import { Check, Mail, MessageCircle, Send } from 'lucide-react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function CollabEnquirySection() {
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setSubmitted(true)
+  }
+
+  return (
+    <section data-vula-section="collabenquiry" id="collab-enquiry" className="bg-[#18181b] text-white">
+      <div className="grid lg:grid-cols-2">
+        <div className="p-8 md:p-14 border-b-[3px] lg:border-b-0 lg:border-r-[3px] border-[#fbbf24]">
+          <p className="text-xs md:text-sm font-black uppercase tracking-[0.2em] text-[#fbbf24] mb-4">Collab Enquiry</p>
+          <h2 className="font-black uppercase leading-[0.9] text-4xl md:text-6xl">
+            Let's build <span style={{ WebkitTextStroke: "2px #fbbf24", color: "transparent" }}>together</span>
+          </h2>
+          <p className="mt-5 text-white/70 font-medium max-w-md">
+            Brands, wholesalers, creators, DJs, photographers — if your energy matches the kasi, let's talk.
+          </p>
+          <div className="mt-8 space-y-4">
+            <a href="mailto:collab@kasidrip.co.za" className="flex items-center gap-3 font-bold text-[#fbbf24] hover:text-white transition-all duration-200 ease-out">
+              <Mail className="w-5 h-5" /> collab@kasidrip.co.za
+            </a>
+            <a href="https://wa.me/27825550132" target="_blank" rel="noreferrer" className="flex items-center gap-3 font-bold text-[#fbbf24] hover:text-white transition-all duration-200 ease-out">
+              <MessageCircle className="w-5 h-5" /> WhatsApp +27 82 555 0132
+            </a>
+          </div>
+          <p className="mt-6 text-sm text-white/50 font-medium">Kasi Drip HQ // Durban — shipping nationwide.</p>
+        </div>
+        <div className="p-8 md:p-14 bg-[#fbbf24] text-[#18181b]">
+          {submitted ? (
+            <div className="h-full flex flex-col justify-center">
+              <div className="bg-[#18181b] text-[#fbbf24] p-8 border-[3px] border-[#18181b] shadow-[8px_8px_0_0_#18181b]">
+                <Check className="w-8 h-8 mb-4" />
+                <h3 className="font-black uppercase text-2xl">Message received. Aweh.</h3>
+                <p className="mt-3 font-semibold">We reply within 48 hours. Keep an eye on your inbox.</p>
+              </div>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <h3 className="font-black uppercase text-2xl">Tell us about the collab</h3>
+              <div>
+                <label htmlFor="name" className="text-xs font-black uppercase tracking-widest">Your name</label>
+                <Input id="name" required placeholder="Thabo M." className="mt-2 bg-white border-[#18181b]" />
+              </div>
+              <div>
+                <label htmlFor="brand" className="text-xs font-black uppercase tracking-widest">Brand / crew</label>
+                <Input id="brand" required placeholder="Your brand or collective" className="mt-2 bg-white border-[#18181b]" />
+              </div>
+              <div>
+                <label htmlFor="email" className="text-xs font-black uppercase tracking-widest">Email</label>
+                <Input id="email" type="email" required placeholder="you@email.com" className="mt-2 bg-white border-[#18181b]" />
+              </div>
+              <div>
+                <label htmlFor="pitch" className="text-xs font-black uppercase tracking-widest">The pitch</label>
+                <textarea id="pitch" required rows={3} placeholder="Drop your idea in 2 lines..." className="mt-2 w-full bg-white border-[3px] border-[#18181b] p-3 font-medium focus:outline-none focus:ring-2 focus:ring-[#18181b]" />
+              </div>
+              <Button type="submit" size="lg" className="w-full bg-[#18181b] text-[#fbbf24] hover:bg-[#18181b]/90 hover:shadow-[4px_4px_0_0_#18181b] transition-all duration-200 ease-out">
+                <Send className="mr-2 w-5 h-5" /> Send it
+              </Button>
+              <p className="text-xs font-semibold text-[#18181b]/70">Prefer chat? Tap the WhatsApp link on the left.</p>
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}