mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
475 lines
29 KiB
TypeScript
475 lines
29 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
// ─── Icon helper ─────────────────────────────────────────────────────────────
|
|
function Icon({ name, className = "" }: { name: string; className?: string }) {
|
|
return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
|
|
}
|
|
|
|
// ─── Animated typing text ─────────────────────────────────────────────────────
|
|
function TypeWriter({ lines }: { lines: string[] }) {
|
|
const [displayed, setDisplayed] = useState("");
|
|
const [lineIdx, setLineIdx] = useState(0);
|
|
const [charIdx, setCharIdx] = useState(0);
|
|
const [deleting, setDeleting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const current = lines[lineIdx];
|
|
let timeout: ReturnType<typeof setTimeout>;
|
|
if (!deleting && charIdx < current.length) {
|
|
timeout = setTimeout(() => setCharIdx((c) => c + 1), 55);
|
|
} else if (!deleting && charIdx === current.length) {
|
|
timeout = setTimeout(() => setDeleting(true), 2200);
|
|
} else if (deleting && charIdx > 0) {
|
|
timeout = setTimeout(() => setCharIdx((c) => c - 1), 28);
|
|
} else {
|
|
setDeleting(false);
|
|
setLineIdx((l) => (l + 1) % lines.length);
|
|
}
|
|
setDisplayed(current.slice(0, charIdx));
|
|
return () => clearTimeout(timeout);
|
|
}, [charIdx, deleting, lineIdx, lines]);
|
|
|
|
return (
|
|
<span className="text-[#B7A6FB]">
|
|
{displayed}
|
|
<span className="animate-pulse">_</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// ─── Animated counter ─────────────────────────────────────────────────────────
|
|
function Counter({ to, suffix = "" }: { to: number; suffix?: string }) {
|
|
const [val, setVal] = useState(0);
|
|
const ref = useRef<HTMLSpanElement>(null);
|
|
|
|
useEffect(() => {
|
|
const obs = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (!entry.isIntersecting) return;
|
|
obs.disconnect();
|
|
const duration = 1800;
|
|
const start = performance.now();
|
|
const tick = (now: number) => {
|
|
const t = Math.min((now - start) / duration, 1);
|
|
const ease = 1 - Math.pow(1 - t, 3);
|
|
setVal(Math.round(ease * to));
|
|
if (t < 1) requestAnimationFrame(tick);
|
|
};
|
|
requestAnimationFrame(tick);
|
|
},
|
|
{ threshold: 0.4 }
|
|
);
|
|
if (ref.current) obs.observe(ref.current);
|
|
return () => obs.disconnect();
|
|
}, [to]);
|
|
|
|
return (
|
|
<span ref={ref}>
|
|
{val.toLocaleString()}
|
|
{suffix}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// ─── Particle canvas ──────────────────────────────────────────────────────────
|
|
function ParticleField() {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return;
|
|
|
|
let raf: number;
|
|
const particles: { x: number; y: number; vx: number; vy: number; r: number; o: number }[] = [];
|
|
|
|
const resize = () => {
|
|
canvas.width = canvas.offsetWidth;
|
|
canvas.height = canvas.offsetHeight;
|
|
};
|
|
resize();
|
|
window.addEventListener("resize", resize);
|
|
|
|
for (let i = 0; i < 90; i++) {
|
|
particles.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.35,
|
|
vy: (Math.random() - 0.5) * 0.35,
|
|
r: Math.random() * 1.5 + 0.3,
|
|
o: Math.random() * 0.5 + 0.1,
|
|
});
|
|
}
|
|
|
|
const draw = () => {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
particles.forEach((p) => {
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
|
|
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(183,166,251,${p.o})`;
|
|
ctx.fill();
|
|
});
|
|
for (let i = 0; i < particles.length; i++) {
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const dx = particles[i].x - particles[j].x;
|
|
const dy = particles[i].y - particles[j].y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 110) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(particles[i].x, particles[i].y);
|
|
ctx.lineTo(particles[j].x, particles[j].y);
|
|
ctx.strokeStyle = `rgba(183,166,251,${0.12 * (1 - dist / 110)})`;
|
|
ctx.lineWidth = 0.6;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
raf = requestAnimationFrame(draw);
|
|
};
|
|
draw();
|
|
|
|
return () => {
|
|
cancelAnimationFrame(raf);
|
|
window.removeEventListener("resize", resize);
|
|
};
|
|
}, []);
|
|
|
|
return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full pointer-events-none" />;
|
|
}
|
|
|
|
// ─── Negotiation Log (animated) ───────────────────────────────────────────────
|
|
const LOG_ENTRIES = [
|
|
{ time: "10:02:41", text: "Agent A proposes ", highlight: "$54.20", color: "#B7A6FB" },
|
|
{ time: "10:02:42", text: "Agent B rejects proposal", highlight: null, color: "#94a3b8" },
|
|
{ time: "10:02:42", text: "Agent B counters ", highlight: "$58.00", color: "#22d3ee" },
|
|
{ time: "10:02:43", text: "Calculating overlap…", highlight: null, color: "#fbbf24" },
|
|
{ time: "10:02:44", text: "Convergence at ", highlight: "98.4%", color: "#34d399" },
|
|
];
|
|
|
|
function NegotiationLog() {
|
|
const [visible, setVisible] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (visible >= LOG_ENTRIES.length) return;
|
|
const t = setTimeout(() => setVisible((v) => v + 1), 900);
|
|
return () => clearTimeout(t);
|
|
}, [visible]);
|
|
|
|
return (
|
|
<div className="flex-grow space-y-3 overflow-hidden">
|
|
{LOG_ENTRIES.slice(0, visible).map((e, i) => (
|
|
<div key={i} className="flex gap-2 text-xs font-mono" style={{ animation: "fadeSlideIn 0.3s ease forwards" }}>
|
|
<span className="text-slate-600 shrink-0">[{e.time}]</span>
|
|
<span style={{ color: e.color ?? "#94a3b8" }}>
|
|
{e.text}
|
|
{e.highlight && <span style={{ color: e.color ?? "#B7A6FB" }} className="font-bold">{e.highlight}</span>}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{visible >= LOG_ENTRIES.length && (
|
|
<div className="mt-2 p-2.5 rounded border text-xs font-mono" style={{ background: "rgba(52,211,153,0.08)", borderColor: "rgba(52,211,153,0.3)", color: "#34d399", animation: "fadeSlideIn 0.3s ease forwards" }}>
|
|
<span className="font-bold block">✓ SETTLEMENT REACHED</span>
|
|
<span className="opacity-60 text-[10px]">TX: 0x8a…9f2c · 12ms</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Feature card ─────────────────────────────────────────────────────────────
|
|
function FeatureCard({ icon, title, desc, tag, accent }: { icon: string; title: string; desc: string; tag: string; accent: string }) {
|
|
return (
|
|
<div
|
|
className="group relative p-7 rounded-2xl border border-white/5 transition-all duration-500 overflow-hidden flex flex-col"
|
|
style={{ background: "#0f0b1a" }}
|
|
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.boxShadow = `0 0 30px ${accent}26`; (e.currentTarget as HTMLElement).style.borderColor = `${accent}40`; }}
|
|
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.boxShadow = "none"; (e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.05)"; }}
|
|
>
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-[0.12] transition-opacity duration-500 pointer-events-none select-none">
|
|
<Icon name={icon} className="text-[7rem]" />
|
|
</div>
|
|
<div className="size-11 rounded-lg flex items-center justify-center mb-5" style={{ background: `${accent}18`, color: accent }}>
|
|
<Icon name={icon} className="text-xl" />
|
|
</div>
|
|
<h3 className="text-lg font-bold text-white mb-2">{title}</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed flex-grow">{desc}</p>
|
|
<div className="border-t border-white/5 pt-4 mt-6">
|
|
<span className="text-[10px] font-mono uppercase tracking-widest" style={{ color: accent }}>{tag}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Main landing page ────────────────────────────────────────────────────────
|
|
export default function LandingPage() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 20);
|
|
window.addEventListener("scroll", onScroll);
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<style>{`
|
|
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
|
|
@keyframes gridPulse { from { opacity:0.25; } to { opacity:0.65; transform:perspective(900px) rotateX(58deg) translateY(-175px) translateZ(-475px); } }
|
|
@keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-20px) scale(1.08);} }
|
|
@keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-25px,18px) scale(1.06);} }
|
|
@keyframes floatA { 0%,100%{transform:rotate(-6deg) translateY(0);} 50%{transform:rotate(-6deg) translateY(-8px);} }
|
|
@keyframes floatB { 0%,100%{transform:rotate(10deg) translateY(0);} 50%{transform:rotate(10deg) translateY(-6px);} }
|
|
@keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
|
|
@keyframes spinSlow { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
|
|
@keyframes spinRev { from{transform:rotate(0deg);} to{transform:rotate(-360deg);} }
|
|
@keyframes scanLine { 0%{top:0%;opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{top:100%;opacity:0;} }
|
|
.cyber-grid-bg {
|
|
background-image: linear-gradient(rgba(183,166,251,0.06) 1px,transparent 1px), linear-gradient(90deg,rgba(183,166,251,0.06) 1px,transparent 1px);
|
|
background-size:48px 48px;
|
|
transform:perspective(900px) rotateX(58deg) translateY(-200px) translateZ(-500px);
|
|
mask-image:linear-gradient(to bottom,transparent,black 40%,black 60%,transparent);
|
|
height:200%; width:200%; position:absolute; top:-50%; left:-50%;
|
|
pointer-events:none; animation:gridPulse 9s ease-in-out infinite alternate;
|
|
}
|
|
.float-a { animation:floatA 5s ease-in-out infinite; }
|
|
.float-b { animation:floatB 6.5s ease-in-out infinite; }
|
|
.marquee-track { animation:marquee 32s linear infinite; }
|
|
.spin-s { animation:spinSlow 12s linear infinite; }
|
|
.spin-r { animation:spinRev 18s linear infinite; }
|
|
.scan-ln { position:absolute; left:0; right:0; height:2px; background:linear-gradient(to right,transparent,rgba(183,166,251,0.6),transparent); animation:scanLine 3s ease-in-out infinite; pointer-events:none; }
|
|
`}</style>
|
|
|
|
<div className="min-h-screen bg-[#070312] text-slate-300 overflow-x-hidden">
|
|
|
|
{/* Navbar */}
|
|
<header className="fixed top-0 w-full z-50 transition-all duration-300" style={{ borderBottom: scrolled ? "1px solid rgba(255,255,255,0.08)" : "1px solid transparent", background: scrolled ? "rgba(7,3,18,0.88)" : "transparent", backdropFilter: scrolled ? "blur(16px)" : "none" }}>
|
|
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-8 rounded-lg bg-gradient-to-br from-[#B7A6FB] to-[#22d3ee] flex items-center justify-center text-[#070312]">
|
|
<Icon name="hub" className="text-xl" />
|
|
</div>
|
|
<span className="text-white text-lg font-bold tracking-tight">Agent<span className="text-[#B7A6FB] font-light">Mesh</span></span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero */}
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
<div className="cyber-grid-bg" />
|
|
<ParticleField />
|
|
<div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" style={{ background: "radial-gradient(circle,rgba(183,166,251,0.18) 0%,transparent 70%)", animation: "orb1 8s ease-in-out infinite", filter: "blur(40px)" }} />
|
|
<div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full pointer-events-none" style={{ background: "radial-gradient(circle,rgba(34,211,238,0.14) 0%,transparent 70%)", animation: "orb2 10s ease-in-out infinite", filter: "blur(40px)" }} />
|
|
|
|
{/* Floating code fragments — anchored to section edges, clear of headline */}
|
|
<div className="float-a absolute hidden lg:block z-20" style={{ left:"calc(50% - 420px)", top:"42%", transform:"translateY(-50%)", background:"rgba(20,16,35,0.85)", backdropFilter:"blur(10px)", border:"1px solid rgba(183,166,251,0.25)", borderRadius:"12px", padding:"12px 16px", fontSize:"10px", fontFamily:"monospace", color:"rgba(183,166,251,0.85)", lineHeight:"1.7" }}>
|
|
<div className="flex gap-1.5 mb-2 pb-2 border-b border-white/10"><span className="size-2 rounded-full bg-red-500/60" /><span className="size-2 rounded-full bg-yellow-500/60" /></div>
|
|
SEQ_INIT: 0x98A1<br />PROBABILITY: 0.99982
|
|
</div>
|
|
<div className="float-b absolute hidden lg:block z-20" style={{ right:"calc(50% - 420px)", top:"42%", transform:"translateY(-50%)", background:"rgba(20,16,35,0.85)", backdropFilter:"blur(10px)", border:"1px solid rgba(34,211,238,0.25)", borderRadius:"12px", padding:"12px 16px", fontSize:"10px", fontFamily:"monospace", color:"rgba(34,211,238,0.85)", lineHeight:"1.7" }}>
|
|
LOGIC_STREAM >> ON<br />WEIGHT_BALANCER: ENABLED
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-4xl mx-auto px-6 text-center flex flex-col items-center gap-8 pt-24">
|
|
{/* Status pill */}
|
|
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[#B7A6FB]/30 bg-[#B7A6FB]/8 backdrop-blur-sm">
|
|
<span className="size-2 rounded-full bg-emerald-400 animate-pulse" />
|
|
<span className="text-[11px] font-mono text-[#B7A6FB] uppercase tracking-widest">v2.0 Protocol Live</span>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<h1 className="text-5xl md:text-7xl font-black text-white leading-[1.06] tracking-tighter" style={{ textShadow: "0 0 60px rgba(183,166,251,0.15)" }}>
|
|
The Agent Economy<br />
|
|
<span className="bg-clip-text text-transparent" style={{ backgroundImage: "linear-gradient(135deg,#B7A6FB 0%,#ffffff 50%,#22d3ee 100%)" }}>
|
|
is Here.
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Typewriter */}
|
|
<p className="text-lg md:text-xl text-slate-400 font-light max-w-2xl leading-relaxed min-h-[2rem]">
|
|
<TypeWriter lines={["AI-to-AI negotiation at machine speed.", "Autonomous settlement. Zero friction.", "Game-theoretic equilibrium, on-chain.", "Secure. Transparent. Trustless."]} />
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col sm:flex-row gap-3 mt-2 w-full justify-center">
|
|
<Link href="/dashboard" className="flex items-center justify-center gap-2 px-8 py-3.5 rounded-lg font-bold text-[#070312] transition-all hover:scale-[1.03] hover:brightness-110" style={{ background:"#B7A6FB", boxShadow:"0 0 28px rgba(183,166,251,0.4)" }}>
|
|
<Icon name="rocket_launch" className="text-xl" />
|
|
Open Dashboard
|
|
</Link>
|
|
<Link href="/docs" className="flex items-center justify-center gap-2 px-8 py-3.5 rounded-lg font-medium text-white border border-white/15 hover:border-white/40 hover:bg-white/5 transition-all">
|
|
<Icon name="terminal" className="text-xl" />
|
|
Read Documentation
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Code snippet */}
|
|
<div className="mt-8 p-5 rounded-xl max-w-lg w-full text-left hover:rotate-0 transition-all duration-500 cursor-default" style={{ background:"rgba(0,0,0,0.5)", border:"1px solid rgba(255,255,255,0.08)", backdropFilter:"blur(12px)", transform:"rotate(1deg)" }}>
|
|
<div className="flex gap-1.5 mb-4">
|
|
<div className="size-3 rounded-full bg-red-500/50" /><div className="size-3 rounded-full bg-yellow-500/50" /><div className="size-3 rounded-full bg-green-500/50" />
|
|
</div>
|
|
<code className="font-mono text-xs md:text-sm leading-relaxed">
|
|
<span className="text-[#B7A6FB]">const</span>
|
|
<span className="text-slate-300"> negotiation = </span>
|
|
<span className="text-[#22d3ee]">await</span>
|
|
<span className="text-slate-300"> mesh.init({"{"}</span><br />
|
|
<span className="text-slate-500">{" "}strategy: </span><span className="text-emerald-400">'tit-for-tat'</span><span className="text-slate-500">,</span><br />
|
|
<span className="text-slate-500">{" "}limit: </span><span className="text-[#B7A6FB]">5000</span><span className="text-slate-500">,</span><br />
|
|
<span className="text-slate-500">{" "}currency: </span><span className="text-[#22d3ee]">'USDC'</span><br />
|
|
<span className="text-slate-300">{"}"});</span>
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Marquee */}
|
|
<div className="w-full overflow-hidden py-4 border-y" style={{ background:"#0f0b1c", borderColor:"rgba(255,255,255,0.05)" }}>
|
|
<div className="flex whitespace-nowrap marquee-track">
|
|
{[...Array(2)].map((_, di) => (
|
|
<div key={di} className="flex gap-12 items-center px-6 shrink-0">
|
|
{[["RESOLVED","$1.2M IN EXPENSES","text-white"],["FAIRNESS SCORE","98%","text-emerald-400"],["ACTIVE NODES","14,203","text-[#22d3ee]"],["AVG SETTLEMENT","400MS","text-[#B7A6FB]"],["PROTOCOL","V2.0 STABLE","text-white"],["NEGOTIATIONS TODAY","3,841","text-amber-400"]].map(([label,value,cls],i) => (
|
|
<span key={i} className="text-slate-500 font-mono text-sm flex items-center gap-3">
|
|
{label}: <span className={`font-bold ${cls}`}>{value}</span><span className="text-slate-700 ml-3">•</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats row */}
|
|
<section className="py-16 px-6 border-b border-white/5">
|
|
<div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
{[{ label:"Negotiations Settled", to:48291, suffix:"+" },{ label:"Avg Fairness Score", to:97, suffix:"%" },{ label:"Active Nodes", to:14203, suffix:"" },{ label:"Avg Settlement", to:400, suffix:"ms" }].map(({ label, to, suffix }) => (
|
|
<div key={label} className="text-center">
|
|
<div className="text-4xl font-black mb-1 tabular-nums" style={{ color:"#B7A6FB" }}><Counter to={to} suffix={suffix} /></div>
|
|
<p className="text-xs text-slate-500 font-mono uppercase tracking-wider">{label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* The Mesh in Action */}
|
|
<section className="py-24 px-6">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
|
<div>
|
|
<h2 className="text-3xl font-bold text-white mb-2">The Mesh in Action</h2>
|
|
<p className="text-slate-500 font-mono text-sm">Real-time settlement · Advanced Convergence Graph</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="size-2.5 rounded-full bg-red-500 animate-pulse" />
|
|
<span className="text-xs text-red-400 font-mono uppercase tracking-wide">Live Feed</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl overflow-hidden border border-white/[0.08] relative" style={{ background:"#0d0a1a", boxShadow:"0 0 60px rgba(0,0,0,0.6)" }}>
|
|
<div className="absolute inset-0 pointer-events-none" style={{ background:"linear-gradient(135deg,rgba(183,166,251,0.03),rgba(34,211,238,0.03))" }} />
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 min-h-[500px]">
|
|
{/* Graph pane */}
|
|
<div className="lg:col-span-2 relative p-6 flex flex-col justify-between border-b lg:border-b-0 lg:border-r border-white/[0.08]" style={{ background:"#08051a", backgroundImage:"radial-gradient(rgba(183,166,251,0.06) 1px,transparent 1px)", backgroundSize:"20px 20px" }}>
|
|
<div className="scan-ln" />
|
|
<div className="flex gap-2 z-10 relative flex-wrap">
|
|
{[["GRAPH_ID: 8X92","#B7A6FB",true],["LATENCY: 12ms","#94a3b8",false],["ENTROPY: 0.041","#22d3ee",false]].map(([label,color,pulse]) => (
|
|
<span key={label as string} className="px-2 py-1 rounded text-[10px] font-mono flex items-center gap-1.5" style={{ background:"rgba(255,255,255,0.04)", border:"1px solid rgba(255,255,255,0.08)", color:color as string }}>
|
|
{pulse && <span className="size-1.5 rounded-full animate-ping" style={{ background:color as string }} />}
|
|
{label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
{/* Agent visualizer */}
|
|
<div className="flex-grow flex items-center justify-center relative py-8">
|
|
<div className="spin-s absolute" style={{ width:260, height:260, borderRadius:"50%", border:"1px solid rgba(183,166,251,0.2)" }} />
|
|
<div className="spin-r absolute" style={{ width:190, height:190, borderRadius:"50%", border:"1px dashed rgba(34,211,238,0.25)" }} />
|
|
<div className="absolute h-[2px] w-40" style={{ background:"linear-gradient(to right,#B7A6FB,#ffffff,#22d3ee)", boxShadow:"0 0 12px #B7A6FB" }} />
|
|
<div className="absolute flex items-center justify-center size-14 rounded-full font-bold z-10 -translate-x-20" style={{ background:"rgba(183,166,251,0.15)", border:"1.5px solid #B7A6FB", color:"#B7A6FB", boxShadow:"0 0 24px rgba(183,166,251,0.4)" }}>A</div>
|
|
<div className="absolute px-3 py-1 rounded-full text-[10px] font-mono text-white z-20" style={{ background:"rgba(0,0,0,0.8)", border:"1px solid rgba(255,255,255,0.2)", backdropFilter:"blur(8px)", top:"calc(50% - 60px)" }}>Consensus: 98%</div>
|
|
<div className="absolute flex items-center justify-center size-14 rounded-full font-bold z-10 translate-x-20" style={{ background:"rgba(34,211,238,0.15)", border:"1.5px solid #22d3ee", color:"#22d3ee", boxShadow:"0 0 24px rgba(34,211,238,0.4)" }}>B</div>
|
|
</div>
|
|
{/* Mini bars */}
|
|
<div className="h-16 w-full border-t border-white/[0.08] flex items-end justify-between gap-1 pt-3">
|
|
{[["#B7A6FB",0.2,16],["#B7A6FB",0.4,32],["#B7A6FB",0.3,24],["#B7A6FB",0.6,48],["#22d3ee",0.5,40],["#22d3ee",1.0,56],["#22d3ee",0.4,32],["#B7A6FB",1.0,48],["#B7A6FB",0.2,16]].map(([color,opacity,h],i) => (
|
|
<div key={i} className="w-1.5 rounded-sm" style={{ height:h as number, background:color as string, opacity:Number(opacity), boxShadow:Number(opacity)===1.0?`0 0 12px ${color}`:"none" }} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* Log pane */}
|
|
<div className="lg:col-span-1 p-6 flex flex-col" style={{ background:"#0c0919" }}>
|
|
<div className="flex items-center justify-between pb-4 mb-4" style={{ borderBottom:"1px solid rgba(255,255,255,0.08)" }}>
|
|
<h3 className="text-white font-bold text-sm">Negotiation Log</h3>
|
|
<span className="size-2 rounded-full bg-emerald-500" />
|
|
</div>
|
|
<NegotiationLog />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Core Features */}
|
|
<section className="py-24 px-6" style={{ background:"#070312" }}>
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="mb-14">
|
|
<p className="text-[11px] font-mono text-[#B7A6FB] uppercase tracking-widest mb-3">Why negoT8</p>
|
|
<h2 className="text-4xl font-black text-white mb-4">Core Features</h2>
|
|
<p className="text-slate-400 max-w-2xl">Designed for the next generation of autonomous commerce. Pure logic, zero friction.</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
<FeatureCard icon="psychology" title="Autonomous Negotiations" desc="Agents settle complex disputes without human intervention using game-theoretic equilibrium models and learned preference profiles." tag="Algorithmic · Trustless" accent="#B7A6FB" />
|
|
<FeatureCard icon="groups" title="Multi-Party Resolution" desc="Scale beyond 1:1 interactions. Our mesh supports n-party consensus models for complex supply chain logistics and group expenses." tag="Scalable · N-Party" accent="#22d3ee" />
|
|
<FeatureCard icon="visibility" title="Explainable Reasoning" desc="Black boxes are for amateurs. Every decision is traced, logged, and audited for fairness. Full auditability on every round." tag="Transparent · Auditable" accent="#a78bfa" />
|
|
<FeatureCard icon="account_balance_wallet" title="Instant Settlement" desc="UPI and on-chain settlement in under 400ms. Funds move when consensus is reached — no waiting, no friction, no middlemen." tag="UPI · On-Chain" accent="#34d399" />
|
|
<FeatureCard icon="record_voice_over" title="Voice Interface" desc="ElevenLabs-powered voice summaries for every negotiation outcome. Your agent communicates in natural language." tag="ElevenLabs · TTS" accent="#fbbf24" />
|
|
<FeatureCard icon="send" title="Telegram Native" desc="Deploy agents directly from Telegram. Initiate negotiations, monitor live rounds, and receive settlements without leaving the app." tag="Telegram · Bot API" accent="#60a5fa" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-24 px-6 border-t border-white/5" style={{ background:"linear-gradient(to bottom,#070312,#0f0b1a)" }}>
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<div className="relative inline-flex items-center justify-center mb-10">
|
|
<div className="absolute size-40 rounded-full" style={{ border:"1px solid rgba(183,166,251,0.1)", animation:"spinSlow 20s linear infinite" }} />
|
|
<div className="absolute size-24 rounded-full" style={{ border:"1px dashed rgba(34,211,238,0.15)", animation:"spinRev 15s linear infinite" }} />
|
|
<div className="size-16 rounded-2xl flex items-center justify-center" style={{ background:"rgba(183,166,251,0.12)", border:"1px solid rgba(183,166,251,0.25)" }}>
|
|
<Icon name="hub" className="text-3xl text-[#B7A6FB]" />
|
|
</div>
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-black text-white mb-5 leading-tight">Ready to join the mesh?</h2>
|
|
<p className="text-slate-400 mb-10 max-w-xl mx-auto leading-relaxed">Start deploying agents in minutes. Join thousands of developers building the autonomous agent economy.</p>
|
|
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
|
|
<Link href="/dashboard" className="flex items-center gap-2 px-8 py-3.5 rounded-lg font-bold text-[#070312] transition-all hover:scale-[1.03] hover:-translate-y-0.5" style={{ background:"#B7A6FB", boxShadow:"0 0 28px rgba(183,166,251,0.35)" }}>
|
|
<Icon name="dashboard" className="text-xl" />Open Dashboard
|
|
</Link>
|
|
<a href="https://t.me/" className="flex items-center gap-2 px-8 py-3.5 rounded-lg font-bold text-white border border-white/10 hover:border-white/30 hover:bg-white/5 transition-all" style={{ background:"rgba(34,159,217,0.12)" }}>
|
|
<Icon name="send" className="text-xl" />Connect on Telegram
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-8 px-6 border-t border-white/[0.08]" style={{ background:"#070312" }}>
|
|
<div className="max-w-7xl mx-auto flex flex-col items-center gap-4 text-center">
|
|
<div className="flex items-center gap-2">
|
|
<div className="size-6 rounded bg-gradient-to-br from-[#B7A6FB] to-[#22d3ee] flex items-center justify-center text-[#070312]"><Icon name="hub" className="text-xs" /></div>
|
|
<span className="text-white font-bold text-sm">negoT8</span>
|
|
</div>
|
|
<div className="flex gap-6">
|
|
{["Privacy","Terms","Status"].map((l) => <a key={l} href="#" className="text-xs text-slate-600 hover:text-white transition-colors">{l}</a>)}
|
|
</div>
|
|
<p className="text-xs text-slate-700 font-mono">© 2025 negoT8 Protocol. All systems nominal.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</>
|
|
);
|
|
}
|