Staaarter

Demo Request Split Form

A closing call-to-action split in two: the left side lists 3-4 short promises about what a demo call is like, each separated by a hairline rule, while the right side holds a compact form for name, work email, and team size, a submit button, and fine print about response time.

By Staaarter Team
CTA
Docs
Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/demo-request-split-form.json

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

Usage

The file also exports cta77Demo, 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 { Cta77, cta77Demo } from "@/components/blocks/cta/cta77";

export default function Page() {
  return <Cta77 {...cta77Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"See it running on your own data"Heading above the promises list.
promisesstring[]noneShort reassurance statements about the demo, separated by hairline rules.
actionLabelstring"Request a demo"Label for the submit button.
finePrintstringnoneSmall print shown under the submit button.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • Fully static: this is a Server Component, so the form has no onSubmit handler and every input is uncontrolled, nothing is sent anywhere on submit.
  • The hairlines between promises use `divide-y divide-border` on the list container, which is equivalent to a `border-t border-border` on every item but the first.