@the-smithy/create-hearth-site 0.0.0-stage → 0.13.0

package/template/src/app/fundraisers/[slug]/page.tsx

@@ -0,0 +1,55 @@
+import { metadataFromMeta } from "@the-smithy/hearth/next";
+import { JsonLd } from "@the-smithy/hearth/react";
+import { notFound } from "next/navigation";
+import { Blocks } from "@/components/blocks";
+import { Progress } from "@/components/blocks/giving";
+import { DonateForm } from "@/components/DonateForm";
+import { Img, Section } from "@/components/ui";
+import { hearthNext } from "@/lib/hearth";
+import { hasFeature } from "@/lib/site";
+
+type Props = { params: Promise<{ slug: string }> };
+
+async function load(slug: string) {
+  const site = await hearthNext.getSite();
+  return hasFeature(site, "giving") ? { site, fundraiser: await hearthNext.getFundraiser(slug) } : null;
+}
+
+export async function generateMetadata({ params }: Props) {
+  const loaded = await load((await params).slug);
+  return loaded?.fundraiser ? metadataFromMeta(loaded.fundraiser.meta) : {};
+}
+
+/** A fundraiser's page: progress and a donation form, then its story blocks. */
+export default async function FundraiserPage({ params }: Props) {
+  const loaded = await load((await params).slug);
+  if (!loaded?.fundraiser) notFound();
+  const { site, fundraiser: f } = loaded;
+  const giving = site.settings.giving;
+
+  return (
+    <>
+      <JsonLd data={f.meta.jsonLd} />
+      <section className="bg-muted">
+        <div className="mx-auto grid max-w-site items-center gap-10 px-4 py-16 sm:px-6 md:grid-cols-2">
+          <div className="flex flex-col gap-4">
+            <p className="text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{f.status === "completed" ? "Completed fundraiser" : "Fundraiser"}</p>
+            <h1 className="text-[clamp(32px,4.4vw,52px)] font-bold leading-tight tracking-tight">{f.title}</h1>
+            {f.summary ? <p className="text-lg opacity-85">{f.summary}</p> : null}
+            <Progress fundraiser={f} large />
+          </div>
+          {f.image ? <Img image={f.image} className="aspect-[4/3] w-full rounded-xl object-cover" /> : null}
+        </div>
+      </section>
+      <Blocks blocks={f.blocks} />
+      {f.status === "active" ? (
+        <Section>
+          <div className="max-w-2xl">
+            <h2 className="mb-6 text-2xl font-bold">Give to {f.title}</h2>
+            <DonateForm presetsCents={giving.presetsCents} minCents={giving.minCents} maxCents={giving.maxCents} fundraiser={f.slug} />
+          </div>
+        </Section>
+      ) : null}
+    </>
+  );
+}

package/template/src/app/fundraisers/page.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { FundraiserList } from "@/components/blocks/giving";
+import { Section } from "@/components/ui";
+import { hearthNext } from "@/lib/hearth";
+import { hasFeature } from "@/lib/site";
+
+export const metadata: Metadata = { title: "Fundraisers", alternates: { canonical: "/fundraisers" } };
+
+/** Active fundraisers, then completed ones (only on sites with the Giving feature in Hearth). */
+export default async function FundraisersPage() {
+  const site = await hearthNext.getSite();
+  if (!hasFeature(site, "giving")) notFound();
+  const [active, completed] = await Promise.all([hearthNext.getFundraisers({ status: "active" }), hearthNext.getFundraisers({ status: "completed" })]);
+  return (
+    <>
+      <Section>
+        <h1 className="mb-10 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">Fundraisers</h1>
+        <FundraiserList fundraisers={active} />
+      </Section>
+      {completed.length ? (
+        <Section tone="muted">
+          <h2 className="mb-8 text-2xl font-bold">Completed</h2>
+          <FundraiserList fundraisers={completed} />
+        </Section>
+      ) : null}
+    </>
+  );
+}

