@pantheon-systems/create-p1-starter-kit 0.13.0 → 0.14.0

package/template/__tests__/published-page-routes.test.ts

@@ -0,0 +1,86 @@
+/**
+ * The render pipeline itself is tested in the SDK (create-published-page.test.tsx).
+ * What matters here is the wiring: that both routes are shims over the factory,
+ * and that the segment config Next.js statically analyzes survives in the files.
+ */
+
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+import { describe, expect, it, vi } from "vitest";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const starterDir = resolve(__dirname, "..");
+
+const factory = vi.hoisted(() => ({
+  Page: () => null,
+  HomePage: () => null,
+  generateMetadata: vi.fn(),
+  generateHomeMetadata: vi.fn(),
+  generateStaticParams: vi.fn(),
+}));
+
+vi.mock("@pantheon-systems/p1-next-sdk/server", () => ({
+  createPublishedPage: vi.fn(() => factory),
+  loadRouteTemplateKeys: vi.fn(),
+}));
+
+// The routes reach these through app/published-pages.tsx. Mocked so this stays
+// a wiring test: importing the real modules drags in the whole datasource graph,
+// which is not installed when the built template's copy of this test runs
+// inside the create-p1-starter-kit package.
+vi.mock("../lib/remote-datasource-fetchers", () => ({
+  REMOTE_DATASOURCE_FETCHERS: [],
+}));
+vi.mock("../lib/page-seo", () => ({ resolvePageMetadata: vi.fn() }));
+
+vi.mock("../app/[...puckPath]/client", () => ({ Client: () => null }));
+vi.mock("../components/puck/welcome-block-render", () => ({
+  WelcomeBlockRender: () => null,
+}));
+
+const routes = {
+  catchAll: "app/[...puckPath]/page.tsx",
+  home: "app/page.tsx",
+} as const;
+
+describe("published page routes are shims over the SDK factory", () => {
+  it("wires the catch-all route to the factory", async () => {
+    const route = await import("../app/[...puckPath]/page");
+    expect(route.default).toBe(factory.Page);
+    expect(route.generateMetadata).toBe(factory.generateMetadata);
+    expect(route.generateStaticParams).toBe(factory.generateStaticParams);
+  });
+
+  it("wires the home route to the factory", async () => {
+    const route = await import("../app/page");
+    expect(route.default).toBe(factory.HomePage);
+    expect(route.generateMetadata).toBe(factory.generateHomeMetadata);
+  });
+
+  // Next.js statically analyzes segment-config exports, so this value cannot be
+  // re-exported through the factory — a computed or forwarded `revalidate` goes
+  // undetected and the route silently loses its revalidation window.
+  it.each(Object.values(routes))(
+    "keeps revalidate a literal export in %s",
+    (file) => {
+      const source = readFileSync(resolve(starterDir, file), "utf-8");
+      expect(source).toMatch(/^export const revalidate = \d+;$/m);
+    },
+  );
+
+  // The pipeline is the SDK's now; a copy growing back here is the regression
+  // this guards against.
+  it.each(Object.values(routes))("leaves no pipeline logic in %s", (file) => {
+    const source = readFileSync(resolve(starterDir, file), "utf-8");
+    for (const symbol of [
+      "loadPublishedPage",
+      "loadRemoteDatasourceContext",
+      "resolveDataTemplates",
+      "isInternalPath",
+      "notFound",
+    ]) {
+      expect(source).not.toContain(symbol);
+    }
+  });
+});

package/template/app/[...puckPath]/page.tsx

@@ -1,130 +1,23 @@
 /**
  * Catch-all route that renders user-facing pages generated by Puck.
+ *
+ * The pipeline lives in the SDK — see createPublishedPage in
+ * app/published-pages.tsx for what this route is made of.
  */
 
