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

refactor(hero): remove badge grid from Hero and integrate as dedicated Section 3 feature showcase

Browse Source
This commit is contained in:
Mediusa
2026-08-30 09:06:33 -07:00
parent 5b2037ffd0
commit 17c0bf3891
2 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Hero.tsx
+1 -26
View File
@@ -71,7 +71,7 @@ export default function Hero() {
justifyContent: 'center',
gap: '14px',
flexWrap: 'wrap',
marginBottom: '50px',
marginBottom: '20px',
padding: '0 4px',
}}>
<Link href="#contact" className="btn-gold" style={{ fontSize: '1rem', padding: '16px 36px' }}>
@@ -82,31 +82,6 @@ export default function Hero() {
</Link>
</div>
{/* Trust Badges Grid */}
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
gap: '14px',
maxWidth: '980px',
margin: '0 auto',
}}>
<div className="glass-panel" style={{ padding: '18px 16px', textAlign: 'center' }}>
<div style={{ fontSize: '1.7rem', marginBottom: '4px' }}>👑</div>
<h3 style={{ fontSize: '1.05rem', fontWeight: 700, color: 'var(--color-gold)', marginBottom: '4px' }}>Bespoke Installations</h3>
<p style={{ fontSize: '0.86rem', color: 'var(--text-muted)' }}>Custom color-matched palettes tailored to your theme.</p>
</div>
<div className="glass-panel" style={{ padding: '18px 16px', textAlign: 'center' }}>
<div style={{ fontSize: '1.7rem', marginBottom: '4px' }}>✝️</div>
<h3 style={{ fontSize: '1.05rem', fontWeight: 700, color: 'var(--color-pink-light)', marginBottom: '4px' }}>Faith & Purpose Driven</h3>
<p style={{ fontSize: '0.86rem', color: 'var(--text-muted)' }}>Every design crafted with intentionality, love, and care.</p>
</div>
<div className="glass-panel" style={{ padding: '18px 16px', textAlign: 'center' }}>
<div style={{ fontSize: '1.7rem', marginBottom: '4px' }}>💎</div>
<h3 style={{ fontSize: '1.05rem', fontWeight: 700, color: 'var(--color-gold)', marginBottom: '4px' }}>Full-Service Execution</h3>
<p style={{ fontSize: '0.86rem', color: 'var(--text-muted)' }}>Delivery, professional setup, and seamless breakdown.</p>
</div>
</div>
</div>
</section>
);
src/components/PillarsSection.tsx
+33 -3
View File
@@ -44,19 +44,49 @@ export default function PillarsSection() {
<div className="container">
{/* Section Heading */}
<div style={{ textAlign: 'center', marginBottom: '60px' }}>
<div style={{ textAlign: 'center', marginBottom: '45px' }}>
<span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
Our Foundational Core
The Wise Hearted Experience
</span>
<h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '16px' }}>
The 5 <span className="gold-gradient-text">Brand Pillars</span>
Why Clients Choose <span className="gold-gradient-text">Wise Hearted</span>
</h2>
<p style={{ fontSize: '1.1rem', color: '#94A3B8', maxWidth: '720px', margin: '0 auto', lineHeight: 1.7 }}>
&ldquo;Creating beautiful spaces and memorable events through God-given creativity, with faith, beauty, purpose, and love at the heart of every design.&rdquo;
</p>
</div>
{/* 3 VIP Execution Feature Cards */}
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: '20px',
maxWidth: '1100px',
margin: '0 auto 55px',
}}>
<div className="glass-panel" style={{ padding: '28px 22px', textAlign: 'center', border: '1px solid rgba(212, 175, 55, 0.35)' }}>
<div style={{ fontSize: '2.2rem', marginBottom: '10px' }}>👑</div>
<h3 style={{ fontSize: '1.2rem', fontWeight: 800, color: 'var(--color-gold)', marginBottom: '8px' }}>Bespoke Installations</h3>
<p style={{ fontSize: '0.92rem', color: '#CBD5E1', lineHeight: 1.6, margin: 0 }}>Custom color-matched palettes tailored to your theme, mood board, and venue aesthetics.</p>
</div>
<div className="glass-panel" style={{ padding: '28px 22px', textAlign: 'center', border: '1px solid rgba(224, 0, 111, 0.35)' }}>
<div style={{ fontSize: '2.2rem', marginBottom: '10px' }}>✝️</div>
<h3 style={{ fontSize: '1.2rem', fontWeight: 800, color: 'var(--color-pink-light)', marginBottom: '8px' }}>Faith & Purpose Driven</h3>
<p style={{ fontSize: '0.92rem', color: '#CBD5E1', lineHeight: 1.6, margin: 0 }}>Every design crafted with intentionality, love, and dedicated prayer for your family.</p>
</div>
<div className="glass-panel" style={{ padding: '28px 22px', textAlign: 'center', border: '1px solid rgba(212, 175, 55, 0.35)' }}>
<div style={{ fontSize: '2.2rem', marginBottom: '10px' }}>💎</div>
<h3 style={{ fontSize: '1.2rem', fontWeight: 800, color: 'var(--color-gold)', marginBottom: '8px' }}>Full-Service Execution</h3>
<p style={{ fontSize: '0.92rem', color: '#CBD5E1', lineHeight: 1.6, margin: 0 }}>White-glove delivery, on-site professional installation, styling, and seamless breakdown.</p>
</div>
</div>
{/* 5 Pillars Grid */}
<div style={{ textAlign: 'center', marginBottom: '30px' }}>
<span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-gold-light)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
✦ OUR 5 CORE BRAND PILLARS ✦
</span>
</div>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',