feat: add Markdoc-authored bento grid to the marketing page

Introduce bento, bento-tile, bento-video, bento-payment, and bento-code
tags so content editors can compose a heterogeneous tile grid from
Markdown alone. Three tiles ship: a video placeholder (wide), a mock
payment button (client component with idle/loading/paid states), and a
full-width embed code snippet. Home route now renders the markdoc body
in a wider section below the hero. Tile sizes are controlled from
markdown via the colSpan attribute, so adding or resizing tiles needs
no TSX changes. Translations regenerated for es/fr/de.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: maxprilutskiy

i18n.lock

@@ -2,6 +2,8 @@ version: 1
 checksums:
   539d38021b42abf46911ae19ad0cb996:
     paragraph-0: 675c5577c7e4c945a1a33ca50ab77428
+    heading-0: 734fe828e8be781431f0a41f5adc92b9
+    fence-0: 27c6588253021c29ff7829652f29f524
     fm-attr-title: 54f4edf22d864ec9cac6f3771f3b6cc3
     fm-attr-description: 5d33312137e459288cf54d85ab250e24
     fm-attr-badge: a39cdbb8f362c0d3754a098416fb9a8b

src/app/[lang]/page.tsx

@@ -30,7 +30,8 @@ export default async function Home(props: PageProps<"/[lang]">) {
   const { home } = await getMessages(lang);
 
   return (
-    <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col items-center justify-center gap-8 px-6 py-10 text-center md:py-12">
+    <>
+    <main className="mx-auto flex w-full max-w-3xl flex-col items-center gap-8 px-6 py-16 text-center md:py-24">
       {badge ? (
         <Link
           href={`/${lang}/blog`}
@@ -68,11 +69,17 @@ export default async function Home(props: PageProps<"/[lang]">) {
         </Link>
         <p className="text-sm text-muted-foreground">{home.noCreditCardRequired}</p>
       </div>
-
-      <div className="w-full max-w-xl text-left">
-        {renderMarkdoc(doc.content)}
-      </div>
     </main>
+
+    <section
+      className={[
+        "mx-auto w-full max-w-6xl px-6 pb-20 md:pb-28",
+        "[&_h2]:font-heading [&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:md:text-4xl",
+      ].join(" ")}
+    >
+      {renderMarkdoc(doc.content)}
+    </section>
+    </>
   );
 }
 

src/components/markdoc/Bento.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function Bento({ children }: { children?: ReactNode }) {
+  return (
+    <section className="my-10 grid grid-cols-1 gap-4 sm:grid-cols-3 md:my-16 md:gap-5">
+      {children}
+    </section>
+  );
+}

src/components/markdoc/BentoCode.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export function BentoCode({
+  language,
+  children,
+}: {
+  language?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div className="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950 text-zinc-100">
+      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-2.5">
+        <div className="flex gap-1.5">
+          <span aria-hidden className="h-2.5 w-2.5 rounded-full bg-zinc-700" />
+          <span aria-hidden className="h-2.5 w-2.5 rounded-full bg-zinc-700" />
+          <span aria-hidden className="h-2.5 w-2.5 rounded-full bg-zinc-700" />
+        </div>
+        {language && (
+          <span className="font-mono text-xs uppercase tracking-wide text-zinc-500">
+            {language}
+          </span>
+        )}
+      </div>
+      <div className="overflow-x-auto [&_code]:bg-transparent [&_code]:font-mono [&_code]:text-sm [&_code]:leading-relaxed [&_code]:text-zinc-100 [&_pre]:bg-transparent [&_pre]:p-4">
+        {children}
+      </div>
+    </div>
+  );
+}

src/components/markdoc/BentoPayment.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Loader2 } from "lucide-react";
+
+type Status = "idle" | "loading" | "success";
+
+export function BentoPayment({
+  amount = "$40.00",
+  label = "Pay now",
+}: {
+  amount?: string;
+  label?: string;
+}) {
+  const [status, setStatus] = useState<Status>("idle");
+
+  function handleClick() {
+    if (status !== "idle") return;
+    setStatus("loading");
+    setTimeout(() => setStatus("success"), 1100);
+    setTimeout(() => setStatus("idle"), 3200);
+  }
+
+  return (
+    <div className="flex flex-col gap-3 rounded-xl bg-muted p-5">
+      <div className="flex items-center justify-between">
+        <span className="text-sm text-muted-foreground">Amount due</span>
+        <span className="font-mono text-xl font-semibold text-foreground">
+          {amount}
+        </span>
+      </div>
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={status !== "idle"}
+        className="inline-flex h-11 items-center justify-center gap-2 rounded-full bg-foreground px-5 text-sm font-medium text-background transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-80"
+      >
+        {status === "idle" && (
+          <>
+            {label}
+            <span aria-hidden className="text-base leading-none">›</span>
+          </>
+        )}
+        {status === "loading" && (
+          <>
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Processing…
+          </>
+        )}
+        {status === "success" && (
+          <>
+            <Check className="h-4 w-4" />
+            Paid
+          </>
+        )}
+      </button>
+    </div>
+  );
+}

src/components/markdoc/BentoTile.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+const COL_CLASSES: Record<number, string> = {
+  1: "sm:col-span-1",
+  2: "sm:col-span-2",
+  3: "sm:col-span-3",
+};
+
+const ROW_CLASSES: Record<number, string> = {
+  1: "row-span-1",
+  2: "sm:row-span-2",
+};
+
+type Props = {
+  colSpan?: number;
+  rowSpan?: number;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+};
+
+export function BentoTile({
+  colSpan = 1,
+  rowSpan = 1,
+  title,
+  description,
+  children,
+}: Props) {
+  const cols = COL_CLASSES[colSpan] ?? COL_CLASSES[1];
+  const rows = ROW_CLASSES[rowSpan] ?? ROW_CLASSES[1];
+
+  return (
+    <article
+      className={cn(
+        "flex flex-col gap-5 rounded-2xl border border-border bg-card p-5 md:p-6",
+        cols,
+        rows,
+      )}
+    >
+      {(title || description) && (
+        <header className="flex flex-col gap-1.5">
+          {title && (
+            <h3 className="font-heading text-lg font-semibold text-foreground md:text-xl">
+              {title}
+            </h3>
+          )}
+          {description && (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          )}
+        </header>
+      )}
+      <div className="flex flex-1 flex-col justify-end">{children}</div>
+    </article>
+  );
+}

src/components/markdoc/BentoVideo.tsx

@@ -0,0 +1,28 @@
+import { Play } from "lucide-react";
+
+export function BentoVideo({ label }: { label?: string }) {
+  return (
+    <div className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-700">
+      <span
+        aria-hidden
+        className="absolute inset-0 bg-[radial-gradient(circle_at_25%_15%,rgba(255,255,255,0.12),transparent_55%)]"
+      />
+      <span
+        aria-hidden
+        className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/60 to-transparent"
+      />
+      <button
+        type="button"
+        aria-label="Play video"
+        className="relative flex h-14 w-14 items-center justify-center rounded-full bg-white/95 text-zinc-900 shadow-xl transition hover:scale-105 md:h-16 md:w-16"
+      >
+        <Play className="h-6 w-6 translate-x-0.5 fill-current" />
+      </button>
+      {label && (
+        <span className="absolute bottom-3 left-4 text-xs font-medium text-white/90">
+          {label}
+        </span>
+      )}
+    </div>
+  );
+}

src/content/de/pages/home.md

@@ -9,3 +9,33 @@ badge: Cal.com bringt v6.4 heraus
 {% callout type="note" %}
 Diese Website wurde in Markdoc erstellt und ist auf Englisch, Spanisch, Französisch und Deutsch verfügbar.
 {% /callout %}
+
+## …und vieles mehr
+
+{% bento %}
+{% bento-tile
+   colSpan=2
+   title="See scheduling in motion"
+   description="Watch how fast a booking comes together." %}
+{% bento-video label="Product tour · 1:24" /%}
+{% /bento-tile %}
+
+{% bento-tile
+   colSpan=1
+   title="Accept payments"
+   description="Charge for a meeting in one click." %}
+{% bento-payment amount="$40.00" label="Pay now" /%}
+{% /bento-tile %}
+
+{% bento-tile
+   colSpan=3
+   title="Embed anywhere"
+   description="Drop Cal.com into any site with one snippet." %}
+{% bento-code language="html" %}
+```html
+<script src="https://app.cal.com/embed.js"></script>
+<div data-cal-link="you/meeting"></div>
+```
+{% /bento-code %}
+{% /bento-tile %}
+{% /bento %}

src/content/en/pages/home.md

@@ -7,3 +7,26 @@ badge: Cal.com launches v6.4
 {% callout type="note" %}
 This site is authored in Markdoc and available in English, Spanish, French, and German.
 {% /callout %}
+
+## …and so much more
+
+{% bento %}
+
+{% bento-tile colSpan=2 title="See scheduling in motion" description="Watch how fast a booking comes together." %}
+{% bento-video label="Product tour · 1:24" /%}
+{% /bento-tile %}
+
+{% bento-tile colSpan=1 title="Accept payments" description="Charge for a meeting in one click." %}
+{% bento-payment amount="$40.00" label="Pay now" /%}
+{% /bento-tile %}
+
+{% bento-tile colSpan=3 title="Embed anywhere" description="Drop Cal.com into any site with one snippet." %}
+{% bento-code language="html" %}
+```html
+<script src="https://app.cal.com/embed.js"></script>
+<div data-cal-link="you/meeting"></div>
+```
+{% /bento-code %}
+{% /bento-tile %}
+
+{% /bento %}

src/content/es/pages/home.md

@@ -9,3 +9,33 @@ badge: Cal.com lanza v6.4
 {% callout type="note" %}
 Este sitio está escrito en Markdoc y está disponible en inglés, español, francés y alemán.
 {% /callout %}
+
+## …y mucho más
+
+{% bento %}
+{% bento-tile
+   colSpan=2
+   title="See scheduling in motion"
+   description="Watch how fast a booking comes together." %}
+{% bento-video label="Product tour · 1:24" /%}
+{% /bento-tile %}
+
+{% bento-tile
+   colSpan=1
+   title="Accept payments"
+   description="Charge for a meeting in one click." %}
+{% bento-payment amount="$40.00" label="Pay now" /%}
+{% /bento-tile %}
+
+{% bento-tile
+   colSpan=3
+   title="Embed anywhere"
+   description="Drop Cal.com into any site with one snippet." %}
+{% bento-code language="html" %}
+```html
+<script src="https://app.cal.com/embed.js"></script>
+<div data-cal-link="you/meeting"></div>
+```
+{% /bento-code %}
+{% /bento-tile %}
+{% /bento %}