a1431cec09
- Changed the subject line in the SupportService to include the contact name for better context. - Removed the subject field from the ContactForm state and schema, streamlining the form. - Updated the HeroSection text to better reflect the services offered, enhancing clarity and appeal.
58 lines
2.8 KiB
Markdown
58 lines
2.8 KiB
Markdown
# 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
|