feature/branding
tsx 520 lines 19.9 KB
Raw
1 import type { Metadata } from "next";
2 import Link from "next/link";
3 import {
4 FaCheckCircle,
5 FaGlobe,
6 FaLock,
7 FaRocket,
8 FaShieldAlt,
9 FaUsers,
10 } from "react-icons/fa";
11 import { StructuredData } from "@/components/structured-data";
12 import { absoluteUrl, genPageMetadata } from "../seo";
13
14 const CONSOLE_URL = "https://console.smbcloud.xyz";
15
16 const offerings = [
17 {
18 name: "Starter",
19 eyebrow: "Free forever",
20 description:
21 "Try smbCloud Auth with zero commitment. One auth app, 1,000 monthly active users, and the basics you need to ship login fast.",
22 bullets: [
23 "1 auth app with email/password and social login",
24 "Up to 1,000 monthly active users",
25 "Session management out of the box",
26 ],
27 cta: "Start for free",
28 href: `${CONSOLE_URL}?plan=starter`,
29 highlighted: false,
30 },
31 {
32 name: "smbCloud Auth Business",
33 eyebrow: "For production apps",
34 description:
35 "For apps that need real identity management. SSO, RBAC, audit logs, and an SLA your compliance team can live with.",
36 bullets: [
37 "Unlimited auth apps and collaborators",
38 "SSO/SAML and role-based access control",
39 "30-day audit logs with 99.9% SLA",
40 ],
41 cta: "Start business setup",
42 href: `${CONSOLE_URL}?plan=business`,
43 highlighted: true,
44 },
45 ];
46
47 const plans = [
48 {
49 key: "starter",
50 name: "Starter",
51 price: "$0",
52 period: "/mo",
53 overage: "",
54 description:
55 "For side projects, prototypes, and apps that are just getting started.",
56 bullets: [
57 "1,000 monthly active users",
58 "1 auth app",
59 "Email/password + social login",
60 "Session management",
61 "Community support",
62 ],
63 highlighted: false,
64 cta: "Start for free",
65 href: `${CONSOLE_URL}?plan=starter`,
66 },
67 {
68 key: "pro",
69 name: "Pro",
70 price: "$29",
71 period: "/mo",
72 overage: "+ $0.005/MAU overage",
73 description: "For growing apps that need more control and room to scale.",
74 bullets: [
75 "10,000 monthly active users",
76 "5 auth apps, 3 collaborators",
77 "Custom domain",
78 "Webhooks + 7-day audit logs",
79 "Standard support",
80 ],
81 highlighted: true,
82 cta: "Choose Pro",
83 href: `${CONSOLE_URL}?plan=pro`,
84 },
85 {
86 key: "business",
87 name: "Business",
88 price: "$149",
89 period: "/mo",
90 overage: "+ $0.003/MAU overage",
91 description:
92 "For teams that need SSO, compliance controls, and enterprise-grade uptime.",
93 bullets: [
94 "100,000 monthly active users",
95 "Unlimited apps + collaborators",
96 "SSO/SAML + RBAC",
97 "30-day audit logs, 99.9% SLA",
98 "Priority support",
99 ],
100 highlighted: false,
101 cta: "Choose Business",
102 href: `${CONSOLE_URL}?plan=business`,
103 },
104 {
105 key: "scale",
106 name: "Scale",
107 price: "Custom",
108 period: "",
109 overage: "",
110 description:
111 "For high-traffic apps that need dedicated infrastructure and a direct line to the team.",
112 bullets: [
113 "Everything in Business",
114 "Custom MAU volume",
115 "99.99% SLA",
116 "Dedicated support",
117 "Custom integrations",
118 ],
119 highlighted: false,
120 cta: "Contact sales",
121 href: "mailto:sales@smbcloud.xyz",
122 },
123 ];
124
125 const proofCards = [
126 {
127 title: "Own your auth stack",
128 description:
129 "No vendor lock-in, no black-box pricing. smbCloud Auth runs on your infrastructure, so your user data stays exactly where you put it.",
130 icon: FaLock,
131 },
132 {
133 title: "Ship faster",
134 description:
135 "SDK for Swift, web, and server. One integration covers login, sessions, and token refresh. Stop rebuilding auth for every project.",
136 icon: FaRocket,
137 },
138 {
139 title: "Scale without surprises",
140 description:
141 "Usage-based pricing tied to monthly active users. No per-seat gotchas, no hidden fees when your app starts growing.",
142 icon: FaGlobe,
143 },
144 ];
145
146 export const metadata: Metadata = {
147 ...genPageMetadata({
148 title: "smbCloud Auth",
149 description:
150 "Authentication and identity management for your apps. Email/password, social login, SSO/SAML, RBAC, and session management with SDKs for Swift, web, and server.",
151 path: "/auth",
152 keywords: [
153 "smbCloud Auth",
154 "authentication service",
155 "identity management",
156 "SSO SAML",
157 "social login",
158 "auth SDK",
159 "user management",
160 ],
161 }),
162 };
163
164 export default function AuthPage() {
165 const structuredData = {
166 "@context": "https://schema.org",
167 "@graph": [
168 {
169 "@type": "WebPage",
170 "@id": absoluteUrl("/auth#webpage"),
171 url: absoluteUrl("/auth"),
172 name: "smbCloud Auth",
173 description: "Authentication and identity management for your apps.",
174 isPartOf: {
175 "@id": absoluteUrl("/#website"),
176 },
177 },
178 {
179 "@type": "Service",
180 name: "smbCloud Auth",
181 serviceType: "Authentication and identity management",
182 areaServed: "Worldwide",
183 url: absoluteUrl("/auth"),
184 offers: [
185 {
186 "@type": "Offer",
187 name: "smbCloud Auth Starter",
188 price: "0",
189 priceCurrency: "USD",
190 url: `${CONSOLE_URL}?plan=starter`,
191 },
192 {
193 "@type": "Offer",
194 name: "smbCloud Auth Pro",
195 price: "29",
196 priceCurrency: "USD",
197 url: `${CONSOLE_URL}?plan=pro`,
198 },
199 {
200 "@type": "Offer",
201 name: "smbCloud Auth Business",
202 price: "149",
203 priceCurrency: "USD",
204 url: `${CONSOLE_URL}?plan=business`,
205 },
206 {
207 "@type": "Offer",
208 name: "smbCloud Auth Scale",
209 price: "0",
210 priceCurrency: "USD",
211 url: "mailto:sales@smbcloud.xyz",
212 },
213 ],
214 },
215 ],
216 };
217
218 return (
219 <div>
220 <StructuredData data={structuredData} />
221
222 {/* Hero */}
223 <section className="relative overflow-hidden px-6 pt-24 pb-16 sm:pt-32 sm:pb-20 lg:px-8">
224 <div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[560px] bg-[radial-gradient(ellipse_75%_50%_at_50%_0%,rgba(99,102,241,0.22),transparent)] dark:bg-[radial-gradient(ellipse_75%_50%_at_50%_0%,rgba(99,102,241,0.16),transparent)]" />
225
226 <div className="mx-auto max-w-5xl">
227 <div className="grid gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:items-start">
228 <div>
229 <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-6xl leading-[1.05]">
230 Auth that gets out of your way.
231 </h1>
232
233 <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-400">
234 smbCloud Auth handles login, sessions, and identity so you can
235 focus on the product. Start free with{" "}
236 <span className="font-semibold">
237 1,000 monthly active users
238 </span>
239 , then scale to SSO, RBAC, and enterprise compliance when your
240 app needs it.
241 </p>
242
243 <div className="mt-8 flex flex-col gap-4 sm:flex-row">
244 <a
245 href={CONSOLE_URL}
246 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]"
247 >
248 Open Console
249 </a>
250 <Link
251 href="/services"
252 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]"
253 >
254 Back to services
255 </Link>
256 </div>
257
258 <p className="mt-4 text-sm text-slate-500 dark:text-slate-500">
259 Free Starter tier includes 1,000 MAU. No credit card required.
260 </p>
261 </div>
262
263 <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-white/[0.06] dark:bg-white/[0.02]">
264 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
265 What you get
266 </p>
267 <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">
268 Identity management, not identity crisis.
269 </h2>
270 <p className="mt-4 text-base leading-7 text-slate-600 dark:text-slate-400">
271 smbCloud Auth covers the full auth lifecycle. Login flows,
272 session tokens, user management, and access control, all from
273 one service with SDKs that work across platforms.
274 </p>
275
276 <ul className="mt-6 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
277 <li className="flex gap-3">
278 <FaCheckCircle className="mt-1 h-4 w-4 shrink-0 text-indigo-500" />
279 <span>Email/password and social login out of the box</span>
280 </li>
281 <li className="flex gap-3">
282 <FaShieldAlt className="mt-1 h-4 w-4 shrink-0 text-indigo-500" />
283 <span>SSO/SAML and role-based access control</span>
284 </li>
285 <li className="flex gap-3">
286 <FaUsers className="mt-1 h-4 w-4 shrink-0 text-indigo-500" />
287 <span>
288 Webhooks, audit logs, and team collaboration tools
289 </span>
290 </li>
291 </ul>
292
293 <div className="mt-6 flex flex-col gap-3 sm:flex-row">
294 <a
295 href={`${CONSOLE_URL}?plan=starter`}
296 className="inline-flex items-center justify-center rounded-lg bg-slate-900 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
297 >
298 Start for free
299 </a>
300 <a
301 href={`${CONSOLE_URL}?plan=pro`}
302 className="inline-flex items-center justify-center rounded-lg border border-slate-300 px-5 py-3 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]"
303 >
304 See Pro plan
305 </a>
306 </div>
307 </div>
308 </div>
309 </div>
310 </section>
311
312 {/* Offering cards */}
313 <section className="px-6 pb-10 lg:px-8">
314 <div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-2">
315 {offerings.map((offering) => (
316 <div
317 key={offering.name}
318 className={`rounded-2xl border p-6 sm:p-8 ${
319 offering.highlighted
320 ? "border-indigo-200 bg-indigo-50/70 dark:border-indigo-500/25 dark:bg-indigo-500/10"
321 : "border-slate-200 bg-white dark:border-white/[0.06] dark:bg-white/[0.02]"
322 }`}
323 >
324 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
325 {offering.eyebrow}
326 </p>
327 <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">
328 {offering.name}
329 </h2>
330 <p className="mt-4 text-base leading-7 text-slate-600 dark:text-slate-400">
331 {offering.description}
332 </p>
333 <ul className="mt-5 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
334 {offering.bullets.map((bullet) => (
335 <li key={bullet} className="flex gap-3">
336 <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
337 <span>{bullet}</span>
338 </li>
339 ))}
340 </ul>
341 <a
342 href={offering.href}
343 className={`mt-6 inline-flex items-center gap-2 rounded-lg px-5 py-3 text-sm font-semibold transition-colors ${
344 offering.highlighted
345 ? "bg-indigo-600 text-white hover:bg-indigo-500"
346 : "bg-slate-900 text-white hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
347 }`}
348 >
349 {offering.cta}
350 </a>
351 </div>
352 ))}
353 </div>
354 </section>
355
356 {/* Why smbCloud Auth */}
357 <section className="px-6 py-16 lg:px-8">
358 <div className="mx-auto max-w-5xl">
359 <div className="max-w-3xl">
360 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
361 Why smbCloud Auth
362 </p>
363 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
364 Because auth is the foundation, not a bolted-on feature.
365 </h2>
366 <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
367 Every app needs login. Most teams build it from scratch, bolt on a
368 third-party black box, or spend weeks wrestling with OAuth flows.
369 smbCloud Auth gives you the whole stack so you can move on to the
370 work that actually matters.
371 </p>
372 </div>
373
374 <div className="mt-10 grid gap-6 md:grid-cols-3">
375 {proofCards.map((card) => {
376 const Icon = card.icon;
377 return (
378 <div
379 key={card.title}
380 className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/[0.06] dark:bg-white/[0.02]"
381 >
382 <div className="inline-flex rounded-xl bg-indigo-50 p-3 text-indigo-500 dark:bg-indigo-500/10">
383 <Icon className="h-5 w-5" />
384 </div>
385 <h3 className="mt-4 text-lg font-semibold text-slate-900 dark:text-white">
386 {card.title}
387 </h3>
388 <p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-400">
389 {card.description}
390 </p>
391 </div>
392 );
393 })}
394 </div>
395 </div>
396 </section>
397
398 {/* Pricing */}
399 <section className="border-y border-slate-200 px-6 py-20 dark:border-white/[0.06] lg:px-8">
400 <div className="mx-auto max-w-5xl">
401 <div className="max-w-3xl">
402 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
403 smbCloud Auth pricing
404 </p>
405 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
406 Start free. Pay for what you use.
407 </h2>
408 <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
409 Every plan includes the full auth feature set. You only pay more
410 when your app has more users. Simple.
411 </p>
412 </div>
413
414 <div className="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
415 {plans.map((plan) => (
416 <div
417 key={plan.name}
418 className={`rounded-2xl border p-6 ${
419 plan.highlighted
420 ? "border-indigo-200 bg-indigo-50/70 shadow-sm dark:border-indigo-500/25 dark:bg-indigo-500/10"
421 : "border-slate-200 bg-white dark:border-white/[0.06] dark:bg-white/[0.02]"
422 }`}
423 >
424 <div className="flex items-start justify-between gap-4">
425 <div>
426 <h3 className="text-xl font-semibold text-slate-900 dark:text-white">
427 {plan.name}
428 </h3>
429 <p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
430 {plan.description}
431 </p>
432 </div>
433 {plan.highlighted ? (
434 <span className="rounded-full bg-indigo-600 px-2.5 py-1 text-[11px] font-semibold text-white">
435 Popular
436 </span>
437 ) : null}
438 </div>
439
440 <div className="mt-6">
441 <div className="flex items-end gap-1">
442 <span className="text-4xl font-bold tracking-tight text-slate-900 dark:text-white">
443 {plan.price}
444 </span>
445 {plan.period ? (
446 <span className="pb-1 text-sm text-slate-500 dark:text-slate-500">
447 {plan.period}
448 </span>
449 ) : null}
450 </div>
451 {plan.overage ? (
452 <p className="mt-1 text-xs text-slate-500 dark:text-slate-500">
453 {plan.overage}
454 </p>
455 ) : null}
456 </div>
457
458 <ul className="mt-6 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
459 {plan.bullets.map((bullet) => (
460 <li key={bullet} className="flex gap-3">
461 <FaCheckCircle className="mt-1 h-4 w-4 shrink-0 text-indigo-500" />
462 <span>{bullet}</span>
463 </li>
464 ))}
465 </ul>
466
467 <a
468 href={plan.href}
469 className={`mt-8 inline-flex w-full items-center justify-center rounded-lg px-5 py-3 text-sm font-semibold transition-colors ${
470 plan.highlighted
471 ? "bg-indigo-600 text-white hover:bg-indigo-500"
472 : "border border-slate-300 text-slate-700 hover:bg-slate-50 dark:border-white/[0.12] dark:text-slate-200 dark:hover:bg-white/[0.04]"
473 }`}
474 >
475 {plan.cta}
476 </a>
477 </div>
478 ))}
479 </div>
480 </div>
481 </section>
482
483 {/* Bottom CTA */}
484 <section className="px-6 py-20 lg:px-8">
485 <div className="mx-auto max-w-5xl rounded-3xl border border-slate-200 bg-slate-50 p-8 sm:p-10 dark:border-white/[0.06] dark:bg-white/[0.02]">
486 <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
487 <div>
488 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
489 Get started
490 </p>
491 <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
492 Start with Starter. Upgrade when your app takes off.
493 </h2>
494 <p className="mt-5 max-w-2xl text-base leading-8 text-slate-600 dark:text-slate-400">
495 Every smbCloud Auth plan includes the same core features. The
496 only thing that changes is how many users you can serve and the
497 level of support. Start free today and scale when you are ready.
498 </p>
499 </div>
500
501 <div className="flex flex-col gap-4 lg:items-end">
502 <a
503 href={`${CONSOLE_URL}?plan=starter`}
504 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]"
505 >
506 Start for free
507 </a>
508 <Link
509 href="/services"
510 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]"
511 >
512 Back to services
513 </Link>
514 </div>
515 </div>
516 </div>
517 </section>
518 </div>
519 );
520 }