Deploy

src/components/sections/IkayaMailSection.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { useState, type FormEvent } from 'react'
+import { LayoutGrid } from 'lucide-react'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function IkayaMailSection() {
+  const [email, setEmail] = useState('')
+  const [subscribed, setSubscribed] = useState(false)
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (email.trim()) setSubscribed(true)
+  }
+
+  return (
+    <section data-vula-section="ikayamail" id="newsletter" className="bg-[#8b5a3c] px-4 py-16">
+      <div className="mx-auto max-w-3xl rounded-3xl border border-[#e2d9d4] bg-white p-8 text-center shadow-lg sm:p-12">
+        <div className="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-[#f9f5f4] text-[#ea580c]">
+          <LayoutGrid className="h-6 w-6" />
+        </div>
+        <h2 className="font-display text-3xl text-[#21140d] sm:text-4xl">Join the iKhaya family</h2>
+        <p className="mx-auto mt-3 mb-8 max-w-xl text-[#5b463a]">First access to new artisan collections, design inspiration from Durban, and the stories behind every hand-painted pattern. No hard sell &mdash; just an invitation to stay connected.</p>
+        {subscribed ? (
+          <p className="font-semibold text-[#6b8e23]">Sawubona! Check your inbox to confirm your welcome note.</p>
+        ) : (
+          <form onSubmit={handleSubmit} className="mx-auto flex max-w-md flex-col gap-3 sm:flex-row">
+            <Input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Your email address" className="flex-1" />
+            <Button type="submit" variant="default">Sign me up</Button>
+          </form>
+        )}
+      </div>
+    </section>
+  )
+}