From ffbbc6172649c8c453c43a6e7d26405c60504c2f Mon Sep 17 00:00:00 2001
From: Satyam <95536056+Satyam-Rastogi@users.noreply.github.com>
Date: Wed, 18 Feb 2026 12:41:59 +0530
Subject: [PATCH] fix(landing): optimize comparison slider text for mobile and
 add fade transitions

- 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
---
 src/components/ComparisonSlider.jsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/ComparisonSlider.jsx b/src/components/ComparisonSlider.jsx
index 9bf0824..9e066ac 100644
--- a/src/components/ComparisonSlider.jsx
+++ b/src/components/ComparisonSlider.jsx
@@ -47,8 +47,11 @@ export const ComparisonSlider = () => {
                         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">
-                        <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">
+                    <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">
@@ -58,7 +61,7 @@ export const ComparisonSlider = () => {
                                 "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">
+                                <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>
@@ -71,7 +74,7 @@ export const ComparisonSlider = () => {
                                 "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">
+                                <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>
@@ -94,8 +97,11 @@ export const ComparisonSlider = () => {
                         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" style={{ opacity: Math.max(0, (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">
+                    <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">
@@ -105,7 +111,7 @@ export const ComparisonSlider = () => {
                                 "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">
+                                <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>