Staaarter

Split Screen Launch

A two-column, full-height coming-soon screen. One side is a solid brand-color panel with a wordmark, monospace eyebrow, heading, and a working email-notify form with a success state. The other side is a full-bleed photo with a floating launch-date label overlaid in the corner.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/split-screen-launch.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon46.tsx instead.

Usage

The file also exports comingsoon46Demo, 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 { ComingSoon46, comingsoon46Demo } from "@/components/blocks/coming-soon/comingsoon46";

export default function Page() {
  return <ComingSoon46 {...comingsoon46Demo} />;
}

Props

PropTypeDefaultDescription
wordmarkstring"Acme"Small wordmark above the eyebrow.
eyebrowstring"(coming soon)"Monospace parenthetical eyebrow.
headingstring"Something new is on the way"Main heading in the brand panel.
descriptionstring"We're putting the finishing touches..."Supporting copy under the heading.
launchDateLabelstringnoneText shown in the floating launch-date pill, e.g. "March 2026".
imageMediaSlotImagenoneFull-bleed photo for the right-hand panel, falls back to a placeholder.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The email form is real client state: submitting sets `submitted` and swaps the form for a success message, nothing is sent over the network.
  • The floating launch-date label is static text, purely decorative positioning over the image.
  • The image column is hidden below the lg breakpoint (hidden lg:block), so on small screens only the brand panel with the form renders.