fix(hero): make showcase pills and bottom caption 100% responsive on mobile screens
This commit is contained in:
+71
-61
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user