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

---
 src/app/contact/page.tsx | 166 ++++++++++++++++++---------------------
 1 file changed, 75 insertions(+), 91 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 295939b..be245f1 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,19 +2,18 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ContactForm from '@/components/form/ContactForm';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Mail, Phone, MapPin, Clock } from 'lucide-react';
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Home", id: "home" },
+    { name: "Home", id: "/" },
     { name: "Services", id: "services" },
-    { name: "Gallery", id: "/gallery" },
+    { name: "Gallery", id: "gallery" },
     { name: "Packages", id: "packages" },
     { name: "About", id: "about" },
-    { name: "Book Event", id: "/booking" },
+    { name: "Booking", id: "/booking" },
     { name: "Contact", id: "/contact" },
   ];
 
@@ -56,6 +55,11 @@ export default function ContactPage() {
     },
   ];
 
+  const handleContactSubmit = (data: Record<string, string>) => {
+    console.log("Contact inquiry:", data);
+    // Handle form submission
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -78,104 +82,84 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="contact-hero" data-section="contact-hero" className="mx-auto px-4 md:px-6 py-16">
-        <div className="max-w-3xl mx-auto text-center">
-          <h1 className="text-5xl lg:text-6xl font-extrabold mb-6">Get in Touch</h1>
-          <p className="text-xl opacity-90 mb-8">
-            Have questions about our services? Want to discuss your event in detail? We're here to help! Reach out and let's create something unforgettable together. Our team is dedicated to making your event a success with exceptional service and creative artistry.
-          </p>
-        </div>
+      <div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 lg:px-8 min-h-screen py-12 sm:py-16 lg:py-20">
+        <ContactSplitForm
+          title="Get In Touch - Contact Paintasy"
+          description="Have questions? Want to chat about your event? We'd love to hear from you! Reach out and let's create something amazing together. Our friendly team is here to help and answer any questions about our face painting and body art services."
+          imageSrc="http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1"
+          imageAlt="Creative face painting and body art"
+          mediaAnimation="blur-reveal"
+          mediaPosition="right"
+          useInvertedBackground={false}
+          inputs={[
+            {
+              name: "fullName",              type: "text",              placeholder: "Your Full Name",              required: true,
+              className: "w-full px-4 py-3 rounded-lg border-2 border-gradient-to-r from-orange-300 to-pink-300 focus:outline-none focus:ring-2 focus:ring-orange-500 bg-white text-gray-900 placeholder-gray-500 transition-all duration-300"},
+            {
+              name: "email",              type: "email",              placeholder: "Your Email Address",              required: true,
+              className: "w-full px-4 py-3 rounded-lg border-2 border-gradient-to-r from-yellow-300 to-orange-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 bg-white text-gray-900 placeholder-gray-500 transition-all duration-300"},
+            {
+              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: true,
+              className: "w-full px-4 py-3 rounded-lg border-2 border-gradient-to-r from-green-300 to-teal-300 focus:outline-none focus:ring-2 focus:ring-green-500 bg-white text-gray-900 placeholder-gray-500 transition-all duration-300"},
+            {
+              name: "subject",              type: "text",              placeholder: "Subject of Your Message",              required: true,
+              className: "w-full px-4 py-3 rounded-lg border-2 border-gradient-to-r from-blue-300 to-indigo-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500 transition-all duration-300"},
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Your Message - Tell us how we can help! Questions about services, pricing, availability, or anything else?",            rows: 6,
+            required: true,
+            className: "w-full px-4 py-3 rounded-lg border-2 border-gradient-to-r from-purple-300 to-pink-300 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white text-gray-900 placeholder-gray-500 resize-none transition-all duration-300"}}
+          buttonText="Send Message"
+          onSubmit={handleContactSubmit}
+          ariaLabel="Contact form"
+          containerClassName="gap-8 lg:gap-12"
+          titleClassName="text-3xl sm:text-4xl lg:text-5xl font-extrabold"
+          descriptionClassName="text-base sm:text-lg opacity-90 max-w-2xl"
+          formCardClassName="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 rounded-2xl p-6 sm:p-8 border-2 border-emerald-200 shadow-xl"
+          buttonClassName="bg-gradient-to-r from-green-500 via-emerald-500 to-teal-500 hover:from-green-600 hover:via-emerald-600 hover:to-teal-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 w-full sm:w-auto shadow-lg"
+          buttonTextClassName="text-white font-extrabold"
+        />
       </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">
-          <ContactForm
-            title="Send us a Message"
-            description="Fill out the form below and we'll get back to you as soon as possible. For urgent inquiries, please call us directly."
-            tag="Contact Us"
-            tagIcon={Mail}
-            inputPlaceholder="Your email address"
-            buttonText="Send Message"
-            termsText="We'll use your email to respond to your inquiry. We respect your privacy and won't share your information."
-            centered={true}
-            useInvertedBackground={false}
-            onSubmit={(email) => {
-              console.log('Contact form submission from:', email);
-            }}
-            className="w-full"
-            titleClassName="text-3xl font-extrabold mb-4"
-            descriptionClassName="text-base opacity-90 mb-8"
-            tagClassName="mb-4"
-            formWrapperClassName="mt-8"
-          />
-        </div>
-      </div>
+      <div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 lg:px-8 py-12 sm:py-16 lg:py-20 bg-gradient-to-r from-purple-100 via-pink-100 to-blue-100 rounded-2xl mb-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div className="flex flex-col items-center text-center p-6 bg-white rounded-xl shadow-md border-2 border-purple-200 transform hover:scale-105 transition-transform duration-300">
+            <Phone className="w-12 h-12 text-purple-500 mb-4" />
+            <h3 className="text-xl font-extrabold mb-2">Call Us</h3>
+            <p className="text-gray-600">+1 (555) 123-4567</p>
+            <p className="text-sm text-gray-500 mt-1">Mon-Sat, 9AM-6PM</p>
+          </div>
 
-      <div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-16">
-        <div className="max-w-4xl mx-auto">
-          <h2 className="text-3xl font-extrabold mb-12 text-center">Other Ways to Reach Us</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div className="p-8 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg">
-              <div className="flex items-center gap-4 mb-4">
-                <Phone className="w-8 h-8 text-blue-600" />
-                <h3 className="text-xl font-bold">Phone</h3>
-              </div>
-              <p className="text-lg font-semibold text-blue-600 mb-2">+1 (555) 123-4567</p>
-              <p className="opacity-80">Call us Monday to Friday, 9am to 6pm EST. We're available for event consultations and urgent bookings.</p>
-            </div>
-            <div className="p-8 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg">
-              <div className="flex items-center gap-4 mb-4">
-                <Mail className="w-8 h-8 text-purple-600" />
-                <h3 className="text-xl font-bold">Email</h3>
-              </div>
-              <p className="text-lg font-semibold text-purple-600 mb-2">paintasy@events.com</p>
-              <p className="opacity-80">Email us anytime! We respond to all inquiries within 24 hours, often sooner.</p>
-            </div>
-            <div className="p-8 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg">
-              <div className="flex items-center gap-4 mb-4">
-                <MapPin className="w-8 h-8 text-green-600" />
-                <h3 className="text-xl font-bold">Service Area</h3>
-              </div>
-              <p className="text-lg font-semibold text-green-600 mb-2">Local & Regional Coverage</p>
-              <p className="opacity-80">We serve the greater metropolitan area and surrounding regions for events of all sizes.</p>
-            </div>
-            <div className="p-8 bg-gradient-to-br from-orange-50 to-red-50 rounded-lg">
-              <div className="flex items-center gap-4 mb-4">
-                <Clock className="w-8 h-8 text-orange-600" />
-                <h3 className="text-xl font-bold">Response Time</h3>
-              </div>
-              <p className="text-lg font-semibold text-orange-600 mb-2">Quick Turnaround</p>
-              <p className="opacity-80">We typically respond within 24 hours. Rush bookings welcome—just let us know!</p>
-            </div>
+          <div className="flex flex-col items-center text-center p-6 bg-white rounded-xl shadow-md border-2 border-pink-200 transform hover:scale-105 transition-transform duration-300">
+            <Mail className="w-12 h-12 text-pink-500 mb-4" />
+            <h3 className="text-xl font-extrabold mb-2">Email Us</h3>
+            <p className="text-gray-600">paintasy@events.com</p>
+            <p className="text-sm text-gray-500 mt-1">We reply within 24 hours</p>
+          </div>
+
+          <div className="flex flex-col items-center text-center p-6 bg-white rounded-xl shadow-md border-2 border-blue-200 transform hover:scale-105 transition-transform duration-300">
+            <MapPin className="w-12 h-12 text-blue-500 mb-4" />
+            <h3 className="text-xl font-extrabold mb-2">Location</h3>
+            <p className="text-gray-600">Serving Regional Area</p>
+            <p className="text-sm text-gray-500 mt-1">Mobile entertainment</p>
+          </div>
+
+          <div className="flex flex-col items-center text-center p-6 bg-white rounded-xl shadow-md border-2 border-green-200 transform hover:scale-105 transition-transform duration-300">
+            <Clock className="w-12 h-12 text-green-500 mb-4" />
+            <h3 className="text-xl font-extrabold mb-2">Hours</h3>
+            <p className="text-gray-600">9AM - 6PM</p>
+            <p className="text-sm text-gray-500 mt-1">Open weekends for events</p>
           </div>
         </div>
       </div>
 
-      <div id="contact-closing" data-section="contact-closing" className="mx-auto px-4 md:px-6">
-        <ContactText
-          text="Ready to book your event or have more questions? Reach out today and let's start planning your creative experience!"
-          animationType="background-highlight"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Book Now", href: "/booking" },
-            { text: "Call Now", href: "tel:+15551234567" },
-          ]}
-          ariaLabel="Contact closing call-to-action section"
-          containerClassName="py-16"
-          contentClassName="max-w-3xl mx-auto"
-          textClassName="text-4xl font-extrabold text-center"
-          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
-        />
-      </div>
-
-      <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6">
+      <div id="footer-contact" data-section="footer-contact" className="mx-auto px-4 md:px-6 lg:px-8">
         <FooterSimple
           columns={footerColumns}
           bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
           bottomRightText="Professional Event Entertainment | Creative Services"
           ariaLabel="Site footer with links"
-          containerClassName="gap-12"
+          containerClassName="gap-8 lg:gap-12"
           columnsClassName="grid-cols-2 lg:grid-cols-4"
           columnTitleClassName="font-extrabold text-lg"
           columnItemClassName="hover:opacity-70 transition-opacity"