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
This commit is contained in:
Satyam
+17
-17
@@ -396,19 +396,19 @@ const Landing = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Layer 3: Content */}
|
{/* 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 */}
|
{/* 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">
|
<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-sm sm:text-base">🇺🇸</span>
|
<span className="mr-1.5 sm:mr-2.5 text-xs sm:text-sm md: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">
|
<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{' '}
|
Crafted to Level the Field for Those Who Build{' '}
|
||||||
<span className="text-red-400">America</span>
|
<span className="text-red-400">America</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Headline — Inter font-black: BOLD, commanding, statement piece */}
|
{/* 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>
|
<span className="text-zinc-900 dark:text-white">ROOFING</span>
|
||||||
<br />
|
<br />
|
||||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-blue-500 to-cyan-400">
|
<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>
|
</h1>
|
||||||
|
|
||||||
{/* Subtitle — the value proposition with credibility */}
|
{/* 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.
|
Automated drone inspections. Instant AI estimates.
|
||||||
<br />
|
<br className="hidden sm:block" />
|
||||||
Restoring your home's integrity with{' '}
|
Restoring your home's integrity with{' '}
|
||||||
<span className="text-zinc-900 dark:text-white font-bold">20+ years</span> of precision.
|
<span className="text-zinc-900 dark:text-white font-bold">20+ years</span> of precision.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Dual CTAs */}
|
{/* 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 */}
|
{/* B2C: Homeowners */}
|
||||||
<Link
|
<Link
|
||||||
to="/login"
|
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
|
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>
|
</Link>
|
||||||
{/* B2B: Contractors */}
|
{/* B2B: Contractors */}
|
||||||
<a
|
<a
|
||||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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
|
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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Discount banner — Veterans, Seniors, Active Duty */}
|
{/* 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="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-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">
|
<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={20} />
|
<Award size={14} className="sm:w-5 sm:h-5" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center sm:text-left">
|
<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>
|
<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-[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>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user