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

feat(about): rebuild quote card as native 4K CSS vector component with crisp typography

Browse Source
This commit is contained in:
Mediusa
2026-08-29 17:38:28 -07:00
parent 342595e7e6
commit dad517916b
34 changed files with 116 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AboutSection.tsx
+94 -17
View File
@@ -6,7 +6,7 @@ export default function AboutSection() {
return (
<section id="about" style={{
padding: '100px 24px',
backgroundColor: '#080808',
backgroundColor: '#000000',
position: 'relative',
borderBottom: '1px solid var(--border-gold)',
}}>
@@ -14,35 +14,110 @@ export default function AboutSection() {
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))',
gap: '50px',
alignItems: 'center',
}}>
{/* Left Column: Official Brand in Action Card */}
{/* Left Column: Native High-Res Luxury Brand Card */}
<div style={{ position: 'relative' }}>
<div className="glass-panel" style={{
padding: '16px',
<div style={{
background: '#0D0D0D',
borderRadius: '24px',
border: '2px solid var(--border-gold)',
boxShadow: '0 0 35px rgba(212, 175, 55, 0.2)',
overflow: 'hidden',
background: '#0F0F0F',
padding: '36px 30px',
border: '2px solid var(--color-gold)',
boxShadow: '0 12px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.2)',
textAlign: 'center',
position: 'relative',
}}>
<div style={{ position: 'relative', width: '100%', height: '360px', borderRadius: '16px', overflow: 'hidden' }}>
{/* Inner Double Gold Border */}
<div style={{
position: 'absolute',
top: '12px',
left: '12px',
right: '12px',
bottom: '12px',
border: '1px solid rgba(212, 175, 55, 0.4)',
borderRadius: '16px',
pointerEvents: 'none',
}} />
{/* Gold Quote Mark */}
<div style={{
fontSize: '2.8rem',
color: 'var(--color-gold)',
lineHeight: 1,
marginBottom: '12px',
fontFamily: 'var(--font-serif)',
}}>
“
</div>
{/* Vector Typography */}
<div style={{
fontSize: 'clamp(1.4rem, 2.4vw, 1.85rem)',
fontWeight: 600,
color: '#FFFFFF',
letterSpacing: '0.02em',
marginBottom: '4px',
}}>
Be led by God
</div>
<div style={{
fontFamily: 'var(--font-script)',
fontSize: 'clamp(2.4rem, 3.8vw, 3.2rem)',
color: 'var(--color-pink-light)',
lineHeight: 1.1,
marginBottom: '20px',
textShadow: '0 2px 14px rgba(224, 0, 111, 0.4)',
}}>
from the heart.
</div>
{/* Gold Heart Divider */}
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '12px',
maxWidth: '220px',
margin: '0 auto 20px',
}}>
<div style={{ height: '1px', background: 'var(--color-gold)', flex: 1 }} />
<span style={{ color: 'var(--color-gold)', fontSize: '0.95rem' }}>💛</span>
<div style={{ height: '1px', background: 'var(--color-gold)', flex: 1 }} />
</div>
{/* High-Res Master Logo */}
<div style={{ maxWidth: '280px', width: '100%', margin: '0 auto 12px', position: 'relative' }}>
<Image
src="/images/brand_social_quote_card.webp"
alt="Be led by God from the heart - Wise Hearted Event Decor"
fill
style={{ objectFit: 'cover' }}
src="/images/logo_clean_master.webp"
alt="Wise Hearted Event Decor"
width={1640}
height={1120}
style={{ width: '100%', height: 'auto', display: 'block' }}
/>
</div>
{/* Sub-tagline */}
<div style={{
fontSize: '0.72rem',
fontWeight: 800,
color: 'var(--color-gold-light)',
letterSpacing: '0.18em',
textTransform: 'uppercase',
}}>
Called to Create. Enabled by God.
</div>
</div>
</div>
{/* Right Column: About Story & Mission */}
<div>
<span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
<span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
About the Heart Behind the Brand
</span>
<h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '20px', lineHeight: 1.25 }}>
@@ -57,11 +132,13 @@ export default function AboutSection() {
</p>
<div style={{
background: 'rgba(255, 255, 255, 0.04)',
background: '#0F0F0F',
borderLeft: '4px solid var(--color-gold)',
padding: '16px 20px',
padding: '18px 22px',
borderRadius: '8px',
marginBottom: '32px',
border: '1px solid rgba(212, 175, 55, 0.25)',
borderLeftWidth: '4px',
}}>
<p style={{ fontStyle: 'italic', fontSize: '0.98rem', color: 'var(--color-gold-light)', margin: 0 }}>
&ldquo;Creating beautiful spaces and memorable events through God-given creativity, with faith, beauty, purpose, and love at the heart of every design.&rdquo;