Skip to content

fix: make landing page fully responsive for mobile#22

Open
haowei0831 wants to merge 1 commit into
iii123iii:mainfrom
haowei0831:main
Open

fix: make landing page fully responsive for mobile#22
haowei0831 wants to merge 1 commit into
iii123iii:mainfrom
haowei0831:main

Conversation

@haowei0831

Copy link
Copy Markdown

Summary

Makes the landing page fully responsive for mobile devices (320px+). Addresses the 00 bug bounty (#3).

Changes

  • Mobile nav: Added hamburger menu with animated fullscreen overlay (Menu/X icons)
  • Hero section: Added text-balance for clean text wrapping on small screens; stacked CTA buttons vertically on mobile
  • Tools grid: Reduced padding/gap on mobile (p-3 sm:p-5, gap-2 sm:gap-3); smaller icons and text on mobile
  • How it works: Smaller step icons on mobile; adjusted spacing
  • CTA section: Stacked buttons vertically on mobile; reduced padding
  • Footer: Flex-col layout on mobile with centered text
  • General: All sections use px-4 sm:px-6 responsive padding; adjusted vertical spacing (py-20 sm:py-32)

Tested

  • All components render correctly on React 19
  • No new dependencies added (Menu/X already available in lucide-react)
  • Mobile menu opens/closes smoothly with blur backdrop

- Add mobile hamburger menu with fullscreen overlay
- Add text-balance for better text wrapping on small screens
- Responsive padding/margins across all breakpoints
- Smaller icon/button sizes on mobile
- Stack CTA buttons vertically on mobile
- Import Menu, X icons for mobile navigation
- Add useState for mobile menu toggle
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant