From f8fb494ef99d63dcb809165d2b0ece18f5eca426 Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Tue, 14 Oct 2025 00:43:15 +0000 Subject: [PATCH] Add detailed Getting Started docs page cgen-e3d41378c7dc400db4cb2ebe15340874 --- client/pages/docs/DocsGettingStarted.tsx | 265 +++++++++++++++++++++++ 1 file changed, 265 insertions(+) create mode 100644 client/pages/docs/DocsGettingStarted.tsx diff --git a/client/pages/docs/DocsGettingStarted.tsx b/client/pages/docs/DocsGettingStarted.tsx new file mode 100644 index 00000000..af38acbb --- /dev/null +++ b/client/pages/docs/DocsGettingStarted.tsx @@ -0,0 +1,265 @@ +import { Link } from "react-router-dom"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + CheckCircle2, + ArrowRight, + PlugZap, + Download, + Rocket, + Shield, + Layers, + Code, +} from "lucide-react"; + +const prerequisites = [ + { + title: "AeThex Account", + description: + "You will need an active AeThex account to access the dashboard, API console, and deployment tools.", + actionLabel: "Create account", + actionHref: "/get-started", + }, + { + title: "Node.js 18+ & npm", + description: + "The AeThex CLI relies on modern Node runtimes. Verify your local toolchain before continuing.", + actionLabel: "Verify environment", + actionHref: "https://nodejs.org/en/download", + }, + { + title: "Project Workspace", + description: + "Choose an empty directory for your new AeThex project or clone an existing team template.", + actionLabel: "Browse templates", + actionHref: "/projects/new", + }, +]; + +const setupSteps = [ + { + title: "Install the CLI", + description: + "The CLI bootstraps local projects, provisions cloud environments, and manages deployments.", + command: "npm install -g aethex", + }, + { + title: "Authenticate", + description: + "Log in with your AeThex credentials or paste a personal access token from the dashboard.", + command: "aethex login", + }, + { + title: "Initialize a Project", + description: + "Scaffold configuration, environment files, and example services for your team.", + command: "aethex init studio-hub", + }, + { + title: "Start the Dev Server", + description: + "Run the local environment with hot reloading, mocked services, and seeded sample data.", + command: "npm run dev", + }, +]; + +const deploymentChecklist = [ + { + title: "Configure Environments", + description: + "Define staging and production targets, secrets, and automated health probes in aethex.config.ts.", + }, + { + title: "Provision Resources", + description: + "Use `aethex deploy --preview` to create sandbox infrastructure before promoting to production.", + }, + { + title: "Enable Safeguards", + description: + "Turn on role-based access controls, audit logging, and automated rollbacks from the dashboard.", + }, +]; + +const explorationLinks = [ + { + title: "Platform Walkthrough", + description: "Tour the dashboard, notification center, and collaboration features.", + href: "/dashboard", + }, + { + title: "API Reference", + description: "Review authentication flows, REST endpoints, and webhook schemas.", + href: "/docs/api", + }, + { + title: "Tutorial Library", + description: "Follow guided builds for matchmaking services, player analytics, and live events.", + href: "/docs/tutorials", + }, + { + title: "Community Support", + description: "Ask questions, share templates, and pair up with mentors in the public forums.", + href: "/community", + }, +]; + +export default function DocsGettingStarted() { + return ( +
+
+ + + Getting Started + +

+ Launch your first AeThex project in under 30 minutes +

+

+ This guide walks through the minimum setup required to ship a production-ready AeThex application. + Complete the prerequisites, initialize a workspace with the CLI, and review the deployment checklist + before inviting collaborators. +

+
+ +
+ {prerequisites.map((item) => ( + + + + + {item.title} + + + + + {item.description} + + + + + ))} +
+ +
+
+ +

Setup workflow

+
+
+ {setupSteps.map((step, index) => ( + + + + Step {index + 1} + + {step.title} + + {step.description} + + + + 
+                  {step.command}
+
+ + + ))} +
+
+ +
+ {deploymentChecklist.map((item) => ( + + + + + {item.title} + + + +

+ {item.description} +

+ + + ))} +
+ +
+
+ +

Next steps

+
+
+ {explorationLinks.map((link) => ( + + + + {link.title} + + + + {link.description} + + + + + + + ))} +
+
+ +
+
+
+

+ Ready to automate your first deployment? +

+

+ Run aethex deploy once you have + verified environment variables, migrations, and smoke tests. Ship changes with confidence knowing + guardrails are enabled by default. +

+
+
+ + +
+
+
+
+ ); +}