From 3e24e7f22565bd1278b3ab0ffd20e9482a18e425 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 17 Mar 2026 23:12:11 +0000
Subject: [PATCH] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 189 ++++++++++++++++++---------------------
 1 file changed, 89 insertions(+), 100 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 5c8bf37..949865d 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,25 +1,25 @@
 "use client";
 
+import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import Link from "next/link";
-import { AlertCircle } from "lucide-react";
+import { Phone, Clock, AlertCircle } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Home", id: "home" },
-    { name: "Services", id: "services" },
-    { name: "About", id: "about" },
-    { name: "Reviews", id: "reviews" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/services" },
+    { name: "Reviews", id: "/reviews" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Services",
-      items: [
+      title: "Services",      items: [
         { label: "Towing Services", href: "/services" },
         { label: "Roadside Assistance", href: "/services" },
         { label: "Vehicle Transport", href: "/services" },
@@ -27,26 +27,23 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "/about" },
+      title: "Company",      items: [
+        { label: "About Us", href: "#about" },
         { label: "Customer Reviews", href: "/reviews" },
         { label: "Service Area", href: "/services" },
         { label: "Contact Us", href: "/contact" },
       ],
     },
     {
-      title: "Get Help",
-      items: [
+      title: "Get Help",      items: [
         { label: "Call Now", href: "tel:+15619999999" },
         { label: "Request a Quote", href: "/contact" },
-        { label: "FAQ", href: "/" },
+        { label: "FAQ", href: "/#faq" },
         { label: "Service Hours", href: "#" },
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Disclaimer", href: "#" },
@@ -72,104 +69,96 @@ export default function ContactPage() {
           brandName="Shook Towing"
           navItems={navItems}
           button={{
-            text: "Call Now",
-            href: "tel:+15619999999",
-          }}
+            text: "Call Now",            href: "tel:+15619999999"}}
         />
       </div>
 
-      <div id="contact-cta" data-section="contact-cta">
-        <ContactCTA
-          tag="Need Help Right Now?"
-          tagIcon={AlertCircle}
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Get in Touch with Shook Towing"
+          description="Whether you need immediate emergency service or want to schedule a quote, we're here to help. Available 24/7 for your convenience."
+          tag="24/7 Emergency Service"
+          tagIcon={Clock}
           tagAnimation="slide-up"
-          title="Don't Sit Stuck and Stressed"
-          description="One call gets you a professional, friendly driver on the way. Shook Towing is here when you need us most."
           buttons={[
             {
-              text: "Call Now for Immediate Service",
-              href: "tel:+15619999999",
-            },
+              text: "Call Now for Immediate Service",              href: "tel:+15619999999"},
             {
-              text: "Request a Callback",
-              href: "#contact-form",
-            },
+              text: "Fill Out Form Below",              href: "#contact-form"},
           ]}
           buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/mechanic-giving-keys-car-customer_329181-11861.jpg"
+          imageAlt="professional towing service"
+          mediaAnimation="blur-reveal"
           background={{
-            variant: "downward-rays-animated",
-          }}
+            variant: "radial-gradient"}}
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="call-now" data-section="call-now">
+        <ContactCTA
+          tag="Emergency Service"
+          tagIcon={AlertCircle}
+          title="Need Help Right Now?"
+          description="Don't wait. Call us immediately for emergency towing and roadside assistance. We're always ready to help."
+          buttons={[
+            {
+              text: "Call Now: +1 (561) 999-9999",              href: "tel:+15619999999"},
+          ]}
+          background={{
+            variant: "downward-rays-animated"}}
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-16 md:py-24 max-w-2xl">
-        <div className="bg-white rounded-3xl p-8 md:p-12 border border-gray-200 shadow-sm">
-          <h2 className="text-3xl md:text-4xl font-light text-gray-900 mb-2">
-            Get in Touch
-          </h2>
-          <p className="text-gray-600 mb-8">
-            Have questions? We're here to help. Contact us using any of the methods below.
-          </p>
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Request a Quote or Schedule Service"
+          description="Fill out the form below and we'll get back to you as soon as possible. For immediate service, call us directly at +1 (561) 999-9999. Your information helps us provide the best service possible."
+          inputs={[
+            {
+              name: "name",              type: "text",              placeholder: "Your Name",              required: true,
+            },
+            {
+              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: true,
+            },
+            {
+              name: "location",              type: "text",              placeholder: "Your Location",              required: true,
+            },
+            {
+              name: "vehicleType",              type: "text",              placeholder: "Vehicle Type (e.g., Sedan, Truck, SUV)",              required: false,
+            },
+          ]}
+          textarea={{
+            name: "issue",            placeholder: "What's going on? (Describe your issue or service need)",            rows: 5,
+            required: true,
+          }}
+          useInvertedBackground={false}
+          buttonText="Submit Request"
+        />
+      </div>
 
-          <div className="space-y-6">
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                Call Us Anytime
-              </h3>
-              <a
-                href="tel:+15619999999"
-                className="text-2xl font-light text-indigo-600 hover:text-indigo-700 transition-colors"
-              >
-                (561) 999-9999
-              </a>
-              <p className="text-sm text-gray-600 mt-1">Available 24/7 for emergencies</p>
-            </div>
-
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                Service Area
-              </h3>
-              <p className="text-gray-600">
-                Corpus Christi and surrounding areas in Texas
-              </p>
-            </div>
-
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                Response Time
-              </h3>
-              <p className="text-gray-600">
-                Average response time: 20-30 minutes
-              </p>
-            </div>
-
-            <div className="pt-6 border-t border-gray-200">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                Why Choose Shook Towing?
-              </h3>
-              <ul className="space-y-2 text-gray-600">
-                <li className="flex items-start">
-                  <span className="text-indigo-600 mr-2">✓</span>
-                  <span>Professional and courteous drivers</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-indigo-600 mr-2">✓</span>
-                  <span>Fair, honest pricing with no hidden fees</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-indigo-600 mr-2">✓</span>
-                  <span>24/7 emergency service</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-indigo-600 mr-2">✓</span>
-                  <span>Licensed and insured</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-indigo-600 mr-2">✓</span>
-                  <span>Fast response times in Corpus Christi</span>
-                </li>
-              </ul>
+      <div id="reassurance" data-section="reassurance">
+        <div className="py-16 px-4">
+          <div className="max-w-3xl mx-auto text-center">
+            <h2 className="text-3xl font-bold mb-6">Why You Can Trust Us</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="p-6">
+                <Phone className="w-12 h-12 mx-auto mb-4" />
+                <h3 className="font-semibold mb-2">Always Available</h3>
+                <p className="text-sm opacity-75">Open 24/7, every day of the week for emergencies and scheduled service. Your problem doesn't wait, neither do we.</p>
+              </div>
+              <div className="p-6">
+                <AlertCircle className="w-12 h-12 mx-auto mb-4" />
+                <h3 className="font-semibold mb-2">Fast & Reliable</h3>
+                <p className="text-sm opacity-75">Average response time of 20-30 minutes. Professional drivers with real expertise, not just a hook and winch.</p>
+              </div>
+              <div className="p-6">
+                <Clock className="w-12 h-12 mx-auto mb-4" />
+                <h3 className="font-semibold mb-2">Fair Pricing</h3>
+                <p className="text-sm opacity-75">Transparent, competitive rates with no surprise fees. We believe in treating people right, not taking advantage.</p>
+              </div>
             </div>
           </div>
         </div>