Webinar Registration Split

Event99: Webinar Registration Split

A live session sign-up splitting a bordered container between the pitch, a hairline table of when and how long, and a checked takeaway list, beside a soft column holding a working registration card and the hosts.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/event99?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/event99?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/event99.tsx, the form36 capture piece it holds in the tile (installed to components/beste/piece/form36.tsx), and the badge23 component it uses for the eyebrow.

Quick start

The installed file exports event99Demo alongside the block: the exact props behind the preview above. Spread it to get a working registration page in one line.

import { Event99, event99Demo } from "@/components/beste/block/event99";

export default function WebinarPage() {
  return <Event99 {...event99Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Event99 } from "@/components/beste/block/event99";
import { Form36 } from "@/components/beste/piece/form36";

export default function WebinarPage() {
  return (
    <Event99
      badge={{ label: "Live session" }}
      heading="Migrating eleven years of records, walked through on real data"
      description="We open one practice's actual export on screen and go column by column."
      whenLabel="When"
      when="Thursday 12 June, 14:00 UK"
      lengthLabel="Length"
      length="45 minutes, plus questions until they run out"
      takeawaysTitle="What you will leave with"
      takeaways={[
        "A list of the fields your own export is likely to mangle",
        "The two places a migration usually loses a day",
      ]}
      media={
        <Form36
          label="Save me a seat"
          placeholder="you@practice.com"
          submitLabel="Register"
          finePrint="One reminder the day before, then the recording."
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      hostsTitle="Run by"
      hosts={[
        {
          name: "Priya Nandan",
          role: "Migration engineer, 40+ practices moved",
          avatar: { src: "/people/priya.jpg", alt: "Portrait of Priya Nandan" },
        },
      ]}
      note="Cannot make the time? Register anyway and the recording arrives the next morning."
    />
  );
}

Props

type TileImage = {
  src: string;
  alt: string;
};

type Host = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};

Behavior notes

• The two facts are separate label and value prop pairs rather than a generic array, so the table is always exactly when and how long. Each row renders only when its value is present, so a session with no fixed length simply drops that row.
• The registration form lives entirely inside the form36 piece. This block holds no form state and has no submit handler.
• The right column is flex flex-col justify-between, so the hosts and the note pin to the bottom while the registration card takes the space above them. The card is flex-1 with min-h-64, so it grows to fill whatever height the pitch column sets.
• The two columns split at lg, and the divider between them flips from lg:border-l to border-t when they stack, so the seam always runs across the join.
• Host rows use min-w-0 with truncate on both lines, so a long role ellipsizes rather than pushing the portrait out of the row.
• note carries its own border-t, which separates the recording caveat from the hosts above it.
• Times are plain strings, never parsed, so the page stays free of server and client locale differences.