## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/v0-dev/99e42d3b-29f6-491c-8f06-cd6295e0d986-1789073272-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/v0-dev/99e42d3b-29f6-491c-8f06-cd6295e0d986-1789073248-full.webp
- Component on Kage: https://kage.design/component/v0-cta

## Before you start
Ask the user what their product is, who it is for, and what brand personality, colour palette, and primary action they want to express. Then apply the principles below to create an original CTA section for that product—not a copy of any reference.

## Build this section
Create a full-width, closing call-to-action section designed to sit beneath a content-heavy product or gallery area. Its job is to give the page a calm, decisive ending and direct attention to one primary action.

### Layout and alignment
- Use a clean, centered composition with a generous amount of vertical whitespace above and below the content.
- Keep the content in a narrow column, approximately 600–760px wide, so the headline and supporting copy remain easy to scan.
- Stack the elements vertically: large headline, short supporting sentence, then one primary button.
- Center-align every element, including the button.
- Preserve a strong visual separation from the section above; the CTA should feel like a deliberate pause rather than another card or content block.
- Make the section responsive: reduce the vertical padding on small screens while keeping the centered hierarchy and comfortable side gutters.

### Typography
- Use a modern sans-serif with a confident, neutral character.
- Set the headline in a bold or semibold weight, around 44–52px on desktop with tight line-height around 0.98–1.08. Use a smaller 32–38px size on mobile.
- Keep the headline concise—ideally one line on desktop—and use near-black text, approximately `#171717`.
- Set the supporting sentence at approximately 18px desktop / 16px mobile, with relaxed line-height around 1.45–1.6 and muted gray such as `#737373`.
- Maintain a clear typographic step between the headline and supporting text; do not overuse labels, eyebrow text, or secondary links.

### Spacing
- Use approximately 128–180px of top padding and 80–120px of bottom padding on desktop, depending on the surrounding page rhythm.
- Leave about 12–16px between the headline and description.
- Leave about 32–36px between the description and button.
- Keep the button compact and intentional rather than oversized.

### Colour and surfaces
- Use a clean white or very slightly warm background, approximately `#FFFFFF` or `#FAFAFA`.
- Use `#171717` or `#181818` for the primary button and headline.
- Use white text on the button, approximately `#FFFFFF`.
- Avoid gradients, decorative colour fields, illustrations, or visual noise unless the user's brand specifically requires them.

### Button and interaction
- Include exactly one prominent primary action with concise, product-specific text.
- Style it as a dark pill or softly rounded button, approximately 56–64px tall with 22–28px horizontal padding and a radius of 999px or roughly 14–18px.
- Use a medium or semibold label around 14–16px.
- On hover, slightly lighten the button or translate it upward by 1–2px; use a quick 150–200ms ease transition.
- On keyboard focus, show a clearly visible focus ring with sufficient contrast.
- Ensure the entire button has an accessible label, adequate touch target size, and a disabled state if the product flow needs one.

### Responsive and accessibility rules
- Prevent the headline from touching the viewport edges; use at least 20–24px horizontal padding on mobile.
- Let the headline wrap naturally rather than forcing awkward line breaks.
- Keep contrast at WCAG AA or better and preserve visible focus states.
- Use semantic section, heading, paragraph, and button/link elements.

## Never
- Never copy the reference's logos, product names, exact wording, or brand-specific identity.
- Never reuse the reference CTA copy such as “Start building with v0,” “Go from idea to production in seconds with smart, secure infrastructure,” or “Get Started.”
- Never include logos, illustrations, screenshots, imagery, or decorative assets from the reference.
- Never turn the CTA into a complex card, multi-column block, or multi-action footer.
- Never add unnecessary badges, navigation, social proof, gradients, or secondary CTAs unless the user's product genuinely needs them.