ankhbayar/Assist_Design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity
Assist_Design/docs/plans/2026-03-04-trust-strip-redesign-design.md
barsa a1431cec09 refactor: update support service and contact form components 
- 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.
2026-03-04 16:16:14 +09:00

2.8 KiB
Raw Blame History

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