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

package/template/src/components/blocks/EmberFormBlock.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { EmberForm } from "@the-smithy/ember/react";
+import type { ReactNode } from "react";
+
+/**
+ * A Form block set to an Ember form (`emberFormId`): rendered by the Ember SDK, so submissions become leads in
+ * Ember, The Smithy's CRM. The visitor's browser submits it straight to Ember. It takes the site's colors through
+ * the CSS variables in globals.css (they reach into the form's Shadow DOM); restyle with `appearance`.
+ * `fallback` (the site's own form) shows until the Ember form loads, and stays if Ember can't be reached.
+ */
+export function EmberFormBlock({ formId, fallback }: { formId: string; fallback: ReactNode }) {
+  return (
+    <EmberForm
+      formId={formId}
+      appearance={{
+        theme: {
+          accent: "var(--color-accent)",
+          button: "var(--color-accent)",
+          buttonText: "var(--color-accent-ink)",
+          text: "var(--color-ink)",
+          label: "var(--color-ink)",
+          muted: "var(--color-muted-ink)",
+          error: "var(--color-danger)",
+          inputBackground: "var(--color-surface)",
+          border: "var(--color-line)",
+          successBackground: "var(--color-muted)",
+          radius: "8px",
+          maxWidth: "none",
+          font: "var(--font-sans)",
+          fontSize: "16px",
+          gap: "20px",
+        },
+      }}
+      fallback={fallback}
+    />
+  );
+}

package/template/src/components/blocks/Form.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import type { BlockOf } from "@the-smithy/hearth";
+import { useActionState } from "react";
+import { useFormStatus } from "react-dom";
+import { submitHearthForm, type FormState } from "@/app/actions";
+
+type FormData_ = BlockOf<"form">["data"];
+
+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";
+
+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 ? "Sending…" : label}
+    </button>
+  );
+}
+
+/** The fields of a Hearth `form` block, posted through a server action. */
+export function HearthForm({ form }: { form: FormData_ }) {
+  const [state, action] = useActionState<FormState, FormData>(submitHearthForm.bind(null, form.formKey), {});
+
+  if (state.ok) {
+    return (
+      <p role="status" className="rounded-xl bg-accent p-6 text-lg font-semibold text-accent-ink">
+        {state.message || form.successMessage}
+      </p>
+    );
+  }
+
+  return (
+    <form action={action} className="space-y-5" noValidate>
+      {state.message ? (
+        <p role="alert" className="rounded-lg border border-danger/30 bg-danger/5 px-4 py-3 text-danger">
+          {state.message}
+        </p>
+      ) : null}
+      {/* Honeypot: hidden from people, filled in by bots. */}
+      <div aria-hidden className="absolute -left-[9999px]">
+        <label>
+          Leave this empty
+          <input name="_gotcha" tabIndex={-1} autoComplete="off" />
+        </label>
+      </div>
+      {form.fields.map((f) => {
+        const id = `${form.formKey}-${f.name}`;
+        const error = state.fieldErrors?.[f.name];
+        const value = state.values?.[f.name];
+        const common = { id, name: f.name, required: f.required, "aria-invalid": error ? true : undefined, "aria-describedby": error ? `${id}-error` : undefined };
+        return (
+          <div key={f.name}>
+            {f.type === "checkbox" ? (
+              <label className="flex items-center gap-3">
+                <input type="checkbox" {...common} defaultChecked={value === "on"} className="size-5 accent-accent" />
+                {f.label}
+              </label>
+            ) : (
+              <>
+                <label htmlFor={id} className="mb-1.5 block font-semibold">
+                  {f.label}
+                  {f.required ? null : <span className="ml-1 font-normal opacity-70">(optional)</span>}
+                </label>
+                {f.type === "textarea" ? (
+                  <textarea {...common} rows={5} defaultValue={value} placeholder={f.placeholder} className={input} />
+                ) : f.type === "select" ? (
+                  <select {...common} defaultValue={value ?? ""} className={input}>
+                    <option value="" disabled>
+                      {f.placeholder || "Choose one…"}
+                    </option>
+                    {(f.options ?? []).map((o) => (
+                      <option key={o}>{o}</option>
+                    ))}
+                  </select>
+                ) : (
+                  <input {...common} type={f.type} defaultValue={value} placeholder={f.placeholder} autoComplete={f.type === "email" ? "email" : f.type === "tel" ? "tel" : f.name === "name" ? "name" : undefined} className={input} />
+                )}
+              </>
+            )}
+            {error ? (
+              <p id={`${id}-error`} className="mt-1.5 text-sm text-danger">
+                {error}
+              </p>
+            ) : null}
+          </div>
+        );
+      })}
+      <Submit label={form.submitLabel} />
+    </form>
+  );
+}

