Merge version_2 into main #2
122
src/app/page.tsx
122
src/app/page.tsx
@@ -9,9 +9,24 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import { Sparkles, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [activeSlider, setActiveSlider] = useState<string | null>(null);
|
||||
|
||||
const beforeAfterSliders = [
|
||||
{
|
||||
id: "slider-1", title: "Window Restoration", subtitle: "Spotless Results", beforeImage: "http://img.b2bpic.net/free-photo/woman-cleaning-house-rubber-gloves-wiping-window_1157-46775.jpg", afterImage: "http://img.b2bpic.net/free-photo/medium-shot-man-cleaning-window_23-2148521051.jpg", beforeAlt: "Before: Dirty window", afterAlt: "After: Sparkling clean window"
|
||||
},
|
||||
{
|
||||
id: "slider-2", title: "Patio Revival", subtitle: "Stain Removed", beforeImage: "http://img.b2bpic.net/free-photo/person-standing-skateboard-streetside-alley_53876-42811.jpg", afterImage: "http://img.b2bpic.net/free-photo/young-blonde-housewife-cleaning-house-doors_259150-58904.jpg", beforeAlt: "Before: Dirty patio", afterAlt: "After: Clean pristine patio"
|
||||
},
|
||||
{
|
||||
id: "slider-3", title: "Door & Frame Cleaning", subtitle: "Like New", beforeImage: "http://img.b2bpic.net/free-photo/hands-with-gloves-disinfecting-gate-handle_23-2148705105.jpg", afterImage: "http://img.b2bpic.net/free-photo/close-up-spray-bottle-with-chemical_23-2148529570.jpg", beforeAlt: "Before: Dirty door frame", afterAlt: "After: Pristine door and frame"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -104,29 +119,88 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="before-after" data-section="before-after">
|
||||
<ProductCardOne
|
||||
title="Before & After Transformations"
|
||||
description="See the remarkable difference our service makes"
|
||||
tag="Real Results"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Window Restoration", price: "Spotless Results", imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-house-rubber-gloves-wiping-window_1157-46775.jpg", imageAlt: "Before: Dirty window"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Window Gleam", price: "Crystal Clear", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-cleaning-window_23-2148521051.jpg", imageAlt: "After: Sparkling clean window"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Patio Revival", price: "Stain Removed", imageSrc: "http://img.b2bpic.net/free-photo/person-standing-skateboard-streetside-alley_53876-42811.jpg", imageAlt: "Before: Dirty patio"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Patio Perfection", price: "Like New", imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-housewife-cleaning-house-doors_259150-58904.jpg", imageAlt: "After: Clean pristine patio"
|
||||
}
|
||||
]}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div className="w-full py-20 px-4 md:px-8 bg-gradient-to-b from-transparent via-background to-transparent">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">Before & After Transformations</h2>
|
||||
<p className="text-lg text-foreground/70 mb-2">See the remarkable difference our service makes</p>
|
||||
<div className="inline-block px-4 py-2 bg-primary-cta/10 rounded-full text-sm font-medium text-primary-cta">Real Results</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-6">
|
||||
{beforeAfterSliders.map((slider) => (
|
||||
<div
|
||||
key={slider.id}
|
||||
className="relative group cursor-pointer"
|
||||
onClick={() => setActiveSlider(activeSlider === slider.id ? null : slider.id)}
|
||||
>
|
||||
<div className="relative h-80 md:h-96 rounded-lg overflow-hidden shadow-lg border border-accent/20">
|
||||
{/* Before Image */}
|
||||
<img
|
||||
src={slider.beforeImage}
|
||||
alt={slider.beforeAlt}
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* After Image Overlay - Initially Hidden */}
|
||||
<div
|
||||
className={`absolute inset-0 overflow-hidden transition-all duration-500 ease-out ${
|
||||
activeSlider === slider.id ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
clipPath: activeSlider === slider.id ? "inset(0 0 0 0)" : "inset(0 100% 0 0)"
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={slider.afterImage}
|
||||
alt={slider.afterAlt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Divider Line */}
|
||||
<div
|
||||
className={`absolute top-0 bottom-0 w-1 bg-white/80 shadow-lg transition-all duration-500 ${
|
||||
activeSlider === slider.id ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
left: activeSlider === slider.id ? "50%" : "0%"
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Labels */}
|
||||
<div className="absolute top-4 left-4 bg-black/60 px-3 py-1 rounded text-white text-sm font-medium">
|
||||
Before
|
||||
</div>
|
||||
{activeSlider === slider.id && (
|
||||
<div className="absolute top-4 right-4 bg-primary-cta/80 px-3 py-1 rounded text-white text-sm font-medium">
|
||||
After
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Click Indicator */}
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/10 transition-all duration-300">
|
||||
<div className="bg-primary-cta/90 p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:scale-110">
|
||||
{activeSlider === slider.id ? (
|
||||
<ChevronLeft className="w-6 h-6 text-white" />
|
||||
) : (
|
||||
<ChevronRight className="w-6 h-6 text-white" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Below Slider */}
|
||||
<div className="mt-4 text-center">
|
||||
<h3 className="text-lg font-semibold text-foreground">{slider.title}</h3>
|
||||
<p className="text-sm text-foreground/60 mt-1">{slider.subtitle}</p>
|
||||
<p className="text-xs text-primary-cta mt-2 font-medium">Click to reveal transformation</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
|
||||
Reference in New Issue
Block a user