"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Menu, X } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; import type { Variants } from "framer-motion"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } function TextFlip({ children, active }: { children: string; active: boolean }) { return (

{children} {children}

); } interface VoiceFlowButtonProps extends React.ButtonHTMLAttributes { className?: string; variant?: "nav-free" | "primary-explore" | "secondary-speech"; children: React.ReactNode; icon?: string; } function VoiceFlowButton({ className, variant = "primary-explore", children, icon, ...props }: VoiceFlowButtonProps) { const [isHovered, setIsHovered] = useState(false); if (variant === "nav-free") { return ( ); } if (variant === "primary-explore") { return ( ); } return ( ); } interface HeaderProps { className?: string; } const menuList = [ { label: "Home", href: "#home", isActive: true }, { label: "Resources", href: "#resources" }, { label: "APIs", href: "#apis" }, { label: "Pricing", href: "#pricing" }, { label: "Use Cases", href: "#use-cases" } ]; const avatarsData = [ { id: 1, name: "Leo Grayson", title: "Podcasts", imgUrl: "https://cdn.jiro.build/VoiceFlow%20AI/All%20Images/avater%2001.png", greeting: "Welcome to VoiceFlow. Creating podcast segments has never been faster or more lifelike!" }, { id: 2, name: "Rowan Blake", title: "Audiobooks", imgUrl: "https://cdn.jiro.build/VoiceFlow%20AI/All%20Images/avater%2002.png", greeting: "Hello listener. Our custom narrative engine brings literary emotions completely to life." }, { id: 3, name: "Jahid Hasan", title: "Corporate Training", imgUrl: "https://cdn.jiro.build/VoiceFlow%20AI/All%20Images/avater%2003.png", greeting: "Hi there! Scale your global team enablement training materials dynamically with VoiceFlow." }, { id: 4, name: "Elise Navarro", title: "E-learning", imgUrl: "https://cdn.jiro.build/VoiceFlow%20AI/All%20Images/avater%2004.png", greeting: "Greetings. Enhance digital knowledge transfer using our responsive voice synthesis!" } ]; const headingContainerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.03, delayChildren: 0.1, }, }, }; const wordVariants: Variants = { hidden: { opacity: 0, y: 15 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.215, 0.61, 0.355, 1] as const, }, }, }; export default function Header({ className }: HeaderProps) { const [activeMenu, setActiveMenu] = useState("Home"); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [hoveredAvatar, setHoveredAvatar] = useState(null); const [activeAvatar, setActiveAvatar] = useState(1); const [playingAvatar, setPlayingAvatar] = useState(null); const [_speechSynthesisAvailable, setSpeechSynthesisAvailable] = useState(false); useEffect(() => { const timer = setTimeout(() => { if (typeof window !== "undefined" && window.speechSynthesis) { setSpeechSynthesisAvailable(true); } }, 0); return () => clearTimeout(timer); }, []); const handleAvatarClick = (avatar: typeof avatarsData[0], e?: React.MouseEvent) => { if (e) { e.stopPropagation(); } setActiveAvatar(avatar.id); if (playingAvatar === avatar.id) { if (typeof window !== "undefined" && window.speechSynthesis) { window.speechSynthesis.cancel(); } setPlayingAvatar(null); return; } setPlayingAvatar(avatar.id); if (typeof window !== "undefined" && window.speechSynthesis) { window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(avatar.greeting); utterance.rate = 0.95; const isFemale = avatar.id === 4; const voices = window.speechSynthesis.getVoices(); let selectedVoice = null; if (isFemale) { selectedVoice = voices.find((v) => v.lang.startsWith("en") && (v.name.toLowerCase().includes("female") || v.name.toLowerCase().includes("zira") || v.name.toLowerCase().includes("samantha") || v.name.toLowerCase().includes("google us english") || v.name.toLowerCase().includes("karen") || v.name.toLowerCase().includes("hazel") || v.name.toLowerCase().includes("moira") || v.name.toLowerCase().includes("tessa")) ) || null; utterance.pitch = 1.15; } else { selectedVoice = voices.find((v) => v.lang.startsWith("en") && (v.name.toLowerCase().includes("male") || v.name.toLowerCase().includes("david") || v.name.toLowerCase().includes("microsoft david") || v.name.toLowerCase().includes("google uk english male") || v.name.toLowerCase().includes("ravi") || v.name.toLowerCase().includes("george")) ) || null; utterance.pitch = 0.85; } if (!selectedVoice) { selectedVoice = voices.find((v) => v.lang.startsWith("en")) || null; } if (selectedVoice) { utterance.voice = selectedVoice; } utterance.onend = () => { setPlayingAvatar(null); }; utterance.onerror = () => { setPlayingAvatar(null); }; window.speechSynthesis.speak(utterance); } else { const timeout = setTimeout(() => { setPlayingAvatar(null); }, 3500); return () => clearTimeout(timeout); } }; return ( <>

{menuList.map((item) => { const isSelected = activeMenu === item.label; return ( ); })}

alert("Welcome to VoiceFlow AI Showcase!")}> Try for free

{mobileMenuOpen && (

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

{ setMobileMenuOpen(false); alert("Welcome to VoiceFlow AI Showcase!"); }} > Try for free

)}