package/template/src/components/blocks/collections.tsx

@@ -0,0 +1,75 @@
+import Link from "next/link";
+import type { BlockOf, CollectionEntry } from "@the-smithy/hearth";
+import { Img, Section, SectionHeading } from "@/components/ui";
+
+const date = (iso: string | null) =>
+  iso ? new Date(`${iso.slice(0, 10)}T12:00:00Z`).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }) : null;
+
+function Card({ entry }: { entry: CollectionEntry }) {
+  return (
+    <li className="relative flex flex-col overflow-hidden rounded-2xl bg-surface ring-1 ring-line">
+      {entry.image ? <Img image={entry.image} className="aspect-[16/10] w-full object-cover" /> : null}
+      <div className="flex flex-1 flex-col gap-2 p-6">
+        {entry.date ? <p className="text-sm font-semibold text-highlight">{date(entry.date)}</p> : null}
+        <h3 className="text-xl font-semibold">
+          <Link href={entry.path} className="after:absolute after:inset-0 hover:underline">
+            {entry.title}
+          </Link>
+        </h3>
+        {entry.summary ? <p className="leading-relaxed opacity-85">{entry.summary}</p> : null}
+        {entry.tags.length ? (
+          <ul className="mt-auto flex flex-wrap gap-2 pt-2">
+            {entry.tags.map((t) => (
+              <li key={t} className="rounded-full bg-muted px-3 py-1 text-xs font-semibold">
+                {t}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </li>
+  );
+}
+
+/** Entries of a page collection (a blog, case studies…), as cards or a simple list. */
+export function CollectionList({ block }: { block: BlockOf<"collectionList"> }) {
+  const { entries, collection, layout } = block.data;
+  return (
+    <Section>
+      <SectionHeading eyebrow={block.data.eyebrow} heading={block.data.heading} intro={block.data.intro} />
+      {!entries.length ? (
+        <p className="text-lg opacity-75">Nothing here yet. Check back soon.</p>
+      ) : layout === "list" ? (
+        <ul className="max-w-3xl divide-y divide-line border-y border-line">
+          {entries.map((e) => (
+            <li key={e.path} className="py-5">
+              <Link href={e.path} className="text-lg font-semibold hover:underline">
+                {e.title}
+              </Link>
+              {e.date || e.summary ? (
+                <p className="mt-1 opacity-80">
+                  {e.date ? <span className="font-semibold">{date(e.date)}</span> : null}
+                  {e.date && e.summary ? " · " : null}
+                  {e.summary}
+                </p>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {entries.map((e) => (
+            <Card key={e.path} entry={e} />
+          ))}
+        </ul>
+      )}
+      {collection && entries.length >= block.data.limit ? (
+        <p className="mt-8">
+          <Link href={collection.path} className="font-semibold underline underline-offset-4">
+            All {collection.name.toLowerCase()} →
+          </Link>
+        </p>
+      ) : null}
+    </Section>
+  );
+}

package/template/src/components/blocks/content.tsx

@@ -0,0 +1,257 @@
+import type { BlockOf } from "@the-smithy/hearth";
+import { Button, Emphasis, Img, isDark, Markdown, Section, SectionHeading, SmartLink } from "@/components/ui";
+
+export function Hero({ block }: { block: BlockOf<"hero"> }) {
+  const d = block.data;
+  return (
+    <section className="relative overflow-hidden bg-inverse text-inverse-ink">
+      {d.image ? <Img image={d.image} className="absolute inset-0 size-full object-cover opacity-35" /> : null}
+      <div className={`relative mx-auto max-w-site px-4 sm:px-6 ${d.size === "full" ? "py-28 sm:py-36" : "py-16 sm:py-20"}`}>
+        {d.logo ? <Img image={d.logo} className="mb-6 h-20 w-auto sm:h-24" /> : null}
+        {d.eyebrow ? <p className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] opacity-80">{d.eyebrow}</p> : null}
+        <h1 className="max-w-4xl text-[clamp(36px,5vw,64px)] font-bold leading-[1.05] tracking-tight">
+          <Emphasis text={d.heading} className="underline decoration-2 underline-offset-[6px]" />
+        </h1>
+        {d.body ? <p className="mt-5 max-w-2xl text-lg leading-relaxed opacity-85 sm:text-xl">{d.body}</p> : null}
+        {d.primaryCta || d.secondaryCta ? (
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Button link={d.primaryCta} dark />
+            <Button link={d.secondaryCta} variant="secondary" />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export function RichText({ block }: { block: BlockOf<"richText"> }) {
+  return (
+    <Section>
+      <Markdown className={block.data.width === "narrow" ? "max-w-3xl" : ""}>{block.data.markdown}</Markdown>
+    </Section>
+  );
+}
+
+export function MediaText({ block }: { block: BlockOf<"mediaText"> }) {
+  const d = block.data;
+  return (
+    <Section>
+      <div className={`grid items-center gap-10 md:grid-cols-2 ${d.imagePosition === "left" ? "md:[&>*:first-child]:order-2" : ""}`}>
+        <div>
+          <SectionHeading eyebrow={d.eyebrow} heading={d.heading} />
+          <Markdown>{d.markdown}</Markdown>
+          {d.cta ? (
+            <div className="mt-6">
+              <Button link={d.cta} />
+            </div>
+          ) : null}
+        </div>
+        {d.image ? <Img image={d.image} className={`w-full rounded-xl ${d.imageFit === "contain" ? "max-h-96 object-contain" : "aspect-[4/3] object-cover"}`} /> : null}
+      </div>
+    </Section>
+  );
+}
+
+export function Stats({ block }: { block: BlockOf<"stats"> }) {
+  return (
+    <Section tone="inverse">
+      <SectionHeading heading={block.data.heading} dark />
+      <dl className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+        {block.data.items.map((s, i) => (
+          <div key={i} className="flex flex-col-reverse">
+            <dt className="mt-2 opacity-80">{s.label}</dt>
+            <dd className="text-5xl font-bold">{s.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </Section>
+  );
+}
+
+export function CardGrid({ block }: { block: BlockOf<"cardGrid"> }) {
+  const d = block.data;
+  const dark = isDark(d.tone);
+  return (
+    <Section tone={d.tone}>
+      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} dark={dark} />
+      <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        {d.items.map((c, i) => (
+          <li key={i} className={`flex flex-col gap-3 rounded-2xl p-7 ${dark ? "bg-white/10" : "bg-surface ring-1 ring-line"}`}>
+            {c.image ? <Img image={c.image} className="mb-2 aspect-[16/10] w-full rounded-lg object-cover" /> : null}
+            <h3 className="text-xl font-semibold">{c.title}</h3>
+            {c.body ? <p className="leading-relaxed opacity-80">{c.body}</p> : null}
+            {c.link ? (
+              <SmartLink href={c.link.href} className="mt-auto pt-2 font-semibold underline underline-offset-4">
+                {c.link.label} →
+              </SmartLink>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+
+export function Projects({ block }: { block: BlockOf<"projects"> }) {
+  const d = block.data;
+  const dark = isDark(d.tone);
+  const grid = d.layout === "grid";
+  return (
+    <Section tone={d.tone}>
+      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} dark={dark} />
+      <ul className={grid ? "grid gap-5 sm:grid-cols-2 lg:grid-cols-3" : "grid gap-14"}>
+        {d.items.map((p, i) => (
+          <li
+            key={i}
+            className={
+              grid
+                ? `flex flex-col gap-3 rounded-2xl p-7 ${dark ? "bg-white/10" : "bg-surface ring-1 ring-line"}`
+                : "grid items-center gap-8 md:grid-cols-2"
+            }
+          >
+            {p.image ? (
+              <Img
+                image={p.image}
+                className={`aspect-[16/10] w-full rounded-xl object-cover object-top ${grid ? "mb-2" : i % 2 ? "md:order-2" : ""}`}
+              />
+            ) : null}
+            <div className="flex flex-col gap-3">
+              <div className="flex flex-wrap items-center gap-3">
+                <h3 className="text-xl font-semibold">{p.name}</h3>
+                {p.status ? <span className="rounded-full bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink">{p.status}</span> : null}
+              </div>
+              {p.role ? <p className="text-sm font-semibold uppercase tracking-[0.12em] opacity-75">{p.role}</p> : null}
+              {p.description ? <Markdown className="leading-relaxed opacity-80">{p.description}</Markdown> : null}
+              {p.stack.length ? (
+                <ul className="flex flex-wrap gap-2">
+                  {p.stack.map((s, j) => (
+                    <li key={j} className={`rounded-md px-2.5 py-1 text-sm ${dark ? "bg-white/10" : "bg-surface ring-1 ring-line"}`}>
+                      {s}
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+              {p.url ? (
+                <SmartLink href={p.url} className="mt-auto pt-2 font-semibold underline underline-offset-4">
+                  Visit {p.name} →
+                </SmartLink>
+              ) : null}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+
+export function Pricing({ block }: { block: BlockOf<"pricing"> }) {
+  const d = block.data;
+  const dark = isDark(d.tone);
+  return (
+    <Section tone={d.tone}>
+      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} dark={dark} />
+      <ul className={`grid gap-5 sm:grid-cols-2 ${d.plans.length >= 4 ? "lg:grid-cols-4" : "lg:grid-cols-3"}`}>
+        {d.plans.map((p, i) => (
+          <li
+            key={i}
+            className={`flex flex-col gap-4 rounded-2xl p-7 ${dark ? "bg-white/10" : "bg-surface"} ${p.highlight ? "ring-2 ring-accent" : dark ? "" : "ring-1 ring-line"}`}
+          >
+            {p.highlight ? <p className="self-start rounded-full bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink">{p.highlight}</p> : null}
+            <h3 className="text-xl font-semibold">{p.name}</h3>
+            <p>
+              <span className="text-4xl font-bold tracking-tight">{p.price}</span>
+              {p.period ? <span className="ml-1 opacity-75">{p.period}</span> : null}
+            </p>
+            {p.description ? <p className="leading-relaxed opacity-80">{p.description}</p> : null}
+            {p.features.length ? (
+              <ul className="grid gap-2 opacity-90">
+                {p.features.map((f, j) => (
+                  <li key={j} className="flex gap-2.5">
+                    <span aria-hidden className={dark ? "" : "text-highlight"}>
+                      ✓
+                    </span>
+                    {f}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+            {p.cta ? (
+              <div className="mt-auto pt-2">
+                <Button link={p.cta} variant={p.highlight ? undefined : "secondary"} dark={dark} />
+              </div>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+      {d.footnote ? <Markdown className="mt-8 max-w-3xl text-sm opacity-80">{d.footnote}</Markdown> : null}
+    </Section>
+  );
+}
+
+export function CallToAction({ block }: { block: BlockOf<"cta"> }) {
+  const d = block.data;
+  const content = (dark: boolean) => (
+    <div className="flex flex-wrap items-center justify-between gap-8">
+      <div className="max-w-2xl">
+        <h2 className="text-[clamp(28px,3.4vw,40px)] font-bold leading-tight">
+          <Emphasis text={d.heading} className={dark ? "underline decoration-2 underline-offset-4" : "text-highlight"} />
+        </h2>
+        {d.body ? <p className="mt-3 text-lg opacity-85">{d.body}</p> : null}
+      </div>
+      <div className="flex flex-wrap gap-3">
+        <Button link={d.primary} dark={dark} />
+        <Button link={d.secondary} variant="secondary" />
+      </div>
+    </div>
+  );
+  if (!d.image) return <Section tone={d.tone}>{content(isDark(d.tone))}</Section>;
+  return (
+    <section className="relative overflow-hidden text-white">
+      <Img image={d.image} className="absolute inset-0 size-full object-cover" />
+      <div className="relative bg-black/55">
+        <div className="mx-auto max-w-site px-4 py-20 sm:px-6 sm:py-24">{content(true)}</div>
+      </div>
+    </section>
+  );
+}
+
+export function Faq({ block }: { block: BlockOf<"faq"> }) {
+  return (
+    <Section>
+      <SectionHeading heading={block.data.heading} />
+      <div className="max-w-3xl divide-y divide-line border-y border-line">
+        {block.data.items.map((q, i) => (
+          <details key={i} className="group">
+            <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold [&::-webkit-details-marker]:hidden">
+              {q.question}
+              <span aria-hidden className="text-highlight transition group-open:rotate-45">
+                +
+              </span>
+            </summary>
+            <Markdown className="pb-5 opacity-85">{q.answer}</Markdown>
+          </details>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+export function Quote({ block }: { block: BlockOf<"quote"> }) {
+  const d = block.data;
+  return (
+    <Section tone={d.tone}>
+      <figure className="flex max-w-3xl flex-col gap-6">
+        <blockquote className="text-2xl font-semibold leading-snug sm:text-3xl">“{d.quote}”</blockquote>
+        {d.name ? (
+          <figcaption className="flex items-center gap-4">
+            {d.image ? <Img image={d.image} className="size-14 rounded-full object-cover" /> : null}
+            <span>
+              <span className="block font-semibold">{d.name}</span>
+              {d.role ? <span className="block opacity-75">{d.role}</span> : null}
+            </span>
+          </figcaption>
+        ) : null}
+      </figure>
+    </Section>
+  );
+}

package/template/src/components/blocks/custom.tsx

@@ -0,0 +1,20 @@
+import type { BlockOf } from "@the-smithy/hearth";
+import type { ComponentType } from "react";
+
+/**
+ * This site's own blocks (Settings → Custom blocks in Hearth), one component per block key. Hearth stores what
+ * editors enter under `values`, keyed by each field's name; images come as { src, alt } with absolute URLs, links
+ * as { label, href }, lists as arrays of items. GET /custom-blocks (`hearth.customBlocks.list()`) describes them.
+ *
+ *   "team-member": ({ values }) => <TeamMember name={values.name as string} photo={values.photo as ImageRef} />,
+ */
+const customBlocks: Record<string, ComponentType<{ values: Record<string, unknown> }>> = {};
+
+export function CustomBlock({ block }: { block: BlockOf<"custom"> }) {
+  const Component = customBlocks[block.data.block];
+  if (!Component) {
+    if (process.env.NODE_ENV !== "production") console.warn(`[hearth] No component for custom block "${block.data.block}"; add one in components/blocks/custom.tsx.`);
+    return null;
+  }
+  return <Component values={block.data.values} />;
+}

package/template/src/components/blocks/events.tsx

@@ -0,0 +1,92 @@
+import Link from "next/link";
+import type { BlockOf, HearthEvent } from "@the-smithy/hearth";
+import { Registration } from "@/components/Registration";
+import { Img, Section, SectionHeading } from "@/components/ui";
+
+/** "Sat, Oct 18 · 6:00 – 9:00 PM", in the event's own time zone. */
+export function formatEventDate(e: Pick<HearthEvent, "startsAt" | "endsAt" | "allDay" | "timezone">) {
+  const tz = { timeZone: e.timezone };
+  const day = new Intl.DateTimeFormat("en-US", { ...tz, weekday: "short", month: "short", day: "numeric", year: "numeric" });
+  const time = new Intl.DateTimeFormat("en-US", { ...tz, hour: "numeric", minute: "2-digit" });
+  const start = new Date(e.startsAt);
+  const end = e.endsAt ? new Date(e.endsAt) : null;
+  const sameDay = end && day.format(start) === day.format(end);
+  if (e.allDay) return end && !sameDay ? `${day.format(start)} – ${day.format(end)}` : day.format(start);
+  if (!end) return `${day.format(start)} · ${time.format(start)}`;
+  return sameDay ? `${day.format(start)} · ${time.format(start)} – ${time.format(end)}` : `${day.format(start)} ${time.format(start)} – ${day.format(end)} ${time.format(end)}`;
+}
+
+export function EventCard({ event }: { event: HearthEvent }) {
+  const cancelled = event.status === "cancelled";
+  return (
+    <li className="flex flex-col overflow-hidden rounded-2xl bg-surface ring-1 ring-line">
+      {event.image ? <Img image={event.image} className="aspect-[16/9] w-full object-cover" /> : null}
+      <div className="flex flex-1 flex-col gap-2 p-6">
+        <p className="text-sm font-semibold text-highlight">
+          {cancelled ? <span className="mr-2 rounded bg-danger px-1.5 py-0.5 text-white">Cancelled</span> : null}
+          <time dateTime={event.startsAt}>{formatEventDate(event)}</time>
+        </p>
+        <h3 className="text-xl font-semibold">
+          <Link href={event.path} className="after:absolute after:inset-0 hover:underline">
+            {event.title}
+          </Link>
+        </h3>
+        {event.location.name ? <p className="opacity-75">{event.location.name}</p> : null}
+        {event.summary ? <p className="leading-relaxed opacity-85">{event.summary}</p> : null}
+        <div className="mt-auto pt-2">
+          <Registration event={event} size="small" />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export function EventList({ events }: { events: HearthEvent[] }) {
+  if (!events.length) return <p className="text-lg opacity-75">No upcoming events right now. Check back soon.</p>;
+  return (
+    <ul className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 [&>li]:relative">
+      {events.map((e) => (
+        <EventCard key={e.slug} event={e} />
+      ))}
+    </ul>
+  );
+}
+
+export function UpcomingEvents({ block }: { block: BlockOf<"upcomingEvents"> }) {
+  const d = block.data;
+  return (
+    <Section>
+      <SectionHeading eyebrow={d.eyebrow} heading={d.heading} intro={d.intro} />
+      <EventList events={d.events} />
+      {d.events.length ? (
+        <p className="mt-8">
+          <Link href="/events" className="font-semibold underline underline-offset-4">
+            All events →
+          </Link>
+        </p>
+      ) : null}
+    </Section>
+  );
+}
+
+export function EventSpotlight({ block }: { block: BlockOf<"eventSpotlight"> }) {
+  const e = block.data.event;
+  if (!e) return null;
+  return (
+    <Section tone="muted">
+      <div className="grid items-center gap-10 md:grid-cols-2">
+        <div>
+          {block.data.heading ? <p className="mb-3 text-sm font-semibold uppercase tracking-[0.18em] opacity-75">{block.data.heading}</p> : null}
+          <h2 className="text-[clamp(28px,3.4vw,40px)] font-bold leading-tight">{e.title}</h2>
+          <p className="mt-3 text-lg font-semibold text-highlight">{formatEventDate(e)}</p>
+          {e.location.name ? <p className="mt-1 opacity-80">{e.location.name}</p> : null}
+          {e.summary ? <p className="mt-4 text-lg opacity-85">{e.summary}</p> : null}
+          <Link href={e.path} className="mt-6 inline-block rounded-lg bg-accent px-6 py-3.5 font-semibold text-accent-ink hover:opacity-90">
+            Event details
+          </Link>
+        </div>
+        {e.image ? <Img image={e.image} className="aspect-[4/3] w-full rounded-xl object-cover" /> : null}
+      </div>
+    </Section>
+  );
+}