fix: make landing page fully responsive for mobile devices (#3)

[hazzikri]

Fixes #3

Summary

Made the Crystal-PDF landing page fully responsive across all mobile viewport widths (320px–768px+) while preserving the existing desktop design pixel-perfectly.

What Changed

� Mobile Navigation (Hamburger Menu)

• Added animated hamburger toggle (Menu / X icons from lucide-react) for screens below 768px
• Dropdown menu panel with smooth slideDown CSS animation and dark backdrop overlay
• Body scroll lock: prevents page scrolling when the mobile menu is open
• Auto-close behavior: menu closes on link click, backdrop tap, and window resize to desktop breakpoint
• Desktop inline nav buttons remain untouched

📱 Hero Section

• Layout switches from CSS Grid to lex flex-col on mobile for natural content stacking
• Text is centered on mobile, left-aligned on desktop ( ext-center md:text-left)
• CTA buttons stack vertically with full width on mobile for easy thumb tapping
• Crystal Prism visual is now visible on all screen sizes with fluid responsive scaling:
  • 220px on phones < 480px
  • 260px on phones 480px–768px
  • 340px on tablets and desktop
• �ctive:scale-[0.98] touch feedback on all interactive buttons

🔧 Tools Grid

• 2-column grid on phones, 4-column on desktop (grid-cols-2 sm:grid-cols-4)
• Reduced card padding and icon sizes on small screens
• Section header centered on mobile, left-aligned on desktop

📋 How It Works / Steps

• Reduced icon container size on mobile (w-10 h-10 → sm:w-12 sm:h-12)
• Tighter spacing and smaller font sizes for step descriptions
• Constrained max-width on mobile for comfortable reading

📣 CTA & Footer

• CTA buttons stack vertically on mobile with constrained max-width
• Footer switches to vertical column layout on mobile with centered text
• All padding scales down proportionally

🛡� Overflow Prevention

• Root container uses overflow-x-hidden to prevent any horizontal scrollbar
• Ambient glow effects constrained with max-w-[...] and viewport-relative units (�w)

Technical Details

• Minimal changes: only 3 page files modified (LandingPage.tsx, LoginPage.tsx, RegisterPage.tsx)
• Zero new dependencies: uses existing lucide-react icons (Menu, X) and React hooks (useState, useEffect)
• Zero config changes: no modifications to ailwind.config.js or any other config file
• TypeScript clean: no type errors
• No breaking changes: desktop layout is pixel-perfectly preserved

Testing Matrix

• 320px viewport (Galaxy S/small Android) — no overflow, hamburger works
• 375px viewport (iPhone SE/13 mini) — all elements properly sized
• 414px viewport (iPhone 14/15) — CTA buttons full-width, grid 2-col
• 768px viewport (iPad Mini) — transitions to desktop layout
• 1024px+ viewport (desktop) — identical to current production
• Body scroll locked when mobile menu open
• Menu auto-closes on navigation, backdrop tap, and resize
• All links functional in both mobile and desktop nav