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>
  )
 }