Mediusa/wise-hearted-decor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hero): embed 4K signature party display showcase frame with luxury badges

Browse Source
This commit is contained in:
Mediusa
2026-08-30 09:07:37 -07:00
parent 17c0bf3891
commit 90fa128139
1 changed files with 120 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Hero.tsx
+120 -1
View File
@@ -71,7 +71,7 @@ export default function Hero() {
justifyContent: 'center',
gap: '14px',
flexWrap: 'wrap',
marginBottom: '20px',
marginBottom: '40px',
padding: '0 4px',
}}>
<Link href="#contact" className="btn-gold" style={{ fontSize: '1rem', padding: '16px 36px' }}>
@@ -82,6 +82,125 @@ export default function Hero() {
</Link>
</div>
{/* Hero Party Display Showcase Frame */}
<div style={{
maxWidth: '960px',
margin: '0 auto',
position: 'relative',
borderRadius: '24px',
padding: '4px',
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)',
}}>
<div style={{
position: 'relative',
borderRadius: '20px',
overflow: 'hidden',
backgroundColor: '#0D0D0D',
}}>
{/* Main Featured Party Image */}
<div style={{
position: 'relative',
width: '100%',
height: 'clamp(280px, 46vw, 480px)',
}}>
<Image
src="/images/portfolio_emelda_luxury_black_gold.webp"
alt="Wise Hearted Event Decor - Luxury Party Backdrop & Balloon Garland Installation"
fill
priority
style={{ objectFit: 'cover', objectPosition: 'center' }}
/>
{/* Subtle Luxury Gradient Overlay */}
<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%)',
pointerEvents: 'none',
}} />
{/* Floating Badges */}
<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',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexWrap: 'wrap',
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)' }}>
Luxury Milestone & Birthday Backdrops
</div>
<div style={{ fontSize: 'clamp(0.75rem, 1.6vw, 0.85rem)', color: '#CBD5E1' }}>
Custom arch frames • Chrome gold & organic balloon styling
</div>
</div>
<Link href="#portfolio" style={{
background: 'rgba(212, 175, 55, 0.95)',
color: '#080808',
padding: '8px 16px',
borderRadius: '50px',
fontSize: '0.82rem',
fontWeight: 800,
textDecoration: 'none',
boxShadow: '0 4px 12px rgba(212, 175, 55, 0.4)',
}}>
View All Setups →
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
);