From 0010c0023371307a96db5af85700344d95a7ea58 Mon Sep 17 00:00:00 2001
From: duongynhi000005-oss <duongynhi000005-oss@users.noreply.github.com>
Date: Thu, 4 Jun 2026 12:25:50 +0000
Subject: [PATCH] fix: improve mobile responsiveness at 375px and 768px
 breakpoints

- Reduce terminal font size and padding on small screens
- Add max-w-full to typewriter text to prevent overflow
- Scale headline font from text-3xl on mobile to text-5xl on desktop
- Make CTA buttons stack vertically on mobile
- Wrap stats strip and reduce gap on small screens
- Adjust spacing throughout for better mobile UX

Closes #833
---
 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..e33ca048d 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -111,10 +111,10 @@ 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">
+            <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter max-w-full">
               forge bounty --reward 100 --lang typescript --tier 2
             </span>
             {typewriterDone && (
@@ -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-3xl sm:text-4xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-8 sm:mt-10"
       >
         THE AI-POWERED BOUNTY{' '}
         <span className="text-emerald">FORGE</span>
@@ -174,7 +174,7 @@ export function HeroSection() {
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.6, duration: 0.5 }}
-        className="flex flex-wrap items-center justify-center gap-4 mt-8"
+        className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mt-6 sm:mt-8"
       >
         <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
           <Link
@@ -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-6 sm:mt-8 font-mono text-xs sm:text-sm text-text-muted"
       >
         <span>
           <span className="text-text-primary font-semibold">