mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 20:51:49 +00:00
init
This commit is contained in:
514
thirdeye/dashboard/app/page.tsx
Normal file
514
thirdeye/dashboard/app/page.tsx
Normal file
@@ -0,0 +1,514 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="bg-[#09090B] text-white font-poppins">
|
||||
{/* TopNavBar */}
|
||||
<nav className="fixed top-0 w-full z-50 pt-8 flex justify-center pointer-events-none">
|
||||
<div className="flex justify-between items-center max-w-[90rem] w-full mx-auto px-8">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center gap-3 pointer-events-auto w-[250px] hover:opacity-80 transition-opacity drop-shadow-lg">
|
||||
<Image src="/new-logo.png" alt="ThirdEye" width={32} height={32} className="rounded-md" />
|
||||
<div className="flex flex-col justify-center">
|
||||
<div className="text-2xl font-black tracking-wide text-[#a88cf8] uppercase leading-none mt-1">THIRDEYE</div>
|
||||
<div className="text-[9px] font-bold tracking-[0.3em] text-zinc-500 mt-1.5 uppercase">SOVEREIGN_V1</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Center Pill Navigation */}
|
||||
<div className="hidden md:flex items-center gap-8 px-8 py-3 rounded-full border border-white/10 bg-[#09090B]/60 backdrop-blur-xl pointer-events-auto shadow-[0_10px_30px_rgba(0,0,0,0.5)]">
|
||||
<Link href="/intelligence" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Intelligence</Link>
|
||||
<Link href="/agents" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Agents</Link>
|
||||
<Link href="/knowledge-base" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Security</Link>
|
||||
<Link href="/logs" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Infrastructure</Link>
|
||||
<Link href="#pricing" className="text-sm font-medium text-white/70 hover:text-white transition-colors tracking-wide">Pricing</Link>
|
||||
</div>
|
||||
|
||||
{/* Right Actions */}
|
||||
<div className="flex items-center justify-end pointer-events-auto w-[200px]">
|
||||
<Link href="/mission" className="bg-primary/10 hover:bg-primary/20 text-white/90 px-5 py-2.5 rounded-full text-sm font-semibold transition-colors border border-primary/20 tracking-wide shadow-[0_0_15px_rgba(167,139,250,0.15)]">
|
||||
Launch Control
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="relative overflow-hidden">
|
||||
{/* Fixed Futuristic Background */}
|
||||
<div className="fixed inset-0 z-0 pointer-events-none tech-bg-base">
|
||||
<div className="absolute inset-0 tech-grid"></div>
|
||||
<div className="absolute inset-0 tech-lights opacity-50"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#09090B]/50 to-[#09090B] pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-0 px-8 z-10 min-h-screen flex flex-col items-center justify-start overflow-hidden" id="hero">
|
||||
|
||||
{/* Fading Background concentric circles */}
|
||||
<div className="absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-[800px] -z-10 mask-radial-fade">
|
||||
<div className="orbit-ring w-[40vw] h-[40vw] max-w-[600px] max-h-[600px]"></div>
|
||||
<div className="orbit-ring w-[60vw] h-[60vw] max-w-[800px] max-h-[800px]"></div>
|
||||
<div className="orbit-ring w-[80vw] h-[80vw] max-w-[1000px] max-h-[1000px]"></div>
|
||||
</div>
|
||||
|
||||
{/* Header Content */}
|
||||
<div className="max-w-6xl mx-auto text-center relative z-20 mt-4">
|
||||
{/* Pill Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}
|
||||
className="inline-flex items-center gap-2 px-5 py-2 rounded-full border border-white/10 bg-white/[0.03] backdrop-blur-md mb-6 hover:bg-white/[0.05] transition-colors cursor-pointer"
|
||||
>
|
||||
<span className="text-white">✨</span>
|
||||
<span className="text-xs font-semibold text-white/90 tracking-wide">New: ThirdEye Core v2.4 Active</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Title */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.7, delay: 0.1 }}
|
||||
className="text-6xl md:text-8xl lg:text-[7rem] font-semibold tracking-tight text-white mb-6 leading-tight"
|
||||
>
|
||||
Think better with <br className="hidden md:block" />ThirdEye
|
||||
</motion.h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-xl md:text-2xl lg:text-3xl text-on-surface-variant font-medium mb-10 max-w-3xl mx-auto leading-relaxed"
|
||||
>
|
||||
Never miss a note, idea, or connection within your own hardened infrastructure.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Black Hole & Flare Layer */}
|
||||
<div className="relative w-full flex justify-center mt-4 md:mt-8 h-[280px] pointer-events-none z-10">
|
||||
{/* Horizontal flares */}
|
||||
<div className="hero-beam"></div>
|
||||
<div className="hero-beam-core"></div>
|
||||
|
||||
{/* The Ring */}
|
||||
<div className="black-hole-ring w-[220px] h-[220px] md:w-[320px] md:h-[320px]"></div>
|
||||
<div className="absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-[#a855f7]/20 rounded-full blur-[80px] -z-10"></div>
|
||||
</div>
|
||||
|
||||
{/* Mock UI Container */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="w-full max-w-6xl mx-auto -mt-[140px] md:-mt-[180px] relative z-20 px-4 pb-20"
|
||||
>
|
||||
<div
|
||||
className="w-full aspect-[16/9] bg-[#0c0a15]/80 backdrop-blur-xl rounded-[1rem] border border-white/10 shadow-[0_40px_100px_rgba(167,139,250,0.15)] overflow-hidden flex flex-col relative"
|
||||
style={{ WebkitMaskImage: 'linear-gradient(to bottom, black 60%, transparent 100%)', maskImage: 'linear-gradient(to bottom, black 60%, transparent 100%)' }}
|
||||
>
|
||||
{/* Fake UI Header */}
|
||||
<div className="h-12 border-b border-white/5 flex items-center px-4 gap-4 w-full bg-[#12101c]/90">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-white/20"></div>
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-white/20"></div>
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-white/20"></div>
|
||||
</div>
|
||||
<div className="h-5 w-48 bg-white/5 rounded mx-2"></div>
|
||||
<div className="ml-auto h-5 w-8 bg-white/5 rounded"></div>
|
||||
</div>
|
||||
{/* Fake UI Body */}
|
||||
<div className="flex-1 flex w-full h-full text-left overflow-hidden">
|
||||
{/* Sidebar - File Tree */}
|
||||
<div className="w-56 border-r border-white/5 p-4 flex flex-col gap-1 font-mono text-xs text-zinc-400 bg-black/20">
|
||||
<div className="text-zinc-500 font-bold mb-3 uppercase tracking-widest text-[10px] pl-2 mt-2">Explorer</div>
|
||||
<div className="flex items-center gap-3 text-primary bg-primary/10 px-3 py-2 rounded-md"><span className="material-symbols-outlined text-[16px]">description</span> thirdeye.ts</div>
|
||||
<div className="flex items-center gap-3 hover:bg-white/5 px-3 py-2 rounded-md cursor-pointer transition-colors"><span className="material-symbols-outlined text-[16px]">shield</span> vault.config.json</div>
|
||||
<div className="flex items-center gap-3 hover:bg-white/5 px-3 py-2 rounded-md cursor-pointer transition-colors"><span className="material-symbols-outlined text-[16px]">api</span> neural_routes.ts</div>
|
||||
<div className="flex items-center gap-3 hover:bg-white/5 px-3 py-2 rounded-md cursor-pointer transition-colors"><span className="material-symbols-outlined text-[16px]">database</span> vector_store.ts</div>
|
||||
</div>
|
||||
|
||||
{/* Content - Code Editor */}
|
||||
<div className="flex-1 flex flex-col bg-[#0d0914]/60 relative">
|
||||
<div className="w-full h-10 bg-black/40 border-b border-white/5 flex items-center px-4 shrink-0">
|
||||
<div className="text-xs font-mono text-zinc-300 flex items-center gap-3 bg-white/5 px-4 py-1.5 rounded-t-lg border-b-2 border-primary">
|
||||
<span className="text-primary tracking-widest">thirdeye.ts</span>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white/20"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 p-6 overflow-hidden relative">
|
||||
{/* Line numbers area */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-12 bg-black/20 border-r border-white/5 pt-6 pb-6 flex flex-col items-end pr-3 font-mono text-xs text-zinc-600 select-none space-y-[0.4rem]">
|
||||
{[...Array(15)].map((_, i) => <div key={i}>{i + 1}</div>)}
|
||||
</div>
|
||||
{/* Code */}
|
||||
<pre className="text-[13px] font-mono text-zinc-300 leading-relaxed ml-10 pl-4 whitespace-pre">
|
||||
<span className="text-pink-400">import</span> {'{'} ThirdEyeAgent, VaultConnection {'}'} <span className="text-pink-400">from</span> <span className="text-emerald-300">'@thirdeye/core'</span>;<br/><br/>
|
||||
<span className="text-slate-500 opacity-60">// Initialize secure intelligence node</span><br/>
|
||||
<span className="text-pink-400">const</span> edgeNode = <span className="text-pink-400">new</span> <span className="text-yellow-200">ThirdEyeAgent</span>({'{'}<br/>
|
||||
model: <span className="text-emerald-300">'neural-synth-v4'</span>,<br/>
|
||||
securityLevel: <span className="text-orange-300">9</span>,<br/>
|
||||
airGapped: <span className="text-indigo-300">true</span><br/>
|
||||
{'}'});<br/><br/>
|
||||
<span className="text-pink-400">async function</span> <span className="text-blue-300">deployIntelligence</span>() {'{'}<br/>
|
||||
<span className="text-pink-400">await</span> VaultConnection.<span className="text-yellow-200">establish</span>();<br/>
|
||||
<span className="text-pink-400">const</span> insights = <span className="text-pink-400">await</span> edgeNode.<span className="text-yellow-200">processStream</span>({'{'}<br/>
|
||||
source: <span className="text-emerald-300">'internal-comms'</span>,<br/>
|
||||
realtime: <span className="text-indigo-300">true</span><br/>
|
||||
{'}'});<br/>
|
||||
<span className="text-indigo-300">console</span>.<span className="text-yellow-200">log</span>(<span className="text-emerald-300">'[SYSTEM] Intelligence active: '</span>, insights);<br/>
|
||||
{'}'}<br/><br/>
|
||||
<span className="text-yellow-200">deployIntelligence</span>();
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Panel - Terminal Output */}
|
||||
<div className="w-72 p-5 flex flex-col bg-black/60 border-l border-white/5 font-mono text-[11px] leading-loose">
|
||||
<div className="flex items-center justify-between mb-4 border-b border-white/10 pb-3">
|
||||
<div className="text-zinc-500 font-bold uppercase tracking-widest text-[10px]">Terminal</div>
|
||||
<div className="flex gap-2 text-zinc-600">
|
||||
<span className="w-2.5 h-2.5 rounded-full border border-zinc-500 cursor-pointer hover:border-white"></span>
|
||||
<span className="w-2.5 h-2.5 rounded-full border border-zinc-500 cursor-pointer hover:border-white"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-zinc-400 truncate"><span className="text-emerald-400 mr-2">➜</span><span className="text-cyan-400">~</span> pnpm run deploy</div>
|
||||
<div className="text-zinc-500 mt-2 truncate">[14:02:01] Starting ThirdEye v2.4...</div>
|
||||
<div className="text-zinc-500 truncate">[14:02:02] Establishing Vault... <span className="text-emerald-400 ml-1">OK</span></div>
|
||||
<div className="text-zinc-500 truncate">[14:02:03] Binding to Edge Nodes... <span className="text-emerald-400 ml-1">OK</span></div>
|
||||
<div className="text-amber-400/80 mt-2 bg-amber-400/10 px-2 border-l border-amber-400 text-[10px] leading-relaxed">WARN: Semantic drift detected in Node 4. Compensating...</div>
|
||||
<div className="text-primary mt-4 flex items-center gap-2 animate-pulse bg-primary/10 px-2 py-1 rounded w-max">
|
||||
<span className="w-2 h-2 bg-primary rounded-full block shadow-[0_0_8px_rgba(167,139,250,1)]"></span> <span className="font-semibold text-[10px]">Awaiting stream</span>
|
||||
</div>
|
||||
|
||||
{/* Visual grid representing active nodes */}
|
||||
<div className="mt-auto mb-2 text-zinc-500 font-bold uppercase tracking-widest text-[9px] flex items-center gap-2">
|
||||
Node Matrix <span className="w-full h-px bg-white/5 flex-1"></span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 xl:grid-cols-8 gap-1.5 mt-2">
|
||||
{[...Array(24)].map((_, i) => (
|
||||
<div key={i} className={`aspect-square rounded-[2px] ${i === 12 || i === 18 ? 'bg-primary animate-pulse shadow-[0_0_5px_rgba(167,139,250,0.8)]' : i % 7 === 0 ? 'bg-emerald-400/60' : 'bg-white/5'}`}></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* The Lens (Architecture) */}
|
||||
<section className="pt-48 pb-32 px-8 relative z-10" id="architecture">
|
||||
{/* Smooth Section Transition & Grid Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#050408] to-transparent -z-10"></div>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:48px_48px] [mask-image:linear-gradient(to_bottom,transparent_0%,black_20%,black_80%,transparent_100%)] -z-10"></div>
|
||||
<div className="max-w-[85rem] mx-auto relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-100px" }} transition={{ duration: 0.7 }}
|
||||
className="mb-20"
|
||||
>
|
||||
<h2 className="text-zinc-500 font-mono text-[11px] tracking-[0.3em] uppercase mb-4 font-bold">The Lens</h2>
|
||||
<h3 className="text-4xl md:text-5xl font-black text-white/90 tracking-tight">Technical Architecture</h3>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ duration: 1 }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 border-l border-t border-white/[0.05]"
|
||||
>
|
||||
{[
|
||||
{ icon: "speed", title: "Built for throughput", desc: "Instantly sync agent telemetry across local nodes." },
|
||||
{ icon: "hub", title: "Networked nodes", desc: "Form a robust graph of capabilities with semantic routing." },
|
||||
{ icon: "memory", title: "Edge deployment", desc: "Run natively on endpoint devices, online or air-gapped." },
|
||||
{ icon: "lock", title: "End-to-end encryption", desc: "Only you and authorized personnel can access military-grade Vaults." },
|
||||
{ icon: "event", title: "Orchestration timeline", desc: "Keep track of active multi-agent cycles and agendas." },
|
||||
{ icon: "wifi_tethering", title: "Live broadcasting", desc: "Push logic updates to all running swarms with one click." },
|
||||
{ icon: "save", title: "Instant snapshots", desc: "Save contextual states from ongoing browser or API sessions." },
|
||||
{ icon: "search", title: "Frictionless recall", desc: "Easily retrieve and index past agent decisions at lightning speed." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="border-r border-b border-white/[0.05] p-10 hover:bg-white/[0.02] transition-colors flex flex-col justify-start">
|
||||
<div className="w-10 h-10 rounded-lg bg-white/[0.02] border border-white/10 flex items-center justify-center mb-10 shadow-sm">
|
||||
<span className="material-symbols-outlined text-zinc-300 text-[20px]">{item.icon}</span>
|
||||
</div>
|
||||
<h4 className="text-[15px] font-semibold text-white/90 mb-3 tracking-wide">{item.title}</h4>
|
||||
<p className="text-[14px] text-zinc-500/90 leading-relaxed font-medium">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission Control Dashboard Preview */}
|
||||
<section className="py-32 px-8 overflow-hidden relative z-10" id="dashboard">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.98, y: 40 }} whileInView={{ opacity: 1, scale: 1, y: 0 }} viewport={{ once: true, margin: "-100px" }} transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className="w-full bg-[#121115] rounded-xl border border-violet-500/20 shadow-[0_30px_100px_rgba(0,0,0,0.9),0_0_80px_rgba(167,139,250,0.25)] overflow-hidden relative ring-1 ring-violet-500/10"
|
||||
>
|
||||
{/* Top Bar */}
|
||||
<div className="h-12 border-b border-[#2a2833] flex items-center px-4 gap-2">
|
||||
<div className="flex gap-1.5 opacity-80 pl-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/80"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-amber-500/80"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/80"></div>
|
||||
</div>
|
||||
<div className="ml-6 font-mono text-[10px] text-zinc-400 tracking-widest font-bold">THIRDEYE_ADMIN_DASHBOARD_V4.0</div>
|
||||
</div>
|
||||
|
||||
{/* Grid content */}
|
||||
<div className="p-6 md:p-8 grid grid-cols-1 lg:grid-cols-12 gap-6 relative bg-[radial-gradient(#ffffff04_1px,transparent_1px)] [background-size:24px_24px]">
|
||||
|
||||
<div className="lg:col-span-8 flex flex-col gap-6 relative z-10">
|
||||
{/* Main Chart */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 }}
|
||||
className="h-[280px] bg-[#0c0b0f] rounded-xl border border-[#2a2833] p-8 flex flex-col relative shadow-inner shadow-white/[0.01]"
|
||||
>
|
||||
<div className="flex justify-between items-center mb-10">
|
||||
<h5 className="font-bold text-white uppercase tracking-[0.2em] text-xs">Global Intelligence Stream</h5>
|
||||
<div className="text-[10px] font-mono text-zinc-400 border border-[#333] bg-[#1a1820] px-3 py-1.5 rounded">LIVE UPDATES</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-end justify-between gap-1.5 md:gap-3 px-2">
|
||||
{[40, 65, 25, 60, 45, 100, 35, 60, 40].map((h, i) => (
|
||||
<div key={i} className="flex-1 flex flex-col justify-end items-center group relative h-full">
|
||||
<div
|
||||
className={`w-full rounded-t-sm transition-all duration-300 ${i === 5 ? 'bg-[#9d8bbd] shadow-[0_0_15px_rgba(157,139,189,0.2)]' : 'bg-[#4a4657]'}`}
|
||||
style={{ height: `${h}%` }}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{[
|
||||
{ label: "NODES_ONLINE", value: "1,204" },
|
||||
{ label: "THREAT_MITIGATION", value: "99.9%", glow: true },
|
||||
{ label: "LATENCY_MS", value: "0.42" }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 15 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.3 + (i * 0.1) }}
|
||||
className={`bg-[#0c0b0f] p-6 rounded-xl border border-[#2a2833] flex flex-col justify-between shadow-inner shadow-white/[0.01]`}
|
||||
>
|
||||
<div className="text-[10px] text-zinc-500 font-mono tracking-widest mb-6 uppercase">{stat.label}</div>
|
||||
<div className={`text-4xl font-black font-sans tracking-tight ${stat.glow ? 'text-[#c0aaf2]' : 'text-white'}`}>{stat.value}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.4 }}
|
||||
className="lg:col-span-4 bg-[#0c0b0f] p-8 rounded-xl border border-[#2a2833] shadow-inner shadow-white/[0.01] flex flex-col relative z-10"
|
||||
>
|
||||
<div className="mb-10 pb-4">
|
||||
<h5 className="font-bold text-white uppercase tracking-[0.2em] text-xs">Mission Log</h5>
|
||||
</div>
|
||||
<div className="space-y-8 font-mono text-[11px] leading-relaxed flex-1 overflow-auto opacity-90 pr-2">
|
||||
{[
|
||||
{ time: "12:45", msg: "Agent_Alpha: Summarizing internal memo cluster 4...", type: "normal" },
|
||||
{ time: "12:46", msg: "Encryption check complete: All tunnels secure.", type: "normal" },
|
||||
{ time: "12:48", msg: "ALERT: New semantic trend identified in Sales.", type: "alert" },
|
||||
{ time: "12:50", msg: "Syncing with ThirdEye Vault...", type: "normal" },
|
||||
{ time: "12:52", msg: "Agent_Gamma: Optimizing inference pathways.", type: "normal" },
|
||||
{ time: "12:55", msg: "Node_Delta: Status green. Processing...", type: "normal" }
|
||||
].map((log, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: -10 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.5 + (i * 0.05) }}
|
||||
className={`flex gap-4 items-start`}
|
||||
>
|
||||
<span className="text-zinc-500 shrink-0">[{log.time}]</span>
|
||||
<span className={`${
|
||||
log.type === 'alert' ? 'text-[#c0aaf2] font-bold' : 'text-zinc-300'
|
||||
}`}>{log.msg}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Integrations (Infrastructure replacement) */}
|
||||
<section className="py-40 px-8 relative z-10" id="integrations">
|
||||
<div className="max-w-[85rem] mx-auto flex flex-col items-center">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col items-center text-center opacity-90 mb-32">
|
||||
<div className="px-5 py-1.5 rounded-full border border-[#a88cf8]/30 bg-[#a88cf8]/5 text-[11px] font-mono tracking-widest text-[#a88cf8] mb-8 shadow-[0_0_20px_rgba(168,140,248,0.15)]">
|
||||
Integrations
|
||||
</div>
|
||||
<h3 className="text-4xl md:text-5xl font-semibold text-white tracking-tight leading-tight">
|
||||
Connect ThirdEye <br className="hidden md:block"/>to your infrastructure
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Central Hub Layout */}
|
||||
<div className="relative w-full max-w-5xl flex flex-col md:flex-row items-center justify-between">
|
||||
|
||||
{/* Vertical line mapping and central orb */}
|
||||
<div className="absolute left-1/2 top-[10%] bottom-[10%] -translate-x-1/2 w-[1px] bg-gradient-to-b from-transparent via-[#a88cf8]/30 to-transparent z-0 hidden md:block"></div>
|
||||
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 hidden md:flex items-center justify-center">
|
||||
<div className="w-16 h-16 rounded-full bg-[#120F1D] border border-[#a88cf8]/20 shadow-[0_0_60px_rgba(168,140,248,0.25)] relative flex items-center justify-center">
|
||||
{/* Inner glow */}
|
||||
<div className="w-8 h-8 rounded-full bg-[#a88cf8] blur-[15px] opacity-40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col gap-24 w-full md:w-[40%] items-center relative z-20">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-[#0A0A0C] border border-white/[0.08] shadow-lg rounded-2xl flex items-center justify-center mb-6 shadow-[#000]/50">
|
||||
<span className="material-symbols-outlined text-zinc-300 text-3xl">database</span>
|
||||
</div>
|
||||
<h4 className="text-[17px] font-semibold text-zinc-200 mb-3">SQL & NoSQL</h4>
|
||||
<p className="text-[14px] text-zinc-500 leading-relaxed max-w-[280px]">Securely index structured data from Postgres, MySQL, and MongoDB locally.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-[#0A0A0C] border border-white/[0.08] shadow-lg rounded-2xl flex items-center justify-center mb-6 shadow-[#000]/50">
|
||||
<span className="material-symbols-outlined text-zinc-300 text-3xl">terminal</span>
|
||||
</div>
|
||||
<h4 className="text-[17px] font-semibold text-zinc-200 mb-3">Git Providers</h4>
|
||||
<p className="text-[14px] text-zinc-500 leading-relaxed max-w-[280px]">Scan repositories and track PRs to give agents full codebase context.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col gap-24 w-full md:w-[40%] items-center relative z-20 mt-24 md:mt-0">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-[#0A0A0C] border border-white/[0.08] shadow-lg rounded-2xl flex items-center justify-center mb-6 shadow-[#000]/50">
|
||||
<span className="material-symbols-outlined text-zinc-300 text-3xl">forum</span>
|
||||
</div>
|
||||
<h4 className="text-[17px] font-semibold text-zinc-200 mb-3">Communication Streams</h4>
|
||||
<p className="text-[14px] text-zinc-500 leading-relaxed max-w-[280px]">Ingest continuous organizational communication from Slack and Teams safely.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="w-16 h-16 bg-[#0A0A0C] border border-white/[0.08] shadow-lg rounded-2xl flex items-center justify-center mb-6 shadow-[#000]/50">
|
||||
<span className="material-symbols-outlined text-zinc-300 text-3xl">cloud</span>
|
||||
</div>
|
||||
<h4 className="text-[17px] font-semibold text-zinc-200 mb-3">Cloud Storage</h4>
|
||||
<p className="text-[14px] text-zinc-500 leading-relaxed max-w-[280px]">Direct VPC peering for your high-volume AWS and Azure storage buckets.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing (Intelligence Fleet) */}
|
||||
<section className="py-40 px-8 relative z-10" id="pricing">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}
|
||||
className="text-center mb-20 flex flex-col items-center"
|
||||
>
|
||||
<div className="px-5 py-1.5 rounded-full border border-[#a88cf8]/30 bg-[#a88cf8]/5 text-[11px] font-mono tracking-widest text-[#a88cf8] mb-6 shadow-[0_0_20px_rgba(168,140,248,0.15)] uppercase">
|
||||
Fleet Access
|
||||
</div>
|
||||
<h3 className="text-4xl md:text-5xl font-bold text-white tracking-tight">Intelligence Fleet</h3>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{/* Sentry */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="bg-[#050505] border border-white/[0.05] p-10 rounded-3xl flex flex-col transition-all duration-500 hover:border-white/10 hover:bg-[#080808]"
|
||||
>
|
||||
<h4 className="text-[18px] font-semibold text-zinc-100 mb-2">Sentry</h4>
|
||||
<div className="text-4xl font-bold text-white mb-8">$2,490<span className="text-sm font-medium text-zinc-500 ml-1">/mo</span></div>
|
||||
<ul className="space-y-4 mb-12 flex-grow">
|
||||
{["10 Specialized Agents", "50k Inference Tokens/Day", "Cloud Isolation"].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3 text-zinc-400 text-[14px]">
|
||||
<span className="material-symbols-outlined text-white/20 text-[16px]">check</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button className="w-full py-3.5 rounded-xl border border-white/10 text-zinc-300 font-semibold text-[14px] hover:bg-white/[0.04] hover:text-white transition-all">Select Fleet</button>
|
||||
</motion.div>
|
||||
|
||||
{/* Commander */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="bg-[#0b0814] border border-[#a88cf8]/40 p-10 rounded-3xl relative flex flex-col z-10 transition-all duration-500 shadow-[0_0_80px_rgba(168,140,248,0.12)] md:-mt-4 md:mb-4"
|
||||
>
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#1A1528] border border-[#a88cf8]/50 text-[#a88cf8] px-4 py-1 rounded-full text-[9px] font-mono font-bold uppercase tracking-[0.2em] shadow-[0_0_20px_rgba(168,140,248,0.2)]">Recommended</div>
|
||||
<h4 className="text-[18px] font-semibold text-[#a88cf8] mb-2">Commander</h4>
|
||||
<div className="text-4xl font-bold text-white mb-8">$8,900<span className="text-sm font-medium text-zinc-500 ml-1">/mo</span></div>
|
||||
<ul className="space-y-4 mb-12 flex-grow">
|
||||
{["50 Specialized Agents", "500k Inference Tokens/Day", "On-Prem Hybrid Deployment", "24/7 Priority Support"].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3 text-zinc-200 text-[14px]">
|
||||
<span className="material-symbols-outlined text-[#a88cf8] text-[16px]">check</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button className="w-full py-3.5 rounded-xl bg-[#a88cf8] text-[#050505] font-bold text-[14px] shadow-[0_0_30px_rgba(168,140,248,0.25)] hover:shadow-[0_0_40px_rgba(168,140,248,0.4)] transition-all">Initiate Fleet</button>
|
||||
</motion.div>
|
||||
|
||||
{/* Enterprise */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="bg-[#050505] border border-white/[0.05] p-10 rounded-3xl flex flex-col transition-all duration-500 hover:border-white/10 hover:bg-[#080808]"
|
||||
>
|
||||
<h4 className="text-[18px] font-semibold text-zinc-100 mb-2">Enterprise</h4>
|
||||
<div className="text-4xl font-bold text-white mb-8">Custom</div>
|
||||
<ul className="space-y-4 mb-12 flex-grow">
|
||||
{["Unlimited Agents", "Dedicated Compute Fleet", "Full Air-Gapped Install"].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3 text-zinc-400 text-[14px]">
|
||||
<span className="material-symbols-outlined text-white/20 text-[16px]">check</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button className="w-full py-3.5 rounded-xl border border-white/10 text-zinc-300 font-semibold text-[14px] hover:bg-white/[0.04] hover:text-white transition-all">Contact Command</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="py-40 px-8 relative z-10" id="cta">
|
||||
<div className="absolute inset-0 bg-primary-container/10 -z-10 blur-[180px] alive-glow"></div>
|
||||
<div className="max-w-5xl mx-auto text-center">
|
||||
<h2 className="text-6xl md:text-8xl font-black text-white tracking-tighter mb-10 leading-[1.1]">Assemble your<br />intelligence fleet</h2>
|
||||
<p className="text-on-surface-variant/90 text-xl mb-16 max-w-2xl mx-auto leading-relaxed">The era of generic AI is over. Deploy a secure, local intelligence layer that actually understands your organization.</p>
|
||||
<Link href="/mission" className="inline-block px-16 py-8 bg-primary-container text-on-primary-container text-2xl font-black rounded-3xl shadow-[0_0_80px_rgba(167,139,250,0.4)] hover:scale-105 active:scale-95 transition-all duration-500">
|
||||
Initiate Deployment
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-zinc-950/80 backdrop-blur-3xl w-full py-20 border-t border-white/5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 max-w-7xl mx-auto px-8">
|
||||
<div className="col-span-1 md:col-span-1">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Image src="/new-logo.png" alt="ThirdEye" width={32} height={32} className="rounded-md" />
|
||||
<div className="text-2xl font-black text-white">THIRDEYE</div>
|
||||
</div>
|
||||
<div className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 leading-loose">© 2024 THIRDEYE.<br />ALL SYSTEMS OPERATIONAL.</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-white font-bold text-sm mb-2">Technical</span>
|
||||
<Link href="/logs" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">Documentation</Link>
|
||||
<Link href="/intelligence" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">API Reference</Link>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-white font-bold text-sm mb-2">Company</span>
|
||||
<Link href="/mission" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">About</Link>
|
||||
<Link href="/knowledge-base" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">Security</Link>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-white font-bold text-sm mb-2">Legal</span>
|
||||
<a href="#" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">Status</a>
|
||||
<a href="#" className="font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500 hover:text-primary transition-colors font-bold">Privacy</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user