458 lines
30 KiB
TypeScript
458 lines
30 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useSupabaseAuth, useProfile } from "@/hooks/use-supabase";
|
|
|
|
export default function Page() {
|
|
const router = useRouter();
|
|
const { user, loading } = useSupabaseAuth();
|
|
const { profile } = useProfile();
|
|
const [prompt, setPrompt] = useState("");
|
|
|
|
const handlePromptSubmit = () => {
|
|
if (prompt.trim()) {
|
|
sessionStorage.setItem("aethex_prompt", prompt);
|
|
router.push("/ide");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[#0a0a0a]">
|
|
{/* Fixed Navbar */}
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a]/90 backdrop-blur-md border-b border-[#1a1a1a]">
|
|
<div className="flex h-14 items-center justify-between px-4 md:px-10 max-w-6xl mx-auto">
|
|
<div className="flex items-center gap-8">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-xl font-bold text-white">AeThex Studio</span>
|
|
</Link>
|
|
<div className="hidden md:flex items-center gap-6">
|
|
<a href="#features" className="text-sm font-medium text-[#666] hover:text-white transition-colors">Features</a>
|
|
<a href="#platforms" className="text-sm font-medium text-[#666] hover:text-white transition-colors">Platforms</a>
|
|
<a href="#pricing" className="text-sm font-medium text-[#666] hover:text-white transition-colors">Pricing</a>
|
|
<a href="https://github.com/AeThex-LABS/aethex-studio" target="_blank" rel="noopener noreferrer" className="text-sm font-medium text-[#666] hover:text-white transition-colors">GitHub</a>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{!loading && (
|
|
<>
|
|
{user ? (
|
|
<>
|
|
<Link href="/profile" className="flex items-center gap-2 text-sm text-[#666] hover:text-white transition-colors">
|
|
<div className="h-7 w-7 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center text-xs font-medium text-white">
|
|
{profile?.username?.[0]?.toUpperCase() || user.email?.[0]?.toUpperCase() || "?"}
|
|
</div>
|
|
</Link>
|
|
<Link href="/ide" className="rounded-full bg-white px-5 py-2 text-sm font-medium text-[#0a0a0a] transition-all hover:bg-[#e5e5e5]">
|
|
Launch IDE
|
|
</Link>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/auth/login" className="text-sm font-medium text-[#666] hover:text-white transition-colors">Sign in</Link>
|
|
<Link href="/auth/signup" className="rounded-full bg-white px-5 py-2 text-sm font-medium text-[#0a0a0a] transition-all hover:bg-[#e5e5e5]">Get started</Link>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section - Prompt First */}
|
|
<section className="relative flex flex-col items-center px-6 pt-32 pb-20 md:pt-44 md:pb-28 overflow-hidden">
|
|
<div className="pointer-events-none absolute inset-0" style={{
|
|
background: "radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.3), transparent)"
|
|
}} />
|
|
|
|
<h1 className="relative max-w-4xl text-center text-4xl font-bold tracking-tight text-white md:text-6xl lg:text-7xl">
|
|
Build games for{" "}
|
|
<span className="bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
|
|
every platform
|
|
</span>
|
|
</h1>
|
|
<p className="relative mt-6 max-w-2xl text-center text-lg leading-relaxed text-[#888] md:text-xl">
|
|
The AI-powered cross-platform game IDE. Write once, deploy to Roblox, UEFN, Spatial, and the Web.
|
|
</p>
|
|
|
|
{/* Prompt Input Box */}
|
|
<div className="relative mt-10 w-full max-w-2xl px-4">
|
|
<div className="bg-[#111] border border-[#222] rounded-2xl p-4 shadow-2xl shadow-purple-500/5">
|
|
<textarea
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handlePromptSubmit();
|
|
}
|
|
}}
|
|
placeholder="Describe your game... e.g. 'Create a tower defense game with wave spawning'"
|
|
className="w-full min-h-[60px] bg-transparent text-white text-base resize-none outline-none placeholder-[#555]"
|
|
rows={2}
|
|
/>
|
|
<div className="flex items-center justify-between mt-3 pt-3 border-t border-[#222]">
|
|
<div className="flex items-center gap-2">
|
|
<button className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#1a1a1a] text-[#666] text-sm hover:bg-[#222] hover:text-white transition-colors">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" /></svg>
|
|
Attach
|
|
</button>
|
|
<button className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#1a1a1a] text-[#666] text-sm hover:bg-[#222] hover:text-white transition-colors">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect width="18" height="7" x="3" y="3" rx="1"/><rect width="9" height="7" x="3" y="14" rx="1"/><rect width="5" height="7" x="16" y="14" rx="1"/></svg>
|
|
Template
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={handlePromptSubmit}
|
|
disabled={!prompt.trim()}
|
|
className="flex items-center justify-center w-10 h-10 rounded-full bg-white text-[#0a0a0a] disabled:bg-[#333] disabled:text-[#666] disabled:cursor-not-allowed transition-colors hover:bg-[#e5e5e5]"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Platform badges */}
|
|
<div className="relative mt-12 flex flex-wrap items-center justify-center gap-3">
|
|
{[
|
|
{ name: "Roblox", color: "#e11d48" },
|
|
{ name: "UEFN", color: "#8b5cf6" },
|
|
{ name: "Spatial", color: "#10b981" },
|
|
{ name: "Web", color: "#3b82f6" },
|
|
].map((platform) => (
|
|
<div key={platform.name} className="flex items-center gap-2 rounded-full border border-[#222] bg-[#111] px-4 py-2">
|
|
<div className="h-2 w-2 rounded-full" style={{ backgroundColor: platform.color }} />
|
|
<span className="text-sm font-medium text-white">{platform.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats Banner */}
|
|
<section className="border-y border-[#1a1a1a] bg-[#0d0d0d]">
|
|
<div className="mx-auto flex max-w-5xl flex-col items-center justify-center gap-8 px-6 py-10 md:flex-row md:gap-16">
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-white">4</p>
|
|
<p className="mt-1 text-sm text-[#666]">Platforms supported</p>
|
|
</div>
|
|
<div className="hidden h-8 w-px bg-[#222] md:block" />
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-white">AI-Powered</p>
|
|
<p className="mt-1 text-sm text-[#666]">Code translation</p>
|
|
</div>
|
|
<div className="hidden h-8 w-px bg-[#222] md:block" />
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-white">Open Source</p>
|
|
<p className="mt-1 text-sm text-[#666]">MIT Licensed</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why AeThex vs Others */}
|
|
<section className="px-6 py-20 md:py-28">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="text-center mb-16">
|
|
<p className="text-sm font-medium uppercase tracking-widest text-purple-400">Why AeThex?</p>
|
|
<h2 className="mt-4 text-3xl font-bold tracking-tight text-white md:text-5xl">
|
|
One IDE. Every platform.
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-2xl text-lg text-[#888]">
|
|
While others lock you into one platform, AeThex lets you build for all of them
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="rounded-2xl border-2 border-purple-500/50 bg-gradient-to-b from-purple-500/10 to-transparent p-8">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="h-10 w-10 rounded-lg bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-xl font-bold text-white">AeThex Studio</span>
|
|
</div>
|
|
<ul className="space-y-4">
|
|
{[
|
|
"Roblox + UEFN + Spatial + Web",
|
|
"Full browser-based IDE",
|
|
"AI translates between platforms",
|
|
"Write once, deploy everywhere",
|
|
"Visual UI builder for all platforms",
|
|
"Open source (MIT license)",
|
|
].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-white">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-[#222] bg-[#111] p-8">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="h-10 w-10 rounded-lg bg-[#222] flex items-center justify-center text-[#666]">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/></svg>
|
|
</div>
|
|
<span className="text-xl font-bold text-[#666]">Single-platform tools</span>
|
|
</div>
|
|
<ul className="space-y-4">
|
|
{[
|
|
"Roblox only OR UEFN only",
|
|
"Generates code snippets",
|
|
"No cross-platform translation",
|
|
"Locked to one ecosystem",
|
|
"Platform-specific UI code",
|
|
"Proprietary / closed source",
|
|
].map((item, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-[#666]">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Grid */}
|
|
<section id="features" className="border-t border-[#1a1a1a] bg-[#0d0d0d] px-6 py-20 md:py-28">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="text-center mb-16">
|
|
<p className="text-sm font-medium uppercase tracking-widest text-[#666]">Features</p>
|
|
<h2 className="mt-4 text-3xl font-bold tracking-tight text-white md:text-5xl">
|
|
Everything you need to ship games
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{[
|
|
{ title: "AI Code Generation", desc: "Describe what you want in plain English. Get production-ready code instantly.", icon: "code" },
|
|
{ title: "Cross-Platform Translation", desc: "Write in Luau, TypeScript, or C#. Deploy to any supported platform.", icon: "translate" },
|
|
{ title: "Visual UI Builder", desc: "Design game UIs visually. Export to platform-native components.", icon: "ui" },
|
|
{ title: "Live Preview", desc: "See changes across all platforms in real-time. Instant feedback loop.", icon: "preview" },
|
|
{ title: "Studio Sync", desc: "Sync directly to Roblox Studio, UEFN, and more via plugin.", icon: "sync" },
|
|
{ title: "Asset Library", desc: "Thousands of free assets, sounds, and scripts ready to use.", icon: "assets" },
|
|
].map((feature, i) => (
|
|
<div key={i} className="group rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] p-6 transition-all hover:border-[#333] hover:bg-[#111]">
|
|
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#1a1a1a] text-white transition-all group-hover:bg-purple-500">
|
|
{feature.icon === "code" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>}
|
|
{feature.icon === "translate" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>}
|
|
{feature.icon === "ui" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>}
|
|
{feature.icon === "preview" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>}
|
|
{feature.icon === "sync" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2a5 5 0 0 1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8a5 5 0 0 1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg>}
|
|
{feature.icon === "assets" && <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>}
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-white">{feature.title}</h3>
|
|
<p className="mt-2 text-sm text-[#888] leading-relaxed">{feature.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Platforms */}
|
|
<section id="platforms" className="px-6 py-20 md:py-28">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="text-center mb-16">
|
|
<p className="text-sm font-medium uppercase tracking-widest text-[#666]">Platforms</p>
|
|
<h2 className="mt-4 text-3xl font-bold tracking-tight text-white md:text-5xl">
|
|
Deploy everywhere
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{[
|
|
{ name: "Roblox", color: "#e11d48", lang: "Luau", users: "70M+ daily players" },
|
|
{ name: "UEFN", color: "#8b5cf6", lang: "Verse", users: "Fortnite Creative" },
|
|
{ name: "Spatial", color: "#10b981", lang: "C#", users: "Metaverse platform" },
|
|
{ name: "Web", color: "#3b82f6", lang: "TypeScript", users: "HTML5 Canvas" },
|
|
].map((platform) => (
|
|
<div key={platform.name} className="rounded-2xl border border-[#1a1a1a] bg-[#0d0d0d] p-6 text-center hover:border-[#333] transition-colors">
|
|
<div className="mx-auto mb-4 h-16 w-16 rounded-2xl flex items-center justify-center" style={{ backgroundColor: platform.color + "15" }}>
|
|
<div className="h-8 w-8 rounded-lg" style={{ backgroundColor: platform.color }} />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white">{platform.name}</h3>
|
|
<p className="mt-1 text-sm text-purple-400 font-medium">{platform.lang}</p>
|
|
<p className="mt-2 text-xs text-[#666]">{platform.users}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing */}
|
|
<section id="pricing" className="border-t border-[#1a1a1a] bg-[#0d0d0d] px-6 py-20 md:py-28">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="text-center mb-16">
|
|
<p className="text-sm font-medium uppercase tracking-widest text-[#666]">Pricing</p>
|
|
<h2 className="mt-4 text-3xl font-bold tracking-tight text-white md:text-5xl">
|
|
Simple, transparent pricing
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-xl text-lg text-[#888]">
|
|
Start free. Upgrade when you need more power.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
<div className="rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] p-6">
|
|
<h3 className="text-xl font-bold text-white">Free</h3>
|
|
<p className="mt-2 text-sm text-[#666] h-10">Get started with AeThex</p>
|
|
<p className="mt-4"><span className="text-4xl font-bold text-white">$0</span><span className="text-[#666] ml-1">/mo</span></p>
|
|
<Link href="/auth/signup" className="mt-6 block w-full rounded-lg border border-[#333] py-2.5 text-center text-sm font-medium text-white hover:bg-[#1a1a1a] transition-colors">
|
|
Get Started
|
|
</Link>
|
|
<ul className="mt-6 space-y-3">
|
|
{["50 AI generations/month", "2 projects", "Community support", "All 4 platforms"].map((item, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-sm text-[#888]">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" className="mt-0.5 shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border-2 border-purple-500 bg-gradient-to-b from-purple-500/10 to-[#0a0a0a] p-6 relative">
|
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-purple-500 rounded-full text-xs font-medium text-white">Popular</div>
|
|
<h3 className="text-xl font-bold text-white">Pro</h3>
|
|
<p className="mt-2 text-sm text-[#666] h-10">For serious game developers</p>
|
|
<p className="mt-4"><span className="text-4xl font-bold text-white">$15</span><span className="text-[#666] ml-1">/mo</span></p>
|
|
<Link href="/auth/signup" className="mt-6 block w-full rounded-lg bg-purple-500 py-2.5 text-center text-sm font-medium text-white hover:bg-purple-600 transition-colors">
|
|
Get Started
|
|
</Link>
|
|
<ul className="mt-6 space-y-3">
|
|
{["500 AI generations/month", "Unlimited projects", "Priority support", "Advanced AI models", "Team collaboration"].map((item, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-sm text-[#888]">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" className="mt-0.5 shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] p-6">
|
|
<h3 className="text-xl font-bold text-white">Team</h3>
|
|
<p className="mt-2 text-sm text-[#666] h-10">For studios and teams</p>
|
|
<p className="mt-4"><span className="text-4xl font-bold text-white">$40</span><span className="text-[#666] ml-1">/mo</span></p>
|
|
<Link href="/auth/signup" className="mt-6 block w-full rounded-lg border border-[#333] py-2.5 text-center text-sm font-medium text-white hover:bg-[#1a1a1a] transition-colors">
|
|
Get Started
|
|
</Link>
|
|
<ul className="mt-6 space-y-3">
|
|
{["2000 AI generations/month", "Shared team workspace", "Admin controls", "Custom templates", "Dedicated support"].map((item, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-sm text-[#888]">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" className="mt-0.5 shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-[#1a1a1a] bg-[#0a0a0a] p-6">
|
|
<h3 className="text-xl font-bold text-white">Enterprise</h3>
|
|
<p className="mt-2 text-sm text-[#666] h-10">Custom solutions at scale</p>
|
|
<p className="mt-4"><span className="text-4xl font-bold text-white">Custom</span></p>
|
|
<a href="mailto:enterprise@aethex.studio" className="mt-6 block w-full rounded-lg border border-[#333] py-2.5 text-center text-sm font-medium text-white hover:bg-[#1a1a1a] transition-colors">
|
|
Contact Sales
|
|
</a>
|
|
<ul className="mt-6 space-y-3">
|
|
{["Unlimited generations", "SLA guarantee", "On-premise option", "Custom integrations", "24/7 support"].map((item, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-sm text-[#888]">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2" className="mt-0.5 shrink-0"><polyline points="20 6 9 17 4 12"/></svg>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="px-6 py-20 md:py-28">
|
|
<div className="mx-auto max-w-4xl text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight text-white md:text-5xl">
|
|
Ready to build cross-platform games?
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-xl text-lg text-[#888]">
|
|
Join thousands of developers building the next generation of games.
|
|
</p>
|
|
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Link href="/ide" className="flex items-center gap-2 rounded-full bg-white px-8 py-3 text-base font-medium text-[#0a0a0a] transition-all hover:bg-[#e5e5e5]">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
Launch IDE
|
|
</Link>
|
|
<a href="https://github.com/AeThex-LABS/aethex-studio" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 rounded-full border border-[#333] px-8 py-3 text-base font-medium text-white transition-all hover:bg-[#1a1a1a]">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
Star on GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-[#1a1a1a] bg-[#0a0a0a]">
|
|
<div className="mx-auto max-w-6xl px-6 py-12">
|
|
<div className="grid gap-8 md:grid-cols-4">
|
|
<div className="md:col-span-1">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div className="h-8 w-8 rounded-lg bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-lg font-bold text-white">AeThex</span>
|
|
</div>
|
|
<p className="text-sm text-[#666]">The cross-platform game development IDE.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-4">Product</h4>
|
|
<ul className="space-y-2 text-sm">
|
|
<li><Link href="/ide" className="text-[#666] hover:text-white transition-colors">IDE</Link></li>
|
|
<li><a href="#features" className="text-[#666] hover:text-white transition-colors">Features</a></li>
|
|
<li><a href="#pricing" className="text-[#666] hover:text-white transition-colors">Pricing</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-4">Ecosystem</h4>
|
|
<ul className="space-y-2 text-sm">
|
|
<li><a href="https://aethex.dev" className="text-[#666] hover:text-white transition-colors">aethex.dev</a></li>
|
|
<li><a href="https://aethex.foundation" className="text-[#666] hover:text-white transition-colors">aethex.foundation</a></li>
|
|
<li><a href="https://aethex.studio" className="text-purple-400 hover:text-purple-300 transition-colors">aethex.studio</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-white mb-4">Legal</h4>
|
|
<ul className="space-y-2 text-sm">
|
|
<li><Link href="/terms" className="text-[#666] hover:text-white transition-colors">Terms</Link></li>
|
|
<li><Link href="/privacy" className="text-[#666] hover:text-white transition-colors">Privacy</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12 pt-8 border-t border-[#1a1a1a] flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<p className="text-xs text-[#444]">© 2026 AeThex Labs. All rights reserved.</p>
|
|
<div className="flex items-center gap-4">
|
|
<a href="https://github.com/AeThex-LABS" target="_blank" rel="noopener noreferrer" className="text-[#666] hover:text-white transition-colors">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
</a>
|
|
<a href="https://discord.gg/aethex" target="_blank" rel="noopener noreferrer" className="text-[#666] hover:text-white transition-colors">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
|
</a>
|
|
<a href="https://x.com/aethexlabs" target="_blank" rel="noopener noreferrer" className="text-[#666] hover:text-white transition-colors">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
);
|
|
}
|