Vula Builder
36 lines
1.7 KiB
TypeScript
36 lines
1.7 KiB
TypeScript
'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 — 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>
|
|
)
|
|
} |