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

Merge version_3 into main #3

Merged
bender merged 1 commits from version_3 into main 2026-03-17 14:29:03 +00:00
Conversation 0 Commits 1 Files Changed 1 +97 -26
1 changed files with 97 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/app/page.tsx
View File

@@ -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 } 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 (
@@ -105,31 +184,23 @@ 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="testimonials" data-section="testimonials">