Feature Section One

1'use client'
2 
3import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
4import { useState } from 'react'
5 
6const items = [
7  {
8    title: 'Dashboard',
9    label: 'A clean overview of activity, progress, key metrics, and recent updates.',
10    href: '#dashboard',
11    icon: '⌘',
12  },
13  {
14    title: 'Automations',
15    label: 'Trigger useful actions, reduce repeated work, and keep workflows moving.',
16    href: '#automations',
17    icon: '✦',
18  },
19  {
20    title: 'Analytics',
21    label: 'Understand usage, performance, trends, and what needs attention.',
22    href: '#analytics',
23    icon: '◌',
24  },
25  {
26    title: 'Integrations',
27    label: 'Connect with the tools your product already depends on.',
28    href: '#integrations',
29    icon: '↗',
30  },
31  {
32    title: 'Security',
33    label: 'Role-based access, protected data, and safer product experiences.',
34    href: '#security',
35    icon: '◆',
36  },
37]
38 
39export default function FeatureSectionOne() {
40  const [activeIndex, setActiveIndex] = useState(0)
41  const shouldReduceMotion = useReducedMotion()
42 
43  return (
44    <section className="relative overflow-hidden bg-[#f4f2ee] px-4 py-24 text-[#282524] md:py-32">
45      <div className="mx-auto max-w-7xl">
46        <div className="mx-auto mb-14 max-w-4xl text-center md:mb-20">
47          <p className="mb-4 text-sm font-medium tracking-[0.25em] text-neutral-500 uppercase">
48            Product features
49          </p>
50 
51          <h2 className="text-4xl leading-[1.05] font-semibold tracking-tight text-balance md:text-6xl">
52            Everything needed to build a polished digital product
53          </h2>
54        </div>
55 
56        <motion.div
57          initial={shouldReduceMotion ? false : 'hidden'}
58          whileInView="visible"
59          viewport={{ once: true, margin: '-120px' }}
60          variants={{
61            hidden: {},
62            visible: {
63              transition: {
64                staggerChildren: 0.08,
65              },
66            },
67          }}
68          className="mx-auto flex w-full max-w-250 flex-col items-center"
69        >
70          {items.map((item, index) => {
71            const isActive = activeIndex === index
72 
73            return (
74              <motion.a
75                key={item.title}
76                href={item.href}
77                onMouseEnter={() => setActiveIndex(index)}
78                onFocus={() => setActiveIndex(index)}
79                variants={{
80                  hidden: {
81                    opacity: 0,
82                    y: 24,
83// … truncated