Add Services page and link to header navigation
keypair34 committed
May 2, 2026 at 07:55 UTC
38e07460b9a9798af3050cda4058e3810e92a30b
2 files changed
+243
app/services/page.tsx
new
+237
@@ -0,0 +1,237 @@
1
+import type { Metadata } from "next";
2
+import Link from "next/link";
3
+import { genPageMetadata } from "../seo";
4
+import siteMetadata from "@/content/siteMetadata";
5
+
6
+const services = [
7
+ {
8
+ name: "Deploy",
9
+ eyebrow: "Ship apps",
10
+ description:
11
+ "Deploy NodeJS, Swift, and Ruby apps with one command. No YAML maze. No container busywork just to get something online.",
12
+ bullets: [
13
+ "SSH-based deploys from the smb CLI",
14
+ "NodeJS, Swift, and Ruby support out of the box",
15
+ "Release history and rollback-friendly workflow",
16
+ ],
17
+ },
18
+ {
19
+ name: "Auth",
20
+ eyebrow: "Accounts and access",
21
+ description:
22
+ "Handle sign-in, signup, sessions, and hosted auth flows without bolting together three different vendors first.",
23
+ bullets: [
24
+ "Console account signup and sign-in",
25
+ "Hosted auth apps for end users",
26
+ "User and access management across projects",
27
+ ],
28
+ },
29
+ {
30
+ name: "Mail",
31
+ eyebrow: "Domain mail routing",
32
+ description:
33
+ "Set up one Mail app per project, add inbox routes for the domain, keep forwarding on, and start keeping a real record of what came in.",
34
+ bullets: [
35
+ "One Mail app per project",
36
+ "Many inbox routes under one domain",
37
+ "Forwarding plus stored inbound messages",
38
+ ],
39
+ },
40
+ {
41
+ name: "GresIQ",
42
+ eyebrow: "Data layer",
43
+ description:
44
+ "Run the database side of your product inside the same platform instead of scattering app logic, auth, and data across disconnected tools.",
45
+ bullets: [
46
+ "Database-oriented service setup",
47
+ "Connection and service management in one place",
48
+ "Built to live alongside Deploy, Auth, and Mail",
49
+ ],
50
+ },
51
+];
52
+
53
+export const metadata: Metadata = {
54
+ ...genPageMetadata({
55
+ title: "Services",
56
+ description:
57
+ "Explore smbCloud services for deploys, auth, mail, and GresIQ. One platform for shipping apps, handling accounts, routing email, and managing the data layer.",
58
+ }),
59
+ keywords: [
60
+ "smbCloud services",
61
+ "app deployment platform",
62
+ "hosted auth",
63
+ "mail routing",
64
+ "developer database platform",
65
+ "NodeJS deployment",
66
+ "Swift deployment",
67
+ "Ruby deployment",
68
+ "email forwarding platform",
69
+ "authentication service",
70
+ "GresIQ",
71
+ ],
72
+ alternates: {
73
+ canonical: `${siteMetadata.siteUrl}/services`,
74
+ },
75
+ openGraph: {
76
+ title: `Services | ${siteMetadata.title}`,
77
+ description:
78
+ "Deploy, Auth, Mail, and GresIQ live under one smbCloud platform instead of four disconnected products.",
79
+ url: `${siteMetadata.siteUrl}/services`,
80
+ siteName: siteMetadata.title,
81
+ locale: "en_US",
82
+ type: "website",
83
+ },
84
+};
85
+
86
+export default function ServicesPage() {
87
+ return (
88
+ <div>
89
+ <section className="relative overflow-hidden px-6 pt-24 pb-16 sm:pt-32 sm:pb-20 lg:px-8">
90
+ <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)]" />
91
+
92
+ <div className="mx-auto max-w-4xl">
93
+ <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-indigo-200 dark:border-indigo-500/30 bg-indigo-50 dark:bg-indigo-500/10 px-4 py-1.5">
94
+ <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
95
+ <span className="text-xs font-semibold uppercase tracking-widest text-indigo-700 dark:text-indigo-400">
96
+ smbCloud services
97
+ </span>
98
+ </div>
99
+
100
+ <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-6xl leading-[1.05]">
101
+ Four services. One platform.
102
+ </h1>
103
+
104
+ <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-400">
105
+ smbCloud is built around four core services: Deploy, Auth, Mail, and
106
+ GresIQ. They are separate products, but they belong together. That
107
+ is the point.
108
+ </p>
109
+
110
+ <div className="mt-8 flex flex-col gap-4 sm:flex-row">
111
+ <Link
112
+ href="https://console.smbcloud.xyz"
113
+ target="_blank"
114
+ 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]"
115
+ >
116
+ Open Console
117
+ </Link>
118
+ <Link
119
+ href="/"
120
+ className="inline-flex items-center justify-center rounded-lg border border-slate-300 dark:border-white/[0.12] px-8 py-3.5 text-sm font-semibold text-slate-700 dark:text-slate-200 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.04]"
121
+ >
122
+ Back to home
123
+ </Link>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <section className="px-6 pb-24 lg:px-8">
129
+ <div className="mx-auto max-w-5xl space-y-6">
130
+ {services.map((service) => (
131
+ <div
132
+ key={service.name}
133
+ className="rounded-2xl border border-slate-200 dark:border-white/[0.06] bg-white dark:bg-white/[0.02] p-6 sm:p-8"
134
+ >
135
+ <div className="grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
136
+ <div>
137
+ <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
138
+ {service.eyebrow}
139
+ </p>
140
+ <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">
141
+ {service.name}
142
+ </h2>
143
+ </div>
144
+
145
+ <div>
146
+ <p className="text-base leading-7 text-slate-600 dark:text-slate-400">
147
+ {service.description}
148
+ </p>
149
+ <ul className="mt-5 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
150
+ {service.bullets.map((bullet) => (
151
+ <li key={bullet} className="flex gap-3">
152
+ <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
153
+ <span>{bullet}</span>
154
+ </li>
155
+ ))}
156
+ </ul>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ ))}
161
+ </div>
162
+ </section>
163
+
164
+ <section className="border-t border-slate-200 dark:border-white/[0.06] px-6 py-24 lg:px-8">
165
+ <div className="mx-auto max-w-5xl grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-start">
166
+ <div>
167
+ <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
168
+ Why this matters
169
+ </p>
170
+ <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
171
+ Most teams do not need more tools. They need fewer seams.
172
+ </h2>
173
+ <p className="mt-5 max-w-2xl text-base leading-8 text-slate-600 dark:text-slate-400">
174
+ Deploy, Auth, Mail, and GresIQ solve different problems. Still,
175
+ they are all part of the same application stack. smbCloud keeps
176
+ them close, so you spend less time stitching products together and
177
+ more time shipping.
178
+ </p>
179
+ </div>
180
+
181
+ <div className="rounded-2xl border border-slate-200 dark:border-white/[0.06] bg-slate-50 dark:bg-white/[0.02] p-6">
182
+ <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
183
+ A simple stack
184
+ </h3>
185
+ <dl className="mt-5 space-y-4 text-sm">
186
+ <div className="flex items-start justify-between gap-4 border-b border-slate-200 dark:border-white/[0.06] pb-4">
187
+ <dt className="text-slate-500 dark:text-slate-400">Deploy</dt>
188
+ <dd className="text-right font-medium text-slate-900 dark:text-white">
189
+ ship the app
190
+ </dd>
191
+ </div>
192
+ <div className="flex items-start justify-between gap-4 border-b border-slate-200 dark:border-white/[0.06] pb-4">
193
+ <dt className="text-slate-500 dark:text-slate-400">Auth</dt>
194
+ <dd className="text-right font-medium text-slate-900 dark:text-white">
195
+ handle accounts
196
+ </dd>
197
+ </div>
198
+ <div className="flex items-start justify-between gap-4 border-b border-slate-200 dark:border-white/[0.06] pb-4">
199
+ <dt className="text-slate-500 dark:text-slate-400">Mail</dt>
200
+ <dd className="text-right font-medium text-slate-900 dark:text-white">
201
+ route domain email
202
+ </dd>
203
+ </div>
204
+ <div className="flex items-start justify-between gap-4">
205
+ <dt className="text-slate-500 dark:text-slate-400">GresIQ</dt>
206
+ <dd className="text-right font-medium text-slate-900 dark:text-white">
207
+ run the data layer
208
+ </dd>
209
+ </div>
210
+ </dl>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <section className="px-6 pb-20 lg:px-8">
216
+ <div className="mx-auto max-w-2xl">
217
+ <div className="relative overflow-hidden rounded-2xl bg-indigo-600 px-8 py-14 text-center shadow-2xl shadow-indigo-500/20">
218
+ <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.1),transparent)]" />
219
+ <h2 className="relative text-3xl font-bold tracking-tight text-white">
220
+ Start with one service. Add the rest when you need them.
221
+ </h2>
222
+ <p className="relative mt-4 text-indigo-200">
223
+ That is usually the better path anyway.
224
+ </p>
225
+ <Link
226
+ href="https://console.smbcloud.xyz"
227
+ target="_blank"
228
+ className="relative mt-8 inline-block rounded-lg bg-white px-8 py-3.5 text-sm font-semibold text-indigo-700 shadow-sm transition-colors hover:bg-indigo-50"
229
+ >
230
+ Create free account
231
+ </Link>
232
+ </div>
233
+ </div>
234
+ </section>
235
+ </div>
236
+ );
237
+}
components/header.tsx
+6
@@ -26,6 +26,12 @@ export default function Header() {
26
>
27
Home
28
</Link>
29
+ <Link
30
+ href="/services"
31
+ className="hover:text-slate-900 dark:hover:text-white transition-colors"
32
+ >
33
+ Services
34
+ </Link>
35
<Link
36
href="/kti"
37
className="hover:text-slate-900 dark:hover:text-white transition-colors"