@smbcloud / smbcloud-web / commits / 34fede6

Update pricing page and marketing page

keypair34 committed May 24, 2026 at 17:47 UTC 34fede6ee925a1776655cec903417f938add6d73
4 files changed +685 -23
app/auth/page.tsx new
+527
@@ -0,0 +1,527 @@
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="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">
228 + <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
229 + <span className="text-xs font-semibold tracking-widest text-indigo-700 dark:text-indigo-300">
230 + smbCloud Auth
231 + </span>
232 + </div>
233 +
234 + <div className="grid gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:items-start">
235 + <div>
236 + <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-6xl leading-[1.05]">
237 + Auth that gets out of your way.
238 + </h1>
239 +
240 + <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-400">
241 + smbCloud Auth handles login, sessions, and identity so you can
242 + focus on the product. Start free with{" "}
243 + <span className="font-semibold">
244 + 1,000 monthly active users
245 + </span>
246 + , then scale to SSO, RBAC, and enterprise compliance when your
247 + app needs it.
248 + </p>
249 +
250 + <div className="mt-8 flex flex-col gap-4 sm:flex-row">
251 + <a
252 + href={CONSOLE_URL}
253 + 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]"
254 + >
255 + Open Console
256 + </a>
257 + <Link
258 + href="/services"
259 + 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]"
260 + >
261 + Back to services
262 + </Link>
263 + </div>
264 +
265 + <p className="mt-4 text-sm text-slate-500 dark:text-slate-500">
266 + Free Starter tier includes 1,000 MAU. No credit card required.
267 + </p>
268 + </div>
269 +
270 + <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-white/[0.06] dark:bg-white/[0.02]">
271 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
272 + What you get
273 + </p>
274 + <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">
275 + Identity management, not identity crisis.
276 + </h2>
277 + <p className="mt-4 text-base leading-7 text-slate-600 dark:text-slate-400">
278 + smbCloud Auth covers the full auth lifecycle. Login flows,
279 + session tokens, user management, and access control — all from
280 + one service with SDKs that work across platforms.
281 + </p>
282 +
283 + <ul className="mt-6 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
284 + <li className="flex gap-3">
285 + <FaCheckCircle className="mt-1 h-4 w-4 shrink-0 text-indigo-500" />
286 + <span>Email/password and social login out of the box</span>
287 + </li>
288 + <li className="flex gap-3">
289 + <FaShieldAlt className="mt-1 h-4 w-4 shrink-0 text-indigo-500" />
290 + <span>SSO/SAML and role-based access control</span>
291 + </li>
292 + <li className="flex gap-3">
293 + <FaUsers className="mt-1 h-4 w-4 shrink-0 text-indigo-500" />
294 + <span>
295 + Webhooks, audit logs, and team collaboration tools
296 + </span>
297 + </li>
298 + </ul>
299 +
300 + <div className="mt-6 flex flex-col gap-3 sm:flex-row">
301 + <a
302 + href={`${CONSOLE_URL}?plan=starter`}
303 + 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"
304 + >
305 + Start for free
306 + </a>
307 + <a
308 + href={`${CONSOLE_URL}?plan=pro`}
309 + 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]"
310 + >
311 + See Pro plan
312 + </a>
313 + </div>
314 + </div>
315 + </div>
316 + </div>
317 + </section>
318 +
319 + {/* Offering cards */}
320 + <section className="px-6 pb-10 lg:px-8">
321 + <div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-2">
322 + {offerings.map((offering) => (
323 + <div
324 + key={offering.name}
325 + className={`rounded-2xl border p-6 sm:p-8 ${
326 + offering.highlighted
327 + ? "border-indigo-200 bg-indigo-50/70 dark:border-indigo-500/25 dark:bg-indigo-500/10"
328 + : "border-slate-200 bg-white dark:border-white/[0.06] dark:bg-white/[0.02]"
329 + }`}
330 + >
331 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
332 + {offering.eyebrow}
333 + </p>
334 + <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">
335 + {offering.name}
336 + </h2>
337 + <p className="mt-4 text-base leading-7 text-slate-600 dark:text-slate-400">
338 + {offering.description}
339 + </p>
340 + <ul className="mt-5 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
341 + {offering.bullets.map((bullet) => (
342 + <li key={bullet} className="flex gap-3">
343 + <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
344 + <span>{bullet}</span>
345 + </li>
346 + ))}
347 + </ul>
348 + <a
349 + href={offering.href}
350 + className={`mt-6 inline-flex items-center gap-2 rounded-lg px-5 py-3 text-sm font-semibold transition-colors ${
351 + offering.highlighted
352 + ? "bg-indigo-600 text-white hover:bg-indigo-500"
353 + : "bg-slate-900 text-white hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
354 + }`}
355 + >
356 + {offering.cta}
357 + </a>
358 + </div>
359 + ))}
360 + </div>
361 + </section>
362 +
363 + {/* Why smbCloud Auth */}
364 + <section className="px-6 py-16 lg:px-8">
365 + <div className="mx-auto max-w-5xl">
366 + <div className="max-w-3xl">
367 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
368 + Why smbCloud Auth
369 + </p>
370 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
371 + Because auth is not a feature — it is the foundation.
372 + </h2>
373 + <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
374 + Every app needs login. Most teams build it from scratch, bolt on a
375 + third-party black box, or spend weeks wrestling with OAuth flows.
376 + smbCloud Auth gives you the whole stack so you can move on to the
377 + work that actually matters.
378 + </p>
379 + </div>
380 +
381 + <div className="mt-10 grid gap-6 md:grid-cols-3">
382 + {proofCards.map((card) => {
383 + const Icon = card.icon;
384 + return (
385 + <div
386 + key={card.title}
387 + className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/[0.06] dark:bg-white/[0.02]"
388 + >
389 + <div className="inline-flex rounded-xl bg-indigo-50 p-3 text-indigo-500 dark:bg-indigo-500/10">
390 + <Icon className="h-5 w-5" />
391 + </div>
392 + <h3 className="mt-4 text-lg font-semibold text-slate-900 dark:text-white">
393 + {card.title}
394 + </h3>
395 + <p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-400">
396 + {card.description}
397 + </p>
398 + </div>
399 + );
400 + })}
401 + </div>
402 + </div>
403 + </section>
404 +
405 + {/* Pricing */}
406 + <section className="border-y border-slate-200 px-6 py-20 dark:border-white/[0.06] lg:px-8">
407 + <div className="mx-auto max-w-5xl">
408 + <div className="max-w-3xl">
409 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
410 + smbCloud Auth pricing
411 + </p>
412 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
413 + Start free. Pay for what you use.
414 + </h2>
415 + <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
416 + Every plan includes the full auth feature set. You only pay more
417 + when your app has more users. Simple.
418 + </p>
419 + </div>
420 +
421 + <div className="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
422 + {plans.map((plan) => (
423 + <div
424 + key={plan.name}
425 + className={`rounded-2xl border p-6 ${
426 + plan.highlighted
427 + ? "border-indigo-200 bg-indigo-50/70 shadow-sm dark:border-indigo-500/25 dark:bg-indigo-500/10"
428 + : "border-slate-200 bg-white dark:border-white/[0.06] dark:bg-white/[0.02]"
429 + }`}
430 + >
431 + <div className="flex items-start justify-between gap-4">
432 + <div>
433 + <h3 className="text-xl font-semibold text-slate-900 dark:text-white">
434 + {plan.name}
435 + </h3>
436 + <p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
437 + {plan.description}
438 + </p>
439 + </div>
440 + {plan.highlighted ? (
441 + <span className="rounded-full bg-indigo-600 px-2.5 py-1 text-[11px] font-semibold text-white">
442 + Popular
443 + </span>
444 + ) : null}
445 + </div>
446 +
447 + <div className="mt-6">
448 + <div className="flex items-end gap-1">
449 + <span className="text-4xl font-bold tracking-tight text-slate-900 dark:text-white">
450 + {plan.price}
451 + </span>
452 + {plan.period ? (
453 + <span className="pb-1 text-sm text-slate-500 dark:text-slate-500">
454 + {plan.period}
455 + </span>
456 + ) : null}
457 + </div>
458 + {plan.overage ? (
459 + <p className="mt-1 text-xs text-slate-500 dark:text-slate-500">
460 + {plan.overage}
461 + </p>
462 + ) : null}
463 + </div>
464 +
465 + <ul className="mt-6 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
466 + {plan.bullets.map((bullet) => (
467 + <li key={bullet} className="flex gap-3">
468 + <FaCheckCircle className="mt-1 h-4 w-4 shrink-0 text-indigo-500" />
469 + <span>{bullet}</span>
470 + </li>
471 + ))}
472 + </ul>
473 +
474 + <a
475 + href={plan.href}
476 + className={`mt-8 inline-flex w-full items-center justify-center rounded-lg px-5 py-3 text-sm font-semibold transition-colors ${
477 + plan.highlighted
478 + ? "bg-indigo-600 text-white hover:bg-indigo-500"
479 + : "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]"
480 + }`}
481 + >
482 + {plan.cta}
483 + </a>
484 + </div>
485 + ))}
486 + </div>
487 + </div>
488 + </section>
489 +
490 + {/* Bottom CTA */}
491 + <section className="px-6 py-20 lg:px-8">
492 + <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]">
493 + <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
494 + <div>
495 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
496 + Get started
497 + </p>
498 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
499 + Start with Starter. Upgrade when your app takes off.
500 + </h2>
501 + <p className="mt-5 max-w-2xl text-base leading-8 text-slate-600 dark:text-slate-400">
502 + Every smbCloud Auth plan includes the same core features. The
503 + only thing that changes is how many users you can serve and the
504 + level of support. Start free today and scale when you are ready.
505 + </p>
506 + </div>
507 +
508 + <div className="flex flex-col gap-4 lg:items-end">
509 + <a
510 + href={`${CONSOLE_URL}?plan=starter`}
511 + 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]"
512 + >
513 + Start for free
514 + </a>
515 + <Link
516 + href="/services"
517 + 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]"
518 + >
519 + Back to services
520 + </Link>
521 + </div>
522 + </div>
523 + </div>
524 + </section>
525 + </div>
526 + );
527 +}
app/mail/page.tsx
+1 -1
@@ -191,7 +191,7 @@ export default function MailPage() {
191 <div className="mx-auto max-w-5xl">
192 <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-orange-200 bg-orange-50 px-4 py-1.5 dark:border-orange-500/30 dark:bg-orange-500/10">
193 <span className="h-1.5 w-1.5 rounded-full bg-orange-500" />
194 - <span className="text-xs font-semibold uppercase tracking-widest text-orange-700 dark:text-orange-300">
194 + <span className="text-xs font-semibold tracking-widest text-orange-700 dark:text-orange-300">
195 smbCloud Mail
196 </span>
197 </div>
app/page.tsx
+153 -18
@@ -52,6 +52,39 @@ const bestFit = [
52 "Teams that like SSH and fewer moving parts",
53 ];
54
55 +const featuredServices = [
56 + {
57 + name: "smbCloud Auth",
58 + eyebrow: "Accounts and access",
59 + title: "Hosted auth that stays out of the way.",
60 + description:
61 + "Handle sign-in, signup, sessions, custom domains, collaborators, and billing without adopting a giant identity platform first.",
62 + bullets: [
63 + "Hosted auth apps for end-user accounts",
64 + "Simple plans from Starter to Business",
65 + "A calmer alternative to Auth0, Clerk, and bundled platform auth",
66 + ],
67 + href: "/auth",
68 + cta: "Explore Auth",
69 + accent: "indigo",
70 + },
71 + {
72 + name: "smbCloud Mail",
73 + eyebrow: "Domain mail routing",
74 + title: "Mail built around the inbox, not just the send API.",
75 + description:
76 + "Route domain email, keep forwarding simple, and store inbound history without stitching together a bigger mail suite than you need.",
77 + bullets: [
78 + "One Mail app per project",
79 + "Inbox routes, forwarding, and stored inbound messages",
80 + "A cleaner fit for teams comparing Resend, useSend, or SendGrid",
81 + ],
82 + href: "/mail",
83 + cta: "Explore Mail",
84 + accent: "orange",
85 + },
86 +];
87 +
88 const deployComparisonPages = [
89 {
90 href: "/heroku-alternative",
@@ -178,17 +211,21 @@ const mailComparisonPages = [
211
212 export const metadata: Metadata = {
213 ...genPageMetadata({
181 - title: "Deploy Node.js, Rails, and Vapor apps with one command",
214 + title: "Deploy apps, handle auth, and run domain mail from one platform",
215 description:
183 - "smbCloud is an SSH-first deploy platform for small teams shipping Node.js, Ruby on Rails, and Swift/Vapor apps. Deploy with one command, live logs, fast rollbacks, and a clean console.",
216 + "smbCloud helps small teams deploy Node.js, Ruby on Rails, and Swift/Vapor apps, run hosted auth, and manage domain mail from one calm console.",
217 path: "/",
218 keywords: [
219 "SSH-first deploy platform",
220 "deploy Node.js app",
221 "deploy Ruby on Rails app",
222 "deploy Vapor app",
223 + "hosted auth",
224 + "authentication service",
225 + "domain mail routing",
226 "Heroku alternative",
191 - "Railway alternative",
227 + "Auth0 alternative",
228 + "Resend alternative",
229 "small team deployment platform",
230 ],
231 }),
@@ -226,6 +263,39 @@ const homepageStructuredData = {
263 audienceType: "Developers and small software teams",
264 },
265 },
266 + {
267 + "@type": "Service",
268 + name: "smbCloud Auth",
269 + serviceType: "Hosted authentication service",
270 + provider: {
271 + "@id": absoluteUrl("/#organization"),
272 + },
273 + areaServed: "Worldwide",
274 + url: absoluteUrl("/auth"),
275 + description:
276 + "Hosted auth apps for sign-in, signup, sessions, collaborators, and account management.",
277 + audience: {
278 + "@type": "Audience",
279 + audienceType: "Developers and software teams shipping user accounts",
280 + },
281 + },
282 + {
283 + "@type": "Service",
284 + name: "smbCloud Mail",
285 + serviceType: "Domain mail routing service",
286 + provider: {
287 + "@id": absoluteUrl("/#organization"),
288 + },
289 + areaServed: "Worldwide",
290 + url: absoluteUrl("/mail"),
291 + description:
292 + "Domain inbox routes, forwarding, and stored inbound mail for teams that want calmer mail infrastructure.",
293 + audience: {
294 + "@type": "Audience",
295 + audienceType:
296 + "Businesses and software teams handling inbound domain email",
297 + },
298 + },
299 ],
300 };
301
@@ -275,6 +345,70 @@ export default function Home() {
345 </div>
346 </section>
347
348 + <section className="px-6 pb-14 lg:px-8">
349 + <div className="mx-auto max-w-5xl">
350 + <div className="mb-10 max-w-3xl">
351 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
352 + Start here
353 + </p>
354 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-4xl">
355 + Auth and Mail are two of the clearest ways into smbCloud.
356 + </h2>
357 + <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
358 + If you're comparing auth vendors or trying to clean up your domain
359 + mail setup, start with the product page that matches the job.
360 + </p>
361 + </div>
362 +
363 + <div className="grid gap-6 lg:grid-cols-2">
364 + {featuredServices.map((service) => (
365 + <Link
366 + key={service.name}
367 + href={service.href}
368 + className={`group rounded-2xl border p-8 transition-colors ${
369 + service.accent === "orange"
370 + ? "border-orange-200 bg-orange-50/70 hover:border-orange-300 hover:bg-orange-50 dark:border-orange-500/20 dark:bg-orange-500/10 dark:hover:border-orange-500/35 dark:hover:bg-orange-500/14"
371 + : "border-indigo-200 bg-indigo-50/70 hover:border-indigo-300 hover:bg-indigo-50 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:hover:border-indigo-500/35 dark:hover:bg-indigo-500/14"
372 + }`}
373 + >
374 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-500">
375 + {service.eyebrow}
376 + </p>
377 + <h3 className="mt-4 text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
378 + {service.title}
379 + </h3>
380 + <p className="mt-4 text-base leading-8 text-slate-600 dark:text-slate-400">
381 + {service.description}
382 + </p>
383 + <ul className="mt-6 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
384 + {service.bullets.map((bullet) => (
385 + <li key={bullet} className="flex gap-3">
386 + <span
387 + className={`mt-2 h-1.5 w-1.5 shrink-0 rounded-full ${
388 + service.accent === "orange"
389 + ? "bg-orange-500"
390 + : "bg-indigo-500"
391 + }`}
392 + />
393 + <span>{bullet}</span>
394 + </li>
395 + ))}
396 + </ul>
397 + <p
398 + className={`mt-6 text-sm font-semibold ${
399 + service.accent === "orange"
400 + ? "text-orange-600 dark:text-orange-400"
401 + : "text-indigo-600 dark:text-indigo-400"
402 + }`}
403 + >
404 + {service.cta} →
405 + </p>
406 + </Link>
407 + ))}
408 + </div>
409 + </div>
410 + </section>
411 +
412 <section className="px-6 pb-12 lg:px-8">
413 <div className="mx-auto grid max-w-5xl gap-4 sm:grid-cols-2 lg:grid-cols-4">
414 {proofPoints.map((point) => (
@@ -405,19 +539,18 @@ export default function Home() {
539 <div>
540 <div className="mb-10 max-w-3xl">
541 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
408 - smbCloud Deploy
542 + smbCloud Auth
543 </p>
544 <h3 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
411 - Heroku or Railway?
545 + Auth0, Clerk, or Supabase Auth?
546 </h3>
547 <p className="mt-4 text-base leading-8 text-slate-600 dark:text-slate-400">
414 - Direct comparisons, honest about where smbCloud fits and where
415 - it doesn't.
548 + Sign-in, signup, sessions. Hosted, out of the way.
549 </p>
550 </div>
551
419 - <div className="grid gap-6 lg:grid-cols-2">
420 - {deployComparisonPages.map((page) => (
552 + <div className="grid gap-6 lg:grid-cols-3">
553 + {authComparisonPages.map((page) => (
554 <Link
555 key={page.href}
556 href={page.href}
@@ -451,18 +584,18 @@ export default function Home() {
584 <div className="border-t border-slate-200 pt-16 dark:border-white/[0.06]">
585 <div className="mb-10 max-w-3xl">
586 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
454 - smbCloud Auth
587 + smbCloud Mail
588 </p>
589 <h3 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
457 - Auth0, Clerk, or Supabase Auth?
590 + Resend, useSend, or SendGrid?
591 </h3>
592 <p className="mt-4 text-base leading-8 text-slate-600 dark:text-slate-400">
460 - Sign-in, signup, sessions. Hosted, out of the way.
593 + Domain routes, forwarding, stored inbound mail.
594 </p>
595 </div>
596
597 <div className="grid gap-6 lg:grid-cols-3">
465 - {authComparisonPages.map((page) => (
598 + {mailComparisonPages.map((page) => (
599 <Link
600 key={page.href}
601 href={page.href}
@@ -496,18 +629,19 @@ export default function Home() {
629 <div className="border-t border-slate-200 pt-16 dark:border-white/[0.06]">
630 <div className="mb-10 max-w-3xl">
631 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
499 - smbCloud Mail
632 + smbCloud Deploy
633 </p>
634 <h3 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
502 - Resend, useSend, or SendGrid?
635 + Heroku or Railway?
636 </h3>
637 <p className="mt-4 text-base leading-8 text-slate-600 dark:text-slate-400">
505 - Domain routes, forwarding, stored inbound mail.
638 + Direct comparisons, honest about where smbCloud fits and where
639 + it doesn't.
640 </p>
641 </div>
642
509 - <div className="grid gap-6 lg:grid-cols-3">
510 - {mailComparisonPages.map((page) => (
643 + <div className="grid gap-6 lg:grid-cols-2">
644 + {deployComparisonPages.map((page) => (
645 <Link
646 key={page.href}
647 href={page.href}
@@ -537,6 +671,7 @@ export default function Home() {
671 ))}
672 </div>
673 </div>
674 +
675 <div className="border-t border-slate-200 pt-16 dark:border-white/[0.06]">
676 <div className="mb-10 max-w-3xl">
677 <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
components/header.tsx
+4 -4
@@ -47,10 +47,10 @@ export default function Header() {
47 Home
48 </Link>
49 <Link
50 - href="/services"
50 + href="/auth"
51 className="hover:text-slate-900 dark:hover:text-white transition-colors"
52 >
53 - Services
53 + Auth
54 </Link>
55 <Link
56 href="/mail"
@@ -135,11 +135,11 @@ export default function Header() {
135 Home
136 </Link>
137 <Link
138 - href="/services"
138 + href="/auth"
139 onClick={() => setMenuOpen(false)}
140 className="flex items-center rounded-md px-3 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 hover:text-slate-900 dark:hover:text-white transition-colors"
141 >
142 - Services
142 + Auth
143 </Link>
144 <Link
145 href="/mail"