CTA Section With Interactive Project Brief

A closing call to action where visitors build a one-line brief from chips, and the button and kick-off date update as they pick.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Features

Chips for what, when and how much; the ink fill slides from the old pick to the new one
The picks read back as one sentence, with each choice rising in as it changes
The primary button rewrites itself ("Start a 4-week marketing site") and carries the brief into the email subject
The next open kick-off and the launch date it leads to, worked out from today after the page loads
The brand's wordmark sits huge and faded along the card's bottom edge, as texture behind nothing important
Keyboard-reachable chips with pressed states, and every motion off for reduced motion

Best for: Agencies, studios and freelancers who want the last section of the page to turn a visitor into a scoped enquiry.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Prop	Type	Default	Description
eyebrow	string	-	Optional mono label above the headline.
title	string	-	The headline.
titleMuted	string	-	Optional second headline line, in grey.
description	string	-	The line under the headline.
contact	{ lead: string; label: string; href: string }	-	Optional plain link for people who'd rather write.
fields	BriefField[]	-	The questions: id, label, the lead words in the sentence, options (label, phrase, token, weeks) and isOptional.
action	{ template: string; href: string; briefParam?: string }	-	The button: a label with {fieldId} placeholders, where it goes, and the query parameter that carries the brief.
schedule	{ label; launchLabel; leadDays: number; weekday: number }	-	How the next kick-off is found: days of notice and the weekday projects start on.
slipLabel	string	-	The label above the written brief.
optionalLabel	string	-	The word beside an optional question.
reassurance	string[]	-	Short promises with ticks beside the button.
wordmark	ReactNode	-	The brand's name or logo, set huge and faint along the bottom.
locale	string	"en-GB"	Formats the dates.
className	string	-	Extra classes for the section.

Is the CTA Section With Interactive Project Brief call to action section free to use?

Yes. CTA Section With Interactive Project Brief is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does CTA Section With Interactive Project Brief work with Next.js and React?

Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).

Can I use CTA Section With Interactive Project Brief in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does CTA Section With Interactive Project Brief need installed?

motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is CTA Section With Interactive Project Brief accessible?

Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.