Update theme colors

Merge version_7 into main

src/app/contact/page.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Mail, MapPin, Phone, Clock, Facebook, Twitter, Linkedin, Instagram } from "lucide-react";
+import { useState } from "react";
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    phone: ""
+  });
+
+  const handleFormSubmit = (data: Record<string, string>) => {
+    console.log("Contact form submitted:", data);
+    setFormData({ name: "", email: "", phone: "" });
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSizeMediumTitles"
+      background="aurora"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Dallas Automotive"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Why Us", id: "about" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Book Service",            href: "/"
+          }}
+        />
+      </div>
+
+      <div id="contact" data-section="contact" className="py-20">
+        <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+          {/* Left Column - Contact Info */}
+          <div className="space-y-8">
+            <div>
+              <h1 className="text-5xl font-bold mb-4">Get in Touch</h1>
+              <p className="text-lg text-gray-600">Have questions about our services? We're here to help. Contact us through any of the methods below or fill out the form.</p>
+            </div>
+
+            {/* Location */}
+            <div className="flex gap-4 items-start">
+              <div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
+                <MapPin className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg mb-1">Location</h3>
+                <p className="text-gray-600">Visit us at our facility</p>
+                <p className="font-semibold mt-2">
+                  Dallas Automotive<br />
+                  1234 Motor Lane<br />
+                  Dallas, TX 75001
+                </p>
+              </div>
+            </div>
+
+            {/* Business Hours */}
+            <div className="flex gap-4 items-start">
+              <div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
+                <Clock className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg mb-1">Business Hours</h3>
+                <div className="text-gray-600 space-y-1">
+                  <p>Monday - Friday: 8:00 AM - 6:00 PM</p>
+                  <p>Saturday: 9:00 AM - 4:00 PM</p>
+                  <p>Sunday: Closed</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Phone */}
+            <div className="flex gap-4 items-start">
+              <div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
+                <Phone className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg mb-1">Phone</h3>
+                <p className="text-gray-600">Call us for immediate assistance</p>
+                <a href="tel:+19722728000" className="text-primary-cta font-semibold text-lg hover:underline mt-2 block">
+                  +1 (972) 272-8000
+                </a>
+              </div>
+            </div>
+
+            {/* Email */}
+            <div className="flex gap-4 items-start">
+              <div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
+                <Mail className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg mb-1">Email</h3>
+                <p className="text-gray-600">Send us your inquiry</p>
+                <a href="mailto:info@dallasautomotive.com" className="text-primary-cta font-semibold hover:underline mt-2 block">
+                  info@dallasautomotive.com
+                </a>
+              </div>
+            </div>
+
+            {/* Social Media */}
+            <div>
+              <h3 className="font-semibold text-lg mb-4">Follow Us</h3>
+              <div className="flex gap-4">
+                <a href="#" className="bg-primary-cta p-3 rounded-lg hover:opacity-90 transition">
+                  <Facebook className="w-5 h-5 text-white" />
+                </a>
+                <a href="#" className="bg-primary-cta p-3 rounded-lg hover:opacity-90 transition">
+                  <Twitter className="w-5 h-5 text-white" />
+                </a>
+                <a href="#" className="bg-primary-cta p-3 rounded-lg hover:opacity-90 transition">
+                  <Linkedin className="w-5 h-5 text-white" />
+                </a>
+                <a href="#" className="bg-primary-cta p-3 rounded-lg hover:opacity-90 transition">
+                  <Instagram className="w-5 h-5 text-white" />
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column - Contact Form & Interactive Google Map */}
+          <div className="space-y-8">
+            {/* Contact Form */}
+            <ContactSplitForm
+              title="Send us a Message"
+              description="Fill out the form below and we'll get back to you as soon as possible."
+              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 }
+              ]}
+              textarea={{ name: "message", placeholder: "Tell us about your service needs...", rows: 5, required: true }}
+              buttonText="Send Message"
+              onSubmit={handleFormSubmit}
+              useInvertedBackground={false}
+              mediaAnimation="blur-reveal"
+            />
+
+            {/* Interactive Google Map */}
+            <div className="bg-gray-200 rounded-lg overflow-hidden h-96 border-2 border-primary-cta/20 shadow-lg">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3357.7482627688043!2d-96.80667!3d32.7767!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864e9e0d4a4a4a4b%3A0x4a4a4a4a4a4a4a4a!2s1234%20Motor%20Lane%2C%20Dallas%2C%20TX!5e0!3m2!1sen!2sus!4v1234567890"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Oil Changes", href: "/#services" },
+                { label: "Brake Service", href: "/#services" },
+                { label: "Tire Services", href: "/#services" },
+                { label: "Diagnostics", href: "/#services" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/#about" },
+                { label: "Why Us", href: "/#about" },
+                { label: "Testimonials", href: "/#testimonials" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Warranty Info", href: "#" },
+                { label: "Schedule Service", href: "/#contact" },
+                { label: "Contact Us", href: "/contact" }
+              ]
+            }
+          ]}
+          copyrightText="© 2024 Dallas Automotive. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -7,12 +7,42 @@ import FeatureHoverPattern from "@/components/sections/feature/featureHoverPatte
 import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
 import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
 import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { Award, CheckCircle, Cog, Droplets, Gauge, Phone, Rotate3D, Shield, TrendingUp, Wrench, Zap } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [serviceDescription, setServiceDescription] = useState("");
