# TrustStrip Redesign — Bold & Impactful Stats Strip

**Goal:** Replace the minimal icon+text trust strip with a visually impactful stats section featuring large animated numbers, richer descriptors, and a polished gradient background.

**Tech Stack:** React 19, Tailwind CSS, lucide-react icons, existing `useInView` hook

---

## Stats Data

| Number | Suffix | Descriptor             | Icon       | Animated          |
| ------ | ------ | ---------------------- | ---------- | ----------------- |
| 20     | +      | Years in Japan         | Clock      | Yes               |
| 100    | %      | English Support        | Globe      | Yes               |
| 10,000 | +      | Customers Served       | Users      | Yes               |
| —      | —      | Foreign Cards Accepted | CreditCard | No (static label) |

## Layout

- Full-width strip between HeroSection and ServicesCarousel (same position as current)
- 4 stats centered in a row with vertical dividers between them on desktop
- Mobile: 2x2 grid, no dividers
- Each stat: icon in soft primary-tinted circle, large bold number, small muted descriptor below

## Visual Treatment

- **Background**: subtle gradient `from-surface-sunken via-background to-info-bg/30` — no hard borders, blends with hero
- **Vertical dividers**: thin `border-border/30` lines between stats (desktop only)
- **Numbers**: `text-3xl sm:text-4xl font-extrabold text-primary`
- **Descriptors**: `text-sm text-muted-foreground font-medium`
- **Icon circles**: `w-10 h-10 rounded-full bg-primary/10` with `text-primary` icon inside
- **4th stat** ("Foreign Cards Accepted"): displays as bold label text with same visual weight, no count-up

## Animation

- Existing `useInView` hook detects when strip enters viewport
- New `useCountUp(target, duration, enabled)` hook animates number from 0 → target over ~1.5s using `requestAnimationFrame`
- Staggered start: 0ms, 100ms, 200ms delays for the 3 animated stats
- Entire strip fades in (`opacity-0 translate-y-8` → `opacity-100 translate-y-0`) matching other sections

## Component Structure

- **TrustStrip.tsx** — `"use client"`, contains stat data array + layout, uses `useInView` and `useCountUp`
- **useCountUp.ts** — new hook: `useCountUp(target: number, duration?: number, enabled?: boolean)` returns current animated value
- Exported from existing barrel files (`hooks/index.ts`, `components/index.ts`)

## Files Changed

1. **Modify**: `apps/portal/src/features/landing-page/components/TrustStrip.tsx` — complete rewrite
2. **Create**: `apps/portal/src/features/landing-page/hooks/useCountUp.ts` — new hook
3. **Modify**: `apps/portal/src/features/landing-page/hooks/index.ts` — add `useCountUp` export

## Accessibility

- `aria-label="Company statistics"` on the section
- Numbers use semantic text (not images)
- Respects `prefers-reduced-motion`: skip count-up animation, show final values immediately