Skip to content

Commit 5c0088b

Browse files
aadesh18aadesh18
authored
welcome page changes (#1311)
This PR is for the Welcome page in Mintlify docs.
1 parent 39b2f56 commit 5c0088b

1 file changed

Lines changed: 105 additions & 42 deletions

File tree

‎docs-mintlify/index.mdx‎

Lines changed: 105 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,23 @@ description: "Stack Auth documentation for setup, components, SDK usage, and RES
44
sidebarTitle: "Overview"
55
---
66

7-
<div className="not-prose relative left-1/2 right-1/2 -mx-[50vw] w-screen overflow-hidden bg-[#121212]">
7+
export const SectionLink = ({ href, children }) => (
8+
<a href={href} className="text-base font-semibold text-slate-900 no-underline hover:text-[#6b5df7] dark:text-white dark:hover:text-[#8b7cf9]">{children}</a>
9+
);
10+
11+
export const ChipLink = ({ href, children }) => (
12+
<a href={href} className="inline-flex rounded-md bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600 no-underline transition hover:bg-[#6b5df7]/10 hover:text-[#6b5df7] dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-[#6b5df7]/20 dark:hover:text-[#8b7cf9]">{children}</a>
13+
);
14+
15+
export const CardTitle = ({ href, children }) => (
16+
<a href={href} className="mb-1 block text-sm font-semibold text-slate-900 no-underline hover:text-[#6b5df7] dark:text-white dark:hover:text-[#8b7cf9]">{children}</a>
17+
);
18+
19+
export const CardChip = ({ href, children }) => (
20+
<a href={href} className="rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500 no-underline transition hover:bg-[#6b5df7]/10 hover:text-[#6b5df7] dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-[#6b5df7]/20 dark:hover:text-[#8b7cf9]">{children}</a>
21+
);
22+
23+
<div className="not-prose relative w-full overflow-hidden rounded-xl bg-[#121212]">
824
<img
925
src="/images/hero-illustration-full.svg"
1026
alt=""
@@ -71,55 +87,102 @@ sidebarTitle: "Overview"
7187

7288
<div className="mx-auto mt-20 max-w-7xl px-4 sm:px-6 lg:px-8">
7389
<div>
74-
<h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Explore the Docs</h2>
90+
<h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Navigate Through Our Docs</h2>
7591
<p className="mt-3 max-w-3xl text-base text-slate-600 dark:text-slate-300">
76-
Jump into the part of the platform that matches how you are integrating Stack Auth.
92+
Start at the top and work your way down, or jump straight to the section you need.
7793
</p>
7894
</div>
7995

80-
<CardGroup cols={2}>
81-
<Card title="Getting Started" icon="rocket" href="/guides/getting-started/setup" cta="Open guide">
82-
Installation, environment setup, and the first authentication flow.
83-
</Card>
84-
<Card title="Setup Guide" icon="puzzle-piece" href="/guides/getting-started/setup" cta="View setup">
85-
Configure prebuilt React and Next.js auth UI, providers, and handlers.
86-
</Card>
87-
<Card title="SDK Reference" icon="book" href="/sdk/overview" cta="Browse SDK">
88-
Hooks, objects, and types for working with users, teams, projects, and sessions.
89-
</Card>
90-
<Card title="REST API" icon="code" href="/api/overview" cta="See endpoints">
91-
HTTP APIs for client, server, admin, and webhook integrations in any stack.
92-
</Card>
93-
</CardGroup>
94-
</div>
96+
<h3 className="mt-10 mb-6 text-lg font-semibold text-slate-500 dark:text-slate-400">Recommended Order</h3>
9597

96-
<div className="mx-auto mt-20 max-w-7xl px-4 sm:px-6 lg:px-8">
97-
<div>
98-
<h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Common Tasks</h2>
99-
<p className="mt-3 max-w-3xl text-base text-slate-600 dark:text-slate-300">
100-
Start from practical guides for the features teams tend to configure first.
101-
</p>
98+
<div className="relative mt-2 ml-4 border-l-2 border-slate-200 pl-8 dark:border-slate-700">
99+
{/* Getting Started */}
100+
<div className="relative mb-10">
101+
<div className="absolute -left-[2.55rem] top-0.5 h-4 w-4 rounded-full border-2 border-[#6b5df7] bg-[#6b5df7]" />
102+
<SectionLink href="/guides/getting-started/setup">Getting Started</SectionLink>
103+
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">First-time setup, install the SDK, get auth running in minutes.</p>
104+
<div className="mt-3 flex flex-wrap gap-2">
105+
<ChipLink href="/guides/getting-started/setup">Setup</ChipLink>
106+
<ChipLink href="/guides/getting-started/user-fundamentals">Users</ChipLink>
107+
<ChipLink href="/guides/getting-started/ai-integration">AI Integration</ChipLink>
108+
<ChipLink href="/guides/apps/launch-checklist/overview">Production</ChipLink>
109+
</div>
110+
</div>
111+
112+
{/* Components */}
113+
<div className="relative mb-10">
114+
<div className="absolute -left-[2.55rem] top-0.5 h-4 w-4 rounded-full border-2 border-[#6b5df7] bg-[#6b5df7]" />
115+
<SectionLink href="/sdk/overview">Components</SectionLink>
116+
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">Drop-in UI for sign-in, sign-up, account settings, and team switching.</p>
117+
<div className="mt-3 flex flex-wrap gap-2">
118+
<ChipLink href="/guides/apps/authentication/overview">SignIn / SignUp</ChipLink>
119+
</div>
120+
</div>
121+
122+
{/* SDK Reference */}
123+
<div className="relative mb-4">
124+
<div className="absolute -left-[2.55rem] top-0.5 h-4 w-4 rounded-full border-2 border-[#6b5df7] bg-[#6b5df7]" />
125+
<SectionLink href="/sdk/overview">SDK Reference</SectionLink>
126+
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">Hooks, types, and objects for reading and writing user data in code.</p>
127+
<div className="mt-3 flex flex-wrap gap-2">
128+
<ChipLink href="/sdk/hooks/use-user">useUser</ChipLink>
129+
<ChipLink href="/sdk/types/user">Types</ChipLink>
130+
<ChipLink href="/sdk/objects/stack-app">StackApp</ChipLink>
131+
</div>
132+
</div>
133+
</div>
134+
135+
{/* Branch divider */}
136+
<div className="ml-4 flex items-center gap-3 py-4 pl-8">
137+
<div className="h-px flex-1 bg-slate-200 dark:bg-slate-700" />
138+
<span className="text-xs font-medium uppercase tracking-wider text-slate-400 dark:text-slate-500">Then pick your path</span>
139+
<div className="h-px flex-1 bg-slate-200 dark:bg-slate-700" />
140+
</div>
141+
142+
{/* Branching cards */}
143+
<div className="ml-4 grid grid-cols-1 gap-3 pl-8 sm:grid-cols-3">
144+
<div className="rounded-lg border border-slate-200 p-4 dark:border-slate-700">
145+
<CardTitle href="/guides/going-further/stack-app">Going Further</CardTitle>
146+
<p className="text-xs text-slate-500 dark:text-slate-400">Stack App configuration, backend integration, local development, metadata.</p>
147+
<div className="mt-2 flex flex-wrap gap-1.5">
148+
<CardChip href="/guides/going-further/stack-app">Stack App</CardChip>
149+
<CardChip href="/guides/going-further/local-development">Local dev</CardChip>
150+
<CardChip href="/guides/going-further/backend-integration">Backend</CardChip>
151+
</div>
152+
</div>
153+
<div className="rounded-lg border border-slate-200 p-4 dark:border-slate-700">
154+
<CardTitle href="/guides/apps/authentication/overview">Apps</CardTitle>
155+
<p className="text-xs text-slate-500 dark:text-slate-400">Authentication, emails, payments, webhooks, API keys.</p>
156+
<div className="mt-2 flex flex-wrap gap-1.5">
157+
<CardChip href="/guides/apps/authentication/overview">Auth</CardChip>
158+
<CardChip href="/guides/apps/emails/overview">Emails</CardChip>
159+
<CardChip href="/guides/apps/payments/overview">Payments</CardChip>
160+
</div>
161+
</div>
162+
<div className="rounded-lg border border-slate-200 p-4 dark:border-slate-700">
163+
<CardTitle href="/api/overview">REST API</CardTitle>
164+
<p className="text-xs text-slate-500 dark:text-slate-400">HTTP endpoints for any backend or language.</p>
165+
<div className="mt-2 flex flex-wrap gap-1.5">
166+
<CardChip href="/api/overview">REST API</CardChip>
167+
<CardChip href="/guides/apps/webhooks/overview">Webhooks</CardChip>
168+
</div>
169+
</div>
102170
</div>
103171

172+
<h3 className="mt-10 mb-6 text-lg font-semibold text-slate-500 dark:text-slate-400">Explore Apps</h3>
173+
104174
<CardGroup cols={3}>
105-
<Card title="API Keys" icon="key" href="/guides/apps/api-keys/overview" cta="Manage keys">
106-
Set up publishable, secret, user, and team API keys.
107-
</Card>
108-
<Card title="Permissions" icon="shield" href="/guides/apps/rbac/overview" cta="Configure access">
109-
Define roles and permission models for projects and teams.
110-
</Card>
111-
<Card title="Webhooks" icon="webhook" href="/guides/apps/webhooks/overview" cta="Add webhooks">
112-
Trigger downstream systems from auth, user, and team events.
113-
</Card>
114-
<Card title="Backend Integration" icon="server" href="/guides/going-further/backend-integration" cta="Learn more">
115-
Understand how Stack Auth fits into your server architecture.
116-
</Card>
117-
<Card title="MCP Setup" icon="terminal" href="/guides/other/mcp-setup" cta="Set up MCP">
118-
Connect Stack Auth docs and workflows to AI-enabled development tools.
119-
</Card>
120-
<Card title="FAQ" icon="circle-question" href="/guides/faq" cta="Read FAQ">
121-
Check answers to common setup, integration, and product questions.
122-
</Card>
175+
<Card title="Authentication" icon="right-to-bracket" href="/guides/apps/authentication/overview" />
176+
<Card title="Auth Providers" icon="users" href="/guides/apps/authentication/auth-providers" />
177+
<Card title="Emails" icon="envelope" href="/guides/apps/emails/overview" />
178+
<Card title="Payments" icon="credit-card" href="/guides/apps/payments/overview" />
179+
<Card title="Webhooks" icon="webhook" href="/guides/apps/webhooks/overview" />
180+
<Card title="API Keys" icon="key" href="/guides/apps/api-keys/overview" />
181+
<Card title="Permissions" icon="shield" href="/guides/apps/rbac/overview" />
182+
<Card title="Teams" icon="people-group" href="/guides/apps/teams/overview" />
183+
<Card title="Analytics" icon="chart-line" href="/guides/apps/analytics/overview" />
184+
<Card title="Data Vault" icon="database" href="/guides/apps/data-vault/overview" />
185+
<Card title="Launch Checklist" icon="clipboard-check" href="/guides/apps/launch-checklist/overview" />
123186
</CardGroup>
124187
</div>
125188

0 commit comments

Comments
 (0)