Update theme colors

Merge version_7 into main

src/app/contact/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { Mail, MapPin, Phone, Clock, Facebook, Twitter, Linkedin, Instagram } from "lucide-react";
 import { useState } from "react";
 
@@ -46,7 +46,7 @@ export default function ContactPage() {
       </div>
 
       <div id="contact" data-section="contact" className="py-20">
-        <div className="max-w-6xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+        <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>
@@ -54,20 +54,6 @@ export default function ContactPage() {
               <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>
 
-            {/* 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>
-
             {/* Location */}
             <div className="flex gap-4 items-start">
               <div className="bg-primary-cta p-3 rounded-lg flex-shrink-0">
@@ -84,7 +70,7 @@ export default function ContactPage() {
               </div>
             </div>
 
-            {/* Hours */}
+            {/* 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" />
@@ -99,6 +85,20 @@ export default function ContactPage() {
               </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">
@@ -133,7 +133,7 @@ export default function ContactPage() {
             </div>
           </div>
 
-          {/* Right Column - Contact Form & Map */}
+          {/* Right Column - Contact Form & Interactive Google Map */}
           <div className="space-y-8">
             {/* Contact Form */}
             <ContactSplitForm
@@ -151,8 +151,8 @@ export default function ContactPage() {
               mediaAnimation="blur-reveal"
             />
 
-            {/* Google Map Placeholder */}
-            <div className="bg-gray-200 rounded-lg overflow-hidden h-96 border-2 border-primary-cta/20">
+            {/* 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%"
@@ -168,15 +168,33 @@ export default function ContactPage() {
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterCard
-          logoText="Dallas Automotive"
-          copyrightText="© 2024 Dallas Automotive. All rights reserved."
-          socialLinks={[
-            { icon: Facebook, href: "#", ariaLabel: "Facebook" },
-            { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-            { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
-            { icon: Instagram, href: "#", ariaLabel: "Instagram" }
+        <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

@@ -8,8 +8,8 @@ import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCa
 import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
 import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Award, CheckCircle, Cog, Droplets, Gauge, Phone, Rotate3D, Shield, TrendingUp, Wrench, Zap, Facebook, Twitter, Linkedin, Instagram } from "lucide-react";
+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() {
@@ -228,15 +228,33 @@ export default function LandingPage() {
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterCard
-          logoText="Dallas Automotive"
-          copyrightText="© 2024 Dallas Automotive. All rights reserved."
-          socialLinks={[
-            { icon: Facebook, href: "#", ariaLabel: "Facebook" },
-            { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-            { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
-            { icon: Instagram, href: "#", ariaLabel: "Instagram" }
+        <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>
 

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