"use client" // react import { ChangeEvent, useEffect, useState } from "react" // shadcn import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" // third-party import { motion } from "framer-motion" // project-imports import ButtonAI from "@/components/uiable/button/button-ai" // assets import { IconBrandMeta, IconBrandGithubCopilot, IconBrandOpenai, IconSparkle, IconBrandZapier, } from "@tabler/icons-react" import { Sparkles, Bot, Puzzle, Wand2, Play, ZapIcon, BarChart2, } from "lucide-react" // ------------------------------ | TYPEWRITER INPUT | ------------------------------ // const AUTOMATION_PROMPTS = [ "Describe the automation you want to create...", "Send a Slack alert when a Stripe payment fails...", "Sync new Shopify orders to Google Sheets and QuickBooks...", "Summarize daily customer support tickets with AI...", "Trigger deployment and alert dev team when PR is merged...", "Onboard new team members across Slack and Jira...", ] function TypewriterInput() { const [promptIndex, setPromptIndex] = useState(0) const [displayedText, setDisplayedText] = useState("") const [isDeleting, setIsDeleting] = useState(false) const [userValue, setUserValue] = useState("") useEffect(() => { if (userValue) return const currentPrompt = AUTOMATION_PROMPTS[promptIndex] let timer: ReturnType if (!isDeleting) { if (displayedText.length < currentPrompt.length) { timer = setTimeout(() => { setDisplayedText(currentPrompt.slice(0, displayedText.length + 1)) }, 45) } else { timer = setTimeout(() => { setIsDeleting(true) }, 2200) } } else { if (displayedText.length > 0) { timer = setTimeout(() => { setDisplayedText(currentPrompt.slice(0, displayedText.length - 1)) }, 22) } else { timer = setTimeout(() => { setIsDeleting(false) setPromptIndex((prev) => (prev + 1) % AUTOMATION_PROMPTS.length) }, 350) } } return () => clearTimeout(timer) }, [displayedText, isDeleting, promptIndex, userValue]) return (

) => setUserValue(e.target.value) } className="h-auto border-0 bg-transparent p-0 text-sm text-slate-900 shadow-none focus:border-transparent focus:outline-none sm:text-base dark:text-white" /> {!userValue && (

{displayedText}

)}

) } // ------------------------------ | SVG COMPONENTS | ------------------------------ // function LaserFlowSvg() { return ( ) } function SquiggleSvg() { return ( ) } // ------------------------------ | BENTO 4 | ------------------------------ // export default function Bento4() { return (