@cimplify/sdk 0.41.0 → 0.42.0

package/templates/storefront-bakery/app/opensearch.xml/route.ts

@@ -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-bakery/app/returns/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.returns.title} — ${brand.name}`,
+};
+
+export default function ReturnsPage() {
+  return <PolicyPage policy={brand.returns} />;
+}

package/templates/storefront-bakery/app/search/page.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { SearchClient } from "./search-client";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Search — ${brand.name}`,
+  description: `Search ${brand.name} — products, collections, categories.`,
+};
+
+export default function SearchPage() {
+  return (
+    <article className="max-w-7xl mx-auto px-6 sm:px-8 py-10">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Search
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Find anything.
+      </h1>
+      <Suspense fallback={<SearchSkeleton />}>
+        <SearchClient />
+      </Suspense>
+    </article>
+  );
+}
+
+function SearchSkeleton() {
+  return (
+    <div>
+      <div className="h-12 w-full max-w-xl bg-muted rounded animate-pulse mb-8" />
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-bakery/app/search/search-client.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SearchPage } from "@cimplify/sdk/react";
+
+export function SearchClient() {
+  return <SearchPage />;
+}

package/templates/storefront-bakery/app/shipping/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.shipping.title} — ${brand.name}`,
+  description: brand.shipping.sections[0]?.body
+    ? typeof brand.shipping.sections[0].body === "string"
+      ? brand.shipping.sections[0].body
+      : brand.shipping.sections[0].body.intro
+    : undefined,
+};
+
+export default function ShippingPage() {
+  return <PolicyPage policy={brand.shipping} />;
+}

package/templates/storefront-bakery/app/signup/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Create an account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+
+/**
+ * Cimplify Link handles sign-up inside the `<CimplifyAccount>` iframe.
+ * We bounce /signup to /account; the iframe shows the create-account UI
+ * for visitors with no session.
+ */
+export default function SignupPage(): never {
+  redirect("/account");
+}

package/templates/storefront-bakery/app/sitemap-page/page.tsx

@@ -0,0 +1,167 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Sitemap — ${brand.name}`,
+  description: "A human-readable index of every page on this site.",
+};
+
+interface SitemapData {
+  products: { slug: string; name: string }[];
+  categories: { slug: string; name: string }[];
+  collections: { slug: string; name: string }[];
+}
+
+async function getSitemap(): Promise<SitemapData> {
+  "use cache";
+  cacheTag(tags.products(), tags.categories(), tags.collections());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [pRes, cRes, colRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+  return {
+    products: (pRes.ok ? pRes.value.items : []).map((p: Product) => ({
+      slug: p.slug ?? p.id,
+      name: p.name,
+    })),
+    categories: (cRes.ok ? cRes.value : []).map((c) => ({ slug: c.slug, name: c.name })),
+    collections: (colRes.ok ? colRes.value : []).map((c) => ({ slug: c.slug, name: c.name })),
+  };
+}
+
+const STATIC_LINKS: { title: string; links: { href: string; label: string }[] }[] = [
+  {
+    title: "Browse",
+    links: [
+      { href: "/", label: "Home" },
+      { href: "/shop", label: "Shop" },
+      { href: "/search", label: "Search" },
+    ],
+  },
+  {
+    title: "Account",
+    links: [
+      { href: "/account", label: "Account" },
+      { href: "/account/orders", label: "Orders" },
+      { href: "/account/addresses", label: "Addresses" },
+      { href: "/account/settings", label: "Settings" },
+      { href: "/login", label: "Sign in" },
+      { href: "/signup", label: "Create account" },
+      { href: "/track-order", label: "Track an order" },
+      { href: "/cart", label: "Cart" },
+      { href: "/checkout", label: "Checkout" },
+    ],
+  },
+  {
+    title: "About",
+    links: [
+      { href: "/about", label: "About" },
+      { href: "/faq", label: "FAQ" },
+      { href: "/contact", label: "Contact" },
+    ],
+  },
+  {
+    title: "Policies",
+    links: [
+      { href: "/shipping", label: "Shipping" },
+      { href: "/returns", label: "Returns" },
+      { href: "/accessibility", label: "Accessibility" },
+      { href: "/terms", label: "Terms of Service" },
+      { href: "/privacy", label: "Privacy Policy" },
+    ],
+  },
+  {
+    title: "Machine-readable",
+    links: [
+      { href: "/sitemap.xml", label: "sitemap.xml (search engines)" },
+      { href: "/llms.txt", label: "llms.txt (LLM agents)" },
+      { href: "/robots.txt", label: "robots.txt" },
+      { href: "/opensearch.xml", label: "opensearch.xml (browser search)" },
+    ],
+  },
+];
+
+export default async function SitemapHtmlPage() {
+  const { products, categories, collections } = await getSitemap();
+
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-16">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Sitemap
+      </p>
+      <h1 className="text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-2 -tracking-[0.02em]">
+        Every page, in one place.
+      </h1>
+      <p className="text-muted-foreground mb-12">
+        For search engines, see <Link href="/sitemap.xml" className="text-primary hover:underline">/sitemap.xml</Link>.
+        For LLM agents, see <Link href="/llms.txt" className="text-primary hover:underline">/llms.txt</Link>.
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+        {STATIC_LINKS.map((s) => (
+          <Section key={s.title} title={s.title}>
+            {s.links.map((l) => (
+              <li key={l.href}>
+                <Link href={l.href} className="hover:text-primary transition-colors">
+                  {l.label}
+                </Link>
+              </li>
+            ))}
+          </Section>
+        ))}
+        {categories.length > 0 && (
+          <Section title="Categories">
+            {categories.map((c) => (
+              <li key={c.slug}>
+                <Link href={`/categories/${c.slug}`} className="hover:text-primary transition-colors">
+                  {c.name}
+                </Link>
+              </li>
+            ))}
+          </Section>
+        )}
+        {collections.length > 0 && (
+          <Section title="Collections">
+            {collections.map((c) => (
+              <li key={c.slug}>
+                <Link href={`/collections/${c.slug}`} className="hover:text-primary transition-colors">
+                  {c.name}
+                </Link>
+              </li>
+            ))}
+          </Section>
+        )}
+        {products.length > 0 && (
+          <Section title={`Products (${products.length})`}>
+            {products.map((p) => (
+              <li key={p.slug}>
+                <Link href={`/shop?product=${encodeURIComponent(p.slug)}`} className="hover:text-primary transition-colors">
+                  {p.name}
+                </Link>
+              </li>
+            ))}
+          </Section>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <p className="font-semibold text-[12px] uppercase tracking-[0.12em] text-foreground mb-3">
+        {title}
+      </p>
+      <ul className="space-y-2 m-0 p-0 list-none text-sm text-muted-foreground">
+        {children}
+      </ul>
+    </div>
+  );
+}

package/templates/storefront-bakery/app/track-order/page.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { TrackOrderForm } from "./track-order-form";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Track an order — ${brand.name}`,
+  description: brand.trackOrder.body,
+};
+
+export default function TrackOrderPage() {
+  const t = brand.trackOrder;
+  return (
+    <article className="max-w-2xl mx-auto px-6 sm:px-8 py-16">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {t.eyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,5vw,3rem)] font-semibold mb-4 -tracking-[0.02em]">
+        {t.title}
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">{t.body}</p>
+      <TrackOrderForm />
+    </article>
+  );
+}

package/templates/storefront-bakery/app/track-order/track-order-form.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+/**
+ * Guest order tracker. Routes /orders/<id> with the entered id; the
+ * post-checkout confirmation page already lives at /orders/[id] so this
+ * just sends the visitor there. Replace the redirect with a real lookup
+ * (e.g. Cimplify orders API + email-match guard) for production.
+ */
+export function TrackOrderForm() {
+  const router = useRouter();
+  const [orderId, setOrderId] = useState("");
+  const [email, setEmail] = useState("");
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (!orderId.trim()) return;
+        router.push(`/orders/${encodeURIComponent(orderId.trim())}`);
+      }}
+      className="space-y-4 rounded-2xl border border-border bg-card p-6"
+    >
+      <div>
+        <label
+          htmlFor="orderId"
+          className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+        >
+          Order number
+        </label>
+        <input
+          id="orderId"
+          name="orderId"
+          required
+          value={orderId}
+          onChange={(e) => setOrderId(e.target.value)}
+          placeholder="ord_abc123…"
+          className="w-full px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="email"
+          className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+        >
+          Order email
+        </label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@email.com"
+          className="w-full px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        />
+      </div>
+      <button
+        type="submit"
+        className="w-full inline-flex items-center justify-center px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+      >
+        Track order
+      </button>
+    </form>
+  );
+}

package/templates/storefront-bakery/components/account-iframe.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { CimplifyAccount } from "@cimplify/sdk/react";
+
+/**
+ * Cimplify Account portal — iframe-mounted UI hosted by Cimplify Link.
+ * Handles sign-in, sign-up, OTP, addresses, payment methods, sessions,
+ * and order history. The iframe owns auth state; we just choose which
+ * `section` to land on.
+ */
+export function AccountIframe({ section }: { section?: string }) {
+  return <CimplifyAccount section={section} />;
+}

package/templates/storefront-bakery/components/policy-page.tsx

@@ -0,0 +1,49 @@
+import type { BrandPolicySection } from "@/lib/brand";
+
+interface PolicyShape {
+  eyebrow: string;
+  title: string;
+  lastUpdated?: string;
+  sections: BrandPolicySection[];
+}
+
+/**
+ * Shared layout for shipping / returns / accessibility / terms / privacy.
+ * Reads a `{ eyebrow, title, lastUpdated, sections[] }` block from brand.
+ */
+export function PolicyPage({ policy }: { policy: PolicyShape }) {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {policy.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {policy.title}
+      </h1>
+      {policy.lastUpdated && (
+        <p className="text-sm text-muted-foreground not-prose mb-10">
+          Last updated: {policy.lastUpdated}
+        </p>
+      )}
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {policy.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0">{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>
+  );
+}

package/templates/storefront-bakery/lib/brand.ts

@@ -138,6 +138,41 @@ export interface Brand {
     sections: BrandPolicySection[];
   };
 
+  // ─── Standalone policy pages ──────────────────────────────────
+  shipping: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  returns: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  accessibility: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+
+  // ─── Auth + account UX copy ───────────────────────────────────
+  account: {
+    loginEyebrow: string;
+    loginTitle: string;
+    loginSubtitle: string;
+    signupEyebrow: string;
+    signupTitle: string;
+    signupSubtitle: string;
+    accountEyebrow: string;
+    accountTitle: string;
+  };
+
+  // ─── Contact form copy ────────────────────────────────────────
+  contactPage: {
+    eyebrow: string;
+    title: string;
+    body: string;
+    /** Reasons offered in the contact form's subject dropdown. */
+    reasons: string[];
+    /** Direct lines under the form (label + href, e.g. tel: / mailto:). */
+    directLines: { label: string; value: string; href: string }[];
+  };
+
+  // ─── Track-order page copy ────────────────────────────────────
+  trackOrder: {
+    eyebrow: string;
+    title: string;
+    body: string;
+  };
+
   footer: {
     blurb: string;
     sitemap: BrandSitemapSection[];
@@ -396,6 +431,74 @@ export const brand: Brand = {
     ],
   },
 
+  shipping: {
+    eyebrow: "Shipping",
+    title: "Shipping & Pickup",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Same-day Greater Accra", body: "Orders placed before 2pm are delivered the same day. Free over GH₵150; GH₵25 below." },
+      { heading: "Outside Accra", body: "Next-day shipping by partner courier. Rates and ETA computed at checkout based on your address." },
+      { heading: "Pickup", body: "Available 8am–8pm at our East Legon location, Tuesday through Sunday. Choose 'Pickup' at checkout — order is boxed and ready within 30 minutes of confirmation." },
+      { heading: "Custom-cake delivery", body: "All custom cakes are hand-delivered. We coordinate the time window with you 24 hours before the event." },
+    ],
+  },
+
+  returns: {
+    eyebrow: "Returns",
+    title: "Returns & Refunds",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Baked goods", body: "We don't accept returns on baked goods for food-safety reasons. If anything is wrong with your order — quality, accuracy, or freshness — message us within 24 hours and we'll replace, refund, or credit your account. Your choice." },
+      { heading: "Merchandise", body: "Aprons, totes, eBooks, and gift cards: 14 days, no questions asked, on unopened items." },
+      { heading: "How to start", body: "Email hello@akuasbakery.test with your order number and what's wrong. We respond within 24 hours." },
+    ],
+  },
+
+  accessibility: {
+    eyebrow: "Accessibility",
+    title: "Accessibility Statement",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Our commitment", body: "We're committed to making this site usable by everyone, including people who use screen readers, keyboard navigation, or assistive devices. We aim for WCAG 2.1 AA compliance and test against it regularly." },
+      { heading: "What we've done", body: { intro: "Specifically, we've:", bullets: [
+        "Maintained a minimum colour contrast of 4.5:1 on body text.",
+        "Ensured every interactive element is reachable by keyboard.",
+        "Labelled images and icons for screen-reader users.",
+        "Kept focus indicators visible at all times.",
+      ] } },
+      { heading: "Reporting issues", body: "If you encounter a barrier, email accessibility@akuasbakery.test. We respond within 5 business days." },
+    ],
+  },
+
+  account: {
+    loginEyebrow: "Welcome back",
+    loginTitle: "Sign in to your account",
+    loginSubtitle: "Pick up where you left off — orders, addresses, and your subscription, all in one place.",
+    signupEyebrow: "Welcome",
+    signupTitle: "Create a baker's account",
+    signupSubtitle: "Save your favourite loaves, track orders, and get first dibs on seasonal drops.",
+    accountEyebrow: "Your account",
+    accountTitle: "Welcome back",
+  },
+
+  contactPage: {
+    eyebrow: "Contact",
+    title: "We'd love to hear from you.",
+    body: "Bug, idea, special request, or just hello — message us and a real human will reply within 24 hours.",
+    reasons: ["General question", "An order issue", "Custom cake enquiry", "Press / partnerships", "Wholesale", "Something else"],
+    directLines: [
+      { label: "Email", value: "hello@akuasbakery.test", href: "mailto:hello@akuasbakery.test" },
+      { label: "Phone", value: "+233 244 000 000", href: "tel:+233244000000" },
+      { label: "WhatsApp", value: "+233 244 000 000", href: "https://wa.me/233244000000" },
+    ],
+  },
+
+  trackOrder: {
+    eyebrow: "Track an order",
+    title: "Where's my loaf?",
+    body: "Enter your order number and the email you used at checkout. We'll show you the latest status, the rider's contact, and the live ETA.",
+  },
+
   footer: {
     blurb:
       "Family-run bakery in East Legon. Sourdough, croissants, layered cakes — handcrafted since 2018, delivered across Accra.",
@@ -424,10 +527,20 @@ export const brand: Brand = {
       {
         title: "Help",
         links: [
-          { label: "Contact", href: "mailto:hello@akuasbakery.test" },
-          { label: "Custom cakes", href: "/faq" },
-          { label: "Allergens", href: "/faq" },
-          { label: "Delivery", href: "/faq" },
+          { label: "Contact", href: "/contact" },
+          { label: "Track an order", href: "/track-order" },
+          { label: "Shipping", href: "/shipping" },
+          { label: "Returns", href: "/returns" },
+          { label: "FAQ", href: "/faq" },
+        ],
+      },
+      {
+        title: "Account",
+        links: [
+          { label: "Sign in", href: "/login" },
+          { label: "Create account", href: "/signup" },
+          { label: "Your orders", href: "/account/orders" },
+          { label: "Settings", href: "/account/settings" },
         ],
       },
       {
@@ -435,6 +548,8 @@ export const brand: Brand = {
         links: [
           { label: "Terms of Service", href: "/terms" },
           { label: "Privacy Policy", href: "/privacy" },
+          { label: "Accessibility", href: "/accessibility" },
+          { label: "Sitemap", href: "/sitemap-page" },
         ],
       },
     ],

package/templates/storefront-fashion/app/accessibility/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.accessibility.title} — ${brand.name}`,
+};
+
+export default function AccessibilityPage() {
+  return <PolicyPage policy={brand.accessibility} />;
+}

package/templates/storefront-fashion/app/account/addresses/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Addresses — ${brand.name}`,
+};
+
+export default function AddressesPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your addresses
+      </h1>
+      <AccountIframe section="addresses" />
+    </article>
+  );
+}

package/templates/storefront-fashion/app/account/orders/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Orders — ${brand.name}`,
+};
+
+export default function OrdersPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your orders
+      </h1>
+      <AccountIframe section="orders" />
+    </article>
+  );
+}