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