---
layout: split
title: Two ways to tell it
---

<div>
  Narrative on the left: why decks belong in git, diffed and
  reviewed like everything else you ship.
</div>

<div>
  <MetricCard value="42%" label="Activation lift" delta="+18%" />
  <MetricCard value="1,200" label="Teams onboarded" />
</div>

camp add split

bunx shadcn@latest add https://campfire-deck.vercel.app/r/split.json

import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

export type SplitLayoutProps = ComponentProps<"main"> & {
  /** From the slide's `title` frontmatter. */
  title?: string;
};

/** The two-column workhorse: children flow into equal side-by-side panels. */
export default function SplitLayout({
  title,
  className,
  children,
  ...props
}: SplitLayoutProps) {
  return (
    <main
      className={cn("flex h-full flex-col gap-10 p-24", className)}
      data-slot="split-layout"
      {...props}
    >
      {title ? (
        <h1 className="font-bold font-heading text-6xl tracking-tight">
          {title}
        </h1>
      ) : null}
      <div
        className="grid flex-1 grid-cols-2 items-center gap-16 text-2xl leading-relaxed"
        data-slot="split-layout-panels"
      >
        {children}
      </div>
    </main>
  );
}