'use client' import { motion, AnimatePresence } from 'motion/react' import { useState } from 'react' const items = [ { title: 'Dashboard', label: 'A clean overview of activity, progress, key metrics, and recent updates.', href: '#dashboard', icon: '⌘', }, { title: 'Automations', label: 'Trigger useful actions, reduce repeated work, and keep workflows moving.', href: '#automations', icon: '✦', }, { title: 'Analytics', label: 'Understand usage, performance, trends, and what needs attention.', href: '#analytics', icon: '◌', }, { title: 'Integrations', label: 'Connect with the tools your product already depends on.', href: '#integrations', icon: '↗', }, { title: 'Security', label: 'Role-based access, protected data, and safer product experiences.', href: '#security', icon: '◆', }, ] export default function FeatureSectionOne() { const [activeIndex, setActiveIndex] = useState(0) return (

Product features

Everything needed to build a polished digital product

{items.map((item, index) => { const isActive = activeIndex === index return ( setActiveIndex(index)} onFocus={() => setActiveIndex(index)} variants={{ hidden: { opacity: 0, y: 24, filter: 'blur(10px)', }, visible: { opacity: 1, y: 0, filter: 'blur(0px)', }, }} transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1], }} className="group relative grid min-h-20 w-full grid-cols-1 items-center overflow-hidden rounded-[1.75rem] px-5 outline-none md:min-h-30 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:px-8" > {isActive && ( )} {isActive && ( {item.icon} )} {item.title} {isActive && (

{item.label}

)} ) })}

) }