feat: complete Light Mode redesign, Donald Miller StoryBrand 3-step plan, terminology updates, and 15-photo portfolio expansion

src/app/globals.css

@@ -1,30 +1,31 @@
 @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-gold: #C5A059;
+  --color-gold-light: #F4E8C8;
+  --color-gold-dark: #967117;
+  --color-gold-gradient: linear-gradient(135deg, #DFBE78 0%, #C5A059 50%, #967117 100%);
+  --color-gold-glow: rgba(197, 160, 89, 0.25);
 
-  --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);
+  --color-pink: #D94680;
+  --color-pink-light: #F472B6;
+  --color-pink-dark: #9D174D;
+  --color-pink-gradient: linear-gradient(135deg, #F472B6 0%, #D94680 100%);
+  --color-pink-glow: rgba(217, 70, 128, 0.25);
 
-  --bg-black: #000000;
-  --bg-onyx: #080808;
-  --bg-card: #0F0F0F;
-  --bg-card-hover: #141414;
+  --bg-white: #FFFFFF;
+  --bg-cream: #FAF8F5;
+  --bg-card: #FFFFFF;
+  --bg-card-hover: #FDFBF7;
+  --bg-dark: #0A0A0A;
   
-  --border-gold: rgba(212, 175, 55, 0.25);
-  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-gold: rgba(197, 160, 89, 0.35);
+  --border-subtle: #E5E7EB;
 
-  --text-white: #FFFFFF;
-  --text-cream: #F8F6F0;
-  --text-muted: #94A3B8;
-  --text-gold: #D4AF37;
+  --text-dark: #111827;
+  --text-body: #374151;
+  --text-muted: #6B7280;
+  --text-gold: #967117;
 
   --font-script: 'Great Vibes', cursive;
   --font-serif: 'Playfair Display', serif;
@@ -38,8 +39,8 @@
 }
 
 html, body {
-  background-color: var(--bg-black);
-  color: var(--text-white);
+  background-color: var(--bg-white);
+  color: var(--text-body);
   font-family: var(--font-sans);
   overflow-x: hidden;
   scroll-behavior: smooth;
@@ -49,8 +50,8 @@ html, body {
 
 h1, h2, h3, h4 {
   font-family: var(--font-serif);
-  color: var(--text-white);
-  line-height: 1.2;
+  color: var(--text-dark);
+  line-height: 1.25;
 }
 
 .script-font {
@@ -77,15 +78,15 @@ h1, h2, h3, h4 {
 }
 
 .glass-panel {
-  background: #0E0E0E;
+  background: #FFFFFF;
   border: 1px solid var(--border-gold);
   border-radius: 18px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
 .btn-gold {
   background: var(--color-gold-gradient);
-  color: #080808;
+  color: #111827;
   font-weight: 700;
   font-size: 0.95rem;
   letter-spacing: 0.04em;
@@ -103,7 +104,7 @@ h1, h2, h3, h4 {
 
 .btn-gold:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
+  box-shadow: 0 8px 25px rgba(197, 160, 89, 0.45);
 }
 
 .btn-pink {
@@ -126,12 +127,12 @@ h1, h2, h3, h4 {
 
 .btn-pink:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(224, 0, 111, 0.65);
+  box-shadow: 0 8px 25px rgba(217, 70, 128, 0.45);
 }
 
 .btn-outline {
   background: transparent;
-  color: var(--color-gold-light);
+  color: var(--color-gold-dark);
   border: 1.5px solid var(--color-gold);
   font-weight: 600;
   font-size: 0.95rem;
@@ -146,9 +147,9 @@ h1, h2, h3, h4 {
 }
 
 .btn-outline:hover {
-  background: rgba(212, 175, 55, 0.12);
-  border-color: var(--color-gold-light);
-  color: #FFFFFF;
+  background: rgba(197, 160, 89, 0.1);
+  border-color: var(--color-gold-dark);
+  color: var(--color-gold-dark);
 }
 
 /* 95% Mobile Full-Width Responsive System */

src/app/layout.tsx

@@ -3,9 +3,9 @@ import "./globals.css";
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://wise-hearted-decor.pages.dev"),
-  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, Jackie Event Decor",
+  title: "Wise Hearted Event Decor | Premium Balloon Styling & Event Backdrops",
+  description: "Creating beautiful spaces and memorable events through God-given creativity. Premium balloon styling, Chiara arches, drape backdrops, and custom decor.",
+  keywords: "Event Decor, Premium Balloon Garlands, Chiara Arches, Backdrop Rentals, Wedding Decor, Palmdale Event Decor, Lancaster Balloon Stylist, Wise Hearted Decor",
   authors: [{ name: "Wise Hearted Event Decor" }],
   icons: {
     icon: [
@@ -18,7 +18,7 @@ export const metadata: Metadata = {
   },
   openGraph: {
     title: "Wise Hearted Event Decor | Called to Create. Enabled by God.",
-    description: "Transforming life’s most cherished celebrations with luxury balloon styling, custom arched backdrops, and bespoke event decor.",
+    description: "Transforming life’s most cherished celebrations with premium balloon styling, Chiara arches, drape backdrops, and bespoke event decor.",
     url: "https://wise-hearted-decor.pages.dev",
     siteName: "Wise Hearted Event Decor",
     images: [
@@ -34,8 +34,8 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: "summary_large_image",
-    title: "Wise Hearted Event Decor | Luxury Balloon Styling",
-    description: "Transforming life’s most cherished celebrations with luxury balloon styling, custom arched backdrops, and bespoke event decor.",
+    title: "Wise Hearted Event Decor | Premium Balloon Styling",
+    description: "Transforming life’s most cherished celebrations with premium balloon styling, Chiara arches, drape backdrops, and bespoke event decor.",
     images: ["/twitter-image.png"],
   },
 };

src/app/page.tsx

@@ -4,41 +4,38 @@ import React, { useEffect } from 'react';
 import Header from '@/components/Header';
 import Hero from '@/components/Hero';
 import QuickQuotePartyForm from '@/components/QuickQuotePartyForm';
+import HowItWorksSection from '@/components/HowItWorksSection';
+import ServicesSection from '@/components/ServicesSection';
 import PortfolioGallery from '@/components/PortfolioGallery';
 import MoodBoardEstimator from '@/components/MoodBoardEstimator';
-import PillarsSection from '@/components/PillarsSection';
-import ServicesSection from '@/components/ServicesSection';
 import TestimonialsSection from '@/components/TestimonialsSection';
 import AboutSection from '@/components/AboutSection';
 import FaqSection from '@/components/FaqSection';
 import BookingForm from '@/components/BookingForm';
 import Footer from '@/components/Footer';
-import GoldSparkles from '@/components/GoldSparkles';
 import MobileQuickBar from '@/components/MobileQuickBar';
 
 export default function Home() {
   useEffect(() => {
-    // Prevent mobile browsers (iOS Safari/Chrome) from restoring old bottom scroll positions
+    // Prevent mobile browsers from restoring old scroll positions
     if ('scrollRestoration' in window.history) {
       window.history.scrollRestoration = 'manual';
     }
     
-    // Only scroll to top if there is no specific hash like #portfolio in the URL
     if (!window.location.hash) {
       window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
     }
   }, []);
 
   return (
-    <main style={{ position: 'relative' }}>
-      <GoldSparkles />
+    <main style={{ position: 'relative', backgroundColor: '#FFFFFF', minHeight: '100vh' }}>
       <Header />
       <Hero />
       <QuickQuotePartyForm />
+      <HowItWorksSection />
+      <ServicesSection />
       <PortfolioGallery />
       <MoodBoardEstimator />
-      <PillarsSection />
-      <ServicesSection />
       <TestimonialsSection />
       <AboutSection />
       <FaqSection />

src/components/AboutSection.tsx

@@ -5,10 +5,10 @@ import Link from 'next/link';
 export default function AboutSection() {
   return (
     <section id="about" style={{
-      padding: '100px 24px',
-      backgroundColor: '#000000',
+      padding: '90px 24px',
+      backgroundColor: '#FAF8F5',
       position: 'relative',
-      borderBottom: '1px solid var(--border-gold)',
+      borderBottom: '1px solid #E5E7EB',
     }}>
       <div className="container">
         
@@ -19,14 +19,14 @@ export default function AboutSection() {
           alignItems: 'center',
         }}>
           
-          {/* Left Column: Native High-Res Luxury Brand Card */}
+          {/* Left Column: High-Res Dark Hallmark Brand Card */}
           <div style={{ position: 'relative' }}>
             <div style={{
-              background: '#0D0D0D',
+              background: '#09090B',
               borderRadius: '24px',
               padding: '36px 30px',
-              border: '2px solid var(--color-gold)',
-              boxShadow: '0 12px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.2)',
+              border: '2px solid rgba(197, 160, 89, 0.5)',
+              boxShadow: '0 20px 45px rgba(0, 0, 0, 0.15)',
               textAlign: 'center',
               position: 'relative',
             }}>
@@ -38,7 +38,7 @@ export default function AboutSection() {
                 left: '12px',
                 right: '12px',
                 bottom: '12px',
-                border: '1px solid rgba(212, 175, 55, 0.4)',
+                border: '1px solid rgba(197, 160, 89, 0.35)',
                 borderRadius: '16px',
                 pointerEvents: 'none',
               }} />
@@ -71,7 +71,6 @@ export default function AboutSection() {
                 color: 'var(--color-pink-light)',
                 lineHeight: 1.1,
                 marginBottom: '20px',
-                textShadow: '0 2px 14px rgba(224, 0, 111, 0.4)',
               }}>
                 from the heart.
               </div>
@@ -117,36 +116,37 @@ export default function AboutSection() {
 
           {/* Right Column: About Story & Mission */}
           <div>
-            <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
+            <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-dark)', 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 }}>
+            <h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, color: 'var(--text-dark)', 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 style={{ fontSize: '1.05rem', lineHeight: 1.8, color: '#374151', marginBottom: '20px' }}>
+              At <strong>Wise Hearted Event Decor</strong>, our team believes 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 style={{ fontSize: '1.05rem', lineHeight: 1.8, color: '#4B5563', marginBottom: '24px' }}>
+              Founded with a deep commitment to faith, beauty, purpose, and love, our mission is to transform ordinary rooms into breathtaking, picture-perfect celebration spaces. We pour intentionality, artistic prayer, and meticulous craftsmanship into every single arch, floral arrangement, and personalized detail.
             </p>
 
             <div style={{
-              background: '#0F0F0F',
-              borderLeft: '4px solid var(--color-gold)',
+              background: '#FFFFFF',
+              borderLeft: '4px solid var(--color-gold-dark)',
               padding: '18px 22px',
               borderRadius: '8px',
               marginBottom: '32px',
-              border: '1px solid rgba(212, 175, 55, 0.25)',
+              border: '1px solid #E5E7EB',
               borderLeftWidth: '4px',
+              boxShadow: '0 2px 10px rgba(0, 0, 0, 0.03)',
             }}>
-              <p style={{ fontStyle: 'italic', fontSize: '0.98rem', color: 'var(--color-gold-light)', margin: 0 }}>
+              <p style={{ fontStyle: 'italic', fontSize: '0.98rem', color: 'var(--text-dark)', margin: 0 }}>
                 &ldquo;Creating beautiful spaces and memorable events through God-given creativity, with faith, beauty, purpose, and love at the heart of every design.&rdquo;
               </p>
             </div>
 
-            <Link href="#contact" className="btn-pink">
-              <span>💕</span> Let’s Design Your Event
+            <Link href="#contact" className="btn-gold">
+              <span>✨</span> Connect With Our Team
             </Link>
           </div>
 

src/components/BookingForm.tsx

@@ -28,7 +28,6 @@ export default function BookingForm() {
         const detail = e.detail;
         setAttachedDesign(detail);
 
-        // Map event type string to dropdown value
         let mappedType = 'Birthday Party';
         const lowerType = (detail.eventType || '').toLowerCase();
         if (lowerType.includes('wedding')) mappedType = 'Wedding / Engagement';
@@ -37,15 +36,14 @@ export default function BookingForm() {
         else if (lowerType.includes('corporate') || lowerType.includes('gala')) mappedType = 'Corporate / Grand Opening';
         else if (lowerType.includes('themed') || lowerType.includes('1st')) mappedType = 'Holiday / Themed Party';
 
-        // Auto-check corresponding checkboxes
         const mappedServices: string[] = [];
         if (detail.vision) {
           if (detail.vision.includes('Balloon')) mappedServices.push('Organic Balloon Garland');
-          if (detail.vision.includes('Arch') || detail.vision.includes('Panel')) mappedServices.push('Custom Arched Backdrops');
-          if (detail.vision.includes('Floral') || detail.vision.includes('Botanical')) mappedServices.push('Faux Florals & Greenery');
-          if (detail.vision.includes('Mosaic') || detail.vision.includes('Letter')) mappedServices.push('Mosaic Letters / Numbers');
-          if (detail.vision.includes('Drink') || detail.vision.includes('Station')) mappedServices.push('Beverage / Dessert Station');
-          if (detail.vision.includes('Gold') || detail.vision.includes('Styling')) mappedServices.push('Full Event Styling Package');
+          if (detail.vision.includes('Arch') || detail.vision.includes('Backdrop')) mappedServices.push('Types of Backdrops (Chiara, Drape, Fabric, Green Wall)');
+          if (detail.vision.includes('Sign')) mappedServices.push('Custom Signs & Welcome Signs');
+          if (detail.vision.includes('Mosaic') || detail.vision.includes('Letter')) mappedServices.push('Mosaic Numbers or Mosaic Lettering');
+          if (detail.vision.includes('Floral') || detail.vision.includes('Botanical')) mappedServices.push('Silk Florals & Greenery Sprigs');
+          if (detail.vision.includes('Setup') || detail.vision.includes('Styling')) mappedServices.push('Full Event Staging & Teardown');
         }
 
         setFormData(prev => ({
@@ -105,7 +103,7 @@ ${formData.vision || 'No additional notes'}`;
           phone: formData.phone,
           message: formattedMessage,
           domain: 'wise-hearted-decor.pages.dev',
-          source: 'Wise Hearted Event Decor — VIP Quote Form',
+          source: 'Wise Hearted Event Decor — Quote Form',
           toEmail: 'brian@aipilots.site',
         }),
       });
@@ -116,7 +114,6 @@ ${formData.vision || 'No additional notes'}`;
       setSubmitted(true);
     } catch (err) {
       console.error('Submission error:', err);
-      // Still show thank you to user so client isn't stuck
       setSubmitted(true);
     } finally {
       setIsSubmitting(false);
@@ -125,78 +122,57 @@ ${formData.vision || 'No additional notes'}`;
 
   return (
     <section id="contact" style={{
-      padding: 'clamp(60px, 10vw, 100px) 0',
-      backgroundColor: '#000000',
+      padding: 'clamp(70px, 10vw, 100px) 24px',
+      backgroundColor: '#FFFFFF',
       position: 'relative',
+      borderBottom: '1px solid #E5E7EB',
     }}>
-      <div className="container" style={{ maxWidth: '920px' }}>
+      <div className="container" style={{ maxWidth: '880px' }}>
         
-        {/* Header */}
-        <div style={{ textAlign: 'center', marginBottom: '28px', padding: '0 8px' }}>
-          <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
-            Book Your Date
+        {/* Section Title */}
+        <div style={{ textAlign: 'center', marginBottom: '45px' }}>
+          <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-gold-dark)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
+            Lock In Your Date
           </span>
-          <h2 style={{ fontSize: 'clamp(1.9rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '14px' }}>
-            Request a <span className="gold-gradient-text">Custom Quote</span>
+          <h2 style={{ fontSize: 'clamp(2.2rem, 4vw, 3rem)', fontWeight: 800, color: 'var(--text-dark)', marginBottom: '16px' }}>
+            Request Your <span className="gold-gradient-text">Custom Event Quote</span>
           </h2>
-          <p style={{ fontSize: '1.02rem', color: '#94A3B8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.6 }}>
-            Tell us about your upcoming celebration! We’ll review your details and send you a customized design proposal.
+          <p style={{ fontSize: '1.05rem', color: '#4B5563', maxWidth: '620px', margin: '0 auto', lineHeight: 1.6 }}>
+            Tell us about your celebration, date, and backdrop vision. Our team will prepare a custom proposal and reach out within 24 hours.
           </p>
         </div>
 
-        {/* Live Availability Badge */}
-        <div style={{
-          background: 'rgba(212, 175, 55, 0.1)',
-          border: '1px solid rgba(212, 175, 55, 0.4)',
-          borderRadius: '50px',
-          padding: '10px 20px',
-          textAlign: 'center',
-          maxWidth: '680px',
-          margin: '0 auto 24px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '8px',
-          fontSize: '0.85rem',
-          color: '#F8FAF6',
-        }}>
-          <span style={{ color: '#10B981', fontSize: '0.9rem' }}>●</span>
-          <span><strong>2026/2027 Calendar Open:</strong> Weekend dates book 4–8 weeks in advance. Reserve early to lock in your date!</span>
-        </div>
-
-        {/* Dynamic Studio Design Specification Attachment Card */}
+        {/* Studio Preset Banner (if attached) */}
         {attachedDesign && (
           <div style={{
-            background: 'linear-gradient(135deg, rgba(224, 0, 111, 0.18) 0%, rgba(212, 175, 55, 0.18) 100%)',
-            border: '2px solid var(--color-gold)',
+            background: '#FAF8F5',
+            border: '1.5px solid var(--color-gold)',
             borderRadius: '16px',
-            padding: '18px 22px',
-            marginBottom: '24px',
-            boxShadow: '0 10px 30px rgba(212, 175, 55, 0.2)',
+            padding: '16px 20px',
+            marginBottom: '28px',
             display: 'flex',
-            justifyContent: 'space-between',
             alignItems: 'center',
+            justifyContent: 'space-between',
             flexWrap: 'wrap',
             gap: '12px',
-            animation: 'slideUpBar 0.3s ease',
           }}>
-            <div>
-              <div style={{ fontSize: '0.78rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: '4px' }}>
-                ✨ Custom Design Spec Attached from Studio
-              </div>
-              <div style={{ fontSize: '1.05rem', fontWeight: 800, color: '#FFFFFF' }}>
-                {attachedDesign.eventType}
-              </div>
-              <div style={{ fontSize: '0.84rem', color: '#CBD5E1', marginTop: '2px' }}>
-                Your custom palette and decor choices have been automatically loaded into your quote request below.
+            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+              <span style={{ fontSize: '1.4rem' }}>🎨</span>
+              <div>
+                <div style={{ fontWeight: 800, fontSize: '0.92rem', color: 'var(--text-dark)' }}>
+                  Studio Specifications Attached!
+                </div>
+                <div style={{ fontSize: '0.82rem', color: '#6B7280' }}>
+                  {formData.eventType} configuration prefilled below.
+                </div>
               </div>
             </div>
             <a 
-              href="#custom-studio" 
-              style={{ 
-                fontSize: '0.8rem', 
-                color: 'var(--color-gold-light)', 
-                textDecoration: 'underline',
+              href="#custom-studio"
+              style={{
+                fontSize: '0.82rem',
+                color: 'var(--color-gold-dark)',
+                textDecoration: 'none',
                 fontWeight: 700,
               }}
             >
@@ -206,19 +182,21 @@ ${formData.vision || 'No additional notes'}`;
         )}
 
         {/* Form Box */}
-        <div className="glass-panel" style={{
-          padding: 'clamp(20px, 4vw, 36px)',
-          border: '1.5px solid var(--border-gold)',
-          borderRadius: '20px',
+        <div style={{
+          background: '#FAF8F5',
+          padding: 'clamp(24px, 4vw, 40px)',
+          border: '1.5px solid rgba(197, 160, 89, 0.35)',
+          borderRadius: '24px',
+          boxShadow: '0 10px 30px rgba(0, 0, 0, 0.04)',
         }}>
           {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' }}>
+              <h3 style={{ fontSize: '1.8rem', color: 'var(--text-dark)', 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 style={{ fontSize: '1.1rem', color: '#4B5563', maxWidth: '540px', margin: '0 auto 24px', lineHeight: 1.7 }}>
+                We received your event request for <strong>{formData.eventDate || 'your upcoming date'}</strong>. A Wise Hearted team member will be in touch within 24–48 hours with design ideas, date confirmation, and availability!
               </p>
               <button 
                 onClick={() => setSubmitted(false)}
@@ -229,12 +207,12 @@ ${formData.vision || 'No additional notes'}`;
               </button>
             </div>
           ) : (
-            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '22px' }}>
               
               {/* Row 1: Name & Phone */}
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '20px' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '18px' }}>
                 <div>
-                  <label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
+                  <label style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', marginBottom: '8px' }}>
                     Full Name *
                   </label>
                   <input 
@@ -243,28 +221,28 @@ ${formData.vision || 'No additional notes'}`;
                     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' }}
+                    style={{ width: '100%', padding: '13px 16px', background: '#FFFFFF', border: '1.5px solid #E5E7EB', borderRadius: '10px', color: '#111827', fontSize: '0.95rem', outline: 'none' }}
                   />
                 </div>
                 <div>
-                  <label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
+                  <label style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', marginBottom: '8px' }}>
                     Phone Number *
                   </label>
                   <input 
                     type="tel" 
                     required 
-                    placeholder="(555) 000-0000"
+                    placeholder="(661) 555-0123"
                     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' }}
+                    style={{ width: '100%', padding: '13px 16px', background: '#FFFFFF', border: '1.5px solid #E5E7EB', borderRadius: '10px', color: '#111827', 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 style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '18px' }}>
                 <div>
-                  <label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
+                  <label style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', marginBottom: '8px' }}>
                     Email Address *
                   </label>
                   <input 
@@ -273,11 +251,11 @@ ${formData.vision || 'No additional notes'}`;
                     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' }}
+                    style={{ width: '100%', padding: '13px 16px', background: '#FFFFFF', border: '1.5px solid #E5E7EB', borderRadius: '10px', color: '#111827', fontSize: '0.95rem', outline: 'none' }}
                   />
                 </div>
                 <div>
-                  <label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
+                  <label style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', marginBottom: '8px' }}>
                     Event Date *
                   </label>
                   <input 
@@ -285,21 +263,21 @@ ${formData.vision || 'No additional notes'}`;
                     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' }}
+                    style={{ width: '100%', padding: '13px 16px', background: '#FFFFFF', border: '1.5px solid #E5E7EB', borderRadius: '10px', color: '#111827', 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 style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '18px' }}>
                 <div>
-                  <label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
+                  <label style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', 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' }}
+                    style={{ width: '100%', padding: '13px 16px', background: '#FFFFFF', border: '1.5px solid #E5E7EB', borderRadius: '10px', color: '#111827', fontSize: '0.95rem', outline: 'none' }}
                   >
                     <option value="Birthday Party">Birthday Party</option>
                     <option value="Wedding / Engagement">Wedding / Engagement</option>
@@ -311,32 +289,32 @@ ${formData.vision || 'No additional notes'}`;
                   </select>
                 </div>
                 <div>
-                  <label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
+                  <label style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', marginBottom: '8px' }}>
                     Venue / City Location
                   </label>
                   <input 
                     type="text" 
-                    placeholder="e.g., Home, Banquet Hall, Park"
+                    placeholder="e.g., Home, Banquet Hall, Palmdale, Valencia"
                     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' }}
+                    style={{ width: '100%', padding: '13px 16px', background: '#FFFFFF', border: '1.5px solid #E5E7EB', borderRadius: '10px', color: '#111827', fontSize: '0.95rem', outline: 'none' }}
                   />
                 </div>
               </div>
 
-              {/* Checkboxes: Services Interested In */}
+              {/* Checkboxes: Services Interested In (Jackie Requirements 5, 6, 7, 10) */}
               <div>
-                <label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '12px' }}>
+                <label style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', marginBottom: '10px' }}>
                   Services You Are Interested In:
                 </label>
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '10px' }}>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '10px' }}>
                   {[
                     'Organic Balloon Garland',
-                    'Custom Arched Backdrops',
-                    'Faux Florals & Greenery',
-                    'Mosaic Letters / Numbers',
-                    'Beverage / Dessert Station',
-                    'Full Event Styling Package',
+                    'Types of Backdrops (Chiara, Drape, Fabric, Green Wall)',
+                    'Custom Signs & Welcome Signs',
+                    'Mosaic Numbers or Mosaic Lettering',
+                    'Silk Florals & Greenery Sprigs',
+                    'Full Event Staging & Teardown',
                   ].map((service) => (
                     <label 
                       key={service} 
@@ -344,20 +322,20 @@ ${formData.vision || 'No additional notes'}`;
                         display: 'flex', 
                         alignItems: 'center', 
                         gap: '10px', 
-                        background: '#121212', 
+                        background: '#FFFFFF', 
                         padding: '12px 14px', 
-                        borderRadius: '8px', 
-                        border: '1px solid rgba(255,255,255,0.08)',
+                        borderRadius: '10px', 
+                        border: '1px solid #E5E7EB',
                         cursor: 'pointer',
                         fontSize: '0.88rem',
-                        color: '#E2E8F0',
+                        color: '#374151',
                       }}
                     >
                       <input 
                         type="checkbox" 
                         checked={formData.services.includes(service)}
                         onChange={() => handleCheckbox(service)}
-                        style={{ accentColor: 'var(--color-pink)' }}
+                        style={{ accentColor: 'var(--color-gold-dark)' }}
                       />
                       <span>{service}</span>
                     </label>
@@ -367,37 +345,37 @@ ${formData.vision || 'No additional notes'}`;
 
               {/* Budget Selector */}
               <div>
-                <label style={{ display: 'block', fontSize: '0.88rem', fontWeight: 700, color: 'var(--color-gold-light)', marginBottom: '8px' }}>
+                <label style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', 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' }}
+                  style={{ width: '100%', padding: '13px 16px', background: '#FFFFFF', border: '1.5px solid #E5E7EB', borderRadius: '10px', color: '#111827', fontSize: '0.95rem', outline: 'none' }}
                 >
-                  <option value="$300 - $600">$300 – $600 (Garland & Small Setup)</option>
+                  <option value="$300 - $600">$300 – $600 (Garland &amp; 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>
+                  <option value="$1,200 - $2,500">$1,200 – $2,500 (Multi-Arch + Florals + Custom Signs)</option>
+                  <option value="$2,500+">$2,500+ (Full Premium 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 style={{ display: 'block', fontSize: '0.86rem', fontWeight: 700, color: 'var(--text-dark)', marginBottom: '8px' }}>
+                  Theme, Color Palette &amp; Vision Details
                 </label>
                 <textarea 
                   rows={4}
-                  placeholder="Tell us about your colors, theme, inspiration, or any special requests..."
+                  placeholder="Tell our team about your colors, theme, backdrop preferences, or 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' }}
+                  style={{ width: '100%', padding: '13px 16px', background: '#FFFFFF', border: '1.5px solid #E5E7EB', borderRadius: '10px', color: '#111827', fontSize: '0.95rem', outline: 'none', resize: 'vertical' }}
                 />
               </div>
 
               {/* Submit Button */}
-              <div style={{ textAlign: 'center', marginTop: '12px' }}>
+              <div style={{ textAlign: 'center', marginTop: '10px' }}>
                 <button 
                   type="submit" 
                   disabled={isSubmitting}
@@ -414,7 +392,7 @@ ${formData.vision || 'No additional notes'}`;
                   <span>{isSubmitting ? '⏳' : '✨'}</span> 
                   {isSubmitting ? 'Sending Proposal Request...' : 'Submit Custom Quote Request'}
                 </button>
-                <p style={{ fontSize: '0.82rem', color: 'var(--text-muted)', marginTop: '12px' }}>
+                <p style={{ fontSize: '0.82rem', color: '#6B7280', marginTop: '12px' }}>
                   We respect your privacy. No spam—only custom event design proposals.
                 </p>
               </div>

src/components/FaqSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
+import { ChevronDown, HelpCircle, Sparkles } from 'lucide-react';
 
 interface FaqItem {
   question: string;
@@ -10,34 +11,34 @@ interface FaqItem {
 
 const faqs: FaqItem[] = [
   {
-    category: 'Booking & Timing',
+    category: 'Booking & Timeline',
     question: 'How far in advance should I book my event decor?',
-    answer: 'We recommend booking 4 to 8 weeks in advance for weekend milestones, birthdays, and baby showers, and 2 to 4 months for weddings and large corporate galas. However, if your event is sooner, reach out! If our setup crew has availability, we gladly accommodate rush dates.',
+    answer: 'We recommend booking 3 to 8 weeks in advance, especially for weekend celebrations during peak wedding, graduation, and holiday seasons. However, we always do our best to accommodate rush dates based on calendar availability.',
   },
   {
-    category: 'Full-Service Experience',
-    question: 'Do you handle delivery, setup, and teardown?',
-    answer: 'Yes! Every Wise Hearted installation is 100% full-service. We arrive on-site early to professionally assemble and style every balloon garland, backdrop panel, and floral accent. After your celebration concludes, our team returns to safely strike and remove all rental backdrop structures.',
+    category: 'Customization',
+    question: 'Can you match exact event color swatches or themes?',
+    answer: 'Yes, absolutely! We specialize in custom color matching using premium double-stuffed technique. We can blend latex balloon shades to precisely match your invitation cards, bridesmaid dresses, florals, or corporate brand palette.',
   },
   {
-    category: 'Customization & Themes',
-    question: 'Can you match my exact Pinterest board, theme, or invitation colors?',
-    answer: 'Absolutely! Custom color matching is our specialty. We use premium, professional-grade balloons and advanced custom double-stuffing techniques to create bespoke color palettes (e.g., custom matte terracotta, dusty rose, chrome gold, or pearl tones) that flawlessly match your invitations and venue mood board.',
+    category: 'Setup & Teardown',
+    question: 'Do you handle delivery, on-site setup, and post-event breakdown?',
+    answer: 'Yes! All Wise Hearted event packages include full white-glove service. Our team arrives early to install and secure your backdrops and balloon garlands, and returns after your celebration to carefully disassemble and strike the equipment.',
   },
   {
-    category: 'Outdoor Events',
-    question: 'Can balloon garlands and arched backdrops be installed outdoors?',
+    category: 'Longevity & Outdoor',
+    question: 'Can your backdrops and balloon installations be set up outdoors?',
     answer: 'Yes! We use heavy-duty commercial baseplates, reinforced framing, and specialized rigging techniques designed specifically for Southern California weather. We also advise on ideal shaded placement to keep balloons looking glossy and vibrant all day.',
   },
   {
     category: 'Service Areas',
     question: 'What areas throughout Southern California do you serve?',
-    answer: 'We proudly serve the entire Antelope Valley (Palmdale, Lancaster, Quartz Hill), Santa Clarita Valley (Valencia, Stevenson Ranch, Canyon Country), San Fernando Valley, Greater Los Angeles, and surrounding counties. We are also available for select destination events.',
+    answer: 'We proudly serve the entire Antelope Valley (Palmdale, Lancaster, Quartz Hill), Santa Clarita Valley (Valencia, Stevenson Ranch, Canyon Country), San Fernando Valley, Greater Los Angeles, and surrounding areas.',
   },
   {
-    category: 'Payment & Quotes',
-    question: 'How does the quote and booking process work?',
-    answer: 'It starts with submitting a custom quote request on our website. Jackie will review your date, theme, and vision, then provide a detailed design proposal. A 50% retainer and signed contract officially locks your date on our calendar, with the remaining balance due prior to event setup.',
+    category: 'Payment & Policies',
+    question: 'How does the quote and reservation process work?',
+    answer: 'It starts with submitting a custom quote request on our website. Our team will review your date, theme, and vision, then provide a detailed design proposal. A retainer and signed contract officially locks your date on our calendar, with the balance due prior to event setup.',
   },
 ];
 
@@ -52,10 +53,10 @@ export default function FaqSection() {
     <section
       id="faq"
       style={{
-        padding: 'clamp(60px, 10vw, 100px) 0',
-        backgroundColor: '#0A0A0A',
+        padding: 'clamp(60px, 10vw, 90px) 0',
+        backgroundColor: '#FAF8F5',
         position: 'relative',
-        borderBottom: '1px solid var(--border-gold)',
+        borderBottom: '1px solid #E5E7EB',
       }}
     >
       <div className="container" style={{ maxWidth: '940px' }}>
@@ -65,34 +66,38 @@ export default function FaqSection() {
             style={{
               fontSize: '0.85rem',
               fontWeight: 800,
-              color: 'var(--color-pink-light)',
+              color: 'var(--color-gold-dark)',
               letterSpacing: '0.15em',
               textTransform: 'uppercase',
-              display: 'block',
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
               marginBottom: '10px',
             }}
           >
-            ❓ Frequently Asked Questions
+            <Sparkles size={14} />
+            <span>Event Policies &amp; Details</span>
           </span>
           <h2
             style={{
               fontSize: 'clamp(2rem, 3.8vw, 2.8rem)',
               fontWeight: 800,
+              color: 'var(--text-dark)',
               marginBottom: '16px',
             }}
           >
-            Everything You Need <span className="gold-gradient-text">To Know</span>
+            Frequently Asked <span className="gold-gradient-text">Questions</span>
           </h2>
           <p
             style={{
               fontSize: '1.05rem',
-              color: '#94A3B8',
-              maxWidth: '680px',
+              color: '#4B5563',
+              maxWidth: '650px',
               margin: '0 auto',
               lineHeight: 1.6,
             }}
           >
-            Got questions about setup timing, color customization, or booking deposits? Here are answers to our most common client inquiries.
+            Everything you need to know about reserving your date, custom color matching, and full-service event delivery.
           </p>
         </div>
 
@@ -103,13 +108,13 @@ export default function FaqSection() {
             return (
               <div
                 key={idx}
-                className="glass-panel"
                 style={{
-                  border: isOpen ? '1.5px solid var(--color-gold)' : '1px solid rgba(255, 255, 255, 0.08)',
+                  background: '#FFFFFF',
                   borderRadius: '16px',
+                  border: isOpen ? '1.5px solid var(--color-gold-dark)' : '1px solid #E5E7EB',
                   overflow: 'hidden',
                   transition: 'all 0.25s ease',
-                  boxShadow: isOpen ? '0 8px 25px rgba(212, 175, 55, 0.15)' : 'none',
+                  boxShadow: isOpen ? '0 8px 25px rgba(197, 160, 89, 0.1)' : '0 2px 8px rgba(0, 0, 0, 0.02)',
                 }}
               >
                 <button
@@ -117,47 +122,67 @@ export default function FaqSection() {
                   onClick={() => toggleFaq(idx)}
                   style={{
                     width: '100%',
-                    padding: '20px 24px',
+                    padding: '20px 22px',
                     display: 'flex',
-                    justifyContent: 'space-between',
                     alignItems: 'center',
-                    background: 'transparent',
-                    border: 'none',
-                    color: '#FFFFFF',
-                    textAlign: 'left',
-                    cursor: 'pointer',
+                    justifyContent: 'space-between',
                     gap: '16px',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    textAlign: 'left',
                   }}
                   aria-expanded={isOpen}
                 >
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                    <span style={{ color: 'var(--color-pink-light)', fontSize: '0.9rem' }}>✦</span>
-                    <span style={{ fontSize: '1.05rem', fontWeight: 700, color: isOpen ? 'var(--color-gold-light)' : '#F8FAFC' }}>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                    <span
+                      style={{
+                        fontSize: '0.72rem',
+                        fontWeight: 800,
+                        color: 'var(--color-gold-dark)',
+                        letterSpacing: '0.1em',
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      {faq.category}
+                    </span>
+                    <span
+                      style={{
+                        fontSize: '1.05rem',
+                        fontWeight: 700,
+                        color: 'var(--text-dark)',
+                        lineHeight: 1.4,
+                      }}
+                    >
                       {faq.question}
                     </span>
                   </div>
-                  <span
+                  <div
                     style={{
-                      fontSize: '1.3rem',
-                      fontWeight: 700,
-                      color: isOpen ? 'var(--color-gold)' : '#94A3B8',
-                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
-                      transition: 'transform 0.25s ease, color 0.25s ease',
+                      width: '32px',
+                      height: '32px',
+                      borderRadius: '50%',
+                      background: isOpen ? 'rgba(197, 160, 89, 0.15)' : '#F3F4F6',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
                       flexShrink: 0,
+                      transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                      transition: 'transform 0.25s ease',
                     }}
                   >
-                    +
-                  </span>
+                    <ChevronDown size={18} color={isOpen ? 'var(--color-gold-dark)' : '#6B7280'} />
+                  </div>
                 </button>
 
                 {isOpen && (
                   <div
                     style={{
-                      padding: '0 24px 22px 42px',
-                      color: '#CBD5E1',
-                      fontSize: '0.95rem',
+                      padding: '0 22px 22px',
+                      color: '#4B5563',
+                      fontSize: '0.96rem',
                       lineHeight: 1.7,
-                      borderTop: '1px solid rgba(255, 255, 255, 0.05)',
+                      borderTop: '1px solid #F3F4F6',
                       paddingTop: '14px',
                     }}
                   >
@@ -174,25 +199,26 @@ export default function FaqSection() {
           style={{
             marginTop: '36px',
             textAlign: 'center',
-            background: 'rgba(255, 255, 255, 0.03)',
+            background: '#FFFFFF',
             borderRadius: '16px',
             padding: '18px 24px',
-            border: '1px solid rgba(255, 255, 255, 0.08)',
+            border: '1px solid #E5E7EB',
+            boxShadow: '0 2px 10px rgba(0, 0, 0, 0.02)',
           }}
         >
-          <span style={{ color: '#94A3B8', fontSize: '0.92rem' }}>
+          <span style={{ color: '#4B5563', fontSize: '0.92rem' }}>
             Have a custom design inquiry or special venue requirement?{' '}
           </span>
           <a
             href="#contact"
             style={{
-              color: 'var(--color-gold)',
+              color: 'var(--color-gold-dark)',
               fontWeight: 800,
               textDecoration: 'none',
               marginLeft: '4px',
             }}
           >
-            Chat with Jackie directly →
+            Connect with our team directly →
           </a>
         </div>
       </div>

src/components/Footer.tsx

@@ -5,8 +5,8 @@ import Link from 'next/link';
 export default function Footer() {
   return (
     <footer style={{
-      backgroundColor: '#050505',
-      borderTop: '1px solid var(--border-gold)',
+      backgroundColor: '#09090B',
+      borderTop: '1.5px solid rgba(197, 160, 89, 0.35)',
       padding: '70px 24px 40px',
       color: '#94A3B8',
       fontSize: '0.92rem',
@@ -49,10 +49,11 @@ export default function Footer() {
               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="#backdrops" style={{ color: '#94A3B8', textDecoration: 'none' }}>Types of Backdrops</Link></li>
+              <li><Link href="#how-it-works" style={{ color: '#94A3B8', textDecoration: 'none' }}>How It Works (3-Step Plan)</Link></li>
+              <li><Link href="#custom-studio" style={{ color: '#94A3B8', textDecoration: 'none' }}>Interactive Design Studio</Link></li>
+              <li><Link href="#about" style={{ color: '#94A3B8', textDecoration: 'none' }}>About Our Team &amp; Mission</Link></li>
               <li><Link href="#contact" style={{ color: '#94A3B8', textDecoration: 'none' }}>Request a Custom Quote</Link></li>
             </ul>
           </div>
@@ -60,25 +61,25 @@ export default function Footer() {
           {/* Services */}
           <div>
             <h4 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '18px' }}>
-              Event Specialties
+              Backdrop &amp; Decor 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>
+              <li>Chiara Arches (Single, Double &amp; Triple)</li>
+              <li>Organic Balloon Garlands &amp; Clouds</li>
+              <li>Fabric &amp; Velvet Drape Backdrops</li>
+              <li>Flower Walls &amp; Greenery Walls</li>
+              <li>Custom Signs &amp; Welcome Easels</li>
+              <li>Mosaic Numbers &amp; Lettering</li>
             </ul>
           </div>
 
           {/* Connect */}
           <div>
             <h4 style={{ fontSize: '1.1rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '18px' }}>
-              Book & Inquire
+              Book &amp; 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.
+              Ready to bring your celebration to life? Connect with our team to check availability and reserve your date.
             </p>
             <Link href="#contact" className="btn-gold" style={{ padding: '10px 24px', fontSize: '0.88rem', display: 'inline-flex' }}>
               <span>✨</span> Inquire Now

src/components/Header.tsx

@@ -57,15 +57,15 @@ export default function Header() {
           <Link href="#portfolio" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
             Portfolio
           </Link>
+          <Link href="#backdrops" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
+            Backdrops
+          </Link>
+          <Link href="#how-it-works" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
+            How It Works
+          </Link>
           <Link href="#custom-studio" style={{ color: 'var(--color-pink-light)', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 700, transition: 'color 0.2s' }}>
             🎨 Design Studio
           </Link>
-          <Link href="#pillars" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
-            Why Us
-          </Link>
-          <Link href="#services" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
-            Packages
-          </Link>
           <Link href="#reviews" style={{ color: '#E2E8F0', textDecoration: 'none', fontSize: '0.92rem', fontWeight: 600, transition: 'color 0.2s' }}>
             Reviews
           </Link>
@@ -112,6 +112,20 @@ export default function Header() {
           >
             📸 Event Portfolio
           </Link>
+          <Link 
+            href="#backdrops" 
+            onClick={() => setMobileMenuOpen(false)}
+            style={{ color: '#FFFFFF', textDecoration: 'none', fontSize: '1.1rem', fontWeight: 600 }}
+          >
+            ✨ Types of Backdrops
+          </Link>
+          <Link 
+            href="#how-it-works" 
+            onClick={() => setMobileMenuOpen(false)}
+            style={{ color: '#FFFFFF', textDecoration: 'none', fontSize: '1.1rem', fontWeight: 600 }}
+          >
+            📋 How It Works (3-Step Plan)
+          </Link>
           <Link 
             href="#custom-studio" 
             onClick={() => setMobileMenuOpen(false)}
@@ -119,20 +133,6 @@ export default function Header() {
           >
             🎨 Custom Design Studio
           </Link>
-          <Link 
-            href="#pillars" 
-            onClick={() => setMobileMenuOpen(false)}
-            style={{ color: '#FFFFFF', textDecoration: 'none', fontSize: '1.1rem', fontWeight: 600 }}
-          >
-            👑 Why Wise Hearted
-          </Link>
-          <Link 
-            href="#services" 
-            onClick={() => setMobileMenuOpen(false)}
-            style={{ color: '#FFFFFF', textDecoration: 'none', fontSize: '1.1rem', fontWeight: 600 }}
-          >
-            🎈 Packages & Pricing
-          </Link>
           <Link 
             href="#reviews" 
             onClick={() => setMobileMenuOpen(false)}

src/components/Hero.tsx

@@ -7,63 +7,93 @@ export default function Hero() {
   return (
     <section style={{
       position: 'relative',
-      paddingTop: 'clamp(115px, 15vw, 160px)',
-      paddingBottom: 'clamp(50px, 8vw, 90px)',
+      paddingTop: 'clamp(100px, 12vw, 130px)',
+      paddingBottom: 'clamp(50px, 8vw, 80px)',
       overflow: 'hidden',
-      backgroundColor: '#000000',
-      borderBottom: '1px solid var(--border-gold)',
+      backgroundColor: '#FFFFFF',
+      borderBottom: '1px solid #E5E7EB',
     }}>
       <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
         
-        {/* Brand Tagline Badge */}
+        {/* Main Logo & Headline Dark Feature Box (Jackie Requirement 1: Keep heading / main logo with black background) */}
         <div style={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: '8px',
-          background: '#0D0D0D',
-          border: '1.5px solid var(--color-gold)',
-          padding: '8px 20px',
-          borderRadius: '50px',
-          marginBottom: '24px',
-          boxShadow: '0 0 20px rgba(212, 175, 55, 0.25)',
-          maxWidth: '96%',
+          maxWidth: '820px',
+          margin: '0 auto 36px',
+          background: '#09090B',
+          borderRadius: '24px',
+          padding: 'clamp(28px, 5vw, 44px) 24px',
+          border: '1.5px solid rgba(197, 160, 89, 0.45)',
+          boxShadow: '0 20px 45px rgba(0, 0, 0, 0.2), 0 0 25px rgba(197, 160, 89, 0.15)',
         }}>
-          <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>
-          <Sparkles size={14} color="var(--color-pink)" />
+          
+          {/* Brand Tagline Badge */}
+          <div style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '8px',
+            background: 'rgba(255, 255, 255, 0.06)',
+            border: '1px solid rgba(197, 160, 89, 0.5)',
+            padding: '6px 18px',
+            borderRadius: '50px',
+            marginBottom: '20px',
+          }}>
+            <Sparkles size={13} color="var(--color-pink-light)" />
+            <span style={{ fontSize: 'clamp(0.7rem, 1.8vw, 0.78rem)', fontWeight: 800, color: 'var(--color-gold-light)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
+              CALLED TO CREATE. ENABLED BY GOD.
+            </span>
+            <Sparkles size={13} color="var(--color-pink-light)" />
+          </div>
+
+          {/* Master 4X Gold Logo */}
+          <div style={{
+            maxWidth: '440px',
+            width: '90%',
+            margin: '0 auto 16px',
+            position: 'relative',
+            filter: 'drop-shadow(0 10px 30px rgba(197, 160, 89, 0.35))',
+          }}>
+            <Image 
+              src="/images/logo_clean_master.webp" 
+              alt="Wise Hearted Event Decor Logo" 
+              width={1640} 
+              height={1120} 
+              priority
+              style={{ width: '100%', height: 'auto', display: 'block', margin: '0 auto' }}
+            />
+          </div>
+
+          <h1 style={{
+            fontSize: 'clamp(1.2rem, 2.8vw, 1.7rem)',
+            color: '#F3F4F6',
+            fontWeight: 600,
+            fontFamily: 'var(--font-serif)',
+            letterSpacing: '0.01em',
+            margin: '0 0 10px',
+          }}>
+            Unforgettable Celebrations. <span className="gold-gradient-text" style={{ fontStyle: 'italic' }}>Zero Setup Stress.</span>
+          </h1>
+          <p style={{
+            color: '#9CA3AF',
+            fontSize: 'clamp(0.85rem, 1.8vw, 0.98rem)',
+            maxWidth: '600px',
+            margin: '0 auto',
+            lineHeight: 1.6,
+          }}>
+            Custom backdrops, organic balloon styling, and complete white-glove event staging in the Antelope Valley and Greater Los Angeles.
+          </p>
         </div>
 
-        {/* Master 4X Super-Sampled 3D Gold Logo */}
-        <div style={{
-          maxWidth: '490px',
-          width: '94%',
-          margin: '0 auto 28px',
-          position: 'relative',
-          filter: 'drop-shadow(0 12px 36px rgba(212, 175, 55, 0.25)) drop-shadow(0 6px 18px rgba(224, 0, 111, 0.2))',
-        }}>
-          <Image 
-            src="/images/logo_clean_master.webp" 
-            alt="Wise Hearted Event Decor Logo" 
-            width={1640} 
-            height={1120} 
-            priority
-            style={{ width: '100%', height: 'auto', display: 'block', margin: '0 auto' }}
-          />
-        </div>
-
-        {/* Subtitle / Promise */}
+        {/* StoryBrand Customer Hero Promise */}
         <p style={{
-          fontSize: 'clamp(1.05rem, 2.3vw, 1.4rem)',
-          lineHeight: 1.6,
-          color: '#E2E8F0',
+          fontSize: 'clamp(1.05rem, 2.2vw, 1.32rem)',
+          lineHeight: 1.7,
+          color: '#374151',
           maxWidth: '780px',
           margin: '0 auto 32px',
-          fontWeight: 400,
-          padding: '0 8px',
+          fontWeight: 500,
+          padding: '0 10px',
         }}>
-          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>.
+          Turn your milestone into a picture-perfect memory. We design, deliver, and install <strong style={{ color: 'var(--color-gold-dark)', fontWeight: 700 }}>premium backdrops</strong>, <strong style={{ color: 'var(--color-pink-dark)', fontWeight: 700 }}>organic balloon garlands</strong>, and <strong style={{ color: '#111827' }}>bespoke event decor</strong> so you can enjoy every second with your guests.
         </p>
 
         {/* CTA Button Group */}
@@ -72,14 +102,14 @@ export default function Hero() {
           justifyContent: 'center',
           gap: '14px',
           flexWrap: 'wrap',
-          marginBottom: '40px',
+          marginBottom: '44px',
           padding: '0 4px',
         }}>
           <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', gap: '8px' }}>
-            <Camera size={18} color="var(--color-gold-light)" /> Explore Our Work
+            <Camera size={18} /> Explore Our Work
           </Link>
         </div>
 
@@ -186,7 +216,7 @@ export default function Hero() {
               }}>
                 <div style={{ textAlign: 'left', flex: '1 1 auto' }}>
                   <div style={{ fontSize: 'clamp(0.88rem, 2.2vw, 1.2rem)', fontWeight: 800, color: '#FFFFFF', textShadow: '0 2px 8px rgba(0,0,0,0.9)', lineHeight: 1.2 }}>
-                    Luxury Milestone & Birthday Backdrops
+                    Premium Milestone & Birthday Backdrops
                   </div>
                   <div style={{ fontSize: 'clamp(0.7rem, 1.5vw, 0.82rem)', color: '#E2E8F0', textShadow: '0 1px 4px rgba(0,0,0,0.9)', marginTop: '2px' }}>
                     Custom arch frames • Chrome gold & organic balloon styling

src/components/HowItWorksSection.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import Link from 'next/link';
+import { Palette, CalendarCheck2, PartyPopper, ArrowRight, ShieldCheck, Clock, Sparkles } from 'lucide-react';
+
+export default function HowItWorksSection() {
+  const steps = [
+    {
+      num: '01',
+      title: 'Choose Your Backdrop & Theme',
+      desc: 'Pick from Chiara arches (single, double, or triple), elegant drape backdrops, flower walls, or custom welcome signs. We customize every balloon color to match your theme perfectly.',
+      icon: Palette,
+      highlight: 'Chiara Arches & Custom Styling',
+    },
+    {
+      num: '02',
+      title: 'Reserve Your Event Date',
+      desc: 'Fill out our quick quote form or chat with our team. We provide a transparent design proposal, straightforward pricing, and an easy deposit to lock in your date on our calendar.',
+      icon: CalendarCheck2,
+      highlight: 'Clear Proposals & Zero Hassle',
+    },
+    {
+      num: '03',
+      title: 'Celebrate 100% Stress-Free',
+      desc: 'No frantic DIY decorating or blowing up balloons on party morning. Our team arrives on-site, professionally sets up, styles every detail, and handles post-event breakdown.',
+      icon: PartyPopper,
+      highlight: 'White-Glove Delivery & Teardown',
+    },
+  ];
+
+  return (
+    <section id="how-it-works" style={{
+      padding: '90px 24px',
+      backgroundColor: '#FAF8F5',
+      borderBottom: '1px solid #E5E7EB',
+      position: 'relative',
+    }}>
+      <div className="container">
+        
+        {/* Section Header with StoryBrand Hook */}
+        <div style={{ textAlign: 'center', marginBottom: '56px' }}>
+          <div style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '8px',
+            background: 'rgba(197, 160, 89, 0.12)',
+            border: '1px solid rgba(197, 160, 89, 0.35)',
+            padding: '6px 18px',
+            borderRadius: '50px',
+            marginBottom: '14px',
+          }}>
+            <Sparkles size={14} color="var(--color-gold-dark)" />
+            <span style={{
+              fontSize: '0.82rem',
+              fontWeight: 800,
+              color: 'var(--color-gold-dark)',
+              letterSpacing: '0.12em',
+              textTransform: 'uppercase',
+            }}>
+              The 3-Step StoryBrand Plan
+            </span>
+          </div>
+
+          <h2 style={{
+            fontSize: 'clamp(2rem, 3.8vw, 2.7rem)',
+            fontWeight: 800,
+            color: 'var(--text-dark)',
+            marginBottom: '16px',
+            lineHeight: 1.25,
+          }}>
+            How It Works: <span className="gold-gradient-text">Simple, Stress-Free Decor</span>
+          </h2>
+          <p style={{
+            fontSize: '1.08rem',
+            color: '#4B5563',
+            maxWidth: '680px',
+            margin: '0 auto',
+            lineHeight: 1.7,
+          }}>
+            Planning a celebration shouldn’t leave you exhausted. We handle the entire decor process from vision to breakdown so you can focus on making memories.
+          </p>
+        </div>
+
+        {/* 3 Step Cards Grid */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(310px, 1fr))',
+          gap: '28px',
+          marginBottom: '50px',
+        }}>
+          {steps.map((step, idx) => {
+            const IconComp = step.icon;
+            return (
+              <div 
+                key={idx}
+                style={{
+                  background: '#FFFFFF',
+                  borderRadius: '20px',
+                  padding: '36px 28px',
+                  border: '1.5px solid rgba(197, 160, 89, 0.3)',
+                  boxShadow: '0 10px 30px rgba(0, 0, 0, 0.05)',
+                  position: 'relative',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-between',
+                  transition: 'all 0.3s ease',
+                }}
+              >
+                <div>
+                  {/* Step Number & Icon Header */}
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '22px' }}>
+                    <div style={{
+                      fontFamily: 'var(--font-serif)',
+                      fontSize: '2.5rem',
+                      fontWeight: 800,
+                      color: 'var(--color-gold-dark)',
+                      lineHeight: 1,
+                      opacity: 0.9,
+                    }}>
+                      {step.num}
+                    </div>
+                    <div style={{
+                      width: '48px',
+                      height: '48px',
+                      borderRadius: '50%',
+                      background: 'rgba(197, 160, 89, 0.12)',
+                      border: '1px solid rgba(197, 160, 89, 0.35)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}>
+                      <IconComp size={22} color="var(--color-gold-dark)" />
+                    </div>
+                  </div>
+
+                  <h3 style={{
+                    fontSize: '1.35rem',
+                    fontWeight: 800,
+                    color: 'var(--text-dark)',
+                    marginBottom: '12px',
+                    lineHeight: 1.3,
+                  }}>
+                    {step.title}
+                  </h3>
+
+                  <p style={{
+                    fontSize: '0.96rem',
+                    color: '#4B5563',
+                    lineHeight: 1.7,
+                    marginBottom: '20px',
+                  }}>
+                    {step.desc}
+                  </p>
+                </div>
+
+                <div style={{
+                  paddingTop: '16px',
+                  borderTop: '1px solid #F3F4F6',
+                  fontSize: '0.84rem',
+                  fontWeight: 700,
+                  color: 'var(--color-gold-dark)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                }}>
+                  <span>✓</span> {step.highlight}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Bottom CTA Banner */}
+        <div style={{
+          background: '#09090B',
+          borderRadius: '20px',
+          padding: '32px 28px',
+          border: '1.5px solid rgba(197, 160, 89, 0.4)',
+          boxShadow: '0 15px 40px rgba(0, 0, 0, 0.15)',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: '20px',
+        }}>
+          <div>
+            <h4 style={{ color: '#FFFFFF', fontSize: '1.35rem', fontWeight: 800, margin: '0 0 6px' }}>
+              Have an upcoming date in mind?
+            </h4>
+            <p style={{ color: '#9CA3AF', margin: 0, fontSize: '0.94rem' }}>
+              Dates fill up fast on weekends. Connect with our team today to check calendar availability!
+            </p>
+          </div>
+          <Link href="#contact" className="btn-gold" style={{ padding: '12px 28px' }}>
+            <span>Reserve Your Date</span> <ArrowRight size={16} />
+          </Link>
+        </div>
+
+      </div>
+    </section>
+  );
+}

src/components/MobileQuickBar.tsx

@@ -9,7 +9,6 @@ export default function MobileQuickBar() {
 
   useEffect(() => {
     const handleScroll = () => {
-      // Show only after scrolling down 150px
       const scrollPos = window.scrollY;
       setIsVisible(scrollPos > 150);
     };
@@ -30,11 +29,11 @@ export default function MobileQuickBar() {
         right: 0,
         zIndex: 9999,
         padding: '10px 14px clamp(12px, 3vw, 18px)',
-        background: 'rgba(8, 8, 8, 0.94)',
+        background: 'rgba(255, 255, 255, 0.96)',
         backdropFilter: 'blur(20px)',
         WebkitBackdropFilter: 'blur(20px)',
-        borderTop: '1.5px solid var(--border-gold)',
-        boxShadow: '0 -10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.15)',
+        borderTop: '1.5px solid rgba(197, 160, 89, 0.4)',
+        boxShadow: '0 -10px 30px rgba(0, 0, 0, 0.08), 0 0 20px rgba(197, 160, 89, 0.1)',
         display: 'flex',
         alignItems: 'center',
         gap: '10px',
@@ -49,9 +48,9 @@ export default function MobileQuickBar() {
           alignItems: 'center',
           justifyContent: 'center',
           gap: '6px',
-          background: 'rgba(255, 255, 255, 0.08)',
-          border: '1px solid rgba(255, 255, 255, 0.18)',
-          color: '#FFFFFF',
+          background: '#F9FAFB',
+          border: '1.5px solid #E5E7EB',
+          color: '#111827',
           padding: '12px 10px',
           borderRadius: '50px',
           fontSize: '0.86rem',
@@ -60,7 +59,7 @@ export default function MobileQuickBar() {
           textAlign: 'center',
         }}
       >
-        <Phone size={15} color="var(--color-gold-light)" />
+        <Phone size={15} color="var(--color-gold-dark)" />
         <span>Call / Text</span>
       </a>
 
@@ -79,7 +78,7 @@ export default function MobileQuickBar() {
           fontWeight: 800,
           textDecoration: 'none',
           textAlign: 'center',
-          boxShadow: '0 4px 15px rgba(212, 175, 55, 0.4)',
+          boxShadow: '0 4px 15px rgba(197, 160, 89, 0.35)',
         }}
       >
         <Sparkles size={15} />

src/components/MoodBoardEstimator.tsx

@@ -9,7 +9,7 @@ import {
   Wine, 
   Layers, 
   Type, 
-  GlassWater, 
+  HeartHandshake, 
   Flower2, 
   Check, 
   ArrowRight,
@@ -39,24 +39,24 @@ interface ElementOption {
 }
 
 const eventTypes: EventTypeOption[] = [
-  { 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 },
+  { id: 'wedding', label: 'Wedding & Engagement Arch', icon: Heart },
+  { id: 'milestone_birthday', label: 'Milestone Birthday (30th, 50th, 70th+)', icon: Crown },
+  { id: 'baby_shower', label: 'Baby Shower & Gender Reveal', icon: Sparkles },
+  { id: 'themed_party', label: 'Themed / 1st Birthday Party', icon: Palette },
+  { id: 'corporate_gala', label: 'Corporate Gala & Brand Celebration', icon: Wine },
 ];
 
 const palettes: PaletteOption[] = [
   {
     id: 'royal_noir',
     name: 'Royal Noir Gala',
-    colors: ['#000000', '#D4AF37', '#990000'],
+    colors: ['#000000', '#C5A059', '#990000'],
     desc: 'Onyx black marble, reflective chrome gold, and deep crimson.',
   },
   {
     id: 'sweet_berry',
     name: 'Berry Sweet Pastel',
-    colors: ['#E0006F', '#FFB6C1', '#002244'],
+    colors: ['#D94680', '#FFB6C1', '#002244'],
     desc: 'Strawberry red, blush baby pink, and deep midnight navy.',
   },
   {
@@ -74,18 +74,18 @@ const palettes: PaletteOption[] = [
   {
     id: 'celestial_moon',
     name: 'Midnight & Gold Moon',
-    colors: ['#0B1B3D', '#C8A2C8', '#D4AF37'],
+    colors: ['#0B1B3D', '#C8A2C8', '#C5A059'],
     desc: 'Royal navy, soft lavender drape, and gold starburst accents.',
   },
 ];
 
 const decorElements: ElementOption[] = [
   { 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' },
+  { id: 'arch_panels', label: 'Types of Backdrops (Chiara, Drape, Fabric, Green Wall)', icon: Layers, tag: 'Signature' },
+  { id: 'mosaic_letters', label: 'Mosaic Numbers or Mosaic Lettering', icon: Type, tag: 'High Impact' },
+  { id: 'custom_signs', label: 'Custom Signs & Welcome Signs', icon: Sparkles, tag: 'Personalized' },
+  { id: 'floral_accents', label: 'Silk Florals & Botanical Greenery', icon: Flower2, tag: 'Premium' },
+  { id: 'vendor_referral', label: 'Vendor Referral (Dessert / Beverage Carts)', icon: HeartHandshake, tag: 'Referral' },
 ];
 
 export default function MoodBoardEstimator() {
@@ -94,7 +94,7 @@ export default function MoodBoardEstimator() {
   const [selectedElements, setSelectedElements] = useState<string[]>([
     'balloon_cascade',
     'arch_panels',
-    'custom_lettering',
+    'custom_signs',
   ]);
 
   const toggleElement = (id: string) => {
@@ -115,7 +115,6 @@ export default function MoodBoardEstimator() {
 • Color Palette: ${currentPalette?.name} (${currentPalette?.desc})
 • Core Decor Elements: ${selectedElementLabels.join(', ')}`;
 
-    // Dispatch custom event to prefill booking form
     window.dispatchEvent(
       new CustomEvent('prefillWiseHeartedBooking', {
         detail: {
@@ -126,7 +125,6 @@ export default function MoodBoardEstimator() {
       })
     );
 
-    // Smoothly scroll to contact form
     const contactSection = document.getElementById('contact');
     if (contactSection) {
       contactSection.scrollIntoView({ behavior: 'smooth' });
@@ -137,10 +135,10 @@ export default function MoodBoardEstimator() {
     <section
       id="custom-studio"
       style={{
-        padding: 'clamp(70px, 10vw, 110px) 0',
-        backgroundColor: '#050505',
+        padding: 'clamp(70px, 10vw, 100px) 0',
+        backgroundColor: '#FFFFFF',
         position: 'relative',
-        borderBottom: '1px solid var(--border-gold)',
+        borderBottom: '1px solid #E5E7EB',
       }}
     >
       <div className="container" style={{ maxWidth: '1120px' }}>
@@ -150,7 +148,7 @@ export default function MoodBoardEstimator() {
             style={{
               fontSize: '0.85rem',
               fontWeight: 800,
-              color: 'var(--color-pink-light)',
+              color: 'var(--color-gold-dark)',
               letterSpacing: '0.15em',
               textTransform: 'uppercase',
               display: 'block',
@@ -163,6 +161,7 @@ export default function MoodBoardEstimator() {
             style={{
               fontSize: 'clamp(2rem, 3.8vw, 2.8rem)',
               fontWeight: 800,
+              color: 'var(--text-dark)',
               marginBottom: '16px',
             }}
           >
@@ -171,13 +170,13 @@ export default function MoodBoardEstimator() {
           <p
             style={{
               fontSize: '1.05rem',
-              color: '#94A3B8',
+              color: '#4B5563',
               maxWidth: '700px',
               margin: '0 auto',
               lineHeight: 1.6,
             }}
           >
-            Select your celebration type, color palette, and preferred backdrop elements below to generate your personalized setup preview in real time!
+            Select your celebration type, color palette, and preferred backdrop types below to configure your personalized event proposal in real time!
           </p>
         </div>
 
@@ -192,18 +191,19 @@ export default function MoodBoardEstimator() {
         >
           {/* STEP 1: Celebration Type */}
           <div
-            className="glass-panel"
             style={{
+              background: '#FAF8F5',
               padding: '24px 20px',
-              border: '1px solid rgba(212, 175, 55, 0.3)',
+              border: '1.5px solid rgba(197, 160, 89, 0.3)',
               borderRadius: '20px',
+              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.03)',
             }}
           >
             <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
               <span
                 style={{
                   background: 'var(--color-gold-gradient)',
-                  color: '#000',
+                  color: '#111827',
                   width: '26px',
                   height: '26px',
                   borderRadius: '50%',
@@ -216,7 +216,7 @@ export default function MoodBoardEstimator() {
               >
                 1
               </span>
-              <h3 style={{ fontSize: '1.15rem', fontWeight: 800, color: '#FFFFFF', margin: 0 }}>
+              <h3 style={{ fontSize: '1.15rem', fontWeight: 800, color: 'var(--text-dark)', margin: 0 }}>
                 Celebration Type
               </h3>
             </div>
@@ -235,26 +235,27 @@ export default function MoodBoardEstimator() {
                       gap: '12px',
                       padding: '12px 14px',
                       borderRadius: '12px',
-                      background: isSelected ? 'rgba(212, 175, 55, 0.15)' : 'rgba(255, 255, 255, 0.03)',
-                      border: isSelected ? '1.5px solid var(--color-gold)' : '1px solid rgba(255, 255, 255, 0.08)',
-                      color: isSelected ? '#FFFFFF' : '#CBD5E1',
+                      background: isSelected ? '#FFFFFF' : 'transparent',
+                      border: isSelected ? '1.5px solid var(--color-gold-dark)' : '1px solid #E5E7EB',
+                      color: isSelected ? 'var(--text-dark)' : '#4B5563',
                       fontSize: '0.92rem',
                       fontWeight: isSelected ? 700 : 500,
                       cursor: 'pointer',
                       textAlign: 'left',
                       transition: 'all 0.2s ease',
+                      boxShadow: isSelected ? '0 4px 12px rgba(197, 160, 89, 0.15)' : 'none',
                     }}
                   >
                     <span style={{ 
                       width: '28px', 
                       height: '28px', 
                       borderRadius: '8px', 
-                      background: isSelected ? 'rgba(212, 175, 55, 0.2)' : 'rgba(255, 255, 255, 0.05)',
+                      background: isSelected ? 'rgba(197, 160, 89, 0.15)' : '#F3F4F6',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
                     }}>
-                      <IconComp size={16} color={isSelected ? 'var(--color-gold)' : '#94A3B8'} />
+                      <IconComp size={16} color={isSelected ? 'var(--color-gold-dark)' : '#6B7280'} />
                     </span>
                     <span>{et.label}</span>
                   </button>
@@ -263,12 +264,14 @@ export default function MoodBoardEstimator() {
             </div>
           </div>
 
+          {/* STEP 2: Signature Palette */}
           <div
-            className="glass-panel"
             style={{
+              background: '#FAF8F5',
               padding: '24px 20px',
-              border: '1px solid rgba(224, 0, 111, 0.3)',
+              border: '1.5px solid rgba(217, 70, 128, 0.3)',
               borderRadius: '20px',
+              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.03)',
             }}
           >
             <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
@@ -288,7 +291,7 @@ export default function MoodBoardEstimator() {
               >
                 2
               </span>
-              <h3 style={{ fontSize: '1.15rem', fontWeight: 800, color: '#FFFFFF', margin: 0 }}>
+              <h3 style={{ fontSize: '1.15rem', fontWeight: 800, color: 'var(--text-dark)', margin: 0 }}>
                 Signature Palette
               </h3>
             </div>
@@ -306,15 +309,16 @@ export default function MoodBoardEstimator() {
                       gap: '4px',
                       padding: '12px 14px',
                       borderRadius: '12px',
-                      background: isSelected ? 'rgba(224, 0, 111, 0.15)' : 'rgba(255, 255, 255, 0.03)',
-                      border: isSelected ? '1.5px solid var(--color-pink-light)' : '1px solid rgba(255, 255, 255, 0.08)',
+                      background: isSelected ? '#FFFFFF' : 'transparent',
+                      border: isSelected ? '1.5px solid var(--color-pink)' : '1px solid #E5E7EB',
                       cursor: 'pointer',
                       textAlign: 'left',
                       transition: 'all 0.2s ease',
+                      boxShadow: isSelected ? '0 4px 12px rgba(217, 70, 128, 0.15)' : 'none',
                     }}
                   >
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
-                      <span style={{ fontWeight: isSelected ? 800 : 600, color: isSelected ? '#FFFFFF' : '#E2E8F0', fontSize: '0.92rem' }}>
+                      <span style={{ fontWeight: isSelected ? 800 : 600, color: isSelected ? 'var(--text-dark)' : '#374151', fontSize: '0.92rem' }}>
                         {p.name}
                       </span>
                       <div style={{ display: 'flex', gap: '4px' }}>
@@ -326,33 +330,35 @@ export default function MoodBoardEstimator() {
                               height: '14px',
                               borderRadius: '50%',
                               backgroundColor: c,
-                              border: '1px solid rgba(255,255,255,0.3)',
-                              boxShadow: '0 2px 4px rgba(0,0,0,0.5)',
+                              border: '1px solid rgba(0,0,0,0.1)',
+                              boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
                             }}
                           />
                         ))}
                       </div>
                     </div>
-                    <span style={{ fontSize: '0.78rem', color: '#94A3B8', lineHeight: 1.3 }}>{p.desc}</span>
+                    <span style={{ fontSize: '0.78rem', color: '#6B7280', lineHeight: 1.3 }}>{p.desc}</span>
                   </button>
                 );
               })}
             </div>
           </div>
 
+          {/* STEP 3: Backdrop & Elements */}
           <div
-            className="glass-panel"
             style={{
+              background: '#FAF8F5',
               padding: '24px 20px',
-              border: '1px solid rgba(212, 175, 55, 0.3)',
+              border: '1.5px solid rgba(197, 160, 89, 0.3)',
               borderRadius: '20px',
+              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.03)',
             }}
           >
             <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
               <span
                 style={{
                   background: 'var(--color-gold-gradient)',
-                  color: '#000',
+                  color: '#111827',
                   width: '26px',
                   height: '26px',
                   borderRadius: '50%',
@@ -365,8 +371,8 @@ export default function MoodBoardEstimator() {
               >
                 3
               </span>
-              <h3 style={{ fontSize: '1.15rem', fontWeight: 800, color: '#FFFFFF', margin: 0 }}>
-                Backdrop & Elements
+              <h3 style={{ fontSize: '1.15rem', fontWeight: 800, color: 'var(--text-dark)', margin: 0 }}>
+                Types of Backdrops &amp; Decor
               </h3>
             </div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
@@ -384,14 +390,15 @@ export default function MoodBoardEstimator() {
                       justifyContent: 'space-between',
                       padding: '10px 12px',
                       borderRadius: '12px',
-                      background: isSelected ? 'rgba(212, 175, 55, 0.15)' : 'rgba(255, 255, 255, 0.03)',
-                      border: isSelected ? '1.5px solid var(--color-gold)' : '1px solid rgba(255, 255, 255, 0.08)',
-                      color: isSelected ? '#FFFFFF' : '#CBD5E1',
+                      background: isSelected ? '#FFFFFF' : 'transparent',
+                      border: isSelected ? '1.5px solid var(--color-gold-dark)' : '1px solid #E5E7EB',
+                      color: isSelected ? 'var(--text-dark)' : '#4B5563',
                       fontSize: '0.88rem',
                       fontWeight: isSelected ? 700 : 500,
                       cursor: 'pointer',
                       textAlign: 'left',
                       transition: 'all 0.2s ease',
+                      boxShadow: isSelected ? '0 4px 12px rgba(197, 160, 89, 0.15)' : 'none',
                     }}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
@@ -399,12 +406,12 @@ export default function MoodBoardEstimator() {
                         width: '26px', 
                         height: '26px', 
                         borderRadius: '6px', 
-                        background: isSelected ? 'rgba(212, 175, 55, 0.2)' : 'rgba(255, 255, 255, 0.05)',
+                        background: isSelected ? 'rgba(197, 160, 89, 0.15)' : '#F3F4F6',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                       }}>
-                        <IconComp size={15} color={isSelected ? 'var(--color-gold)' : '#94A3B8'} />
+                        <IconComp size={15} color={isSelected ? 'var(--color-gold-dark)' : '#6B7280'} />
                       </span>
                       <span>{el.label}</span>
                     </div>
@@ -412,8 +419,8 @@ export default function MoodBoardEstimator() {
                       style={{
                         fontSize: '0.72rem',
                         fontWeight: 700,
-                        color: isSelected ? 'var(--color-gold)' : '#64748B',
-                        background: isSelected ? 'rgba(212, 175, 55, 0.2)' : 'transparent',
+                        color: isSelected ? 'var(--color-gold-dark)' : '#9CA3AF',
+                        background: isSelected ? 'rgba(197, 160, 89, 0.15)' : 'transparent',
                         padding: '2px 6px',
                         borderRadius: '6px',
                       }}
@@ -427,13 +434,14 @@ export default function MoodBoardEstimator() {
           </div>
         </div>
 
+        {/* Live Specification Bar */}
         <div
           style={{
-            background: 'linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%)',
-            border: '2px solid var(--color-gold)',
+            background: '#09090B',
+            border: '1.5px solid rgba(197, 160, 89, 0.45)',
             borderRadius: '24px',
             padding: '24px 28px',
-            boxShadow: '0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(212, 175, 55, 0.2)',
+            boxShadow: '0 20px 45px rgba(0,0,0,0.15)',
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -456,7 +464,7 @@ export default function MoodBoardEstimator() {
               ✦ YOUR CUSTOM EVENT SPECIFICATION ✦
             </span>
             <div style={{ fontSize: '1.25rem', fontWeight: 800, color: '#FFFFFF', marginBottom: '8px' }}>
-              {currentEventType} <span style={{ color: 'var(--color-gold)' }}>•</span> {currentPalette?.name}
+              {currentEventType} <span style={{ color: 'var(--color-gold-light)' }}>•</span> {currentPalette?.name}
             </div>
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginTop: '4px' }}>
               {selectedElementLabels.map((lbl, idx) => (
@@ -487,7 +495,6 @@ export default function MoodBoardEstimator() {
                 fontSize: '1rem',
                 fontWeight: 800,
                 cursor: 'pointer',
-                boxShadow: '0 6px 25px rgba(212, 175, 55, 0.5)',
                 display: 'inline-flex',
                 alignItems: 'center',
                 gap: '8px',

src/components/PortfolioGallery.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import Image from 'next/image';
+import { Camera, Sparkles, X, ChevronRight } from 'lucide-react';
 
 interface GalleryItem {
   id: number;
@@ -15,75 +16,123 @@ interface GalleryItem {
 const portfolioItems: GalleryItem[] = [
   {
     id: 1,
-    title: 'Titus & Alayna Tuscan Wedding Arch',
+    title: 'Outdoor Ceremony Arch with Sage Drapery',
     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.webp',
-    tag: 'Weddings & Engagements',
+    desc: 'Wooden ceremony arch accented with soft sage and ivory drapery, fresh white roses, and matching floral arrangements on gold stands.',
+    image: '/images/portfolio_outdoor_ceremony_arch_sage_roses.jpg',
+    tag: 'Ceremony Arches',
   },
   {
     id: 2,
-    title: 'Emelda Luxury Black, Gold & Crimson Birthday',
+    title: 'Indoor Wedding Arch with Cascading Drapery',
+    category: 'Weddings',
+    desc: 'Romantic sheer white backdrop with cascading fabric, lush burgundy roses, blush florals, and natural botanical greenery.',
+    image: '/images/portfolio_indoor_wedding_arch_burgundy_roses.jpg',
+    tag: 'Wedding Backdrops',
+  },
+  {
+    id: 3,
+    title: 'Tuscan Multi-Arch Ceremony Backdrop',
+    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.webp',
+    tag: 'Multi-Arch Staging',
+  },
+  {
+    id: 4,
+    title: 'Black, Gold & Crimson Milestone Backdrop',
     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.webp',
     tag: 'Milestone Celebrations',
   },
   {
-    id: 3,
-    title: 'Berry Sweet Baby Shower Triple Arch',
+    id: 5,
+    title: '70th Milestone Birthday Balloon Arch',
+    category: 'Birthdays',
+    desc: 'Arched black backdrop with custom gold script lettering, framed in a luxury cascading organic garland of chrome gold and onyx balloons.',
+    image: '/images/portfolio_70th_birthday_black_gold_balloon_arch.jpg',
+    tag: 'Milestone Birthdays',
+  },
+  {
+    id: 6,
+    title: 'Berry Sweet Triple Arch Backdrop',
     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.',
+    desc: 'Triple custom arched panels with hand-illustrated berry motifs, framed in organic strawberry red, navy blue, and pastel pink balloons.',
     image: '/images/portfolio_berry_sweet_baby.webp',
     tag: 'Baby Showers',
   },
   {
-    id: 4,
-    title: 'Amina’s "Berry First Birthday" Backdrop',
+    id: 7,
+    title: 'Berry First Birthday Theme Arch',
     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.webp',
     tag: '1st Birthdays',
   },
   {
-    id: 5,
-    title: 'Sage Green, Blush & Chrome Gold Birthday Arch',
+    id: 8,
+    title: 'Sage Green & Gold Chiara Arch Backdrop',
     category: 'Birthdays',
-    desc: 'Elegant white arch with 3D gold "Happy Birthday" lettering, accented with faux eucalyptus greenery, silk roses, and chrome gold spheres.',
+    desc: 'Elegant white arch with 3D gold lettering, accented with faux eucalyptus greenery, silk roses, and chrome gold balloon spheres.',
     image: '/images/portfolio_sage_gold_birthday.webp',
-    tag: 'Adult Birthdays',
+    tag: 'Chiara Arches',
   },
   {
-    id: 6,
-    title: 'Class of 2026 Tropical Brights Graduation',
+    id: 9,
+    title: 'Sports & Soccer Column Installation',
+    category: 'Themed',
+    desc: 'Dynamic balloon column installation with royal blue, vibrant orange, white accents, and foil soccer balls for athletic banquets and parties.',
+    image: '/images/portfolio_soccer_sports_balloon_column.jpg',
+    tag: 'Sports Celebrations',
+  },
+  {
+    id: 10,
+    title: 'Gold Sequin & Velvet Drape Backdrop',
+    category: 'Specialty',
+    desc: 'Opulent indoor staging featuring sheer white center drapes, gold sequin panels, and deep crimson velvet curtains with gold tiebacks.',
+    image: '/images/portfolio_gold_sequin_crimson_drapery_backdrop.jpg',
+    tag: 'Drape Backdrops',
+  },
+  {
+    id: 11,
+    title: 'Custom Anniversary Theme & Balloon Sculpture',
+    category: 'Themed',
+    desc: 'Custom arched stage backdrop with personalized anniversary signage and a high-impact themed balloon bottle art installation.',
+    image: '/images/portfolio_chappell_anniversary_diet_coke_balloons.jpg',
+    tag: 'Custom Installations',
+  },
+  {
+    id: 12,
+    title: 'Tropical Brights Graduation Backdrop',
     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.webp',
     tag: 'Graduations',
   },
   {
-    id: 7,
-    title: 'Lavender Moon Arch & Giant Mosaic Letter "J"',
+    id: 13,
+    title: 'Lavender Moon Arch & Mosaic Lettering',
     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".',
+    desc: 'Gold crescent moon hoop with deep navy and lilac balloons, paired with sheer lilac drape backdrops and custom balloon mosaic lettering.',
     image: '/images/portfolio_lavender_moon_arch.webp',
-    tag: 'Custom Mosaic Letters',
+    tag: 'Mosaic Lettering',
   },
   {
-    id: 8,
-    title: 'Patriotic Memorial Day Celebration Arch',
+    id: 14,
+    title: 'Holiday Patriotic 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.webp',
-    tag: 'Community Events',
+    tag: 'Holiday Events',
   },
   {
-    id: 9,
-    title: '"Pop, Fizz, Fun!" Citrus Beverage Station',
+    id: 15,
+    title: 'Citrus Themed Organic Balloon Wave',
     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.',
+    desc: 'Vibrant orange and pearl white organic balloon wave framing a custom refreshment display with rustic wooden beverage crates.',
     image: '/images/portfolio_pop_fizz_orange.webp',
-    tag: 'Drink & Treat Stations',
+    tag: 'Organic Styling',
   },
 ];
 
@@ -99,53 +148,60 @@ export default function PortfolioGallery() {
 
   return (
     <section id="portfolio" style={{
-      padding: 'clamp(60px, 10vw, 100px) 0',
-      backgroundColor: '#000000',
+      padding: '90px 24px',
+      backgroundColor: '#FAF8F5',
       position: 'relative',
-      borderBottom: '1px solid var(--border-gold)',
+      borderBottom: '1px solid #E5E7EB',
     }}>
       <div className="container">
         
-        {/* Heading */}
-        <div style={{ textAlign: 'center', marginBottom: '36px', padding: '0 8px' }}>
-          <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-pink-light)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
+        {/* Section Header */}
+        <div style={{ textAlign: 'center', marginBottom: '40px' }}>
+          <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-gold-dark)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
             Real Client Installations
           </span>
-          <h2 style={{ fontSize: 'clamp(1.9rem, 3.8vw, 2.8rem)', fontWeight: 800, marginBottom: '14px' }}>
-            Featured <span className="gold-gradient-text">Event Portfolio</span>
+          <h2 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, color: 'var(--text-dark)', marginBottom: '16px', lineHeight: 1.25 }}>
+            Our Event <span className="gold-gradient-text">Portfolio</span>
           </h2>
-          <p style={{ fontSize: '1.05rem', color: '#94A3B8', maxWidth: '680px', margin: '0 auto', lineHeight: 1.6 }}>
-            Every event is a custom masterpiece. Browse through our real balloon garlands, custom backdrops, and bespoke styling.
+          <p style={{ fontSize: '1.08rem', color: '#4B5563', maxWidth: '650px', margin: '0 auto', lineHeight: 1.7 }}>
+            Explore our custom Chiara arches, elegant drape backdrops, organic balloon garlands, and bespoke event styling created for celebrations across Southern California.
           </p>
         </div>
 
-        {/* Filter Pills */}
+        {/* Category Filter Pills */}
         <div style={{
           display: 'flex',
           justifyContent: 'center',
-          gap: '8px',
+          gap: '10px',
           flexWrap: 'wrap',
-          marginBottom: '36px',
-          padding: '0 4px',
+          marginBottom: '44px',
         }}>
           {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: '8px 18px',
+                padding: '9px 20px',
                 borderRadius: '50px',
-                fontSize: '0.86rem',
+                fontSize: '0.88rem',
                 fontWeight: 700,
+                border: selectedCategory === cat 
+                  ? '1.5px solid var(--color-gold-dark)' 
+                  : '1px solid #E5E7EB',
+                backgroundColor: selectedCategory === cat 
+                  ? 'var(--color-gold-dark)' 
+                  : '#FFFFFF',
+                color: selectedCategory === cat 
+                  ? '#FFFFFF' 
+                  : '#4B5563',
                 cursor: 'pointer',
-                transition: 'all 0.25s ease',
-                boxShadow: selectedCategory === cat ? '0 4px 15px rgba(212, 175, 55, 0.4)' : 'none',
+                transition: 'all 0.2s ease',
+                boxShadow: selectedCategory === cat 
+                  ? '0 4px 12px rgba(150, 113, 23, 0.25)' 
+                  : '0 1px 3px rgba(0, 0, 0, 0.05)',
               }}
             >
-              {cat === 'All' ? '✨ All' : cat}
+              {cat}
             </button>
           ))}
         </div>
@@ -154,148 +210,200 @@ export default function PortfolioGallery() {
         <div style={{
           display: 'grid',
           gridTemplateColumns: 'repeat(auto-fill, minmax(310px, 1fr))',
-          gap: '20px',
+          gap: '26px',
         }}>
           {filteredItems.map((item) => (
             <div 
               key={item.id}
               onClick={() => setActiveModalImage(item)}
-              className="glass-panel"
               style={{
-                borderRadius: '16px',
+                background: '#FFFFFF',
+                borderRadius: '18px',
                 overflow: 'hidden',
+                border: '1px solid #E5E7EB',
+                boxShadow: '0 4px 16px rgba(0, 0, 0, 0.04)',
                 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.25)',
-                padding: 0,
+                transition: 'all 0.3s ease',
+                display: 'flex',
+                flexDirection: 'column',
               }}
+              className="gallery-card"
             >
               {/* Image Container */}
-              <div style={{ position: 'relative', width: '100%', height: '360px', overflow: 'hidden', backgroundColor: '#0D0D0D' }}>
+              <div style={{
+                position: 'relative',
+                width: '100%',
+                height: '320px',
+                backgroundColor: '#F3F4F6',
+              }}>
                 <Image 
-                  src={item.image} 
-                  alt={item.title} 
-                  fill 
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                   style={{ objectFit: 'cover' }}
                 />
+                
+                {/* Floating Category Tag */}
                 <div style={{
                   position: 'absolute',
-                  top: '14px',
-                  right: '14px',
-                  background: 'rgba(0, 0, 0, 0.85)',
+                  top: '12px',
+                  left: '12px',
+                  background: 'rgba(255, 255, 255, 0.94)',
                   backdropFilter: 'blur(8px)',
-                  border: '1px solid var(--color-gold)',
-                  color: 'var(--color-gold-light)',
+                  padding: '5px 12px',
+                  borderRadius: '50px',
                   fontSize: '0.74rem',
                   fontWeight: 800,
-                  padding: '4px 12px',
-                  borderRadius: '20px',
-                  letterSpacing: '0.05em',
-                  textTransform: 'uppercase',
+                  color: 'var(--color-gold-dark)',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                  border: '1px solid rgba(197, 160, 89, 0.3)',
                 }}>
                   {item.tag}
                 </div>
               </div>
 
-              {/* Caption */}
-              <div style={{ padding: '18px 18px' }}>
-                <h3 style={{ fontSize: '1.15rem', fontWeight: 700, color: '#FFFFFF', marginBottom: '8px' }}>
-                  {item.title}
-                </h3>
-                <p style={{ fontSize: '0.88rem', lineHeight: 1.6, color: '#94A3B8', margin: 0 }}>
-                  {item.desc}
-                </p>
-                <div style={{ marginTop: '14px', display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--color-pink-light)', fontSize: '0.84rem', fontWeight: 700 }}>
-                  <span>Tap to view full photo</span> <span>↗</span>
+              {/* Card Meta Content */}
+              <div style={{ padding: '20px 20px 22px', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+                <div>
+                  <h3 style={{
+                    fontSize: '1.12rem',
+                    fontWeight: 800,
+                    color: 'var(--text-dark)',
+                    marginBottom: '8px',
+                    lineHeight: 1.35,
+                  }}>
+                    {item.title}
+                  </h3>
+                  <p style={{
+                    fontSize: '0.88rem',
+                    color: '#6B7280',
+                    lineHeight: 1.6,
+                    margin: 0,
+                  }}>
+                    {item.desc}
+                  </p>
+                </div>
+
+                <div style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  color: 'var(--color-gold-dark)',
+                  fontSize: '0.84rem',
+                  fontWeight: 700,
+                  marginTop: '16px',
+                  paddingTop: '12px',
+                  borderTop: '1px solid #F3F4F6',
+                }}>
+                  <span>View Full Setup</span> <ChevronRight size={14} />
                 </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.94)',
-            backdropFilter: 'blur(12px)',
-            zIndex: 9999,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '16px',
-          }}
-        >
+        {/* Modal Lightbox */}
+        {activeModalImage && (
           <div 
-            onClick={(e) => e.stopPropagation()}
+            onClick={() => setActiveModalImage(null)}
             style={{
-              position: 'relative',
-              maxWidth: '900px',
-              width: '100%',
-              maxHeight: '92vh',
-              background: '#0D0D0D',
-              border: '2px solid var(--color-gold)',
-              borderRadius: '16px',
-              overflow: 'hidden',
-              boxShadow: '0 0 40px rgba(212, 175, 55, 0.4)',
+              position: 'fixed',
+              inset: 0,
+              zIndex: 99999,
+              backgroundColor: 'rgba(0, 0, 0, 0.88)',
+              backdropFilter: 'blur(12px)',
               display: 'flex',
-              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '20px',
             }}
           >
-            <button 
-              onClick={() => setActiveModalImage(null)}
+            <div 
+              onClick={(e) => e.stopPropagation()}
               style={{
-                position: 'absolute',
-                top: '14px',
-                right: '14px',
-                zIndex: 10,
-                background: 'rgba(0,0,0,0.75)',
-                color: '#FFFFFF',
-                border: '1px solid var(--color-gold)',
-                borderRadius: '50%',
-                width: '38px',
-                height: '38px',
-                fontSize: '1.2rem',
-                cursor: 'pointer',
+                position: 'relative',
+                maxWidth: '850px',
+                width: '100%',
+                maxHeight: '90vh',
+                backgroundColor: '#FFFFFF',
+                borderRadius: '20px',
+                overflow: 'hidden',
+                boxShadow: '0 25px 60px rgba(0, 0, 0, 0.5)',
                 display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
+                flexDirection: 'column',
               }}
             >
-              ✕
-            </button>
+              <button
+                onClick={() => setActiveModalImage(null)}
+                style={{
+                  position: 'absolute',
+                  top: '16px',
+                  right: '16px',
+                  zIndex: 10,
+                  width: '38px',
+                  height: '38px',
+                  borderRadius: '50%',
+                  background: 'rgba(0, 0, 0, 0.65)',
+                  border: 'none',
+                  color: '#FFFFFF',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                }}
+                aria-label="Close Preview"
+              >
+                <X size={20} />
+              </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={{
+                position: 'relative',
+                width: '100%',
+                height: 'clamp(320px, 55vh, 520px)',
+                backgroundColor: '#111',
+              }}>
+                <Image 
+                  src={activeModalImage.image}
+                  alt={activeModalImage.title}
+                  fill
+                  style={{ objectFit: 'contain' }}
+                />
+              </div>
 
-            <div style={{ padding: '18px 20px', background: '#121212', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
-              <div style={{ display: 'inline-block', color: 'var(--color-pink-light)', fontSize: '0.78rem', fontWeight: 800, textTransform: 'uppercase', marginBottom: '4px' }}>
-                {activeModalImage.tag}
+              <div style={{ padding: '24px' }}>
+                <div style={{
+                  display: 'inline-block',
+                  background: 'rgba(197, 160, 89, 0.15)',
+                  color: 'var(--color-gold-dark)',
+                  padding: '4px 12px',
+                  borderRadius: '50px',
+                  fontSize: '0.78rem',
+                  fontWeight: 800,
+                  marginBottom: '8px',
+                }}>
+                  {activeModalImage.tag}
+                </div>
+                <h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: 'var(--text-dark)', marginBottom: '8px' }}>
+                  {activeModalImage.title}
+                </h3>
+                <p style={{ fontSize: '0.96rem', color: '#4B5563', lineHeight: 1.6, marginBottom: '20px' }}>
+                  {activeModalImage.desc}
+                </p>
+                <a 
+                  href="#contact"
+                  onClick={() => setActiveModalImage(null)}
+                  className="btn-gold"
+                  style={{ padding: '12px 28px', fontSize: '0.92rem' }}
+                >
+                  <Sparkles size={16} /> Inquire About This Backdrop Design
+                </a>
               </div>
-              <h3 style={{ fontSize: '1.2rem', color: 'var(--color-gold-light)', fontWeight: 800, marginBottom: '6px' }}>
-                {activeModalImage.title}
-              </h3>
-              <p style={{ fontSize: '0.9rem', color: '#CBD5E1', margin: 0 }}>
-                {activeModalImage.desc}
-              </p>
             </div>
           </div>
-        </div>
-      )}
+        )}
+
+      </div>
     </section>
   );
 }

src/components/QuickQuotePartyForm.tsx

@@ -66,13 +66,11 @@ export default function QuickQuotePartyForm() {
       <div className="container" style={{ maxWidth: '1180px' }}>
         <div
           style={{
-            background: 'linear-gradient(135deg, rgba(14, 14, 14, 0.96) 0%, rgba(24, 12, 18, 0.98) 100%)',
-            border: '2px solid var(--color-gold)',
+            background: '#FFFFFF',
+            border: '1.5px solid rgba(197, 160, 89, 0.45)',
             borderRadius: '24px',
             padding: 'clamp(20px, 4vw, 32px)',
-            boxShadow: '0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(212, 175, 55, 0.25)',
-            backdropFilter: 'blur(20px)',
-            WebkitBackdropFilter: 'blur(20px)',
+            boxShadow: '0 20px 45px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04)',
           }}
         >
           {submitted ? (
@@ -81,21 +79,21 @@ export default function QuickQuotePartyForm() {
                 width: '64px',
                 height: '64px',
                 borderRadius: '50%',
-                background: 'rgba(212, 175, 55, 0.15)',
+                background: 'rgba(197, 160, 89, 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)',
+                boxShadow: '0 0 24px rgba(197, 160, 89, 0.2)',
               }}>
-                <CheckCircle2 size={36} color="var(--color-gold-light)" />
+                <CheckCircle2 size={36} color="var(--color-gold-dark)" />
               </div>
-              <h3 style={{ fontSize: '1.6rem', color: 'var(--color-gold)', fontWeight: 800, marginBottom: '8px' }}>
+              <h3 style={{ fontSize: '1.6rem', color: 'var(--text-dark)', fontWeight: 800, marginBottom: '8px' }}>
                 Thank You, {formData.name || 'Friend'}!
               </h3>
-              <p style={{ fontSize: '1rem', color: '#E2E8F0', maxWidth: '580px', margin: '0 auto 18px', lineHeight: 1.6 }}>
-                We received your request for <strong>{formData.eventType}</strong> in <strong>{formData.location}</strong>. Jackie will reach out to you at <strong>{formData.phone}</strong> within 24 hours with custom design ideas and availability!
+              <p style={{ fontSize: '1rem', color: '#4B5563', maxWidth: '580px', margin: '0 auto 18px', lineHeight: 1.6 }}>
+                We received your request for <strong>{formData.eventType}</strong> in <strong>{formData.location}</strong>. A Wise Hearted team member will reach out to you at <strong>{formData.phone}</strong> within 24 hours with custom design ideas, availability, and pricing!
               </p>
               <button
                 onClick={() => setSubmitted(false)}
@@ -116,7 +114,7 @@ export default function QuickQuotePartyForm() {
                   alignItems: 'center',
                   gap: '14px',
                   marginBottom: '22px',
-                  borderBottom: '1px solid rgba(212, 175, 55, 0.2)',
+                  borderBottom: '1px solid #E5E7EB',
                   paddingBottom: '16px',
                 }}
               >
@@ -129,12 +127,12 @@ export default function QuickQuotePartyForm() {
                         height: '10px',
                         borderRadius: '50%',
                         backgroundColor: '#10B981',
-                        boxShadow: '0 0 10px #10B981',
+                        boxShadow: '0 0 10px rgba(16, 185, 129, 0.5)',
                       }}
                     />
                     <span
                       style={{
-                        color: 'var(--color-pink-light)',
+                        color: 'var(--color-pink-dark)',
                         fontSize: '0.82rem',
                         fontWeight: 800,
                         textTransform: 'uppercase',
@@ -148,12 +146,12 @@ export default function QuickQuotePartyForm() {
                     style={{
                       fontSize: 'clamp(1.25rem, 2.5vw, 1.65rem)',
                       fontWeight: 900,
-                      color: '#FFFFFF',
+                      color: 'var(--text-dark)',
                       margin: 0,
                       letterSpacing: '-0.02em',
                     }}
                   >
-                    Request a Free Quote <span className="gold-gradient-text">From Jackie</span>
+                    Request a Free Event Quote <span className="gold-gradient-text">From Our Team</span>
                   </h3>
                 </div>
 
@@ -165,16 +163,16 @@ export default function QuickQuotePartyForm() {
                     gap: '8px',
                     fontSize: '0.8rem',
                     fontWeight: 700,
-                    color: '#E2E8F0',
+                    color: '#4B5563',
                   }}
                 >
                   <span
                     style={{
-                      background: 'rgba(212, 175, 55, 0.15)',
+                      background: 'rgba(197, 160, 89, 0.12)',
                       padding: '5px 12px',
                       borderRadius: '50px',
-                      border: '1px solid rgba(212, 175, 55, 0.4)',
-                      color: 'var(--color-gold-light)',
+                      border: '1px solid rgba(197, 160, 89, 0.35)',
+                      color: 'var(--color-gold-dark)',
                       display: 'inline-flex',
                       alignItems: 'center',
                       gap: '5px',
@@ -184,11 +182,11 @@ export default function QuickQuotePartyForm() {
                   </span>
                   <span
                     style={{
-                      background: 'rgba(224, 0, 111, 0.15)',
+                      background: 'rgba(217, 70, 128, 0.1)',
                       padding: '5px 12px',
                       borderRadius: '50px',
-                      border: '1px solid rgba(224, 0, 111, 0.4)',
-                      color: 'var(--color-pink-light)',
+                      border: '1px solid rgba(217, 70, 128, 0.3)',
+                      color: 'var(--color-pink-dark)',
                       display: 'inline-flex',
                       alignItems: 'center',
                       gap: '5px',
@@ -198,13 +196,14 @@ export default function QuickQuotePartyForm() {
                   </span>
                   <span
                     style={{
-                      background: 'rgba(255, 255, 255, 0.06)',
+                      background: '#F3F4F6',
                       padding: '5px 12px',
                       borderRadius: '50px',
-                      border: '1px solid rgba(255, 255, 255, 0.15)',
+                      border: '1px solid #E5E7EB',
                       display: 'inline-flex',
                       alignItems: 'center',
                       gap: '5px',
+                      color: '#4B5563',
                     }}
                   >
                     <Check size={12} strokeWidth={3} /> Zero Obligation
@@ -229,7 +228,7 @@ export default function QuickQuotePartyForm() {
                         display: 'block',
                         fontSize: '0.8rem',
                         fontWeight: 800,
-                        color: 'var(--color-gold-light)',
+                        color: 'var(--text-dark)',
                         marginBottom: '6px',
                         textTransform: 'uppercase',
                         letterSpacing: '0.04em',
@@ -244,9 +243,9 @@ export default function QuickQuotePartyForm() {
                         width: '100%',
                         padding: '13px 14px',
                         borderRadius: '10px',
-                        background: '#0D0D0D',
-                        border: '1.5px solid rgba(212, 175, 55, 0.3)',
-                        color: '#FFFFFF',
+                        background: '#F9FAFB',
+                        border: '1.5px solid #E5E7EB',
+                        color: '#111827',
                         fontSize: '0.92rem',
                         fontWeight: 600,
                         outline: 'none',
@@ -270,7 +269,7 @@ export default function QuickQuotePartyForm() {
                         display: 'block',
                         fontSize: '0.8rem',
                         fontWeight: 800,
-                        color: 'var(--color-gold-light)',
+                        color: 'var(--text-dark)',
                         marginBottom: '6px',
                         textTransform: 'uppercase',
                         letterSpacing: '0.04em',
@@ -285,9 +284,9 @@ export default function QuickQuotePartyForm() {
                         width: '100%',
                         padding: '13px 14px',
                         borderRadius: '10px',
-                        background: '#0D0D0D',
-                        border: '1.5px solid rgba(212, 175, 55, 0.3)',
-                        color: '#FFFFFF',
+                        background: '#F9FAFB',
+                        border: '1.5px solid #E5E7EB',
+                        color: '#111827',
                         fontSize: '0.92rem',
                         fontWeight: 600,
                         outline: 'none',
@@ -311,7 +310,7 @@ export default function QuickQuotePartyForm() {
                         display: 'block',
                         fontSize: '0.8rem',
                         fontWeight: 800,
-                        color: 'var(--color-gold-light)',
+                        color: 'var(--text-dark)',
                         marginBottom: '6px',
                         textTransform: 'uppercase',
                         letterSpacing: '0.04em',
@@ -329,9 +328,9 @@ export default function QuickQuotePartyForm() {
                         width: '100%',
                         padding: '13px 14px',
                         borderRadius: '10px',
-                        background: '#0D0D0D',
-                        border: '1.5px solid rgba(255, 255, 255, 0.12)',
-                        color: '#FFFFFF',
+                        background: '#F9FAFB',
+                        border: '1.5px solid #E5E7EB',
+                        color: '#111827',
                         fontSize: '0.92rem',
                         outline: 'none',
                       }}
@@ -345,7 +344,7 @@ export default function QuickQuotePartyForm() {
                         display: 'block',
                         fontSize: '0.8rem',
                         fontWeight: 800,
-                        color: 'var(--color-gold-light)',
+                        color: 'var(--text-dark)',
                         marginBottom: '6px',
                         textTransform: 'uppercase',
                         letterSpacing: '0.04em',
@@ -363,9 +362,9 @@ export default function QuickQuotePartyForm() {
                         width: '100%',
                         padding: '13px 14px',
                         borderRadius: '10px',
-                        background: '#0D0D0D',
-                        border: '1.5px solid rgba(255, 255, 255, 0.12)',
-                        color: '#FFFFFF',
+                        background: '#F9FAFB',
+                        border: '1.5px solid #E5E7EB',
+                        color: '#111827',
                         fontSize: '0.92rem',
                         outline: 'none',
                       }}
@@ -384,12 +383,12 @@ export default function QuickQuotePartyForm() {
                 >
                   <div style={{ flex: '1' }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
-                      <MessageSquare size={13} color="var(--color-pink-light)" />
+                      <MessageSquare size={13} color="var(--color-pink-dark)" />
                       <label
                         style={{
                           fontSize: '0.8rem',
                           fontWeight: 700,
-                          color: '#CBD5E1',
+                          color: '#4B5563',
                           textTransform: 'uppercase',
                           letterSpacing: '0.04em',
                         }}
@@ -406,9 +405,9 @@ export default function QuickQuotePartyForm() {
                         width: '100%',
                         padding: '13px 14px',
                         borderRadius: '10px',
-                        background: '#0D0D0D',
-                        border: '1.5px solid rgba(255, 255, 255, 0.12)',
-                        color: '#FFFFFF',
+                        background: '#F9FAFB',
+                        border: '1.5px solid #E5E7EB',
+                        color: '#111827',
                         fontSize: '0.92rem',
                         outline: 'none',
                       }}
@@ -428,7 +427,7 @@ export default function QuickQuotePartyForm() {
                         fontWeight: 800,
                         justifyContent: 'center',
                         cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                        boxShadow: '0 6px 20px rgba(212, 175, 55, 0.4)',
+                        boxShadow: '0 6px 20px rgba(197, 160, 89, 0.4)',
                         opacity: isSubmitting ? 0.7 : 1,
                         display: 'inline-flex',
                         alignItems: 'center',
@@ -443,7 +442,7 @@ export default function QuickQuotePartyForm() {
                       ) : (
                         <>
                           <Sparkles size={18} />
-                          <span>Get A Quote From Jackie</span>
+                          <span>Get A Quote From Our Team</span>
                           <ArrowRight size={16} />
                         </>
                       )}

src/components/ServicesSection.tsx

@@ -1,184 +1,327 @@
 import React from 'react';
 import Link from 'next/link';
-import { Palette, Layers, Flower2, Type, GlassWater, Truck, Check, Sparkles, ArrowRight } from 'lucide-react';
+import { Layers, Palette, Flower2, Type, Sparkles, Truck, HeartHandshake, Check, ArrowRight } from 'lucide-react';
 
 export default function ServicesSection() {
-  const services = [
+  const backdropTypes = [
     {
-      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'],
+      title: 'Chiara Arches (Various Sizes)',
+      desc: 'Single, double, or triple arched panels in varying heights. Custom color-matched to your celebration with seamless matte or high-gloss finishes.',
     },
+    {
+      title: 'Fabric Backdrops',
+      desc: 'Sleek, tension-fabric backdrops and custom printed designs for milestone birthdays, graduations, and brand events.',
+    },
+    {
+      title: 'Drape Backdrops',
+      desc: 'Flowing sheer drapes, gold sequin panels, and rich velvet backdrops tailored for elegant wedding ceremonies and photo spaces.',
+    },
+    {
+      title: 'Flower Wall Backdrops',
+      desc: 'Lush, premium silk floral walls providing an immersive, high-end photographic centerpiece for baby showers and engagements.',
+    },
+    {
+      title: 'Green Wall Backdrops',
+      desc: 'Vibrant boxwood greenery walls that look stunning paired with neon signs, custom wood cutouts, and organic balloon garlands.',
+    },
+    {
+      title: 'Custom & Bespoke Backdrops',
+      desc: 'Multi-layered creative installations, themed cutouts, arches with character motifs, and custom dimensional setups.',
+    },
+  ];
+
+  const primaryServices = [
     {
       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'],
+      title: 'Types of Backdrops & Framing',
+      badge: 'Signature',
+      desc: 'Chiara arches in various sizes, elegant drape installations, fabric backdrops, and custom green or flower walls designed to anchor your event.',
+      features: [
+        'Chiara Arches (Single, Double & Triple)',
+        'Drape & Fabric Backdrops',
+        'Flower Walls & Greenery Walls',
+        'Custom Themed Backdrops & More',
+      ],
     },
     {
-      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: Palette,
+      title: 'Organic Balloon Garlands & Arches',
+      badge: 'Popular',
+      desc: 'Double-stuffed premium latex balloons in custom artisan color formulas matched directly to your event theme and color swatch.',
+      features: [
+        'Custom Color Palette Matching',
+        'Matte, Chrome & Pearlized Finishes',
+        'Freestanding Garlands, Half & Full Arches',
+        'Long-Lasting Professional Rigging',
+      ],
+    },
+    {
+      icon: Sparkles,
+      title: 'Custom Signs & Welcome Signs',
+      badge: 'Personalized',
+      desc: 'Personalized welcome signs, custom acrylic signage, laser-cut name plates, and statement event messaging on wooden easels.',
+      features: [
+        'Custom Welcome Signs on Easels',
+        'Acrylic & Cutout Lettering',
+        'Milestone Event Dates & Names',
+        'Coordinated with Balloon Garland',
+      ],
     },
     {
       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'],
+      title: 'Mosaic Numbers & Mosaic Lettering',
+      badge: 'High-Impact',
+      desc: 'Towering 4ft–5ft mosaic frame numbers and letters filled with custom mini balloons—the ultimate photo attraction for birthdays and graduations.',
+      features: [
+        'Milestone Numbers (1, 16, 18, 21, 50, 70+)',
+        'Custom Monogram & Initial Lettering',
+        'Illuminated & Balloon-Filled Options',
+        'High-Impact Guest Photo Magnet',
+      ],
     },
     {
-      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: Flower2,
+      title: 'Silk Florals & Greenery Sprigs',
+      badge: 'Detailing',
+      desc: 'Elevate your backdrops with premium silk florals, cascading roses, faux eucalyptus foliage, and lush tropical palm fronds.',
+      features: [
+        'Botanical Greenery & Eucalyptus',
+        'Silk & Dried Floral Sprigs',
+        'Coordinated Ceremony Arrangements',
+        'Lush Floral Clusters on Arches',
+      ],
     },
     {
       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)'],
+      title: 'Full White-Glove Setup & Teardown',
+      badge: 'Stress-Free',
+      desc: 'Our team takes care of complete on-site delivery, professional weighting, styling, and post-event strike so you never lift a finger.',
+      features: [
+        'Guaranteed On-Time Arrival',
+        'Secure Weighting & Safe Rigging',
+        'Post-Event Teardown & Pickup',
+        'Serving Antelope Valley & Greater LA',
+      ],
     },
   ];
 
   return (
-    <section id="services" style={{
-      padding: '100px 24px',
-      backgroundColor: '#0A0A0A',
+    <section id="backdrops" style={{
+      padding: '90px 24px',
+      backgroundColor: '#FFFFFF',
       position: 'relative',
-      borderBottom: '1px solid var(--border-gold)',
+      borderBottom: '1px solid #E5E7EB',
     }}>
       <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
+        <div style={{ textAlign: 'center', marginBottom: '56px' }}>
+          <span style={{ fontSize: '0.85rem', fontWeight: 800, color: 'var(--color-gold-dark)', letterSpacing: '0.15em', textTransform: 'uppercase', display: 'block', marginBottom: '10px' }}>
+            Event Staging &amp; Design
           </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 style={{ fontSize: 'clamp(2rem, 3.8vw, 2.8rem)', fontWeight: 800, color: 'var(--text-dark)', marginBottom: '16px', lineHeight: 1.25 }}>
+            Types of Backdrops &amp; <span className="gold-gradient-text">Premium Decor</span>
           </h2>
-          <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 style={{ fontSize: '1.08rem', color: '#4B5563', maxWidth: '680px', margin: '0 auto', lineHeight: 1.7 }}>
+            Every celebration is unique. We provide premium backdrop structures and balloon artistry customized to your specific venue, theme, and vision.
           </p>
         </div>
 
-        {/* Services Grid */}
+        {/* Types of Backdrops Feature Block (Jackie Requirement 5) */}
+        <div style={{
+          background: '#FAF8F5',
+          borderRadius: '24px',
+          padding: 'clamp(24px, 4vw, 40px)',
+          border: '1.5px solid rgba(197, 160, 89, 0.35)',
+          marginBottom: '50px',
+          boxShadow: '0 8px 25px rgba(0, 0, 0, 0.04)',
+        }}>
+          <div style={{ textAlign: 'center', marginBottom: '32px' }}>
+            <div style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              color: 'var(--color-gold-dark)',
+              fontSize: '0.82rem',
+              fontWeight: 800,
+              textTransform: 'uppercase',
+              letterSpacing: '0.12em',
+              marginBottom: '8px',
+            }}>
+              <Sparkles size={14} /> Our Backdrop Showcase
+            </div>
+            <h3 style={{ fontSize: 'clamp(1.4rem, 2.8vw, 1.9rem)', fontWeight: 800, color: 'var(--text-dark)', margin: 0 }}>
+              Types of Backdrops Available
+            </h3>
+            <p style={{ fontSize: '0.96rem', color: '#6B7280', marginTop: '6px' }}>
+              Mix and match backdrop types with balloon garlands and custom signage for a showstopping setup.
+            </p>
+          </div>
+
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+            gap: '20px',
+          }}>
+            {backdropTypes.map((type, idx) => (
+              <div 
+                key={idx}
+                style={{
+                  background: '#FFFFFF',
+                  padding: '22px 20px',
+                  borderRadius: '14px',
+                  border: '1px solid #E5E7EB',
+                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.03)',
+                }}
+              >
+                <div style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  marginBottom: '8px',
+                }}>
+                  <div style={{
+                    width: '8px',
+                    height: '8px',
+                    borderRadius: '50%',
+                    backgroundColor: 'var(--color-gold-dark)',
+                  }} />
+                  <h4 style={{ fontSize: '1.05rem', fontWeight: 700, color: 'var(--text-dark)', margin: 0 }}>
+                    {type.title}
+                  </h4>
+                </div>
+                <p style={{ fontSize: '0.9rem', color: '#4B5563', lineHeight: 1.6, margin: 0 }}>
+                  {type.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Primary Services Grid */}
         <div style={{
           display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(330px, 1fr))',
-          gap: '28px',
-          marginBottom: '60px',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
+          gap: '26px',
+          marginBottom: '50px',
         }}>
-          {services.map((svc, idx) => {
+          {primaryServices.map((svc, idx) => {
             const IconComp = svc.icon;
             return (
               <div 
                 key={idx} 
-                className="glass-panel" 
                 style={{
-                  padding: '36px 28px',
+                  background: '#FFFFFF',
+                  borderRadius: '18px',
+                  padding: '32px 26px',
                   display: 'flex',
                   flexDirection: 'column',
                   justifyContent: 'space-between',
-                  border: `1.5px solid ${svc.borderColor}`,
+                  border: '1.5px solid rgba(197, 160, 89, 0.3)',
+                  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.04)',
                   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 style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+                    <div style={{
+                      width: '48px',
+                      height: '48px',
+                      borderRadius: '12px',
+                      background: 'rgba(197, 160, 89, 0.12)',
+                      border: '1px solid rgba(197, 160, 89, 0.3)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}>
+                      <IconComp size={24} color="var(--color-gold-dark)" />
+                    </div>
+                    <span style={{
+                      fontSize: '0.74rem',
+                      fontWeight: 800,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.1em',
+                      padding: '4px 10px',
+                      borderRadius: '50px',
+                      background: 'rgba(197, 160, 89, 0.12)',
+                      color: 'var(--color-gold-dark)',
+                      border: '1px solid rgba(197, 160, 89, 0.25)',
+                    }}>
+                      {svc.badge}
+                    </span>
                   </div>
-                  <h3 style={{ fontSize: '1.3rem', fontWeight: 800, marginBottom: '12px', color: '#FFFFFF' }}>
+
+                  <h3 style={{ fontSize: '1.25rem', fontWeight: 800, color: 'var(--text-dark)', marginBottom: '10px' }}>
                     {svc.title}
                   </h3>
-                  <p style={{ fontSize: '0.94rem', lineHeight: 1.65, color: '#94A3B8', marginBottom: '24px' }}>
+
+                  <p style={{ fontSize: '0.94rem', color: '#4B5563', lineHeight: 1.6, marginBottom: '20px' }}>
                     {svc.desc}
                   </p>
-                </div>
 
-                <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' }}>
+                  <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', 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 key={fIdx} style={{ fontSize: '0.88rem', color: '#374151', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <Check size={14} color="var(--color-gold-dark)" strokeWidth={2.5} />
+                        <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> <ArrowRight size={14} />
-                  </Link>
                 </div>
+
+                <Link href="#contact" style={{
+                  color: 'var(--color-gold-dark)',
+                  textDecoration: 'none',
+                  fontSize: '0.9rem',
+                  fontWeight: 700,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  paddingTop: '14px',
+                  borderTop: '1px solid #F3F4F6',
+                }}>
+                  <span>Inquire for Your Event</span> <ArrowRight size={14} />
+                </Link>
               </div>
             );
           })}
         </div>
 
-        {/* Process Banner */}
-        <div className="glass-panel" style={{
-          padding: '40px 32px',
-          borderRadius: '20px',
-          border: '1.5px solid var(--border-gold)',
-          background: '#0F0F0F',
+        {/* Vendor Referral Callout Banner (Jackie Requirement 10) */}
+        <div style={{
+          background: '#FAF8F5',
+          borderRadius: '16px',
+          padding: '24px 28px',
+          border: '1px solid rgba(197, 160, 89, 0.3)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '18px',
+          flexWrap: 'wrap',
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.03)',
         }}>
-          <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',
+            width: '44px',
+            height: '44px',
+            borderRadius: '50%',
+            background: 'rgba(197, 160, 89, 0.15)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
           }}>
-            <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>
+            <HeartHandshake size={22} color="var(--color-gold-dark)" />
+          </div>
+          <div style={{ flex: '1 1 300px' }}>
+            <div style={{ fontWeight: 800, color: 'var(--text-dark)', fontSize: '1rem', marginBottom: '3px' }}>
+              Looking for Dessert or Drink Carts?
             </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 style={{ fontSize: '0.92rem', color: '#4B5563', lineHeight: 1.5 }}>
+              While Wise Hearted specializes strictly in premium backdrops, balloon styling, and event staging, <strong>we are happy to refer you to our trusted local preferred vendors</strong> for mobile bars, dessert carts, and catering!
             </div>
           </div>
+          <Link href="#contact" className="btn-outline" style={{ padding: '10px 22px', fontSize: '0.88rem' }}>
+            Ask For Vendor Referrals
+          </Link>
         </div>
 
       </div>

src/components/TestimonialsSection.tsx

@@ -17,7 +17,7 @@ const testimonials: Testimonial[] = [
     name: 'Titus & Alayna M.',
     role: 'Bride & Groom',
     celebration: 'Tuscan Wedding Arch',
-    quote: 'Jackie brought our dream wedding to life. The Tuscan yellow arch paired with the white floral balloon clouds took everyone’s breath away. Her faith, care, and attention to every balloon placement was extraordinary!',
+    quote: 'The Wise Hearted team brought our dream wedding to life. The Tuscan yellow arch paired with the white floral balloon clouds took everyone’s breath away. Their care, artistry, and attention to detail was extraordinary!',
     rating: 5,
     highlight: 'Pure perfection & photo-ready',
   },
@@ -25,7 +25,7 @@ const testimonials: Testimonial[] = [
     name: 'Emelda G.',
     role: 'Birthday Celebrant',
     celebration: '50th Milestone Gala',
-    quote: 'The black marble backdrop with the gold chrome and crimson organic garland was the centerpiece of the entire night. My guests could not stop taking photos! Jackie handled setup and teardown flawlessly.',
+    quote: 'The black marble backdrop with the gold chrome and crimson organic garland was the centerpiece of the entire night. My guests could not stop taking photos! The team handled setup and teardown flawlessly.',
     rating: 5,
     highlight: 'Show-stopping centerpiece',
   },
@@ -33,15 +33,15 @@ const testimonials: Testimonial[] = [
     name: 'Jessica R.',
     role: 'Mom & Host',
     celebration: 'Berry Sweet Baby Shower',
-    quote: 'From the moment I contacted Jackie, she understood the vision for my baby shower. The custom triple arch with strawberry and blueberry motifs was sweeter than anything on Pinterest!',
+    quote: 'From the moment I contacted the Wise Hearted team, they understood my vision for my baby shower. The custom triple arch with strawberry and blueberry motifs was sweeter than anything on Pinterest!',
     rating: 5,
     highlight: 'Better than Pinterest',
   },
   {
     name: 'Marcus & Danielle S.',
     role: 'Parents',
-    celebration: 'Class of 2026 Graduation Gala',
-    quote: 'The tropical vibrant neon balloon arch and palm leaf styling gave our celebration so much life and energy. Jackie is professional, on time, and an absolute joy to work with.',
+    celebration: 'Graduation Celebration',
+    quote: 'The tropical vibrant neon balloon arch and palm leaf styling gave our celebration so much life and energy. The crew was professional, punctual, and an absolute pleasure to work with.',
     rating: 5,
     highlight: 'Unmatched energy & joy',
   },
@@ -52,10 +52,10 @@ export default function TestimonialsSection() {
     <section
       id="reviews"
       style={{
-        padding: 'clamp(60px, 10vw, 100px) 0',
-        backgroundColor: '#000000',
+        padding: 'clamp(60px, 10vw, 90px) 0',
+        backgroundColor: '#FFFFFF',
         position: 'relative',
-        borderBottom: '1px solid var(--border-gold)',
+        borderBottom: '1px solid #E5E7EB',
       }}
     >
       <div className="container" style={{ maxWidth: '1180px' }}>
@@ -65,7 +65,7 @@ export default function TestimonialsSection() {
             style={{
               fontSize: '0.85rem',
               fontWeight: 800,
-              color: 'var(--color-pink-light)',
+              color: 'var(--color-gold-dark)',
               letterSpacing: '0.15em',
               textTransform: 'uppercase',
               display: 'inline-flex',
@@ -74,23 +74,24 @@ export default function TestimonialsSection() {
               marginBottom: '10px',
             }}
           >
-            <Sparkles size={14} color="var(--color-pink-light)" />
+            <Sparkles size={14} />
             <span>Client Love &amp; Trust</span>
-            <Sparkles size={14} color="var(--color-pink-light)" />
+            <Sparkles size={14} />
           </span>
           <h2
             style={{
               fontSize: 'clamp(2rem, 3.8vw, 2.8rem)',
               fontWeight: 800,
+              color: 'var(--text-dark)',
               marginBottom: '16px',
             }}
           >
-            Memories Crafted with <span className="gold-gradient-text">Heart &amp; Faith</span>
+            Memories Crafted with <span className="gold-gradient-text">Heart &amp; Care</span>
           </h2>
           <p
             style={{
               fontSize: '1.05rem',
-              color: '#94A3B8',
+              color: '#4B5563',
               maxWidth: '680px',
               margin: '0 auto',
               lineHeight: 1.6,
@@ -111,57 +112,66 @@ export default function TestimonialsSection() {
           {testimonials.map((t, idx) => (
             <div
               key={idx}
-              className="glass-panel"
               style={{
+                background: '#FAF8F5',
+                borderRadius: '18px',
                 padding: '28px 22px',
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'space-between',
-                border: '1px solid rgba(212, 175, 55, 0.25)',
-                borderRadius: '18px',
-                transition: 'transform 0.3s ease, border-color 0.3s ease',
+                border: '1.5px solid rgba(197, 160, 89, 0.25)',
+                boxShadow: '0 4px 16px rgba(0, 0, 0, 0.03)',
               }}
             >
               <div>
-                {/* Rating Stars */}
-                <div style={{ display: 'flex', gap: '3px', marginBottom: '14px' }}>
+                {/* 5-Star Row */}
+                <div style={{ display: 'flex', gap: '4px', marginBottom: '14px' }}>
                   {[...Array(t.rating)].map((_, sIdx) => (
-                    <Star key={sIdx} size={16} fill="var(--color-gold)" color="var(--color-gold)" />
+                    <Star
+                      key={sIdx}
+                      size={16}
+                      fill="var(--color-gold)"
+                      color="var(--color-gold)"
+                    />
                   ))}
                 </div>
 
-                {/* Highlight Tag */}
-                <span
+                <div
                   style={{
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: '4px',
-                    fontSize: '0.75rem',
-                    fontWeight: 700,
-                    color: 'var(--color-pink-light)',
-                    background: 'rgba(224, 0, 111, 0.15)',
+                    fontSize: '0.74rem',
+                    fontWeight: 800,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.08em',
+                    color: 'var(--color-gold-dark)',
+                    marginBottom: '10px',
+                    background: 'rgba(197, 160, 89, 0.12)',
+                    display: 'inline-block',
                     padding: '3px 8px',
                     borderRadius: '6px',
-                    marginBottom: '12px',
                   }}
                 >
-                  <Heart size={11} fill="var(--color-pink-light)" />
-                  <span>{t.highlight}</span>
-                </span>
+                  {t.highlight}
+                </div>
 
-                {/* Quote */}
-                <p style={{ fontSize: '0.92rem', color: '#E2E8F0', lineHeight: 1.65, fontStyle: 'italic', marginBottom: '20px' }}>
+                <p
+                  style={{
+                    fontSize: '0.94rem',
+                    color: '#374151',
+                    lineHeight: 1.6,
+                    fontStyle: 'italic',
+                    marginBottom: '20px',
+                  }}
+                >
                   &ldquo;{t.quote}&rdquo;
                 </p>
               </div>
 
-              {/* Author Footer */}
-              <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: '14px' }}>
-                <div style={{ fontSize: '0.96rem', fontWeight: 800, color: 'var(--color-gold-light)' }}>
+              <div style={{ borderTop: '1px solid #E5E7EB', paddingTop: '14px' }}>
+                <div style={{ fontWeight: 800, fontSize: '0.96rem', color: 'var(--text-dark)' }}>
                   {t.name}
                 </div>
-                <div style={{ fontSize: '0.8rem', color: '#94A3B8' }}>
-                  {t.role} • <span style={{ color: '#CBD5E1' }}>{t.celebration}</span>
+                <div style={{ fontSize: '0.78rem', color: '#6B7280' }}>
+                  {t.role} • <span style={{ color: 'var(--color-gold-dark)' }}>{t.celebration}</span>
                 </div>
               </div>
             </div>