onbeat landing page

Start with the pasted HTML entry point and the pnpm create next-app [project-name] [options] command, then determine where this landing page belongs in the examples repository. Verify that the page renders its navigation, application links, responsive sections, icons, and Three.js visual effects; the issue names no file or test to run.

pnpm create next-app [project-name] [options]

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    brand: {
                        blue: '#3B82F6',
                        purple: '#8B5CF6',
                        dark: '#0F172A',
                    }
                }
            }
        }
    }
</script>

<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- Three.js + GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<!-- 3D Background Layers -->
<div id="waveform3d" class="fixed inset-0 pointer-events-none z-0"></div>
<div id="beatGrid3d" class="fixed bottom-0 left-0 w-full h-[350px] opacity-70 pointer-events-none z-0"></div>

<!-- Portal Canvas -->
<div id="portalCanvas" class="fixed inset-0 pointer-events-none z-[60] opacity-0"></div>

<!-- Header -->
<header class="fixed top-0 left-0 w-full z-50 bg-slate-950/70 backdrop-blur-xl border-b border-slate-800">
    <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-blue-500 to-purple-500 flex items-center justify-center font-bold text-white shadow-lg">
                P
            </div>
            <span class="font-bold text-lg tracking-wide text-white">Prophet65 Apps</span>
        </div>
        <nav class="hidden md:flex space-x-8 text-sm font-medium text-slate-300">
            <a href="#apps" class="hover:text-white transition-colors">Applications</a>
            <a href="#features" class="hover:text-white transition-colors">Features</a>
            <a href="#about" class="hover:text-white transition-colors">About</a>
        </nav>
        <a href="#apps" class="px-4 py-2 text-sm font-semibold rounded-full bg-white text-slate-950 hover:bg-slate-200 transition-colors">
            Explore Suite
        </a>
    </div>
</header>

<!-- Hero Section -->
<section class="relative pt-40 pb-32 text-center z-10">
    <div class="max-w-5xl mx-auto px-6">
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold bg-purple-500/10 text-purple-400 border border-purple-500/20 mb-6">
            <i data-lucide="sparkles" class="w-3.5 h-3.5"></i> 3D Studio Environment
        </span>

        <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight text-white mb-6 leading-tight">
            Enter the <span class="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Prophet65 Dimension</span>
        </h1>

        <p class="text-slate-300 text-lg md:text-xl max-w-2xl mx-auto mb-10 leading-relaxed">
            A fully immersive 3D holographic interface for your next‑generation web applications. Powered by Three.js, GSAP, and modern UI engineering.
        </p>

        <a href="#apps" class="px-10 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-medium transition-all shadow-xl shadow-blue-500/30 inline-flex items-center gap-2">
            Launch Apps <i data-lucide="arrow-right" class="w-5 h-5"></i>
        </a>
    </div>
</section>

<!-- Apps Section -->
<section id="apps" class="py-24 bg-slate-900/40 backdrop-blur-xl border-t border-slate-800/60 z-10 relative">
    <div class="max-w-7xl mx-auto px-6">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-white mb-4">Featured Applications</h2>
            <p class="text-slate-400 max-w-md mx-auto">Choose an application to enter its holographic workspace.</p>
        </div>

        <div class="grid md:grid-cols-2 gap-10 max-w-5xl mx-auto">

            <!-- App Card 1 -->
            <div class="group relative rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-blue-500/20 p-8 hover:border-blue-400/40 hover:shadow-2xl hover:shadow-blue-500/30 transition-all duration-300">
                <div>
                    <div class="w-14 h-14 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i data-lucide="activity" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-2">OnBeat Portal 1</h3>
                    <p class="text-slate-400 text-sm mb-6 leading-relaxed">
                        Real‑time tracking, dynamic workflows, and interactive holographic dashboards.
                    </p>
                </div>
                <div class="pt-4 border-t border-slate-800/60 flex items-center justify-between">
                    <span class="text-xs font-mono text-slate-500">v1.0 • Live Deployment</span>
                    <a onclick="triggerPortalTransition('https://onbeat1234-tbg9-git-c-3a12c3-prophet65moltchurch-2090s-projects.vercel.app/')"
                       class="inline-flex items-center gap-2 text-sm font-semibold text-blue-400 hover:text-blue-300 transition-colors cursor-pointer">
                        Launch <i data-lucide="external-link" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- App Card 2 -->
            <div class="group relative rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-purple-500/20 p-8 hover:border-purple-400/40 hover:shadow-2xl hover:shadow-purple-500/30 transition-all duration-300">
                <div>
                    <div class="w-14 h-14 rounded-xl bg-purple-500/10 border border-purple-500/20 text-purple-400 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i data-lucide="zap" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-white mb-2">OnBeat Portal 2</h3>
                    <p class="text-slate-400 text-sm mb-6 leading-relaxed">
                        Enhanced utilities, rapid interaction modules, and advanced holographic interfaces.
                    </p>
                </div>
                <div class="pt-4 border-t border-slate-800/60 flex items-center justify-between">
                    <span class="text-xs font-mono text-slate-500">v2.0 • Live Deployment</span>
                    <a onclick="triggerPortalTransition('https://onbeat1234-jhh3-1uariffye-prophet65moltchurch-2090s-projects.vercel.app/')"
                       class="inline-flex items-center gap-2 text-sm font-semibold text-purple-400 hover:text-purple-300 transition-colors cursor-pointer">
                        Launch <i data-lucide="external-link" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- Features -->
