{CLOSING_TIPS.lead}
+- Koki'o is live on Android — iOS lands shortly. + Kokio is live.
Pick a plan that fits how you travel in over 200 countries. Pay @@ -47,13 +46,13 @@ export function AppDownloadCTA() { and secure.
- Get it on Google Play + Try out the App today! - + ); } diff --git a/components/blog/cta-content.ts b/components/blog/cta-content.ts index 7f7a5b8..272514a 100644 --- a/components/blog/cta-content.ts +++ b/components/blog/cta-content.ts @@ -12,7 +12,7 @@ export const CTA_CONTENT = { live: { heading: "Try Kokio", body: "Tap. Authenticate. Connect.", - ctaLabel: "Get the app", + ctaLabel: "Try out the App today!", href: APP_URL, inlineText: "Ready to travel smarter?", inlineLabel: "Try Kokio", diff --git a/components/blog/manifesto-cta.tsx b/components/blog/manifesto-cta.tsx index f075a3d..c82f8cc 100644 --- a/components/blog/manifesto-cta.tsx +++ b/components/blog/manifesto-cta.tsx @@ -21,14 +21,14 @@ export function ManifestoCTA() { />Connectivity is a human right. Privacy is its guardian.
- Koki'o is also a provider, and we say it upfront: don't - trust Koki'o, verify it. This is our position, written out in + Kokio is also a provider, and we say it upfront: don't + trust Kokio, verify it. This is our position, written out in full.
diff --git a/components/global/announcement-banner.tsx b/components/global/announcement-banner.tsx index 959c8b8..cc42d15 100644 --- a/components/global/announcement-banner.tsx +++ b/components/global/announcement-banner.tsx @@ -1,32 +1,52 @@ +"use client"; + import React from "react"; import Image from "next/image"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; import Twitter from "@/assets/icons/twitter-fill.svg"; -import { TWITTER_URL } from "@/config/site"; -import { LAUNCH_NOTICE } from "@/lib/site-copy"; +import { CTA_MODE, TWITTER_URL } from "@/config/site"; +import { LAUNCH_NOTICE, LIVE_NOTICE } from "@/lib/site-copy"; const AnnouncementBanner = () => { + + const pathname = usePathname(); + if (pathname?.startsWith("/live")) return null; + return ( ); diff --git a/components/global/footer.tsx b/components/global/footer.tsx index 0d8ef37..2725565 100644 --- a/components/global/footer.tsx +++ b/components/global/footer.tsx @@ -10,8 +10,8 @@ import Blog from "@/assets/icons/blog.svg"; import Twitter from "@/assets/icons/twitter.svg"; import GitHub from "@/assets/icons/github.svg"; import Docs from "@/assets/icons/docs.svg"; -import { TWITTER_URL } from "@/config/site"; -import { LAUNCH_NOTICE } from "@/lib/site-copy"; +import { CTA_MODE, TWITTER_URL } from "@/config/site"; +import { LAUNCH_NOTICE, LIVE_NOTICE } from "@/lib/site-copy"; import SignUpButton from "@/components/sign-up-button"; export const socialLinks = [ @@ -77,7 +77,7 @@ const Footer = () => {
- {LAUNCH_NOTICE} Follow us on{" "}
+ {CTA_MODE === "live" ? LIVE_NOTICE : LAUNCH_NOTICE} Follow us on{" "}
{
const NavBar = () => {
// /manifesto renders its own nav row inside the shared translucent panel
- // (components/manifesto/manifesto-nav.tsx) instead of this global pill — see #25.
+ // (components/manifesto/manifesto-nav.tsx) instead of this global pill.
const pathname = usePathname();
- if (pathname?.startsWith("/manifesto")) return null;
+ if (pathname?.startsWith("/manifesto") || pathname?.startsWith("/live")) return null;
return (
{HERO.body}
+ Feel free to{" "}
+
+ {HERO.contactLinkText}
+ {" "}
+ for anything.
+ {HERO.guideLead}
+ Add it from Settings > Cellular/Mobile Data > Add eSIM > Use QR Code
+
+ Hands off to Apple's native "Install eSIM" flow on this iPhone.
+
diff --git a/components/live/content.ts b/components/live/content.ts
new file mode 100644
index 0000000..394d356
--- /dev/null
+++ b/components/live/content.ts
@@ -0,0 +1,216 @@
+/**
+ * Voice: manifesto/blog register (plain, confident, privacy-forward).
+ * Every claim here has been checked against released app.
+ *
+ * `**word**` inside strings is bold-parsed by
+
+ );
+}
diff --git a/components/live/flow-context.tsx b/components/live/flow-context.tsx
new file mode 100644
index 0000000..24795b4
--- /dev/null
+++ b/components/live/flow-context.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { createContext, useContext, useState, type ReactNode } from "react";
+import type { Plan } from "@/components/live/mock-data";
+
+type FlowContextValue = {
+ shopScreen: "home" | "shop";
+ setShopScreen: (screen: "home" | "shop") => void;
+ selectedPlan: Plan | null;
+ choosePlan: (plan: Plan) => void;
+ completedOrderId: string | null;
+ completedPlan: Plan | null;
+ completeOrder: (plan: Plan) => void;
+ goTo: (stepId: string) => void;
+};
+
+const FlowContext = createContext{sourceTag}
+
+
+ {children}
+
+ trackDownload("ios")}
+ >
+
+
+ );
+}
+
+function StoreBadgeLinks() {
+ return (
+ <>
+ trackDownload("ios")}
+ >
+
+
+
+
+
+
+ {HERO.title}
+
+
+
+ {HERO.guideHeading}
+
+
+
+ );
+}
diff --git a/components/live/icon-sprite.tsx b/components/live/icon-sprite.tsx
new file mode 100644
index 0000000..1176b62
--- /dev/null
+++ b/components/live/icon-sprite.tsx
@@ -0,0 +1,165 @@
+import type { CSSProperties } from "react";
+
+export function IconSprite() {
+ return (
+
+ );
+}
+
+export function Icon({
+ name,
+ className,
+ style,
+}: {
+ name: string;
+ className?: string;
+ style?: CSSProperties;
+}) {
+ return (
+
+ );
+}
diff --git a/components/live/mock-data.ts b/components/live/mock-data.ts
new file mode 100644
index 0000000..07acc85
--- /dev/null
+++ b/components/live/mock-data.ts
@@ -0,0 +1,163 @@
+/**
+ * Simulated data for the /live guide , illustrative only, no real backend calls.
+ */
+
+export type PlanCategory = "Countries" | "Regions" | "Global" | "Special";
+
+export type Plan = {
+ country: string;
+ flag: string;
+ days: string;
+ gb: string;
+ price: string;
+};
+
+export const PLANS: Record
+ {TABS.map((tab) => {
+ const isWallet = tab.id === "wallet";
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/components/live/rich-text.tsx b/components/live/rich-text.tsx
new file mode 100644
index 0000000..239ab44
--- /dev/null
+++ b/components/live/rich-text.tsx
@@ -0,0 +1,15 @@
+import { Fragment } from "react";
+
+export function RichText({ text }: { text: string }) {
+ const parts = text.split(/(\*\*[^*]+\*\*)/g);
+ return (
+ <>
+ {parts.map((part, i) => {
+ if (part.startsWith("**") && part.endsWith("**")) {
+ return {part.slice(2, -2)};
+ }
+ return
+
+
+
+
+
+
+
+
+
+
+ Authentication Required
+
+
+ {subtext}
+
+
+ {mode !== "returning" ? (
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+ No account recovery without a synced passkey.
+
+
+ Losing the passkey itself means losing access.
+
+
+ {plan.flag}
+
+
+
+
+
+
+ {headerOpen && (
+
+
+
+ {plan.country}
+
+
+
+
+
+
+ )}
+
+ Plan Type
+ Data
+
+
+ Top-Up Options
+ Available
+
+
+ Coverage
+
+ 1 country
+
+ IP Routing
+ N/A
+
+
+
+
+
+
+
+
+
+
+
+ Payment Method
+
+
+ {CHECKOUT_RADIOS.map((r) => {
+ const selected = selectedMethod === r.id;
+ return (
+
+ );
+ })}
+
+
+ Discount
+ handleCouponChange(e.target.value)}
+ style={{
+ width: "100%",
+ background: "var(--app-input-bg)",
+ border: "1px solid transparent",
+ borderRadius: 12,
+ padding: "10px 14px",
+ fontSize: 14,
+ color: "var(--app-text)",
+ fontFamily: "inherit",
+ }}
+ />
+
+ {couponState === "validating" && (
+
+ Validating coupon…
+
+ )}
+ {(couponState === "valid" || couponState === "applied") && (
+
+
+ {priorMode === "existing" && (
+
+ {couponState === "valid" ? (
+ <>
+
+ Balance: $10.00 Kokio
+
+
+
+ ) : (
+ <>
+ Discount applied: -$10.00
+
+
+ )}
+
+ )}
+
+ {topupChecking ? (
+
+ )}
+
+
+
+
+
+
+ Checking top-up compatibility…
+
+ ) : (
+
+
+ )}
+
+ Apply as Top-up
+
+
+ Select an eSIM to top up, or leave unselected to buy a new one
+
+
+ {TOPUP_CANDIDATES.map((r) => {
+ const selected = topupSelected === r.esimId;
+ return (
+
+ );
+ })}
+
+
+ {payStatus}
+
+
+
+ 🇯🇵
+
+
+
+
+
+
+
+
+ Install eSIM
+
+
+
+
+
+
+
+
+
+
+
+
+ {tab === "QR" && (
+
+
+ )}
+
+ {tab === "Direct" && (
+
+ {QR_PATTERN.map((v, i) => (
+
+ ))}
+
+
+
+ )}
+
+ {tab === "Manual" && (
+
+
+
+ )}
+ e.target === e.currentTarget && onClose()}
+ >
+
+ );
+}
+
+/** Renders the order card as a real
+
+
+
+
+
+ Purchase Details
+
+
+
+ {rows.map((row) => (
+
+ ))}
+ {order.paymentMethod && (
+
+
+ Payment Method
+ {order.paymentMethod}
+
+ )}
+ {order.invoiceUrl && (
+
+ Invoice
+ View invoice →
+
+ )}
+ {order.planHistory?.length ? (
+ <>
+
+ Plan History
+
+ {order.planHistory.map((entry) => (
+
+ {entry.planId}
+
+ {entry.validity}d · {new Date(entry.purchaseDate).toLocaleDateString()}
+
+
+ ))}
+
+ ) : null}
+