Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -10,7 +10,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Award, CheckCircle, MapPin, Zap, Sparkles, Shield, ImageIcon, Calendar, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Award, CheckCircle, MapPin, Zap, Sparkles, Shield, ImageIcon, Calendar, ChevronLeft, ChevronRight, Phone, Mail, Clock } from 'lucide-react';
 import { useState } from 'react';
 
 interface BeforeAfterImage {
@@ -112,6 +112,7 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "About Clifton", id: "about" },
             { name: "Results", id: "results" },
+            { name: "Location", id: "location" },
             { name: "FAQ", id: "faq" }
           ]}
           button={{
@@ -203,6 +204,96 @@ export default function LandingPage() {
         </div>
       </div>
 
+      <div id="location" data-section="location">
+        <div className="container mx-auto px-4 py-16">
+          <div className="max-w-5xl mx-auto">
+            <div className="text-center mb-12">
+              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-var(--accent) text-var(--foreground) text-sm font-semibold mb-4">
+                <MapPin className="w-4 h-4" />
+                <span>Visit Us</span>
+              </div>
+              <h2 className="text-4xl md:text-5xl font-bold text-var(--foreground) mb-4">
+                Perfect It Detailing Location
+              </h2>
+              <p className="text-lg text-var(--foreground) opacity-80">
+                We serve the Cleveland, Tennessee area with mobile detailing. Visit our location or schedule an appointment at your preferred location.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-8">
+              {/* Map Section */}
+              <div className="rounded-lg overflow-hidden shadow-lg">
+                <iframe
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3320.0698484883836!2d-84.87313!3d35.33912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88588dab7efd0001%3A0x1234567890abcdef!2sCleveland%2C%20TN!5e0!3m2!1sen!2sus!4v1234567890"
+                  width="100%"
+                  height="400"
+                  style={{ border: 0 }}
+                  allowFullScreen={true}
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                  className="w-full"
+                  aria-label="Google Map showing Perfect It Detailing service area in Cleveland, Tennessee"
+                />
+              </div>
+
+              {/* Contact Information Section */}
+              <div className="flex flex-col justify-center space-y-6">
+                <div className="bg-var(--card) rounded-lg p-6 border border-var(--accent)">
+                  <div className="flex items-start gap-4">
+                    <div className="p-3 rounded-lg bg-var(--background) flex-shrink-0">
+                      <MapPin className="w-6 h-6 text-var(--primary-cta)" />
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-semibold text-var(--foreground) mb-1">Service Area</h3>
+                      <p className="text-var(--foreground) opacity-80">Cleveland, Tennessee and surrounding areas</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="bg-var(--card) rounded-lg p-6 border border-var(--accent)">
+                  <div className="flex items-start gap-4">
+                    <div className="p-3 rounded-lg bg-var(--background) flex-shrink-0">
+                      <Phone className="w-6 h-6 text-var(--primary-cta)" />
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-semibold text-var(--foreground) mb-1">Contact Clifton</h3>
+                      <p className="text-var(--foreground) opacity-80">Call or text for immediate scheduling and quotes</p>
+                      <a href="tel:+1-423-555-0123" className="text-var(--primary-cta) font-semibold mt-2 inline-block hover:underline">+1 (423) 555-0123</a>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="bg-var(--card) rounded-lg p-6 border border-var(--accent)">
+                  <div className="flex items-start gap-4">
+                    <div className="p-3 rounded-lg bg-var(--background) flex-shrink-0">
+                      <Clock className="w-6 h-6 text-var(--primary-cta)" />
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-semibold text-var(--foreground) mb-1">Hours of Operation</h3>
+                      <p className="text-var(--foreground) opacity-80">Monday - Sunday: 7:00 AM - 7:00 PM</p>
+                      <p className="text-var(--foreground) opacity-80">24/7 Online Booking Available</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="bg-var(--card) rounded-lg p-6 border border-var(--accent)">
+                  <div className="flex items-start gap-4">
+                    <div className="p-3 rounded-lg bg-var(--background) flex-shrink-0">
+                      <Mail className="w-6 h-6 text-var(--primary-cta)" />
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-semibold text-var(--foreground) mb-1">Email</h3>
+                      <p className="text-var(--foreground) opacity-80">Get in touch for custom quotes</p>
+                      <a href="mailto:clifton@perfectitdetailing.com" className="text-var(--primary-cta) font-semibold mt-2 inline-block hover:underline">clifton@perfectitdetailing.com</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFifteen
           testimonial="Clifton transformed my vehicle in ways I didn't think possible. The attention to detail is unmatched, and knowing he comes to me saves me hours every month. Worth every penny."
@@ -267,9 +358,9 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           background={{ variant: "radial-gradient" }}
           useInvertedBackground={true}
-          inputPlaceholder="Enter your email or phone"
-          buttonText="Book My Appointment"
-          termsText="By clicking Book My Appointment, you agree to be contacted by Perfect It Detailing to confirm your appointment and discuss your vehicle needs."
+          inputPlaceholder="Your Email or Phone Number"
+          buttonText="Confirm Appointment"
+          termsText="By clicking Confirm Appointment, you agree to be contacted by Perfect It Detailing to confirm your appointment and discuss your vehicle needs."
           ariaLabel="Contact form to schedule Perfect It Detailing appointment"
         />
       </div>
@@ -289,13 +380,13 @@ export default function LandingPage() {
               title: "Company",              items: [
                 { label: "About Clifton", href: "#about" },
                 { label: "Our Results", href: "#results" },
-                { label: "Testimonials", href: "#testimonials" },
-                { label: "Contact", href: "#contact" }
+                { label: "Location", href: "#location" },
+                { label: "Testimonials", href: "#testimonials" }
               ]
             },
             {
               title: "Contact",              items: [
-                { label: "Cleveland, Tennessee", href: "#" },
+                { label: "Cleveland, Tennessee", href: "#location" },
                 { label: "Mobile Service Available", href: "#" },
                 { label: "Email Us", href: "#contact" },
                 { label: "Schedule Today", href: "#contact" }