package/template/src/app/globals.css

@@ -0,0 +1,75 @@
+@import "tailwindcss";
+
+/*
+ * The site's brand. Blocks only use these tokens, so restyling a new site starts here.
+ * Hearth's "tone" options map to them: default, muted, inverse and accent.
+ */
+@theme {
+  --color-bg: #fbfaf7;
+  --color-ink: #1c1c1a;
+  --color-muted-ink: #5b5b55;
+  --color-line: #e3e0d8;
+  --color-surface: #ffffff;
+  --color-muted: #f1eee7;
+  --color-inverse: #1c1c1a;
+  --color-inverse-ink: #f6f4ee;
+  --color-accent: #2f5d50;
+  --color-accent-ink: #ffffff;
+  /* Highlighted words in headings (*like this*) and links. Check contrast on every ground. */
+  --color-highlight: #2f5d50;
+  --color-danger: #a12a1f;
+
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --container-site: 72rem;
+}
+
+body {
+  background: var(--color-bg);
+  color: var(--color-ink);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Markdown from Hearth (rich text, FAQ answers, media + text). */
+.prose {
+  line-height: 1.7;
+}
+.prose > * + * {
+  margin-top: 1em;
+}
+.prose h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.25;
+  margin-top: 1.6em;
+}
+.prose h3 {
+  font-size: 1.35rem;
+  font-weight: 700;
+  margin-top: 1.4em;
+}
+.prose a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.prose ul {
+  list-style: disc;
+  padding-left: 1.4em;
+}
+.prose ol {
+  list-style: decimal;
+  padding-left: 1.4em;
+}
+.prose blockquote {
+  border-left: 3px solid var(--color-line);
+  padding-left: 1em;
+  font-style: italic;
+}
+.prose img {
+  border-radius: 0.75rem;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}

package/template/src/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import { HearthPreview } from "@the-smithy/hearth/preview";
+import { SiteFooter } from "@/components/SiteFooter";
+import { SiteHeader } from "@/components/SiteHeader";
+import { hearthNext } from "@/lib/hearth";
+import { siteUrl } from "@/lib/site";
+import "./globals.css";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const site = await hearthNext.getSite();
+  const base = siteUrl(site);
+  return {
+    // Pages set their own full title, description, canonical and share image from Hearth.
+    title: { default: site.name, template: site.settings.seo.titleTemplate ?? `%s | ${site.name}` },
+    description: site.settings.seo.description,
+    ...(base ? { metadataBase: new URL(base) } : {}),
+  };
+}
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const site = await hearthNext.getSite();
+  return (
+    <html lang="en">
+      <body className="flex min-h-dvh flex-col">
+        <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-surface focus:px-4 focus:py-2">
+          Skip to content
+        </a>
+        {/* Live draft preview from Hearth: shows while an editor previews, refreshes as they edit. */}
+        {(await hearthNext.isPreview()) ? <HearthPreview /> : null}
+        <SiteHeader site={site} />
+        <main id="main" className="flex-1">
+          {children}
+        </main>
+        <SiteFooter site={site} />
+      </body>
+    </html>
+  );
+}

package/template/src/app/not-found.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+import { Section } from "@/components/ui";
+
+export default function NotFound() {
+  return (
+    <Section className="py-28">
+      <h1 className="text-4xl font-bold">Page not found</h1>
+      <p className="mt-4 text-lg opacity-80">The page you&apos;re looking for has moved or no longer exists.</p>
+      <Link href="/" className="mt-8 inline-block rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90">
+        Go to the homepage
+      </Link>
+    </Section>
+  );
+}

