+
Book Your Date
@@ -54,6 +69,26 @@ export default function BookingForm() {
+ {/* Live Availability Badge */}
+
+ β
+ 2026/2027 Calendar Open: Weekend dates book 4β8 weeks in advance. Reserve early to lock in your date!
+
+
{/* Form Box */}
{/* Desktop Nav */}
-
diff --git a/src/components/MoodBoardEstimator.tsx b/src/components/MoodBoardEstimator.tsx
new file mode 100644
index 0000000..45d3113
--- /dev/null
+++ b/src/components/MoodBoardEstimator.tsx
@@ -0,0 +1,464 @@
+'use client';
+
+import React, { useState } from 'react';
+
+interface PaletteOption {
+ id: string;
+ name: string;
+ colors: string[];
+ desc: string;
+}
+
+interface EventTypeOption {
+ id: string;
+ label: string;
+ icon: string;
+}
+
+interface ElementOption {
+ id: string;
+ label: string;
+ icon: string;
+ 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: 'π₯' },
+];
+
+const palettes: PaletteOption[] = [
+ {
+ id: 'royal_noir',
+ name: 'Royal Noir Gala',
+ colors: ['#000000', '#D4AF37', '#990000'],
+ desc: 'Onyx black marble, reflective chrome gold, and deep crimson.',
+ },
+ {
+ id: 'sweet_berry',
+ name: 'Berry Sweet Pastel',
+ colors: ['#E0006F', '#FFB6C1', '#002244'],
+ desc: 'Strawberry red, blush baby pink, and deep midnight navy.',
+ },
+ {
+ id: 'tuscan_garden',
+ name: 'Tuscan Sunshine & Flora',
+ colors: ['#F5C518', '#FFFFFF', '#4A5D4E'],
+ desc: 'Warm sun yellow, crisp bridal white, and silk eucalyptus greenery.',
+ },
+ {
+ id: 'tropical_neon',
+ name: 'Tropical Luxe Brights',
+ colors: ['#FF007F', '#FF6600', '#00F0FF'],
+ desc: 'Vibrant hot pink, electric orange, and bright turquoise.',
+ },
+ {
+ id: 'celestial_moon',
+ name: 'Midnight & Gold Moon',
+ colors: ['#0B1B3D', '#C8A2C8', '#D4AF37'],
+ desc: 'Royal navy, soft lavender drape, and gold starburst accents.',
+ },
+];
+
+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' },
+];
+
+export default function MoodBoardEstimator() {
+ const [selectedEventType, setSelectedEventType] = useState
('milestone_birthday');
+ const [selectedPalette, setSelectedPalette] = useState('royal_noir');
+ const [selectedElements, setSelectedElements] = useState([
+ 'balloon_cascade',
+ 'arch_panels',
+ 'custom_lettering',
+ ]);
+
+ const toggleElement = (id: string) => {
+ setSelectedElements((prev) =>
+ prev.includes(id) ? prev.filter((el) => el !== id) : [...prev, id]
+ );
+ };
+
+ const currentEventType = eventTypes.find((e) => e.id === selectedEventType)?.label || '';
+ const currentPalette = palettes.find((p) => p.id === selectedPalette);
+ const selectedElementLabels = decorElements
+ .filter((e) => selectedElements.includes(e.id))
+ .map((e) => e.label);
+
+ const handleApplyToBooking = () => {
+ const visionString = `Custom Design Studio Selection:
+β’ Celebration: ${currentEventType}
+β’ Color Palette: ${currentPalette?.name} (${currentPalette?.desc})
+β’ Core Decor Elements: ${selectedElementLabels.join(', ')}`;
+
+ // Dispatch custom event to prefill booking form
+ window.dispatchEvent(
+ new CustomEvent('prefillWiseHeartedBooking', {
+ detail: {
+ eventType: currentEventType,
+ vision: visionString,
+ services: selectedElementLabels,
+ },
+ })
+ );
+
+ // Smoothly scroll to contact form
+ const contactSection = document.getElementById('contact');
+ if (contactSection) {
+ contactSection.scrollIntoView({ behavior: 'smooth' });
+ }
+ };
+
+ return (
+
+
+ {/* Section Header */}
+
+
+ π¨ Interactive Custom Studio
+
+
+ Design Your Dream Setup
+
+
+ Select your celebration type, color palette, and preferred backdrop elements below to generate your personalized setup preview in real time!
+
+
+
+ {/* 3-Step Interactive Grid */}
+
+ {/* STEP 1: Celebration Type */}
+
+
+
+ 1
+
+
+ Celebration Type
+
+
+
+ {eventTypes.map((et) => {
+ const isSelected = selectedEventType === et.id;
+ return (
+
+ );
+ })}
+
+
+
+ {/* STEP 2: Color Palette */}
+
+
+
+ 2
+
+
+ Signature Palette
+
+
+
+ {palettes.map((p) => {
+ const isSelected = selectedPalette === p.id;
+ return (
+
+ );
+ })}
+
+
+
+ {/* STEP 3: Decor Elements */}
+
+
+
+ 3
+
+
+ Backdrop & Elements
+
+
+
+ {decorElements.map((el) => {
+ const isSelected = selectedElements.includes(el.id);
+ return (
+
+ );
+ })}
+
+
+
+
+ {/* Live Customized Preview Banner & CTA */}
+
+
+
+ β¦ YOUR CUSTOM EVENT SPECIFICATION β¦
+
+
+ {currentEventType} β’ {currentPalette?.name}
+
+
+ {selectedElementLabels.map((lbl, idx) => (
+
+ {lbl}
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* Section Header */}
+
+
+ βοΈ Client Love & Trust
+
+
+ Memories Crafted with Heart & Faith
+
+
+ See how Wise Hearted Event Decor transforms milestone birthdays, weddings, baby showers, and celebrations into unforgettable photo moments.
+
+
+
+ {/* 4 Testimonials Grid */}
+
+ {testimonials.map((t, idx) => (
+
+
+ {/* Rating Stars */}
+
+ {'β
'.repeat(t.rating)}
+
+
+ {/* Highlight Tag */}
+
+ {t.highlight}
+
+
+ {/* Quote */}
+
+ “{t.quote}”
+
+
+
+ {/* Author Footer */}
+
+
+ {t.name}
+
+
+ {t.role} β’ {t.celebration}
+
+
+
+ ))}
+
+