"use client" import { useEffect, useId, useRef, useState } from "react" // shadcn import { Button } from "@/components/ui/button" // third-party import { AnimatePresence, animate, motion, useInView, useReducedMotion, } from "framer-motion" // assets import { ArrowRight, ArrowUpRight } from "lucide-react" // ------------------------------ | CONSTANTS | ------------------------------ // const BADGE_TEXT = "SIPC insured · 0.25% flat fee · $5 minimum · " const WORD_INTERVAL_MS = 2200 const COUNT_UP_DURATION_S = 1.2 const EYEBROW = "AI-managed investing" const HERO_LEAD = "Your AI-Powered" const HERO_WORDS = [ "Investment Partner", "Wealth Manager", "Financial Assistant", ] const LONGEST_WORD = "Financial Assistant" const HERO_DESCRIPTION = "Fenvo is an AI-managed investment account. Set your goals, and it invests and rebalances for you for a flat 0.25% fee." const PERKS = ["$5 minimum", "No hidden charges", "SIPC insured"] const PORTFOLIO_VALUE = 24650 const MONTHLY_BARS = [38, 44, 41, 52, 49, 58, 63, 60, 71, 78, 84, 100] const ALLOCATION = [ { label: "Stocks", value: 62, className: "bg-lime-300" }, { label: "Bonds", value: 28, className: "bg-white" }, { label: "Cash", value: 10, className: "bg-emerald-500" }, ] const STATS = [ { to: 120, suffix: "K+", label: "Active investors" }, { to: 2.4, prefix: "$", suffix: "B", decimals: 1, label: "Assets managed" }, { to: 4.9, suffix: "/5", decimals: 1, label: "Average rating" }, { to: 0.25, suffix: "%", decimals: 2, label: "Flat annual fee" }, ] // ------------------------------ | HELPERS | ------------------------------ // function WordRotator() { const shouldReduceMotion = useReducedMotion() const [wordIndex, setWordIndex] = useState(0) useEffect(() => { if (shouldReduceMotion) return const timer = setTimeout( () => setWordIndex((current) => (current + 1) % HERO_WORDS.length), WORD_INTERVAL_MS ) return () => clearTimeout(timer) }, [wordIndex, shouldReduceMotion]) return ( ) } function CountUp({ to, prefix = "", suffix = "", decimals = 0, }: { to: number prefix?: string suffix?: string decimals?: number }) { const ref = useRef(null) const isInView = useInView(ref, { once: true }) const shouldReduceMotion = useReducedMotion() const [current, setCurrent] = useState(0) useEffect(() => { if (!isInView || shouldReduceMotion) return const controls = animate(0, to, { duration: COUNT_UP_DURATION_S, ease: "easeOut", onUpdate: setCurrent, }) return () => controls.stop() }, [isInView, shouldReduceMotion, to]) const format = (value: number) => `${prefix}${value.toFixed(decimals)}${suffix}` return ( {format(to)} ) } function CircleBadge() { const shouldReduceMotion = useReducedMotion() const pathId = useId() return ( ) } function PortfolioPanel() { const shouldReduceMotion = useReducedMotion() const [value, setValue] = useState(shouldReduceMotion ? PORTFOLIO_VALUE : 0) useEffect(() => { if (shouldReduceMotion) return const controls = animate(0, PORTFOLIO_VALUE, { duration: 1.8, delay: 0.3, ease: "easeOut", onUpdate: setValue, }) return () => controls.stop() }, [shouldReduceMotion]) return (

Your portfolio

{Math.round(value).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, })}

+8.5%

{MONTHLY_BARS.map((height, index) => { const isLast = index === MONTHLY_BARS.length - 1 return ( ) })}

{ALLOCATION.map((item) => ( ))}

{item.label} {item.value}%

) } // ------------------------------ | HERO 24 | ------------------------------ // export default function Hero24() { const headingId = useId() return (

{HERO_DESCRIPTION}

{perk}

0 ? "lg:border-l lg:border-white/20" : "lg:pl-0"}`} >

{stat.label}

) }

{HERO_LEAD}