289 lines
16 KiB
TypeScript
289 lines
16 KiB
TypeScript
import {motion} from 'framer-motion';
|
||
import {Bot, Brain, Cpu, History, Layers, Network, ShieldCheck, Workflow} from 'lucide-react';
|
||
|
||
const FEATURES = [
|
||
{
|
||
icon: Network,
|
||
title: 'Collaborative Rooms',
|
||
description: 'Multi-modal workspaces where humans and AI Agents solve complex engineering tasks together in real-time.',
|
||
},
|
||
{
|
||
icon: Brain,
|
||
title: 'Agent Memory (Git-Native)',
|
||
description: 'Version-controlled long-term memory for Agents. Branch, commit, and revert AI context just like code.',
|
||
},
|
||
{
|
||
icon: Workflow,
|
||
title: 'Skill Registry',
|
||
description: 'Package successful Agent behaviors into reusable "Skills". The new npm for the AI-native era.',
|
||
},
|
||
{
|
||
icon: Layers,
|
||
title: 'Prompt Engineering Ops',
|
||
description: 'Manage, test, and deploy prompts with the same rigor as production source code.',
|
||
},
|
||
{
|
||
icon: History,
|
||
title: 'Traceable Autonomy',
|
||
description: 'Every decision made by an Agent is logged, versioned, and auditable. Human-in-the-loop by design.',
|
||
},
|
||
{
|
||
icon: Cpu,
|
||
title: 'Compute Governance',
|
||
description: 'Unified management of LLM tokens and compute resources across your entire Agent fleet.',
|
||
},
|
||
];
|
||
|
||
const stagger = {
|
||
hidden: {},
|
||
visible: {transition: {staggerChildren: 0.08}},
|
||
};
|
||
|
||
const fadeUp = {
|
||
hidden: {opacity: 0, y: 16},
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {duration: 0.5, ease: [0.25, 0.1, 0.25, 1]},
|
||
},
|
||
};
|
||
|
||
const fadeIn = {
|
||
hidden: {opacity: 0, y: 8},
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: {duration: 0.4, ease: [0.25, 0.1, 0.25, 1]},
|
||
},
|
||
};
|
||
|
||
export function LandingHero({onRegister}: { onRegister: () => void }) {
|
||
return (
|
||
<section className="relative pt-20 pb-36">
|
||
<div className="relative mx-auto max-w-5xl px-6 text-center">
|
||
<motion.div variants={stagger} initial="hidden" animate="visible">
|
||
{/* Badge */}
|
||
<motion.div variants={fadeUp} className="mb-10">
|
||
<span
|
||
className="inline-flex items-center gap-2 rounded-full border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 px-4 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 uppercase tracking-widest">
|
||
<span className="relative flex h-1.5 w-1.5">
|
||
<span
|
||
className="animate-ping absolute inline-flex h-full w-full rounded-full bg-zinc-400 opacity-75"/>
|
||
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-zinc-500"/>
|
||
</span>
|
||
The OS for Human-Agent Collaboration
|
||
</span>
|
||
</motion.div>
|
||
|
||
{/* Heading */}
|
||
<motion.h1 variants={fadeUp}
|
||
className="text-5xl md:text-7xl font-semibold tracking-tight leading-[0.95] mb-8">
|
||
Where{" "}
|
||
<span className="text-zinc-900 dark:text-zinc-100">Humans</span>
|
||
{" "}&{" "}
|
||
<span className="text-zinc-900 dark:text-zinc-100">Agents</span>
|
||
<br/>
|
||
<span className="italic font-serif text-zinc-900 dark:text-zinc-100">Engineer</span> Together.
|
||
</motion.h1>
|
||
|
||
{/* Subtitle */}
|
||
<motion.p variants={fadeUp}
|
||
className="text-lg text-zinc-500 dark:text-zinc-500 mb-12 max-w-2xl mx-auto leading-relaxed">
|
||
GitDataAI is the unified infrastructure for the Agentic era.
|
||
Version control your Agent's memory, deploy collaborative rooms, and scale your AI workforce
|
||
with engineering rigor.
|
||
</motion.p>
|
||
|
||
{/* CTAs */}
|
||
<motion.div variants={fadeUp}
|
||
className="flex flex-col sm:flex-row items-center justify-center gap-3">
|
||
<button onClick={onRegister}
|
||
className="h-11 px-8 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-all rounded-full font-medium text-sm flex items-center gap-2">
|
||
Deploy your first Agent
|
||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||
d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
className="h-11 px-8 rounded-full border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-900/50 text-zinc-700 dark:text-zinc-300 font-medium text-sm transition-all">
|
||
Read Whitepaper
|
||
</button>
|
||
</motion.div>
|
||
|
||
{/* Terminal */}
|
||
<motion.div variants={fadeIn} className="mt-16 max-w-3xl mx-auto">
|
||
<div
|
||
className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 shadow-xl overflow-hidden">
|
||
{/* Terminal header */}
|
||
<div
|
||
className="flex items-center justify-between px-5 py-3.5 border-b border-zinc-200 dark:border-zinc-800">
|
||
<div className="flex gap-1.5">
|
||
<div className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700"/>
|
||
<div className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700"/>
|
||
<div className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700"/>
|
||
</div>
|
||
<span className="text-[10px] uppercase tracking-widest text-zinc-400 font-medium">Human-Agent Protocol v1.0</span>
|
||
</div>
|
||
|
||
{/* Terminal content */}
|
||
<div className="p-6 font-mono text-xs leading-7 text-left">
|
||
<div className="flex gap-3 mb-3">
|
||
<span className="text-zinc-400">›</span>
|
||
<span className="text-zinc-800 dark:text-zinc-200">
|
||
gitdata <span className="text-zinc-500">agent create</span> --template senior-react-dev
|
||
</span>
|
||
</div>
|
||
<div className="text-zinc-400 mb-3 ml-6 leading-6">
|
||
[12:05:01] <Bot className="inline h-3 w-3 mr-1 text-zinc-500"/> Initializing Agent 'Nexus-7'...<br/>
|
||
[12:05:02] <Brain className="inline h-3 w-3 mr-1 text-zinc-500"/> Injecting Long-term Memory from 'workspace-ctx-v4.2'<br/>
|
||
[12:05:03] <ShieldCheck className="inline h-3 w-3 mr-1 text-zinc-500"/> Compliance policy 'SOX-2' verified.
|
||
</div>
|
||
<div className="flex gap-3 mb-3">
|
||
<span className="text-zinc-400">›</span>
|
||
<span className="text-zinc-800 dark:text-zinc-200">
|
||
gitdata <span className="text-zinc-500">commit</span> -m "Tuned Agent memory for better RAG performance"
|
||
</span>
|
||
</div>
|
||
<div className="ml-6 text-zinc-500 dark:text-zinc-400">
|
||
✓ Memory branch 'main' updated. [commit_hash: 7a2f9b1]<br/>
|
||
✓ AI Skill 'Code-Optimizer' published to Registry.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export function LandingFeatures() {
|
||
return (
|
||
<section className="relative py-24 border-t border-zinc-100 dark:border-zinc-900/50">
|
||
<div className="mx-auto max-w-5xl px-6">
|
||
{/* Section header */}
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-semibold tracking-tight mb-3">
|
||
Built for the next generation of software.
|
||
</h2>
|
||
<p className="text-zinc-500 dark:text-zinc-500">
|
||
Stop building black-box AI. Start engineering transparent Agent systems.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Features grid */}
|
||
<motion.div variants={stagger} initial="hidden" whileInView="visible" viewport={{once: true}}
|
||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||
{FEATURES.map((f, i) => (
|
||
<motion.div
|
||
key={i}
|
||
variants={fadeUp}
|
||
className="p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800/50 bg-white dark:bg-zinc-900/30 hover:border-zinc-300 dark:hover:border-zinc-700/50 transition-all">
|
||
<div
|
||
className="h-10 w-10 rounded-xl bg-zinc-100 dark:bg-zinc-800/50 flex items-center justify-center mb-4">
|
||
<f.icon className="h-5 w-5 text-zinc-600 dark:text-zinc-400"/>
|
||
</div>
|
||
<h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-2 tracking-tight">{f.title}</h3>
|
||
<p className="text-xs text-zinc-500 dark:text-zinc-500 leading-relaxed">{f.description}</p>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
const HIGHLIGHTS = [
|
||
{t: 'Multi-Agent Orchestration', d: 'Let different Agents specialize in different tasks.'},
|
||
{t: 'Semantic Versioning', d: 'Roll back Agent logic to any point in the discussion.'},
|
||
{t: 'Human-in-the-Loop', d: 'Approve critical Agent actions with one click.'},
|
||
];
|
||
|
||
export function LandingHighlight() {
|
||
return (
|
||
<section className="relative py-24 border-t border-zinc-100 dark:border-zinc-900/50">
|
||
<div className="mx-auto max-w-5xl px-6">
|
||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||
{/* Text content */}
|
||
<div>
|
||
<div className="h-px w-12 bg-zinc-300 dark:bg-zinc-700 mb-8"/>
|
||
<h2 className="text-3xl md:text-4xl font-semibold tracking-tight leading-tight mb-6">
|
||
Interaction is the{" "}
|
||
<span className="text-zinc-400">New Code</span>.
|
||
</h2>
|
||
<p className="text-zinc-500 dark:text-zinc-500 mb-8 leading-relaxed">
|
||
In GitDataAI, conversations aren't just chats—they are executable streams of intent.
|
||
Our Collaborative Rooms capture context, version it, and allow Agents to take
|
||
autonomous actions within a governed environment.
|
||
</p>
|
||
|
||
{/* Feature list */}
|
||
<ul className="space-y-4">
|
||
{HIGHLIGHTS.map((item, i) => (
|
||
<li key={i} className="flex items-start gap-3">
|
||
<div
|
||
className="mt-0.5 h-4 w-4 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center shrink-0">
|
||
<div className="h-1.5 w-1.5 rounded-full bg-zinc-400 dark:bg-zinc-600"/>
|
||
</div>
|
||
<div>
|
||
<span
|
||
className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.t}</span>
|
||
<p className="text-xs text-zinc-500 mt-0.5">{item.d}</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Chat preview */}
|
||
<div>
|
||
<div
|
||
className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 p-4 shadow-lg">
|
||
<div className="space-y-3">
|
||
{/* Human message */}
|
||
<div
|
||
className="bg-white dark:bg-zinc-800/50 p-3.5 rounded-2xl border border-zinc-100 dark:border-zinc-800/50">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div
|
||
className="h-5 w-5 rounded-full bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center text-[9px] font-bold text-zinc-500">
|
||
JD
|
||
</div>
|
||
<span className="text-xs font-medium text-zinc-600 dark:text-zinc-400">John Doe (Dev)</span>
|
||
</div>
|
||
<p className="text-xs text-zinc-700 dark:text-zinc-300">
|
||
@Agent-Reviewer, please audit the memory leaks in our skill-store module.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Agent message */}
|
||
<div
|
||
className="bg-zinc-100/50 dark:bg-zinc-800/30 p-3.5 rounded-2xl border border-zinc-200 dark:border-zinc-800/50 ml-6">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<Bot className="h-3.5 w-3.5 text-zinc-500"/>
|
||
<span
|
||
className="text-xs font-medium text-zinc-500">Agent-Reviewer</span>
|
||
</div>
|
||
<p className="text-xs text-zinc-600 dark:text-zinc-400 mb-3">
|
||
Audit complete. Found 2 leaks in `useMemory.ts`. Suggesting fix via Git PR...
|
||
</p>
|
||
<div className="flex gap-2">
|
||
<button
|
||
className="h-6 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[10px] px-3 rounded-md font-medium transition-colors">
|
||
Approve Fix
|
||
</button>
|
||
<button
|
||
className="h-6 border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 text-[10px] px-3 rounded-md font-medium transition-colors">
|
||
View Diff
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|