+  const [selectedService, setSelectedService] = useState("");
+
+  const serviceOptions = [
+    "Oil Change",    "Oil Lube and Filter",    "Brakes",    "Brake jobs pads rotors inspections",    "Heat or A/C",    "No heat no A/C inspections",    "Battery",    "Replacement recharge starter",    "Engine and Transmission",    "Diagnosis fluids drivetrain",    "Scheduled Maintenance",    "Based on vehicle mileage",    "Diagnostics",    "Mechanical and or Electrical",    "Mobile Services",    "Mobile Diagnostics and or Repairs"
+  ];
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setPhoneNumber("");
+    setServiceDescription("");
+    setSelectedService("");
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form submitted:", { phoneNumber, serviceDescription, selectedService });
+    handleCloseModal();
+  };
+
+  const handlePhoneClick = () => {
+    window.location.href = "tel:+19722728000";
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -33,10 +63,10 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Why Us", id: "about" },
             { name: "Testimonials", id: "testimonials" },
-            { name: "FAQ", id: "faq" }
+            { name: "Contact", id: "contact" }
           ]}
           button={{
-            text: "Book Service",            href: "#contact"
+            text: "Book Service",            onClick: handleOpenModal
           }}
         />
       </div>
@@ -50,7 +80,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           background={{ variant: "radial-gradient" }}
           buttons={[
-            { text: "Book Service Now", href: "#contact" },
+            { text: "Book Service Now", onClick: handleOpenModal },
             { text: "Learn More", href: "#services" }
           ]}
           buttonAnimation="slide-up"
@@ -115,7 +145,7 @@ export default function LandingPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[{ text: "Schedule Your Service", href: "#contact" }]}
+          buttons={[{ text: "Schedule Your Service", onClick: handleOpenModal }]}
           buttonAnimation="slide-up"
         />
       </div>
