"use client"; import Image from "next/image"; import { useEffect, useMemo, useState, useRef } from "react"; import { Sparkles, Wand2, Layout, Zap, Gauge, Globe, ShieldCheck, Layers, Cpu, Rocket, ArrowRight, CheckCircle2, Mail, Boxes, ImageIcon, Search, Settings2, Workflow, Mic, Menu, X, } from "lucide-react"; import BackgroundLayers from "./components/BackgroundLayers"; import WaitlistModal from "./components/WaitlistModal"; import AnimatedCTA from "./components/AnimatedCTA"; import AiPromptBox from "./components/AiPromptBox"; import { useParallax } from "./hooks/useParallax"; import FAQSection from './components/ui/FAQSection'; /* ---------- typewriter (no sliding) ---------- */ function TypewriterFixed({ leftLabel, text, }: { leftLabel: string; text: string; text?: string; }) { const [out, setOut] = useState(""); useEffect(() => { if (!text) return; let i = 0; setOut(""); const id = setInterval(() => { i++; setOut(text.slice(0, i)); if (i >= text.length) clearInterval(id); }, 22); return () => clearInterval(id); }, [text]); if (!text) return null; return (
{leftLabel} {out} ▍
); } export default function HomePage() { // ================= WAITLIST ================= const [showWaitlist, setShowWaitlist] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); // ================= AI TYPEWRITER ================= const AI_PROMPTS = [ "a modern company website with clean sections, SEO copy, and premium visuals…", "a high-conversion product landing page with hero CTA, pricing, and FAQ…", "a portfolio website with case studies, testimonials, and contact form…", ]; const promptRef = useRef(null); const [aiValue, setAiValue] = useState(""); const [aiTyped, setAiTyped] = useState(""); const [aiPromptIndex, setAiPromptIndex] = useState(0); useEffect(() => { if (aiValue) return; let i = 0; let cancelled = false; const active = AI_PROMPTS[aiPromptIndex]; setAiTyped(""); const tick = () => { if (cancelled) return; i++; setAiTyped(active.slice(0, i)); if (i < active.length) { setTimeout(tick, 22); } else { setTimeout(() => { if (!cancelled) { setAiPromptIndex((p) => (p + 1) % AI_PROMPTS.length); } }, 1400); } }; const t = setTimeout(tick, 300); return () => { cancelled = true; clearTimeout(t); }; }, [aiPromptIndex, aiValue]); /* ---------- PARALLAX (decorative only) ---------- */ useEffect(() => { const onScroll = () => { const y = window.scrollY; document.querySelectorAll("[data-parallax]").forEach((el) => { const speed = Number(el.dataset.speed || 0.06); el.style.transform = `translateY(${y * speed}px)`; }); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); /* ---------- HEADER SCROLL BLUR BOOST ---------- */ useEffect(() => { const header = document.querySelector(".header-blur") as HTMLElement | null; if (!header) return; const onScroll = () => { const y = Math.min(window.scrollY, 120); header.style.backdropFilter = `blur(${22 + y * 0.05}px) saturate(1.2)`; header.style.webkitBackdropFilter = `blur(${22 + y * 0.05}px) saturate(1.2)`; header.style.background = `linear-gradient( 180deg, rgba(10,12,18,${0.72 + y * 0.002}), rgba(10,12,18,${0.52 + y * 0.002}) )`; }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const compareRows = useMemo( () => [ ["AI generates layout + theme", true, false], ["AI writes page content & SEO", true, false], ["AI creates images/assets", true, false], ["Fast performance by default", true, "Depends"], ["Hosting included, no setup", true, "Extra work"], ["No maintenance (no plugins)", true, false], ["Visual editing (no code)", true, "Limited"], ], [] ); const scrollTo = (id: string) => { const el = document.getElementById(id); if (!el) return; const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: "smooth" }); setMobileOpen(false); }; return (
{/* ================= GLOBAL BACKGROUND (CONTINUOUS) ================= */}
{/* ambient blob left */}
{/* ambient blob right */}
{/* ================= HEADER ================= */}
{/* Mobile menu */} {mobileOpen && (
)}
{/* ================= HERO ================= */}
{/* left */}
AI + Visual Builder + High Performance Output

Generate, Design,
Publish Websites
Effortlessly, Instantly.

BuildEZ turns an idea into a live, premium website - automatically. AI builds the theme, content, and visuals, while you stay in full control. No plugins. No maintenance. Just speed.

setShowWaitlist(true)} className="cta-glow-border cursor-pointer" > Join Waitlist
{/* right visual */}
BuildEZ dashboard preview
{/* ================= AI HERO + PROMPT SECTION ================= */}
{/* Vignette */}
{/* Primary Blob */}
{/* Secondary Blob */}
{/* CONTENT */}

Build powerful{" "} websites{" "} with AI

Describe what you want. BuildEZ generates the layout, content, and visuals — instantly.

Edit visually. Export clean code. No plugins. No maintenance.

{/* PROMPT BOX */}
{/* MODE */}
{/* INPUT */}
{!aiValue && (
{aiTyped} |
)}