"use client"; import React, { useRef } from "react"; import { motion, useScroll, useTransform } from "framer-motion"; const ChargingIcon = () => ( ); const VisionIcon = () => ( ); const DailyWearIcon = () => ( ); const AutoAdjustIcon = () => ( ); const BlueLightIcon = () => ( ); const LightweightIcon = () => ( ); export default function Features({ className }: { className?: string }) { const containerRef = useRef(null); const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start end", "end start"], }); const opacity = useTransform(scrollYProgress, [0, 0.15, 0.85, 1], [0, 1, 1, 0]); const blurVal = useTransform(scrollYProgress, [0, 0.15, 0.85, 1], ["12px", "0px", "0px", "12px"]); const y = useTransform(scrollYProgress, [0, 0.15, 0.85, 1], [50, 0, 0, -50]); const filter = useTransform(blurVal, (b) => "blur(" + b + ")"); const cardVariants = { hidden: { opacity: 0, y: 30 }, visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }, }, }; return ( <>

{/* Top Row: Left Heading, Right Subheading */}

Purposefully Built For Clarity, Comfort, And Confidence.

Every detail of Glimpse is designed to elevate your everyday vision, combining intelligent technology with refined craftsmanship for a seamless experience.

{/* Bottom Row: Cards Row */}

{/* Card 1: Wireless Charging Case */}

Wireless Charging Case

Thoughtfully designed for protection, power, and portability.

{/* Card 2: Adaptive Smart Vision That Responds Instantly */}

Adaptive Smart Vision That Responds Instantly

Real-time sensors enhance clarity, balance brightness, and reduce eye strain.

Auto-Adjust

Blue-Light Filter

Lightweight Frame

{/* Card 3: Designed With Subtle Intelligence */}

Perfect for daily wear

Designed With Subtle Intelligence

Controls and sensors are seamlessly integrated for intuitive use.

); }