Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -2,17 +2,30 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Mail, Phone, MapPin } from 'lucide-react';
+import { useState } from 'react';
+import { Mail, Phone, MapPin, Clock, CheckCircle } from 'lucide-react';
 
 export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    message: '',
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
   const navItems = [
-    { name: "Home", id: "home" },
-    { name: "Services", id: "services" },
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/#services" },
     { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "/packages" },
-    { name: "About", id: "about" },
+    { name: "Packages", id: "/#packages" },
+    { name: "About", id: "/#about" },
+    { name: "Booking", id: "/booking" },
     { name: "Contact", id: "/contact" },
   ];
 
@@ -28,10 +41,10 @@ export default function ContactPage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/about" },
+        { label: "About Us", href: "/#about" },
         { label: "Gallery", href: "/gallery" },
-        { label: "Packages", href: "/packages" },
-        { label: "FAQ", href: "#faq" },
+        { label: "Packages", href: "/#packages" },
+        { label: "FAQ", href: "/#faq" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -48,12 +61,23 @@ export default function ContactPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/packages" },
+        { label: "Book Now", href: "/booking" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
   ];
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setTimeout(() => setSubmitted(false), 5000);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -76,30 +100,221 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="contact-split" data-section="contact-split" className="mx-auto px-4 md:px-6 py-20">
-        <ContactSplit
-          tag="Get in Touch"
-          title="Book Your Event Today"
-          description="Transform your celebration with professional face and body art. Quick response times, flexible scheduling, and creative designs tailored to your event. Let's make your event unforgettable!"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          mediaPosition="right"
-          inputPlaceholder="Enter your email"
-          buttonText="Send Message"
-          termsText="By submitting this form, you agree to be contacted about your event inquiry."
-          onSubmit={(email) => {
-            console.log("Form submitted with email:", email);
-          }}
-          ariaLabel="Contact form section"
-          containerClassName="gap-12"
-          tagClassName="text-sm"
-          titleClassName="text-4xl font-extrabold"
-          descriptionClassName="text-lg opacity-90 max-w-2xl"
-          buttonClassName="px-8 py-3"
-          buttonTextClassName="font-semibold"
+      <div id="hero-contact" data-section="hero-contact" className="mx-auto px-4 md:px-6">
+        <HeroLogo
+          logoText="Get In Touch"
+          description="Have questions about our services? Want to discuss your event? We're here to help! Reach out to Paintasy and let's create something amazing together."
+          buttons={[{ text: "Contact Form Below", href: "#contact-form" }]}
+          buttonAnimation="blur-reveal"
+          showDimOverlay={false}
+          ariaLabel="Contact page hero section"
+          className="min-h-screen flex items-center justify-center"
+          containerClassName="text-center"
+          descriptionClassName="text-lg opacity-90 max-w-2xl mx-auto"
+          logoContainerClassName="mb-6"
+          logoClassName="text-5xl md:text-6xl font-extrabold"
         />
       </div>
 
+      <div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-16">
+        <div className="max-w-5xl mx-auto">
+          <h2 className="text-4xl font-extrabold mb-4 text-center">Contact Information</h2>
+          <p className="text-lg opacity-90 text-center mb-12 max-w-2xl mx-auto">Multiple ways to reach us. Choose what works best for you.</p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="bg-white bg-opacity-5 backdrop-blur-sm border border-white border-opacity-10 rounded-lg p-6 text-center hover:bg-opacity-10 transition-all">
+              <Mail className="w-8 h-8 mx-auto mb-4 text-blue-400" />
+              <h3 className="text-lg font-bold mb-2">Email</h3>
+              <a href="mailto:paintasy@events.com" className="text-sm hover:opacity-80 transition-opacity">
+                paintasy@events.com
+              </a>
+              <p className="text-xs opacity-70 mt-2">24-hour response</p>
+            </div>
+
+            <div className="bg-white bg-opacity-5 backdrop-blur-sm border border-white border-opacity-10 rounded-lg p-6 text-center hover:bg-opacity-10 transition-all">
+              <Phone className="w-8 h-8 mx-auto mb-4 text-green-400" />
+              <h3 className="text-lg font-bold mb-2">Phone</h3>
+              <a href="tel:+15551234567" className="text-sm hover:opacity-80 transition-opacity">
+                +1 (555) 123-4567
+              </a>
+              <p className="text-xs opacity-70 mt-2">Call or text anytime</p>
+            </div>
+
+            <div className="bg-white bg-opacity-5 backdrop-blur-sm border border-white border-opacity-10 rounded-lg p-6 text-center hover:bg-opacity-10 transition-all">
+              <MapPin className="w-8 h-8 mx-auto mb-4 text-red-400" />
+              <h3 className="text-lg font-bold mb-2">Location</h3>
+              <p className="text-sm">Serving City Metro Area</p>
+              <p className="text-xs opacity-70 mt-2">Local & Regional Coverage</p>
+            </div>
+
+            <div className="bg-white bg-opacity-5 backdrop-blur-sm border border-white border-opacity-10 rounded-lg p-6 text-center hover:bg-opacity-10 transition-all">
+              <Clock className="w-8 h-8 mx-auto mb-4 text-purple-400" />
+              <h3 className="text-lg font-bold mb-2">Hours</h3>
+              <p className="text-sm">Flexible Availability</p>
+              <p className="text-xs opacity-70 mt-2">Weekend & Evening Events</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-16">
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-4xl font-extrabold mb-4 text-center">Send us a Message</h2>
+          <p className="text-lg opacity-90 text-center mb-12">Fill out the form below and we'll get back to you as soon as possible.</p>
+          
+          {submitted ? (
+            <div className="bg-green-100 border-2 border-green-500 rounded-lg p-8 text-center">
+              <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Message Sent Successfully!</h3>
+              <p className="text-lg opacity-90">Thank you for contacting us. We'll respond within 24 hours.</p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-6 bg-white bg-opacity-5 backdrop-blur-sm p-8 rounded-lg border border-white border-opacity-10">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label htmlFor="name" className="block text-sm font-semibold mb-2">Full Name *</label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    placeholder="Your name"
+                    required
+                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-semibold mb-2">Email Address *</label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    placeholder="your@email.com"
+                    required
+                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="phone" className="block text-sm font-semibold mb-2">Phone Number (Optional)</label>
+                <input
+                  type="tel"
+                  id="phone"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handleInputChange}
+                  placeholder="+1 (555) 000-0000"
+                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="subject" className="block text-sm font-semibold mb-2">Subject *</label>
+                <input
+                  type="text"
+                  id="subject"
+                  name="subject"
+                  value={formData.subject}
+                  onChange={handleInputChange}
+                  placeholder="How can we help?"
+                  required
+                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="message" className="block text-sm font-semibold mb-2">Message *</label>
+                <textarea
+                  id="message"
+                  name="message"
+                  value={formData.message}
+                  onChange={handleInputChange}
+                  placeholder="Tell us about your inquiry, event, or question..."
+                  rows={5}
+                  required
+                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all resize-none"
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105"
+              >
+                Send Message
+              </button>
+              
+              <p className="text-sm opacity-75 text-center">* Required fields. We typically respond within 24 hours.</p>
+            </form>
+          )}
+        </div>
+      </div>
+
+      <div id="location-info" data-section="location-info" className="mx-auto px-4 md:px-6 py-16 bg-white bg-opacity-5 backdrop-blur-sm border-y border-white border-opacity-10">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-4xl font-extrabold mb-4 text-center">Service Coverage</h2>
+          <p className="text-lg opacity-90 text-center mb-12 max-w-2xl mx-auto">We proudly serve the entire metro area and surrounding regions. For events outside our typical service area, contact us to discuss possibilities.</p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div>
+              <h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
+                <MapPin className="w-6 h-6" /> Coverage Areas
+              </h3>
+              <ul className="space-y-2 text-sm">
+                <li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
+                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
+                  Downtown Metro Area
+                </li>
+                <li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
+                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
+                  Suburban Communities
+                </li>
+                <li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
+                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
+                  Regional Events (30+ miles)
+                </li>
+                <li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
+                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
+                  Corporate Offices & Venues
+                </li>
+                <li className="flex items-center gap-2 p-2 hover:bg-white hover:bg-opacity-5 rounded transition-all">
+                  <span className="w-2 h-2 bg-green-400 rounded-full"></span>
+                  Outdoor Festivals & Parks
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
+                <Clock className="w-6 h-6" /> Availability
+              </h3>
+              <ul className="space-y-3 text-sm">
+                <li>
+                  <p className="font-semibold mb-1">Weekday Events</p>
+                  <p className="opacity-75">Evening & special occasion availability</p>
+                </li>
+                <li>
+                  <p className="font-semibold mb-1">Weekend Events</p>
+                  <p className="opacity-75">Saturday & Sunday (book in advance)</p>
+                </li>
+                <li>
+                  <p className="font-semibold mb-1">Holiday Availability</p>
+                  <p className="opacity-75">Seasonal availability varies</p>
+                </li>
+                <li>
+                  <p className="font-semibold mb-1">Advance Booking</p>
+                  <p className="opacity-75">Recommended 2-4 weeks in advance</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6">
         <FooterSimple
           columns={footerColumns}
@@ -114,4 +329,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}