-import { cache } from "react";
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import {
-  loadRemoteDatasourceContext,
-  extractReferencedDatasourceIds,
-  resolveDataTemplates,
-  pagePathFromCatchAllSegments,
-} from "@pantheon-systems/puck-css/server";
-import {
-  createCssQueryFetchers,
-  loadPublishedPage,
-  loadRouteTemplateKeys,
-} from "@pantheon-systems/p1-next-sdk/server";
-import { REMOTE_DATASOURCE_FETCHERS } from "../../lib/remote-datasource-fetchers";
-import { ContentUnavailable } from "../../components/content-unavailable";
-import { resolvePageMetadata } from "../../lib/page-seo";
-import { Client } from "./client";
-
-const getCcrQueryFetchers = cache(() => createCssQueryFetchers());
-
-// Document namespaces that live alongside pages but are never routable.
-const INTERNAL_PATH_PREFIXES = ["/_registry", "/_redirects"];
-
-// Lowercased to match the server, which normalizes document paths to lower case
-// before looking them up — so /_Redirects/x resolves the same record as
-// /_redirects/x and must be refused just the same.
-function isInternalPath(path: string): boolean {
-  const normalized = path.toLowerCase();
-  return INTERNAL_PATH_PREFIXES.some(
-    (prefix) => normalized === prefix || normalized.startsWith(`${prefix}/`),
-  );
-}
+import { published } from "../published-pages";
 
 /**
  * Backstop only: publishing calls revalidatePath for the affected routes, so
  * cached pages normally refresh the moment their content changes. This bounds
  * how long an edit made outside that path (a direct API write, a restored
  * branch) can stay stale.
+ *
+ * Must stay a literal here: Next.js statically analyzes segment-config exports,
+ * so a value re-exported from the factory would go undetected.
  */
 export const revalidate = 300;
 
-/**
- * Empty on purpose. Routes are authored in P1, so there is nothing to enumerate
- * at build time — but declaring this is what marks the segment statically
- * renderable at all; without it every path here renders fully dynamically and
- * no response is ever cacheable. Unlisted paths render on first request and are
- * cached from then on (dynamicParams defaults to true).
- */
-export function generateStaticParams(): { puckPath: string[] }[] {
-  return [];
-}
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}): Promise<Metadata> {
-  const { puckPath = [] } = await params;
-  const path = pagePathFromCatchAllSegments(puckPath);
-
-  if (isInternalPath(path)) {
-    return { title: "Not Found" };
-  }
-
-  const result = await loadPublishedPage(path);
-  if (result.status === "missing") return { title: "Not Found" };
-  if (result.status === "unavailable") {
-    return { title: "Temporarily unavailable" };
-  }
-  return resolvePageMetadata({ pageData: result.data, path });
-}
-
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ puckPath: string[] }>;
-}) {
-  const { puckPath = [] } = await params;
-  const path = pagePathFromCatchAllSegments(puckPath);
-
-  if (isInternalPath(path)) {
-    notFound();
-  }
-
-  const result = await loadPublishedPage(path);
-
-  // A real 404, so misses are not cached as successes now that this route is
-  // statically renderable. An outage is deliberately not a 404 — that would
-  // deindex published pages over a transient blip.
-  if (result.status === "missing") {
-    notFound();
-  }
-  if (result.status === "unavailable") {
-    return <ContentUnavailable />;
-  }
-
-  const data = result.data;
-
-  const [routeTemplateKeys, ccrQueryFetchers] = await Promise.all([
-    loadRouteTemplateKeys(),
-    getCcrQueryFetchers(),
-  ]);
-  const builtinFetchers = [...REMOTE_DATASOURCE_FETCHERS, ...ccrQueryFetchers];
-
-  const referencedDatasourceIds = extractReferencedDatasourceIds(data);
-  const context = await loadRemoteDatasourceContext({
-    fetchImpl: fetch,
-    pagePath: path,
-    routeTemplateKeys,
-    builtinFetchers,
-    referencedDatasourceIds,
-  });
-  const resolvedData = await resolveDataTemplates(data, context);
-
-  return (
-    <Client
-      data={resolvedData}
-      pageMetadata={{
-        route: path,
-        documentName: data.root.props?.title as string | undefined,
-        pageType: "page",
-      }}
-    />
-  );
-}
+export const generateStaticParams = published.generateStaticParams;
+export const generateMetadata = published.generateMetadata;
+export default published.Page;

