99 lines
4.5 KiB
TypeScript
99 lines
4.5 KiB
TypeScript
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',
|
||
backgroundColor: '#000000',
|
||
borderBottom: '1px solid var(--border-gold)',
|
||
}}>
|
||
<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>
|
||
|
||
{/* Master 4X Super-Sampled 3D Gold Logo */}
|
||
<div style={{ maxWidth: '480px', width: '100%', margin: '0 auto 28px', position: 'relative' }}>
|
||
<Image
|
||
src="/images/logo_clean_master.png"
|
||
alt="Wise Hearted Event Decor Logo"
|
||
width={1640}
|
||
height={1120}
|
||
priority
|
||
style={{ width: '100%', height: 'auto', display: 'block', margin: '0 auto' }}
|
||
/>
|
||
</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>
|
||
);
|
||
}
|