Satyam
ffbbc61726
- Added whitespace-nowrap to all text labels on both Old Way and Our Way sides to prevent inconsistent text wrapping on mobile - Added opacity fade to Our Way labels based on slider position (fades out as slider moves right) - Matched symmetric fade behavior: both sides now smoothly fade in/out based on slider position - Added transition-opacity duration-150 for smooth fade animation
153 lines
8.8 KiB
React
153 lines
8.8 KiB
React
import React, { useState, useRef, useEffect } from 'react';
|
|
import { MoveHorizontal } from 'lucide-react';
|
|
import CompareNew from '../assets/images/compare-new.webp';
|
|
import CompareOld from '../assets/images/compare-old.webp';
|
|
|
|
export const ComparisonSlider = () => {
|
|
const [sliderPos, setSliderPos] = useState(50);
|
|
const containerRef = useRef(null);
|
|
|
|
const handleMove = (e) => {
|
|
if (!containerRef.current) return;
|
|
|
|
const rect = containerRef.current.getBoundingClientRect();
|
|
const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
|
|
const percentage = (x / rect.width) * 100;
|
|
|
|
setSliderPos(percentage);
|
|
};
|
|
|
|
const handleTouchMove = (e) => {
|
|
if (!containerRef.current) return;
|
|
|
|
const rect = containerRef.current.getBoundingClientRect();
|
|
const touch = e.touches[0];
|
|
const x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
|
|
const percentage = (x / rect.width) * 100;
|
|
|
|
setSliderPos(percentage);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-5xl mx-auto my-20">
|
|
<h2 className="text-4xl font-black text-center mb-10 text-zinc-900 dark:text-white">
|
|
The <span className="text-zinc-400">Old</span> vs The <span className="text-blue-500">LynkedUp</span> Way
|
|
</h2>
|
|
|
|
<div
|
|
ref={containerRef}
|
|
className="relative w-full h-[400px] md:h-[600px] rounded-3xl overflow-hidden cursor-ew-resize shadow-2xlSelect-none group"
|
|
onMouseMove={handleMove}
|
|
onTouchMove={handleTouchMove}
|
|
>
|
|
{/* AFTER IMAGE (New Way) - Background */}
|
|
<div className="absolute inset-0 w-full h-full">
|
|
<img
|
|
src={CompareNew}
|
|
alt="The New Way"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div
|
|
className="absolute top-4 right-3 md:top-10 md:right-10 flex flex-col items-end space-y-2 md:space-y-4 select-none transition-opacity duration-150"
|
|
style={{ opacity: Math.max(0, Math.min(1, (90 - sliderPos) / 40)) }}
|
|
>
|
|
<span className="text-base md:text-2xl font-black text-white bg-black/50 backdrop-blur-md px-3 py-1.5 md:px-4 md:py-2 rounded-xl border border-blue-500/50 whitespace-nowrap">
|
|
Our Way
|
|
</span>
|
|
<div className="text-right space-y-1.5 md:space-y-2">
|
|
{[
|
|
"15-Minute Drone Scan",
|
|
"Zero Safety Risk",
|
|
"AI + Thermal Imaging",
|
|
"~30% Lower Costs",
|
|
].map((text, i) => (
|
|
<div key={i} className="flex items-center justify-end space-x-1.5 md:space-x-2 bg-black/40 backdrop-blur-sm px-2 py-0.5 md:px-3 md:py-1 rounded-lg border border-blue-500/20 whitespace-nowrap">
|
|
<span className="text-[10px] md:text-base font-bold text-white">{text}</span>
|
|
<div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-blue-500 flex items-center justify-center shrink-0">
|
|
<svg className="w-2.5 h-2.5 md:w-3 md:h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{/* Extended items — desktop only */}
|
|
{[
|
|
"60% faster lead conversion",
|
|
"Deploy Reps with confidence",
|
|
"Evidence-driven damage detection",
|
|
].map((text, i) => (
|
|
<div key={`ext-${i}`} className="hidden md:flex items-center justify-end space-x-2 bg-black/40 backdrop-blur-sm px-3 py-1 rounded-lg border border-blue-500/20 whitespace-nowrap">
|
|
<span className="text-base font-bold text-white">{text}</span>
|
|
<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center shrink-0">
|
|
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* BEFORE IMAGE (Old Way) - Clipped Overlay */}
|
|
<div
|
|
className="absolute inset-0 w-full h-full overflow-hidden border-r-4 border-white shadow-2xl"
|
|
style={{ width: `${sliderPos}%` }}
|
|
>
|
|
<img
|
|
src={CompareOld}
|
|
alt="The Old Way"
|
|
className="w-full h-full object-cover max-w-none grayscale sepia-[0.3]"
|
|
style={{ width: containerRef.current?.offsetWidth }}
|
|
/>
|
|
{/* Overlay Text visible only when this side is dominant */}
|
|
<div
|
|
className="absolute top-4 left-3 md:top-10 md:left-10 flex flex-col items-start space-y-2 md:space-y-4 select-none transition-opacity duration-150"
|
|
style={{ opacity: Math.max(0, Math.min(1, (sliderPos - 10) / 40)) }}
|
|
>
|
|
<span className="text-base md:text-2xl font-black text-zinc-200 bg-black/60 backdrop-blur-md px-3 py-1.5 md:px-4 md:py-2 rounded-xl border border-red-500/50 whitespace-nowrap">
|
|
The Old Way
|
|
</span>
|
|
<div className="text-left space-y-1.5 md:space-y-2">
|
|
{[
|
|
"Dangerous Ladders & Falls",
|
|
"Guesswork Estimates",
|
|
"Slow Turnaround Times",
|
|
"Hidden Material Costs"
|
|
].map((text, i) => (
|
|
<div key={i} className="flex items-center space-x-1.5 md:space-x-2 bg-black/50 backdrop-blur-sm px-2 py-0.5 md:px-3 md:py-1 rounded-lg border border-red-500/20 whitespace-nowrap">
|
|
<div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-red-500/80 flex items-center justify-center shrink-0">
|
|
<svg className="w-2.5 h-2.5 md:w-3 md:h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" /></svg>
|
|
</div>
|
|
<span className="text-[10px] md:text-base font-bold text-zinc-300">{text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slider Handle — Desktop */}
|
|
<div
|
|
className="absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize hidden md:flex items-center justify-center shadow-[0_0_20px_rgba(0,0,0,0.5)]"
|
|
style={{ left: `${sliderPos}%` }}
|
|
>
|
|
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-xl transform transition-transform group-hover:scale-110">
|
|
<MoveHorizontal className="text-black" size={24} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slider Handle — Mobile (visible circle + line) */}
|
|
<div
|
|
className="absolute top-0 bottom-0 w-0.5 bg-white/70 md:hidden flex items-center justify-center"
|
|
style={{ left: `${sliderPos}%` }}
|
|
>
|
|
<div className="w-9 h-9 bg-white rounded-full flex items-center justify-center shadow-lg shrink-0">
|
|
<MoveHorizontal className="text-black" size={16} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Instructions Overlay (Fades out on interaction) */}
|
|
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 text-white/80 text-sm font-medium bg-black/40 px-4 py-2 rounded-full backdrop-blur-sm pointer-events-none">
|
|
Drag to compare
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|