From a301fcd696cb3eb11aac82cdf4d4cfc00fbda9ca Mon Sep 17 00:00:00 2001 From: hazzikri Date: Wed, 29 Jul 2026 01:54:01 +0700 Subject: [PATCH] fix: make landing page fully responsive for mobile devices --- frontend/src/pages/LandingPage.tsx | 240 ++++++++++++++++++++-------- frontend/src/pages/LoginPage.tsx | 4 +- frontend/src/pages/RegisterPage.tsx | 4 +- 3 files changed, 176 insertions(+), 72 deletions(-) diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index baede37..56d5339 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -1,3 +1,4 @@ +import { useState, useEffect } from 'react' import { Link } from 'react-router-dom' import { Scissors, @@ -14,6 +15,8 @@ import { Gem, Pen, FileOutput, + Menu, + X, } from 'lucide-react' const tools = [ @@ -34,8 +37,25 @@ const steps = [ ] export default function LandingPage() { + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) + + // Close mobile menu on resize to desktop + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 768) setMobileMenuOpen(false) + } + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, []) + + // Prevent body scroll when mobile menu is open + useEffect(() => { + document.body.style.overflow = mobileMenuOpen ? 'hidden' : '' + return () => { document.body.style.overflow = '' } + }, [mobileMenuOpen]) + return ( -
+
{/* ── CSS ─────────────────────────────────────────────── */}