From c017b22bead31f9afeaac6cd980920d41c2eac12 Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Wed, 5 Aug 2026 20:13:22 +0800
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20mobile=20responsive=20polish=20for?=
 =?UTF-8?q?=20landing=20page=20=E2=80=94=20full-screen=20nav=20drawer,=203?=
 =?UTF-8?q?75px=20breakpoints,=20responsive=20CTA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 79 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index e1bac3d05..4dda14384 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,12 @@
             line-height: 1.6;
             color: #333;
             overflow-x: hidden;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        img {
+            max-width: 100%;
+            height: auto;
         }
 
         .container {
@@ -319,19 +325,27 @@
 
         @media (max-width: 768px) {
             .nav-links {
+                display: none;
                 position: fixed;
-                top: 100%;
+                top: 0;
                 left: 0;
                 width: 100%;
-                background: white;
+                height: 100vh;
+                background: rgba(255, 255, 255, 0.98);
                 flex-direction: column;
-                padding: 2rem;
-                transform: translateX(-100%);
-                transition: transform 0.3s ease;
+                justify-content: center;
+                align-items: center;
+                padding: 5rem 2rem;
+                gap: 2rem;
+                z-index: 999;
             }
 
             .nav-links.active {
-                transform: translateX(0);
+                display: flex;
+            }
+
+            .nav-links a {
+                font-size: 1.3rem;
             }
 
             .mobile-menu {
@@ -340,6 +354,8 @@
                 border: none;
                 font-size: 1.5rem;
                 cursor: pointer;
+                z-index: 1000;
+                position: relative;
             }
 
             .hero-buttons {
@@ -352,6 +368,45 @@
             }
         }
 
+        @media (max-width: 375px) {
+            .hero h1 {
+                font-size: 1.8rem;
+                line-height: 1.2;
+            }
+
+            .hero p {
+                font-size: 1rem;
+            }
+
+            .stat-number {
+                font-size: 2rem;
+            }
+
+            .section-title {
+                font-size: 1.6rem;
+            }
+
+            .token-feature[style*="span 2"] {
+                grid-column: span 1 !important;
+            }
+
+            .cta-content h2 {
+                font-size: 1.5rem;
+            }
+
+            .cta-content p {
+                font-size: 1rem;
+            }
+
+            .step {
+                padding: 1.5rem;
+            }
+
+            .token-feature {
+                padding: 1.5rem;
+            }
+        }
+
         /* Animations */
         .fade-in {
             opacity: 0;
@@ -565,9 +620,27 @@ <h2>Ready to Ship Code and Earn?</h2>
         // Mobile menu toggle
         function toggleMenu() {
             const navLinks = document.querySelector('.nav-links');
+            const menuIcon = document.getElementById('menu-icon');
             navLinks.classList.toggle('active');
+            if (menuIcon) {
+                menuIcon.classList.toggle('fa-bars');
+                menuIcon.classList.toggle('fa-times');
+            }
         }
 
+        // Close mobile menu when clicking a link
+        document.querySelectorAll('.nav-links a').forEach(link => {
+            link.addEventListener('click', () => {
+                const navLinks = document.querySelector('.nav-links');
+                const menuIcon = document.getElementById('menu-icon');
+                navLinks.classList.remove('active');
+                if (menuIcon) {
+                    menuIcon.classList.add('fa-bars');
+                    menuIcon.classList.remove('fa-times');
+                }
+            });
+        });
+
         // Smooth scrolling
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {

From 0df91cc4677d3c312c4cc42c06ab0826921a70d4 Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Wed, 5 Aug 2026 20:13:44 +0800
Subject: [PATCH 2/8] fix: responsive padding and font size on mobile for
 BountyCard

---
 frontend/src/components/bounty/BountyCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/bounty/BountyCard.tsx b/frontend/src/components/bounty/BountyCard.tsx
index aa974a474..b5891dcda 100644
--- a/frontend/src/components/bounty/BountyCard.tsx
+++ b/frontend/src/components/bounty/BountyCard.tsx
@@ -61,7 +61,7 @@ export function BountyCard({ bounty }: BountyCardProps) {
       initial="rest"
       whileHover="hover"
       onClick={() => navigate(`/bounties/${bounty.id}`)}
-      className="relative rounded-xl border border-border bg-forge-900 p-5 cursor-pointer transition-colors duration-200 overflow-hidden group"
+      className="relative rounded-xl border border-border bg-forge-900 p-4 sm:p-5 cursor-pointer transition-colors duration-200 overflow-hidden group"
     >
       {/* Row 1: Repo + Tier */}
       <div className="flex items-center justify-between text-sm">
@@ -102,7 +102,7 @@ export function BountyCard({ bounty }: BountyCardProps) {
 
       {/* Row 4: Reward + Meta */}
       <div className="flex items-center justify-between mt-3">
-        <span className="font-mono text-lg font-semibold text-emerald">
+        <span className="font-mono text-base sm:text-lg font-semibold text-emerald">
           {formatCurrency(bounty.reward_amount, bounty.reward_token)}
         </span>
         <div className="flex items-center gap-3 text-xs text-text-muted">

From 74d2b88343a0402f47c0e678b9d924d756508d55 Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Wed, 5 Aug 2026 20:13:47 +0800
Subject: [PATCH 3/8] fix: responsive terminal card, headline, and stats on
 mobile for HeroSection

---
 frontend/src/components/home/HeroSection.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/home/HeroSection.tsx b/frontend/src/components/home/HeroSection.tsx
index e37307166..ca448e77e 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -98,7 +98,7 @@ export function HeroSection() {
         variants={fadeIn}
         initial="initial"
         animate="animate"
-        className="w-full max-w-xl rounded-xl border border-border bg-forge-900/90 backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50"
+        className="w-full max-w-xl rounded-xl border border-border bg-forge-900/90 backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50 mx-2 sm:mx-0"
       >
         {/* Title bar */}
         <div className="flex items-center gap-2 px-4 py-2.5 bg-forge-800 border-b border-border">
@@ -111,7 +111,7 @@ export function HeroSection() {
         </div>
 
         {/* Terminal body */}
-        <div className="p-5 font-mono text-sm leading-relaxed">
+        <div className="p-3 sm:p-5 font-mono text-xs sm:text-sm leading-relaxed">
           <div className="overflow-hidden">
             <span className="text-emerald">$ </span>
             <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter">
@@ -154,7 +154,7 @@ export function HeroSection() {
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3, duration: 0.5 }}
-        className="font-display text-4xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-10"
+        className="font-display text-2xl sm:text-3xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-10 px-2"
       >
         THE AI-POWERED BOUNTY{' '}
         <span className="text-emerald">FORGE</span>
@@ -164,7 +164,7 @@ export function HeroSection() {
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.45, duration: 0.5 }}
-        className="font-sans text-lg text-text-secondary text-center mt-4 max-w-lg"
+        className="font-sans text-base sm:text-lg text-text-secondary text-center mt-4 max-w-lg px-4"
       >
         Fund bounties. Ship code. Earn rewards.
       </motion.p>
@@ -211,7 +211,7 @@ export function HeroSection() {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.8, duration: 0.5 }}
-        className="flex items-center justify-center gap-6 mt-8 font-mono text-sm text-text-muted"
+        className="flex flex-wrap items-center justify-center gap-3 sm:gap-6 mt-8 font-mono text-xs sm:text-sm text-text-muted px-2"
       >
         <span>
           <span className="text-text-primary font-semibold">

From 1b850640e05dd4146d05ebb036679613bfa3f52f Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Wed, 5 Aug 2026 20:13:50 +0800
Subject: [PATCH 4/8] fix: responsive grid layout, filter pills scroll, and
 section title on mobile

---
 frontend/src/components/bounty/BountyGrid.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/bounty/BountyGrid.tsx b/frontend/src/components/bounty/BountyGrid.tsx
index 7709ab94c..5e0758cf5 100644
--- a/frontend/src/components/bounty/BountyGrid.tsx
+++ b/frontend/src/components/bounty/BountyGrid.tsx
@@ -26,8 +26,8 @@ export function BountyGrid() {
     <section id="bounties" className="py-16 md:py-24">
       <div className="max-w-7xl mx-auto px-4">
         {/* Header row */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
-          <h2 className="font-sans text-2xl font-semibold text-text-primary">Open Bounties</h2>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6 sm:mb-8">
+          <h2 className="font-sans text-xl sm:text-2xl font-semibold text-text-primary">Open Bounties</h2>
           <div className="flex items-center gap-2">
             <Link
               to="/bounties/create"
@@ -54,7 +54,7 @@ export function BountyGrid() {
         </div>
 
         {/* Filter pills */}
-        <div className="flex items-center gap-2 flex-wrap mb-8">
+        <div className="flex items-center gap-2 flex-wrap mb-8 overflow-x-auto scrollbar-none -mx-4 px-4 sm:mx-0 sm:px-0">
           {FILTER_SKILLS.map((skill) => (
             <button
               key={skill}

From d61b17abd7f30fee94dfb90706ec1155dcea413f Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Wed, 5 Aug 2026 20:13:53 +0800
Subject: [PATCH 5/8] fix: add scrollbar-none utility and text-size-adjust for
 mobile

---
 frontend/src/index.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 33799d725..724b33c72 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -115,6 +115,7 @@
 html {
   scroll-behavior: smooth;
   font-size: 16px;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
@@ -125,6 +126,15 @@ body {
   color: #F0F0F5;
 }
 
+/* Hide scrollbar for mobile filter pills */
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
 /* Custom scrollbar */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: #050505; }

From e5e835e9e519209624e04a29de7b8c7000d567f9 Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Wed, 5 Aug 2026 20:14:19 +0800
Subject: [PATCH 6/8] fix: add horizontal scroll wrapper for leaderboard table
 on mobile

---
 frontend/src/components/leaderboard/LeaderboardTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/leaderboard/LeaderboardTable.tsx b/frontend/src/components/leaderboard/LeaderboardTable.tsx
index e37db6579..e06d1a406 100644
--- a/frontend/src/components/leaderboard/LeaderboardTable.tsx
+++ b/frontend/src/components/leaderboard/LeaderboardTable.tsx
@@ -36,10 +36,10 @@ export function LeaderboardTable({ entries }: LeaderboardTableProps) {
       variants={fadeIn}
       initial="initial"
       animate="animate"
-      className="max-w-4xl mx-auto mt-6 rounded-xl border border-border bg-forge-900 overflow-hidden"
+      className="max-w-4xl mx-auto mt-6 overflow-x-auto scrollbar-none"
     >
       {/* Header */}
-      <div className="flex items-center px-4 py-3 border-b border-border/50 text-xs font-semibold text-text-muted uppercase tracking-wider">
+      <div className="min-w-[500px]"><div className="flex items-center px-4 py-3 border-b border-border/50 text-xs font-semibold text-text-muted uppercase tracking-wider">
         <div className="w-[60px] text-center">Rank</div>
         <div className="flex-1">User</div>
         <div className="w-[100px] text-center">Bounties</div>

From c9e4b29be2ec279783d200644316f09de9a7a440 Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Wed, 5 Aug 2026 20:14:22 +0800
Subject: [PATCH 7/8] fix: responsive footer grid and padding on mobile

---
 frontend/src/components/layout/Footer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
index f599de4d8..01aed1ab3 100644
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -31,8 +31,8 @@ export function Footer() {
       {/* Magenta accent line */}
       <div className="absolute top-0 left-0 right-0 h-px bg-gradient-footer opacity-50" />
 
-      <div className="max-w-7xl mx-auto px-4 py-12">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
+      <div className="max-w-7xl mx-auto px-4 py-8 sm:py-12">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 sm:gap-10">
           {/* Col 1: Brand */}
           <div>
             <div className="flex items-center gap-2 mb-3">

From c4d267f1f4774452d962194b88d91f23fbeb9b6c Mon Sep 17 00:00:00 2001
From: water <672684719@qq.com>
Date: Wed, 5 Aug 2026 20:14:25 +0800
Subject: [PATCH 8/8] fix: responsive podium card sizing on mobile

---
 frontend/src/components/leaderboard/PodiumCards.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/leaderboard/PodiumCards.tsx b/frontend/src/components/leaderboard/PodiumCards.tsx
index f36d233cc..911f173ca 100644
--- a/frontend/src/components/leaderboard/PodiumCards.tsx
+++ b/frontend/src/components/leaderboard/PodiumCards.tsx
@@ -26,13 +26,13 @@ function PodiumCard({ entry, rank }: { entry: LeaderboardEntry; rank: number })
     : 'text-orange-500';
 
   const avatarBorderClass = isGold ? 'border-yellow-500/50' : 'border-zinc-600';
-  const avatarSize = isGold ? 'w-14 h-14' : 'w-12 h-12';
+  const avatarSize = isGold ? 'w-10 h-10 sm:w-14 sm:h-14' : 'w-9 h-9 sm:w-12 sm:h-12';
   const padding = isGold ? 'py-8 px-6' : 'py-6 px-6';
 
   return (
     <motion.div
       variants={staggerItem}
-      className={`relative flex flex-col items-center rounded-xl border bg-forge-900 ${borderClass} ${padding} min-w-[140px]`}
+      className={`relative flex flex-col items-center rounded-xl border bg-forge-900 ${borderClass} ${padding} min-w-[100px] sm:min-w-[140px]`}
     >
       {/* Crown for #1 */}
       {isGold && (
@@ -84,7 +84,7 @@ export function PodiumCards({ entries }: PodiumCardsProps) {
       variants={staggerContainer}
       initial="initial"
       animate="animate"
-      className="flex items-end justify-center gap-4 md:gap-6 mb-12"
+      className="flex items-end justify-center gap-2 sm:gap-4 md:gap-6 mb-12 px-2 sm:px-0"
     >
       {ordered.map((entry, i) => (
         <PodiumCard key={entry.username} entry={entry} rank={ranks[i]} />