Does CTA Landscape work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

CTA Landscape

A moonlit photo card with a silver metal headline and a liquid-metal button.

Type: CTA section
Styles: Dark, Futuristic
Licence: Charcoal UI Pro

About CTA Landscape

CTA Landscape sets a moonlit photo card with a silver metal headline and a liquid-metal button.

It is a full-width cta section for React and Tailwind CSS 4, in a dark and futuristic style. Preview it at any width above, then install it with one command.

When to use CTA Landscape

Premium product sign-ups.
Luxury and hardware brands.
Launch closers.
Membership offers.

How it is built

Liquid Metal renders the text and button; the photo and copy are props.

It is composed from Liquid Metal, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with CTA Landscape

CTA Landscape is part of 2 full templates, so you can see it in a finished page.

Timberline template: Cabins within three hours of the city.
Seedling template: Raise money for something that grows.
CTA Ember: A React closing CTA band with rising embers and a shimmering button
CTA Newsletter: A React newsletter CTA that validates inline and confirms with a drawn check
CTA Download: A React app download CTA with store buttons and a QR code for desktop
CTA Terminal: A developer React CTA with a copyable install command and a typing terminal
Liquid Metal: A React liquid metal ring for buttons and badges, in chromatic, silver or gold

Install CTA Landscape

npx shadcn@latest add @charcoal/cta-landscape

CTA Landscape is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does CTA Landscape work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Liquid Metal: A ring of moving liquid metal around buttons, icons and badges: a wandering halo, a pool of reflected light, and a highlight that swings towards the cursor. Chromatic, silver and gold, plus metal text.

CTA Landscape as Markdown