From ba46ce298a09691251dae9006d830a937ac65396 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Fri, 31 Jul 2026 14:12:31 +0000
Subject: [PATCH] Deploy

---
 src/components/sections/IkayaMailSection.tsx | 36 ++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/sections/IkayaMailSection.tsx

diff --git a/src/components/sections/IkayaMailSection.tsx b/src/components/sections/IkayaMailSection.tsx
new file mode 100644
index 0000000..6191997
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file