@carrierllc/mcp 0.2.19 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrierllc/mcp",
-  "version": "0.2.19",
+  "version": "0.3.0",
   "description": "Carrier MCP \u2014 natural-language control of MVNO/eSIM fleets via eSIMVault OCS. Stdio mode for direct integration with Claude Desktop, Cursor, Windsurf, and MCP-compatible clients. Ships the `carrier` CLI (plugin install + white-label eSIM storefront scaffold).",
   "license": "MIT",
   "author": "Carrier (Lifecycle Innovations Limited)",

package/plugin/carrier/commands/storefront.md

@@ -1,21 +1,33 @@
 ---
-description: Scaffold, white-label, and deploy your eSIM storefront
-argument-hint: "[create|deploy|rebrand] [dir]"
+description: Scaffold, white-label, logo, and deploy your eSIM storefront
+argument-hint: "[create|logo|deploy|rebrand] [dir]"
 ---
 
 # Storefront
 
-Roll out the customer-facing eSIM storefront (Mango template, white-labeled) that sits on top of your Carrier fleet.
+Roll out the customer-facing eSIM storefront (Mango template, white-labeled) on top of your Carrier fleet.
 
-This wraps the `@carrierllc/cli` scaffolder.
+Works for **any developer** with Carrier MCP (`https://mcp.carrier.llc/mcp`) or the `carrier` CLI. You do not need an image-API key on your laptop.
 
-- **create** → run `npx @carrierllc/cli site create <dir>` (or `carrier site create`). Capture brand name, domain, accent color, support email; it generates `src/brand.config.ts` and a buildable Next.js storefront.
-- **rebrand** → edit `src/brand.config.ts` in the storefront dir (name, colors, tagline, domain, support, social) — the single white-label surface — then rebuild.
-- **deploy** → `npx @carrierllc/cli site deploy <dir>` → builds and pushes to Cloudflare Pages. Requires `wrangler login`.
+- **create** → `carrier site create <dir>`  
+  Captures brand name, domain, accent, support email. Writes `src/brand.config.ts` **and** `public/brand/logo.svg` (unique mark from the brand name + accent).
+- **logo** → `carrier site logo <dir>` or MCP tool `generate_storefront_logo`  
+  Regenerates the mark. SVG always. PNG is added only when Carrier (or this box) has an OpenAI image key — optional, never required.
+- **rebrand** → edit `src/brand.config.ts`, then `carrier site logo <dir>` and rebuild.
+- **deploy** → `carrier site deploy <dir>` (Cloudflare Workers). Requires `wrangler login`.
 
-Wire-up notes:
-- The storefront talks to your control plane via `NEXT_PUBLIC_CARRIER_API_URL` (`.env.local`).
-- Plans shown to customers come from `pricing_plans` / `list_package_templates`; keep them in sync.
-- Checkout provisions through the same fleet — confirm `credential_status` is healthy before going live.
+MCP (any authenticated Carrier user):
 
-After deploy, verify the live URL renders and the plans match `pricing_plans`.
+```
+generate_storefront_logo
+  name: Bananas
+  accent: #FF8A00
+  tagline: Travel eSIM that just works.
+```
+
+Write the returned `svg` to `public/brand/logo.svg`. Nav and icons read that path.
+
+Wire-up:
+- `NEXT_PUBLIC_CARRIER_API_URL` in `.env.local`
+- Plans from `list_package_templates` / `pricing_plans`
+- Confirm `credential_status` before going live

package/plugin/carrier/skills/carrier-operations/SKILL.md

@@ -30,6 +30,9 @@ Carrier is a programmable connectivity control plane (the "Stripe of telecom") e
 ## Fleet & platform
 `fleet_health` · `fleet_health_app` · `list_recent_ocs_events` · `rate_limit_status` · `carrier_ocs_calls_per_min` · `environment_info` · `credential_status` · `rotate_credentials` · `list_reseller_accounts` · `get_reseller_info` · `send_sms`
 
+## Storefront
+`generate_storefront_logo` (any authenticated MCP user) · CLI `carrier site create` writes `public/brand/logo.svg` · `carrier site logo` regenerates. Optional PNG if Carrier/worker has `OPENAI_API_KEY`.
+
 ## Gated surfaces (not free-tier defaults)
 - **Steel ui_agent_*** — requires `STEEL_API_KEY` / ops config; UI-only OCS ops.
 - **`stripe_proxy_call`** — Pro/Enterprise Stripe Agent Toolkit multiplexer.
