Contact CTA
A centered contact call-to-action section: a small availability pill, a large headline, a short paragraph, and two actions, a primary button and a direct email link. Perfect for freelancer/agency contact sections.
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/contact-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta68.tsx instead.
Usage
The file also exports cta68Demo, 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 { Cta68, cta68Demo } from "@/components/blocks/cta/cta68"; export default function Page() { return <Cta68 {...cta68Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| availabilityLabel | string | "Available for new projects" | Text inside the small availability pill above the headline. |
| heading | string | "Let's talk about your next project" | Large headline. |
| description | string | "Whether you have a fully scoped brief or just an idea on a napkin, I'd love to hear about it. Usually reply within a day." | Short supporting paragraph. |
| primaryLabel | string | "Get in touch" | Label for the primary button. |
| primaryHref | string | "#" | Link target for the primary button. |
| string | "[email protected]" | Email address shown and linked as a `mailto:` action. | |
| className | string | none | Extra classes for the outer section element. |
Behavior notes
- The availability pill has a static primary-colored dot; it does not reflect any real, live availability status, it's a fixed decorative badge.
- The primary button is an inert link (`render={<Link/>}`) pointing at `#` by default; the email action is a real `mailto:` link built from the `email` prop.
More CTA Blocks
View all →centered-newsletter-cta
Centered Newsletter CTA
Minimal centered call-to-action with heading, description, and action buttons.
split-layout-newsletter-cta
Split Layout Newsletter CTA
Two-column call-to-action with a decorative image on one side and a feature list plus subscribe form on the other.
newsletter-social-proof-cta
Newsletter CTA with Social Proof
Newsletter call-to-action with an avatar stack, subscriber count, and a testimonial quote.
banner-cta
Banner CTA
Horizontal banner call-to-action with heading and action buttons side by side.
stats-cta
Stats CTA
Call-to-action section with impressive statistics and trust indicators above action buttons.
multi-card-cta
Multi-Card CTA
Three action cards side by side, each offering a different path to conversion.