Refine the LandingPage visual hierarchy, hero CTA, and responsive sections

[greatest0fallt1me]

Description

This is a UI/UX issue. src/components/LandingPage.tsx (~312 lines) is the first impression of Creditra and needs a strong, accessible visual hierarchy: a clear hero with a single primary CTA, well-spaced feature sections built on the design tokens, and clean behavior across breakpoints. Improve typographic rhythm, spacing scale, and responsiveness.

Requirements and Context

• Establish a clear type scale (hero h1 -> section h2 -> body) using semantic tokens, with a single high-emphasis primary CTA and a secondary action.
• Apply consistent vertical rhythm and a responsive section grid (stacks on mobile, multi-column on desktop).
• Ensure all CTAs are real buttons/links with visible focus and 4.5:1 text contrast over any gradient/background.
• Respect reduced-motion for any hero/scroll animations.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/landing-hierarchy

2. Implement changes
   • src/components/LandingPage.tsx
   • Landing styles in src/index.css or a dedicated CSS file
3. Test and commit
   • npm run dev at 360/768/1280px
   • npm run test
   • Include responsive screenshots in the PR

Example commit message

feat: refine landing page hierarchy and responsiveness

Acceptance Criteria

• Clear type scale and single primary CTA
• Sections stack/flow correctly across breakpoints
• CTA text meets contrast over backgrounds; focus visible
• Hero animations respect reduced-motion

Guidelines

• Design-token consistency; responsive; WCAG 2.1 AA: 1.4.3, 2.4.7
• Clear documentation and inline comments
• Timeframe: 96 hours