import { MeshGradient } from "@paper-design/shaders-react" import { useEffect, useState } from "react" interface HeroSectionProps { title?: string highlightText?: string description?: string buttonText?: string onButtonClick?: () => void colors?: string[] distortion?: number swirl?: number speed?: number offsetX?: number className?: string titleClassName?: string descriptionClassName?: string buttonClassName?: string maxWidth?: string veilOpacity?: string fontFamily?: string fontWeight?: number } export function HeroSection({ title = "Intelligent AI Agents for", highlightText = "Smart Brands", description = "Transform your brand and evolve it through AI-driven brand guidelines and always up-to-date core components.", buttonText = "Join Waitlist", onButtonClick, colors = ["#72b9bb", "#b5d9d9", "#ffd1bd", "#ffebe0", "#8cc5b8", "#dbf4a4"], distortion = 0.8, swirl = 0.6, speed = 0.42, offsetX = 0.08, className = "", titleClassName = "", descriptionClassName = "", buttonClassName = "", maxWidth = "max-w-6xl", veilOpacity = "bg-white/20 dark:bg-black/25", fontFamily = "Satoshi, sans-serif", fontWeight = 500, }: HeroSectionProps) { const [dimensions, setDimensions] = useState({ width: 1920, height: 1080 }) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const update = () => setDimensions({ width: window.innerWidth, height: window.innerHeight, }) update() window.addEventListener("resize", update) return () => window.removeEventListener("resize", update) }, []) const handleButtonClick = () => { if (onButtonClick) { onButtonClick() } } return (

{mounted && ( <>

)}

{title} {highlightText}

{description}

) }