# What People Say Section — Summary & Build Guide

## 1. Summary

The "What People Say" section (`id="reviews"`) is a testimonial carousel. It shows one large quote card at a time. It has previous/next buttons, pagination dots and auto-rotation that pauses on hover or focus.

- Component: `src/components/Reviews.tsx` (client component; default export `Reviews`)
- Data: `src/lib/home-content.ts` (`testimonials`, type `Testimonial`)
- Shared UI: `SectionHeader` + `Highlight`, `SectionBackdrop` (glow left), `ScrollReveal`
- Images: `public/images/avatar-1.jpg`, `avatar-2.jpg`, `avatar-3.jpg` (`next/image`)
- Rendered in `src/app/page.tsx` via `<Reviews />`

### Header copy

- Eyebrow: "What People Say"
- Title: "Built with people. **Trusted by people.**" (highlighted phrase)
- No description line.

### Testimonials (from `testimonials`)

| # | Name | Role, Company | Quote (short) |
|---|------|---------------|---------------|
| 1 | Daniel Ferreira | CTO, PayStride | Took over a stalled platform and had it in production in nine weeks |
| 2 | Amelia Cardoso | VP Product, CareBridge | Clinic rollout across 42 locations with no missed release |
| 3 | Rohan Mehta | Head of Engineering, FleetPulse | Started with two engineers, now a full pod |

Each entry has `text`, `name`, `position`, `company` and `avatar`.

## 2. How It Is Built

### 2.1 Data model

```ts
export type Testimonial = {
  text: string;
  name: string;
  position: string;
  company: string;
  avatar: string; // public/ path
};
```

Add a testimonial by appending to `testimonials` and adding the avatar image. The slide count, dots and `aria-label`s all derive from `testimonials.length`. The component returns `null` when the array is empty.

### 2.2 State and behaviour

- `index` — the current slide. `go(n)` wraps around with `((n % count) + count) % count`.
- `paused` — set by mouse enter/leave and focus/blur on the carousel region.
- Auto-rotate: a `setTimeout` of `AUTO_MS = 6500` ms advances the slide. The effect depends on `[index, paused, count]`, so any manual navigation restarts the timer. It does nothing when paused, when there are fewer than 2 slides, or when `prefers-reduced-motion: reduce` matches.

### 2.3 Layout

```tsx
<section id="reviews" className="relative scroll-mt-24 overflow-x-clip py-20 sm:py-24 lg:py-28">
  <SectionBackdrop glow="left" />
  <div className="container">
    <SectionHeader … />
    <ScrollReveal delay={120} variant="scale" className="mx-auto mt-14 max-w-4xl">
      <div role="region" aria-roledescription="carousel" aria-label="Testimonials"> … </div>
    </ScrollReveal>
  </div>
</section>
```

- The carousel is capped at `max-w-4xl` and centered.
- A soft blue blurred halo sits behind the card (`bg-accent/[0.1] blur-3xl`, decorative).

### 2.4 Slide track

- A `rounded-[2rem] overflow-hidden` viewport contains a flex row that moves with `transform: translateX(-index * 100%)`, using a 700 ms custom cubic-bezier easing.
- Each slide is a `<figure role="group" aria-roledescription="slide" aria-label="n of N">` at `w-full shrink-0`.
- Off-screen slides get `aria-hidden` and `inert`, so keyboard and screen-reader users can't reach them.
- The track has `aria-live` set to `polite` only while paused, and `off` during auto-rotation so screen readers aren't interrupted.

### 2.5 Slide content

- A large faint `Quote` icon in the top-right corner (decorative, `aria-hidden`).
- `<blockquote>` in the display font, `text-xl` → `sm:text-2xl` → `lg:text-[1.7rem]`, wrapped in curly quotes.
- `<figcaption>` after a top border: a 56px round avatar with a white border and accent ring, the name in bold, and "Position, Company" in muted text.

### 2.6 Controls

- Previous/next: 44px circular buttons with `aria-label`s and a lift and blue tint on hover.
- Pagination: a `role="tablist"` of dots. The active dot is a wider pill (`w-8 bg-accent`), the others are small grey dots. Each has `role="tab"`, `aria-selected` and "Show testimonial n".

### 2.7 Step-by-step to recreate

1. Add the `Testimonial` type and `testimonials` array in `home-content.ts`, and the avatar images in `public/images/`.
2. Make sure `SectionHeader`/`Highlight`, `SectionBackdrop` and `ScrollReveal` exist.
3. Create `Reviews.tsx` with the state, auto-rotate effect, slide track and controls above.
4. Place `<Reviews />` in `src/app/page.tsx`.

## 3. Notes & Things to Review

- **Testimonials are sample content.** A comment at the top of `home-content.ts` says they are placeholders. The people, quotes and company names are not verified. The quotes also make specific claims ("nine weeks", "42 locations", "a full pod") and describe client-services work, which conflicts with the mobile-product positioning used in the Hero and Selected Work. Do not publish them as real endorsements; replace them with authorised testimonials or remove the section until you have some.
- **Names tie to placeholder products.** PayStride, CareBridge and FleetPulse are also placeholder products in Selected Work, and two of the quotes describe web and clinic platform work that no longer matches those cards (now mobile apps).
- **Avatars:** the three JPGs may be stock or generated photos of people who don't exist. Check that you have the right to use them; a real person's photo needs their consent.
- **Keyboard behaviour:** arrow-key navigation between slides isn't implemented; only the buttons and dots work. Consider adding it.
- **Dots as tabs:** the dots use `role="tab"` without a matching tabpanel relationship, so plain buttons with `aria-current` might be a cleaner pattern.
- **Auto-rotation:** it pauses on hover and focus, but not for touch users who never trigger hover. A visible pause control would help. The transition duration is not covered by `motion-reduce:` classes, though the global reduced-motion CSS and the rotation check both apply.
- **Single-card focus:** with only 3 testimonials and 6.5 s per slide, consider whether auto-rotation is needed at all.