A call to action with a headline and two buttons above a product screenshot, built from components, that rises from the bottom edge and is cropped by the section.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/cta-03.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Cta03 } from '@/components/cta-03/cta-03'
export default function Page() {
return (
<main>
<Cta03 />
</main>
)
}Files
What the command adds to your project, and where.
components/cta-03/cta-03.tsxThe section. Import it into any page and render it; it fills the width of its parent.
It also installs the components it is built from, unless you already have them: Button.
The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in CTA & footer
- CTA 01A split call to action on an inverted card: headline and one sentence on the left, two buttons on the right; dark on a light page and light on a dark one.
- CTA 02A centred call to action with an inline email field that validates and confirms, and three short customer quotes underneath.
- CTA 04The quietest call to action: one sentence with the action set inside it as an underlined link, between two hairlines and a lot of empty space.
- CTA 05A call to action you can try: type a shop name or paste its address and a one-page site is drawn beside the field as you type, then Continue carries the name into the sign-up link.
- CTA + Footer 01A call to action with an email field that checks its input, then a four-column footer with a newsletter sign-up and legal links.