[UI/UX] Implement Pixel-Perfect Landing Page from Figma (Desktop & Mobile)

[Rampop01]

Issue #60

[UI/UX] Implement Pixel-Perfect Landing Page from Figma (Desktop & Mobile)

🔴 Priority: Critical
Difficulty: Hard
Estimated Effort: 3-4 days
Relevant Files: src/app/page.tsx, src/components/landing/HeroSection.tsx, src/components/landing/HowItWorks.tsx, src/components/landing/Footer.tsx
Labels: ui, enhancement, priority:critical, figma

Requirements

1. Section Implementation

   • Translate the Figma Landing Page exactly into responsive Tailwind CSS for both Desktop and Mobile viewports.
   • Required sections: Hero section (Value proposition), Product Overview (Buy, Sell, Swap, Repair), How Veloxous Escrow Works, Stellar & USDC integration showcase, Verified Technicians / Repair Network section, and Footer.
   • Strictly adhere to the 'Emerald Tech' green (#10B981) and 'Deep Navy' (#0B0F19) primary palette and Space Grotesk headings / Inter body typography.
   • Add subtle scroll-reveal animations using Framer Motion on the 'How Veloxous Works' and Features sections to match the premium, high-tech brand.

2. Screenshot Requirement

   • Upon completion, add a screenshots/ folder inside src/components/landing/.
   • Capture and commit screenshots of the Desktop and Mobile implementation of every major section (Hero, Features, Footer).
   • Screenshots must demonstrate visual alignment with the original Figma frames — use a side-by-side comparison image if possible.

3. Testing Requirements

   • Perform visual regression testing using Chromatic or Percy to verify the implementation matches Figma spacing and typography constraints.
   • E2E test (Playwright): Navigate to the landing page, assert that all key sections are visible and the CTA button links to the correct route.

---