UI/UX: Redesign the marketing landing page hero and feature sections per the RemitWise brief

[Baskarayelu]

Description

The landing page (app/page.tsx) composes Hero, StatsSection, ValueProposition, HighlightCards, FeatureSection, WhyChooseStellar, PricingSection, and FAQSection. The branding brief and landing-page samples call for a dark, warm gradient theme, a clear "Global Payments Without Borders" hero with strong primary/secondary CTAs, modular feature cards with subtle shadows and minimal icons, and a quick-actions section reinforcing the core value. We need a redesign of the hero and feature sections to match this brief and to surface the core features (Instant Settlement, Smart Split, Yield Savings, Global Bills, Micro-insurance, Family Wallets).

Requirements and context

• UI/UX scope only.
• Reference app/page.tsx, components/Hero.tsx, components/FeatureSection.tsx, components/ValueProposition.tsx, and the brief in RemiteWise landing page samples.txt / RemitWise landing Design Page Issue.
• Apply the dark warm-gradient theme and bold typography.
• Hero: clear headline, concise copy, primary + secondary CTA.
• Feature cards: modular, subtle shadows, minimal icons, all six core features represented.

Suggested execution

• Branch: uiux/landing-hero-features-redesign
• Redline the hero and feature card sections in components/Hero.tsx and components/FeatureSection.tsx.
• Document the gradient/typography tokens and CTA hierarchy.
• Provide mobile-first layouts (the brief notes mobile versions are next).

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: heading order, CTA contrast, focus visibility.

Example commit message

feat(uiux): redesign landing hero and feature sections per brand brief

Guidelines

• Document gradient/typography decisions.
• Keep feature cards consistent and reusable.
• Timeframe: 96 hours