feat(frontend): enhance landing page with hero, features, how-it-works, and live course preview

[portableDD]

Description

The landing page is the primary growth driver and the first thing potential learners see. It needs a compelling hero section, a features section, a how-it-works visual, and a sample course preview — all designed to convert visitors into learners.

Background

• frontend/app/(marketing)/page.tsx may be minimal or partially built
• Target audience: busy professionals wanting no-commitment crypto education
• Key differentiators: bite-sized lessons, DAO governance, currency hub, Stellar certificates
• Design: dark theme #0a0a0a background, #00ff88 accent green

Implementation Guide

Update frontend/app/(marketing)/page.tsx with sections:

Hero: bold headline "Learn Web3 in 5-Minute Bites", tagline "No commitment. Real knowledge. Verifiable credentials.", two CTA buttons ("Start Learning Free" and "Explore Courses").

Features: four feature cards with Lucide icons — "Bite-sized Lessons", "DAO Governance", "Currency Knowledge Hub", "Stellar Certificates".

How it works: three-step visual — "Pick a Course", "Learn in 5 Minutes", "Earn Your Certificate".

Sample courses: fetch 3 published courses from GET /api/v1/courses?limit=3 and render course cards.

Footer with links to About, FAQ, GitHub (https://github.com/Nexacore-Org/ByteChain-Academy), and Telegram (https://t.me/ByteChainAcademy).

Acceptance Criteria

• Hero section with headline, tagline, and two CTA buttons
• Features section with 4 feature highlights and icons
• How it works 3-step visual
• Sample course cards from real backend data
• Footer with all required links opening in new tab
• Page is fully mobile responsive
• Matches dark theme with green accents

Complexity: High - 200 points
Join: https://t.me/ByteChainAcademy | Contact: contact@nexacore.org