feat: redesign LearnHub landing page

[Jidnyasa-P]

Description

Redesigns the LearnHub landing page into a cohesive, responsive product experience while preserving the existing course APIs, authentication, enrollment flow, and mock-payment behaviour.

Fixes #4

Changes

• Rebuilt the landing-page navigation and hero section

• Added clear product positioning and calls to action

• Replaced the stock-photo hero with a custom product-style learning visual

• Redesigned trending course cards with:

  • Generated course thumbnails
  • Category tags
  • Difficulty labels
  • Short descriptions
  • Educator information
  • Pricing and enrollment details

• Redesigned the search and access filter controls

• Added loading, API-error, retry, and empty-result states

• Preserved free and paid enrollment flows

• Added a full responsive footer

• Added About, Contact, social, Privacy, and Terms links

• Added placeholder Privacy Policy and Terms & Conditions routes

• Added accessible focus indicators

• Added reduced-motion support

• Improved mobile, tablet, and desktop responsiveness

Design approach

The visual system uses a warm editorial style with paper, ink, coral, cobalt, mint, and acid-green accents. It intentionally avoids generic neon gradients, excessive glassmorphism, and template-like AI styling.

Course artwork is generated from existing course titles and categories, so no new image assets or external image dependency are required.

Testing

• Tested at 375px, 430px, 768px, 1024px, and 1440px
• Tested title and category search
• Tested Free and Paid filters
• Tested empty search results
• Tested API loading and failure states
• Tested logged-out enrollment redirect
• Tested free-course enrollment
• Tested paid-course payment modal
• Tested footer links
• Tested Privacy and Terms placeholder pages
• Ran npm run lint
• Ran npm run build

Screen Recording

Screen.Recording.2026-07-14.160819-compressed.mp4

Screenshots

[udaycodespace]

@Jidnyasa-P LGTM

1. Great work on the landing page redesign. Looks good and the testing details are clear.
2. Small request: if you used any skill.md or implementation notes, please add them to the repo docs for future contributors.

[Jidnyasa-P]

2. if you used any skill.md or implementation notes, please add them to the repo docs for future contributors.

Glad you liked the design.
For this contribution, I based the work on the existing repository structure, issue requirements, and current codebase, so there wasn't any SKILL.md content to document.

If future contributions introduce a project-specific SKILL.md or implementation guide, I'll make sure to add or update the corresponding documentation in the repository.

Also if you liked my design please do add bonus label to my PR like good-pr , good-ui. Thank you

[udaycodespace]

Hi @Jidnyasa-P , please make an Excel tracker for this issue with issue details and labels added. If the labels are still not reflected in the dashboard after 4 days, update the tracker and inform me. Thanks!