"use client" import * as React from "react" import Link from "next/link" import dynamic from "next/dynamic" import { motion, useInView, useReducedMotion } from "framer-motion" import { ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { transition } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Section } from "@/components/marketing/section" import { CtaProps } from "./cta" const Threads = dynamic( () => import("@/components/ui/threads").then((m) => m.Threads), { ssr: false } ) /* ------------------------------------------------------------------ */ /* Typing command line — echoes the terminal section */ /* ------------------------------------------------------------------ */ const COMMAND = "npx bouncekit add" function TypingCommand({ inView, reduced, }: { inView: boolean reduced: boolean | null }) { const [text, setText] = React.useState(reduced ? COMMAND : "") const [done, setDone] = React.useState(!!reduced) React.useEffect(() => { if (!inView || reduced) return let i = 0 const id = setInterval(() => { i++ setText(COMMAND.slice(0, i)) if (i >= COMMAND.length) { clearInterval(id) setDone(true) } }, 40) return () => clearInterval(id) }, [inView, reduced]) return (

$ {text} {!done && ( )} {done && !reduced && ( ↵ )}

) } /* ------------------------------------------------------------------ */ /* CTA Component */ /* ------------------------------------------------------------------ */ /** Full-width call-to-action with flowing Threads WebGL background and staggered reveal. */ export function CtaThreads({ heading, headingAccent, description, ctaLabel = "Get Started", ctaHref = "/auth/signup", className, }: CtaProps) { const ref = React.useRef(null) const inView = useInView(ref, { once: true, margin: "-10% 0px" }) const reduced = useReducedMotion() return (

{/* Threads WebGL background — mounted only when in view */} {inView && ( )}

{/* Typing command — hooks back to the terminal section */} {/* Heading */} {heading}{" "} {headingAccent} {/* Description */} {description} {/* CTA button */} {/* Trust line */} {["One-time purchase", "Full source code", "Lifetime updates"].map( (t, i) => ( {i > 0 && ( )} {t} ) )}

) }