"use client"; import React, { useRef, useState } from "react"; import { motion, useScroll, useMotionValueEvent } from "framer-motion"; import { Layers, Zap, Shield, Database } from "lucide-react"; const content = [ { title: "Seamless Integration", description: "Drop our components into your existing Next.js app without any configuration. It just works.", icon: , color: "from-emerald-500/20 to-teal-500/20", image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=2070&auto=format&fit=crop" }, { title: "Lightning Performance", description: "Built with Framer Motion and standard Tailwind CSS to ensure 60fps animations across all devices.", icon: , color: "from-yellow-500/20 to-orange-500/20", image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop" }, { title: "Bank-Grade Security", description: "Our auth and database boilerplate comes pre-configured with industry standard security practices.", icon: , color: "from-blue-500/20 to-indigo-500/20", image: "https://images.unsplash.com/photo-1563206767-5b18f218e8de?q=80&w=2069&auto=format&fit=crop" }, { title: "Scalable Database", description: "Connected seamlessly to PostgreSQL using Prisma ORM. Define your schema and start building.", icon: , color: "from-purple-500/20 to-pink-500/20", image: "https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop" } ]; export function StickyScroll() { const [activeCard, setActiveCard] = useState(0); const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"], }); const cardLength = content.length; useMotionValueEvent(scrollYProgress, "change", (latest) => { const cardsBreakpoints = content.map((_, index) => index / cardLength); const closestBreakpointIndex = cardsBreakpoints.reduce((acc, breakpoint, index) => { const distance = Math.abs(latest - breakpoint); if (distance < Math.abs(latest - cardsBreakpoints[acc])) { return index; } return acc; }, 0); setActiveCard(closestBreakpointIndex); }); return (

{/* Left side: Scrollable Text */}

{content.map((item, index) => (

{item.icon}

{item.title}

{item.description}

))}

{/* Right side: Sticky Visual */}

{/* eslint-disable-next-line @next/next/no-img-element */}

{content[activeCard].title}

); }