## 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/stripe-com/f883ce83-9776-477f-9170-0bb4400c0ec7-1789067515-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/stripe-com/f883ce83-9776-477f-9170-0bb4400c0ec7-1789060217-full.webp
- Component on Kage: https://kage.design/component/stripe-gallery-2

## Before you start
Ask the user what their product does, who it serves, and what brand personality, colours, typography, and conversion goal should guide the work. Then apply the principles below to create an original closing CTA and footer for that product—not a reproduction of the reference.

## Build this section
Create a full-width website closing section with two connected parts:

1. **Getting-started CTA band**
   - Use a very light cool-neutral background, approximately `#F7F9FC`, with generous vertical padding.
   - Place content inside a centered max-width container of roughly 1200–1280px with responsive horizontal gutters of 32px desktop and 20px mobile.
   - Use a three-column desktop layout: a large CTA introduction on the left and two compact supporting action cards on the right.
   - Align all columns to a shared top baseline. Give the intro column approximately 48–52% of the available width and divide the remaining space between the two support columns.
   - The intro should contain a large, dark heading around 30–36px, medium-to-bold weight, followed by a muted explanatory paragraph around 18–20px with a comfortable 1.4 line-height.
   - Place primary and secondary actions beneath the paragraph in a horizontal button group. The primary button should use the product’s strongest accent colour with white text; the secondary button should be transparent or white with a subtle border and accent-coloured text.
   - Buttons should be around 48px high, have 6–8px corner radius, 16–24px horizontal padding, and a small directional arrow or equivalent affordance only if it fits the product’s visual language.
   - Each supporting card should begin with a small outlined square icon container, followed by a short bold title, one or two lines of muted supporting text, and a text link in the brand accent colour. Keep these cards visually lightweight rather than using heavy filled panels.
   - Use approximately 48–64px gaps between the main CTA and support columns, and 24–32px internal spacing within each card.

2. **Structured footer directory**
   - Separate the footer from the CTA band with a subtle horizontal rule, approximately `#E2E7EF`.
   - Use a white or near-white background, approximately `#FBFCFE`, and a four-column desktop grid with thin vertical dividers between columns. Let the dividers extend through the directory area, not just around individual cards.
   - Keep the footer inside the same max-width container and align its left and right edges with the CTA above.
   - Use grouped navigation rather than a simple undifferentiated link dump. Each group gets a dark heading around 15–16px, semibold, with links beneath it in muted slate text around 16px and 1.45–1.6 line-height.
   - Allow uneven column heights. Stack multiple related groups within a column with 48–64px vertical spacing so the information architecture remains clear.
   - Keep link lists dense but breathable: approximately 4–8px between adjacent links, 32–40px below a group heading, and 56–72px outer padding above and below the directory.
   - Prefer text links with no persistent underlines. On hover and keyboard focus, shift the link to the accent colour and/or add an underline. Make the entire interactive text target comfortably clickable.
   - Use dark navy or charcoal for headings, approximately `#14253A`, and muted body/link text around `#596575`. Use the product’s brand accent for primary buttons, important links, and sign-in or high-intent actions; choose an approximate accent such as `#635BFF` only as a placeholder if the user has no brand colour.
   - Include a distinct final account or high-intent link near the lower portion of the relevant column, separated from ordinary navigation by extra whitespace.

## Responsive behaviour
- At widths below roughly 900px, collapse the CTA into a vertical or two-row layout while preserving the intro’s priority and keeping supporting cards side by side only when they still have adequate width.
- At mobile widths, stack all CTA content, make buttons full-width or comfortably wrapping, and convert the footer into one or two columns depending on available space.
- On very small screens, stack footer groups vertically. Remove or soften vertical dividers so they do not create cramped visual noise, while retaining horizontal separators where useful.
- Ensure long link lists wrap naturally and do not cause horizontal scrolling.

## Interaction and accessibility
- Use semantic `nav`, `footer`, headings, lists, and grouped links.
- Provide visible keyboard focus states with sufficient contrast and never rely on colour alone.
- Give icon buttons or links accessible labels; decorative icons should be hidden from assistive technology.
- Preserve a clear reading order: CTA heading and primary action first, supporting pathways second, footer directory last.

## Never
- Never copy the reference’s logos, product names, navigation labels, CTA copy, link names, or exact information architecture.
- Never reuse its illustrations, imagery, icons, or branded marks; create simple generic icons or use the user’s own icon system.
- Never reproduce the exact colours, typography, dimensions, spacing values, or visual details if they belong to the reference brand.
- Never make the footer feel like an unstructured wall of links, and never sacrifice mobile usability for desktop density.