Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -10,7 +10,86 @@ 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 } 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 {
+  before: string;
+  after: string;
+  alt: string;
+}
+
+const beforeAfterImages: BeforeAfterImage[] = [
+  {
+    before: "http://img.b2bpic.net/free-photo/luggage-seen-from-rear-car-window_23-2150934365.jpg",    after: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193571.jpg",    alt: "Interior detailing transformation - before and after"
+  },
+  {
+    before: "http://img.b2bpic.net/free-photo/close-up-driver-recharging-ev-vehicle-battery-low-angle-shot_482257-130130.jpg",    after: "http://img.b2bpic.net/free-photo/male-hand-with-foam-sponge-washing-car_1157-36587.jpg",    alt: "Paint correction transformation - before and after"
+  }
+];
+
+function BeforeAfterGallery() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [showComparison, setShowComparison] = useState(false);
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => (prev + 1) % beforeAfterImages.length);
+    setShowComparison(false);
+  };
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => (prev - 1 + beforeAfterImages.length) % beforeAfterImages.length);
+    setShowComparison(false);
+  };
+
+  const current = beforeAfterImages[currentIndex];
+
+  return (
+    <div className="w-full flex flex-col gap-6 items-center">
+      <div className="relative w-full max-w-2xl rounded-lg overflow-hidden bg-gradient-to-br from-var(--card) to-var(--background)">
+        {showComparison ? (
+          <div className="flex gap-2 w-full aspect-square">
+            <div className="w-1/2 h-full overflow-hidden">
+              <img src={current.before} alt={`Before: ${current.alt}`} className="w-full h-full object-cover" />
+            </div>
+            <div className="w-1/2 h-full overflow-hidden">
+              <img src={current.after} alt={`After: ${current.alt}`} className="w-full h-full object-cover" />
+            </div>
+          </div>
+        ) : (
+          <img src={current.after} alt={current.alt} className="w-full aspect-square object-cover" />
+        )}
+      </div>
+
+      <button
+        onClick={() => setShowComparison(!showComparison)}
+        className="px-6 py-3 rounded-lg bg-var(--primary-cta) text-var(--primary-cta-text) font-semibold hover:opacity-90 transition-opacity"
+      >
+        {showComparison ? "Show After" : "Compare Before & After"}
+      </button>
+
+      <div className="flex gap-4 items-center">
+        <button
+          onClick={handlePrev}
+          className="p-2 rounded-full border border-var(--accent) hover:bg-var(--card) transition-colors"
+          aria-label="Previous image"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+        <span className="text-sm text-var(--foreground)">
+          {currentIndex + 1} / {beforeAfterImages.length}
+        </span>
+        <button
+          onClick={handleNext}
+          className="p-2 rounded-full border border-var(--accent) hover:bg-var(--card) transition-colors"
+          aria-label="Next image"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  );
+}
 
 export default function LandingPage() {
   return (
@@ -33,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={{
@@ -105,31 +185,113 @@ export default function LandingPage() {
       </div>
 
       <div id="results" data-section="results">
-        <ProductCardThree
-          title="Real Transformations"
-          description="Before and after results from our most recent projects. Every detail restored, every vehicle revitalized."
-          tag="Before & After Gallery"
-          tagIcon={ImageIcon}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="bento-grid"
-          animationType="scale-rotate"
-          products={[
-            {
-              id: "result-1",              name: "Luxury Interior Restoration",              price: "Professional Grade Detailing",              imageSrc: "http://img.b2bpic.net/free-photo/luggage-seen-from-rear-car-window_23-2150934365.jpg",              imageAlt: "Interior detailing transformation - before and after"
-            },
-            {
-              id: "result-2",              name: "Exterior Paint Correction",              price: "Full Exterior Detail",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-driver-recharging-ev-vehicle-battery-low-angle-shot_482257-130130.jpg",              imageAlt: "Paint correction transformation - before and after"
-            },
-            {
-              id: "result-3",              name: "Wheel & Tire Restoration",              price: "Complete Wheel Detail",              imageSrc: "http://img.b2bpic.net/free-photo/male-hand-with-foam-sponge-washing-car_1157-36587.jpg",              imageAlt: "Wheel restoration transformation - before and after"
-            }
-          ]}
-          buttons={[{ text: "Schedule Your Transformation", href: "#contact" }]}
-          buttonAnimation="slide-up"
-          ariaLabel="Before and after gallery showcasing Perfect It Detailing results"
-        />
+        <div className="container mx-auto px-4 py-16">
+          <div className="max-w-4xl 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">
+                <ImageIcon className="w-4 h-4" />
+                <span>Before & After Gallery</span>
+              </div>
+              <h2 className="text-4xl md:text-5xl font-bold text-var(--foreground) mb-4">
+                Real Transformations
+              </h2>
+              <p className="text-lg text-var(--foreground) opacity-80">
+                Before and after results from our most recent projects. Every detail restored, every vehicle revitalized.
+              </p>
+            </div>
+            <BeforeAfterGallery />
+          </div>
+        </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">
@@ -218,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" }