From 9fbbee0ccaf2b3fe8fd81ede4d29304b897b3140 Mon Sep 17 00:00:00 2001
From: Agent-Neon-42 <agent-neon-42@example.com>
Date: Fri, 31 Jul 2026 19:54:59 +0300
Subject: [PATCH] fix landing page mobile responsiveness for issue #3

---
 frontend/src/pages/LandingPage.tsx | 61 ++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index baede37..e9628ee 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -1,3 +1,4 @@
+import { useState } 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,10 @@ const steps = [
 ]
 
 export default function LandingPage() {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
   return (
-    <div className="min-h-screen bg-[#050e18] text-slate-200 relative">
+    <div className="min-h-screen overflow-x-hidden bg-[#050e18] text-slate-200 relative">
       {/* ── CSS ─────────────────────────────────────────────── */}
       <style>{`
         @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&display=swap');
@@ -129,6 +134,16 @@ export default function LandingPage() {
             transparent 12px
           );
         }
+
+        @media (max-width: 375px) {
+          .landing-prism {
+            width: 250px;
+            height: 250px;
+          }
+          .landing-tools-grid {
+            gap: 0.65rem;
+          }
+        }
       `}</style>
 
       {/* ── Ambient glow ───────────────────────────────────── */}
@@ -142,7 +157,7 @@ export default function LandingPage() {
       {/* ── Nav ────────────────────────────────────────────── */}
       <nav className="sticky top-0 z-50 backdrop-blur-xl border-b border-white/[.04]"
         style={{ background: 'rgba(5,14,24,.75)' }}>
-        <div className="max-w-6xl mx-auto flex items-center justify-between px-6 h-16">
+        <div className="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 h-16">
           <Link to="/" className="flex items-center gap-2.5 group">
             <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-blue-400 flex items-center justify-center
                             shadow-lg shadow-brand-500/20 group-hover:shadow-brand-500/40 transition-shadow">
@@ -152,7 +167,7 @@ export default function LandingPage() {
               Crystal<span className="text-blue-400">PDF</span>
             </span>
           </Link>
-          <div className="flex items-center gap-2">
+          <div className="hidden md:flex items-center gap-2">
             <Link to="/login"
               className="text-sm text-slate-400 hover:text-white px-4 py-2 transition-colors">
               Sign in
@@ -164,7 +179,31 @@ export default function LandingPage() {
               Get started
             </Link>
           </div>
+          <button
+            type="button"
+            aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
+            aria-expanded={isMobileMenuOpen}
+            onClick={() => setIsMobileMenuOpen((state) => !state)}
+            className="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg border border-white/10 text-slate-200 hover:bg-white/5 transition-colors"
+          >
+            {isMobileMenuOpen ? <X size={18} /> : <Menu size={18} />}
+          </button>
         </div>
+
+        {isMobileMenuOpen && (
+          <div className="md:hidden border-t border-white/[.06] bg-[#050e18]/92">
+            <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex flex-col gap-2">
+              <Link to="/login" onClick={() => setIsMobileMenuOpen(false)}
+                className="rounded-lg px-4 py-3 text-slate-200 bg-white/[.03] border border-white/[.08] hover:bg-white/[.05] transition-colors">
+                Sign in
+              </Link>
+              <Link to="/register" onClick={() => setIsMobileMenuOpen(false)}
+                className="rounded-lg px-4 py-3 text-slate-100 bg-brand-500/20 border border-brand-500/35 hover:bg-brand-500/25 transition-colors">
+                Get started
+              </Link>
+            </div>
+          </div>
+        )}
       </nav>
 
       {/* ── Hero ───────────────────────────────────────────── */}
@@ -187,7 +226,7 @@ export default function LandingPage() {
 
           <div className="mt-10 flex flex-wrap gap-3 anim-reveal anim-d3">
             <Link to="/register"
-              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-medium
+              className="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3.5 rounded-xl text-[15px] font-medium
                          text-white bg-gradient-to-b from-brand-500 to-brand-600
                          shadow-[0_2px_24px_rgba(45,98,255,.35)]
                          hover:shadow-[0_4px_32px_rgba(45,98,255,.5)]
@@ -195,7 +234,7 @@ export default function LandingPage() {
               Start for free <ArrowRight size={15} strokeWidth={2.2} />
             </Link>
             <Link to="/login"
-              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-[15px] font-medium
+              className="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3.5 rounded-xl text-[15px] font-medium
                          text-slate-300 border border-white/10 hover:border-white/20
                          hover:bg-white/[.03] transition-all">
               Sign in to workspace
@@ -205,7 +244,7 @@ export default function LandingPage() {
 
         {/* Crystal visual */}
         <div className="hidden md:flex items-center justify-center anim-fade anim-d4">
-          <div className="prism">
+          <div className="prism landing-prism">
             {/* Inner facets */}
             <div className="absolute inset-0 flex items-center justify-center">
               <Layers size={48} className="text-blue-400/30" strokeWidth={1} />
@@ -232,7 +271,7 @@ export default function LandingPage() {
           </div>
 
           {/* Grid */}
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 landing-tools-grid">
             {tools.map((t) => (
               <div key={t.name} className="tool-card rounded-2xl p-5 cursor-default group">
                 <div className="w-10 h-10 rounded-xl bg-blue-400/[.08] border border-blue-400/[.12]
@@ -324,7 +363,7 @@ export default function LandingPage() {
           </h2>
           <div className="relative flex flex-wrap justify-center gap-3">
             <Link to="/register"
-              className="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl text-[15px] font-medium
+              className="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-7 py-3.5 rounded-xl text-[15px] font-medium
                          text-white bg-gradient-to-b from-brand-500 to-brand-600
                          shadow-[0_2px_24px_rgba(45,98,255,.35)]
                          hover:shadow-[0_4px_32px_rgba(45,98,255,.5)]
@@ -332,7 +371,7 @@ export default function LandingPage() {
               Create free account <ArrowRight size={15} strokeWidth={2.2} />
             </Link>
             <Link to="/login"
-              className="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl text-[15px] font-medium
+              className="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-7 py-3.5 rounded-xl text-[15px] font-medium
                          text-slate-400 hover:text-slate-200 transition-colors">
               or sign in
             </Link>
@@ -342,11 +381,11 @@ export default function LandingPage() {
 
       {/* ── Footer ─────────────────────────────────────────── */}
       <footer className="relative z-10 border-t border-white/[.04]">
-        <div className="max-w-6xl mx-auto px-6 py-8 flex items-center justify-between flex-wrap gap-4">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-4">
           <span className="font-display text-sm font-semibold text-slate-600">
             Crystal<span className="text-blue-400/50">PDF</span>
           </span>
-          <p className="text-xs text-slate-700">
+          <p className="text-xs text-slate-700 text-center sm:text-right">
             Secure, server-side processing. Your files never leave your account.
           </p>
         </div>