package/template/app/p1/(editor)/[[...p1]]/editor-client.tsx

@@ -31,42 +31,12 @@ import "@pantheon-systems/puck-css/pds/styles.css";
 
 import { ChatbotFlagProvider } from "../../../../components/ChatbotFlagProvider";
 import { P1Lockup } from "../../../../components/p1-lockup";
+import styles from "../../../../components/welcome-block.module.css";
 import config from "../../../../puck.config";
 import { shouldShowChatbot, CHATBOT_FLAG_KEY } from "../../../../lib/chatbot-flag/feature-gate";
 import { createGenerateWithAIHandler } from "../../../../lib/chatbot-flag/ai-generate";
 import { getDraftRequestChannel } from "../../../../lib/chatbot-flag/draft-request-channel";
 
-const DEFAULT_PAGE_DATA = {
-  root: { props: { title: "New page" } },
-  content: [],
-  zones: {},
-};
-
-const DEFAULT_ROOT_PAGE_DATA = {
-  root: { props: { title: "Welcome | P1 site" } },
-  content: [
-    {
-      type: "P1WelcomeBlock",
-      props: {
-        id: "seed-welcome",
-        heading: "Welcome to your new Pantheon P1 Site.",
-        description: "You just created this new site from Pantheon P1 starter kit, congrats! You'll need a Pantheon P1 user account to edit it and create new pages.",
-        ctaLabel: "Sign-in to P1",
-        ctaHref: "/p1",
-        footnote: "Visit [P1 documentation](https://docs.pantheon.io) for more information.",
-        loggedInHeading: "Welcome to your new Pantheon P1 Site.",
-        loggedInDescription: "You just created this new site from Pantheon P1 starter kit, congrats! Start editing this page or visit the P1 dashboard to manage your site.",
-        loggedInCtaLabel: "Edit this page with P1 Visual Editor",
-        loggedInCtaHref: "/p1",
-        loggedInSecondaryLabel: "Go to P1 Dashboard",
-        loggedInFootnote: "Visit [P1 documentation](https://docs.pantheon.io) for more information.",
-        showLogo: true,
-      },
-    },
-  ],
-  zones: {},
-};
-
 let p1Config: ReturnType<typeof createNextConfig> | null = null;
 let p1ConfigError: string | null = null;
 
