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

feat(icons): upgrade all emojis across hero, pillars, services, studio, testimonials, and mobile dock to luxury gold SVG vector icons

Browse Source
This commit is contained in:
Mediusa
2026-08-30 15:09:52 -07:00
parent 870a52c39d
commit 927cbd35fa
4261 changed files with 317978 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Hero.tsx
+17 -13
View File
@@ -1,6 +1,7 @@
import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Sparkles, Camera, Crown, Wand2, ArrowRight } from 'lucide-react';
export default function Hero() {
return (
@@ -27,11 +28,11 @@ export default function Hero() {
boxShadow: '0 0 20px rgba(212, 175, 55, 0.25)',
maxWidth: '96%',
}}>
<span style={{ color: 'var(--color-pink)', fontSize: '0.9rem' }}>✦</span>
<Sparkles size={14} color="var(--color-pink)" />
<span style={{ fontSize: 'clamp(0.72rem, 2vw, 0.82rem)', fontWeight: 800, color: 'var(--color-gold-light)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
CALLED TO CREATE. ENABLED BY GOD.
</span>
<span style={{ color: 'var(--color-pink)', fontSize: '0.9rem' }}>✦</span>
<Sparkles size={14} color="var(--color-pink)" />
</div>
{/* Master 4X Super-Sampled 3D Gold Logo */}
@@ -74,11 +75,11 @@ export default function Hero() {
marginBottom: '40px',
padding: '0 4px',
}}>
<Link href="#contact" className="btn-gold" style={{ fontSize: '1rem', padding: '16px 36px' }}>
<span>✨</span> Request a Custom Quote
<Link href="#contact" className="btn-gold" style={{ fontSize: '1rem', padding: '16px 36px', gap: '8px' }}>
<Sparkles size={18} /> Request a Custom Quote
</Link>
<Link href="#portfolio" className="btn-outline" style={{ fontSize: '1rem', padding: '15px 32px' }}>
<span>📸</span> Explore Our Work
<Link href="#portfolio" className="btn-outline" style={{ fontSize: '1rem', padding: '15px 32px', gap: '8px' }}>
<Camera size={18} color="var(--color-gold-light)" /> Explore Our Work
</Link>
</div>
@@ -138,7 +139,7 @@ export default function Hero() {
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
border: '1px solid rgba(212, 175, 55, 0.6)',
padding: '4px 10px',
padding: '5px 12px',
borderRadius: '50px',
fontSize: 'clamp(0.68rem, 1.8vw, 0.82rem)',
fontWeight: 800,
@@ -146,10 +147,10 @@ export default function Hero() {
boxShadow: '0 4px 15px rgba(0,0,0,0.6)',
display: 'inline-flex',
alignItems: 'center',
gap: '5px',
gap: '6px',
whiteSpace: 'nowrap',
}}>
<span>👑</span> <span>Signature Setup</span>
<Crown size={14} color="var(--color-gold-light)" /> <span>Signature Setup</span>
</div>
<div style={{
@@ -157,7 +158,7 @@ export default function Hero() {
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
border: '1px solid rgba(224, 0, 111, 0.6)',
padding: '4px 10px',
padding: '5px 12px',
borderRadius: '50px',
fontSize: 'clamp(0.68rem, 1.8vw, 0.82rem)',
fontWeight: 800,
@@ -165,10 +166,10 @@ export default function Hero() {
boxShadow: '0 4px 15px rgba(0,0,0,0.6)',
display: 'inline-flex',
alignItems: 'center',
gap: '5px',
gap: '6px',
whiteSpace: 'nowrap',
}}>
<span>✨</span> <span>Custom Artistry</span>
<Wand2 size={14} color="var(--color-pink-light)" /> <span>Custom Artistry</span>
</div>
</div>
@@ -202,9 +203,12 @@ export default function Hero() {
textDecoration: 'none',
whiteSpace: 'nowrap',
flexShrink: 0,
display: 'inline-flex',
alignItems: 'center',
gap: '4px',
boxShadow: '0 4px 12px rgba(212, 175, 55, 0.5)',
}}>
View All →
<span>View All</span> <ArrowRight size={13} />
</Link>
</div>
</div>
src/components/MobileQuickBar.tsx
+5 -2
View File
@@ -2,6 +2,7 @@
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { Phone, Sparkles } from 'lucide-react';
export default function MobileQuickBar() {
const [isVisible, setIsVisible] = useState(false);
@@ -59,7 +60,8 @@ export default function MobileQuickBar() {
textAlign: 'center',
}}
>
<span>📞</span> Call / Text
<Phone size={15} color="var(--color-gold-light)" />
<span>Call / Text</span>
</a>
<Link
@@ -80,7 +82,8 @@ export default function MobileQuickBar() {
boxShadow: '0 4px 15px rgba(212, 175, 55, 0.4)',
}}
>
<span>✨</span> Get Quote
<Sparkles size={15} />
<span>Get Quote</span>
</Link>
</div>
);
src/components/MoodBoardEstimator.tsx
+68 -27
View File
@@ -1,6 +1,22 @@
'use client';
import React, { useState } from 'react';
import {
Heart,
Crown,
Sparkles,
Palette,
Wine,
Layers,
Type,
GlassWater,
Flower2,
Check,
ArrowRight,
Sparkle,
SlidersHorizontal,
LucideIcon
} from 'lucide-react';
interface PaletteOption {
id: string;
@@ -12,22 +28,22 @@ interface PaletteOption {
interface EventTypeOption {
id: string;
label: string;
icon: string;
icon: LucideIcon;
}
interface ElementOption {
id: string;
label: string;
icon: string;
icon: LucideIcon;
tag: string;
}
const eventTypes: EventTypeOption[] = [
{ id: 'wedding', label: 'Wedding & Engagement', icon: '💍' },
{ id: 'milestone_birthday', label: 'Milestone Birthday (30th/50th)', icon: '🎂' },
{ id: 'baby_shower', label: 'Baby Shower / Gender Reveal', icon: '👶' },
{ id: 'themed_party', label: 'Themed / 1st Birthday', icon: '🍓' },
{ id: 'corporate_gala', label: 'Corporate Gala & Brand Launch', icon: '🥂' },
{ id: 'wedding', label: 'Wedding & Engagement', icon: Heart },
{ id: 'milestone_birthday', label: 'Milestone Birthday (30th/50th)', icon: Crown },
{ id: 'baby_shower', label: 'Baby Shower / Gender Reveal', icon: Sparkles },
{ id: 'themed_party', label: 'Themed / 1st Birthday', icon: Palette },
{ id: 'corporate_gala', label: 'Corporate Gala & Brand Launch', icon: Wine },
];
const palettes: PaletteOption[] = [
@@ -64,12 +80,12 @@ const palettes: PaletteOption[] = [
];
const decorElements: ElementOption[] = [
{ id: 'balloon_cascade', label: 'Organic Balloon Cloud Cascade', icon: '🎈', tag: 'Most Popular' },
{ id: 'arch_panels', label: 'Custom Multi-Arch Wood Panels', icon: '🏛️', tag: 'Signature' },
{ id: 'mosaic_letters', label: 'Giant 3D Balloon Mosaic Letters', icon: '🔤', tag: 'High Impact' },
{ id: 'beverage_station', label: 'Arched Drink & Treat Station', icon: '🍸', tag: 'Interactive' },
{ id: 'floral_accents', label: 'Silk Florals & Botanical Sprigs', icon: '🌹', tag: 'Luxury' },
{ id: 'custom_lettering', label: '3D Gold Script Custom Name Sign', icon: '✨', tag: 'Personalized' },
{ id: 'balloon_cascade', label: 'Organic Balloon Cloud Cascade', icon: Palette, tag: 'Most Popular' },
{ id: 'arch_panels', label: 'Custom Multi-Arch Wood Panels', icon: Layers, tag: 'Signature' },
{ id: 'mosaic_letters', label: 'Giant 3D Balloon Mosaic Letters', icon: Type, tag: 'High Impact' },
{ id: 'beverage_station', label: 'Arched Drink & Treat Station', icon: GlassWater, tag: 'Interactive' },
{ id: 'floral_accents', label: 'Silk Florals & Botanical Sprigs', icon: Flower2, tag: 'Luxury' },
{ id: 'custom_lettering', label: '3D Gold Script Custom Name Sign', icon: Sparkles, tag: 'Personalized' },
];
export default function MoodBoardEstimator() {
@@ -207,6 +223,7 @@ export default function MoodBoardEstimator() {
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{eventTypes.map((et) => {
const isSelected = selectedEventType === et.id;
const IconComp = et.icon;
return (
<button
key={et.id}
@@ -228,7 +245,17 @@ export default function MoodBoardEstimator() {
transition: 'all 0.2s ease',
}}
>
<span style={{ fontSize: '1.25rem' }}>{et.icon}</span>
<span style={{
width: '28px',
height: '28px',
borderRadius: '8px',
background: isSelected ? 'rgba(212, 175, 55, 0.2)' : 'rgba(255, 255, 255, 0.05)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<IconComp size={16} color={isSelected ? 'var(--color-gold)' : '#94A3B8'} />
</span>
<span>{et.label}</span>
</button>
);
@@ -236,7 +263,6 @@ export default function MoodBoardEstimator() {
</div>
</div>
{/* STEP 2: Color Palette */}
<div
className="glass-panel"
style={{
@@ -288,32 +314,32 @@ export default function MoodBoardEstimator() {
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
<span style={{ fontSize: '0.92rem', fontWeight: isSelected ? 700 : 600, color: isSelected ? '#FFFFFF' : '#CBD5E1' }}>
<span style={{ fontWeight: isSelected ? 800 : 600, color: isSelected ? '#FFFFFF' : '#E2E8F0', fontSize: '0.92rem' }}>
{p.name}
</span>
<div style={{ display: 'flex', gap: '4px' }}>
{p.colors.map((c, i) => (
<div
key={i}
{p.colors.map((c, cIdx) => (
<span
key={cIdx}
style={{
width: '14px',
height: '14px',
borderRadius: '50%',
backgroundColor: c,
border: '1px solid rgba(255,255,255,0.4)',
border: '1px solid rgba(255,255,255,0.3)',
boxShadow: '0 2px 4px rgba(0,0,0,0.5)',
}}
/>
))}
</div>
</div>
<span style={{ fontSize: '0.78rem', color: '#94A3B8' }}>{p.desc}</span>
<span style={{ fontSize: '0.78rem', color: '#94A3B8', lineHeight: 1.3 }}>{p.desc}</span>
</button>
);
})}
</div>
</div>
{/* STEP 3: Decor Elements */}
<div
className="glass-panel"
style={{
@@ -346,6 +372,7 @@ export default function MoodBoardEstimator() {
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{decorElements.map((el) => {
const isSelected = selectedElements.includes(el.id);
const IconComp = el.icon;
return (
<button
key={el.id}
@@ -367,15 +394,25 @@ export default function MoodBoardEstimator() {
transition: 'all 0.2s ease',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<span>{el.icon}</span>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<span style={{
width: '26px',
height: '26px',
borderRadius: '6px',
background: isSelected ? 'rgba(212, 175, 55, 0.2)' : 'rgba(255, 255, 255, 0.05)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<IconComp size={15} color={isSelected ? 'var(--color-gold)' : '#94A3B8'} />
</span>
<span>{el.label}</span>
</div>
<span
style={{
fontSize: '0.72rem',
fontWeight: 700,
color: isSelected ? 'var(--color-gold-light)' : '#64748B',
color: isSelected ? 'var(--color-gold)' : '#64748B',
background: isSelected ? 'rgba(212, 175, 55, 0.2)' : 'transparent',
padding: '2px 6px',
borderRadius: '6px',
@@ -390,7 +427,6 @@ export default function MoodBoardEstimator() {
</div>
</div>
{/* Live Customized Preview Banner & CTA */}
<div
style={{
background: 'linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%)',
@@ -452,9 +488,14 @@ export default function MoodBoardEstimator() {
fontWeight: 800,
cursor: 'pointer',
boxShadow: '0 6px 25px rgba(212, 175, 55, 0.5)',
display: 'inline-flex',
alignItems: 'center',
gap: '8px',
}}
>
<span>✨</span> Lock In Design & Get Quote →
<Sparkles size={18} />
<span>Lock In Design &amp; Get Quote</span>
<ArrowRight size={16} />
</button>
</div>
</div>
src/components/PillarsSection.tsx
+94 -43
View File
@@ -1,36 +1,42 @@
import React from 'react';
import { Crown, Heart, Sparkles, Gem, Compass, ShieldCheck, Palette, Wand2 } from 'lucide-react';
export default function PillarsSection() {
const pillars = [
{
icon: '✝️',
icon: Sparkles,
title: 'FAITH',
desc: 'Our foundation. Led by God, guided by faith in every celebration we touch.',
color: 'var(--color-gold)',
glow: 'rgba(212, 175, 55, 0.35)',
},
{
icon: '👑',
icon: Crown,
title: 'PURPOSE',
desc: 'Every installation is created with intention, elegance, and deep meaning.',
color: 'var(--color-pink-light)',
glow: 'rgba(224, 0, 111, 0.35)',
},
{
icon: '🤍',
icon: ShieldCheck,
title: 'WISDOM',
desc: 'Inspired by God, designed with mindful craftsmanship and flawless execution.',
color: 'var(--color-gold)',
glow: 'rgba(212, 175, 55, 0.35)',
},
{
icon: '💕',
icon: Heart,
title: 'LOVE',
desc: 'We celebrate life’s most meaningful moments with genuine warmth, care, and devotion.',
color: 'var(--color-pink-light)',
glow: 'rgba(224, 0, 111, 0.35)',
},
{
icon: '✨',
icon: Palette,
title: 'CREATIVITY',
desc: 'Turning visions into show-stopping balloon artistry and unforgettable spaces.',
color: 'var(--color-gold)',
glow: 'rgba(212, 175, 55, 0.35)',
},
];
@@ -64,19 +70,63 @@ export default function PillarsSection() {
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>
{/* Card 1 */}
<div className="glass-panel" style={{ padding: '32px 24px', textAlign: 'center', border: '1.5px solid rgba(212, 175, 55, 0.4)' }}>
<div style={{
width: '56px',
height: '56px',
borderRadius: '50%',
background: 'linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%)',
border: '1.5px solid var(--color-gold)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 16px',
boxShadow: '0 0 20px rgba(212, 175, 55, 0.3)',
}}>
<Crown size={28} color="var(--color-gold-light)" strokeWidth={2.2} />
</div>
<h3 style={{ fontSize: '1.25rem', 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>
{/* Card 2 */}
<div className="glass-panel" style={{ padding: '32px 24px', textAlign: 'center', border: '1.5px solid rgba(224, 0, 111, 0.4)' }}>
<div style={{
width: '56px',
height: '56px',
borderRadius: '50%',
background: 'linear-gradient(135deg, rgba(224, 0, 111, 0.2) 0%, rgba(224, 0, 111, 0.05) 100%)',
border: '1.5px solid var(--color-pink-light)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 16px',
boxShadow: '0 0 20px rgba(224, 0, 111, 0.3)',
}}>
<Heart size={28} color="var(--color-pink-light)" strokeWidth={2.2} />
</div>
<h3 style={{ fontSize: '1.25rem', fontWeight: 800, color: 'var(--color-pink-light)', marginBottom: '8px' }}>Faith &amp; 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>
{/* Card 3 */}
<div className="glass-panel" style={{ padding: '32px 24px', textAlign: 'center', border: '1.5px solid rgba(212, 175, 55, 0.4)' }}>
<div style={{
width: '56px',
height: '56px',
borderRadius: '50%',
background: 'linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%)',
border: '1.5px solid var(--color-gold)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 16px',
boxShadow: '0 0 20px rgba(212, 175, 55, 0.3)',
}}>
<Gem size={28} color="var(--color-gold-light)" strokeWidth={2.2} />
</div>
<h3 style={{ fontSize: '1.25rem', 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>
@@ -93,39 +143,40 @@ export default function PillarsSection() {
gap: '20px',
marginBottom: '60px',
}}>
{pillars.map((item, idx) => (
<div key={idx} className="glass-panel" style={{
padding: '32px 20px',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
borderTop: `3px solid ${item.color}`,
transition: 'transform 0.3s ease, border-color 0.3s ease',
}}>
<div style={{
fontSize: '2.4rem',
marginBottom: '16px',
width: '64px',
height: '64px',
borderRadius: '50%',
background: 'rgba(255, 255, 255, 0.05)',
{pillars.map((item, idx) => {
const IconComponent = item.icon;
return (
<div key={idx} className="glass-panel" style={{
padding: '32px 20px',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
border: '1px solid rgba(255, 255, 255, 0.1)',
boxShadow: '0 0 16px rgba(0,0,0,0.4)',
transition: 'all 0.3s ease',
}}>
{item.icon}
<div style={{
width: '50px',
height: '50px',
borderRadius: '50%',
background: 'rgba(255, 255, 255, 0.05)',
border: `1.5px solid ${item.color}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '16px',
boxShadow: `0 0 16px ${item.glow}`,
}}>
<IconComponent size={24} color={item.color} strokeWidth={2.2} />
</div>
<h3 style={{ fontSize: '1.15rem', fontWeight: 800, color: item.color, marginBottom: '10px', letterSpacing: '0.08em' }}>
{item.title}
</h3>
<p style={{ fontSize: '0.88rem', color: 'var(--text-muted)', lineHeight: 1.6, margin: 0 }}>
{item.desc}
</p>
</div>
<h3 style={{ fontSize: '1.18rem', fontWeight: 800, color: item.color, letterSpacing: '0.08em', marginBottom: '12px' }}>
{item.title}
</h3>
<p style={{ fontSize: '0.92rem', lineHeight: 1.6, color: '#CBD5E1', margin: 0 }}>
{item.desc}
</p>
</div>
))}
);
})}
</div>
{/* Brand Vibes Banner */}
src/components/QuickQuotePartyForm.tsx
+51 -14
View File
@@ -1,6 +1,7 @@
'use client';
import React, { useState } from 'react';
import { Check, Sparkles, MessageSquare, ArrowRight, Loader2, CheckCircle2 } from 'lucide-react';
export default function QuickQuotePartyForm() {
const [formData, setFormData] = useState({
@@ -76,7 +77,20 @@ export default function QuickQuotePartyForm() {
>
{submitted ? (
<div style={{ textAlign: 'center', padding: '24px 16px' }}>
<div style={{ fontSize: '3rem', marginBottom: '10px' }}>🎉</div>
<div style={{
width: '64px',
height: '64px',
borderRadius: '50%',
background: 'rgba(212, 175, 55, 0.15)',
border: '1.5px solid var(--color-gold)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 16px',
boxShadow: '0 0 24px rgba(212, 175, 55, 0.3)',
}}>
<CheckCircle2 size={36} color="var(--color-gold-light)" />
</div>
<h3 style={{ fontSize: '1.6rem', color: 'var(--color-gold)', fontWeight: 800, marginBottom: '8px' }}>
Thank You, {formData.name || 'Friend'}!
</h3>
@@ -161,9 +175,12 @@ export default function QuickQuotePartyForm() {
borderRadius: '50px',
border: '1px solid rgba(212, 175, 55, 0.4)',
color: 'var(--color-gold-light)',
display: 'inline-flex',
alignItems: 'center',
gap: '5px',
}}
>
✓ Bespoke Styling
<Check size={12} strokeWidth={3} /> Bespoke Styling
</span>
<span
style={{
@@ -172,9 +189,12 @@ export default function QuickQuotePartyForm() {
borderRadius: '50px',
border: '1px solid rgba(224, 0, 111, 0.4)',
color: 'var(--color-pink-light)',
display: 'inline-flex',
alignItems: 'center',
gap: '5px',
}}
>
✓ Full Setup &amp; Teardown
<Check size={12} strokeWidth={3} /> Full Setup &amp; Teardown
</span>
<span
style={{
@@ -182,9 +202,12 @@ export default function QuickQuotePartyForm() {
padding: '5px 12px',
borderRadius: '50px',
border: '1px solid rgba(255, 255, 255, 0.15)',
display: 'inline-flex',
alignItems: 'center',
gap: '5px',
}}
>
✓ Zero Obligation
<Check size={12} strokeWidth={3} /> Zero Obligation
</span>
</div>
</div>
@@ -230,13 +253,13 @@ export default function QuickQuotePartyForm() {
cursor: 'pointer',
}}
>
<option value="Milestone Birthday (30th, 40th, 50th)">🎂 Milestone Birthday (30th/50th)</option>
<option value="Wedding & Engagement Arch">💍 Wedding &amp; Engagement</option>
<option value="Baby Shower & Gender Reveal">👶 Baby Shower / Gender Reveal</option>
<option value="Themed 1st Birthday Party">🍓 Themed / 1st Birthday Party</option>
<option value="Graduation & Milestone Gala">🎓 Graduation &amp; Milestone Gala</option>
<option value="Corporate Launch & VIP Event">🥂 Corporate Launch &amp; VIP Event</option>
<option value="Organic Balloon Garland Only">🎈 Balloon Garland Setup Only</option>
<option value="Milestone Birthday (30th, 40th, 50th)">Milestone Birthday (30th, 40th, 50th)</option>
<option value="Wedding & Engagement Arch">Wedding &amp; Engagement Arch</option>
<option value="Baby Shower & Gender Reveal">Baby Shower / Gender Reveal</option>
<option value="Themed 1st Birthday Party">Themed / 1st Birthday Party</option>
<option value="Graduation & Milestone Gala">Graduation &amp; Milestone Gala</option>
<option value="Corporate Launch & VIP Event">Corporate Launch &amp; VIP Event</option>
<option value="Organic Balloon Garland Only">Balloon Garland Setup Only</option>
</select>
</div>
@@ -361,7 +384,7 @@ export default function QuickQuotePartyForm() {
>
<div style={{ flex: '1' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
<span style={{ fontSize: '0.85rem' }}>💬</span>
<MessageSquare size={13} color="var(--color-pink-light)" />
<label
style={{
fontSize: '0.8rem',
@@ -407,10 +430,23 @@ export default function QuickQuotePartyForm() {
cursor: isSubmitting ? 'not-allowed' : 'pointer',
boxShadow: '0 6px 20px rgba(212, 175, 55, 0.4)',
opacity: isSubmitting ? 0.7 : 1,
display: 'inline-flex',
alignItems: 'center',
gap: '8px',
}}
>
<span>{isSubmitting ? '⏳' : '✨'}</span>
{isSubmitting ? 'Sending Request...' : 'Get A Quote From Jackie →'}
{isSubmitting ? (
<>
<Loader2 size={18} className="spin" />
<span>Sending Request...</span>
</>
) : (
<>
<Sparkles size={18} />
<span>Get A Quote From Jackie</span>
<ArrowRight size={16} />
</>
)}
</button>
</div>
</div>
@@ -422,3 +458,4 @@ export default function QuickQuotePartyForm() {
</section>
);
}
src/components/ServicesSection.tsx
+76 -43
View File
@@ -1,40 +1,53 @@
import React from 'react';
import Link from 'next/link';
import { Palette, Layers, Flower2, Type, GlassWater, Truck, Check, Sparkles, ArrowRight } from 'lucide-react';
export default function ServicesSection() {
const services = [
{
icon: '🎈',
icon: Palette,
color: 'var(--color-gold-light)',
borderColor: 'rgba(212, 175, 55, 0.4)',
title: 'Organic Balloon Garlands & Arches',
desc: 'Double-stuffed luxury latex balloons with custom color formulas matched to your theme. Free-flowing organic arches, demi-arches, and massive entryways.',
features: ['Custom Color Matching', 'Matte, Chrome & Pearl Finishes', 'Indoor & Outdoor Installations'],
},
{
icon: '🏛️',
icon: Layers,
color: 'var(--color-pink-light)',
borderColor: 'rgba(224, 0, 111, 0.4)',
title: 'Custom Arched Backdrops & Panels',
desc: 'Multi-tiered wooden arch backdrops, custom color painted panels, printed themes (fruits, tropicals, florals), and personalized 3D laser-cut acrylic lettering.',
features: ['Single, Double & Triple Arches', 'Custom Decals & Names', 'Shimmer & Drape Options'],
},
{
icon: '🌸',
icon: Flower2,
color: 'var(--color-gold-light)',
borderColor: 'rgba(212, 175, 55, 0.4)',
title: 'Floral & Greenery Embellishments',
desc: 'Elevate your balloon installations with premium faux florals, cascading silk roses, eucalyptus sprigs, and lush tropical monstera fronds.',
features: ['Silk & Dried Florals', 'Tropical Palm Leaves', 'Coordinated Color Schemes'],
},
{
icon: '🔤',
icon: Type,
color: 'var(--color-pink-light)',
borderColor: 'rgba(224, 0, 111, 0.4)',
title: 'Giant Mosaic Numbers & Letters',
desc: 'Stand out with 4ft–5ft towering mosaic frames filled with custom-coordinated mini balloons—perfect for milestone birthdays, graduations, and initials.',
features: ['Initials & Full Names', 'Milestone Numbers (1, 16, 21, 50, etc.)', 'High-Impact Photo Prop'],
},
{
icon: '🍾',
icon: GlassWater,
color: 'var(--color-gold-light)',
borderColor: 'rgba(212, 175, 55, 0.4)',
title: 'Drink, Cake & Dessert Stations',
desc: 'Make your refreshment tables a central attraction with custom framed arches, rustic wooden crates, and thematic props like our "Pop, Fizz, Fun!" display.',
features: ['Beverage Bar Framing', 'Dessert Table Backdrops', 'Prop & Crate Rentals'],
},
{
icon: '✨',
icon: Truck,
color: 'var(--color-pink-light)',
borderColor: 'rgba(224, 0, 111, 0.4)',
title: 'Full-Service White-Glove Setup',
desc: 'Enjoy your celebration with zero stress. Our team arrives on-site to professionally construct, secure, style, and strike every element seamlessly.',
features: ['Timely On-Site Delivery', 'Professional Rigging & Weighting', 'Post-Event Breakdown (Strike)'],
@@ -58,54 +71,74 @@ export default function ServicesSection() {
<h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '16px' }}>
Our Luxury <span className="pink-gradient-text">Decor Services</span>
</h2>
<p style={{ fontSize: '1.1rem', color: '#94A3B8', maxWidth: '700px', margin: '0 auto', lineHeight: 1.7 }}>
From intimate gatherings to lavish celebrations, every installation is tailored to reflect your unique vision with God-given creativity.
<p style={{ fontSize: '1.1rem', color: '#94A3B8', maxWidth: '650px', margin: '0 auto', lineHeight: 1.7 }}>
Every celebration is one-of-a-kind. We customize every detail—from balloon color palettes to backdrop sizes and florals—to match your dream vision.
</p>
</div>
{/* Services Grid */}
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
gap: '24px',
gridTemplateColumns: 'repeat(auto-fit, minmax(330px, 1fr))',
gap: '28px',
marginBottom: '60px',
}}>
{services.map((service, idx) => (
<div key={idx} className="glass-panel" style={{
padding: '36px 28px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
border: '1px solid rgba(255, 255, 255, 0.08)',
transition: 'all 0.3s ease',
}}>
<div>
<div style={{ fontSize: '2.4rem', marginBottom: '18px' }}>
{service.icon}
{services.map((svc, idx) => {
const IconComp = svc.icon;
return (
<div
key={idx}
className="glass-panel"
style={{
padding: '36px 28px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
border: `1.5px solid ${svc.borderColor}`,
transition: 'all 0.3s ease',
}}
>
<div>
<div style={{
width: '52px',
height: '52px',
borderRadius: '14px',
background: 'rgba(255, 255, 255, 0.04)',
border: `1px solid ${svc.borderColor}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: '20px',
boxShadow: '0 4px 15px rgba(0,0,0,0.5)',
}}>
<IconComp size={26} color={svc.color} strokeWidth={2} />
</div>
<h3 style={{ fontSize: '1.3rem', fontWeight: 800, marginBottom: '12px', color: '#FFFFFF' }}>
{svc.title}
</h3>
<p style={{ fontSize: '0.94rem', lineHeight: 1.65, color: '#94A3B8', marginBottom: '24px' }}>
{svc.desc}
</p>
</div>
<h3 style={{ fontSize: '1.28rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '12px' }}>
{service.title}
</h3>
<p style={{ fontSize: '0.94rem', lineHeight: 1.65, color: '#94A3B8', marginBottom: '20px' }}>
{service.desc}
</p>
</div>
<div>
<ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px 0', display: 'flex', flexDirection: 'column', gap: '8px' }}>
{service.features.map((feat, fIdx) => (
<li key={fIdx} style={{ fontSize: '0.88rem', color: '#CBD5E1', display: 'flex', alignItems: 'center', gap: '8px' }}>
<span style={{ color: 'var(--color-gold)', fontWeight: 800 }}>✓</span>
<span>{feat}</span>
</li>
))}
</ul>
<Link href="#contact" style={{ color: 'var(--color-gold-light)', textDecoration: 'none', fontSize: '0.88rem', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
<span>Inquire for Pricing</span> <span>→</span>
</Link>
<div style={{ borderTop: '1px solid rgba(255, 255, 255, 0.08)', paddingTop: '18px' }}>
<ul style={{ listStyle: 'none', padding: 0, margin: '0 0 20px 0', display: 'flex', flexDirection: 'column', gap: '8px' }}>
{svc.features.map((feat, fIdx) => (
<li key={fIdx} style={{ fontSize: '0.85rem', color: '#E2E8F0', display: 'flex', alignItems: 'center', gap: '8px' }}>
<span style={{ color: svc.color, display: 'flex', alignItems: 'center' }}>
<Check size={14} strokeWidth={3} />
</span>
{feat}
</li>
))}
</ul>
<Link href="#contact" style={{ color: 'var(--color-gold-light)', textDecoration: 'none', fontSize: '0.88rem', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
<span>Inquire for Pricing</span> <ArrowRight size={14} />
</Link>
</div>
</div>
</div>
))}
);
})}
</div>
{/* Process Banner */}
src/components/TestimonialsSection.tsx
+17 -7
View File
@@ -1,6 +1,7 @@
'use client';
import React from 'react';
import { Star, Sparkles, Heart } from 'lucide-react';
interface Testimonial {
name: string;
@@ -67,11 +68,15 @@ export default function TestimonialsSection() {
color: 'var(--color-pink-light)',
letterSpacing: '0.15em',
textTransform: 'uppercase',
display: 'block',
display: 'inline-flex',
alignItems: 'center',
gap: '6px',
marginBottom: '10px',
}}
>
⭐️ Client Love & Trust
<Sparkles size={14} color="var(--color-pink-light)" />
<span>Client Love &amp; Trust</span>
<Sparkles size={14} color="var(--color-pink-light)" />
</span>
<h2
style={{
@@ -80,7 +85,7 @@ export default function TestimonialsSection() {
marginBottom: '16px',
}}
>
Memories Crafted with <span className="gold-gradient-text">Heart & Faith</span>
Memories Crafted with <span className="gold-gradient-text">Heart &amp; Faith</span>
</h2>
<p
style={{
@@ -119,14 +124,18 @@ export default function TestimonialsSection() {
>
<div>
{/* Rating Stars */}
<div style={{ display: 'flex', gap: '3px', marginBottom: '14px', color: '#D4AF37', fontSize: '1rem' }}>
{'★'.repeat(t.rating)}
<div style={{ display: 'flex', gap: '3px', marginBottom: '14px' }}>
{[...Array(t.rating)].map((_, sIdx) => (
<Star key={sIdx} size={16} fill="var(--color-gold)" color="var(--color-gold)" />
))}
</div>
{/* Highlight Tag */}
<span
style={{
display: 'inline-block',
display: 'inline-flex',
alignItems: 'center',
gap: '4px',
fontSize: '0.75rem',
fontWeight: 700,
color: 'var(--color-pink-light)',
@@ -136,7 +145,8 @@ export default function TestimonialsSection() {
marginBottom: '12px',
}}
>
{t.highlight}
<Heart size={11} fill="var(--color-pink-light)" />
<span>{t.highlight}</span>
</span>
{/* Quote */}