From 870a52c39db439faaa2c0b48798bf705677c484e Mon Sep 17 00:00:00 2001
From: Brian Smith <dronesmiths2@gmail.com>
Date: Sun, 30 Aug 2026 15:05:53 -0700
Subject: [PATCH] fix(hero): make showcase pills and bottom caption 100%
 responsive on mobile screens

---
 src/components/Hero.tsx | 132 +++++++++++++++++++++-------------------
 1 file changed, 71 insertions(+), 61 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a2ca0d9..7bb3106 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -87,14 +87,15 @@ export default function Hero() {
           maxWidth: '960px',
           margin: '0 auto',
           position: 'relative',
-          borderRadius: '24px',
-          padding: '4px',
+          borderRadius: '20px',
+          padding: '3px',
           background: 'linear-gradient(135deg, rgba(212, 175, 55, 0.6) 0%, rgba(224, 0, 111, 0.4) 50%, rgba(212, 175, 55, 0.6) 100%)',
           boxShadow: '0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(212, 175, 55, 0.25)',
+          overflow: 'hidden',
         }}>
           <div style={{
             position: 'relative',
-            borderRadius: '20px',
+            borderRadius: '17px',
             overflow: 'hidden',
             backgroundColor: '#0D0D0D',
           }}>
@@ -102,7 +103,7 @@ export default function Hero() {
             <div style={{
               position: 'relative',
               width: '100%',
-              height: 'clamp(280px, 46vw, 480px)',
+              height: 'clamp(260px, 46vw, 480px)',
             }}>
               <Image 
                 src="/images/portfolio_emelda_luxury_black_gold.webp"
@@ -116,85 +117,94 @@ export default function Hero() {
               <div style={{
                 position: 'absolute',
                 inset: 0,
-                background: 'linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%)',
+                background: 'linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 100%)',
                 pointerEvents: 'none',
               }} />
 
-              {/* Floating Badges */}
+              {/* Floating Top Badges - Fully Responsive Flex Row */}
               <div style={{
                 position: 'absolute',
-                top: '16px',
-                left: '16px',
-                background: 'rgba(13, 13, 13, 0.85)',
-                backdropFilter: 'blur(10px)',
-                WebkitBackdropFilter: 'blur(10px)',
-                border: '1px solid rgba(212, 175, 55, 0.5)',
-                padding: '6px 14px',
-                borderRadius: '50px',
-                fontSize: 'clamp(0.75rem, 1.8vw, 0.85rem)',
-                fontWeight: 700,
-                color: 'var(--color-gold-light)',
-                boxShadow: '0 4px 15px rgba(0,0,0,0.5)',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '6px',
-              }}>
-                <span>👑</span> Signature Party Installation
-              </div>
-
-              <div style={{
-                position: 'absolute',
-                top: '16px',
-                right: '16px',
-                background: 'rgba(13, 13, 13, 0.85)',
-                backdropFilter: 'blur(10px)',
-                WebkitBackdropFilter: 'blur(10px)',
-                border: '1px solid rgba(224, 0, 111, 0.5)',
-                padding: '6px 14px',
-                borderRadius: '50px',
-                fontSize: 'clamp(0.75rem, 1.8vw, 0.85rem)',
-                fontWeight: 700,
-                color: 'var(--color-pink-light)',
-                boxShadow: '0 4px 15px rgba(0,0,0,0.5)',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '6px',
-              }}>
-                <span>✨</span> 100% Custom Balloon Artistry
-              </div>
-
-              {/* Bottom Caption Bar */}
-              <div style={{
-                position: 'absolute',
-                bottom: '16px',
-                left: '16px',
-                right: '16px',
+                top: '10px',
+                left: '10px',
+                right: '10px',
                 display: 'flex',
                 justifyContent: 'space-between',
                 alignItems: 'center',
-                flexWrap: 'wrap',
+                gap: '8px',
+                pointerEvents: 'none',
+              }}>
+                <div style={{
+                  background: 'rgba(13, 13, 13, 0.88)',
+                  backdropFilter: 'blur(10px)',
+                  WebkitBackdropFilter: 'blur(10px)',
+                  border: '1px solid rgba(212, 175, 55, 0.6)',
+                  padding: '4px 10px',
+                  borderRadius: '50px',
+                  fontSize: 'clamp(0.68rem, 1.8vw, 0.82rem)',
+                  fontWeight: 800,
+                  color: 'var(--color-gold-light)',
+                  boxShadow: '0 4px 15px rgba(0,0,0,0.6)',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '5px',
+                  whiteSpace: 'nowrap',
+                }}>
+                  <span>👑</span> <span>Signature Setup</span>
+                </div>
+
+                <div style={{
+                  background: 'rgba(13, 13, 13, 0.88)',
+                  backdropFilter: 'blur(10px)',
+                  WebkitBackdropFilter: 'blur(10px)',
+                  border: '1px solid rgba(224, 0, 111, 0.6)',
+                  padding: '4px 10px',
+                  borderRadius: '50px',
+                  fontSize: 'clamp(0.68rem, 1.8vw, 0.82rem)',
+                  fontWeight: 800,
+                  color: 'var(--color-pink-light)',
+                  boxShadow: '0 4px 15px rgba(0,0,0,0.6)',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '5px',
+                  whiteSpace: 'nowrap',
+                }}>
+                  <span>✨</span> <span>Custom Artistry</span>
+                </div>
+              </div>
+
+              {/* Bottom Caption Bar inside Image */}
+              <div style={{
+                position: 'absolute',
+                bottom: '10px',
+                left: '10px',
+                right: '10px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'flex-end',
                 gap: '8px',
               }}>
-                <div style={{ textAlign: 'left' }}>
-                  <div style={{ fontSize: 'clamp(1rem, 2.2vw, 1.25rem)', fontWeight: 800, color: '#FFFFFF', textShadow: '0 2px 8px rgba(0,0,0,0.8)' }}>
+                <div style={{ textAlign: 'left', flex: '1 1 auto' }}>
+                  <div style={{ fontSize: 'clamp(0.88rem, 2.2vw, 1.2rem)', fontWeight: 800, color: '#FFFFFF', textShadow: '0 2px 8px rgba(0,0,0,0.9)', lineHeight: 1.2 }}>
                     Luxury Milestone & Birthday Backdrops
                   </div>
-                  <div style={{ fontSize: 'clamp(0.75rem, 1.6vw, 0.85rem)', color: '#CBD5E1' }}>
+                  <div style={{ fontSize: 'clamp(0.7rem, 1.5vw, 0.82rem)', color: '#E2E8F0', textShadow: '0 1px 4px rgba(0,0,0,0.9)', marginTop: '2px' }}>
                     Custom arch frames • Chrome gold & organic balloon styling
                   </div>
                 </div>
 
                 <Link href="#portfolio" style={{
-                  background: 'rgba(212, 175, 55, 0.95)',
+                  background: 'var(--color-gold-gradient)',
                   color: '#080808',
-                  padding: '8px 16px',
+                  padding: '6px 14px',
                   borderRadius: '50px',
-                  fontSize: '0.82rem',
+                  fontSize: 'clamp(0.72rem, 1.6vw, 0.82rem)',
                   fontWeight: 800,
                   textDecoration: 'none',
-                  boxShadow: '0 4px 12px rgba(212, 175, 55, 0.4)',
+                  whiteSpace: 'nowrap',
+                  flexShrink: 0,
+                  boxShadow: '0 4px 12px rgba(212, 175, 55, 0.5)',
                 }}>
-                  View All Setups →
+                  View All →
                 </Link>
               </div>
             </div>