## 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/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060399-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060376-full.webp
- Component on Kage: https://kage.design/component/arc-testimonials-2

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, and typography are. Then apply the principles below to my product rather than reproducing the reference literally.

## Build this section
Create a responsive testimonial section followed immediately by a contrasting call-to-action band. The component should feel optimistic, playful, editorial, and highly confident without relying on logos, recognizable brand assets, or copied wording.

### Structure and layout
- Use a warm, lightly tinted background for the testimonial area, approximately `#FFFDEB` or another soft brand-compatible cream.
- Arrange four testimonials in an even horizontal grid on desktop, with generous outer gutters and consistent column widths. Each column should be independently readable and vertically balanced.
- Place a small row of three abstract, hand-drawn-style outline symbols centered above the testimonials. They may suggest celebration, connection, or discovery, but must be newly designed for the product.
- Center-align every testimonial: the quote is the visual anchor, with the attribution directly below it.
- Make the quote block occupy a consistent visual height where practical, while allowing natural wrapping. Use responsive cards or stacked columns on smaller screens: two columns at tablet widths and one column on mobile.
- Add a full-width CTA band directly below the testimonials. Use a saturated contrasting colour, such as electric blue `#3027E8`, with subtle grain or texture only if it can be implemented accessibly and without distracting from the content.
- Center the CTA heading and place one prominent button below it. Keep the CTA band compact enough to feel like a continuation of the testimonial section, not a separate page hero.

### Typography hierarchy
- Use a rounded, friendly sans-serif or the product’s own display typeface. Choose a highly legible fallback stack.
- Testimonials should be large and bold, roughly `28–32px` on desktop with a tight line-height around `0.98–1.08`, reducing fluidly on smaller screens.
- Use sentence-case editorial quotes with strong line breaks created naturally by the column width, not manually forced for every viewport.
- Attribution pills should be uppercase or compactly styled at approximately `11–13px`, with medium or bold weight and slight tracking.
- The CTA heading should be bold and approximately `26–30px`, with one short phrase emphasized through italic, a contrasting weight, or another restrained typographic treatment.

### Spacing and alignment
- Give the testimonial area generous vertical padding, approximately `48–64px` above and `52–72px` below.
- Keep the icon row close to the quote grid, with around `24–32px` between icons and quotes.
- Use approximately `24–40px` horizontal gaps between testimonial columns and `24–30px` between each quote and its attribution.
- Give the CTA band around `60–80px` of vertical padding, with `16–24px` between the heading and button.
- Align the entire composition to a centered max-width container, approximately `1180–1280px`, while allowing the colour bands to run edge to edge.

### Colour, borders, and shape
- Use a dark saturated blue or the product’s primary accent for text, approximately `#3035C9` to `#3A32D4`.
- Keep the warm background and strong blue text high-contrast; verify contrast for all text and controls.
- Attribution elements should be transparent or background-matched with a `2px` solid blue border, pill-like corners around `8–10px`, and horizontal padding around `12–16px`.
- The CTA button should be white or near-white, with dark blue text, a radius around `10–12px`, and a minimum comfortable height of `44px`.
- Avoid card shadows and heavy container borders. The open grid and colour fields should provide the visual structure.

### Interaction and accessibility
- If testimonials are clickable, make the entire attribution pill or testimonial link clearly keyboard-focusable and provide a visible focus ring.
- Add a subtle hover treatment to attribution pills, such as a filled blue background with cream text, while preserving readable contrast.
- Keep the layout static by default; only add a carousel on mobile if the content volume requires it, and include accessible previous/next controls, labels, and a pause-free interaction model.
- Respect `prefers-reduced-motion`; do not animate the texture, icons, or quotes in a way that is necessary for comprehension.
- Use semantic section headings, blockquotes, cite elements, accessible button labels, and meaningful responsive behaviour.

## Never
- Never use the reference product’s logo, name, icons, trademarked symbols, or brand assets.
- Never copy the reference testimonials, usernames, CTA wording, or any other product-specific copy.
- Never use the reference page’s exact illustrations, textures, imagery, or decorative marks.
- Never hardcode the layout around the supplied screenshot; make the grid fluid and adapt it to the user’s product, content length, and brand system.
- Never sacrifice text contrast, keyboard access, mobile readability, or semantic markup for visual similarity.