package/template/src/app/registered/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Section } from "@/components/ui";
+
+export const metadata: Metadata = { title: "You're registered", robots: { index: false, follow: false } };
+
+/** Where the payment page sends people after paying for a ticket. The confirmation is emailed once payment completes. */
+export default function RegisteredPage() {
+  return (
+    <Section>
+      <div className="max-w-2xl">
+        <h1 className="mb-4 text-[clamp(32px,4vw,48px)] font-bold tracking-tight">You&apos;re registered</h1>
+        <p className="text-lg opacity-85">Thanks for signing up. A confirmation is on its way to your email.</p>
+        <p className="mt-8">
+          <Link href="/events" className="font-semibold underline underline-offset-4">
+            See all events
+          </Link>
+        </p>
+      </div>
+    </Section>
+  );
+}

package/template/src/app/robots.ts

@@ -0,0 +1,10 @@
+import type { MetadataRoute } from "next";
+import { hearthNext } from "@/lib/hearth";
+import { siteUrl } from "@/lib/site";
+
+export default async function robots(): Promise<MetadataRoute.Robots> {
+  const base = siteUrl(await hearthNext.getSite());
+  // Until the site's domain is set in Hearth (e.g. on a preview URL), keep search engines out.
+  if (!base) return { rules: { userAgent: "*", disallow: "/" } };
+  return { rules: { userAgent: "*", allow: "/", disallow: "/api/" }, sitemap: `${base}/sitemap.xml` };
+}

package/template/src/app/sitemap.ts

@@ -0,0 +1,4 @@
+import { hearthNext } from "@/lib/hearth";
+
+/** Every indexable page and event, as listed by Hearth. */
+export default hearthNext.sitemap;

package/template/src/components/DonateForm.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useActionState, useState } from "react";
+import { useFormStatus } from "react-dom";
+import type { FormResult } from "@the-smithy/hearth";
+import { donate } from "@/app/actions";
+
+const input = "block w-full rounded-lg border border-line bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none";
+const money = (cents: number) => (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: cents % 100 ? 2 : 0 });
+
+function Submit({ label }: { label: string }) {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending} className="rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90 disabled:opacity-60">
+      {pending ? "Opening secure checkout…" : label}
+    </button>
+  );
+}
+
+/**
+ * Suggested amounts (from Hearth's Giving settings), a custom amount and optional details. Submitting starts a
+ * checkout through Hearth and sends the donor to the payment page; they come back to /donate/thank-you.
+ */
+export function DonateForm({
+  presetsCents,
+  minCents,
+  maxCents,
+  fundraiser,
+  submitLabel = "Donate",
+}: {
+  presetsCents: number[];
+  minCents: number;
+  maxCents: number;
+  fundraiser?: string;
+  submitLabel?: string;
+}) {
+  const [state, action] = useActionState<FormResult | null, FormData>(donate, null);
+  const [amount, setAmount] = useState(presetsCents[1] !== undefined ? String(presetsCents[1] / 100) : "custom");
+  const errors = state && !state.ok ? state.fieldErrors : {};
+
+  return (
+    <form action={action} className="space-y-6" id="donate">
+      {state && !state.ok ? (
+        <p role="alert" className="rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-danger">
+          {state.message}
+        </p>
+      ) : null}
+      {fundraiser ? <input type="hidden" name="fundraiser" value={fundraiser} /> : null}
+      <fieldset>
+        <legend className="mb-3 font-semibold">Amount</legend>
+        <div className="flex flex-wrap gap-3">
+          {presetsCents.map((cents) => (
+            <label key={cents} className="cursor-pointer rounded-lg px-5 py-3 font-semibold ring-1 ring-line has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent">
+              <input type="radio" name="amount" value={cents / 100} checked={amount === String(cents / 100)} onChange={(e) => setAmount(e.target.value)} className="sr-only" />
+              {money(cents)}
+            </label>
+          ))}
+          <label className="cursor-pointer rounded-lg px-5 py-3 font-semibold ring-1 ring-line has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent">
+            <input type="radio" name="amount" value="custom" checked={amount === "custom"} onChange={(e) => setAmount(e.target.value)} className="sr-only" />
+            Other
+          </label>
+        </div>
+        {amount === "custom" ? (
+          <label className="mt-4 block max-w-xs">
+            <span className="mb-1.5 block text-sm font-semibold">Amount in dollars</span>
+            <input name="customAmount" inputMode="decimal" required placeholder={String(minCents / 100)} className={input} />
+          </label>
+        ) : null}
+        <p className="mt-2 text-sm opacity-75">
+          {money(minCents)} to {money(maxCents)}.
+        </p>
+        {errors.amount ? <p className="mt-2 text-danger">{errors.amount}</p> : null}
+      </fieldset>
+      <div className="grid gap-5 sm:grid-cols-2">
+        <label className="block">
+          <span className="mb-1.5 block font-semibold">Name</span>
+          <input name="name" autoComplete="name" className={input} />
+        </label>
+        <label className="block">
+          <span className="mb-1.5 block font-semibold">Email for your receipt</span>
+          <input name="email" type="email" autoComplete="email" className={input} />
+          {errors.email ? <span className="mt-1 block text-danger">{errors.email}</span> : null}
+        </label>
+      </div>
+      <label className="block">
+        <span className="mb-1.5 block font-semibold">Message (optional)</span>
+        <textarea name="message" rows={3} maxLength={500} className={input} />
+      </label>
+      <label className="flex items-center gap-3">
+        <input type="checkbox" name="anonymous" className="size-5 accent-accent" />
+        Don&apos;t show my name publicly
+      </label>
+      <Submit label={submitLabel} />
+      <p className="text-sm opacity-75">You&apos;ll finish on a secure payment page.</p>
+    </form>
+  );
+}

package/template/src/components/EventView.tsx

@@ -0,0 +1,48 @@
+import type { HearthEventDetail } from "@the-smithy/hearth";
+import { JsonLd } from "@the-smithy/hearth/react";
+import { Blocks } from "@/components/blocks";
+import { formatEventDate } from "@/components/blocks/events";
+import { Registration } from "@/components/Registration";
+import { RegistrationForm } from "@/components/RegistrationForm";
+import { Img } from "@/components/ui";
+
+/** An event's page: header with date, place and registration, then its blocks. Used at /events/… and /<collection>/…. */
+export function EventView({ event }: { event: HearthEventDetail }) {
+  const { location } = event;
+  return (
+    <>
+      <JsonLd data={event.meta.jsonLd} />
+      <section className="bg-muted">
+        <div className="mx-auto grid max-w-site items-center gap-10 px-4 py-16 sm:px-6 md:grid-cols-2">
+          <div className="flex flex-col gap-4">
+            {event.collection ? <p className="text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{event.collection.name}</p> : null}
+            {event.status === "cancelled" ? <p className="w-fit rounded bg-danger px-2 py-1 text-sm font-semibold text-white">This event is cancelled</p> : null}
+            <h1 className="text-[clamp(32px,4.4vw,52px)] font-bold leading-tight tracking-tight">{event.title}</h1>
+            <p className="text-lg font-semibold text-highlight">
+              <time dateTime={event.startsAt}>{formatEventDate(event)}</time>
+            </p>
+            {location.name || location.address ? (
+              <p>
+                {location.name ? <span className="block font-semibold">{location.name}</span> : null}
+                {location.address ? <span className="block opacity-80">{location.address}</span> : null}
+              </p>
+            ) : null}
+            {event.summary ? <p className="text-lg opacity-85">{event.summary}</p> : null}
+            <Registration event={event} />
+          </div>
+          {event.image ? <Img image={event.image} className="aspect-[4/3] w-full rounded-xl object-cover" /> : null}
+        </div>
+      </section>
+      <Blocks blocks={event.blocks} />
+      {event.registration?.open ? (
+        <section id="register" className="mx-auto max-w-site scroll-mt-8 px-4 py-16 sm:px-6">
+          <div className="max-w-2xl">
+            <h2 className="mb-2 text-2xl font-bold">Register</h2>
+            {event.registration.fundraiser ? <p className="mb-6 opacity-80">Ticket sales support {event.registration.fundraiser.title}.</p> : null}
+            <RegistrationForm slug={event.slug} tickets={event.registration.tickets} />
+          </div>
+        </section>
+      ) : null}
+    </>
+  );
+}

package/template/src/components/Registration.tsx

@@ -0,0 +1,42 @@
+import type { HearthEvent } from "@the-smithy/hearth";
+import { hearthNext } from "@/lib/hearth";
+
+/** Upcoming until it ends (or, without an end time, until it starts). */
+const isUpcoming = (e: Pick<HearthEvent, "startsAt" | "endsAt">) => new Date(e.endsAt ?? e.startsAt).getTime() > Date.now();
+
+/**
+ * The event's registration: a Register button to the on-site form (sites with Tickets) or to its link (any
+ * platform), or, if the site turns it on in Hearth (Settings → Events), a "Registration coming soon" note while it's
+ * upcoming. Nothing for past or cancelled events.
+ */
+export async function Registration({ event, size = "large" }: { event: HearthEvent; size?: "large" | "small" }) {
+  if (event.status === "cancelled" || !isUpcoming(event)) return null;
+  if (event.registration) {
+    if (!event.registration.open) {
+      const soldOut = event.registration.tickets.length > 0 && event.registration.tickets.every((t) => t.soldOut);
+      return <p className={`font-semibold opacity-75 ${size === "large" ? "" : "text-sm"}`}>{soldOut ? "Sold out" : "Registration closed"}</p>;
+    }
+    return (
+      <a
+        href={`${event.path}#register`}
+        className={`relative z-10 w-fit rounded-lg bg-accent font-semibold text-accent-ink hover:opacity-90 ${size === "large" ? "px-6 py-3.5" : "px-4 py-2 text-sm"}`}
+      >
+        Register
+      </a>
+    );
+  }
+  if (event.registrationUrl) {
+    return (
+      <a
+        href={event.registrationUrl}
+        rel="noopener"
+        className={`relative z-10 w-fit rounded-lg bg-accent font-semibold text-accent-ink hover:opacity-90 ${size === "large" ? "px-6 py-3.5" : "px-4 py-2 text-sm"}`}
+      >
+        Register
+      </a>
+    );
+  }
+  const { events } = (await hearthNext.getSite()).settings;
+  if (!events.registrationComingSoon) return null;
+  return <p className={`font-semibold opacity-75 ${size === "large" ? "" : "text-sm"}`}>{events.comingSoonText || "Registration coming soon"}</p>;
+}

package/template/src/components/RegistrationForm.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useActionState, useState } from "react";
+import { useFormStatus } from "react-dom";
+import type { EventTicket, FormResult } from "@the-smithy/hearth";
+import { register } from "@/app/actions";
+
+const input = "block w-full rounded-lg border border-line bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none";
+const price = (cents: number) => (cents ? (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: cents % 100 ? 2 : 0 }) : "Free");
+
+function Submit({ paid }: { paid: boolean }) {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending} className="rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90 disabled:opacity-60">
+      {pending ? (paid ? "Opening secure checkout…" : "Registering…") : paid ? "Continue to payment" : "Register"}
+    </button>
+  );
+}
+
+/**
+ * On-site registration (sites with Tickets): pick a ticket, give contact details and attendee names. Free tickets
+ * are confirmed here; paid ones go to the payment page and come back to /registered.
+ */
+export function RegistrationForm({ slug, tickets }: { slug: string; tickets: EventTicket[] }) {
+  const [state, action] = useActionState<FormResult | null, FormData>(register.bind(null, slug), null);
+  const available = tickets.filter((t) => !t.soldOut);
+  const [ticketId, setTicketId] = useState(available[0]?.id ?? "");
+  const ticket = tickets.find((t) => t.id === ticketId);
+  const errors = state && !state.ok ? state.fieldErrors : {};
+
+  if (state?.ok) {
+    return (
+      <p role="status" className="rounded-xl bg-accent p-6 text-lg font-semibold text-accent-ink">
+        {state.message}
+      </p>
+    );
+  }
+
+  return (
+    <form action={action} className="space-y-6">
+      {state && !state.ok ? (
+        <p role="alert" className="rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-danger">
+          {state.message}
+        </p>
+      ) : null}
+      <fieldset>
+        <legend className="mb-3 font-semibold">Ticket</legend>
+        <div className="space-y-3">
+          {tickets.map((t) => (
+            <label key={t.id} className={`flex cursor-pointer items-start gap-3 rounded-lg p-4 ring-1 ring-line has-checked:ring-2 has-checked:ring-accent ${t.soldOut ? "opacity-50" : ""}`}>
+              <input type="radio" name="ticket" value={t.id} checked={ticketId === t.id} disabled={t.soldOut} onChange={() => setTicketId(t.id)} className="mt-1 size-5 accent-accent" />
+              <span className="flex-1">
+                <span className="flex flex-wrap justify-between gap-2 font-semibold">
+                  <span>{t.name}</span>
+                  <span>{t.soldOut ? "Sold out" : price(t.priceCents)}</span>
+                </span>
+                {t.description ? <span className="mt-1 block opacity-80">{t.description}</span> : null}
+                {t.remaining !== null && !t.soldOut && t.remaining <= 10 ? <span className="mt-1 block text-sm opacity-75">{t.remaining} left</span> : null}
+              </span>
+            </label>
+          ))}
+        </div>
+        {errors.ticket ? <p className="mt-2 text-danger">{errors.ticket}</p> : null}
+      </fieldset>
+      <div className="grid gap-5 sm:grid-cols-2">
+        <label className="block">
+          <span className="mb-1.5 block font-semibold">Name</span>
+          <input name="name" required autoComplete="name" className={input} />
+          {errors.name ? <span className="mt-1 block text-danger">{errors.name}</span> : null}
+        </label>
+        <label className="block">
+          <span className="mb-1.5 block font-semibold">Email</span>
+          <input name="email" type="email" required autoComplete="email" className={input} />
+          {errors.email ? <span className="mt-1 block text-danger">{errors.email}</span> : null}
+        </label>
+        <label className="block">
+          <span className="mb-1.5 block font-semibold">Phone (optional)</span>
+          <input name="phone" type="tel" autoComplete="tel" className={input} />
+        </label>
+        <label className="block">
+          <span className="mb-1.5 block font-semibold">Team or organization (optional)</span>
+          <input name="teamName" className={input} />
+        </label>
+      </div>
+      {ticket && ticket.attendeesPerRegistration > 0 ? (
+        <fieldset>
+          <legend className="mb-3 font-semibold">{ticket.attendeesPerRegistration === 1 ? (ticket.attendeeLabel ?? "Attendee") : `${ticket.attendeeLabel ?? "Attendee"}s`}</legend>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {Array.from({ length: ticket.attendeesPerRegistration }, (_, i) => (
+              <input key={`${ticket.id}-${i}`} name="attendee" required aria-label={`${ticket.attendeeLabel ?? "Attendee"} ${i + 1}`} placeholder={`${ticket.attendeeLabel ?? "Attendee"} ${i + 1}`} className={input} />
+            ))}
+          </div>
+          {errors.attendees ? <p className="mt-2 text-danger">{errors.attendees}</p> : null}
+        </fieldset>
+      ) : null}
+      <label className="block">
+        <span className="mb-1.5 block font-semibold">Notes (optional)</span>
+        <textarea name="notes" rows={3} maxLength={1000} className={input} />
+      </label>
+      <Submit paid={Boolean(ticket?.priceCents)} />
+    </form>
+  );
+}

