@carrierllc/mcp 0.2.16 → 0.2.17

package/templates/storefront/src/brand.config.ts

@@ -0,0 +1,28 @@
+/**
+ * White-label brand configuration.
+ * Edit this file to re-skin the storefront for any brand.
+ */
+const brand = {
+  name: process.env.NEXT_PUBLIC_BRAND_NAME ?? "Carrier",
+  legalName: "Lifecycle Innovations Limited",
+  tagline: "Programmable connectivity, on demand.",
+  domain: "carrier.llc",
+  supportUrl: "https://carrier.llc/help",
+  supportEmail: "support@carrier.llc",
+  supportWhatsapp: "+17864604829",
+  colors: {
+    bg: "#080C16",
+    accent: "#FF6B35",
+    accentDark: "#D9461C",
+    accentLight: "#FFB088",
+    text: "#F5F1EA",
+    textSecondary: "#C9CCD6",
+  },
+  social: {
+    x: "@carrier_llc",
+    instagram: "@carrier.llc",
+    tiktok: "@carrier.llc",
+  },
+} as const;
+
+export default brand;

package/templates/storefront/src/components/Providers.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ClerkProvider } from "@clerk/nextjs";
+import type { ComponentProps } from "react";
+import { ThemeProvider } from "@/components/theme/theme-provider";
+import { clerkAppearance } from "@/components/theme/clerk-appearance";
+
+type ClerkAppearance = ComponentProps<typeof ClerkProvider>["appearance"];
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ClerkProvider appearance={clerkAppearance as ClerkAppearance}>
+      <ThemeProvider>{children}</ThemeProvider>
+    </ClerkProvider>
+  );
+}

