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,7 +7,6 @@ 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";
@@ -64,7 +63,7 @@ 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",            onClick: handleOpenModal
@@ -213,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", onClick: handleOpenModal }]}
-          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"
@@ -278,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" }

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);