@smbcloud / smbcloud-web / commits / cd19a8d

Add auth comparison pages for Auth0 and Clerk alternatives

keypair34 committed May 8, 2026 at 23:24 UTC cd19a8d3b07510f3e7071f3b154bbb58d169469e
6 files changed +901 -50
app/auth0-alternative/page.tsx new
+375
@@ -0,0 +1,375 @@
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 +}
app/clerk-alternative/page.tsx new
+375
@@ -0,0 +1,375 @@
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 hosted sign-in, signup, sessions, and auth flows without extra identity weight.",
11 + clerk:
12 + "Provide developer-friendly hosted auth with a broader auth product around it.",
13 + },
14 + {
15 + label: "Best fit",
16 + smbcloud:
17 + "Teams that want auth to stay simple and boring.",
18 + clerk:
19 + "Teams that like a more opinionated developer auth platform and its workflow.",
20 + },
21 + {
22 + label: "Product shape",
23 + smbcloud: "Focused hosted auth inside the smbCloud platform.",
24 + clerk: "Hosted auth product with more surrounding auth surface area.",
25 + },
26 + {
27 + label: "Why teams pick it",
28 + smbcloud: "Because the product is the app, not the auth stack.",
29 + clerk: "Because they want a richer dedicated auth product.",
30 + },
31 +];
32 +
33 +const smbcloudFits = [
34 + "You want hosted auth to stay out of the way.",
35 + "You need sign-in, signup, sessions, and user management without extra auth sprawl.",
36 + "You want auth close to deploy, mail, and the rest of the stack.",
37 + "You prefer a smaller auth surface area for a smaller team.",
38 +];
39 +
40 +const clerkStillFits = [
41 + "Your team already likes Clerk and wants to keep its workflow.",
42 + "You want a more feature-rich dedicated auth product around the app.",
43 + "The added auth surface area is useful instead of distracting.",
44 +];
45 +
46 +const bestFor = [
47 + "Small product teams",
48 + "Founders who want hosted auth without ceremony",
49 + "Apps that need sign-in and sessions solved quickly",
50 + "Teams that want auth bundled close to deploy and mail",
51 + "Projects that do not want auth to become its own category of work",
52 +];
53 +
54 +const faqs = [
55 + {
56 + question: "Is smbCloud Auth a Clerk replacement?",
57 + answer:
58 + "For some teams, yes. If you want hosted sign-in, signup, sessions, and auth flows with less auth surface area, smbCloud Auth may fit better. If you want a richer dedicated auth product and already like Clerk's workflow, Clerk may fit better.",
59 + },
60 + {
61 + question: "What is the biggest difference between smbCloud Auth and Clerk?",
62 + answer:
63 + "Clerk is more of a dedicated auth product. smbCloud Auth is a simpler auth service inside a broader application platform.",
64 + },
65 + {
66 + question: "Who should switch from Clerk to smbCloud Auth?",
67 + answer:
68 + "Teams that want hosted auth, but want the auth product to get out of the way faster.",
69 + },
70 +];
71 +
72 +export const metadata: Metadata = {
73 + ...genPageMetadata({
74 + title: "Clerk alternative for simpler hosted auth",
75 + description:
76 + "smbCloud Auth is a Clerk alternative for teams that want hosted sign-in, signup, sessions, and auth flows with less auth surface area and less platform sprawl.",
77 + path: "/clerk-alternative",
78 + keywords: [
79 + "Clerk alternative",
80 + "hosted auth alternative",
81 + "sign in and signup platform",
82 + "session management platform",
83 + "developer auth platform alternative",
84 + "smbCloud Auth",
85 + ],
86 + }),
87 +};
88 +
89 +const structuredData = {
90 + "@context": "https://schema.org",
91 + "@graph": [
92 + {
93 + "@type": "WebPage",
94 + "@id": absoluteUrl("/clerk-alternative#webpage"),
95 + url: absoluteUrl("/clerk-alternative"),
96 + name: "Clerk alternative for simpler hosted auth",
97 + description:
98 + "Compare smbCloud Auth and Clerk for simpler hosted auth workflows.",
99 + isPartOf: {
100 + "@id": absoluteUrl("/#website"),
101 + },
102 + },
103 + {
104 + "@type": "BreadcrumbList",
105 + itemListElement: [
106 + {
107 + "@type": "ListItem",
108 + position: 1,
109 + name: "Home",
110 + item: absoluteUrl("/"),
111 + },
112 + {
113 + "@type": "ListItem",
114 + position: 2,
115 + name: "Clerk alternative",
116 + item: absoluteUrl("/clerk-alternative"),
117 + },
118 + ],
119 + },
120 + {
121 + "@type": "FAQPage",
122 + mainEntity: faqs.map((faq) => ({
123 + "@type": "Question",
124 + name: faq.question,
125 + acceptedAnswer: {
126 + "@type": "Answer",
127 + text: faq.answer,
128 + },
129 + })),
130 + },
131 + ],
132 +};
133 +
134 +export default function ClerkAlternativePage() {
135 + return (
136 + <div>
137 + <StructuredData data={structuredData} />
138 +
139 + <section className="relative overflow-hidden px-6 pt-24 pb-16 sm:pt-32 sm:pb-20 lg:px-8">
140 + <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)]" />
141 +
142 + <div className="mx-auto max-w-4xl">
143 + <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">
144 + <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
145 + <span className="text-xs font-semibold uppercase tracking-widest text-indigo-700 dark:text-indigo-400">
146 + smbCloud Auth
147 + </span>
148 + </div>
149 +
150 + <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-6xl leading-[1.05]">
151 + Looking for a Clerk alternative?
152 + </h1>
153 +
154 + <p className="mt-6 max-w-3xl text-lg leading-8 text-slate-600 dark:text-slate-400">
155 + smbCloud Auth is for teams that want hosted auth to stay simple,
156 + hosted, and out of the way. Sign-in, signup, sessions, and auth
157 + flows should support the product, not steal the whole conversation.
158 + </p>
159 +
160 + <div className="mt-8 flex flex-col gap-4 sm:flex-row">
161 + <Link
162 + href="https://console.smbcloud.xyz"
163 + target="_blank"
164 + rel="noopener noreferrer"
165 + 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]"
166 + >
167 + Create free account
168 + </Link>
169 + <Link
170 + href="/services"
171 + 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]"
172 + >
173 + Explore smbCloud Auth
174 + </Link>
175 + </div>
176 + </div>
177 + </section>
178 +
179 + <section className="px-6 pb-24 lg:px-8">
180 + <div className="mx-auto grid max-w-5xl gap-8 lg:grid-cols-[0.95fr_1.05fr]">
181 + <div>
182 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
183 + Why teams compare them
184 + </p>
185 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
186 + This is usually about whether you want more auth product than the team actually needs.
187 + </h2>
188 + <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
189 + Some teams want a richer dedicated auth product. Others mostly
190 + want auth flows that work well and stay out of the product team's
191 + 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 auth flows that stay straightforward.</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, signup, and sign-in without the auth stack sprawling outward.</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 better fit for teams that want auth solved, not celebrated.</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 Clerk
222 + </p>
223 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
224 + The trade is richer auth product versus calmer auth workflow.
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 + Clerk
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.clerk}
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 Clerk if
279 + </p>
280 + <ul className="mt-6 space-y-4 text-sm leading-7 text-slate-600 dark:text-slate-400">
281 + {clerkStillFits.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 to feel smaller than the auth category itself.
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 feels like too much product around the product, try smbCloud Auth.
350 + </h2>
351 + <p className="relative mt-4 text-indigo-200">
352 + Create an account and see if the simpler 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="/supabase-auth-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 Supabase Auth alternative
368 + </Link>
369 + </div>
370 + </div>
371 + </div>
372 + </section>
373 + </div>
374 + );
375 +}
app/page.tsx
+82
@@ -77,6 +77,41 @@ const deployComparisonPages = [
77 },
78 ];
79
80 +const authComparisonPages = [
81 + {
82 + href: "/auth0-alternative",
83 + eyebrow: "Auth comparison",
84 + title: "Auth0 alternative",
85 + description:
86 + "If you want hosted auth flows without turning identity into its own platform project.",
87 + bullets: [
88 + "Compare hosted sign-in, signup, and session flows against a bigger identity stack",
89 + "See where smbCloud Auth fits for smaller teams that want less auth sprawl",
90 + ],
91 + },
92 + {
93 + href: "/clerk-alternative",
94 + eyebrow: "Auth comparison",
95 + title: "Clerk alternative",
96 + description: "If you want auth to stay simple, hosted, and out of the way.",
97 + bullets: [
98 + "Compare developer-friendly hosted auth against a calmer auth workflow",
99 + "See when smbCloud Auth is a better fit and when Clerk still makes more sense",
100 + ],
101 + },
102 + {
103 + href: "/supabase-auth-alternative",
104 + eyebrow: "Auth comparison",
105 + title: "Supabase Auth alternative",
106 + description:
107 + "If you want hosted auth without adopting a bigger backend platform than you need.",
108 + bullets: [
109 + "Compare focused auth flows against auth bundled inside a larger platform",
110 + "See when smbCloud Auth is the cleaner fit for accounts and sessions",
111 + ],
112 + },
113 +];
114 +
115 const mailComparisonPages = [
116 {
117 href: "/resend-alternative",
@@ -440,6 +475,53 @@ export default function Home() {
475 </div>
476 </div>
477
478 + <div className="border-t border-slate-200 pt-16 dark:border-white/[0.06]">
479 + <div className="mb-10 max-w-3xl">
480 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
481 + smbCloud Auth
482 + </p>
483 + <h3 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
484 + Looking at Auth0, Clerk, or Supabase Auth?
485 + </h3>
486 + <p className="mt-4 text-base leading-8 text-slate-600 dark:text-slate-400">
487 + That is the smbCloud Auth side of the business. Some teams
488 + want a giant identity stack. Others just want sign-in, signup,
489 + sessions, and hosted auth flows that stay out of the way.
490 + </p>
491 + </div>
492 +
493 + <div className="grid gap-6 lg:grid-cols-3">
494 + {authComparisonPages.map((page) => (
495 + <Link
496 + key={page.href}
497 + href={page.href}
498 + className="group rounded-2xl border border-slate-200 dark:border-white/[0.06] bg-white dark:bg-white/[0.02] p-8 transition-colors hover:border-indigo-300 dark:hover:border-indigo-700/50 hover:bg-slate-50 dark:hover:bg-white/[0.04]"
499 + >
500 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
501 + {page.eyebrow}
502 + </p>
503 + <h4 className="mt-4 text-2xl font-semibold tracking-tight text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-white dark:group-hover:text-indigo-400">
504 + {page.title}
505 + </h4>
506 + <p className="mt-4 text-sm leading-7 text-slate-600 dark:text-slate-400">
507 + {page.description}
508 + </p>
509 + <ul className="mt-5 space-y-3 text-sm leading-6 text-slate-500 dark:text-slate-400">
510 + {page.bullets.map((bullet) => (
511 + <li key={bullet} className="flex gap-3">
512 + <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
513 + <span>{bullet}</span>
514 + </li>
515 + ))}
516 + </ul>
517 + <p className="mt-6 text-sm font-semibold text-indigo-600 dark:text-indigo-400">
518 + Read comparison →
519 + </p>
520 + </Link>
521 + ))}
522 + </div>
523 + </div>
524 +
525 <div className="border-t border-slate-200 pt-16 dark:border-white/[0.06]">
526 <div className="mb-10 max-w-3xl">
527 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
app/services/page.tsx
-3
@@ -266,9 +266,6 @@ export default function ServicesPage() {
266 <h2 className="relative text-3xl font-bold tracking-tight text-white">
267 Start with one service. Add the rest when you need them.
268 </h2>
269 - <p className="relative mt-4 text-indigo-200">
270 - That is usually the better path anyway.
271 - </p>
269 <Link
270 href="https://console.smbcloud.xyz"
271 target="_blank"
components/footer.tsx
+69 -35
@@ -1,11 +1,29 @@
1 import Link from "next/link";
2 import { FaGithub } from "react-icons/fa";
3
4 +const companyLinks = [
5 + { href: "/about", label: "About" },
6 + { href: "/services", label: "Services" },
7 + { href: "/contact", label: "Contact" },
8 + { href: "/privacy-policy", label: "Privacy" },
9 + { href: "/term-of-use", label: "Terms" },
10 +];
11 +
12 +const resourceLinks = [
13 + { href: "/posts", label: "Blog" },
14 + { href: "/kti", label: "KTI (ID)" },
15 + {
16 + href: "https://github.com/smbcloudXYZ",
17 + label: "GitHub",
18 + external: true,
19 + },
20 +];
21 +
22 export default function Footer() {
23 return (
24 <footer className="border-t border-slate-200 dark:border-white/[0.06] px-6 py-12 lg:px-8">
25 <div className="mx-auto max-w-5xl">
8 - <div className="flex flex-col gap-8 sm:flex-row sm:items-start sm:justify-between">
26 + <div className="flex flex-col gap-10 sm:flex-row sm:items-start sm:justify-between">
27 <div>
28 <Link href="/" className="mb-3 flex items-center gap-2">
29 <div className="flex h-6 w-[30px] items-center justify-center rounded bg-indigo-600 text-white">
@@ -18,42 +36,58 @@ export default function Footer() {
36 <p className="max-w-xs text-xs leading-relaxed text-slate-500 dark:text-slate-500">
37 Enterprise Power at Startup Velocity
38 </p>
39 + <p className="mt-2 text-xs text-slate-400 dark:text-slate-600">
40 + Built by Splitfire AB in Stockholm, Sweden.
41 + </p>
42 </div>
43
23 - <div className="flex flex-wrap gap-x-8 gap-y-3 text-sm text-slate-500 dark:text-slate-500">
24 - <Link
25 - href="/about"
26 - className="hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
27 - >
28 - About
29 - </Link>
30 - <Link
31 - href="/privacy-policy"
32 - className="hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
33 - >
34 - Privacy
35 - </Link>
36 - <Link
37 - href="/term-of-use"
38 - className="hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
39 - >
40 - Terms
41 - </Link>
42 - <Link
43 - href="/contact"
44 - className="hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
45 - >
46 - Contact
47 - </Link>
48 - <Link
49 - href="https://github.com/smbcloudXYZ"
50 - target="_blank"
51 - rel="noopener noreferrer"
52 - className="flex items-center gap-1.5 hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
53 - >
54 - <FaGithub className="h-3.5 w-3.5" />
55 - GitHub
56 - </Link>
44 + <div className="grid grid-cols-2 gap-x-12 gap-y-8 text-sm text-slate-500 dark:text-slate-500">
45 + <div>
46 + <p className="mb-3 text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
47 + Company
48 + </p>
49 + <div className="flex flex-col gap-3">
50 + {companyLinks.map((link) => (
51 + <Link
52 + key={link.href}
53 + href={link.href}
54 + className="hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
55 + >
56 + {link.label}
57 + </Link>
58 + ))}
59 + </div>
60 + </div>
61 +
62 + <div>
63 + <p className="mb-3 text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
64 + Resources
65 + </p>
66 + <div className="flex flex-col gap-3">
67 + {resourceLinks.map((link) =>
68 + link.external ? (
69 + <Link
70 + key={link.href}
71 + href={link.href}
72 + target="_blank"
73 + rel="noopener noreferrer"
74 + className="flex items-center gap-1.5 hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
75 + >
76 + <FaGithub className="h-3.5 w-3.5" />
77 + {link.label}
78 + </Link>
79 + ) : (
80 + <Link
81 + key={link.href}
82 + href={link.href}
83 + className="hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
84 + >
85 + {link.label}
86 + </Link>
87 + ),
88 + )}
89 + </div>
90 + </div>
91 </div>
92 </div>
93
components/header.tsx
-12
@@ -42,18 +42,6 @@ export default function Header() {
42 >
43 Services
44 </Link>
45 - <Link
46 - href="/kti"
47 - className="hover:text-slate-900 dark:hover:text-white transition-colors"
48 - >
49 - KTI (ID)
50 - </Link>
51 - <Link
52 - href="/posts"
53 - className="hover:text-slate-900 dark:hover:text-white transition-colors"
54 - >
55 - Blog
56 - </Link>
45 </nav>
46
47 <div className="flex items-center gap-3">