From 90fa128139ac95644ba37ff301ecff340c07c93f Mon Sep 17 00:00:00 2001
From: Brian Smith <dronesmiths2@gmail.com>
Date: Sun, 30 Aug 2026 09:07:37 -0700
Subject: [PATCH] feat(hero): embed 4K signature party display showcase frame
 with luxury badges

---
 src/components/Hero.tsx | 121 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 120 insertions(+), 1 deletion(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 4799bb5..a2ca0d9 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -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>
   );