Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -2,19 +2,17 @@
 
 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 ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Mail, Phone, MapPin, Clock } from 'lucide-react';
+import { Mail, Phone, MapPin } from 'lucide-react';
 
 export default function ContactPage() {
   const navItems = [
     { name: "Home", id: "home" },
     { name: "Services", id: "services" },
     { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "packages" },
+    { name: "Packages", id: "/packages" },
     { name: "About", id: "about" },
-    { name: "Book Event", id: "/booking" },
     { name: "Contact", id: "/contact" },
   ];
 
@@ -50,7 +48,7 @@ export default function ContactPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/booking" },
+        { label: "Book Now", href: "/packages" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
@@ -78,94 +76,27 @@ 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>
-
-      <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 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>
-        </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"
+      <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}
-          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"
+          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>