Webinar Registration Split

A bordered container split into two columns. The left column carries the pitch heading and description, a hairline-divided table of practical facts (When, Duration), and a checked takeaway list. The right column is a softer-background panel holding a plain name/email registration form (no real submit handler) and a small host blurb with name, title, and avatar below it. Perfect for a live webinar or online workshop landing section.

By Staaarter Team

Event

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/webinar-registration-split.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/event/event26.tsx instead.

Usage

The file also exports event26Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Event26, event26Demo } from "@/components/blocks/event/event26";

export default function Page() {
  return <Event26 {...event26Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading, e.g. "Free webinar".
heading	ReactNode	none	Pitch heading in the left column.
description	string	undefined	Supporting copy under the heading.
facts	WebinarFact[]	none	Practical facts rendered as a hairline-divided label/value table (e.g. When, Duration).
takeawaysHeading	string	"What you'll learn"	Heading above the checked takeaway list.
takeaways	string[]	none	Takeaway items, each rendered with a check-circle icon.
host	{ name: string; title: string; avatar?: { src: string; alt: string } }	none	Host/speaker blurb shown below the registration form.
className	string	none	Extra classes for the outer section element.

Types

interface WebinarFact {
  label: string;
  value: string;
}

Behavior notes

This is a static, presentational block: the registration form has no onSubmit handler and the Save my seat button performs no real submission — there is no backend wired up.
The name and email inputs are plain, uncontrolled <Input> elements with real <Label htmlFor> associations, but they do not validate or persist anything.
The host blurb is a fixed name/title/avatar, not pulled from a real speakers directory.

More Event Blocks

View all →

conference-hero-with-image

Conference Hero with Image

Split hero with a featured photo, date badge, location, attendee stat, and dual CTAs.

minimal-event-hero

Minimal Event Hero

Centered, image-free hero with an oversized heading, date/location line, and two CTAs.

event-hero-with-ticket-pricing

Event Hero with Ticket Pricing

Centered hero with an early-bird price, a strikethrough original price, and a deadline note.

event-hero-with-social-proof

Event Hero with Social Proof

Hero with a heading, a 3-stat strip (attendees/speakers/countries), and a trusted-by company row.

personal-schedule-builder

Personal Schedule Builder

Interactive session picker that lets attendees build their own conference agenda.

team-discount-calculator

Team Discount Calculator

Live quantity stepper that applies tiered group discounts to a seat total.