"use client"; import React, { useState, useRef } from "react"; import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion"; // Custom designed high-fidelity SVGs matching the style perfectly function GlimpseCircleIcon() { return ( ); } function GlassesTabIcon({ active }: { active: boolean }) { return ( ); } function StarIcon({ active }: { active: boolean }) { return ( ); } interface StepData { id: string; stepLabel: string; title: string; description: string; imageRotation: number; imageScale: number; imageTranslateX: number; imageTranslateY: number; layoutType: "right" | "left" | "absolute-right" | "absolute-left-top"; lineSvg: React.ReactNode; } interface TabData { type: string; label?: string; stepIndex: number; } export default function HowItWorks({ className }: { className?: string }) { const [activeTab, setActiveTab] = useState(0); const containerRef = useRef(null); // Viewport-linked cinematic transitions 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 + ")"); // Steps Configuration const steps: StepData[] = [ { id: "step1", stepLabel: "STEP 1", title: "Perceive", description: "Built-in cameras scan your surroundings in real time - detecting text, faces, objects, and locations.", imageRotation: 0, imageScale: 1.05, imageTranslateX: -80, imageTranslateY: 0, layoutType: "right", lineSvg: ( ), }, { id: "step2", stepLabel: "STEP 2", title: "Cognify", description: "The ultra-compact spatial processor translates environment telemetry into logical visual metadata.", imageRotation: -8, imageScale: 1.1, imageTranslateX: 100, imageTranslateY: -10, layoutType: "left", lineSvg: ( ), }, { id: "step3", stepLabel: "STEP 3", title: "Project", description: "Advanced waveguide micro-displays project ultra-crisp holographic contextual guides straight to your eyes.", imageRotation: 6, imageScale: 1.15, imageTranslateX: -120, imageTranslateY: 15, layoutType: "absolute-right", lineSvg: ( ), }, { id: "step4", stepLabel: "STEP 4", title: "Synthesize", description: "Subtle temporal audio arrays whisper intelligent voice contextual briefs with extreme pinpoint accuracy.", imageRotation: -12, imageScale: 0.98, imageTranslateX: 120, imageTranslateY: 30, layoutType: "absolute-left-top", lineSvg: ( ), }, { id: "star-reviews", stepLabel: "USER FEEDBACK", title: "Sublime Comfort", description: "\"Glimpse has completely replaced my secondary workspace screens. Notifications feel native to the real world.\"", imageRotation: 4, imageScale: 1.05, imageTranslateX: 0, imageTranslateY: -10, layoutType: "right", lineSvg: null, }, ]; const tabs: TabData[] = [ { type: "text", label: "GLIMPSE", stepIndex: 0 }, { type: "icon-glasses", stepIndex: 1 }, { type: "icon-star", stepIndex: 4 }, { type: "icon-glasses", stepIndex: 2 }, { type: "icon-glasses", stepIndex: 3 }, ]; const currentStepIndex = tabs[activeTab]?.stepIndex ?? 0; const currentStep = steps[currentStepIndex]; return ( <>

{/* Top Row */}

How it Works

One Device, Unlimited Vision

{/* Section Heading */}

GLAIR is a pair of smart glasses powered by artificial intelligence.

{/* Middle Container */}

{currentStep.lineSvg} {/* Central Animated Glasses Image */}

{/* Step Text Block Container */}

{/* Left aligned blocks */}

{currentStep.layoutType === "left" && (

{currentStep.stepLabel}

{currentStep.title}

{currentStep.description}

)}

{/* Right aligned blocks */}

{currentStep.layoutType === "right" && (

{currentStep.stepLabel}

{currentStep.title}

{currentStep.description}

)}

{/* Absolute Right */}

{currentStep.layoutType === "absolute-right" && (

{currentStep.stepLabel}

{currentStep.title}

{currentStep.description}

)}

{/* Absolute Left Top */}

{currentStep.layoutType === "absolute-left-top" && (

{currentStep.stepLabel}

{currentStep.title}

{currentStep.description}

)}

{/* Bottom Info & Tab Row */}

They help you navigate, translate, recognize, and remember - instantly, hands-free, through a seamless visual interface.

{tabs.map((tab, idx) => { const isActive = activeTab === idx; return ( ); })}

); }