Expand Getting Started with full account + onboarding steps and Builder edit info
cgen-5db7b07c84e3478889184b2ff758de10
This commit is contained in:
Builder.io
parent
9cc7cdd7cd
commit
b37a9c35c6
1 changed files with 113 additions and 128 deletions
|
|
@ -60,7 +60,7 @@ const prerequisites = [
|
|||
description:
|
||||
"You will need an active AeThex account to access the dashboard, API console, and deployment tools.",
|
||||
actionLabel: "Create account",
|
||||
actionHref: "/get-started",
|
||||
actionHref: "/onboarding",
|
||||
},
|
||||
{
|
||||
title: "Node.js 18+ & npm",
|
||||
|
|
@ -209,34 +209,79 @@ export default function DocsGettingStarted() {
|
|||
</p>
|
||||
</section>
|
||||
|
||||
{/* NEW: Create an AeThex Account - Full step-by-step */}
|
||||
<section id="create-account" className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Shield className="h-6 w-6 text-purple-400" />
|
||||
<h3 className="text-2xl font-semibold text-white">Create an AeThex account (full)</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<Card className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white text-lg">Step 1 — Choose sign-in method</CardTitle>
|
||||
<CardDescription className="text-gray-300">AeThex supports Email/password, OAuth providers, and Web3 wallet sign-in.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="list-decimal pl-6 space-y-2 text-sm text-gray-300">
|
||||
<li>
|
||||
Email sign-up: go to <Link to="/signup" className="text-aethex-400 underline">/signup</Link>, provide your email and a secure password. A verification email will be sent — click the link to confirm.
|
||||
</li>
|
||||
<li>
|
||||
Google / GitHub: click the provider button on <Link to="/login" className="text-aethex-400 underline">/login</Link>. The first time you sign in we'll create your account automatically using the provider email.
|
||||
</li>
|
||||
<li>
|
||||
Discord: use "Continue with Discord" on the login page. Existing accounts with the same email will be linked, otherwise a new account is created. For linking flows for existing staff, see the Dashboard > Connections.
|
||||
</li>
|
||||
<li>
|
||||
Web3 (optional): sign-in with Ethereum wallet via MetaMask — used only for wallet verification and account linking (no custody).
|
||||
</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white text-lg">Step 2 — Verify & complete profile</CardTitle>
|
||||
<CardDescription className="text-gray-300">After initial login you'll be prompted to complete onboarding (profile, bio, primary arm).</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ol className="list-decimal pl-6 space-y-2 text-sm text-gray-300">
|
||||
<li>Check your email and follow the verification link (email provider flow).</li>
|
||||
<li>Complete the onboarding steps including name, bio, interests, and primary arm selection.</li>
|
||||
<li>Link any additional providers from <Link to="/dashboard?tab=connections" className="text-aethex-400 underline">Dashboard → Connections</Link> if needed.</li>
|
||||
<li>Once finished click "Finish & Go to Dashboard" to start using the platform.</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/60 border-slate-700 p-4 text-sm text-gray-300">
|
||||
<strong>Notes & troubleshooting</strong>
|
||||
<ul className="list-disc pl-6 mt-2 space-y-1">
|
||||
<li>If an OAuth provider reports "account exists", sign in using the original provider and then link the new provider from Dashboard → Connections.</li>
|
||||
<li>If you don't receive verification emails, check spam and ensure no company email filtering blocks support@aethex.tech.</li>
|
||||
<li>Staff accounts (aethex.dev emails) may receive additional role access; contact HR if you expect staff access and it doesn't appear after login.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="categories" className="space-y-6">
|
||||
<div className="text-center space-y-2">
|
||||
<h3 className="text-2xl font-semibold text-white">
|
||||
Documentation categories
|
||||
</h3>
|
||||
<h3 className="text-2xl font-semibold text-white">Documentation categories</h3>
|
||||
<p className="text-gray-300 max-w-2xl mx-auto text-sm">
|
||||
Jump into the area you need most. Each category below is mirrored in
|
||||
Builder CMS for collaborative editing.
|
||||
Jump into the area you need most. Each category below is mirrored in Builder CMS for collaborative editing.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{docCategories.map((category) => (
|
||||
<Card
|
||||
key={category.title}
|
||||
className="border-border/50 hover:border-aethex-400/40 transition-all"
|
||||
>
|
||||
<Card key={category.title} className="border-border/50 hover:border-aethex-400/40 transition-all">
|
||||
<CardHeader>
|
||||
<div
|
||||
className={`inline-flex rounded-lg bg-gradient-to-r ${category.color} px-3 py-1 text-xs uppercase tracking-wider text-white`}
|
||||
>
|
||||
<div className={`inline-flex rounded-lg bg-gradient-to-r ${category.color} px-3 py-1 text-xs uppercase tracking-wider text-white`}>
|
||||
{category.docs} docs
|
||||
</div>
|
||||
<CardTitle className="text-xl text-white mt-3">
|
||||
{category.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-gray-300">
|
||||
{category.description}
|
||||
</CardDescription>
|
||||
<CardTitle className="text-xl text-white mt-3">{category.title}</CardTitle>
|
||||
<CardDescription className="text-gray-300">{category.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="grid grid-cols-2 gap-2 text-sm text-gray-300">
|
||||
|
|
@ -263,16 +308,9 @@ export default function DocsGettingStarted() {
|
|||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardDescription className="text-gray-300">
|
||||
{item.description}
|
||||
</CardDescription>
|
||||
<CardDescription className="text-gray-300">{item.description}</CardDescription>
|
||||
<Button asChild variant="outline" className="justify-start">
|
||||
<Link
|
||||
to={item.actionHref}
|
||||
target={
|
||||
item.actionHref.startsWith("http") ? "_blank" : undefined
|
||||
}
|
||||
>
|
||||
<Link to={item.actionHref} target={item.actionHref.startsWith("http") ? "_blank" : undefined}>
|
||||
<ArrowRight className="mr-2 h-4 w-4" />
|
||||
{item.actionLabel}
|
||||
</Link>
|
||||
|
|
@ -282,21 +320,35 @@ export default function DocsGettingStarted() {
|
|||
))}
|
||||
</section>
|
||||
|
||||
<section id="onboarding-summary" className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<PlugZap className="h-6 w-6 text-purple-400" />
|
||||
<h3 className="text-2xl font-semibold text-white">Onboarding — what to expect</h3>
|
||||
</div>
|
||||
<div className="bg-slate-900/60 border-slate-700 p-4 text-sm text-gray-300">
|
||||
<p className="mb-3">Onboarding is a guided, multi-step flow that helps users complete the essential profile and platform setup. Typical onboarding steps:</p>
|
||||
<ol className="list-decimal pl-6 space-y-2">
|
||||
<li><strong>Personal Info</strong> — name, display handle, avatar.</li>
|
||||
<li><strong>Profile Type</strong> — select experience level and role (creator, studio, enterprise).</li>
|
||||
<li><strong>Interests & Skills</strong> — choose tags so we can recommend opportunities and mentors.</li>
|
||||
<li><strong>Choose Primary Arm</strong> — pick the arm that best represents your work (Labs, GameForge, Corp, Foundation, Dev-Link).</li>
|
||||
<li><strong>Creator Profile</strong> — optional portfolio, bio, links (recommended for discoverability).</li>
|
||||
<li><strong>Finish</strong> — background tasks run (profile refresh) and you land on the dashboard.</li>
|
||||
</ol>
|
||||
<p className="mt-3">You can always update these later from <Link to="/profile/settings" className="text-aethex-400 underline">Profile → Settings</Link>.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="platform-highlights" className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<LayoutDashboard className="h-6 w-6 text-purple-400" />
|
||||
<h3 className="text-2xl font-semibold text-white">
|
||||
Explore the platform
|
||||
</h3>
|
||||
<h3 className="text-2xl font-semibold text-white">Explore the platform</h3>
|
||||
</div>
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{platformHighlights.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Card
|
||||
key={item.title}
|
||||
className="bg-slate-900/60 border-slate-700"
|
||||
>
|
||||
<Card key={item.title} className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white text-lg flex items-center gap-3">
|
||||
<Icon className="h-5 w-5 text-purple-300" />
|
||||
|
|
@ -304,9 +356,7 @@ export default function DocsGettingStarted() {
|
|||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-gray-300 text-sm leading-relaxed">
|
||||
{item.description}
|
||||
</CardDescription>
|
||||
<CardDescription className="text-gray-300 text-sm leading-relaxed">{item.description}</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
|
@ -323,20 +373,12 @@ export default function DocsGettingStarted() {
|
|||
{setupSteps.map((step, index) => (
|
||||
<Card key={step.title} className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader className="space-y-1">
|
||||
<Badge variant="outline" className="w-fit">
|
||||
Step {index + 1}
|
||||
</Badge>
|
||||
<CardTitle className="text-white text-lg">
|
||||
{step.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-gray-300">
|
||||
{step.description}
|
||||
</CardDescription>
|
||||
<Badge variant="outline" className="w-fit">Step {index + 1}</Badge>
|
||||
<CardTitle className="text-white text-lg">{step.title}</CardTitle>
|
||||
<CardDescription className="text-gray-300">{step.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre className="rounded-lg border border-slate-700 bg-slate-950/60 p-4 text-sm text-purple-200">
|
||||
<code>{step.command}</code>
|
||||
</pre>
|
||||
<pre className="rounded-lg border border-slate-700 bg-slate-950/60 p-4 text-sm text-purple-200"><code>{step.command}</code></pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
|
@ -347,101 +389,44 @@ export default function DocsGettingStarted() {
|
|||
{deploymentChecklist.map((item) => (
|
||||
<Card key={item.title} className="bg-slate-900/60 border-slate-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-white text-lg">
|
||||
<CheckCircle2 className="h-5 w-5 text-emerald-400" />
|
||||
{item.title}
|
||||
</CardTitle>
|
||||
<CardTitle className="flex items-center gap-2 text-white text-lg"><CheckCircle2 className="h-5 w-5 text-emerald-400" />{item.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-300 text-sm leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
<p className="text-gray-300 text-sm leading-relaxed">{item.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section id="next-steps" className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Layers className="h-6 w-6 text-purple-400" />
|
||||
<h3 className="text-2xl font-semibold text-white">Next steps</h3>
|
||||
<section id="staff-editing" className="space-y-4">
|
||||
<h3 className="text-2xl font-semibold text-white">Staff editing & governance</h3>
|
||||
<div className="bg-slate-900/60 border-slate-700 p-4 text-sm text-gray-300">
|
||||
<p>This public documentation is the platform-facing view. Internal operational documents remain private under <code>/internal-docs</code>.</p>
|
||||
<p className="mt-2">Editors (staff) can edit public docs using Builder CMS. After changes are reviewed in Builder, create a GitHub PR to push finalized content into the repository so it can be deployed with site updates.</p>
|
||||
<ul className="list-disc pl-6 mt-2 space-y-1">
|
||||
<li><strong>Edit in Builder:</strong> Open the MCP popover and select <strong>Builder.io</strong> to edit live doc components and page content. (Staff only)</li>
|
||||
<li><strong>Publish workflow:</strong> Use the Builder preview to validate changes, then export or commit the markdown/content and open a GitHub PR for review. CI runs will deploy the updated public docs.</li>
|
||||
<li><strong>Security:</strong> Internal API references are intentionally not included in public docs. If you need to publish API guides for partners, request a gated partner docs area.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="next-steps" className="space-y-4">
|
||||
<div className="flex items-center gap-3"><Layers className="h-6 w-6 text-purple-400" /><h3 className="text-2xl font-semibold text-white">Next steps</h3></div>
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
{explorationLinks.map((link) => (
|
||||
<Card
|
||||
key={link.title}
|
||||
className="bg-slate-900/60 border-slate-700 hover:border-purple-500/40 transition-colors"
|
||||
>
|
||||
<Card key={link.title} className="bg-slate-900/60 border-slate-700 hover:border-purple-500/40 transition-colors">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between text-white text-base">
|
||||
{link.title}
|
||||
<ArrowRight className="h-4 w-4 text-purple-300" />
|
||||
</CardTitle>
|
||||
<CardDescription className="text-gray-300 text-sm">
|
||||
{link.description}
|
||||
</CardDescription>
|
||||
<CardTitle className="flex items-center justify-between text-white text-base">{link.title}<ArrowRight className="h-4 w-4 text-purple-300" /></CardTitle>
|
||||
<CardDescription className="text-gray-300 text-sm">{link.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button
|
||||
asChild
|
||||
variant="ghost"
|
||||
className="w-full justify-start text-purple-300 hover:text-purple-200"
|
||||
>
|
||||
<Link to={link.href}>
|
||||
Explore
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="ghost" className="w-full justify-start text-purple-300 hover:text-purple-200"><Link to={link.href}>Explore<ArrowRight className="ml-2 h-4 w-4" /></Link></Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="deploy"
|
||||
className="rounded-2xl border border-purple-500/40 bg-purple-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">
|
||||
Ready to automate your first deployment?
|
||||
</h3>
|
||||
<p className="text-gray-300 max-w-2xl">
|
||||
Run{" "}
|
||||
<code className="rounded bg-black/40 px-2 py-1 text-purple-200">
|
||||
aethex deploy
|
||||
</code>{" "}
|
||||
once you have verified environment variables, migrations, and
|
||||
smoke tests. Ship changes with confidence knowing guardrails are
|
||||
enabled by default.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="bg-purple-600 hover:bg-purple-500"
|
||||
>
|
||||
<Link to="/docs/cli">
|
||||
<Download className="mr-2 h-5 w-5" />
|
||||
Review CLI commands
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-purple-400/60 text-purple-200"
|
||||
>
|
||||
<Link to="/support">
|
||||
<Code className="mr-2 h-5 w-5" />
|
||||
Talk to an engineer
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue