@smbcloud / smbcloud-web / commits / 0ed2db0

Add smbCloud Mail landing page and update navigation links

keypair34 committed May 13, 2026 at 17:10 UTC 0ed2db0464e271df99f0810023641cacfe682ec6
5 files changed +487 -1
app/mail/page.tsx new
+467
@@ -0,0 +1,467 @@
1 +import type { Metadata } from "next";
2 +import Link from "next/link";
3 +import { FaApple, FaCheckCircle, FaGlobe, FaInbox, FaShieldAlt } from "react-icons/fa";
4 +import { StructuredData } from "@/components/structured-data";
5 +import { absoluteUrl, genPageMetadata } from "../seo";
6 +
7 +const FREE_SIGNUP_URL = "https://console.smbcloud.xyz/signup-mailx";
8 +const BUSINESS_SIGNUP_URL =
9 + "https://console.smbcloud.xyz/signup-mailx?business=true";
10 +const MAILX_WEB_URL = "https://console.smbcloud.xyz/mail/x";
11 +const TESTFLIGHT_URL = "https://testflight.apple.com/join/pMq7WKRG";
12 +
13 +const offerings = [
14 + {
15 + name: "Free hosted email",
16 + eyebrow: "@smbcloud.xyz",
17 + description:
18 + "A hosted inbox on the shared smbCloud Mail domain. Good if you want to try the product, keep things simple, and live in MailX.",
19 + bullets: [
20 + "Hosted @smbcloud.xyz inbox",
21 + "MailX on web, iOS, macOS, Android, Linux, and Windows",
22 + "Best fit for early access and personal use",
23 + ],
24 + cta: "Get a free inbox",
25 + href: FREE_SIGNUP_URL,
26 + highlighted: false,
27 + },
28 + {
29 + name: "smbCloud Mail Business",
30 + eyebrow: "Your own domain",
31 + description:
32 + "Business email with your own domain. Your quotes, invoices, and replies come from @yourcompany.com, not a Gmail address.",
33 + bullets: [
34 + "Custom domain email",
35 + "Deliverability score and outbound controls",
36 + "MailX for the whole team",
37 + ],
38 + cta: "Start business setup",
39 + href: BUSINESS_SIGNUP_URL,
40 + highlighted: true,
41 + },
42 +];
43 +
44 +const plans = [
45 + {
46 + name: "Starter",
47 + price: "$15",
48 + period: "/mo",
49 + description:
50 + "For the local shop, the consultant, or the team that needs to stop looking tiny.",
51 + bullets: [
52 + "Up to 5 team members",
53 + "Custom domain email",
54 + "MailX app access",
55 + "Deliverability score",
56 + ],
57 + highlighted: false,
58 + },
59 + {
60 + name: "Business",
61 + price: "$49",
62 + period: "/mo",
63 + description:
64 + "For teams that send newsletters, handle sales replies, and need one inbox story that makes sense.",
65 + bullets: [
66 + "Unlimited team members",
67 + "Newsletter sends",
68 + "Priority Inbox for client replies",
69 + "Basic automation",
70 + ],
71 + highlighted: true,
72 + },
73 + {
74 + name: "Premium",
75 + price: "$99",
76 + period: "/mo",
77 + description:
78 + "For higher volume sending, tighter security, and a human who can actually help when something goes sideways.",
79 + bullets: [
80 + "Everything in Business",
81 + "High-volume sending",
82 + "Advanced encryption",
83 + "Personal Account Assistant",
84 + ],
85 + highlighted: false,
86 + },
87 +];
88 +
89 +const proofCards = [
90 + {
91 + title: "Look like a real business",
92 + description:
93 + "Clients notice the sender line first. you@yourcompany.com lands better than another Gmail address.",
94 + icon: FaInbox,
95 + },
96 + {
97 + title: "Keep spam anxiety down",
98 + description:
99 + "smbCloud Mail watches deliverability, so you are not guessing whether your invoice disappeared into Junk.",
100 + icon: FaShieldAlt,
101 + },
102 + {
103 + title: "Use one app everywhere",
104 + description:
105 + "MailX is how people actually use the service. Web, desktop, phone. Same product, same inbox.",
106 + icon: FaGlobe,
107 + },
108 +];
109 +
110 +export const metadata: Metadata = {
111 + ...genPageMetadata({
112 + title: "smbCloud Mail",
113 + description:
114 + "Free hosted @smbcloud.xyz inboxes and business email with your own domain. Use smbCloud Mail through the MailX app on web, desktop, and mobile.",
115 + path: "/mail",
116 + keywords: [
117 + "smbCloud Mail",
118 + "business email hosting",
119 + "custom domain email",
120 + "hosted @smbcloud.xyz inbox",
121 + "MailX app",
122 + "email for small business",
123 + ],
124 + }),
125 +};
126 +
127 +export default function MailPage() {
128 + const structuredData = {
129 + "@context": "https://schema.org",
130 + "@graph": [
131 + {
132 + "@type": "WebPage",
133 + "@id": absoluteUrl("/mail#webpage"),
134 + url: absoluteUrl("/mail"),
135 + name: "smbCloud Mail",
136 + description:
137 + "Free hosted @smbcloud.xyz inboxes and business email with your own domain.",
138 + isPartOf: {
139 + "@id": absoluteUrl("/#website"),
140 + },
141 + },
142 + {
143 + "@type": "Service",
144 + name: "smbCloud Mail",
145 + serviceType: "Hosted email service",
146 + areaServed: "Worldwide",
147 + url: absoluteUrl("/mail"),
148 + offers: [
149 + {
150 + "@type": "Offer",
151 + name: "smbCloud Mail Starter",
152 + price: "15",
153 + priceCurrency: "USD",
154 + url: BUSINESS_SIGNUP_URL,
155 + },
156 + {
157 + "@type": "Offer",
158 + name: "smbCloud Mail Business",
159 + price: "49",
160 + priceCurrency: "USD",
161 + url: BUSINESS_SIGNUP_URL,
162 + },
163 + {
164 + "@type": "Offer",
165 + name: "smbCloud Mail Premium",
166 + price: "99",
167 + priceCurrency: "USD",
168 + url: BUSINESS_SIGNUP_URL,
169 + },
170 + ],
171 + },
172 + ],
173 + };
174 +
175 + return (
176 + <div>
177 + <StructuredData data={structuredData} />
178 +
179 + <section className="relative overflow-hidden px-6 pt-24 pb-16 sm:pt-32 sm:pb-20 lg:px-8">
180 + <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(249,115,22,0.22),transparent)] dark:bg-[radial-gradient(ellipse_75%_50%_at_50%_0%,rgba(249,115,22,0.16),transparent)]" />
181 +
182 + <div className="mx-auto max-w-5xl">
183 + <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">
184 + <span className="h-1.5 w-1.5 rounded-full bg-orange-500" />
185 + <span className="text-xs font-semibold uppercase tracking-widest text-orange-700 dark:text-orange-300">
186 + smbCloud Mail
187 + </span>
188 + </div>
189 +
190 + <div className="grid gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:items-start">
191 + <div>
192 + <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-6xl leading-[1.05]">
193 + Email that does not make your business look small.
194 + </h1>
195 +
196 + <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600 dark:text-slate-400">
197 + smbCloud Mail gives you two ways in. Start with a free hosted
198 + inbox on <span className="font-semibold">@smbcloud.xyz</span>,
199 + or set up <span className="font-semibold">smbCloud Mail Business</span>
200 + {' '}with your own domain. Either way, you use MailX to read,
201 + reply, and keep moving.
202 + </p>
203 +
204 + <div className="mt-8 flex flex-col gap-4 sm:flex-row">
205 + <a
206 + href={BUSINESS_SIGNUP_URL}
207 + className="inline-flex items-center justify-center rounded-lg bg-orange-500 px-8 py-3.5 text-sm font-semibold text-white shadow-lg shadow-orange-500/20 transition-all hover:bg-orange-400 hover:shadow-orange-500/30 active:scale-[0.98]"
208 + >
209 + Start business setup
210 + </a>
211 + <a
212 + href={FREE_SIGNUP_URL}
213 + 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]"
214 + >
215 + Get a free inbox
216 + </a>
217 + </div>
218 +
219 + <p className="mt-4 text-sm text-slate-500 dark:text-slate-500">
220 + Free personal inboxes live on @smbcloud.xyz. Business inboxes use
221 + your own domain.
222 + </p>
223 + </div>
224 +
225 + <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-white/[0.06] dark:bg-white/[0.02]">
226 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
227 + MailX
228 + </p>
229 + <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">
230 + One client app. All your inboxes.
231 + </h2>
232 + <p className="mt-4 text-base leading-7 text-slate-600 dark:text-slate-400">
233 + smbCloud Mail is the service. MailX is the app people use to
234 + actually get work done. Web console, desktop, phone. Same inbox.
235 + </p>
236 +
237 + <ul className="mt-6 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
238 + <li className="flex gap-3">
239 + <FaCheckCircle className="mt-1 h-4 w-4 shrink-0 text-orange-500" />
240 + <span>Web at console.smbcloud.xyz/mail/x</span>
241 + </li>
242 + <li className="flex gap-3">
243 + <FaApple className="mt-1 h-4 w-4 shrink-0 text-orange-500" />
244 + <span>iOS and macOS through App Store and TestFlight</span>
245 + </li>
246 + <li className="flex gap-3">
247 + <FaGlobe className="mt-1 h-4 w-4 shrink-0 text-orange-500" />
248 + <span>Android, Linux, and Windows through the Tauri client family</span>
249 + </li>
250 + </ul>
251 +
252 + <div className="mt-6 flex flex-col gap-3 sm:flex-row">
253 + <a
254 + href={MAILX_WEB_URL}
255 + 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"
256 + >
257 + Open MailX web
258 + </a>
259 + <a
260 + href={TESTFLIGHT_URL}
261 + target="_blank"
262 + rel="noopener noreferrer"
263 + 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]"
264 + >
265 + Join TestFlight
266 + </a>
267 + </div>
268 + </div>
269 + </div>
270 + </div>
271 + </section>
272 +
273 + <section className="px-6 pb-10 lg:px-8">
274 + <div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-2">
275 + {offerings.map((offering) => (
276 + <div
277 + key={offering.name}
278 + className={`rounded-2xl border p-6 sm:p-8 ${
279 + offering.highlighted
280 + ? "border-orange-200 bg-orange-50/70 dark:border-orange-500/25 dark:bg-orange-500/10"
281 + : "border-slate-200 bg-white dark:border-white/[0.06] dark:bg-white/[0.02]"
282 + }`}
283 + >
284 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
285 + {offering.eyebrow}
286 + </p>
287 + <h2 className="mt-3 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">
288 + {offering.name}
289 + </h2>
290 + <p className="mt-4 text-base leading-7 text-slate-600 dark:text-slate-400">
291 + {offering.description}
292 + </p>
293 + <ul className="mt-5 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
294 + {offering.bullets.map((bullet) => (
295 + <li key={bullet} className="flex gap-3">
296 + <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-orange-500" />
297 + <span>{bullet}</span>
298 + </li>
299 + ))}
300 + </ul>
301 + <a
302 + href={offering.href}
303 + className={`mt-6 inline-flex items-center gap-2 rounded-lg px-5 py-3 text-sm font-semibold transition-colors ${
304 + offering.highlighted
305 + ? "bg-orange-500 text-white hover:bg-orange-400"
306 + : "bg-slate-900 text-white hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
307 + }`}
308 + >
309 + {offering.cta}
310 + </a>
311 + </div>
312 + ))}
313 + </div>
314 + </section>
315 +
316 + <section className="px-6 py-16 lg:px-8">
317 + <div className="mx-auto max-w-5xl">
318 + <div className="max-w-3xl">
319 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
320 + Why people pick smbCloud Mail
321 + </p>
322 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
323 + Because email is still where trust gets won or lost.
324 + </h2>
325 + <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
326 + If your quote lands in spam, it does not matter how good the quote
327 + was. If your invoice comes from a random Gmail address, you start
328 + the conversation one step behind. smbCloud Mail fixes that part.
329 + </p>
330 + </div>
331 +
332 + <div className="mt-10 grid gap-6 md:grid-cols-3">
333 + {proofCards.map((card) => {
334 + const Icon = card.icon;
335 + return (
336 + <div
337 + key={card.title}
338 + className="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/[0.06] dark:bg-white/[0.02]"
339 + >
340 + <div className="inline-flex rounded-xl bg-orange-50 p-3 text-orange-500 dark:bg-orange-500/10">
341 + <Icon className="h-5 w-5" />
342 + </div>
343 + <h3 className="mt-4 text-lg font-semibold text-slate-900 dark:text-white">
344 + {card.title}
345 + </h3>
346 + <p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-400">
347 + {card.description}
348 + </p>
349 + </div>
350 + );
351 + })}
352 + </div>
353 + </div>
354 + </section>
355 +
356 + <section className="border-y border-slate-200 px-6 py-20 dark:border-white/[0.06] lg:px-8">
357 + <div className="mx-auto max-w-5xl">
358 + <div className="max-w-3xl">
359 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
360 + smbCloud Mail Business pricing
361 + </p>
362 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
363 + Flat monthly pricing. No weird surprises.
364 + </h2>
365 + <p className="mt-5 text-base leading-8 text-slate-600 dark:text-slate-400">
366 + Small businesses hate mystery bills. Fair enough. These plans are
367 + simple on purpose.
368 + </p>
369 + </div>
370 +
371 + <div className="mt-10 grid gap-6 md:grid-cols-3">
372 + {plans.map((plan) => (
373 + <div
374 + key={plan.name}
375 + className={`rounded-2xl border p-6 ${
376 + plan.highlighted
377 + ? "border-orange-200 bg-orange-50/70 shadow-sm dark:border-orange-500/25 dark:bg-orange-500/10"
378 + : "border-slate-200 bg-white dark:border-white/[0.06] dark:bg-white/[0.02]"
379 + }`}
380 + >
381 + <div className="flex items-start justify-between gap-4">
382 + <div>
383 + <h3 className="text-xl font-semibold text-slate-900 dark:text-white">
384 + {plan.name}
385 + </h3>
386 + <p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
387 + {plan.description}
388 + </p>
389 + </div>
390 + {plan.highlighted ? (
391 + <span className="rounded-full bg-orange-500 px-2.5 py-1 text-[11px] font-semibold text-white">
392 + Popular
393 + </span>
394 + ) : null}
395 + </div>
396 +
397 + <div className="mt-6 flex items-end gap-1">
398 + <span className="text-4xl font-bold tracking-tight text-slate-900 dark:text-white">
399 + {plan.price}
400 + </span>
401 + <span className="pb-1 text-sm text-slate-500 dark:text-slate-500">
402 + {plan.period}
403 + </span>
404 + </div>
405 +
406 + <ul className="mt-6 space-y-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
407 + {plan.bullets.map((bullet) => (
408 + <li key={bullet} className="flex gap-3">
409 + <FaCheckCircle className="mt-1 h-4 w-4 shrink-0 text-orange-500" />
410 + <span>{bullet}</span>
411 + </li>
412 + ))}
413 + </ul>
414 +
415 + <a
416 + href={BUSINESS_SIGNUP_URL}
417 + className={`mt-8 inline-flex w-full items-center justify-center rounded-lg px-5 py-3 text-sm font-semibold transition-colors ${
418 + plan.highlighted
419 + ? "bg-orange-500 text-white hover:bg-orange-400"
420 + : "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]"
421 + }`}
422 + >
423 + Choose {plan.name}
424 + </a>
425 + </div>
426 + ))}
427 + </div>
428 + </div>
429 + </section>
430 +
431 + <section className="px-6 py-20 lg:px-8">
432 + <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]">
433 + <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
434 + <div>
435 + <p className="text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
436 + The first win
437 + </p>
438 + <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
439 + Your client sees your domain and takes you seriously.
440 + </h2>
441 + <p className="mt-5 max-w-2xl text-base leading-8 text-slate-600 dark:text-slate-400">
442 + That is the moment that matters. The sender line looks right.
443 + The reply comes back to the right place. The business feels more
444 + real because it is more real.
445 + </p>
446 + </div>
447 +
448 + <div className="flex flex-col gap-4 lg:items-end">
449 + <a
450 + href={BUSINESS_SIGNUP_URL}
451 + className="inline-flex items-center justify-center rounded-lg bg-orange-500 px-8 py-3.5 text-sm font-semibold text-white shadow-lg shadow-orange-500/20 transition-all hover:bg-orange-400 hover:shadow-orange-500/30 active:scale-[0.98]"
452 + >
453 + Start smbCloud Mail Business
454 + </a>
455 + <Link
456 + href="/services"
457 + 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]"
458 + >
459 + Back to services
460 + </Link>
461 + </div>
462 + </div>
463 + </div>
464 + </section>
465 + </div>
466 + );
467 +}
app/sitemap.ts
+5
@@ -16,6 +16,11 @@ export default function sitemap(): MetadataRoute.Sitemap {
16 changeFrequency: "weekly",
17 priority: 0.9,
18 },
19 + {
20 + url: absoluteUrl("/mail"),
21 + changeFrequency: "weekly",
22 + priority: 0.9,
23 + },
24 {
25 url: absoluteUrl("/posts"),
26 changeFrequency: "weekly",
components/footer.tsx
+1
@@ -4,6 +4,7 @@ import { FaGithub } from "react-icons/fa";
4 const companyLinks = [
5 { href: "/about", label: "About" },
6 { href: "/services", label: "Services" },
7 + { href: "/mail", label: "Mail" },
8 { href: "/contact", label: "Contact" },
9 { href: "/privacy-policy", label: "Privacy" },
10 { href: "/term-of-use", label: "Terms" },
components/header.tsx
+13
@@ -52,6 +52,12 @@ export default function Header() {
52 >
53 Services
54 </Link>
55 + <Link
56 + href="/mail"
57 + className="hover:text-slate-900 dark:hover:text-white transition-colors"
58 + >
59 + Mail
60 + </Link>
61 </nav>
62
63 {/* Right side */}
@@ -135,6 +141,13 @@ export default function Header() {
141 >
142 Services
143 </Link>
144 + <Link
145 + href="/mail"
146 + onClick={() => setMenuOpen(false)}
147 + 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"
148 + >
149 + Mail
150 + </Link>
151 <div className="pt-2 pb-1">
152 <Link
153 href="https://console.smbcloud.xyz"
package.json
+1 -1
@@ -1,6 +1,6 @@
1 {
2 "name": "smbcloud-web",
3 - "version": "0.1.0",
3 + "version": "1.0.0",
4 "private": true,
5 "scripts": {
6 "dev": "next dev",