"use client"; import { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { TrendingUp, Users, DollarSign } from "lucide-react"; export default function ComparisonRangeSlider() { const [multiplier, setMultiplier] = useState(1); const baseValue = 1250; // Real-time projection calculation const projectedValue = useMemo(() => { return Math.floor(baseValue * multiplier); }, [multiplier]); // Percentage for visual fill const percentage = ((multiplier - 1) / 4) * 100; // Range 1x to 5x return (

{/* V3 Infinity Container: Bento-inspired glassmorphism card */}

{/* Background Decorative Glow */}

{/* Header Section */}

Revenue Projection

Growth Scenario

{/* Main Metric Display: Animates on change */}

$ {projectedValue.toLocaleString()} /mo

Based on a {multiplier.toFixed(1)}x scale factor.

{/* CUSTOM INTERACTIVE SLIDER V3 */}

{/* Track Background */}

{/* Active Fill with Amber Gradient */}

{/* Native Input (Hidden but Functional) */} setMultiplier(parseFloat(e.target.value))} className="absolute w-full h-2 opacity-0 cursor-pointer z-30" /> {/* Custom Thumb: Follows the value with 3D-ish feel */}

{/* Slider Labels */}

Conservative (1x) Aggressive (5x)

{/* Footer stats: Small micro-metrics */}

12.5k Users

LTV: $48.00

); }