<section id="features" class="py-24 border-t border-slate-800/60 bg-slate-950/60 backdrop-blur-xl relative z-10">
    <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-10">
        <div class="p-8 rounded-xl bg-slate-900/40 border border-slate-800/60 backdrop-blur-xl">
            <i data-lucide="shield-check" class="w-10 h-10 text-blue-400 mb-4"></i>
            <h4 class="text-xl font-semibold text-white mb-2">Secure Infrastructure</h4>
            <p class="text-slate-400 text-sm">Powered by Vercel’s global edge network with enterprise‑grade security.</p>
        </div>
        <div class="p-8 rounded-xl bg-slate-900/40 border border-slate-800/60 backdrop-blur-xl">
            <i data-lucide="gauge" class="w-10 h-10 text-purple-400 mb-4"></i>
            <h4 class="text-xl font-semibold text-white mb-2">High Performance</h4>
            <p class="text-slate-400 text-sm">Optimized rendering pipelines and GPU‑accelerated animations.</p>
        </div>
        <div class="p-8 rounded-xl bg-slate-900/40 border border-slate-800/60 backdrop-blur-xl">
            <i data-lucide="smartphone" class="w-10 h-10 text-pink-400 mb-4"></i>
            <h4 class="text-xl font-semibold text-white mb-2">Fully Responsive</h4>
            <p class="text-slate-400 text-sm">Adaptive holographic UI for desktop, tablet, and mobile.</p>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="py-10 border-t border-slate-800 bg-slate-950 text-slate-500 text-sm text-center relative z-10">
    <div class="max-w-7xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
        <p>&copy; Prophet65 Projects. All rights reserved.</p>
        <a href="https://vercel.com" target="_blank" class="hover:text-slate-400">Powered by Vercel</a>
    </div>
</footer>

<!-- Voice Assistant -->
<button id="voiceAssistantBtn"
    class="fixed bottom-6 right-6 w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 shadow-2xl flex items-center justify-center z-50">
    <i data-lucide="mic" class="w-7 h-7 text-white"></i>
</button>

<!-- Initialize Icons -->
<script> lucide.createIcons(); </script>

<!-- 3D Waveform -->
<script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("waveform3d").appendChild(renderer.domElement);

    const points = [];
    for (let i = 0; i < 200; i++) {
        points.push(new THREE.Vector3(i / 10, Math.sin(i / 10) * 0.5, 0));
    }
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    const material = new THREE.LineBasicMaterial({ color: 0x8B5CF6 });
    const waveform = new THREE.Line(geometry, material);
    scene.add(waveform);

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        waveform.rotation.y += 0.002;
        waveform.rotation.x += 0.001;
        renderer.render(scene, camera);
    }
    animate();
</script>

<!-- 3D Beat Grid -->
<script>
    const gridScene = new THREE.Scene();
    const gridCamera = new THREE.PerspectiveCamera(60, window.innerWidth / 300, 0.1, 1000);
    const gridRenderer = new THREE.WebGLRenderer({ alpha: true });
    gridRenderer.setSize(window.innerWidth, 350);
    document.getElementById("beatGrid3d").appendChild(gridRenderer.domElement);

    const gridGeometry = new THREE.PlaneGeometry(20, 20, 20, 20);
    const gridMaterial = new THREE.MeshBasicMaterial({
        color: 0x3B82F6,
        wireframe: true
    });
    const grid = new THREE.Mesh(gridGeometry, gridMaterial);
    grid.rotation.x = -Math.PI / 2.5;
    gridScene.add(grid);

    gridCamera.position.z = 10;

    function animateGrid() {
        requestAnimationFrame(animateGrid);
        grid.rotation.z += 0.002;
        gridRenderer.render(gridScene, gridCamera);
    }
    animateGrid();
</script>

<!-- Portal Ring + Transition -->
<script>
    const portalScene = new THREE.Scene();
    const portalCamera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    );

    const portalRenderer = new THREE.WebGLRenderer({ alpha: true });
    portalRenderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("portalCanvas").appendChild(portalRenderer.domElement);

    const ringGeometry = new THREE.RingGeometry(1, 1.5, 64);
    const ringMaterial = new THREE.MeshBasicMaterial({
        color: 0x8B5CF6,
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.9
    });
    const portalRing = new THREE.Mesh(ringGeometry, ringMaterial);
    portalScene.add(portalRing);

    portalCamera.position.z = 5;

    function animatePortal() {
        requestAnimationFrame(animatePortal);
        portalRing.rotation.z += 0.02;
        portalRenderer.render(portalScene, portalCamera);
    }
    animatePortal();

    function triggerPortalTransition(targetUrl) {
        const portal = document.getElementById("portalCanvas");

        gsap.to(portal, {
            opacity: 1,
            duration: 0.3,
            ease: "power2.out"
        });

        gsap.to(portalRing.scale, {
            x: 40,
            y: 40,
            duration: 1.2,
            ease: "power4.in"
        });

        gsap.to(portalRing.material, {
            opacity: 0,
            duration: 1.2,
            ease: "power4.in"
        });

        gsap.to("#waveform3d", {
            filter: "blur(40px)",
            duration: 1.2,
            ease: "power4.in"
        });

        gsap.to("#beatGrid3d", {
            opacity: 0,
            duration: 1.2,
            ease: "power4.in"
        });

        setTimeout(() => {
            window.location.href = targetUrl;
        }, 1200);
    }
</script>

<!-- Voice Assistant Logic -->
<script>
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.lang = "en-US";

    document.getElementById("voiceAssistantBtn").onclick = () => {
        recognition.start();
    };

    recognition.onresult = (event) => {
        const text = event.results[0][0].transcript;
        console.log("User said:", text);

        fetch("/api/assistant", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ query: text })
        })
        .then(res => res.json())
        .then(data => {
            alert("AI Response: " + data.reply);
        });
    };
</script>