418 lines
17 KiB
Text
418 lines
17 KiB
Text
import { useState } from "react";
|
|
import SEO from "@/components/SEO";
|
|
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
ArrowRight,
|
|
Terminal,
|
|
Copy,
|
|
Check,
|
|
BookOpen,
|
|
Zap,
|
|
Shield,
|
|
Globe,
|
|
Code2,
|
|
Database,
|
|
Users,
|
|
Boxes,
|
|
Layers,
|
|
Trophy,
|
|
Gamepad2,
|
|
} from "lucide-react";
|
|
|
|
const codeExample = `import { AeThex } from '@aethex/sdk';
|
|
|
|
const client = new AeThex({ apiKey: process.env.AETHEX_KEY });
|
|
|
|
// Authenticate user across platforms
|
|
const user = await client.passport.authenticate({
|
|
platform: 'roblox',
|
|
userId: '123456789'
|
|
});
|
|
|
|
// Sync achievements, inventory, progress
|
|
await client.sync({
|
|
achievements: user.achievements,
|
|
inventory: user.inventory,
|
|
progress: user.gameProgress
|
|
});`;
|
|
|
|
const ecosystemPillars = [
|
|
{
|
|
icon: Boxes,
|
|
title: "Six Realms",
|
|
description: "Specialized APIs for every use case",
|
|
href: "/realms",
|
|
gradient: "from-purple-500 to-indigo-600",
|
|
},
|
|
{
|
|
icon: Database,
|
|
title: "Developer APIs",
|
|
description: "REST APIs for all platforms",
|
|
href: "/dev-platform/api-reference",
|
|
gradient: "from-blue-500 to-cyan-600",
|
|
},
|
|
{
|
|
icon: Terminal,
|
|
title: "SDK & Tools",
|
|
description: "Ship faster with TypeScript SDK",
|
|
href: "/dev-platform/quick-start",
|
|
gradient: "from-cyan-500 to-emerald-600",
|
|
},
|
|
{
|
|
icon: Layers,
|
|
title: "Marketplace",
|
|
description: "Premium plugins & integrations",
|
|
href: "/dev-platform/marketplace",
|
|
gradient: "from-emerald-500 to-lime-600",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Community",
|
|
description: "12K+ developers building together",
|
|
href: "/community",
|
|
gradient: "from-amber-500 to-red-600",
|
|
},
|
|
{
|
|
icon: Trophy,
|
|
title: "Opportunities",
|
|
description: "Get paid to build",
|
|
href: "/opportunities",
|
|
gradient: "from-pink-500 to-red-600",
|
|
},
|
|
];
|
|
|
|
const stats = [
|
|
{ value: "12K+", label: "Developers" },
|
|
{ value: "2.5M+", label: "API Calls/Day" },
|
|
{ value: "150+", label: "Examples" },
|
|
{ value: "6", label: "Realms" },
|
|
];
|
|
|
|
const features = [
|
|
{
|
|
icon: Globe,
|
|
title: "Cross-Platform Identity",
|
|
description: "One passport across Roblox, Minecraft, Fortnite, and more.",
|
|
},
|
|
{
|
|
icon: Database,
|
|
title: "Universal Data Sync",
|
|
description: "Sync achievements, inventory, and progress with a single API.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Enterprise Auth",
|
|
description: "OAuth 2.0, PKCE, JWT. Production-ready out of the box.",
|
|
},
|
|
{
|
|
icon: Gamepad2,
|
|
title: "Game Integration",
|
|
description: "Drop-in SDKs for Roblox, Unity, Unreal, and more.",
|
|
},
|
|
];
|
|
|
|
const platforms = ["Roblox", "Minecraft", "Fortnite", "Meta Horizon", "Zepeto", "Unity", "Unreal"];
|
|
|
|
export default function Index() {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const copyCode = () => {
|
|
navigator.clipboard.writeText(codeExample);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<Layout hideFooter>
|
|
<SEO
|
|
pageTitle="AeThex | Developer Platform"
|
|
description="Build cross-platform experiences with the AeThex SDK. One API for identity, data sync, and authentication across metaverse platforms."
|
|
canonical={typeof window !== "undefined" ? window.location.href : undefined}
|
|
/>
|
|
|
|
{/* Subtle background */}
|
|
<div className="fixed inset-0 pointer-events-none overflow-hidden -z-10">
|
|
<div className="absolute top-0 right-0 w-[600px] h-[600px] rounded-full bg-primary/5 blur-3xl" />
|
|
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] rounded-full bg-primary/5 blur-3xl" />
|
|
<div
|
|
className="absolute inset-0 opacity-[0.02]"
|
|
style={{
|
|
backgroundImage: `linear-gradient(to right, hsl(var(--primary)) 1px, transparent 1px),
|
|
linear-gradient(to bottom, hsl(var(--primary)) 1px, transparent 1px)`,
|
|
backgroundSize: "60px 60px",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative min-h-screen">
|
|
{/* Hero */}
|
|
<section className="relative pt-20 pb-16 px-4">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
{/* Left: Value Prop */}
|
|
<div className="space-y-6">
|
|
<Badge variant="outline" className="text-xs font-mono border-primary/30">
|
|
v2.4.0 — TypeScript SDK
|
|
</Badge>
|
|
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
|
|
One API for
|
|
<br />
|
|
<span className="text-primary">cross-platform games</span>
|
|
</h1>
|
|
|
|
<p className="text-lg text-muted-foreground max-w-lg">
|
|
Connect players across Roblox, Minecraft, Fortnite, and more.
|
|
Sync identity, achievements, and inventory with a single SDK.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-3 pt-2">
|
|
<Link to="/dev-platform/quick-start">
|
|
<Button size="lg" className="font-medium shadow-lg shadow-primary/25">
|
|
Get Started
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</Link>
|
|
<Link to="/dev-platform/api-reference">
|
|
<Button size="lg" variant="outline" className="font-medium">
|
|
<BookOpen className="w-4 h-4 mr-2" />
|
|
Read Docs
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Install command */}
|
|
<div className="flex items-center gap-2 pt-4">
|
|
<code className="flex-1 bg-muted px-4 py-2.5 rounded-lg font-mono text-sm border">
|
|
npm install @aethex/sdk
|
|
</code>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => navigator.clipboard.writeText("npm install @aethex/sdk")}
|
|
>
|
|
<Copy className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Stats row */}
|
|
<div className="grid grid-cols-4 gap-4 pt-6">
|
|
{stats.map((stat) => (
|
|
<div key={stat.label} className="text-center">
|
|
<p className="text-2xl md:text-3xl font-bold text-primary">{stat.value}</p>
|
|
<p className="text-xs text-muted-foreground">{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Code Example */}
|
|
<div className="relative">
|
|
<Card className="bg-zinc-950 border-zinc-800 overflow-hidden shadow-2xl">
|
|
<div className="flex items-center justify-between px-4 py-2 border-b border-zinc-800">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/80" />
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/80" />
|
|
<div className="w-3 h-3 rounded-full bg-green-500/80" />
|
|
</div>
|
|
<span className="text-xs text-zinc-500 font-mono">app.ts</span>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-6 text-zinc-400 hover:text-white"
|
|
onClick={copyCode}
|
|
>
|
|
{copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
|
|
</Button>
|
|
</div>
|
|
<pre className="p-4 text-sm overflow-x-auto">
|
|
<code className="text-zinc-300 font-mono whitespace-pre-wrap">
|
|
<span className="text-purple-400">import</span>
|
|
<span className="text-zinc-300"> {"{"} </span>
|
|
<span className="text-yellow-300">AeThex</span>
|
|
<span className="text-zinc-300"> {"}"} </span>
|
|
<span className="text-purple-400">from</span>
|
|
<span className="text-green-400"> '@aethex/sdk'</span>
|
|
<span className="text-zinc-300">;</span>
|
|
{"\n\n"}
|
|
<span className="text-purple-400">const</span>
|
|
<span className="text-blue-300"> client</span>
|
|
<span className="text-zinc-300"> = </span>
|
|
<span className="text-purple-400">new</span>
|
|
<span className="text-yellow-300"> AeThex</span>
|
|
<span className="text-zinc-300">{"({ "}</span>
|
|
<span className="text-blue-300">apiKey</span>
|
|
<span className="text-zinc-300">: </span>
|
|
<span className="text-blue-300">process.env.</span>
|
|
<span className="text-zinc-300">AETHEX_KEY {"});"}</span>
|
|
{"\n\n"}
|
|
<span className="text-zinc-600">// Authenticate user across platforms</span>
|
|
{"\n"}
|
|
<span className="text-purple-400">const</span>
|
|
<span className="text-blue-300"> user</span>
|
|
<span className="text-zinc-300"> = </span>
|
|
<span className="text-purple-400">await</span>
|
|
<span className="text-blue-300"> client</span>
|
|
<span className="text-zinc-300">.passport.</span>
|
|
<span className="text-yellow-300">authenticate</span>
|
|
<span className="text-zinc-300">{"({"}</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" "}</span>
|
|
<span className="text-blue-300">platform</span>
|
|
<span className="text-zinc-300">: </span>
|
|
<span className="text-green-400">'roblox'</span>
|
|
<span className="text-zinc-300">,</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" "}</span>
|
|
<span className="text-blue-300">userId</span>
|
|
<span className="text-zinc-300">: </span>
|
|
<span className="text-green-400">'123456789'</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{"});"}</span>
|
|
{"\n\n"}
|
|
<span className="text-zinc-600">// Sync achievements, inventory, progress</span>
|
|
{"\n"}
|
|
<span className="text-purple-400">await</span>
|
|
<span className="text-blue-300"> client</span>
|
|
<span className="text-zinc-300">.</span>
|
|
<span className="text-yellow-300">sync</span>
|
|
<span className="text-zinc-300">{"({"}</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" "}</span>
|
|
<span className="text-blue-300">achievements</span>
|
|
<span className="text-zinc-300">: </span>
|
|
<span className="text-blue-300">user</span>
|
|
<span className="text-zinc-300">.achievements,</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" "}</span>
|
|
<span className="text-blue-300">inventory</span>
|
|
<span className="text-zinc-300">: </span>
|
|
<span className="text-blue-300">user</span>
|
|
<span className="text-zinc-300">.inventory,</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{" "}</span>
|
|
<span className="text-blue-300">progress</span>
|
|
<span className="text-zinc-300">: </span>
|
|
<span className="text-blue-300">user</span>
|
|
<span className="text-zinc-300">.gameProgress</span>
|
|
{"\n"}
|
|
<span className="text-zinc-300">{"});"}</span>
|
|
</code>
|
|
</pre>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Platforms */}
|
|
<section className="py-6 px-4 border-y border-border/30">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="flex flex-wrap items-center justify-center gap-6 md:gap-10 text-muted-foreground">
|
|
<span className="text-sm font-medium">Works with:</span>
|
|
{platforms.map((platform) => (
|
|
<span key={platform} className="text-sm font-medium hover:text-foreground transition-colors cursor-default">
|
|
{platform}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Ecosystem Pillars */}
|
|
<section className="py-20 px-4">
|
|
<div className="max-w-6xl mx-auto space-y-12">
|
|
<div className="text-center space-y-4">
|
|
<h2 className="text-3xl md:text-4xl font-bold">The AeThex Ecosystem</h2>
|
|
<p className="text-muted-foreground max-w-2xl mx-auto">
|
|
Six interconnected realms with specialized APIs for every use case
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
{ecosystemPillars.map((pillar) => (
|
|
<Link key={pillar.title} to={pillar.href}>
|
|
<Card className="group p-6 h-full hover:border-primary/40 transition-all duration-200 hover:shadow-lg hover:shadow-primary/5">
|
|
<div className="space-y-4">
|
|
<div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${pillar.gradient} flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform`}>
|
|
<pillar.icon className="w-7 h-7 text-white" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="text-xl font-semibold group-hover:text-primary transition-colors">
|
|
{pillar.title}
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm">
|
|
{pillar.description}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center text-primary text-sm font-medium group-hover:translate-x-1 transition-transform">
|
|
Explore <ArrowRight className="w-4 h-4 ml-1" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features */}
|
|
<section className="py-20 px-4 bg-muted/30">
|
|
<div className="max-w-6xl mx-auto space-y-12">
|
|
<div className="text-center space-y-4">
|
|
<h2 className="text-3xl md:text-4xl font-bold">Built for game developers</h2>
|
|
<p className="text-muted-foreground max-w-2xl mx-auto">
|
|
Everything you need to connect players across platforms
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
|
|
{features.map((feature) => (
|
|
<Card key={feature.title} className="p-5 space-y-3">
|
|
<div className="w-11 h-11 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<feature.icon className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<h3 className="font-semibold">{feature.title}</h3>
|
|
<p className="text-sm text-muted-foreground">{feature.description}</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-20 px-4">
|
|
<div className="max-w-4xl mx-auto">
|
|
<Card className="p-8 md:p-12 text-center space-y-6 bg-gradient-to-br from-primary/10 via-primary/5 to-background border-primary/20">
|
|
<Zap className="w-12 h-12 text-primary mx-auto" />
|
|
<h2 className="text-3xl md:text-4xl font-bold">Start building today</h2>
|
|
<p className="text-muted-foreground max-w-lg mx-auto">
|
|
Get your API key and integrate in minutes. Free tier includes 10K API calls/month.
|
|
</p>
|
|
<div className="flex flex-wrap gap-4 justify-center pt-2">
|
|
<Link to="/dev-platform/dashboard">
|
|
<Button size="lg" className="shadow-lg shadow-primary/25">
|
|
Get API Key
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</Link>
|
|
<Link to="/dev-platform/quick-start">
|
|
<Button size="lg" variant="outline">
|
|
View Quick Start
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer spacer */}
|
|
<div className="pb-16" />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|