feat(wise-hearted-decor): initial luxury event decor website build with 5 pillars, portfolio, and booking funnel
This commit is contained in:
@@ -0,0 +1,163 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');
|
||||
|
||||
:root {
|
||||
--color-gold: #D4AF37;
|
||||
--color-gold-light: #F7E7B4;
|
||||
--color-gold-dark: #A27B20;
|
||||
--color-gold-gradient: linear-gradient(135deg, #FDF0CD 0%, #D4AF37 50%, #9B7117 100%);
|
||||
--color-gold-glow: rgba(212, 175, 55, 0.4);
|
||||
|
||||
--color-pink: #E0006F;
|
||||
--color-pink-light: #FF3B94;
|
||||
--color-pink-dark: #A30050;
|
||||
--color-pink-gradient: linear-gradient(135deg, #FF3B94 0%, #E0006F 100%);
|
||||
--color-pink-glow: rgba(224, 0, 111, 0.45);
|
||||
|
||||
--bg-black: #080808;
|
||||
--bg-onyx: #0F0F0F;
|
||||
--bg-card: #141414;
|
||||
--bg-card-hover: #1A1A1A;
|
||||
|
||||
--border-gold: rgba(212, 175, 55, 0.25);
|
||||
--border-subtle: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--text-white: #FFFFFF;
|
||||
--text-cream: #F8F6F0;
|
||||
--text-muted: #94A3B8;
|
||||
--text-gold: #D4AF37;
|
||||
|
||||
--font-script: 'Great Vibes', cursive;
|
||||
--font-serif: 'Playfair Display', serif;
|
||||
--font-sans: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: var(--bg-black);
|
||||
color: var(--text-white);
|
||||
font-family: var(--font-sans);
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-serif);
|
||||
color: var(--text-white);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.script-font {
|
||||
font-family: var(--font-script);
|
||||
}
|
||||
|
||||
.gold-gradient-text {
|
||||
background: var(--color-gold-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.pink-gradient-text {
|
||||
background: var(--color-pink-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1240px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(20, 20, 20, 0.85);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-gold);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn-gold {
|
||||
background: var(--color-gold-gradient);
|
||||
color: #080808;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 14px 32px;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 18px var(--color-gold-glow);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-gold:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
|
||||
.btn-pink {
|
||||
background: var(--color-pink-gradient);
|
||||
color: #FFFFFF;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 14px 32px;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 18px var(--color-pink-glow);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-pink:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(224, 0, 111, 0.65);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--color-gold-light);
|
||||
border: 1.5px solid var(--color-gold);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
padding: 13px 30px;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
border-color: var(--color-gold-light);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* Luxury animations */
|
||||
@keyframes subtlePulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.glow-ambient {
|
||||
animation: subtlePulse 4s infinite ease-in-out;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Wise Hearted Event Decor | Luxury Balloon Styling & Event Design",
|
||||
description: "Creating beautiful spaces and memorable events through God-given creativity. Luxury balloon styling, arched backdrops, and custom decor with faith, beauty, purpose, and love.",
|
||||
keywords: "Event Decor, Luxury Balloon Garlands, Backdrop Rentals, Wedding Decor, Birthday Balloon Stylist, Wise Hearted Decor",
|
||||
icons: {
|
||||
icon: "/images/logo_seal.png",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Hero from '@/components/Hero';
|
||||
import PillarsSection from '@/components/PillarsSection';
|
||||
import PortfolioGallery from '@/components/PortfolioGallery';
|
||||
import ServicesSection from '@/components/ServicesSection';
|
||||
import AboutSection from '@/components/AboutSection';
|
||||
import BookingForm from '@/components/BookingForm';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<Header />
|
||||
<Hero />
|
||||
<PillarsSection />
|
||||
<PortfolioGallery />
|
||||
<ServicesSection />
|
||||
<AboutSection />
|
||||
<BookingForm />
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function AboutSection() {
|
||||
return (
|
||||
<section id="about" style={{
|
||||
padding: '100px 24px',
|
||||
backgroundColor: '#080808',
|
||||
position: 'relative',
|
||||
borderBottom: '1px solid var(--border-gold)',
|
||||
}}>
|
||||
<div className="container">
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
|
||||
gap: '50px',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
|
||||
{/* Left Column: Monogram & Brand Card */}
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div className="glass-panel" style={{
|
||||
padding: '40px 32px',
|
||||
borderRadius: '24px',
|
||||
textAlign: 'center',
|
||||
border: '2px solid var(--border-gold)',
|
||||
boxShadow: '0 0 40px rgba(212, 175, 55, 0.15)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '-50px',
|
||||
right: '-50px',
|
||||
width: '180px',
|
||||
height: '180px',
|
||||
background: 'radial-gradient(circle, rgba(224,0,111,0.2) 0%, transparent 70%)',
|
||||
filter: 'blur(30px)',
|
||||
}} />
|
||||
|
||||
<div style={{ position: 'relative', width: '220px', height: '220px', margin: '0 auto 24px' }}>
|
||||
<Image
|
||||
src="/images/logo_monogram.png"
|
||||
alt="Wise Hearted Monogram Logo"
|
||||
fill
|
||||
style={{ objectFit: 'contain' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ fontFamily: 'var(--font-script)', fontSize: '2rem', color: 'var(--color-gold)', marginBottom: '8px' }}>
|
||||
Be led by God from the heart.
|
||||
</div>
|
||||
<div style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
|
||||
Wise Hearted Event Decor
|
||||
</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' }}>
|
||||
About the Heart Behind the Brand
|
||||
</span>
|
||||
<h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '20px', lineHeight: 1.25 }}>
|
||||
Called to Create. <br />
|
||||
<span className="gold-gradient-text">Enabled by God.</span>
|
||||
</h2>
|
||||
<p style={{ fontSize: '1.05rem', lineHeight: 1.8, color: '#E2E8F0', marginBottom: '20px' }}>
|
||||
At <strong>Wise Hearted Event Decor</strong>, we believe every milestone, birthday, wedding, and celebration is a sacred opportunity to gather loved ones and create memories that last a lifetime.
|
||||
</p>
|
||||
<p style={{ fontSize: '1.05rem', lineHeight: 1.8, color: '#CBD5E1', marginBottom: '24px' }}>
|
||||
Founded with a deep commitment to faith, beauty, purpose, and love, our mission is to transform ordinary rooms into breathtaking, immersive spaces. We do not just build balloon garlands—we pour intentionality, artistic prayer, and meticulous craftsmanship into every single arch, floral arrangement, and personalized detail.
|
||||
</p>
|
||||
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.04)',
|
||||
borderLeft: '4px solid var(--color-gold)',
|
||||
padding: '16px 20px',
|
||||
borderRadius: '8px',
|
||||
marginBottom: '32px',
|
||||
}}>
|
||||
<p style={{ fontStyle: 'italic', fontSize: '0.98rem', color: 'var(--color-gold-light)', margin: 0 }}>
|
||||
“Creating beautiful spaces and memorable events through God-given creativity, with faith, beauty, purpose, and love at the heart of every design.”
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link href="#contact" className="btn-pink">
|
||||
<span>💕</span> Let’s Design Your Event
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function BookingForm() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
eventDate: '',
|
||||
eventLocation: '',
|
||||
eventType: 'Birthday Party',
|
||||
services: [] as string[],
|
||||
budget: '$600 - $1,200',
|
||||
vision: '',
|
||||
});
|
||||
|
||||
const handleCheckbox = (service: string) => {
|
||||
setFormData(prev => {
|
||||
const exists = prev.services.includes(service);
|
||||
return {
|
||||
...prev,
|
||||
services: exists
|
||||
? prev.services.filter(s => s !== service)
|
||||
: [...prev.services, service]
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contact" style={{
|
||||
padding: '100px 24px',
|
||||
backgroundColor: '#0A0A0A',
|
||||
position: 'relative',
|
||||
}}>
|
||||
<div className="container" style={{ maxWidth: '900px' }}>
|
||||
|
||||
{/* Header */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '50px' }}>
|
||||
<span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
|
||||
Book Your Date
|
||||
</span>
|
||||
<h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '16px' }}>
|
||||
Request a <span className="gold-gradient-text">Custom Quote</span>
|
||||
</h2>
|
||||
<p style={{ fontSize: '1.05rem', color: '#94A3B8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.7 }}>
|
||||
Tell us about your upcoming celebration! We’ll review your details and send you a customized design proposal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form Box */}
|
||||
<div className="glass-panel" style={{
|
||||
padding: '40px 32px',
|
||||
border: '1.5px solid var(--border-gold)',
|
||||
borderRadius: '24px',
|
||||
}}>
|
||||
{submitted ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px 20px' }}>
|
||||
<div style={{ fontSize: '3.5rem', marginBottom: '16px' }}>🎉</div>
|
||||
<h3 style={{ fontSize: '1.8rem', color: 'var(--color-gold)', fontWeight: 800, marginBottom: '12px' }}>
|
||||
Thank You, {formData.name || 'Friend'}!
|
||||
</h3>
|
||||
<p style={{ fontSize: '1.1rem', color: '#E2E8F0', maxWidth: '540px', margin: '0 auto 24px', lineHeight: 1.7 }}>
|
||||
We received your event request for <strong>{formData.eventDate || 'your upcoming date'}</strong>. Jackie and the Wise Hearted team will be in touch within 24–48 hours with design ideas and availability!
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setSubmitted(false)}
|
||||
className="btn-outline"
|
||||
style={{ padding: '10px 24px', fontSize: '0.9rem' }}
|
||||
>
|
||||
Submit Another Request
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
|
||||
|
||||
{/* Row 1: Name & Phone */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '20px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="e.g., Sarah Johnson"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
style={{ width: '100%', padding: '14px 18px', background: '#121212', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '8px', color: '#FFFFFF', fontSize: '0.95rem', outline: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
|
||||
Phone Number *
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
required
|
||||
placeholder="(555) 000-0000"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
style={{ width: '100%', padding: '14px 18px', background: '#121212', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '8px', color: '#FFFFFF', fontSize: '0.95rem', outline: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Email & Event Date */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '20px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
placeholder="sarah@example.com"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
style={{ width: '100%', padding: '14px 18px', background: '#121212', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '8px', color: '#FFFFFF', fontSize: '0.95rem', outline: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
|
||||
Event Date *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
value={formData.eventDate}
|
||||
onChange={(e) => setFormData({ ...formData, eventDate: e.target.value })}
|
||||
style={{ width: '100%', padding: '14px 18px', background: '#121212', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '8px', color: '#FFFFFF', fontSize: '0.95rem', outline: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: Event Type & Location */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '20px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
|
||||
Event Type
|
||||
</label>
|
||||
<select
|
||||
value={formData.eventType}
|
||||
onChange={(e) => setFormData({ ...formData, eventType: e.target.value })}
|
||||
style={{ width: '100%', padding: '14px 18px', background: '#121212', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '8px', color: '#FFFFFF', fontSize: '0.95rem', outline: 'none' }}
|
||||
>
|
||||
<option value="Birthday Party">Birthday Party</option>
|
||||
<option value="Wedding / Engagement">Wedding / Engagement</option>
|
||||
<option value="Baby Shower">Baby Shower</option>
|
||||
<option value="Graduation">Graduation</option>
|
||||
<option value="Holiday / Themed Party">Holiday / Themed Party</option>
|
||||
<option value="Corporate / Grand Opening">Corporate / Grand Opening</option>
|
||||
<option value="Other Celebration">Other Celebration</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
|
||||
Venue / City Location
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g., Home, Banquet Hall, Park"
|
||||
value={formData.eventLocation}
|
||||
onChange={(e) => setFormData({ ...formData, eventLocation: e.target.value })}
|
||||
style={{ width: '100%', padding: '14px 18px', background: '#121212', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '8px', color: '#FFFFFF', fontSize: '0.95rem', outline: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Checkboxes: Services Interested In */}
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '12px' }}>
|
||||
Services You Are Interested In:
|
||||
</label>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '10px' }}>
|
||||
{[
|
||||
'Organic Balloon Garland',
|
||||
'Custom Arched Backdrops',
|
||||
'Faux Florals & Greenery',
|
||||
'Mosaic Letters / Numbers',
|
||||
'Beverage / Dessert Station',
|
||||
'Full Event Styling Package',
|
||||
].map((service) => (
|
||||
<label
|
||||
key={service}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
background: '#121212',
|
||||
padding: '12px 14px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.88rem',
|
||||
color: '#E2E8F0',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.services.includes(service)}
|
||||
onChange={() => handleCheckbox(service)}
|
||||
style={{ accentColor: 'var(--color-pink)' }}
|
||||
/>
|
||||
<span>{service}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Budget Selector */}
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
|
||||
Estimated Decor Budget
|
||||
</label>
|
||||
<select
|
||||
value={formData.budget}
|
||||
onChange={(e) => setFormData({ ...formData, budget: e.target.value })}
|
||||
style={{ width: '100%', padding: '14px 18px', background: '#121212', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '8px', color: '#FFFFFF', fontSize: '0.95rem', outline: 'none' }}
|
||||
>
|
||||
<option value="$300 - $600">$300 – $600 (Garland & Small Setup)</option>
|
||||
<option value="$600 - $1,200">$600 – $1,200 (Backdrop + Large Garland)</option>
|
||||
<option value="$1,200 - $2,500">$1,200 – $2,500 (Multi-Arch + Florals + Props)</option>
|
||||
<option value="$2,500+">$2,500+ (Full Luxury Event Transformation)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Vision Description */}
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
|
||||
Theme, Color Palette & Vision Details
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
placeholder="Tell us about your colors, theme, inspiration, or any special requests..."
|
||||
value={formData.vision}
|
||||
onChange={(e) => setFormData({ ...formData, vision: e.target.value })}
|
||||
style={{ width: '100%', padding: '14px 18px', background: '#121212', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '8px', color: '#FFFFFF', fontSize: '0.95rem', outline: 'none', resize: 'vertical' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div style={{ textAlign: 'center', marginTop: '12px' }}>
|
||||
<button type="submit" className="btn-gold" style={{ width: '100%', justifyContent: 'center', fontSize: '1.05rem', padding: '16px' }}>
|
||||
<span>✨</span> Submit Custom Quote Request
|
||||
</button>
|
||||
<p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginTop: '12px' }}>
|
||||
We respect your privacy. No spam—only custom event design proposals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer style={{
|
||||
backgroundColor: '#050505',
|
||||
borderTop: '1px solid var(--border-gold)',
|
||||
padding: '70px 24px 40px',
|
||||
color: '#94A3B8',
|
||||
fontSize: '0.92rem',
|
||||
}}>
|
||||
<div className="container">
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
|
||||
gap: '40px',
|
||||
marginBottom: '50px',
|
||||
}}>
|
||||
|
||||
{/* Brand Info */}
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '14px', marginBottom: '16px' }}>
|
||||
<div style={{ position: 'relative', width: '44px', height: '44px', borderRadius: '50%', overflow: 'hidden', border: '1.5px solid var(--color-gold)' }}>
|
||||
<Image src="/images/logo_seal.png" alt="Wise Hearted Logo" fill style={{ objectFit: 'contain' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontFamily: 'var(--font-script)', fontSize: '1.8rem', color: 'var(--color-gold)', lineHeight: 1 }}>
|
||||
Wise Hearted
|
||||
</div>
|
||||
<div style={{ fontSize: '0.65rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
|
||||
Event Decor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style={{ lineHeight: 1.7, color: '#CBD5E1', marginBottom: '16px' }}>
|
||||
Creating beautiful spaces and memorable events through God-given creativity, with faith, beauty, purpose, and love at the heart of every design.
|
||||
</p>
|
||||
<div style={{ fontSize: '0.82rem', color: 'var(--color-gold-light)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
|
||||
CALLED TO CREATE. ENABLED BY GOD.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h4 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '18px' }}>
|
||||
Quick Navigation
|
||||
</h4>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<li><Link href="#about" style={{ color: '#94A3B8', textDecoration: 'none' }}>About Jackie & Our Heart</Link></li>
|
||||
<li><Link href="#pillars" style={{ color: '#94A3B8', textDecoration: 'none' }}>The 5 Brand Pillars</Link></li>
|
||||
<li><Link href="#portfolio" style={{ color: '#94A3B8', textDecoration: 'none' }}>Client Event Portfolio</Link></li>
|
||||
<li><Link href="#services" style={{ color: '#94A3B8', textDecoration: 'none' }}>Balloon & Backdrop Services</Link></li>
|
||||
<li><Link href="#contact" style={{ color: '#94A3B8', textDecoration: 'none' }}>Request a Custom Quote</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h4 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '18px' }}>
|
||||
Event Specialties
|
||||
</h4>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
<li>Weddings & Engagement Showers</li>
|
||||
<li>Milestone Birthday Installations</li>
|
||||
<li>Themed Baby Showers</li>
|
||||
<li>High School & College Graduations</li>
|
||||
<li>Holiday & Corporate Celebrations</li>
|
||||
<li>Mosaic Letter & Number Marquees</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Connect */}
|
||||
<div>
|
||||
<h4 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '18px' }}>
|
||||
Book & Inquire
|
||||
</h4>
|
||||
<p style={{ lineHeight: 1.6, marginBottom: '16px' }}>
|
||||
Ready to bring your dream event to life? Connect with us to reserve your event date.
|
||||
</p>
|
||||
<Link href="#contact" className="btn-gold" style={{ padding: '10px 24px', fontSize: '0.88rem', display: 'inline-flex' }}>
|
||||
<span>✨</span> Inquire Now
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div style={{
|
||||
borderTop: '1px solid rgba(255, 255, 255, 0.08)',
|
||||
paddingTop: '28px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
gap: '16px',
|
||||
fontSize: '0.85rem',
|
||||
}}>
|
||||
<div>
|
||||
© {new Date().getFullYear()} Wise Hearted Event Decor. All rights reserved.
|
||||
</div>
|
||||
<div style={{ fontStyle: 'italic', color: 'var(--color-gold-light)' }}>
|
||||
“Creating memorable moments with God-given creativity.”
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Header() {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrolled(window.scrollY > 30);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
zIndex: 1000,
|
||||
transition: 'all 0.3s ease',
|
||||
backgroundColor: scrolled ? 'rgba(8, 8, 8, 0.92)' : 'rgba(8, 8, 8, 0.65)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
WebkitBackdropFilter: 'blur(16px)',
|
||||
borderBottom: '1px solid rgba(212, 175, 55, 0.15)',
|
||||
padding: scrolled ? '12px 0' : '18px 0',
|
||||
}}>
|
||||
<div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
|
||||
{/* Brand Logo Link */}
|
||||
<Link href="/" style={{ display: 'flex', alignItems: 'center', gap: '14px', textDecoration: 'none' }}>
|
||||
<div style={{ position: 'relative', width: '48px', height: '48px', borderRadius: '50%', overflow: 'hidden', border: '1.5px solid var(--color-gold)', boxShadow: '0 0 12px rgba(212, 175, 55, 0.3)' }}>
|
||||
<Image
|
||||
src="/images/logo_seal.png"
|
||||
alt="Wise Hearted Event Decor Seal"
|
||||
fill
|
||||
style={{ objectFit: 'contain' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontFamily: 'var(--font-script)', fontSize: '1.75rem', color: 'var(--color-gold)', lineHeight: 1, letterSpacing: '0.02em', textShadow: '0 2px 8px rgba(212, 175, 55, 0.3)' }}>
|
||||
Wise Hearted
|
||||
</div>
|
||||
<div style={{ fontSize: '0.68rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: '2px' }}>
|
||||
Event Decor
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<nav style={{ display: 'flex', alignItems: 'center', gap: '28px' }} className="desktop-nav">
|
||||
<Link href="#about" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
|
||||
About
|
||||
</Link>
|
||||
<Link href="#pillars" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
|
||||
Brand Pillars
|
||||
</Link>
|
||||
<Link href="#portfolio" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
|
||||
Portfolio
|
||||
</Link>
|
||||
<Link href="#services" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
|
||||
Services
|
||||
</Link>
|
||||
<Link href="#contact" className="btn-gold" style={{ padding: '10px 24px', fontSize: '0.88rem' }}>
|
||||
Book Your Event ✨
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Hamburger Button */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
style={{
|
||||
display: 'none',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
color: 'var(--color-gold)',
|
||||
fontSize: '1.8rem',
|
||||
cursor: 'pointer',
|
||||
padding: '4px'
|
||||
}}
|
||||
className="mobile-hamburger-btn"
|
||||
aria-label="Toggle Navigation Menu"
|
||||
>
|
||||
{mobileMenuOpen ? '✕' : '☰'}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Dropdown */}
|
||||
{mobileMenuOpen && (
|
||||
<div style={{
|
||||
backgroundColor: '#0F0F0F',
|
||||
borderTop: '1px solid var(--border-gold)',
|
||||
padding: '24px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '18px',
|
||||
}}>
|
||||
<Link href="#about" onClick={() => setMobileMenuOpen(false)} style={{ color: '#FFFFFF', textDecoration: 'none', fontSize: '1.05rem', fontWeight: 600 }}>
|
||||
About
|
||||
</Link>
|
||||
<Link href="#pillars" onClick={() => setMobileMenuOpen(false)} style={{ color: '#FFFFFF', textDecoration: 'none', fontSize: '1.05rem', fontWeight: 600 }}>
|
||||
Brand Pillars
|
||||
</Link>
|
||||
<Link href="#portfolio" onClick={() => setMobileMenuOpen(false)} style={{ color: '#FFFFFF', textDecoration: 'none', fontSize: '1.05rem', fontWeight: 600 }}>
|
||||
Portfolio
|
||||
</Link>
|
||||
<Link href="#services" onClick={() => setMobileMenuOpen(false)} style={{ color: '#FFFFFF', textDecoration: 'none', fontSize: '1.05rem', fontWeight: 600 }}>
|
||||
Services
|
||||
</Link>
|
||||
<Link href="#contact" onClick={() => setMobileMenuOpen(false)} className="btn-pink" style={{ textAlign: 'center', justifyContent: 'center' }}>
|
||||
Book Your Event ✨
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style jsx>{`
|
||||
@media (max-width: 860px) {
|
||||
.desktop-nav {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-hamburger-btn {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function PillarsSection() {
|
||||
const pillars = [
|
||||
{
|
||||
icon: '✝️',
|
||||
title: 'FAITH',
|
||||
desc: 'Our foundation. Led by God, guided by faith in every celebration we touch.',
|
||||
color: 'var(--color-gold)',
|
||||
},
|
||||
{
|
||||
icon: '👑',
|
||||
title: 'PURPOSE',
|
||||
desc: 'Every installation is created with intention, elegance, and deep meaning.',
|
||||
color: 'var(--color-pink-light)',
|
||||
},
|
||||
{
|
||||
icon: '🤍',
|
||||
title: 'WISDOM',
|
||||
desc: 'Inspired by God, designed with mindful craftsmanship and flawless execution.',
|
||||
color: 'var(--color-gold)',
|
||||
},
|
||||
{
|
||||
icon: '💕',
|
||||
title: 'LOVE',
|
||||
desc: 'We celebrate life’s most meaningful moments with genuine warmth, care, and devotion.',
|
||||
color: 'var(--color-pink-light)',
|
||||
},
|
||||
{
|
||||
icon: '✨',
|
||||
title: 'CREATIVITY',
|
||||
desc: 'Turning visions into show-stopping balloon artistry and unforgettable spaces.',
|
||||
color: 'var(--color-gold)',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="pillars" style={{
|
||||
padding: '100px 24px',
|
||||
backgroundColor: '#0A0A0A',
|
||||
position: 'relative',
|
||||
borderBottom: '1px solid var(--border-gold)',
|
||||
}}>
|
||||
<div className="container">
|
||||
|
||||
{/* Section Heading */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '60px' }}>
|
||||
<span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
|
||||
Our Foundational Core
|
||||
</span>
|
||||
<h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '16px' }}>
|
||||
The 5 <span className="gold-gradient-text">Brand Pillars</span>
|
||||
</h2>
|
||||
<p style={{ fontSize: '1.1rem', color: '#94A3B8', maxWidth: '720px', margin: '0 auto', lineHeight: 1.7 }}>
|
||||
“Creating beautiful spaces and memorable events through God-given creativity, with faith, beauty, purpose, and love at the heart of every design.”
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 5 Pillars Grid */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
|
||||
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)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
boxShadow: '0 0 16px rgba(0,0,0,0.4)',
|
||||
}}>
|
||||
{item.icon}
|
||||
</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 */}
|
||||
<div style={{
|
||||
background: 'linear-gradient(90deg, rgba(224, 0, 111, 0.15) 0%, rgba(212, 175, 55, 0.15) 50%, rgba(224, 0, 111, 0.15) 100%)',
|
||||
border: '1px solid var(--border-gold)',
|
||||
borderRadius: '50px',
|
||||
padding: '16px 28px',
|
||||
textAlign: 'center',
|
||||
maxWidth: '850px',
|
||||
margin: '0 auto',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '16px 28px',
|
||||
flexWrap: 'wrap',
|
||||
fontSize: '0.88rem',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '0.15em',
|
||||
textTransform: 'uppercase',
|
||||
color: '#FFFFFF',
|
||||
}}>
|
||||
<span>FAITHFUL</span>
|
||||
<span style={{ color: 'var(--color-gold)' }}>•</span>
|
||||
<span>BOLD</span>
|
||||
<span style={{ color: 'var(--color-pink)' }}>•</span>
|
||||
<span>ELEGANT</span>
|
||||
<span style={{ color: 'var(--color-gold)' }}>•</span>
|
||||
<span>EMPOWERING</span>
|
||||
<span style={{ color: 'var(--color-pink)' }}>•</span>
|
||||
<span>PURPOSEFUL</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
interface GalleryItem {
|
||||
id: number;
|
||||
title: string;
|
||||
category: string;
|
||||
desc: string;
|
||||
image: string;
|
||||
tag: string;
|
||||
}
|
||||
|
||||
const portfolioItems: GalleryItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Titus & Alayna Tuscan Wedding Arch',
|
||||
category: 'Weddings',
|
||||
desc: 'Tuscan yellow centerpiece arch flanked by crisp white panels, organic lemon-white balloon clouds, and white floral arrangements.',
|
||||
image: '/images/portfolio_titus_alayna_wedding.jpg',
|
||||
tag: 'Weddings & Engagements',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Emelda Luxury Black, Gold & Crimson Birthday',
|
||||
category: 'Birthdays',
|
||||
desc: 'Black marble backdrop with gold script lettering, surrounded by a dramatic organic garland of chrome gold, crimson red, and onyx black balloons.',
|
||||
image: '/images/portfolio_emelda_luxury_black_gold.jpg',
|
||||
tag: 'Milestone Celebrations',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Berry Sweet Baby Shower Triple Arch',
|
||||
category: 'Baby Showers',
|
||||
desc: 'Triple custom arched panels with hand-illustrated strawberry & blueberry motifs, framed in organic strawberry red, navy blue, and pastel pink balloons.',
|
||||
image: '/images/portfolio_berry_sweet_baby.jpg',
|
||||
tag: 'Baby Showers',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Amina’s "Berry First Birthday" Backdrop',
|
||||
category: 'Birthdays',
|
||||
desc: 'Custom arched backdrop with 3D strawberry foil balloons and an organic balloon cascade in cherry red, blush pink, and white.',
|
||||
image: '/images/portfolio_amina_berry_first_birthday.png',
|
||||
tag: '1st Birthdays',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Sage Green, Blush & Chrome Gold Birthday Arch',
|
||||
category: 'Birthdays',
|
||||
desc: 'Elegant white arch with 3D gold "Happy Birthday" lettering, accented with faux eucalyptus greenery, silk roses, and chrome gold spheres.',
|
||||
image: '/images/portfolio_sage_gold_birthday.jpg',
|
||||
tag: 'Adult Birthdays',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Class of 2026 Tropical Brights Graduation',
|
||||
category: 'Themed',
|
||||
desc: 'Vibrant tropical color palette of hot pink, neon orange, bright turquoise, and lime green with monstera palm leaves on a lavender backdrop.',
|
||||
image: '/images/portfolio_tropical_class_2026.jpg',
|
||||
tag: 'Graduations',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Lavender Moon Arch & Giant Mosaic Letter "J"',
|
||||
category: 'Specialty',
|
||||
desc: 'Gold crescent moon hoop with deep navy and lilac balloons, paired with sheer lilac drape backdrops and a towering custom balloon mosaic "J".',
|
||||
image: '/images/portfolio_lavender_moon_arch.jpg',
|
||||
tag: 'Custom Mosaic Letters',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Patriotic Memorial Day Celebration Arch',
|
||||
category: 'Themed',
|
||||
desc: 'Grand red, white, royal blue, and chrome gold balloon arch featuring metallic 3D starburst foils for a high-impact holiday installation.',
|
||||
image: '/images/portfolio_memorial_day_arch.jpg',
|
||||
tag: 'Community Events',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: '"Pop, Fizz, Fun!" Citrus Beverage Station',
|
||||
category: 'Specialty',
|
||||
desc: 'Vibrant orange and pearl white organic balloon wave framing an arched drink station with custom floral typography and rustic wooden beverage crates.',
|
||||
image: '/images/portfolio_pop_fizz_orange.jpg',
|
||||
tag: 'Drink & Treat Stations',
|
||||
},
|
||||
];
|
||||
|
||||
export default function PortfolioGallery() {
|
||||
const [selectedCategory, setSelectedCategory] = useState('All');
|
||||
const [activeModalImage, setActiveModalImage] = useState<GalleryItem | null>(null);
|
||||
|
||||
const categories = ['All', 'Weddings', 'Birthdays', 'Baby Showers', 'Themed', 'Specialty'];
|
||||
|
||||
const filteredItems = selectedCategory === 'All'
|
||||
? portfolioItems
|
||||
: portfolioItems.filter(item => item.category === selectedCategory);
|
||||
|
||||
return (
|
||||
<section id="portfolio" style={{
|
||||
padding: '100px 24px',
|
||||
backgroundColor: '#080808',
|
||||
position: 'relative',
|
||||
borderBottom: '1px solid var(--border-gold)',
|
||||
}}>
|
||||
<div className="container">
|
||||
|
||||
{/* Heading */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '48px' }}>
|
||||
<span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
|
||||
Real Client Installations
|
||||
</span>
|
||||
<h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '16px' }}>
|
||||
Featured <span className="gold-gradient-text">Event Portfolio</span>
|
||||
</h2>
|
||||
<p style={{ fontSize: '1.1rem', color: '#94A3B8', maxWidth: '680px', margin: '0 auto', lineHeight: 1.7 }}>
|
||||
Every event is a custom masterpiece. Browse through our real balloon garlands, custom backdrops, and bespoke styling.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filter Pills */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: '12px',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom: '50px',
|
||||
}}>
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
style={{
|
||||
background: selectedCategory === cat ? 'var(--color-gold-gradient)' : 'rgba(255, 255, 255, 0.05)',
|
||||
color: selectedCategory === cat ? '#080808' : '#CBD5E1',
|
||||
border: selectedCategory === cat ? 'none' : '1px solid rgba(255, 255, 255, 0.12)',
|
||||
padding: '10px 24px',
|
||||
borderRadius: '50px',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 700,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.25s ease',
|
||||
boxShadow: selectedCategory === cat ? '0 4px 15px rgba(212, 175, 55, 0.4)' : 'none',
|
||||
}}
|
||||
>
|
||||
{cat === 'All' ? '✨ All Creations' : cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Gallery Grid */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))',
|
||||
gap: '28px',
|
||||
}}>
|
||||
{filteredItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => setActiveModalImage(item)}
|
||||
className="glass-panel"
|
||||
style={{
|
||||
borderRadius: '16px',
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease',
|
||||
border: '1px solid rgba(212, 175, 55, 0.2)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-6px)';
|
||||
e.currentTarget.style.borderColor = 'var(--color-gold)';
|
||||
e.currentTarget.style.boxShadow = '0 12px 30px rgba(212, 175, 55, 0.25)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.borderColor = 'rgba(212, 175, 55, 0.2)';
|
||||
e.currentTarget.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.6)';
|
||||
}}
|
||||
>
|
||||
{/* Image Container */}
|
||||
<div style={{ position: 'relative', width: '100%', height: '360px', overflow: 'hidden', backgroundColor: '#141414' }}>
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
fill
|
||||
style={{ objectFit: 'cover', transition: 'transform 0.5s ease' }}
|
||||
/>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '16px',
|
||||
right: '16px',
|
||||
background: 'rgba(8, 8, 8, 0.85)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
border: '1px solid var(--color-gold)',
|
||||
color: 'var(--color-gold-light)',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 800,
|
||||
padding: '4px 12px',
|
||||
borderRadius: '20px',
|
||||
letterSpacing: '0.05em',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
{item.tag}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Caption */}
|
||||
<div style={{ padding: '22px 24px' }}>
|
||||
<h3 style={{ fontSize: '1.2rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '8px' }}>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p style={{ fontSize: '0.9rem', lineHeight: 1.6, color: '#94A3B8', margin: 0 }}>
|
||||
{item.desc}
|
||||
</p>
|
||||
<div style={{ marginTop: '16px', display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--color-pink-light)', fontSize: '0.85rem', fontWeight: 700 }}>
|
||||
<span>Click to view full photo</span> <span>↗</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Full-Screen Image Lightbox Modal */}
|
||||
{activeModalImage && (
|
||||
<div
|
||||
onClick={() => setActiveModalImage(null)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.92)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
zIndex: 9999,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '24px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
position: 'relative',
|
||||
maxWidth: '900px',
|
||||
width: '100%',
|
||||
maxHeight: '90vh',
|
||||
background: '#0F0F0F',
|
||||
border: '2px solid var(--color-gold)',
|
||||
borderRadius: '16px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 0 40px rgba(212, 175, 55, 0.4)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => setActiveModalImage(null)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '16px',
|
||||
right: '16px',
|
||||
zIndex: 10,
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
color: '#FFFFFF',
|
||||
border: '1px solid var(--color-gold)',
|
||||
borderRadius: '50%',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
fontSize: '1.2rem',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<div style={{ position: 'relative', width: '100%', height: '65vh', backgroundColor: '#000000' }}>
|
||||
<Image
|
||||
src={activeModalImage.image}
|
||||
alt={activeModalImage.title}
|
||||
fill
|
||||
style={{ objectFit: 'contain' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '20px 24px', background: '#141414', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
<div style={{ display: 'inline-block', color: 'var(--color-pink-light)', fontSize: '0.8rem', fontWeight: 800, textTransform: 'uppercase', marginBottom: '4px' }}>
|
||||
{activeModalImage.tag}
|
||||
</div>
|
||||
<h3 style={{ fontSize: '1.3rem', color: 'var(--color-gold-light)', fontWeight: 800, marginBottom: '6px' }}>
|
||||
{activeModalImage.title}
|
||||
</h3>
|
||||
<p style={{ fontSize: '0.95rem', color: '#CBD5E1', margin: 0 }}>
|
||||
{activeModalImage.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function ServicesSection() {
|
||||
const services = [
|
||||
{
|
||||
icon: '🎈',
|
||||
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: '🏛️',
|
||||
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: '🌸',
|
||||
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: '🔤',
|
||||
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: '🍾',
|
||||
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: '✨',
|
||||
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)'],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="services" style={{
|
||||
padding: '100px 24px',
|
||||
backgroundColor: '#0A0A0A',
|
||||
position: 'relative',
|
||||
borderBottom: '1px solid var(--border-gold)',
|
||||
}}>
|
||||
<div className="container">
|
||||
|
||||
{/* Section Header */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '60px' }}>
|
||||
<span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-gold)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
|
||||
What We Do
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Services Grid */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
|
||||
gap: '24px',
|
||||
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}
|
||||
</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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Process Banner */}
|
||||
<div className="glass-panel" style={{
|
||||
padding: '40px 32px',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid var(--border-gold)',
|
||||
background: 'linear-gradient(135deg, rgba(20,20,20,0.9) 0%, rgba(30,15,25,0.9) 100%)',
|
||||
}}>
|
||||
<h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: 'var(--color-gold-light)', textAlign: 'center', marginBottom: '32px' }}>
|
||||
Simple 3-Step Booking Process
|
||||
</h3>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
|
||||
gap: '24px',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'var(--color-gold-gradient)', color: '#080808', fontWeight: 800, fontSize: '1.2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
|
||||
1
|
||||
</div>
|
||||
<h4 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '8px' }}>Share Your Vision</h4>
|
||||
<p style={{ fontSize: '0.9rem', color: '#94A3B8' }}>Fill out our quick inquiry form with your date, theme, and ideas.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'var(--color-pink-gradient)', color: '#FFFFFF', fontWeight: 800, fontSize: '1.2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
|
||||
2
|
||||
</div>
|
||||
<h4 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '8px' }}>Design & Proposal</h4>
|
||||
<p style={{ fontSize: '0.9rem', color: '#94A3B8' }}>Receive a customized design proposal with colors and transparent pricing.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ width: '48px', height: '48px', borderRadius: '50%', background: 'var(--color-gold-gradient)', color: '#080808', fontWeight: 800, fontSize: '1.2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
|
||||
3
|
||||
</div>
|
||||
<h4 style={{ fontSize: '1.1rem', fontWeight: 700, marginBottom: '8px' }}>Flawless Setup</h4>
|
||||
<p style={{ fontSize: '0.9rem', color: '#94A3B8' }}>We deliver, style, and transform your venue on time so you can enjoy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user