## 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/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060648-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060611-full.webp
- Component on Kage: https://kage.design/component/pitch-testimonials

## Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original testimonial section for that product—not a copy of the reference.

## Build a testimonial social-proof section
Create a full-width testimonial component that feels energetic, credible, and editorial. It should sit on a light, mostly white page and present customer quotes as a horizontally arranged set of cards, with a central trust statement visually interrupting the row.

### Layout and alignment
- Use a full-bleed section with horizontal overflow or a carousel track that can extend beyond the viewport edges on desktop.
- Arrange 3–5 cards in one horizontal row. Let the outer cards be partially cropped or offset beyond the container to create a sense of continuation.
- Place a compact trust statement in the middle of the row as a white panel or whitespace block rather than another testimonial card. Use it to communicate a broad customer metric, such as teams served, customers reached, or projects completed.
- Keep the testimonial cards tall and compact, approximately 300–360px wide and 260–320px high on desktop. On smaller screens, show one card at a time with a visible portion of the next card.
- Align quote text to the top, attribution toward the bottom, and the customer mark or text lockup beneath the attribution.
- Add a centered text link below the testimonial row, separated by generous whitespace. Include a subtle arrow icon indicating forward navigation to customer stories or case studies.
- Constrain the main content to a responsive max-width around 1200–1320px, while allowing the card track to visually break out of that container.

### Typography hierarchy
- Use a modern, friendly sans-serif with slightly soft geometric forms.
- Quote text should be bold and prominent, around 20–25px on desktop with a 1.15–1.25 line height.
- Customer name and role should be smaller and calmer, around 13–15px, with enough contrast to remain readable.
- The trust statement should be the strongest typographic element in the row: bold, compact, and around 28–36px, with intentional line breaks for emphasis.
- The supporting link should be semibold at 14–16px.
- Use sentence case and avoid excessive uppercase labels unless the user's brand uses them.

### Colour
- Keep the surrounding page near-white: `#FFFFFF` or `#FCFCFE`.
- Use an expressive card palette derived from the user's brand. A suitable starting direction is saturated violet `#5B20E8`, electric purple `#7A35F2`, and a soft lavender gradient ending near `#B38AF3`.
- Use white or near-white quote text such as `#FFFFFF` on dark and gradient cards.
- Use a dark ink colour such as `#171126` for the trust statement and link.
- Keep the trust panel unfilled or white so it creates visual rhythm between colourful cards.
- Ensure all text meets accessible contrast requirements, especially on lighter gradient areas.

### Borders, radius, and depth
- Give each testimonial card a generous 20–26px corner radius, with a slightly more pronounced bottom radius if it suits the design.
- Avoid heavy borders. If needed, use a translucent white border such as `rgba(255,255,255,.18)` on coloured cards.
- Use little or no shadow; the contrast between the bright cards and white page should provide hierarchy. A very soft shadow like `0 8px 30px rgba(35,15,90,.08)` is acceptable.
- Keep the trust panel flat and spacious rather than card-like.

### Content and interaction
- Use believable but fictional customer quotes tailored to the user's product. Include a specific outcome or product benefit rather than generic praise.
- Include a name, role, and company text lockup, but do not reuse any reference-company names or logos.
- If implemented as a carousel, support drag/swipe, keyboard focus, and previous/next controls. Keep controls visually quiet and reveal them on hover or focus where appropriate.
- Add a gentle hover interaction: cards may lift by 2–4px or shift slightly, with a 180–240ms ease transition. Do not over-animate the text.
- Make the section responsive: stack or horizontally scroll cards on mobile, preserve comfortable 20–24px gutters, and keep the trust statement readable as a standalone block.
- Respect reduced-motion preferences and never rely on auto-scrolling for essential content.
- Include accessible labels for carousel controls and visible focus states.

## Never
- Never copy the reference layout pixel-for-pixel; reinterpret the structure for the user's product and brand.
- Never use logos, product names, company names, people, quotes, metrics, or copy from the reference.
- Never reuse illustrations, photographs, icons, or imagery from the reference.
- Never make the carousel inaccessible, dependent on hover, or impossible to navigate with touch and keyboard.
- Never sacrifice quote readability for decorative gradients or excessive animation.