feat(wise-hearted-decor): initial luxury event decor website build with 5 pillars, portfolio, and booking funnel

src/components/Hero.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Hero() {
+  return (
+    <section style={{
+      position: 'relative',
+      paddingTop: '160px',
+      paddingBottom: '100px',
+      overflow: 'hidden',
+      background: 'radial-gradient(circle at 50% 20%, rgba(224, 0, 111, 0.15) 0%, rgba(212, 175, 55, 0.08) 35%, #080808 75%)',
+      borderBottom: '1px solid var(--border-gold)',
+    }}>
+      
+      {/* Decorative Glow Elements */}
+      <div style={{
+        position: 'absolute',
+        top: '10%',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: '600px',
+        height: '600px',
+        background: 'radial-gradient(circle, rgba(224, 0, 111, 0.18) 0%, rgba(212, 175, 55, 0.12) 50%, transparent 70%)',
+        filter: 'blur(80px)',
+        zIndex: 1,
+        pointerEvents: 'none',
+      }} />
+
+      <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
+        
+        {/* Brand Tagline Badge */}
+        <div style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '8px',
+          background: 'rgba(20, 20, 20, 0.85)',
+          border: '1.5px solid var(--color-gold)',
+          padding: '8px 22px',
+          borderRadius: '50px',
+          marginBottom: '28px',
+          boxShadow: '0 0 20px rgba(212, 175, 55, 0.25)',
+        }}>
+          <span style={{ color: 'var(--color-pink)', fontSize: '1rem' }}>✦</span>
+          <span style={{ fontSize: '0.82rem', fontWeight: 800, color: 'var(--color-gold-light)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
+            CALLED TO CREATE. ENABLED BY GOD.
+          </span>
+          <span style={{ color: 'var(--color-pink)', fontSize: '1rem' }}>✦</span>
+        </div>
+
+        {/* Extracted 3D Gold Logo Image */}
+        <div style={{ maxWidth: '680px', width: '100%', margin: '0 auto 24px', position: 'relative', filter: 'drop-shadow(0 12px 28px rgba(0, 0, 0, 0.8))' }}>
+          <Image 
+            src="/images/logo_main.png" 
+            alt="Wise Hearted Event Decor Logo" 
+            width={680} 
+            height={240} 
+            priority
+            style={{ width: '100%', height: 'auto', display: 'block', margin: '0 auto', borderRadius: '12px' }}
+          />
+        </div>
+
+        {/* Subtitle / Promise */}
+        <p style={{
+          fontSize: 'clamp(1.15rem, 2.5vw, 1.45rem)',
+          lineHeight: 1.6,
+          color: '#E2E8F0',
+          maxWidth: '780px',
+          margin: '0 auto 36px',
+          fontWeight: 400,
+        }}>
+          Transforming life’s most cherished celebrations with <strong style={{ color: 'var(--color-gold)', fontWeight: 700 }}>luxury balloon styling</strong>, <strong style={{ color: 'var(--color-pink-light)', fontWeight: 700 }}>custom arched backdrops</strong>, and <strong style={{ color: '#FFFFFF' }}>bespoke event decor</strong>.
+        </p>
+
+        {/* CTA Button Group */}
+        <div style={{ display: 'flex', justifyContent: 'center', gap: '18px', flexWrap: 'wrap', marginBottom: '60px' }}>
+          <Link href="#contact" className="btn-gold" style={{ fontSize: '1.05rem', padding: '16px 36px' }}>
+            <span>✨</span> Request a Custom Quote
+          </Link>
+          <Link href="#portfolio" className="btn-outline" style={{ fontSize: '1.05rem', padding: '15px 32px' }}>
+            <span>📸</span> Explore Our Work
+          </Link>
+        </div>
+
+        {/* Trust Badges Grid */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+          gap: '20px',
+          maxWidth: '960px',
+          margin: '0 auto',
+        }}>
+          <div className="glass-panel" style={{ padding: '20px 24px', textAlign: 'center' }}>
+            <div style={{ fontSize: '1.8rem', marginBottom: '6px' }}>👑</div>
+            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-gold)', marginBottom: '4px' }}>Bespoke Installations</h3>
+            <p style={{ fontSize: '0.88rem', color: 'var(--text-muted)' }}>Custom color-matched palettes tailored to your theme.</p>
+          </div>
+          <div className="glass-panel" style={{ padding: '20px 24px', textAlign: 'center' }}>
+            <div style={{ fontSize: '1.8rem', marginBottom: '6px' }}>✝️</div>
+            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-pink-light)', marginBottom: '4px' }}>Faith & Purpose Driven</h3>
+            <p style={{ fontSize: '0.88rem', color: 'var(--text-muted)' }}>Every design crafted with intentionality, love, and care.</p>
+          </div>
+          <div className="glass-panel" style={{ padding: '20px 24px', textAlign: 'center' }}>
+            <div style={{ fontSize: '1.8rem', marginBottom: '6px' }}>💎</div>
+            <h3 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-gold)', marginBottom: '4px' }}>Full-Service Execution</h3>
+            <p style={{ fontSize: '0.88rem', color: 'var(--text-muted)' }}>Delivery, professional setup, and seamless breakdown.</p>
+          </div>
+        </div>
+
+      </div>
+    </section>
+  );
+}