Hero Section Four

1'use client'
2 
3import { useEffect, useRef, useState } from 'react'
4import { animate, motion, useMotionValue, useReducedMotion } from 'motion/react'
5 
6import { Button } from '@/components/ui/button'
7import { cn } from '@/lib/utils'
8import HeaderThree from '../header/header-three'
9import LogoCloudFive from '../logo-cloud/logo-cloud-five'
10import { Label } from '@/components/ui/label'
11import { SpendWorkflowIllustration } from './hero-section-four-illustration'
12 
13const stats = [
14  {
15    label: 'TOTAL AI ACTIONS',
16    value: '2,109,875',
17  },
18  {
19    label: 'RECEIPTS MATCHED',
20    value: '1,326,672',
21  },
22  {
23    label: 'FIELDS CODED',
24    value: '805,266',
25  },
26  {
27    label: 'APPROVALS ROUTED',
28    value: '58,419',
29  },
30  {
31    label: 'EXPENSES REVIEWED',
32    value: '137,486',
33  },
34  {
35    label: 'SPEND ALLOCATED',
36    value: '$18.6M',
37  },
38  {
39    label: 'POLICIES CHECKED',
40    value: '294,706',
41  },
42]
43 
44function StatItem({ item }: { item: { label: string; value: string } }) {
45  return (
46    <div className="group flex shrink-0 items-center gap-2.5 border-r border-border/60 px-6 py-2.5">
47      <span className="text-[10px] font-medium tracking-[0.14em] text-muted-foreground uppercase select-none">
48        {item.label}:
49      </span>
50 
51      <span className="rounded bg-muted px-2 py-1 font-mono text-[11px] font-semibold text-foreground tabular-nums transition-colors select-none group-hover:bg-muted/80">
52        {item.value}
53      </span>
54    </div>
55  )
56}
57 
58function MarqueeTrack() {
59  const x = useMotionValue(0)
60  const shouldReduceMotion = useReducedMotion()
61 
62  const firstGroupRef = useRef<HTMLDivElement>(null)
63  const controlsRef = useRef<ReturnType<typeof animate> | null>(null)
64 
65  const [groupWidth, setGroupWidth] = useState(0)
66 
67  useEffect(() => {
68    const group = firstGroupRef.current
69    if (!group) return
70 
71    const updateWidth = () => {
72      setGroupWidth(group.scrollWidth)
73    }
74 
75    updateWidth()
76 
77    const observer = new ResizeObserver(updateWidth)
78    observer.observe(group)
79 
80    return () => observer.disconnect()
81  }, [])
82 
83  useEffect(() => {
84    if (!groupWidth || shouldReduceMotion) return
85 
86    controlsRef.current?.stop()
87    x.set(0)
88 
89    controlsRef.current = animate(x, -groupWidth, {
90      duration: 32,
91      ease: 'linear',
92      repeat: Infinity,
93      repeatType: 'loop',
94    })
95 
96    return () => controlsRef.current?.stop()
97  }, [groupWidth, shouldReduceMotion, x])
98 
99  return (
100    <div
101      className="relative min-w-0 flex-1 overflow-hidden"
102// … truncated