Staaarter

Dark Contact Band

An inverted, solid-dark closing panel: an oversized invitation heading sits on the left, a short paragraph and outline rounded-full button sit on the right, and a ruled row underneath lists plain-text email, phone, and studio address links.

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/dark-contact-band.json

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

Usage

The file also exports cta79Demo, 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 { Cta79, cta79Demo } from "@/components/blocks/cta/cta79";

export default function Page() {
  return <Cta79 {...cta79Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Let's talk about your project"Oversized invitation heading.
descriptionstringnoneShort paragraph beside the heading.
actionLabelstring"Get in touch"Label for the outline pill button.
actionHrefstring"#"Link target for the pill button.
emailstring"[email protected]"Email address rendered as a mailto link.
phonestring"+1 (555) 010-2040"Phone number rendered as a tel link.
addressstring"142 Harbor St, Brooklyn, NY"Plain-text studio address.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The pill button is an inert link (`render={<Link/>}`) pointing at `actionHref` (`#` by default); the email and phone items are plain mailto/tel anchors, none submit anything or connect to a real contact flow.
  • The dark treatment (`bg-foreground text-background`) is a deliberate, scoped monochrome exception for this band, not a sitewide theme change.