package/templates/storefront/src/components/faq/FaqSection.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/vendor/ui/cn";
+
+const FAQS = [
+  {
+    q: "What is an eSIM?",
+    a: "An eSIM (embedded SIM) is a digital SIM that lets you activate a mobile plan without a physical SIM card. You scan a QR code and your device is connected instantly.",
+  },
+  {
+    q: "Which devices are compatible?",
+    a: "Most modern smartphones, tablets, and smartwatches support eSIM — including iPhone XS and later, Samsung Galaxy S21+, Google Pixel 3a+, and many more.",
+  },
+  {
+    q: "How quickly does the eSIM activate?",
+    a: "Activation is immediate after purchase. You will receive a QR code by email within seconds. Scan it in your device settings and you are connected.",
+  },
+  {
+    q: "What happens when my data runs out?",
+    a: "You will receive a notification when you are running low. You can purchase a top-up or a new plan from the dashboard at any time.",
+  },
+  {
+    q: "Can I use my eSIM in multiple countries?",
+    a: "Yes — regional plans cover multiple countries. Check the plan details for the exact coverage area before purchasing.",
+  },
+];
+
+function FaqItem({ q, a }: { q: string; a: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="border-b border-white/10">
+      <button
+        className="flex w-full items-center justify-between py-4 text-left text-white hover:text-[var(--brand-accent)] transition-colors"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span className="font-medium">{q}</span>
+        <span
+          className={cn(
+            "ml-4 shrink-0 text-[var(--brand-accent)] transition-transform",
+            open && "rotate-45",
+          )}
+        >
+          +
+        </span>
+      </button>
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <p className="pb-4 text-sm text-white/60">{a}</p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export function FaqSection() {
+  return (
+    <section className="py-24 bg-[var(--brand-bg)]">
+      <div className="mx-auto max-w-2xl px-4">
+        <h2 className="text-3xl font-bold text-white text-center mb-12">
+          Frequently asked questions
+        </h2>
+        <div>
+          {FAQS.map((faq) => (
+            <FaqItem key={faq.q} q={faq.q} a={faq.a} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront/src/components/footer/StorefrontFooter.tsx

@@ -0,0 +1,61 @@
+import Link from "next/link";
+import { BRAND } from "@/vendor/ui/brand";
+
+const FOOTER_LINKS = {
+  Product: [
+    { label: "Shop eSIMs", href: "/shop" },
+    { label: "Dashboard", href: "/dashboard" },
+    { label: "Help Center", href: "/help" },
+  ],
+  Company: [
+    { label: "Contact", href: "/contact" },
+    { label: "Privacy", href: "/legal/privacy" },
+    { label: "Terms", href: "/legal/terms" },
+    { label: "Acceptable Use", href: "/legal/acceptable-use" },
+  ],
+};
+
+export function StorefrontFooter() {
+  return (
+    <footer className="border-t border-white/10 bg-[var(--brand-bg)]">
+      <div className="mx-auto max-w-6xl px-4 py-12">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-10">
+          <div className="col-span-2">
+            <p className="font-semibold text-white mb-2">{BRAND.name}</p>
+            <p className="text-sm text-white/50 max-w-xs">{BRAND.tagline}</p>
+          </div>
+          {Object.entries(FOOTER_LINKS).map(([section, links]) => (
+            <div key={section}>
+              <p className="text-xs font-semibold uppercase tracking-wider text-white/40 mb-3">
+                {section}
+              </p>
+              <ul className="space-y-2">
+                {links.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      className="text-sm text-white/60 hover:text-white transition-colors"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="border-t border-white/10 pt-6 flex flex-col md:flex-row items-center justify-between gap-2">
+          <p className="text-xs text-white/40">
+            &copy; {new Date().getFullYear()} {BRAND.legalName}. All rights reserved.
+          </p>
+          <a
+            href={`mailto:${BRAND.support.email}`}
+            className="text-xs text-white/40 hover:text-white transition-colors"
+          >
+            {BRAND.support.email}
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/storefront/src/components/landing/HeroSection.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import brand from "@/brand.config";
+
+export function HeroSection() {
+  return (
+    <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[var(--brand-bg)]">
+      {/* Radial glow */}
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background: `radial-gradient(ellipse 80% 60% at 50% 0%, ${brand.colors.accent}22 0%, transparent 70%)`,
+        }}
+      />
+
+      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+        >
+          <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-[var(--brand-accent)]/30 bg-[var(--brand-accent)]/10 px-3 py-1 text-xs font-medium text-[var(--brand-accent)]">
+            Global eSIM connectivity
+          </p>
+          <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6 leading-none">
+            Stay connected,{" "}
+            <span style={{ color: brand.colors.accent }}>everywhere.</span>
+          </h1>
+          <p className="text-lg md:text-xl text-white/60 mb-10 max-w-2xl mx-auto">
+            {brand.tagline} Instant digital SIM activation. No physical cards, no roaming fees.
+          </p>
+          <div className="flex flex-wrap gap-4 justify-center">
+            <Link
+              href="/shop"
+              className="rounded-full bg-[var(--brand-accent)] px-8 py-3 font-semibold text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+            >
+              Browse plans
+            </Link>
+            <Link
+              href="/help"
+              className="rounded-full border border-white/20 px-8 py-3 font-semibold text-white/80 hover:bg-white/5 transition-colors"
+            >
+              How it works
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront/src/components/landing/PlanCard.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/vendor/ui/cn";
+import type { SkuTemplate } from "@/vendor/carrier/types";
+
+interface PlanCardProps {
+  plan: SkuTemplate;
+  onSelect?: (plan: SkuTemplate) => void;
+  featured?: boolean;
+}
+
+export function PlanCard({ plan, onSelect, featured }: PlanCardProps) {
+  return (
+    <motion.div
+      whileHover={{ y: -4 }}
+      className={cn(
+        "relative rounded-2xl border p-6 flex flex-col gap-4 cursor-pointer transition-colors",
+        featured
+          ? "border-[var(--brand-accent)] bg-[var(--brand-accent)]/5"
+          : "border-white/10 bg-white/5 hover:border-white/20",
+      )}
+      onClick={() => onSelect?.(plan)}
+    >
+      {featured && (
+        <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[var(--brand-accent)] px-3 py-0.5 text-xs font-semibold text-white">
+          Most popular
+        </span>
+      )}
+      <div>
+        <p className="font-semibold text-white">{plan.name}</p>
+        <p className="text-sm text-white/50 mt-0.5">{plan.description}</p>
+      </div>
+      <div className="flex items-baseline gap-1">
+        <span className="text-3xl font-bold text-white">
+          €{(plan.price_cents / 100).toFixed(2)}
+        </span>
+        <span className="text-sm text-white/40">one-time</span>
+      </div>
+      <ul className="space-y-1.5 text-sm text-white/70">
+        {plan.features.map((f, i) => (
+          <li key={i} className="flex items-center gap-2">
+            <span className="text-[var(--brand-accent)]">✓</span>
+            {f}
+          </li>
+        ))}
+      </ul>
+      <button
+        className={cn(
+          "mt-auto rounded-full py-2 text-sm font-semibold transition-colors",
+          featured
+            ? "bg-[var(--brand-accent)] text-white hover:bg-[var(--brand-accent-dark)]"
+            : "border border-white/20 text-white hover:bg-white/10",
+        )}
+        onClick={() => onSelect?.(plan)}
+      >
+        Select plan
+      </button>
+    </motion.div>
+  );
+}

package/templates/storefront/src/components/nav/StorefrontNav.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+import { cn } from "@/vendor/ui/cn";
+import brand from "@/brand.config";
+
+const NAV_LINKS = [
+  { label: "Shop", href: "/shop" },
+  { label: "Help", href: "/help" },
+];
+
+export function StorefrontNav() {
+  const pathname = usePathname();
+
+  return (
+    <header className="fixed top-0 inset-x-0 z-50 h-16 border-b border-white/10 bg-[var(--brand-bg)]/80 backdrop-blur-md">
+      <div className="mx-auto max-w-6xl h-full px-4 flex items-center justify-between">
+        <Link href="/" className="flex items-center gap-2 font-semibold text-white">
+          {brand.name}
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-6">
+          {NAV_LINKS.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={cn(
+                "text-sm transition-colors",
+                pathname?.startsWith(link.href)
+                  ? "text-[var(--brand-accent)]"
+                  : "text-white/70 hover:text-white",
+              )}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="flex items-center gap-3">
+          <SignedOut>
+            <Link
+              href="/sign-in"
+              className="text-sm text-white/70 hover:text-white transition-colors"
+            >
+              Sign in
+            </Link>
+            <Link
+              href="/shop"
+              className="rounded-full bg-[var(--brand-accent)] px-4 py-1.5 text-sm font-medium text-white hover:bg-[var(--brand-accent-dark)] transition-colors"
+            >
+              Get eSIM
+            </Link>
+          </SignedOut>
+          <SignedIn>
+            <Link
+              href="/dashboard"
+              className="text-sm text-white/70 hover:text-white transition-colors"
+            >
+              Dashboard
+            </Link>
+            <UserButton afterSignOutUrl="/" />
+          </SignedIn>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/storefront/src/components/theme/clerk-appearance.ts

@@ -0,0 +1,51 @@
+// Inline brand colors — no external package dependency
+const colors = {
+  bg: "#080C16",
+  accent: "#FF6B35",
+  accentDark: "#D9461C",
+  text: "#F5F1EA",
+  textSecondary: "#C9CCD6",
+  surface: "#111827",
+  border: "#1F2937",
+};
+
+// Using a plain object; Clerk accepts this shape via the `appearance` prop.
+// Typed as `object` to avoid importing Clerk's internal Appearance type.
+export const clerkAppearance: object = {
+  variables: {
+    colorPrimary: colors.accent,
+    colorBackground: colors.surface,
+    colorInputBackground: colors.bg,
+    colorText: colors.text,
+    colorTextSecondary: colors.textSecondary,
+    colorInputText: colors.text,
+    colorNeutral: colors.textSecondary,
+    borderRadius: "0.5rem",
+    fontFamily: "var(--font-geist-sans, system-ui, sans-serif)",
+  },
+  elements: {
+    card: {
+      backgroundColor: colors.surface,
+      border: `1px solid ${colors.border}`,
+      boxShadow: "none",
+    },
+    headerTitle: { color: colors.text },
+    headerSubtitle: { color: colors.textSecondary },
+    socialButtonsBlockButton: {
+      backgroundColor: colors.bg,
+      border: `1px solid ${colors.border}`,
+      color: colors.text,
+    },
+    socialButtonsBlockButtonText: { color: colors.text },
+    dividerLine: { backgroundColor: colors.border },
+    dividerText: { color: colors.textSecondary },
+    formFieldLabel: { color: colors.textSecondary },
+    formFieldInput: {
+      backgroundColor: colors.bg,
+      border: `1px solid ${colors.border}`,
+      color: colors.text,
+    },
+    footerActionLink: { color: colors.accent },
+    identityPreviewEditButton: { color: colors.accent },
+  },
+};

package/templates/storefront/src/components/theme/theme-provider.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+
+export type Theme = "light" | "dark";
+export type ThemePreference = Theme | "system";
+
+const STORAGE_KEY = "carrier-theme";
+
+type ThemeContextValue = {
+  theme: Theme;
+  preference: ThemePreference;
+  setPreference: (pref: ThemePreference) => void;
+  toggle: () => void;
+};
+
+const ThemeContext = React.createContext<ThemeContextValue | null>(null);
+
+function systemTheme(): Theme {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function resolve(pref: ThemePreference): Theme {
+  return pref === "system" ? systemTheme() : pref;
+}
+
+function applyToDocument(theme: Theme) {
+  const root = document.documentElement;
+  root.setAttribute("data-theme", theme);
+  root.style.colorScheme = theme;
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [preference, setPreferenceState] = React.useState<ThemePreference>(() => {
+    if (typeof window === "undefined") return "dark";
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY);
+      if (stored === "light" || stored === "dark" || stored === "system") return stored;
+    } catch { /* private mode */ }
+    return "system";
+  });
+
+  const [theme, setTheme] = React.useState<Theme>(() => {
+    if (typeof window === "undefined") return "dark";
+    const attr = document.documentElement.getAttribute("data-theme");
+    if (attr === "light" || attr === "dark") return attr;
+    return resolve(preference);
+  });
+
+  const setPreference = React.useCallback((pref: ThemePreference) => {
+    setPreferenceState(pref);
+    const next = resolve(pref);
+    setTheme(next);
+    applyToDocument(next);
+    try { window.localStorage.setItem(STORAGE_KEY, pref); } catch { /* ignore */ }
+  }, []);
+
+  const toggle = React.useCallback(() => {
+    setPreference(theme === "dark" ? "light" : "dark");
+  }, [theme, setPreference]);
+
+  React.useEffect(() => {
+    if (preference !== "system") return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      const next = mql.matches ? "dark" : "light";
+      setTheme(next);
+      applyToDocument(next);
+    };
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [preference]);
+
+  const value = React.useMemo<ThemeContextValue>(
+    () => ({ theme, preference, setPreference, toggle }),
+    [theme, preference, setPreference, toggle],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = React.useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+  return ctx;
+}

package/templates/storefront/src/components/theme/theme-script.tsx

@@ -0,0 +1,24 @@
+const STORAGE_KEY = "carrier-theme";
+
+const themeScript = `
+(function () {
+  try {
+    var pref = localStorage.getItem("${STORAGE_KEY}");
+    var theme;
+    if (pref === "light" || pref === "dark") {
+      theme = pref;
+    } else {
+      theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    var root = document.documentElement;
+    root.setAttribute("data-theme", theme);
+    root.style.colorScheme = theme;
+  } catch (e) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  }
+})();
+`;
+
+export function ThemeScript() {
+  return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
+}

package/templates/storefront/src/lib/conversion-events.ts

@@ -0,0 +1,36 @@
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gtag?: (...args: any[]) => void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fbq?: (...args: any[]) => void;
+  }
+}
+
+function gtag(event: string, params?: Record<string, unknown>): void {
+  if (typeof window !== "undefined" && typeof window.gtag === "function") {
+    window.gtag("event", event, params ?? {});
+  }
+}
+
+function fbq(event: string, data?: Record<string, unknown>): void {
+  if (typeof window !== "undefined" && typeof window.fbq === "function") {
+    window.fbq("track", event, data ?? {});
+  }
+}
+
+export const conversionEvents = {
+  beginCheckout: (planName: string, value: number, currency = "EUR") => {
+    gtag("begin_checkout", { items: [{ item_name: planName }], value, currency });
+    fbq("InitiateCheckout", { content_name: planName, value, currency });
+  },
+  purchase: (planName: string, value: number, transactionId?: string) => {
+    const id = transactionId ?? crypto.randomUUID();
+    gtag("purchase", { transaction_id: id, value, currency: "EUR", items: [{ item_name: planName }] });
+    fbq("Purchase", { content_name: planName, value, currency: "EUR" });
+  },
+  selectPlan: (planName: string) => {
+    gtag("select_item", { items: [{ item_name: planName }] });
+    fbq("AddToCart", { content_name: planName });
+  },
+};

package/templates/storefront/src/lib/sanitize-auth-redirect.ts

@@ -0,0 +1,16 @@
+const ALLOWED_PATHS = /^\/[a-zA-Z0-9\-._~:/?#[\]@!$&'()*+,;=%]*$/;
+
+export function sanitizeAuthRedirect(
+  rawRedirect: string | null | undefined,
+  fallback = "/dashboard",
+): string {
+  if (!rawRedirect) return fallback;
+  try {
+    // Reject absolute URLs and protocol-relative
+    if (rawRedirect.startsWith("//") || rawRedirect.includes(":")) return fallback;
+    if (!ALLOWED_PATHS.test(rawRedirect)) return fallback;
+    return rawRedirect;
+  } catch {
+    return fallback;
+  }
+}

package/templates/storefront/src/middleware.ts

@@ -0,0 +1,25 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+
+const isPublicRoute = createRouteMatcher([
+  "/",
+  "/shop(.*)",
+  "/legal(.*)",
+  "/contact",
+  "/help",
+  "/sign-in(.*)",
+  "/sign-up(.*)",
+  "/api/health",
+]);
+
+export default clerkMiddleware(async (auth, req) => {
+  if (!isPublicRoute(req)) {
+    await auth.protect();
+  }
+});
+
+export const config = {
+  matcher: [
+    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
+    "/(api|trpc)(.*)",
+  ],
+};