@@ -84,33 +54,31 @@ function P1SignInPage() {
   const { login, isLoading, error } = useP1Auth();
 
   return (
-    <div className="w-full max-w-[620px] mx-auto flex flex-col items-center text-center px-8 py-16 font-['Inter',system-ui,sans-serif] text-[#1a1a2e] min-h-screen justify-center">
-      <P1Lockup />
+    <div className={styles.surface}>
+      <div className={styles.inner}>
+        <P1Lockup />
 
-      <h1 className="text-[2.5rem] leading-[1.08] font-semibold m-0 mb-3" style={{ fontSize: '2.5rem' }}>
-        Your Collaborative Website Management Workspace.
-      </h1>
-      <p className="text-base leading-6 text-[#5a5a6e] max-w-[54ch] m-0">
-        Log in to your Pantheon P1 account to edit your P1 powered website.
-        If you don&apos;t have yet a Pantheon P1 account, contact us{" "}
-        <a href="https://pantheon.io/contact-us" className="text-blue-600 underline">here</a>.
-      </p>
+        <h1 className={styles.heading}>
+          Your Collaborative Website Management Workspace.
+        </h1>
+        <p className={styles.description}>
+          Log in to your Pantheon P1 account to edit your P1 powered website.
+          If you don&apos;t have yet a Pantheon P1 account, contact us{" "}
+          <a href="https://pantheon.io/contact-us" className={styles.link}>here</a>.
+        </p>
 
-      <div className="flex gap-3 mt-8 justify-center">
-        <button
-          className="inline-flex items-center justify-center h-12 px-6 gap-2 rounded-full border border-[#1a1a2e] bg-[#1a1a2e] text-white font-['Inter',system-ui,sans-serif] text-lg font-medium leading-none whitespace-nowrap cursor-pointer transition-colors duration-200 hover:bg-[#2d2d44] hover:border-[#2d2d44] focus-visible:outline focus-visible:outline-1 focus-visible:outline-blue-600 focus-visible:outline-offset-1 disabled:opacity-40 disabled:cursor-not-allowed"
-          onClick={() => void login()}
-          disabled={isLoading}
-        >
-          {isLoading ? "Signing in..." : "Continue"}
-        </button>
-      </div>
+        <div className={styles.actions}>
+          <button
+            className={styles.button}
+            onClick={() => void login()}
+            disabled={isLoading}
+          >
+            {isLoading ? "Signing in..." : "Continue"}
+          </button>
+        </div>
 
-      {error && (
-        <p className="mt-4 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-md">
-          {error}
-        </p>
-      )}
+        {error && <p className={styles.error}>{error}</p>}
+      </div>
     </div>
   );
 }
@@ -208,7 +176,6 @@ function RoleSwitcher({
 
 function EditorContent({ path }: { path: string }) {
   const router = useRouter();
-  const { getToken } = useP1Auth();
   const { data: editorCtx } = useEditorContext(path);
   const {
     context: remoteDatasourceContext,
@@ -258,27 +225,10 @@ function EditorContent({ path }: { path: string }) {
     [router],
   );
 
-  const handleDocumentNotFound = useCallback(
-    async (docPath: string, _error: Error) => {
-      const initialData = docPath === "/" ? DEFAULT_ROOT_PAGE_DATA : DEFAULT_PAGE_DATA;
-      const token = await getToken();
-      const headers: Record<string, string> = { "Content-Type": "application/json" };
-      if (token) headers["Authorization"] = `Bearer ${token}`;
-      const res = await fetch("/p1/api/structure/page", {
-        method: "POST",
-        headers,
-        body: JSON.stringify({ path: docPath, initialData }),
-      });
-      return res.ok;
-    },
-    [getToken],
-  );
-
   const { loading, reloading, hasContent, error, puckKey, puckProps } = useP1Editor({
     documentPath: path,
     puckConfig: editorConfig,
     additionalPlugins,
-    onDocumentNotFound: handleDocumentNotFound,
     pluginOptions: {
       onDocumentSelect: handleDocumentSelect,
       onGenerateWithAI: createGenerateWithAIHandler(draftRequests, chatbotEnabled),

package/template/app/page.tsx

@@ -1,77 +1,19 @@
-import {
-  resolveDataTemplates,
-  extractReferencedDatasourceIds,
-  loadRemoteDatasourceContext,
-} from "@pantheon-systems/puck-css/server";
-import {
-  loadPublishedPage,
-  loadRouteTemplateKeys,
-} from "@pantheon-systems/p1-next-sdk/server";
-import type { Metadata } from "next";
-import { WelcomeBlockRender } from "../components/puck/welcome-block-render";
-import { resolvePageMetadata } from "../lib/page-seo";
-import { REMOTE_DATASOURCE_FETCHERS } from "../lib/remote-datasource-fetchers";
-import { Client } from "./[...puckPath]/client";
+/**
+ * Home route. The pipeline lives in the SDK — see createPublishedPage in
+ * app/published-pages.tsx for what this route is made of.
+ */
+
+import { published } from "./published-pages";
 
 /**
  * Backstop only: publishing calls revalidatePath("/"), so the home page
  * normally refreshes the moment its content changes. This bounds how long an
  * edit made outside that path can stay stale.
+ *
+ * Must stay a literal here: Next.js statically analyzes segment-config exports,
+ * so a value re-exported from the factory would go undetected.
  */
 export const revalidate = 300;
 
-export async function generateMetadata(): Promise<Metadata> {
-  const result = await loadPublishedPage("/");
-  if (result.status !== "ok") {
-    return { title: "P1 Starter Kit" };
-  }
-  return resolvePageMetadata({ pageData: result.data, path: "/" });
-}
-
-export default async function HomePage() {
-  const result = await loadPublishedPage("/");
-
-  // Unlike the catch-all, "/" never 404s: it is a single fixed URL rather than
-  // an unbounded crawler surface, and the welcome block is the correct state for
-  // a freshly scaffolded site — including one with no backend configured yet.
-  if (result.status === "ok") {
-    const data = result.data;
-    const routeTemplateKeys = await loadRouteTemplateKeys();
-    const referencedDatasourceIds = extractReferencedDatasourceIds(data);
-    const context = await loadRemoteDatasourceContext({
-      fetchImpl: fetch,
-      pagePath: "/",
-      routeTemplateKeys,
-      builtinFetchers: REMOTE_DATASOURCE_FETCHERS,
-      referencedDatasourceIds,
-    });
-    const resolvedData = await resolveDataTemplates(data, context);
-    return (
-      <Client
-        data={resolvedData}
-        pageMetadata={{
-          route: "/",
-          documentName: data.root.props?.title as string | undefined,
-          pageType: "page",
-        }}
-      />
-    );
-  }
-
-  return (
-    <WelcomeBlockRender
-      heading="Welcome to your new Pantheon P1 Site."
-      description="You just created this new site from Pantheon P1 starter kit, congrats! You'll need a Pantheon P1 user account to edit it and create new pages."
-      ctaLabel="Sign-in to P1"
-      ctaHref="/p1"
-      footnote="Visit [P1 documentation](https://docs.pantheon.io) for more information."
-      loggedInHeading="Welcome to your new Pantheon P1 Site."
-      loggedInDescription="You just created this new site from Pantheon P1 starter kit, congrats! Start editing this page or visit the P1 dashboard to manage your site."
-      loggedInCtaLabel="Edit this page with P1 Visual Editor"
-      loggedInCtaHref="/p1"
-      loggedInSecondaryLabel="Go to P1 Dashboard"
-      loggedInFootnote="Visit [P1 documentation](https://docs.pantheon.io) for more information."
-      showLogo={true}
-    />
-  );
-}
+export const generateMetadata = published.generateHomeMetadata;
+export default published.HomePage;

package/template/app/published-pages.tsx

@@ -0,0 +1,23 @@
+/**
+ * The app's published-page routes, built once and shared by both route files.
+ *
+ * One instance on purpose: the factory memoizes per-request work (the CCR query
+ * fetchers), and "/" and the catch-all should share that rather than each
+ * building their own.
+ */
+
+import { createPublishedPage } from "@pantheon-systems/p1-next-sdk/server";
+import { REMOTE_DATASOURCE_FETCHERS } from "../lib/remote-datasource-fetchers";
+import { ContentUnavailable } from "../components/content-unavailable";
+import { resolvePageMetadata } from "../lib/page-seo";
+import { Client } from "./[...puckPath]/client";
+import { WelcomeBlock } from "./welcome-block";
+
+export const published = createPublishedPage({
+  Client,
+  Unavailable: ContentUnavailable,
+  Fallback: WelcomeBlock,
+  fetchers: REMOTE_DATASOURCE_FETCHERS,
+  resolveMetadata: resolvePageMetadata,
+  titles: { home: "P1 Starter Kit" },
+});

package/template/app/welcome-block.tsx

@@ -0,0 +1,25 @@
+/**
+ * The home page's state before any content exists — a freshly scaffolded site,
+ * or one with no backend configured yet.
+ */
+
+import { WelcomeBlockRender } from "../components/puck/welcome-block-render";
+
+export function WelcomeBlock() {
+  return (
+    <WelcomeBlockRender
+      heading="Welcome to your new Pantheon P1 Site."
+      description="You just created this new site from Pantheon P1 starter kit, congrats! You'll need a Pantheon P1 user account to edit it and create new pages."
+      ctaLabel="Sign-in to P1"
+      ctaHref="/p1"
+      footnote="Visit [P1 documentation](https://docs.pantheon.io) for more information."
+      loggedInHeading="Welcome to your new Pantheon P1 Site."
+      loggedInDescription="You just created this new site from Pantheon P1 starter kit, congrats! Start editing this page or visit the P1 dashboard to manage your site."
+      loggedInCtaLabel="Edit this page with P1 Visual Editor"
+      loggedInCtaHref="/p1"
+      loggedInSecondaryLabel="Go to P1 Dashboard"
+      loggedInFootnote="Visit [P1 documentation](https://docs.pantheon.io) for more information."
+      showLogo={true}
+    />
+  );
+}

package/template/components/ChatbotFlagProvider.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import { LDProvider } from "launchdarkly-react-client-sdk";
 import { useP1Auth } from "@pantheon-systems/puck-css";
 
+import { buildFlagContext } from "../lib/chatbot-flag/flag-context";
+
 /**
  * Wraps the editor with a LaunchDarkly client-side provider so the `p1-chatbot`
  * flag can be evaluated at runtime. The client-side ID is public by design.
@@ -28,14 +30,7 @@ export function ChatbotFlagProvider({
   // re-identify on context change. This provider mounts inside <P1App> (after
   // auth), so the authenticated user is available here; the anonymous fallback
   // only applies if it ever renders pre-auth.
-  //
-  // Key on the always-present, stable user id — email is optional on AuthUser, so
-  // keying on it would silently drop emailless users into the anonymous branch and
-  // lose per-user rollout stickiness. (LaunchDarkly also favors a non-PII key.)
-  // Email is kept as a targeting attribute.
-  const context = user
-    ? { kind: "user" as const, key: user.id, email: user.email }
-    : { kind: "user" as const, key: "anonymous", anonymous: true };
+  const context = buildFlagContext(user);
 
   return (
     <LDProvider

package/template/components/p1-lockup.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { P1_ASSETS } from "../constants/assets";
+import styles from "./welcome-block.module.css";
 
 export function P1Lockup() {
   return (
     <img
       src={P1_ASSETS.LOGO_URL}
       alt="Pantheon P1"
-      className="h-7 w-auto block mb-6"
+      className={styles.lockup}
     />
   );
 }

package/template/components/puck/image-block.tsx

@@ -16,8 +16,11 @@ export const imageBlock = {
     },
   },
   defaultProps: {
-    src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80",
-    alt: "Mountain landscape",
+    // Placeholder art inline as a data URI, so a fresh block loads nothing off
+    // the network. Authors replace it with their own image.
+    src:
+      "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22675%22%20viewBox%3D%220%200%201200%20675%22%3E%3Crect%20width%3D%221200%22%20height%3D%22675%22%20fill%3D%22%23f1f1f3%22%2F%3E%3Cpath%20d%3D%22M0%20675L1200%200%22%20stroke%3D%22%23c8c8ce%22%20stroke-width%3D%2284%22%2F%3E%3C%2Fsvg%3E",
+    alt: "",
     caption: "",
     loading: "lazy",
   },

package/template/components/puck/welcome-block-render.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { P1Lockup } from "../p1-lockup";
+import styles from "../welcome-block.module.css";
 
 export interface WelcomeBlockRenderProps {
   heading?: string;
@@ -30,12 +31,6 @@ const LOGGED_IN_DEFAULTS = {
     "Visit [P1 documentation](https://docs.pantheon.io) for more information.",
 };
 
-const BTN_PRIMARY =
-  "inline-flex items-center justify-center h-12 px-6 gap-2 rounded-full border border-[#1a1a2e] bg-[#1a1a2e] text-white font-['Inter',system-ui,sans-serif] text-lg font-medium leading-none whitespace-nowrap cursor-pointer transition-colors duration-200 hover:bg-[#2d2d44] hover:border-[#2d2d44] focus-visible:outline focus-visible:outline-1 focus-visible:outline-blue-600 focus-visible:outline-offset-1 disabled:opacity-40 disabled:cursor-not-allowed";
-
-const BTN_SECONDARY =
-  "inline-flex items-center justify-center h-12 px-6 gap-2 rounded-full border border-[#d0d0d8] bg-transparent text-[#1a1a2e] font-['Inter',system-ui,sans-serif] text-lg font-medium leading-none whitespace-nowrap cursor-pointer transition-colors duration-200 hover:bg-[rgba(26,26,46,0.06)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-blue-600 focus-visible:outline-offset-1";
-
 export function WelcomeBlockRender(props: WelcomeBlockRenderProps) {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
@@ -64,47 +59,45 @@ export function WelcomeBlockRender(props: WelcomeBlockRenderProps) {
 
   const footnoteHtml = (activeFootnote ?? "").replace(
     /\[([^\]]+)\]\(([^)]+)\)/g,
-    '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">$1</a>',
+    `<a href="$2" target="_blank" rel="noopener noreferrer" class="${styles.link}">$1</a>`,
   );
 
   return (
-    <div className="w-full max-w-[620px] mx-auto flex flex-col items-center text-center px-8 py-16 font-['Inter',system-ui,sans-serif] text-[#1a1a2e] min-h-screen justify-center">
-      {props.showLogo !== false && <P1Lockup />}
-      <h1 className="text-[2.5rem] leading-[1.08] font-semibold m-0 mb-4">
-        {activeHeading}
-      </h1>
-      <p className="text-base leading-6 text-[#5a5a6e] max-w-[54ch] m-0">
-        {activeDescription}
-      </p>
-      <div className="flex gap-3 mt-8 justify-center">
-        <button
-          className={BTN_PRIMARY}
-          onClick={() => {
-            if (!isLoggedIn) {
-              localStorage.setItem("p1_return_to", window.location.pathname);
-            }
-            window.location.href = activeCtaHref || "/";
-          }}
-        >
-          {activeCtaLabel}
-        </button>
-        {secondaryLabel && (
+    <div className={styles.surface}>
+      <div className={styles.inner}>
+        {props.showLogo !== false && <P1Lockup />}
+        <h1 className={styles.heading}>{activeHeading}</h1>
+        <p className={styles.description}>{activeDescription}</p>
+        <div className={styles.actions}>
           <button
-            className={BTN_SECONDARY}
+            className={styles.button}
             onClick={() => {
-              window.open(LOGGED_IN_DEFAULTS.secondaryHref, "_blank", "noopener,noreferrer");
+              if (!isLoggedIn) {
+                localStorage.setItem("p1_return_to", window.location.pathname);
+              }
+              window.location.href = activeCtaHref || "/";
             }}
           >
-            {secondaryLabel}
+            {activeCtaLabel}
           </button>
+          {secondaryLabel && (
+            <button
+              className={`${styles.button} ${styles.buttonSecondary}`}
+              onClick={() => {
+                window.open(LOGGED_IN_DEFAULTS.secondaryHref, "_blank", "noopener,noreferrer");
+              }}
+            >
+              {secondaryLabel}
+            </button>
+          )}
+        </div>
+        {activeFootnote && (
+          <p
+            className={styles.footnote}
+            dangerouslySetInnerHTML={{ __html: footnoteHtml }}
+          />
         )}
       </div>
-      {activeFootnote && (
-        <p
-          className="mt-12 text-sm text-[#5a5a6e]"
-          dangerouslySetInnerHTML={{ __html: footnoteHtml }}
-        />
-      )}
     </div>
   );
 }