From 820e2348def6dd6f4b57f54cade8d14bd9ddab68 Mon Sep 17 00:00:00 2001
From: Bot <bot@example.com>
Date: Sat, 11 Jul 2026 22:16:57 +0530
Subject: [PATCH] fix(landing): comprehensive mobile responsiveness for all
 viewport sizes

- Add hamburger menu with animated dropdown for mobile nav (<640px)
- Reduce hero/CTA font clamp minimums to prevent text overflow on 320px screens
- Stack tool grid to single-column on very small screens (<400px), 2-col on small
- Add custom Tailwind 'xs' breakpoint (400px) for fine-grained mobile control
- Stack CTA buttons vertically on mobile for better tap targets
- Center-align footer content on mobile with vertical stacking
- Scale crystal prism visual responsively with min(340px, 70vw)
- Reduce section padding on mobile for better content density
- Adjust horizontal padding from px-6 to px-4 on mobile viewports

Fixes #3
---
 frontend/src/pages/LandingPage.tsx | 84 +++++++++++++++++++++++-------
 frontend/tailwind.config.js        |  3 ++
 2 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index baede37..6a86c98 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,6 +37,8 @@ const steps = [
 ]
 
 export default function LandingPage() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
   return (
     <div className="min-h-screen bg-[#050e18] text-slate-200 relative">
       {/* ── CSS ─────────────────────────────────────────────── */}
@@ -66,10 +71,19 @@ export default function LandingPage() {
           background-size: 24px 24px;
         }
 
+        /* Mobile menu animation */
+        .mobile-menu-enter {
+          animation: slideDown .25s ease both;
+        }
+        @keyframes slideDown {
+          from { opacity: 0; transform: translateY(-8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+
         /* Crystal prism */
         .prism {
-          width: 340px;
-          height: 340px;
+          width: min(340px, 70vw);
+          height: min(340px, 70vw);
           position: relative;
         }
         .prism::before {
@@ -142,17 +156,19 @@ 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">
-          <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
+        <div className="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 h-14 sm:h-16">
+          <Link to="/" className="flex items-center gap-2 sm:gap-2.5 group">
+            <div className="w-7 h-7 sm:w-8 sm: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">
               <Gem size={14} className="text-white" />
             </div>
-            <span className="font-display text-lg font-semibold tracking-tight text-white">
+            <span className="font-display text-base sm:text-lg font-semibold tracking-tight text-white">
               Crystal<span className="text-blue-400">PDF</span>
             </span>
           </Link>
-          <div className="flex items-center gap-2">
+
+          {/* Desktop nav */}
+          <div className="hidden sm: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,17 +180,47 @@ export default function LandingPage() {
               Get started
             </Link>
           </div>
+
+          {/* Mobile hamburger */}
+          <button
+            className="sm:hidden p-2 text-slate-400 hover:text-white transition-colors"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label="Toggle menu"
+          >
+            {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+          </button>
         </div>
+
+        {/* Mobile dropdown menu */}
+        {mobileMenuOpen && (
+          <div className="sm:hidden border-t border-white/[.04] mobile-menu-enter"
+            style={{ background: 'rgba(5,14,24,.95)' }}>
+            <div className="px-4 py-4 flex flex-col gap-3">
+              <Link to="/login"
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-sm text-slate-400 hover:text-white py-2 transition-colors">
+                Sign in
+              </Link>
+              <Link to="/register"
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-sm font-medium text-blue-300 bg-brand-500/15 hover:bg-brand-500/25
+                           border border-brand-500/25 hover:border-brand-500/40
+                           px-4 py-2.5 rounded-lg transition-all text-center">
+                Get started
+              </Link>
+            </div>
+          </div>
+        )}
       </nav>
 
       {/* ── Hero ───────────────────────────────────────────── */}
-      <section className="relative z-10 max-w-6xl mx-auto px-6
-                          pt-20 pb-24 md:pt-32 md:pb-36
-                          grid md:grid-cols-[1fr,auto] items-center gap-12">
+      <section className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6
+                          pt-12 pb-16 sm:pt-20 sm:pb-24 md:pt-32 md:pb-36
+                          grid md:grid-cols-[1fr,auto] items-center gap-8 sm:gap-12">
         {/* Text column */}
         <div className="max-w-2xl">
           <h1 className="font-display font-semibold tracking-tight leading-[1.1]
-                         text-[clamp(2.2rem,5.5vw,4.8rem)] text-white anim-reveal">
+                         text-[clamp(1.75rem,5.5vw,4.8rem)] text-white anim-reveal">
             Every<br className="hidden sm:block" /> PDF tool<br className="hidden sm:block" /> you'll ever{' '}
             <em className="not-italic text-blue-400">need.</em>
           </h1>
@@ -216,7 +262,7 @@ export default function LandingPage() {
 
       {/* ── Tools grid ─────────────────────────────────────── */}
       <section className="relative z-10 dot-grid">
-        <div className="max-w-6xl mx-auto px-6 py-24 md:py-32">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-24 md:py-32">
           {/* Section header */}
           <div className="max-w-lg mb-14">
             <p className="text-xs font-medium tracking-[.15em] uppercase text-brand-400 mb-4">
@@ -232,7 +278,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 xs:grid-cols-2 sm:grid-cols-4 gap-3">
             {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]
@@ -255,7 +301,7 @@ export default function LandingPage() {
 
       {/* ── How it works ───────────────────────────────────── */}
       <section className="relative z-10 border-t border-white/[.04]">
-        <div className="max-w-3xl mx-auto px-6 py-24 md:py-32">
+        <div className="max-w-3xl mx-auto px-4 sm:px-6 py-16 sm:py-24 md:py-32">
           <div className="text-center max-w-lg mx-auto mb-16">
             <p className="text-xs font-medium tracking-[.15em] uppercase text-brand-400 mb-4">
               How it works
@@ -309,7 +355,7 @@ export default function LandingPage() {
 
       {/* ── CTA ────────────────────────────────────────────── */}
       <section className="relative z-10 border-t border-white/[.04]">
-        <div className="max-w-6xl mx-auto px-6 py-28 md:py-36 text-center">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-28 md:py-36 text-center">
           {/* Soft top glow */}
           <div className="absolute inset-x-0 top-0 h-64 pointer-events-none"
             style={{ background: 'radial-gradient(ellipse 50% 100% at 50% 0%, rgba(45,98,255,.06), transparent)' }} />
@@ -317,12 +363,12 @@ export default function LandingPage() {
           <p className="text-sm text-slate-500 mb-4 relative">
             Free to use. No credit card required.
           </p>
-          <h2 className="font-display text-[clamp(2.4rem,5.5vw,4.5rem)] font-semibold
-                         tracking-tight leading-[.95] text-white mb-10 relative">
+          <h2 className="font-display text-[clamp(1.75rem,5.5vw,4.5rem)] font-semibold
+                         tracking-tight leading-[1] text-white mb-8 sm:mb-10 relative">
             Start working with<br />
             your PDFs today.
           </h2>
-          <div className="relative flex flex-wrap justify-center gap-3">
+          <div className="relative flex flex-col sm:flex-row flex-wrap justify-center items-center gap-3">
             <Link to="/register"
               className="inline-flex items-center gap-2 px-7 py-3.5 rounded-xl text-[15px] font-medium
                          text-white bg-gradient-to-b from-brand-500 to-brand-600
@@ -342,7 +388,7 @@ 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-6 sm:py-8 flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-4">
           <span className="font-display text-sm font-semibold text-slate-600">
             Crystal<span className="text-blue-400/50">PDF</span>
           </span>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ccdf9b5..c0514a3 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,6 +7,9 @@ export default {
   darkMode: 'class',
   theme: {
     extend: {
+      screens: {
+        'xs': '400px',
+      },
       colors: {
         // Semantic tokens mapped to CSS variables
         surface: 'var(--color-surface)',