Deploy

src/components/sections/ContactFormSection.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import Input from '@/components/ui/Input'
+import Button from '@/components/ui/Button'
+import { Leaf, Send } from 'lucide-react'
+
+export default function ContactFormSection() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: '',
+    reservation: '',
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Simulate form submission
+    alert('Thank you for reaching out! We will respond within 24 hours.')
+    setFormData({ name: '', email: '', message: '', reservation: '' })
+  }
+
+  const handleChange = (field: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData((prev) => ({ ...prev, [field]: e.target.value }))
+  }
+
+  return (
+    <section data-vula-section="contactform" id="contact" className="py-24 bg-[#F1F8E9]">
+      <div className="max-w-2xl mx-auto px-6">
+        <div className="text-center mb-14">
+          <Leaf className="w-8 h-8 text-[#4CAF50] mx-auto mb-4" />
+          <h2 className="text-4xl font-bold text-[#1B3A1F]">Get in Touch</h2>
+          <p className="text-[#2E7D32] mt-3">
+            We&rsquo;d love to hear from you. Send us a message or request a reservation.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <Input
+            type="text"
+            placeholder="Your Name"
+            value={formData.name}
+            onChange={handleChange('name')}
+            className="border-[#8BC34A] focus:ring-[#8BC34A]"
+            required
+          />
+          <Input
+            type="email"
+            placeholder="Your Email"
+            value={formData.email}
+            onChange={handleChange('email')}
+            className="border-[#8BC34A] focus:ring-[#8BC34A]"
+            required
+          />
+          <textarea
+            placeholder="Your Message"
+            value={formData.message}
+            onChange={handleChange('message')}
+            rows={4}
+            className="w-full rounded-xl border border-[#8BC34A] bg-white px-4 py-3 text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#8BC34A] transition-shadow"
+            required
+          />
+          <Input
+            type="text"
+            placeholder="Reservation request (optional)"
+            value={formData.reservation}
+            onChange={handleChange('reservation')}
+            className="border-[#8BC34A] focus:ring-[#8BC34A]"
+          />
+          <Button
+            type="submit"
+            className="w-full bg-[#2E7D32] hover:bg-[#1B3A1F] text-white py-3 rounded-xl font-semibold transition-all duration-200 ease-out flex items-center justify-center gap-2"
+          >
+            <Send className="w-4 h-4" />
+            Send Message
+          </Button>
+        </form>
+      </div>
+    </section>
+  )
+}