From 12332360c94d25c426261d20cef3b5798ca4eabd Mon Sep 17 00:00:00 2001
From: Satyam <95536056+Satyam-Rastogi@users.noreply.github.com>
Date: Tue, 17 Feb 2026 02:07:15 +0530
Subject: [PATCH] feat(hero): improve mobile responsiveness for hero section

- Add responsive font scaling for heading (3xl to 9xl)
- Add responsive font scaling for subtitle (sm to 2xl)
- Limit CTA button width on mobile (max-w-[260px])
- Limit discount banner width on mobile (max-w-[280px])
- Adjust padding and spacing for all screen sizes
- Fix text overflow issue on 'REVOLUTIONIZED' heading
---
 src/pages/Landing.jsx | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/pages/Landing.jsx b/src/pages/Landing.jsx
index ee1d87d..77df874 100644
--- a/src/pages/Landing.jsx
+++ b/src/pages/Landing.jsx
@@ -396,19 +396,19 @@ const Landing = () => {
                 </div>
 
                 {/* Layer 3: Content */}
-                <div className="relative z-20 max-w-5xl mx-auto px-6 text-center pt-24 pb-32" ref={textRef}>
+                <div className="relative z-20 max-w-5xl mx-auto px-4 sm:px-6 text-center pt-20 sm:pt-24 pb-24 sm:pb-32" ref={textRef}>
 
                     {/* Patriotic badge — identity + mission statement */}
-                    <div className="inline-flex items-center px-3 sm:px-4 py-1.5 rounded-full bg-blue-100 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-500/20 backdrop-blur-sm mb-6 sm:mb-8 shadow-sm max-w-[95%] sm:max-w-none">
-                        <span className="mr-1.5 sm:mr-2.5 text-sm sm:text-base">🇺🇸</span>
-                        <span className="text-[8px] sm:text-[9px] md:text-[10px] font-bold tracking-wider sm:tracking-widest uppercase text-blue-600 dark:text-blue-300 leading-tight">
+                    <div className="inline-flex items-center px-2 sm:px-4 py-1.5 rounded-full bg-blue-100 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-500/20 backdrop-blur-sm mb-4 sm:mb-6 md:mb-8 shadow-sm max-w-[95%] sm:max-w-none">
+                        <span className="mr-1.5 sm:mr-2.5 text-xs sm:text-sm md:text-base">🇺🇸</span>
+                        <span className="text-[7px] sm:text-[9px] md:text-[10px] font-bold tracking-wider sm:tracking-widest uppercase text-blue-600 dark:text-blue-300 leading-tight">
                             Crafted to Level the Field for Those Who Build{' '}
                             <span className="text-red-400">America</span>
                         </span>
                     </div>
 
                     {/* Headline — Inter font-black: BOLD, commanding, statement piece */}
-                    <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tighter mb-4 sm:mb-6 leading-[0.9] px-2">
+                    <h1 className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl font-black tracking-tight sm:tracking-tighter mb-3 sm:mb-4 md:mb-6 leading-[0.95] sm:leading-[0.9] px-1 sm:px-2">
                         <span className="text-zinc-900 dark:text-white">ROOFING</span>
                         <br />
                         <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-blue-500 to-cyan-400">
@@ -417,43 +417,43 @@ const Landing = () => {
                     </h1>
 
                     {/* Subtitle — the value proposition with credibility */}
-                    <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-500 dark:text-white/50 max-w-2xl mx-auto mb-12 font-medium leading-relaxed px-2">
+                    <p className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl text-zinc-500 dark:text-white/50 max-w-[95%] sm:max-w-xl md:max-w-2xl mx-auto mb-8 sm:mb-10 md:mb-12 font-medium leading-relaxed px-1 sm:px-2">
                         Automated drone inspections. Instant AI estimates.
-                        <br />
+                        <br className="hidden sm:block" />
                         Restoring your home's integrity with{' '}
                         <span className="text-zinc-900 dark:text-white font-bold">20+ years</span> of precision.
                     </p>
 
                     {/* Dual CTAs */}
-                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
+                    <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mb-8 sm:mb-10 md:mb-12 px-8 sm:px-0">
                         {/* B2C: Homeowners */}
                         <Link
                             to="/login"
-                            className="group px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-sm transition-all flex items-center shadow-lg shadow-blue-600/20 hover:shadow-blue-500/30 hover:scale-[1.02] ring-4 ring-blue-500/10"
+                            className="group w-full max-w-[260px] sm:w-auto sm:max-w-none px-6 sm:px-8 py-3.5 sm:py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-xs sm:text-sm transition-all flex items-center justify-center shadow-lg shadow-blue-600/20 hover:shadow-blue-500/30 hover:scale-[1.02] ring-2 sm:ring-4 ring-blue-500/10"
                         >
                             Schedule Demo
-                            <ArrowRight size={18} className="ml-2 transition-transform group-hover:translate-x-0.5" />
+                            <ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-0.5" />
                         </Link>
                         {/* B2B: Contractors */}
                         <a
                             href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="group px-8 py-4 rounded-full bg-zinc-100 dark:bg-white/[0.06] hover:bg-zinc-200 dark:hover:bg-white/[0.10] border border-zinc-300 dark:border-white/[0.10] hover:border-zinc-400 dark:hover:border-white/[0.15] text-zinc-700 dark:text-white/90 font-bold text-sm transition-all flex items-center hover:scale-[1.02]"
+                            className="group w-full max-w-[260px] sm:w-auto sm:max-w-none px-6 sm:px-8 py-3.5 sm:py-4 rounded-full bg-zinc-100 dark:bg-white/[0.06] hover:bg-zinc-200 dark:hover:bg-white/[0.10] border border-zinc-300 dark:border-white/[0.10] hover:border-zinc-400 dark:hover:border-white/[0.15] text-zinc-700 dark:text-white/90 font-bold text-xs sm:text-sm transition-all flex items-center justify-center hover:scale-[1.02]"
                         >
                             See The Process
-                            <ArrowRight size={18} className="ml-2 transition-transform group-hover:translate-x-0.5" />
+                            <ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-0.5" />
                         </a>
                     </div>
 
                     {/* Discount banner — Veterans, Seniors, Active Duty */}
-                    <div className="max-w-md mx-4 sm:mx-auto bg-red-50 dark:bg-white/[0.04] backdrop-blur-md rounded-2xl border border-red-200 dark:border-red-500/20 p-3 sm:p-4 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-0 sm:space-x-4 shadow-sm">
-                        <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-red-500 dark:text-red-400 shrink-0">
-                            <Award size={20} />
+                    <div className="max-w-[280px] sm:max-w-md mx-auto bg-red-50 dark:bg-white/[0.04] backdrop-blur-md rounded-xl sm:rounded-2xl border border-red-200 dark:border-red-500/20 p-3 sm:p-4 flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-0 sm:space-x-4 shadow-sm">
+                        <div className="w-7 h-7 sm:w-10 sm:h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-red-500 dark:text-red-400 shrink-0">
+                            <Award size={14} className="sm:w-5 sm:h-5" />
                         </div>
                         <div className="text-center sm:text-left">
-                            <h3 className="font-bold text-xs sm:text-sm text-zinc-900 dark:text-white">Active Duty, Veterans & Seniors</h3>
-                            <p className="text-[10px] sm:text-xs text-zinc-500 dark:text-white/50">Get an exclusive <span className="text-red-500 dark:text-red-400 font-bold">15% Discount</span> on all services.</p>
+                            <h3 className="font-bold text-[10px] sm:text-xs md:text-sm text-zinc-900 dark:text-white">Active Duty, Veterans & Seniors</h3>
+                            <p className="text-[9px] sm:text-[10px] md:text-xs text-zinc-500 dark:text-white/50">Get an exclusive <span className="text-red-500 dark:text-red-400 font-bold">15% Discount</span> on all services.</p>
                         </div>
                     </div>
                 </div>