AI Voice Generator: Realistic Speech AI Voice Generator: Realistic text to speech Al voice generator: Most realistic AI text to speech

{"Generate ".split(" ").map((word, i) => ( {word} ))}
{"ultra-realistic".split("").map((letter, i) => ( {letter} ))}
{"Smart".split(" ").map((word, i) => ( {word} ))}
{"AI speech in ".split(" ").map((word, i) => ( {word} ))}
{"100+ languages".split("").map((letter, i) => ( {letter} ))}

Turn any text into realistic AI speech with customizable voices, multilingual support, and lightning-fast audio generation for every use case, content format, and audience worldwide. alert("Opening Speech Generator Panel...")} className="w-full sm:w-auto" > Generate Speech alert("Navigating to Application APIs...")} className="w-full sm:w-auto" > Explore Our APIs

2025 Apple design award

4M+ 5-star reviews right leaf

Chrome extension of the year

78M+ users right leaf

Official Speechify partnership

{avatarsData.map((avatar, idx) => { const isPlaying = playingAvatar === avatar.id; const isRowActiveOrHovered = hoveredAvatar !== null ? (hoveredAvatar === avatar.id) : (playingAvatar !== null ? (playingAvatar === avatar.id) : (activeAvatar === avatar.id) ); return ( setHoveredAvatar(avatar.id)} onMouseLeave={() => setHoveredAvatar(null)} onClick={(e: React.MouseEvent) => handleAvatarClick(avatar, e)} initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 1.0 + (idx * 0.1) }} className="flex flex-col items-center w-[158px] flex-shrink-0 cursor-pointer" >

{avatar.name} {isRowActiveOrHovered ? ( Checked

) : (

)}

{avatar.title} ); })}

{avatarsData.map((avatar) => { const isPlaying = playingAvatar === avatar.id; const isRowActiveOrHovered = hoveredAvatar !== null ? (hoveredAvatar === avatar.id) : (playingAvatar !== null ? (playingAvatar === avatar.id) : (activeAvatar === avatar.id) ); return (

handleAvatarClick(avatar)} onMouseEnter={() => setHoveredAvatar(avatar.id)} onMouseLeave={() => setHoveredAvatar(null)} className={cn( "snap-center p-4 rounded-2xl flex items-center gap-4 min-w-[280px] flex-1 transition-all duration-300 border bg-white border-[#2d2247]/5", isRowActiveOrHovered ? "shadow-[0_8px_20px_rgba(29,17,54,0.06)]" : "shadow-sm" )} >

{avatar.name} {isRowActiveOrHovered ? ( Checked

) : (

)}

{avatar.title}

); })}

{playingAvatar !== null && (

{Array.from({ length: 4 }).map((_: unknown, i: number) => ( ))}

“{avatarsData.find((a) => a.id === playingAvatar)?.greeting}”

)}

); }

{"Generate ".split(" ").map((word, i) => ( {word} ))} {"ultra-realistic".split("").map((letter, i) => ( {letter} ))} {"Smart".split(" ").map((word, i) => ( {word} ))} {"AI speech in ".split(" ").map((word, i) => ( {word} ))} {"100+ languages".split("").map((letter, i) => ( {letter} ))}

{"Generate ".split(" ").map((word, i) => ( {word} ))}
{"ultra-realistic".split("").map((letter, i) => ( {letter} ))}
{"Smart".split(" ").map((word, i) => ( {word} ))}
{"AI speech in ".split(" ").map((word, i) => ( {word} ))}
{"100+ languages".split("").map((letter, i) => ( {letter} ))}