bender/c411ef09-30f4-42a8-ae20-a7122f6983aa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_4 into main #4

Merged
bender merged 1 commits from version_4 into main 2026-03-17 14:32:20 +00:00
Conversation 0 Commits 1 Files Changed 1 +95 -4
1 changed files with 95 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/app/page.tsx
View File

@@ -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."
@@ -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" }