development
tsx 375 lines 15.7 KB
Raw
1 import type { Metadata } from "next";
2 import Link from "next/link";
3 import { StructuredData } from "@/components/structured-data";
4 import { absoluteUrl, genPageMetadata } from "../seo";
5
6 const comparisonRows = [
7 {
8 label: "Primary job",
9 smbcloud:
10 "Handle sign-in, signup, sessions, and hosted auth flows without extra platform sprawl.",
11 auth0:
12 "Provide a broad identity platform with many enterprise-oriented capabilities.",
13 },
14 {
15 label: "Best fit",
16 smbcloud:
17 "Small teams that want hosted auth to stay straightforward.",
18 auth0:
19 "Teams that need a broader identity stack and are willing to own the complexity.",
20 },
21 {
22 label: "Product shape",
23 smbcloud: "Focused auth service inside the smbCloud platform.",
24 auth0: "Large identity platform with more moving parts and deeper scope.",
25 },
26 {
27 label: "Why teams pick it",
28 smbcloud: "Because auth should not turn into its own side project.",
29 auth0: "Because identity is large enough to justify a larger toolset.",
30 },
31 ];
32
33 const smbcloudFits = [
34 "You want hosted sign-in, signup, and session flows.",
35 "You want auth to stay out of the way of the product.",
36 "You do not want to spend half the week configuring identity plumbing.",
37 "You want a cleaner fit for a small team shipping quickly.",
38 ];
39
40 const auth0StillFits = [
41 "You need a broader identity platform with deeper enterprise scope.",
42 "Your organization already runs substantial Auth0 workflows.",
43 "The extra complexity is acceptable because identity is a major internal system.",
44 ];
45
46 const bestFor = [
47 "Small product teams",
48 "SaaS apps that need hosted auth fast",
49 "Projects that want auth close to deploy and mail inside one platform",
50 "Founders who want sessions and sign-in solved without a new platform problem",
51 "Teams that want hosted auth without a giant identity stack",
52 ];
53
54 const faqs = [
55 {
56 question: "Is smbCloud Auth an Auth0 replacement?",
57 answer:
58 "For some teams, yes. If you want hosted sign-in, signup, sessions, and user management without adopting a broader identity stack, smbCloud Auth may fit better. If identity is large and complex enough to justify a bigger platform, Auth0 may fit better.",
59 },
60 {
61 question: "What is the biggest difference between smbCloud Auth and Auth0?",
62 answer:
63 "Auth0 is broader. smbCloud Auth is narrower on purpose.",
64 },
65 {
66 question: "Who should switch from Auth0 to smbCloud Auth?",
67 answer:
68 "Teams that feel like they bought a bigger identity platform than they actually needed.",
69 },
70 ];
71
72 export const metadata: Metadata = {
73 ...genPageMetadata({
74 title: "Auth0 alternative for simpler hosted auth",
75 description:
76 "smbCloud Auth is an Auth0 alternative for teams that want hosted sign-in, signup, sessions, and auth flows without adopting a larger identity platform than they need.",
77 path: "/auth0-alternative",
78 keywords: [
79 "Auth0 alternative",
80 "hosted auth alternative",
81 "sign in and signup platform",
82 "session management platform",
83 "hosted auth flows",
84 "identity platform alternative",
85 "smbCloud Auth",
86 ],
87 }),
88 };
89
90 const structuredData = {
91 "@context": "https://schema.org",
92 "@graph": [
93 {
94 "@type": "WebPage",
95 "@id": absoluteUrl("/auth0-alternative#webpage"),
96 url: absoluteUrl("/auth0-alternative"),
97 name: "Auth0 alternative for simpler hosted auth",
98 description:
99 "Compare smbCloud Auth and Auth0 for simpler hosted auth workflows.",
100 isPartOf: {
101 "@id": absoluteUrl("/#website"),
102 },
103 },
104 {
105 "@type": "BreadcrumbList",
106 itemListElement: [
107 {
108 "@type": "ListItem",
109 position: 1,
110 name: "Home",
111 item: absoluteUrl("/"),
112 },
113 {
114 "@type": "ListItem",
115 position: 2,
116 name: "Auth0 alternative",
117 item: absoluteUrl("/auth0-alternative"),
118 },
119 ],
120 },
121 {
122 "@type": "FAQPage",
123 mainEntity: faqs.map((faq) => ({
124 "@type": "Question",
125 name: faq.question,
126 acceptedAnswer: {
127 "@type": "Answer",
128 text: faq.answer,
129 },
130 })),
131 },
132 ],
133 };
134
135 export default function Auth0AlternativePage() {
136 return (
137 <div>
138 <StructuredData data={structuredData} />
139
140 <section className="relative overflow-hidden px-6 pt-24 pb-16 sm:pt-32 sm:pb-20 lg:px-8">
141 <div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[520px] bg-[radial-gradient(ellipse_75%_50%_at_50%_0%,rgba(99,102,241,0.18),transparent)] dark:bg-[radial-gradient(ellipse_75%_50%_at_50%_0%,rgba(99,102,241,0.12),transparent)]" />
142
143 <div className="mx-auto max-w-4xl">
144 <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-4 py-1.5 dark:border-indigo-500/30 dark:bg-indigo-500/10">
145 <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
146 <span className="text-xs font-semibold uppercase tracking-widest text-indigo-700 dark:text-indigo-400">
147 smbCloud Auth
148 </span>
149 </div>
150
151 <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-6xl leading-[1.05]">
152 Looking for an Auth0 alternative?
153 </h1>
154
155 <p className="mt-6 max-w-3xl text-lg leading-8 text-slate-600 dark:text-slate-400">
156 smbCloud Auth is for teams that want hosted auth flows without
157 turning identity into its own platform project. Sign-in, signup,
158 sessions, and hosted auth should not be heavier than the app.
159 </p>
160
161 <div className="mt-8 flex flex-col gap-4 sm:flex-row">
162 <Link
163 href="https://console.smbcloud.xyz"
164 target="_blank"
165 rel="noopener noreferrer"
166 className="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-8 py-3.5 text-sm font-semibold text-white shadow-lg shadow-indigo-500/20 transition-all hover:bg-indigo-500 hover:shadow-indigo-500/30 active:scale-[0.98]"
167 >
168 Create free account
169 </Link>
170 <Link
171 href="/services"
172 className="inline-flex items-center justify-center rounded-lg border border-slate-300 px-8 py-3.5 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-white/[0.12] dark:text-slate-200 dark:hover:bg-white/[0.04]"
173 >
174 Explore smbCloud Auth
175 </Link>
176 </div>
177 </div>
178 </section>
179
180 <section className="px-6 pb-24 lg:px-8">
181 <div className="mx-auto grid max-w-5xl gap-8 lg:grid-cols-[0.95fr_1.05fr]">
182 <div>
183 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
184 Why teams compare them
185 </p>
186 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
187 Usually this comes down to how much identity platform you actually want.
188 </h2>
189 <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
190 Some teams really do need a larger identity stack. Others mostly
191 need auth to work well and stay out of the way.
192 </p>
193 </div>
194
195 <div className="rounded-2xl border border-slate-200 bg-slate-50 p-8 dark:border-white/[0.06] dark:bg-white/[0.02]">
196 <p className="text-sm font-semibold text-slate-900 dark:text-white">
197 What smbCloud Auth does well
198 </p>
199 <ul className="mt-5 space-y-4 text-sm leading-7 text-slate-600 dark:text-slate-400">
200 <li className="flex gap-3">
201 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
202 <span>Hosted sign-in and signup flows.</span>
203 </li>
204 <li className="flex gap-3">
205 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
206 <span>Sessions and account workflows that stay manageable.</span>
207 </li>
208 <li className="flex gap-3">
209 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
210 <span>A smaller auth product for teams that want less auth sprawl.</span>
211 </li>
212 </ul>
213 </div>
214 </div>
215 </section>
216
217 <section className="border-t border-slate-200 px-6 py-24 dark:border-white/[0.06] lg:px-8">
218 <div className="mx-auto max-w-5xl">
219 <div className="mb-12 max-w-3xl">
220 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
221 smbCloud Auth vs Auth0
222 </p>
223 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
224 One is broader. One is simpler. That is the trade.
225 </h2>
226 </div>
227
228 <div className="overflow-hidden rounded-2xl border border-slate-200 dark:border-white/[0.06]">
229 <div className="grid grid-cols-[0.8fr_1fr_1fr] bg-slate-50 text-sm font-semibold text-slate-900 dark:bg-white/[0.03] dark:text-white">
230 <div className="border-b border-slate-200 px-5 py-4 dark:border-white/[0.06]">
231 Area
232 </div>
233 <div className="border-b border-l border-slate-200 px-5 py-4 dark:border-white/[0.06]">
234 smbCloud Auth
235 </div>
236 <div className="border-b border-l border-slate-200 px-5 py-4 dark:border-white/[0.06]">
237 Auth0
238 </div>
239 </div>
240 {comparisonRows.map((row) => (
241 <div
242 key={row.label}
243 className="grid grid-cols-[0.8fr_1fr_1fr] text-sm leading-7 text-slate-600 dark:text-slate-400"
244 >
245 <div className="border-b border-slate-200 bg-white px-5 py-5 font-semibold text-slate-900 dark:border-white/[0.06] dark:bg-white/[0.02] dark:text-white">
246 {row.label}
247 </div>
248 <div className="border-b border-l border-slate-200 bg-white px-5 py-5 dark:border-white/[0.06] dark:bg-white/[0.02]">
249 {row.smbcloud}
250 </div>
251 <div className="border-b border-l border-slate-200 bg-white px-5 py-5 dark:border-white/[0.06] dark:bg-white/[0.02]">
252 {row.auth0}
253 </div>
254 </div>
255 ))}
256 </div>
257 </div>
258 </section>
259
260 <section className="px-6 py-24 lg:px-8">
261 <div className="mx-auto grid max-w-5xl gap-6 lg:grid-cols-2">
262 <div className="rounded-2xl border border-slate-200 bg-white p-8 dark:border-white/[0.06] dark:bg-white/[0.02]">
263 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
264 Pick smbCloud Auth if
265 </p>
266 <ul className="mt-6 space-y-4 text-sm leading-7 text-slate-600 dark:text-slate-400">
267 {smbcloudFits.map((item) => (
268 <li key={item} className="flex gap-3">
269 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
270 <span>{item}</span>
271 </li>
272 ))}
273 </ul>
274 </div>
275
276 <div className="rounded-2xl border border-slate-200 bg-slate-50 p-8 dark:border-white/[0.06] dark:bg-white/[0.02]">
277 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
278 Stay with Auth0 if
279 </p>
280 <ul className="mt-6 space-y-4 text-sm leading-7 text-slate-600 dark:text-slate-400">
281 {auth0StillFits.map((item) => (
282 <li key={item} className="flex gap-3">
283 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-slate-400" />
284 <span>{item}</span>
285 </li>
286 ))}
287 </ul>
288 </div>
289 </div>
290 </section>
291
292 <section className="border-t border-slate-200 px-6 py-24 dark:border-white/[0.06] lg:px-8">
293 <div className="mx-auto max-w-5xl grid gap-8 lg:grid-cols-[0.95fr_1.05fr]">
294 <div>
295 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
296 Best fit
297 </p>
298 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
299 A good fit if you want hosted auth without giving auth its own empire.
300 </h2>
301 </div>
302 <ul className="rounded-2xl border border-slate-200 bg-white p-8 text-sm leading-7 text-slate-600 dark:border-white/[0.06] dark:bg-white/[0.02] dark:text-slate-400">
303 {bestFor.map((item) => (
304 <li
305 key={item}
306 className="flex gap-3 border-b border-slate-200 py-3 last:border-0 last:pb-0 first:pt-0 dark:border-white/[0.06]"
307 >
308 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
309 <span>{item}</span>
310 </li>
311 ))}
312 </ul>
313 </div>
314 </section>
315
316 <section className="px-6 pb-24 lg:px-8">
317 <div className="mx-auto max-w-3xl">
318 <div className="mb-10">
319 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
320 FAQ
321 </p>
322 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
323 Common questions
324 </h2>
325 </div>
326 <div className="space-y-4">
327 {faqs.map((faq) => (
328 <div
329 key={faq.question}
330 className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/[0.06] dark:bg-white/[0.02]"
331 >
332 <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
333 {faq.question}
334 </h3>
335 <p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-400">
336 {faq.answer}
337 </p>
338 </div>
339 ))}
340 </div>
341 </div>
342 </section>
343
344 <section className="px-6 pb-20 lg:px-8">
345 <div className="mx-auto max-w-3xl">
346 <div className="relative overflow-hidden rounded-2xl bg-indigo-600 px-8 py-14 text-center shadow-2xl shadow-indigo-500/20">
347 <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.1),transparent)]" />
348 <h2 className="relative text-3xl font-bold tracking-tight text-white">
349 If auth keeps getting bigger than the app, try smbCloud Auth.
350 </h2>
351 <p className="relative mt-4 text-indigo-200">
352 Create an account and see if the smaller auth workflow is the better fit.
353 </p>
354 <div className="relative mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
355 <Link
356 href="https://console.smbcloud.xyz"
357 target="_blank"
358 rel="noopener noreferrer"
359 className="inline-flex rounded-lg bg-white px-8 py-3.5 text-sm font-semibold text-indigo-700 shadow-sm transition-colors hover:bg-indigo-50"
360 >
361 Create free account
362 </Link>
363 <Link
364 href="/clerk-alternative"
365 className="inline-flex rounded-lg border border-white/20 px-8 py-3.5 text-sm font-semibold text-white transition-colors hover:bg-white/10"
366 >
367 Compare Clerk alternative
368 </Link>
369 </div>
370 </div>
371 </div>
372 </section>
373 </div>
374 );
375 }