Deploy

2026-07-28 12:39:43 +00:00
parent 5913224928
commit 1c6b941e84
1 changed files with 87 additions and 0 deletions
@@ -0,0 +1,87 @@
+'use client'
+import { useState } from 'react'
+import { Mail, MessageCircle, Send } from 'lucide-react'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function EnquiryFormSection() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [message, setMessage] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitted(true)
+  }
+  return (
+    <section data-vula-section="enquiryform" id="contact" className="py-20 bg-[#f4f5f2]">
+      <div className="container mx-auto px-4 max-w-5xl">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+          <div className="relative">
+            <div className="relative rounded-3xl overflow-hidden shadow-xl">
+              <Image
+                src="https://images.pexels.com/photos/18459701/pexels-photo-18459701.jpeg?auto=compress&cs=tinysrgb&h=350&w=250"
+                alt="Mama Ngema in workshop"
+                width={400}
+                height={500}
+                className="object-cover w-full h-full"
+              />
+            </div>
+            <div className="absolute -bottom-4 -right-4 bg-white rounded-full px-6 py-3 shadow-lg">
+              <p className="text-sm font-medium text-[#6b8e23]">Sawubona! Ask me anything.</p>
+            </div>
+          </div>
+          <div>
+            <p className="text-sm uppercase tracking-wider text-[#6b8e23] mb-2">Talk to Mama Ngema</p>
+            <h2 className="text-3xl font-bold text-[#2c331f] mb-4">Ask me about ingredients, orders, or skincare rituals</h2>
+            <p className="text-[#8b5a3c] mb-6">I reply within 24 hours. You can also reach me directly on WhatsApp or email.</p>
+            {submitted ? (
+              <div className="bg-white rounded-xl p-6 shadow-md text-center">
+                <p className="text-lg font-semibold text-[#6b8e23]">Siyabonga! Your message has been received.</p>
+                <p className="text-sm text-[#8b5a3c] mt-2">I'll get back to you soon.</p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <Input
+                  type="text"
+                  placeholder="Your name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                />
+                <Input
+                  type="email"
+                  placeholder="Your email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+                <textarea
+                  placeholder="Your message..."
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  required
+                  rows={4}
+                  className="w-full rounded-lg border border-[#daddd4] bg-white px-4 py-3 text-sm text-[#2c331f] placeholder:text-[#8b5a3c]/60 focus:outline-none focus:ring-2 focus:ring-[#6b8e23]"
+                />
+                <Button type="submit" variant="default" className="w-full">
+                  <Send className="w-4 h-4 mr-2" />
+                  Send Message
+                </Button>
+              </form>
+            )}
+            <div className="mt-6 flex flex-wrap gap-3">
+              <a href="mailto:hello@ngemanaturals.co.za" className="flex items-center gap-2 text-[#6b8e23] underline text-sm">
+                <Mail className="w-4 h-4" /> hello@ngemanaturals.co.za
+              </a>
+              <a href="https://wa.me/27612345678" className="flex items-center gap-2 text-[#6b8e23] underline text-sm" target="_blank" rel="noopener noreferrer">
+                <MessageCircle className="w-4 h-4" /> WhatsApp
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}