Create DocsPlatform page
cgen-f86c692f6743484bb15d1bce8e6bead4
This commit is contained in:
Builder.io
parent
7103e89029
commit
a90ddb69e0
1 changed files with 354 additions and 0 deletions
354
client/pages/docs/DocsPlatform.tsx
Normal file
354
client/pages/docs/DocsPlatform.tsx
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
IdCard,
|
||||
Users,
|
||||
ActivitySquare,
|
||||
Sparkles,
|
||||
Compass,
|
||||
Workflow,
|
||||
ShieldCheck,
|
||||
Database,
|
||||
BarChart3,
|
||||
Globe,
|
||||
ArrowRight,
|
||||
Link as LinkIcon,
|
||||
} from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const platformPillars = [
|
||||
{
|
||||
title: "Unified dashboard",
|
||||
description:
|
||||
"Monitor deployments, live metrics, and release health from a single control surface. Jump into incidents, approvals, and audit trails without leaving the workspace.",
|
||||
icon: LayoutDashboard,
|
||||
href: "/dashboard",
|
||||
cta: "Visit dashboard",
|
||||
},
|
||||
{
|
||||
title: "AeThex Passport",
|
||||
description:
|
||||
"Give builders portable identity with verified skills, achievements, and cross-product progress synced to their Passport profile.",
|
||||
icon: IdCard,
|
||||
href: "/passport/me",
|
||||
cta: "Open passport",
|
||||
},
|
||||
{
|
||||
title: "Collaboration",
|
||||
description:
|
||||
"Coordinate teams with realms, role-based access, and shared project templates. Invite talent directly from the community directory.",
|
||||
icon: Users,
|
||||
href: "/community",
|
||||
cta: "Meet the community",
|
||||
},
|
||||
{
|
||||
title: "Live operations",
|
||||
description:
|
||||
"Run live experiences with analytics, status pages, and automated incident workflows wired into AeThex services.",
|
||||
icon: ActivitySquare,
|
||||
href: "/status",
|
||||
cta: "Check status",
|
||||
},
|
||||
];
|
||||
|
||||
const collaborationWorkflows = [
|
||||
{
|
||||
label: "Onboard & align",
|
||||
description:
|
||||
"Welcome teammates through the guided onboarding flow, capture their interests, and assign the right mentorship programs from day one.",
|
||||
highlight: "Onboarding modules cover personal info, interests, and project preferences so teams ramp quickly.",
|
||||
},
|
||||
{
|
||||
label: "Build together",
|
||||
description:
|
||||
"Kick off projects with shared canvases, synced task boards, and CLI-generated environments. Use the realm switcher to target the correct workspace.",
|
||||
highlight: "In-app toasts notify collaborators when schema changes, deployments, or reviews need attention.",
|
||||
},
|
||||
{
|
||||
label: "Launch & iterate",
|
||||
description:
|
||||
"Promote builds through AeThex Deploy, track KPIs in the analytics feed, and publish release notes via the changelog tools.",
|
||||
highlight: "Community announcements and blog posts keep players and stakeholders in the loop automatically.",
|
||||
},
|
||||
];
|
||||
|
||||
const experienceModules = [
|
||||
{
|
||||
name: "Social feed",
|
||||
description:
|
||||
"Share updates, prototypes, and patch notes in the feed. The composer supports media, Markdown, and rollout tags for targeted audiences.",
|
||||
href: "/feed",
|
||||
},
|
||||
{
|
||||
name: "Mentorship programs",
|
||||
description:
|
||||
"Match emerging studios with veteran advisors. Outline project goals, track sessions, and graduate mentors into full collaborators.",
|
||||
href: "/mentorship",
|
||||
},
|
||||
{
|
||||
name: "Community showcases",
|
||||
description:
|
||||
"Highlight standout creators, publish case studies, and route interested partners to booking forms right from the community page.",
|
||||
href: "/community",
|
||||
},
|
||||
{
|
||||
name: "Profile passport",
|
||||
description:
|
||||
"Curate public achievements, experience levels, and verified skill badges. Use the passport summary widget across marketing surfaces.",
|
||||
href: "/profile",
|
||||
},
|
||||
];
|
||||
|
||||
const analyticsHighlights = [
|
||||
{
|
||||
title: "Realtime insights",
|
||||
detail:
|
||||
"Project metrics stream into dashboards with per-environment filters. Combine ingestion data with custom signals exposed via the REST API.",
|
||||
icon: BarChart3,
|
||||
},
|
||||
{
|
||||
title: "Governed data",
|
||||
detail:
|
||||
"Role-aware views ensure sensitive dashboards only appear for authorized users. Export snapshots or schedule recurring digests.",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
title: "Operational history",
|
||||
detail:
|
||||
"Every deployment, incident, and advisory event lands in the shared timeline so teams can audit changes months later.",
|
||||
icon: Database,
|
||||
},
|
||||
];
|
||||
|
||||
const governanceChecklist = [
|
||||
"OAuth connections let studios link third-party identity providers for single sign-on and group provisioning.",
|
||||
"Realm switcher enforces scoped access to projects, assets, and financial data.",
|
||||
"Compliance exports bundle audit logs, access reviews, and deployment manifests for regulatory submissions.",
|
||||
"Automated alerts surface risk when environments drift or policy checks fail during deploys.",
|
||||
];
|
||||
|
||||
const resourceLinks = [
|
||||
{
|
||||
title: "Explore onboarding",
|
||||
href: "/onboarding",
|
||||
label: "Review builder flow",
|
||||
},
|
||||
{
|
||||
title: "Configure OAuth",
|
||||
href: "/settings/oauth",
|
||||
label: "Manage identity",
|
||||
},
|
||||
{
|
||||
title: "Launch new project",
|
||||
href: "/projects/new",
|
||||
label: "Start from template",
|
||||
},
|
||||
{
|
||||
title: "Track live status",
|
||||
href: "/status",
|
||||
label: "Monitor ops",
|
||||
},
|
||||
];
|
||||
|
||||
export default function DocsPlatform() {
|
||||
return (
|
||||
<div className="space-y-12">
|
||||
<section className="space-y-4">
|
||||
<Badge className="bg-cyan-500/20 text-cyan-100 uppercase tracking-wide">
|
||||
<Sparkles className="mr-2 h-3 w-3" />
|
||||
Platform Experience
|
||||
</Badge>
|
||||
<h2 className="text-3xl font-semibold text-white">Deliver cohesive player and builder journeys on AeThex</h2>
|
||||
<p className="text-gray-300 max-w-3xl">
|
||||
Beyond deployment pipelines and CLI tooling, AeThex bundles collaboration, identity, and live-ops systems so
|
||||
teams can craft unforgettable experiences. Use this guide to orient new stakeholders and plan end-to-end
|
||||
platform rollouts.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="pillars" className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<LayoutDashboard className="h-6 w-6 text-cyan-300" />
|
||||
<h3 className="text-2xl font-semibold text-white">Core pillars</h3>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{platformPillars.map((pillar) => {
|
||||
const Icon = pillar.icon;
|
||||
return (
|
||||
<Card key={pillar.title} className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className="h-6 w-6 text-cyan-300" />
|
||||
<CardTitle className="text-white text-lg">{pillar.title}</CardTitle>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs text-cyan-200 border-cyan-500/40">
|
||||
Platform
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardDescription className="text-gray-300 text-sm">
|
||||
{pillar.description}
|
||||
</CardDescription>
|
||||
<Button
|
||||
asChild
|
||||
variant="ghost"
|
||||
className="justify-start text-cyan-200 hover:text-cyan-100 hover:bg-cyan-500/10"
|
||||
>
|
||||
<Link to={pillar.href}>
|
||||
{pillar.cta}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="workflows" className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Workflow className="h-6 w-6 text-cyan-300" />
|
||||
<h3 className="text-2xl font-semibold text-white">Collaboration workflows</h3>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{collaborationWorkflows.map((stage, index) => (
|
||||
<Card key={stage.label} className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader className="space-y-2">
|
||||
<Badge className="w-fit bg-cyan-600/30 text-cyan-100">Step {index + 1}</Badge>
|
||||
<CardTitle className="text-white text-lg flex items-center gap-2">
|
||||
<Globe className="h-5 w-5 text-cyan-300" />
|
||||
{stage.label}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<CardDescription className="text-gray-300 text-sm leading-relaxed">
|
||||
{stage.description}
|
||||
</CardDescription>
|
||||
<p className="text-cyan-200 text-sm bg-cyan-500/10 border border-cyan-500/30 rounded-lg p-3">
|
||||
{stage.highlight}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="modules" className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Compass className="h-6 w-6 text-cyan-300" />
|
||||
<h3 className="text-2xl font-semibold text-white">Experience modules</h3>
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{experienceModules.map((module) => (
|
||||
<Card key={module.name} className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white text-base flex items-center justify-between">
|
||||
{module.name}
|
||||
<Badge variant="outline" className="text-xs text-cyan-200 border-cyan-500/40">
|
||||
Platform
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardDescription className="text-gray-300 text-sm">
|
||||
{module.description}
|
||||
</CardDescription>
|
||||
<Button
|
||||
asChild
|
||||
variant="ghost"
|
||||
className="justify-start text-cyan-200 hover:text-cyan-100 hover:bg-cyan-500/10"
|
||||
>
|
||||
<Link to={module.href}>
|
||||
Learn more
|
||||
<LinkIcon className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="analytics" className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<BarChart3 className="h-6 w-6 text-cyan-300" />
|
||||
<h3 className="text-2xl font-semibold text-white">Insights & analytics</h3>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{analyticsHighlights.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Card key={item.title} className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon className="h-6 w-6 text-cyan-300" />
|
||||
<CardTitle className="text-white text-lg">{item.title}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-gray-300 text-sm">
|
||||
{item.detail}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="governance" className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldCheck className="h-6 w-6 text-cyan-300" />
|
||||
<h3 className="text-2xl font-semibold text-white">Governance checklist</h3>
|
||||
</div>
|
||||
<Card className="bg-slate-900/60 border-slate-700">
|
||||
<CardContent>
|
||||
<ul className="list-disc space-y-3 pl-6 text-gray-300 text-sm">
|
||||
{governanceChecklist.map((item) => (
|
||||
<li key={item}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<section id="next-steps" className="rounded-2xl border border-cyan-500/40 bg-cyan-900/20 p-8">
|
||||
<div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-2xl font-semibold text-white">Keep exploring the platform</h3>
|
||||
<p className="text-gray-300 max-w-2xl text-sm">
|
||||
Share this page with non-technical teammates. It links out to every major surface area so marketing,
|
||||
product, and operations groups can navigate confidently.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{resourceLinks.map((resource) => (
|
||||
<Button
|
||||
key={resource.title}
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-cyan-600 hover:bg-cyan-500 text-white"
|
||||
>
|
||||
<Link to={resource.href}>
|
||||
{resource.label}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue