npm - @cimplify/cli - Versions diffs - 0.2.0 - Mend

@cimplify/cli 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (457) hide show

package/templates/storefront-fashion/app/layout.tsx ADDED Viewed

@@ -0,0 +1,78 @@
+import type { Metadata } from "next";
+import { Inter, Anton } from "next/font/google";
+import "./globals.css";
+import { Providers } from "@/components/providers";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import { CartDrawer } from "@/components/cart-drawer";
+import { brand } from "@/lib/brand";
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+});
+const anton = Anton({
+  subsets: ["latin"],
+  variable: "--font-display",
+  weight: "400",
+  display: "swap",
+});
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: brand.name,
+    template: `%s — ${brand.name}`,
+  },
+  description: brand.description,
+  openGraph: {
+    type: "website",
+    siteName: brand.name,
+    locale: brand.locale,
+  },
+  twitter: { card: "summary_large_image" },
+};
+const ORGANIZATION_LD = {
+  "@context": "https://schema.org",
+  "@type": brand.schemaType,
+  name: brand.name,
+  url: SITE_URL,
+  description: brand.description,
+  email: brand.contact.email,
+  telephone: brand.contact.phoneTel,
+  address: {
+    "@type": "PostalAddress",
+    streetAddress: brand.contact.streetAddress,
+    addressLocality: brand.contact.city,
+    addressCountry: brand.contact.countryCode,
+  },
+  sameAs: brand.socials.map((s) => s.href),
+};
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${anton.variable}`}>
+      <body
+        suppressHydrationWarning
+        className="min-h-screen flex flex-col bg-background text-foreground font-sans"
+      >
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(ORGANIZATION_LD) }}
+        />
+        <Providers>
+          <Header />
+          <main className="flex-1 pb-12 w-full">{children}</main>
+          <Footer />
+          <CartDrawer />
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/templates/storefront-fashion/app/llms.txt/route.ts ADDED Viewed

@@ -0,0 +1,94 @@
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { brand } from "@/lib/brand";
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+async function buildLlmsTxt(): Promise<string> {
+  "use cache";
+  cacheTag(tags.products(), tags.categories(), tags.collections());
+  cacheLife("hours");
+  const client = getServerClient();
+  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+  const products: Product[] = productsRes.ok ? productsRes.value.items : [];
+  const categories = categoriesRes.ok ? categoriesRes.value : [];
+  const collections = collectionsRes.ok ? collectionsRes.value : [];
+  const lines: string[] = [];
+  lines.push(`# ${brand.name}`);
+  lines.push("");
+  lines.push(`> ${brand.llms.summary}`);
+  lines.push("");
+  lines.push("## Browse");
+  lines.push(`- [Home](${SITE_URL}/)`);
+  lines.push(`- [Shop](${SITE_URL}/shop): Full catalogue with filter and sort.`);
+  if (categories.length > 0) {
+    lines.push("");
+    lines.push("## Categories");
+    for (const c of categories) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/categories/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+  if (collections.length > 0) {
+    lines.push("");
+    lines.push("## Collections");
+    for (const c of collections) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/collections/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+  if (products.length > 0) {
+    lines.push("");
+    lines.push("## Products");
+    for (const p of products) {
+      const slug = p.slug ?? p.id;
+      const price = `${brand.currency} ${p.default_price}`;
+      const desc = p.description ? ` — ${p.description.replace(/\s+/g, " ").slice(0, 200)}` : "";
+      lines.push(`- [${p.name}](${SITE_URL}/products/${slug}) (${price})${desc}`);
+    }
+  }
+  lines.push("");
+  lines.push("## Information");
+  lines.push(`- [About](${SITE_URL}/about)`);
+  lines.push(`- [Support / FAQ](${SITE_URL}/faq)`);
+  lines.push(`- [Terms of Service](${SITE_URL}/terms)`);
+  lines.push(`- [Privacy Policy](${SITE_URL}/privacy)`);
+  lines.push(`- [Sitemap (XML)](${SITE_URL}/sitemap.xml)`);
+  lines.push("");
+  lines.push("## Contact");
+  lines.push(`- Email: ${brand.contact.email}`);
+  lines.push(`- Phone: ${brand.contact.phone}`);
+  lines.push(`- Address: ${brand.contact.address}`);
+  return lines.join("\n") + "\n";
+}
+/**
+ * `/llms.txt` — machine-readable site index for LLMs (per llmstxt.org).
+ * Lets coding agents and chat assistants find products, categories, and
+ * support pages without scraping HTML. Plain Markdown so it streams cheaply
+ * into context windows.
+ */
+export async function GET(): Promise<Response> {
+  const body = await buildLlmsTxt();
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=86400",
+    },
+  });
+}

package/templates/storefront-fashion/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Sign in — ${brand.name}`,
+  description: brand.account.loginSubtitle,
+};
+/**
+ * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
+ * automatically when no session exists. We just bounce /login to /account
+ * so consumers landing here get the right UI without a duplicate form.
+ */
+export default function LoginPage(): never {
+  redirect("/account");
+}

package/templates/storefront-fashion/app/lookbook/page.tsx ADDED Viewed

@@ -0,0 +1,132 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Lookbook — ${brand.name}`,
+  description: "Editorial photography from each Studio FRX drop.",
+};
+interface LookbookEntry {
+  drop: string;
+  title: string;
+  hero: string;
+  tiles: string[];
+  byline: string;
+  date: string;
+}
+// Each entry is a drop; tiles are the editorial shots. Replace the URLs
+// with your own asset bucket / CDN before going live.
+const ENTRIES: LookbookEntry[] = [
+  {
+    drop: "Drop 04",
+    title: "Built for now.",
+    date: "Spring 2026",
+    byline: "Photographed by Selasi Adjei in Jamestown, Accra.",
+    hero: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1800&h=1100&fit=crop&auto=format&q=85",
+    tiles: [
+      "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1485518882345-15568b007407?w=900&h=1200&fit=crop&auto=format&q=85",
+    ],
+  },
+  {
+    drop: "Drop 03",
+    title: "Heavyweight, hand-screened.",
+    date: "Winter 2025",
+    byline: "Shot at the Tema dye works.",
+    hero: "https://images.unsplash.com/photo-1467043153537-a4fba2cd39ef?w=1800&h=1100&fit=crop&auto=format&q=85",
+    tiles: [
+      "https://images.unsplash.com/photo-1576566588028-4147f3842f27?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1542838686-37da4a9fd1b3?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&h=1200&fit=crop&auto=format&q=85",
+    ],
+  },
+  {
+    drop: "Drop 02",
+    title: "From the studio floor.",
+    date: "Autumn 2025",
+    byline: "Studio days, Osu.",
+    hero: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=1800&h=1100&fit=crop&auto=format&q=85",
+    tiles: [
+      "https://images.unsplash.com/photo-1512436991641-6745cdb1723f?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?w=900&h=1200&fit=crop&auto=format&q=85",
+    ],
+  },
+];
+export default function LookbookPage() {
+  return (
+    <article>
+      <section className="border-b border-border">
+        <div className="max-w-7xl mx-auto px-6 sm:px-10 py-14">
+          <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-primary mb-3">
+            Lookbook
+          </p>
+          <h1 className="font-display text-[clamp(3rem,9vw,7rem)] uppercase mb-4 -tracking-[0.04em] leading-[0.92]">
+            The drops, in full.
+          </h1>
+          <p className="text-base text-muted-foreground max-w-2xl leading-relaxed">
+            Each drop is photographed in the room it's built in. Editorials below;
+            full collection in the shop.
+          </p>
+        </div>
+      </section>
+      {ENTRIES.map((entry, i) => (
+        <section key={entry.drop} className="border-b border-border">
+          <div className="max-w-7xl mx-auto px-6 sm:px-10 py-16">
+            <div className="flex items-end justify-between gap-6 mb-8">
+              <div>
+                <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-muted-foreground mb-2">
+                  {entry.drop} · {entry.date}
+                </p>
+                <h2 className="font-display text-[clamp(2rem,5vw,3.5rem)] uppercase m-0 -tracking-[0.04em] leading-[0.95]">
+                  {entry.title}
+                </h2>
+                <p className="text-sm text-muted-foreground mt-2">{entry.byline}</p>
+              </div>
+              <Link
+                href="/shop"
+                className="hidden sm:inline-flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-foreground hover:text-primary transition-colors whitespace-nowrap"
+              >
+                Shop {entry.drop} →
+              </Link>
+            </div>
+            <div className="relative w-full aspect-[16/9] rounded-2xl overflow-hidden bg-muted mb-3">
+              <Image
+                src={entry.hero}
+                alt={`${entry.drop} hero — ${entry.title}`}
+                fill
+                sizes="(min-width: 1280px) 1280px, 100vw"
+                className="object-cover"
+                priority={i === 0}
+              />
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+              {entry.tiles.map((src, ti) => (
+                <div
+                  key={src}
+                  className="relative aspect-[3/4] rounded-2xl overflow-hidden bg-muted"
+                >
+                  <Image
+                    src={src}
+                    alt={`${entry.drop} editorial ${ti + 1}`}
+                    fill
+                    sizes="(min-width: 768px) 33vw, 100vw"
+                    className="object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      ))}
+    </article>
+  );
+}

package/templates/storefront-fashion/app/not-found.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Page not found — ${brand.name}`,
+  description: "We couldn't find that page.",
+};
+export default function NotFound() {
+  return (
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-3">
+        404
+      </p>
+      <h1 className="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-4 -tracking-[0.03em]">
+        Page not found.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">
+        The URL you followed might be old, a typo, or pointing at a product
+        that&apos;s no longer in stock. Try the menu or head back home.
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Link
+          href="/shop"
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+        >
+          Browse the shop
+        </Link>
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-border hover:bg-muted transition-colors text-sm font-medium"
+        >
+          Back home
+        </Link>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-fashion/app/opensearch.xml/route.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { brand } from "@/lib/brand";
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+/**
+ * OpenSearch description document — lets browsers add this site to the
+ * address bar's search engine list. When users press Tab after typing the
+ * domain, they get an inline search box that hits /search?q=...
+ */
+export async function GET(): Promise<Response> {
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+  <ShortName>${escapeXml(brand.shortName)}</ShortName>
+  <Description>Search ${escapeXml(brand.name)}</Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <Url type="text/html" method="get" template="${SITE_URL}/search?q={searchTerms}" />
+  <Url type="application/opensearchdescription+xml" rel="self" template="${SITE_URL}/opensearch.xml" />
+  <moz:SearchForm>${SITE_URL}/search</moz:SearchForm>
+</OpenSearchDescription>
+`;
+  return new Response(xml, {
+    headers: {
+      "Content-Type": "application/opensearchdescription+xml; charset=utf-8",
+      "Cache-Control": "public, max-age=86400",
+    },
+  });
+}
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}

package/templates/storefront-fashion/app/orders/[id]/page.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import Link from "next/link";
+export default async function OrderPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return (
+    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+      <h1 className="text-3xl mt-0 mb-3 font-bold -tracking-[0.025em]">
+        Order confirmed.
+      </h1>
+      <p className="text-muted-foreground">
+        Order <code className="font-mono text-foreground">{id}</code> — you&apos;ll
+        get an SMS with tracking within 30 minutes.
+      </p>
+      <p className="mt-6">
+        <Link
+          href="/"
+          className="inline-block px-6 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm transition-colors hover:bg-primary/90"
+        >
+          Continue shopping
+        </Link>
+      </p>
+    </section>
+  );
+}

package/templates/storefront-fashion/app/page.tsx ADDED Viewed

@@ -0,0 +1,183 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Collection, type Product } from "@cimplify/sdk/server";
+import { FeatureHero } from "@/components/feature-hero";
+import { CategoryTiles } from "@/components/category-tiles";
+import { CollectionStrip } from "@/components/collection-strip";
+import { PromoBanner } from "@/components/promo-banner";
+import { TrustBar } from "@/components/trust-bar";
+import { BrandMarquee } from "@/components/brand-marquee";
+import { TradeInCta } from "@/components/trade-in-cta";
+import { Newsletter } from "@/components/newsletter";
+import { SectionHeading } from "@/components/section-heading";
+import { StoreProductCard } from "@/components/store-product-card";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: brand.hero.title,
+  description: brand.description,
+};
+interface CollectionWithProducts {
+  collection: Collection;
+  products: Product[];
+}
+async function getHomeData() {
+  "use cache";
+  cacheTag(tags.collections(), tags.categories(), tags.products());
+  cacheLife("hours");
+  const client = getServerClient();
+  const [colRes, catRes, productsRes] = await Promise.all([
+    client.catalogue.getCollections(),
+    client.catalogue.getCategories(),
+    client.catalogue.getProducts({ limit: 12 }),
+  ]);
+  const collections = colRes.ok ? colRes.value : [];
+  const categories = catRes.ok ? catRes.value : [];
+  const allProducts = productsRes.ok ? productsRes.value.items : [];
+  const collectionsWithProducts: CollectionWithProducts[] = await Promise.all(
+    collections.map(async (col) => {
+      const r = await client.catalogue.getCollectionProducts(col.id);
+      const items = r.ok
+        ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+        : [];
+      return { collection: col, products: items };
+    }),
+  );
+  return {
+    collections: collectionsWithProducts.filter((x) => x.products.length > 0),
+    categories,
+    featured: allProducts.slice(0, 4),
+    newArrivals: allProducts.slice(4, 12),
+  };
+}
+// Verified-reachable Unsplash fashion editorial — replace with your own asset.
+const HERO_FALLBACK_IMAGE =
+  "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=2000&h=1400&fit=crop&auto=format&q=85";
+export default async function HomePage() {
+  const { collections, categories, featured, newArrivals } = await getHomeData();
+  const heroProduct = featured[0];
+  return (
+    <>
+      <FeatureHero
+        eyebrow="Featured · in stock"
+        badge="Just landed"
+        title={brand.hero.title}
+        description={heroProduct?.description ?? brand.hero.subtitle}
+        primaryCta={{
+          label: heroProduct ? `Shop ${heroProduct.name}` : brand.hero.primaryCtaLabel,
+          href: heroProduct ? `/products/${heroProduct.slug ?? heroProduct.id}` : "/shop",
+        }}
+        secondaryCta={
+          brand.hero.secondaryCtaLabel && brand.hero.secondaryCtaHref
+            ? { label: brand.hero.secondaryCtaLabel, href: brand.hero.secondaryCtaHref }
+            : undefined
+        }
+        imageUrl={heroProduct?.image_url ?? heroProduct?.images?.[0] ?? HERO_FALLBACK_IMAGE}
+        imageAlt={heroProduct?.name ?? "Featured product"}
+      />
+      <TrustBar />
+      <Suspense fallback={<CategoryTilesSkeleton />}>
+        <CategoryTiles categories={categories} />
+      </Suspense>
+      <PromoBanner />
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+        <SectionHeading
+          eyebrow="Just dropped"
+          title="New this week."
+          description="Hand-picked launches and freshly restocked staples."
+          link={{ label: "Browse all", href: "/shop" }}
+        />
+        <Suspense fallback={<GridSkeleton count={4} />}>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+            {newArrivals.slice(0, 4).map((p) => (
+              <StoreProductCard key={p.id} product={p} />
+            ))}
+          </div>
+        </Suspense>
+      </section>
+      <BrandMarquee />
+      {collections.map(({ collection, products }) => (
+        <Suspense
+          key={collection.id}
+          fallback={<StripSkeleton title={collection.name} />}
+        >
+          <CollectionStrip
+            collection={collection}
+            products={products}
+            collectionHref={`/collections/${collection.slug}`}
+          />
+        </Suspense>
+      ))}
+      <TradeInCta />
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+        <SectionHeading
+          eyebrow="Best sellers"
+          title="What everyone&apos;s buying."
+          link={{ label: "See more", href: "/shop" }}
+        />
+        <Suspense fallback={<GridSkeleton count={4} />}>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+            {newArrivals.slice(4, 8).map((p) => (
+              <StoreProductCard key={p.id} product={p} />
+            ))}
+          </div>
+        </Suspense>
+      </section>
+      <Newsletter />
+    </>
+  );
+}
+function CategoryTilesSkeleton() {
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="h-8 w-64 bg-muted rounded mb-8 animate-pulse" />
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="h-40 bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}
+function GridSkeleton({ count }: { count: number }) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+      ))}
+    </div>
+  );
+}
+function StripSkeleton({ title }: { title: string }) {
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-12">
+      <h2 className="text-[26px] font-semibold m-0 mb-5 -tracking-[0.02em]">{title}</h2>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto pb-2">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-fashion/app/privacy/page.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+export const metadata: Metadata = {
+  title: `Privacy Policy — ${brand.name}`,
+  description: `How ${brand.name} collects, uses, and protects your personal data.`,
+};
+export default function PrivacyPage() {
+  const p = brand.privacy;
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {p.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
+        {p.title}
+      </h1>
+      <p className="text-sm text-muted-foreground not-prose mb-10">
+        Last updated: {p.lastUpdated}
+      </p>
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {p.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0 -tracking-[0.02em]">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
+      </section>
+    </article>
+  );
+}