@@ -182,35 +212,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="faq" data-section="faq">
-        <FaqSplitText
-          sideTitle="Frequently Asked Questions"
-          sideDescription="Got questions about our services? We've got answers. Contact us directly if you don't find what you need."
-          buttons={[{ text: "Contact Us", href: "#contact" }]}
-          buttonAnimation="slide-up"
-          faqsAnimation="slide-up"
-          textPosition="left"
-          useInvertedBackground={false}
-          faqs={[
-            {
-              id: "faq-1",              title: "How often should I get an oil change?",              content: "Most modern vehicles need an oil change every 5,000 to 7,500 miles or every 6 months, whichever comes first. Check your owner's manual for specific recommendations for your vehicle."
-            },
-            {
-              id: "faq-2",              title: "Do you offer warranty on repairs?",              content: "Yes! We stand behind our work with a 12-month or 12,000-mile warranty on all repairs, whichever comes first. This gives you peace of mind and confidence in our service."
-            },
-            {
-              id: "faq-3",              title: "How long does a typical service take?",              content: "Basic maintenance like oil changes typically take 30-45 minutes. More complex repairs vary depending on the issue. We'll provide an estimate upfront and keep you updated on progress."
-            },
-            {
-              id: "faq-4",              title: "What payment options do you accept?",              content: "We accept all major credit cards, debit cards, checks, and cash. We also offer financing options for larger repairs to help make service more affordable."
-            },
-            {
-              id: "faq-5",              title: "Can you work on my specific vehicle brand?",              content: "Yes! Our ASE-certified technicians have experience with all makes and models, from domestic vehicles to imports. Whether it's Honda, Ford, Toyota, or any other brand, we can help."
-            }
-          ]}
-        />
-      </div>
-
       <div id="contact" data-section="contact">
         <ContactCenter
           tag="Get in Touch"
@@ -247,7 +248,6 @@ export default function LandingPage() {
             },
             {
               title: "Support",              items: [
-                { label: "FAQ", href: "#faq" },
                 { label: "Warranty Info", href: "#" },
                 { label: "Schedule Service", href: "#contact" },
                 { label: "Contact Us", href: "#contact" }
@@ -257,6 +257,116 @@ export default function LandingPage() {
           copyrightText="© 2024 Dallas Automotive. All rights reserved."
         />
       </div>
+
+      {/* Service Booking Modal */}
+      {isModalOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          onClick={handleCloseModal}
+        >
+          <div
+            className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-2xl font-bold text-foreground">Book Service</h2>
+              <button
+                onClick={handleCloseModal}
+                className="text-gray-500 hover:text-gray-700 text-2xl"
+                aria-label="Close modal"
+              >
+                ×
+              </button>
+            </div>
+
+            <div className="mb-4 p-3 bg-blue-50 rounded-md border border-blue-200">
+              <p className="text-sm text-foreground font-medium mb-2">Confused? Give us a call!</p>
+              <button
+                onClick={handlePhoneClick}
+                className="text-blue-600 hover:text-blue-800 font-semibold text-lg"
+              >
+                +1 (972) 272-8000
+              </button>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label
+                  htmlFor="phone"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Phone Number
+                </label>
+                <input
+                  id="phone"
+                  type="tel"
+                  placeholder="(555) 123-4567"
+                  value={phoneNumber}
+                  onChange={(e) => setPhoneNumber(e.target.value)}
+                  required
+                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="service"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Service Type (Optional)
+                </label>
+                <select
+                  id="service"
+                  value={selectedService}
+                  onChange={(e) => setSelectedService(e.target.value)}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground bg-white"
+                >
+                  <option value="">Select a service...</option>
+                  {serviceOptions.map((service, index) => (
+                    <option key={index} value={service}>
+                      {service}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="description"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Service Description
+                </label>
+                <textarea
+                  id="description"
+                  placeholder="Tell us what service you need..."
+                  value={serviceDescription}
+                  onChange={(e) => setServiceDescription(e.target.value)}
+                  required
+                  rows={4}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground"
+                />
+              </div>
+
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={handleCloseModal}
+                  className="flex-1 px-4 py-2 border border-gray-300 text-foreground rounded-md hover:bg-gray-50 font-medium transition"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 bg-primary-cta text-white rounded-md hover:opacity-90 font-medium transition"
+                >
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </ThemeProvider>
   );
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
-  --card: #f1f8ff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --background: #060000;
+  --card: #1d0d0d;
+  --foreground: #654040;
+  --primary-cta: #8e242b;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #1f0a0a;
+  --secondary-cta-text: #b84040;
+  --accent: #7b2d2d;
+  --background-accent: #b8111f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);