fix: refactor ComparisonSlider to use imported images for production

This commit is contained in:
Satyam
2026-02-01 19:03:16 +05:30
parent 07266fc08e
commit 2a23ba02b4
+4 -2
View File
@@ -1,5 +1,7 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { MoveHorizontal } from 'lucide-react'; import { MoveHorizontal } from 'lucide-react';
import CompareNew from '../assets/images/compare-new.png';
import CompareOld from '../assets/images/compare-old.png';
export const ComparisonSlider = () => { export const ComparisonSlider = () => {
const [sliderPos, setSliderPos] = useState(50); const [sliderPos, setSliderPos] = useState(50);
@@ -41,7 +43,7 @@ export const ComparisonSlider = () => {
{/* AFTER IMAGE (New Way) - Background */} {/* AFTER IMAGE (New Way) - Background */}
<div className="absolute inset-0 w-full h-full"> <div className="absolute inset-0 w-full h-full">
<img <img
src="/src/assets/images/compare-new.png" src={CompareNew}
alt="The New Way" alt="The New Way"
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
@@ -73,7 +75,7 @@ export const ComparisonSlider = () => {
style={{ width: `${sliderPos}%` }} style={{ width: `${sliderPos}%` }}
> >
<img <img
src="/src/assets/images/compare-old.png" src={CompareOld}
alt="The Old Way" alt="The Old Way"
className="w-full h-full object-cover max-w-none grayscale sepia-[0.3]" className="w-full h-full object-cover max-w-none grayscale sepia-[0.3]"
style={{ width: containerRef.current?.offsetWidth }} style={{ width: containerRef.current?.offsetWidth }}