From e886ac95ee2c186c0060414180c0d6b8a0e1206d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 14 Mar 2026 05:35:31 +0000
Subject: [PATCH] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 327 +++++++++++++--------------------------
 1 file changed, 105 insertions(+), 222 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 8094132..6e82bee 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,11 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Mail, Phone, MapPin, Clock } from 'lucide-react';
 import { useState } from 'react';
-import { Mail, Phone, MapPin, Clock, CheckCircle } from 'lucide-react';
+
+export const metadata = {
+  title: "Contact Us - Paintasy Face and Body Art",  description: "Get in touch with Paintasy Face and Body Art. Contact us for inquiries, quotes, or general information about our services.",  keywords: "contact face painter, paintasy contact, reach us, customer support"};
 
 export default function ContactPage() {
   const [formData, setFormData] = useState({
@@ -17,14 +20,23 @@ export default function ContactPage() {
     message: '',
   });
 
-  const [submitted, setSubmitted] = useState(false);
+  const handleFormSubmit = (data: Record<string, string>) => {
+    console.log('Contact form submitted:', data);
+    setFormData({
+      name: '',
+      email: '',
+      phone: '',
+      subject: '',
+      message: '',
+    });
+  };
 
   const navItems = [
     { name: "Home", id: "/" },
     { name: "Services", id: "/#services" },
     { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "/#packages" },
-    { name: "About", id: "/#about" },
+    { name: "Packages", id: "/#packages-home" },
+    { name: "About", id: "/#about-home" },
     { name: "Booking", id: "/booking" },
     { name: "Contact", id: "/contact" },
   ];
@@ -41,10 +53,10 @@ export default function ContactPage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/#about" },
+        { label: "About Us", href: "/#about-home" },
         { label: "Gallery", href: "/gallery" },
-        { label: "Packages", href: "/#packages" },
-        { label: "FAQ", href: "/#faq" },
+        { label: "Packages", href: "/#packages-home" },
+        { label: "FAQ", href: "/#faq-home" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -67,17 +79,6 @@ export default function ContactPage() {
     },
   ];
 
-  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"
@@ -100,219 +101,101 @@ export default function ContactPage() {
         />
       </div>
 
-      <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}
+      <div id="contact-hero" data-section="contact-hero" className="mx-auto px-4 md:px-6">
+        <HeroLogoBillboardSplit
+          logoText="Get in Touch"
+          description="Have questions or need more information? We're here to help! Contact us via phone, email, or the form below. We respond to all inquiries within 24 hours."
+          background={{ variant: "radial-gradient" }}
+          buttons={[
+            { text: "Send Message", href: "#contact-form" },
+            { text: "Call Us", href: "tel:+15551234567" },
+          ]}
+          layoutOrder="default"
+          mediaAnimation="blur-reveal"
           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"
+          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12 min-h-screen"
+          logoContainerClassName="flex-1"
+          descriptionClassName="text-lg opacity-90 max-w-2xl"
+          buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
         />
       </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 id="contact-information" data-section="contact-information" className="mx-auto px-4 md:px-6 py-16">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+            <div className="flex items-start gap-4 p-6 rounded-lg border border-gray-200 dark:border-gray-800">
+              <Phone className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
+              <div>
+                <h3 className="font-bold text-lg mb-2">Phone</h3>
+                <p className="text-gray-600 dark:text-gray-400">Call us for immediate assistance</p>
+                <a href="tel:+15551234567" className="text-blue-500 hover:underline font-semibold mt-2 block">
+                  +1 (555) 123-4567
+                </a>
+              </div>
             </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 className="flex items-start gap-4 p-6 rounded-lg border border-gray-200 dark:border-gray-800">
+              <Mail className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
+              <div>
+                <h3 className="font-bold text-lg mb-2">Email</h3>
+                <p className="text-gray-600 dark:text-gray-400">Send us your questions or booking details</p>
+                <a href="mailto:paintasy@events.com" className="text-blue-500 hover:underline font-semibold mt-2 block">
+                  paintasy@events.com
+                </a>
+              </div>
             </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 className="flex items-start gap-4 p-6 rounded-lg border border-gray-200 dark:border-gray-800">
+              <Clock className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
+              <div>
+                <h3 className="font-bold text-lg mb-2">Response Time</h3>
+                <p className="text-gray-600 dark:text-gray-400">We typically respond within 24 hours</p>
+                <p className="text-sm text-gray-500 dark:text-gray-500 mt-2">Available Monday - Sunday</p>
+              </div>
             </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 className="flex items-start gap-4 p-6 rounded-lg border border-gray-200 dark:border-gray-800">
+              <MapPin className="w-6 h-6 text-blue-500 flex-shrink-0 mt-1" />
+              <div>
+                <h3 className="font-bold text-lg mb-2">Service Area</h3>
+                <p className="text-gray-600 dark:text-gray-400">We serve local and regional events</p>
+                <p className="text-sm text-gray-500 dark:text-gray-500 mt-2">Travel available for large events</p>
+              </div>
             </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 id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6">
+        <ContactSplitForm
+          title="Send Us a Message"
+          description="Have a question or special request? Fill out the form below and we'll get back to you as soon as possible. Whether you're interested in booking or just want to learn more, we'd love to hear from you."
+          inputs={[
+            {
+              name: "name",              type: "text",              placeholder: "Your Name",              required: true,
+            },
+            {
+              name: "email",              type: "email",              placeholder: "Your Email",              required: true,
+            },
+            {
+              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: false,
+            },
+            {
+              name: "subject",              type: "text",              placeholder: "Subject",              required: true,
+            },
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Your message here. Tell us about your inquiry, event, or anything else you'd like us to know.",            rows: 6,
+            required: true,
+          }}
+          useInvertedBackground={true}
+          mediaAnimation="blur-reveal"
+          mediaPosition="right"
+          buttonText="Send Message"
+          onSubmit={handleFormSubmit}
+          ariaLabel="Contact form section"
+          containerClassName="py-16 gap-12"
+          formCardClassName="p-8"
+          titleClassName="text-4xl font-extrabold"
+          descriptionClassName="text-lg opacity-90"
+        />
       </div>
 
       <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6">
@@ -329,4 +212,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file