package/template/src/components/SiteFooter.tsx

@@ -0,0 +1,61 @@
+import type { Site } from "@the-smithy/hearth";
+import { SmartLink } from "@/components/ui";
+
+const platformName: Record<string, string> = {
+  facebook: "Facebook",
+  instagram: "Instagram",
+  linkedin: "LinkedIn",
+  x: "X",
+  youtube: "YouTube",
+  tiktok: "TikTok",
+};
+
+/** Contact details, footer links and social links from Hearth (Settings → Content). */
+export function SiteFooter({ site }: { site: Site }) {
+  const { footerLinks, contact, social } = site.settings;
+  return (
+    <footer className="bg-inverse text-inverse-ink">
+      <div className="mx-auto grid max-w-site gap-10 px-4 py-12 sm:grid-cols-3 sm:px-6">
+        <div className="flex flex-col gap-2">
+          <p className="text-lg font-bold">{site.name}</p>
+          {contact.address ? <address className="whitespace-pre-line not-italic opacity-80">{contact.address}</address> : null}
+          {contact.phone ? (
+            <a href={`tel:${contact.phone.replace(/[^\d+]/g, "")}`} className="opacity-80 hover:opacity-100">
+              {contact.phone}
+            </a>
+          ) : null}
+          {contact.email ? (
+            <a href={`mailto:${contact.email}`} className="opacity-80 hover:opacity-100">
+              {contact.email}
+            </a>
+          ) : null}
+        </div>
+        {footerLinks.length ? (
+          <nav aria-label="Footer" className="flex flex-col gap-2">
+            {footerLinks.map((item) => (
+              <SmartLink key={item.href + item.label} href={item.href} className="opacity-80 hover:opacity-100">
+                {item.label}
+              </SmartLink>
+            ))}
+          </nav>
+        ) : (
+          <div />
+        )}
+        {social.length ? (
+          <ul className="flex flex-col gap-2">
+            {social.map((s) => (
+              <li key={s.url}>
+                <a href={s.url} rel="me noopener" className="opacity-80 hover:opacity-100">
+                  {s.label ?? platformName[s.platform] ?? new URL(s.url).hostname.replace(/^www\./, "")}
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+      <p className="mx-auto max-w-site px-4 pb-8 text-sm opacity-60 sm:px-6">
+        © {new Date().getFullYear()} {site.name}
+      </p>
+    </footer>
+  );
+}

package/template/src/components/SiteHeader.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import type { Site } from "@the-smithy/hearth";
+import { Img, SmartLink } from "@/components/ui";
+
+/** Logo, menu and announcement banner, all edited in Hearth (Settings → General and Navigation). */
+export function SiteHeader({ site }: { site: Site }) {
+  const { announcement, seo, tagline, navigation } = site.settings;
+  return (
+    <header className="border-b border-line bg-bg">
+      {announcement ? <p className="bg-accent px-4 py-2 text-center text-sm font-semibold text-accent-ink">{announcement}</p> : null}
+      <div className="mx-auto flex max-w-site flex-wrap items-center justify-between gap-x-8 gap-y-3 px-4 py-4 sm:px-6">
+        <Link href="/" className="flex items-center gap-3 text-xl font-bold">
+          {seo.logo ? <Img image={{ src: seo.logo.src, alt: "" }} className="h-10 w-auto" /> : null}
+          <span className="flex flex-col">
+            <span>{site.name}</span>
+            {tagline ? <span className="text-sm font-normal text-muted-ink">{tagline}</span> : null}
+          </span>
+        </Link>
+        {navigation.length ? (
+          <nav aria-label="Main" className="flex flex-wrap items-center gap-x-6 gap-y-1 font-medium">
+            {navigation.map((item) => (
+              <SmartLink key={item.href + item.label} href={item.href} className="py-2 hover:text-highlight">
+                {item.label}
+              </SmartLink>
+            ))}
+          </nav>
+        ) : null}
+      </div>
+    </header>
+  );
+}