@@ -40,4 +43,4 @@ Carrier is a programmable connectivity control plane (the "Stripe of telecom") e
 2. **Confirm money & live-service changes** — status changes, balance/package mutations, wallet top-ups, `clean_all_packages`, `rotate_credentials`, outbound `send_sms`.
 3. **Right quantity only** — never over-provision; check `credit_balance` and (managed mode) `wallet_balance` first.
 4. **Diagnose, don't guess** — use `diagnose_subscriber` + event tools for faults.
-5. The storefront layer (white-label Mango template) is scaffolded/deployed via `@carrierllc/cli`; keep its plans synced with `pricing_plans`.
+5. Storefront: `carrier site create` / `carrier site logo`, or MCP `generate_storefront_logo`. SVG mark is generated for every operator — no local image-API key required. Keep plans synced with `pricing_plans`.

package/templates/storefront/{next.config.ts → next.config.mjs}

@@ -1,4 +1,3 @@
-import type { NextConfig } from "next";
 import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
 import { fileURLToPath } from "url";
 import { dirname } from "path";
@@ -8,15 +7,12 @@ initOpenNextCloudflareForDev();
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-const nextConfig: NextConfig = {
+/** @type {import("next").NextConfig} */
+const nextConfig = {
   images: {
     unoptimized: true,
   },
   outputFileTracingRoot: __dirname,
-  eslint: {
-    // Template ships with a minimal ESLint config; lint separately via `pnpm lint`
-    ignoreDuringBuilds: true,
-  },
 };
 
 export default nextConfig;

package/templates/storefront/public/brand/logo.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="Carrier logo">
+  <defs>
+    <linearGradient id="lgcf797g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ff9c75"/>
+      <stop offset="55%" stop-color="#FF6B35"/>
+      <stop offset="100%" stop-color="#984625"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="96" fill="#FAFAF7"/>
+  <path d="M256 64 C320 64 400 96 424 176 C448 256 424 352 344 416 C280 464 232 464 168 416 C88 352 64 256 88 176 C112 96 192 64 256 64 Z" fill="url(#lgcf797g)"/>
+  <text x="256" y="300" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="220" font-weight="700" fill="#FFF8EB">C</text>
+</svg>

package/templates/storefront/src/app/activate/[orderId]/ActivateClient.tsx

@@ -51,34 +51,34 @@ export function ActivateClient({ orderId }: Props) {
         <div className="inline-flex items-center justify-center size-14 rounded-full bg-emerald-500/10 border border-emerald-500/30 mb-4">
           <span className="text-2xl">✓</span>
         </div>
-        <h1 className="text-2xl font-bold text-white">Your eSIM is ready</h1>
-        <p className="mt-2 text-sm text-white/50">Order: {orderId}</p>
+        <h1 className="text-2xl font-bold text-sand-900 dark:text-sand-50">Your eSIM is ready</h1>
+        <p className="mt-2 text-sm text-sand-500">Order: {orderId}</p>
       </div>
 
       {/* QR Code placeholder */}
-      <div className="rounded-2xl border border-white/10 bg-white/5 p-8 text-center mb-8">
-        <p className="text-white/60 text-sm mb-2">
+      <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 text-center mb-8">
+        <p className="text-sand-600 dark:text-sand-400 text-sm mb-2">
           Your QR code will appear here once your order is confirmed.
         </p>
-        <p className="text-white/30 text-xs">
+        <p className="text-sand-400 text-xs">
           This usually takes less than a minute. Refresh if needed.
         </p>
       </div>
 
       {/* Optional phone / WhatsApp collection */}
-      <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+      <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-6">
         <div className="flex items-start gap-3 mb-4">
           <div className="shrink-0 mt-0.5">
-            <span className="inline-flex items-center justify-center size-5 rounded-full bg-white/10 text-[10px] text-white/50">
+            <span className="inline-flex items-center justify-center size-5 rounded-full bg-white/10 text-[10px] text-sand-500">
               ?
             </span>
           </div>
           <div>
-            <p className="text-sm font-medium text-white">
+            <p className="text-sm font-medium text-sand-900 dark:text-sand-50">
               Get eSIM updates via WhatsApp{" "}
-              <span className="text-white/30 font-normal">(optional)</span>
+              <span className="text-sand-400 font-normal">(optional)</span>
             </p>
-            <p className="text-xs text-white/40 mt-0.5">
+            <p className="text-xs text-sand-500 mt-0.5">
               We&apos;ll send your QR code and activation status. You can skip this.
             </p>
           </div>
@@ -97,7 +97,7 @@ export function ActivateClient({ orderId }: Props) {
                 value={phone}
                 onChange={(e) => setPhone(e.target.value)}
                 placeholder="+1 555 000 0000"
-                className="flex-1 rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                className="flex-1 rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
               />
               <button
                 type="submit"
@@ -113,7 +113,7 @@ export function ActivateClient({ orderId }: Props) {
             <button
               type="button"
               onClick={() => setSubmitted(true)}
-              className="w-full text-center text-xs text-white/30 hover:text-white/50 py-1"
+              className="w-full text-center text-xs text-sand-400 hover:text-sand-500 py-1"
             >
               Skip for now
             </button>

package/templates/storefront/src/app/checkout/[templateId]/CheckoutClient.tsx

@@ -86,11 +86,11 @@ export function CheckoutClient({ plan, session }: Props) {
   if (checkoutError) {
     return (
       <div className="mx-auto max-w-lg px-4 py-32 text-center">
-        <p className="text-white/80">{checkoutError}</p>
-        <p className="text-sm text-white/30 mt-2">{plan.name}</p>
+        <p className="text-sand-700 dark:text-sand-200">{checkoutError}</p>
+        <p className="text-sm text-sand-400 mt-2">{plan.name}</p>
         <a
           href="/shop"
-          className="mt-6 inline-block rounded-full border border-white/20 px-6 py-2 text-sm text-white hover:bg-white/10 transition-colors"
+          className="mt-6 inline-block rounded-full border border-sand-300 dark:border-sand-700 px-6 py-2 text-sm text-sand-900 dark:text-sand-50 hover:bg-white/10 transition-colors"
         >
           ← Back to shop
         </a>
@@ -101,10 +101,10 @@ export function CheckoutClient({ plan, session }: Props) {
   return (
     <div className="mx-auto max-w-lg px-4 py-32 text-center">
       <div className="h-8 w-8 rounded-full border-2 border-[var(--brand-accent)] border-t-transparent animate-spin mx-auto mb-4" />
-      <p className="text-white/60">
+      <p className="text-sand-600 dark:text-sand-400">
         {loading ? "Preparing your checkout…" : "Redirecting to payment…"}
       </p>
-      <p className="text-sm text-white/30 mt-2">{plan.name}</p>
+      <p className="text-sm text-sand-400 mt-2">{plan.name}</p>
     </div>
   );
 }

package/templates/storefront/src/app/checkout/success/CheckoutSuccessClient.tsx

@@ -11,7 +11,7 @@
  * The orderId is verified server-side before this component renders.
  */
 import { useState, FormEvent, useEffect, useCallback } from "react";
-import { useSignUp, useSignIn } from "@clerk/nextjs/legacy";
+import { useSignUp, useSignIn } from "@clerk/nextjs";
 import { useClerk, useAuth } from "@clerk/nextjs";
 import { useRouter } from "next/navigation";
 import { completeEmailSignUpAfterVerify } from "@/lib/complete-email-sign-up";
@@ -166,7 +166,7 @@ export function CheckoutSuccessClient({
       <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
         <div className="text-center space-y-3">
           <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
-          <p className="text-sm text-white/60">
+          <p className="text-sm text-sand-600 dark:text-sand-400">
             {step === "redirecting" ? "Activating your eSIM…" : "Loading…"}
           </p>
         </div>
@@ -181,8 +181,8 @@ export function CheckoutSuccessClient({
           <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 px-6 py-4">
             <p className="text-lg font-semibold text-emerald-300">✓ Payment successful!</p>
           </div>
-          <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur space-y-4">
-            <p className="text-sm text-white/80">We could not link this purchase to your account.</p>
+          <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur space-y-4">
+            <p className="text-sm text-sand-700 dark:text-sand-200">We could not link this purchase to your account.</p>
             {error && (
               <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
                 {error}
@@ -213,17 +213,17 @@ export function CheckoutSuccessClient({
         </div>
 
         {/* Auth card */}
-        <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur">
+        <div className="rounded-2xl border border-sand-200 dark:border-sand-800 bg-white dark:bg-sand-900 p-8 backdrop-blur">
           {/* Mode toggle */}
           {step === "credentials" && (
-            <div className="flex rounded-lg border border-white/10 p-1 mb-6">
+            <div className="flex rounded-lg border border-sand-200 dark:border-sand-800 p-1 mb-6">
               <button
                 type="button"
                 onClick={() => { setMode("signup"); setError(null); }}
                 className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
                   mode === "signup"
-                    ? "bg-[var(--brand-accent)] text-white"
-                    : "text-white/40 hover:text-white/70"
+                    ? "bg-[var(--brand-accent)] text-sand-900 dark:text-sand-50"
+                    : "text-sand-500 hover:text-sand-600 dark:text-sand-300"
                 }`}
               >
                 Create account
@@ -233,8 +233,8 @@ export function CheckoutSuccessClient({
                 onClick={() => { setMode("signin"); setError(null); }}
                 className={`flex-1 rounded-md py-1.5 text-sm font-medium transition-colors ${
                   mode === "signin"
-                    ? "bg-[var(--brand-accent)] text-white"
-                    : "text-white/40 hover:text-white/70"
+                    ? "bg-[var(--brand-accent)] text-sand-900 dark:text-sand-50"
+                    : "text-sand-500 hover:text-sand-600 dark:text-sand-300"
                 }`}
               >
                 Sign in
@@ -245,15 +245,15 @@ export function CheckoutSuccessClient({
           {/* Sign-up: credentials step */}
           {step === "credentials" && mode === "signup" && (
             <>
-              <h2 className="text-base font-semibold text-white mb-1">Create your account</h2>
-              <p className="text-xs text-white/40 mb-5">
+              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Create your account</h2>
+              <p className="text-xs text-sand-500 mb-5">
                 {emailLocked
                   ? "Use the email from your checkout to create your account."
                   : "Email and password — no phone required."}
               </p>
               <form onSubmit={handleSignUp} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="su-email">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="su-email">
                     Email address
                   </label>
                   <input
@@ -264,12 +264,12 @@ export function CheckoutSuccessClient({
                     readOnly={emailLocked}
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                     placeholder="you@example.com"
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="su-password">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="su-password">
                     Password
                   </label>
                   <input
@@ -280,7 +280,7 @@ export function CheckoutSuccessClient({
                     minLength={8}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                     placeholder="Min. 8 characters"
                   />
                 </div>
@@ -303,15 +303,15 @@ export function CheckoutSuccessClient({
           {/* Sign-in: credentials step */}
           {step === "credentials" && mode === "signin" && (
             <>
-              <h2 className="text-base font-semibold text-white mb-1">Sign in</h2>
-              <p className="text-xs text-white/40 mb-5">
+              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Sign in</h2>
+              <p className="text-xs text-sand-500 mb-5">
                 {emailLocked
                   ? "Sign in with the email from your checkout to activate your eSIM."
                   : "Sign in to activate your eSIM."}
               </p>
               <form onSubmit={handleSignIn} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="si-email">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="si-email">
                     Email address
                   </label>
                   <input
@@ -322,12 +322,12 @@ export function CheckoutSuccessClient({
                     readOnly={emailLocked}
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                     placeholder="you@example.com"
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="si-password">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="si-password">
                     Password
                   </label>
                   <input
@@ -337,7 +337,7 @@ export function CheckoutSuccessClient({
                     required
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-sm text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                     placeholder="Your password"
                   />
                 </div>
@@ -360,13 +360,13 @@ export function CheckoutSuccessClient({
           {/* Email verification step */}
           {step === "verify" && (
             <>
-              <h2 className="text-base font-semibold text-white mb-1">Check your email</h2>
-              <p className="text-xs text-white/40 mb-5">
-                We sent a 6-digit code to <span className="text-white/70">{email}</span>.
+              <h2 className="text-base font-semibold text-sand-900 dark:text-sand-50 mb-1">Check your email</h2>
+              <p className="text-xs text-sand-500 mb-5">
+                We sent a 6-digit code to <span className="text-sand-600 dark:text-sand-300">{email}</span>.
               </p>
               <form onSubmit={handleVerify} className="space-y-4">
                 <div>
-                  <label className="block text-xs font-medium text-white/60 mb-1" htmlFor="verify-code">
+                  <label className="block text-xs font-medium text-sand-600 dark:text-sand-400 mb-1" htmlFor="verify-code">
                     Verification code
                   </label>
                   <input
@@ -378,7 +378,7 @@ export function CheckoutSuccessClient({
                     maxLength={6}
                     value={code}
                     onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
-                    className="w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-center text-lg tracking-[0.4em] text-white placeholder-white/20 focus:border-[var(--brand-accent)] focus:outline-none"
+                    className="w-full rounded-lg border border-sand-200 dark:border-sand-800 bg-sand-50 dark:bg-sand-950 px-3 py-2 text-center text-lg tracking-[0.4em] text-sand-900 dark:text-sand-50 placeholder:text-sand-400 focus:border-[var(--brand-accent)] focus:outline-none"
                     placeholder="000000"
                   />
                 </div>
@@ -398,7 +398,7 @@ export function CheckoutSuccessClient({
               <button
                 type="button"
                 onClick={() => { setStep("credentials"); setError(null); setCode(""); }}
-                className="mt-4 w-full text-center text-xs text-white/30 hover:text-white/50"
+                className="mt-4 w-full text-center text-xs text-sand-400 hover:text-sand-500"
               >
                 ← Back
               </button>
@@ -406,7 +406,7 @@ export function CheckoutSuccessClient({
           )}
         </div>
 
-        <p className="text-center text-xs text-white/30">
+        <p className="text-center text-xs text-sand-400">
           Your payment is confirmed. Account setup is required to receive your eSIM QR code.
         </p>
       </div>

package/templates/storefront/src/app/checkout/success/page.tsx

@@ -43,7 +43,7 @@ export default async function CheckoutSuccessPage({ searchParams }: Props) {
         <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center px-4">
           <div className="text-center space-y-3">
             <div className="mx-auto size-8 animate-spin rounded-full border-2 border-[var(--brand-accent)] border-t-transparent" />
-            <p className="text-sm text-white/60">Loading…</p>
+            <p className="text-sm text-sand-600 dark:text-sand-400">Loading…</p>
           </div>
         </div>
       }

package/templates/storefront/src/app/contact/page.tsx

@@ -1,34 +1,42 @@
+import Link from "next/link";
 import brand from "@/brand.config";
+import { buildSupportLink } from "@/vendor/ui/brand";
 
 export const metadata = { title: "Contact" };
 
 export default function ContactPage() {
   return (
-    <div className="mx-auto max-w-2xl px-4 py-24">
-      <h1 className="text-3xl font-bold text-white mb-8">Get in touch</h1>
-      <div className="space-y-4 text-white/70">
-        <p>
-          Email:{" "}
-          <a
-            href={`mailto:${brand.supportEmail}`}
-            className="text-[var(--brand-accent)] hover:underline"
-          >
-            {brand.supportEmail}
-          </a>
-        </p>
-        {brand.supportWhatsapp && (
-          <p>
-            WhatsApp:{" "}
-            <a
-              href={`https://wa.me/${brand.supportWhatsapp.replace(/[^0-9]/g, "")}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-[var(--brand-accent)] hover:underline"
-            >
-              {brand.supportWhatsapp}
-            </a>
-          </p>
-        )}
+    <div className="mx-auto max-w-2xl px-4 py-16">
+      <h1 className="text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+        Get in touch
+      </h1>
+      <p className="mt-2 mb-10 text-sand-600 dark:text-sand-400">
+        Real humans. 24/7. Pick the channel you already have open.
+      </p>
+      <div className="space-y-3">
+        <Link
+          href={buildSupportLink("whatsapp", { message: `Hi ${brand.name}!` })}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
+        >
+          <span className="font-medium">WhatsApp</span>
+          <span className="text-sm text-sand-500">24/7</span>
+        </Link>
+        <Link
+          href={buildSupportLink("sms")}
+          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
+        >
+          <span className="font-medium">SMS</span>
+          <span className="text-sm text-sand-500">{brand.supportWhatsapp}</span>
+        </Link>
+        <a
+          href={`mailto:${brand.supportEmail}`}
+          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
+        >
+          <span className="font-medium">Email</span>
+          <span className="text-sm text-sand-500">{brand.supportEmail}</span>
+        </a>
       </div>
     </div>
   );

package/templates/storefront/src/app/dashboard/page.tsx

@@ -11,12 +11,15 @@ export default async function DashboardPage() {
 
   return (
     <div className="mx-auto max-w-4xl px-4 py-16">
-      <h1 className="text-3xl font-bold text-white mb-8">Your eSIMs</h1>
-      <div className="rounded-2xl border border-white/10 bg-white/5 p-12 text-center">
-        <p className="text-white/50">No active eSIMs yet.</p>
+      <h1 className="mb-8 text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
+        Your eSIMs
+      </h1>
+      <div className="rounded-2xl border border-sand-200 bg-white p-12 text-center dark:border-sand-800 dark:bg-sand-900">
+        <p className="text-sand-500">No active eSIMs yet.</p>
         <a
           href="/shop"
-          className="mt-4 inline-block rounded-full bg-[var(--brand-accent)] px-6 py-2 text-sm font-semibold text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+          className="mt-4 inline-block rounded-full px-6 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+          style={{ background: "var(--brand-accent)" }}
         >
           Browse plans
         </a>