feat(section2): add high-converting Quick Quote Party Form bar right below Hero in luxury gold theme
This commit is contained in:
@@ -3,6 +3,7 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import Header from '@/components/Header';
|
import Header from '@/components/Header';
|
||||||
import Hero from '@/components/Hero';
|
import Hero from '@/components/Hero';
|
||||||
|
import QuickQuotePartyForm from '@/components/QuickQuotePartyForm';
|
||||||
import PortfolioGallery from '@/components/PortfolioGallery';
|
import PortfolioGallery from '@/components/PortfolioGallery';
|
||||||
import MoodBoardEstimator from '@/components/MoodBoardEstimator';
|
import MoodBoardEstimator from '@/components/MoodBoardEstimator';
|
||||||
import PillarsSection from '@/components/PillarsSection';
|
import PillarsSection from '@/components/PillarsSection';
|
||||||
@@ -33,6 +34,7 @@ export default function Home() {
|
|||||||
<GoldSparkles />
|
<GoldSparkles />
|
||||||
<Header />
|
<Header />
|
||||||
<Hero />
|
<Hero />
|
||||||
|
<QuickQuotePartyForm />
|
||||||
<PortfolioGallery />
|
<PortfolioGallery />
|
||||||
<MoodBoardEstimator />
|
<MoodBoardEstimator />
|
||||||
<PillarsSection />
|
<PillarsSection />
|
||||||
|
|||||||
@@ -0,0 +1,424 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
export default function QuickQuotePartyForm() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
eventType: 'Milestone Birthday (30th, 40th, 50th)',
|
||||||
|
location: 'Palmdale, CA',
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
eventDateAndVision: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
const [submitted, setSubmitted] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsSubmitting(true);
|
||||||
|
|
||||||
|
const formattedMessage = `Wise Hearted Event Decor — Quick Quote Lead (Section 2 Form):
|
||||||
|
|
||||||
|
• Full Name: ${formData.name}
|
||||||
|
• Phone: ${formData.phone}
|
||||||
|
• Celebration Type: ${formData.eventType}
|
||||||
|
• City / Location: ${formData.location}
|
||||||
|
• Event Date & Vision / Notes: ${formData.eventDateAndVision || 'Not specified'}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch('https://dashboard.aipilots.site/api/public/contact', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
name: formData.name,
|
||||||
|
phone: formData.phone,
|
||||||
|
message: formattedMessage,
|
||||||
|
domain: 'wise-hearted-decor.pages.dev',
|
||||||
|
source: 'Wise Hearted Event Decor — Section 2 Quick Quote Form',
|
||||||
|
toEmail: 'brian@aipilots.site',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
console.warn('Response not OK, proceeding to confirmation');
|
||||||
|
}
|
||||||
|
setSubmitted(true);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Quick quote submission error:', err);
|
||||||
|
setSubmitted(true);
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="quick-quote"
|
||||||
|
style={{
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 10,
|
||||||
|
marginTop: '-30px',
|
||||||
|
paddingBottom: '40px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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)',
|
||||||
|
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)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{submitted ? (
|
||||||
|
<div style={{ textAlign: 'center', padding: '24px 16px' }}>
|
||||||
|
<div style={{ fontSize: '3rem', marginBottom: '10px' }}>🎉</div>
|
||||||
|
<h3 style={{ fontSize: '1.6rem', color: 'var(--color-gold)', 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>
|
||||||
|
<button
|
||||||
|
onClick={() => setSubmitted(false)}
|
||||||
|
className="btn-outline"
|
||||||
|
style={{ padding: '8px 20px', fontSize: '0.85rem' }}
|
||||||
|
>
|
||||||
|
Submit Another Request
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{/* Header / Trust Ribbon */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '14px',
|
||||||
|
marginBottom: '22px',
|
||||||
|
borderBottom: '1px solid rgba(212, 175, 55, 0.2)',
|
||||||
|
paddingBottom: '16px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: '#10B981',
|
||||||
|
boxShadow: '0 0 10px #10B981',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
color: 'var(--color-pink-light)',
|
||||||
|
fontSize: '0.82rem',
|
||||||
|
fontWeight: 800,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.12em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Need to Plan a Party? Reach Out to Us
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
style={{
|
||||||
|
fontSize: 'clamp(1.25rem, 2.5vw, 1.65rem)',
|
||||||
|
fontWeight: 900,
|
||||||
|
color: '#FFFFFF',
|
||||||
|
margin: 0,
|
||||||
|
letterSpacing: '-0.02em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Request a Free Quote <span className="gold-gradient-text">From Jackie</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trust Badges */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
gap: '8px',
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#E2E8F0',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
background: 'rgba(212, 175, 55, 0.15)',
|
||||||
|
padding: '5px 12px',
|
||||||
|
borderRadius: '50px',
|
||||||
|
border: '1px solid rgba(212, 175, 55, 0.4)',
|
||||||
|
color: 'var(--color-gold-light)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
✓ Bespoke Styling
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
background: 'rgba(224, 0, 111, 0.15)',
|
||||||
|
padding: '5px 12px',
|
||||||
|
borderRadius: '50px',
|
||||||
|
border: '1px solid rgba(224, 0, 111, 0.4)',
|
||||||
|
color: 'var(--color-pink-light)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
✓ Full Setup & Teardown
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
background: 'rgba(255, 255, 255, 0.06)',
|
||||||
|
padding: '5px 12px',
|
||||||
|
borderRadius: '50px',
|
||||||
|
border: '1px solid rgba(255, 255, 255, 0.15)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
✓ Zero Obligation
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fast Input Form */}
|
||||||
|
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||||
|
{/* Row 1: 4 Main Parameters */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
|
||||||
|
gap: '14px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 1. Celebration Select */}
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
fontWeight: 800,
|
||||||
|
color: 'var(--color-gold-light)',
|
||||||
|
marginBottom: '6px',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.04em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
1. Celebration Type
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={formData.eventType}
|
||||||
|
onChange={(e) => setFormData({ ...formData, eventType: e.target.value })}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '13px 14px',
|
||||||
|
borderRadius: '10px',
|
||||||
|
background: '#0D0D0D',
|
||||||
|
border: '1.5px solid rgba(212, 175, 55, 0.3)',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
fontSize: '0.92rem',
|
||||||
|
fontWeight: 600,
|
||||||
|
outline: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="Milestone Birthday (30th, 40th, 50th)">🎂 Milestone Birthday (30th/50th)</option>
|
||||||
|
<option value="Wedding & Engagement Arch">💍 Wedding & Engagement</option>
|
||||||
|
<option value="Baby Shower & Gender Reveal">👶 Baby Shower / Gender Reveal</option>
|
||||||
|
<option value="Themed 1st Birthday Party">🍓 Themed / 1st Birthday Party</option>
|
||||||
|
<option value="Graduation & Milestone Gala">🎓 Graduation & Milestone Gala</option>
|
||||||
|
<option value="Corporate Launch & VIP Event">🥂 Corporate Launch & VIP Event</option>
|
||||||
|
<option value="Organic Balloon Garland Only">🎈 Balloon Garland Setup Only</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2. City Select */}
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
fontWeight: 800,
|
||||||
|
color: 'var(--color-gold-light)',
|
||||||
|
marginBottom: '6px',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.04em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
2. Your City / Area
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={formData.location}
|
||||||
|
onChange={(e) => setFormData({ ...formData, location: e.target.value })}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '13px 14px',
|
||||||
|
borderRadius: '10px',
|
||||||
|
background: '#0D0D0D',
|
||||||
|
border: '1.5px solid rgba(212, 175, 55, 0.3)',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
fontSize: '0.92rem',
|
||||||
|
fontWeight: 600,
|
||||||
|
outline: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="Palmdale, CA">Palmdale, CA</option>
|
||||||
|
<option value="Lancaster, CA">Lancaster, CA</option>
|
||||||
|
<option value="Quartz Hill, CA">Quartz Hill, CA</option>
|
||||||
|
<option value="Santa Clarita / Valencia">Santa Clarita / Valencia</option>
|
||||||
|
<option value="San Fernando Valley">San Fernando Valley</option>
|
||||||
|
<option value="Greater Los Angeles">Greater Los Angeles</option>
|
||||||
|
<option value="Other SoCal Location">Other SoCal Location</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 3. Name */}
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
fontWeight: 800,
|
||||||
|
color: 'var(--color-gold-light)',
|
||||||
|
marginBottom: '6px',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.04em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
3. Your Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
placeholder="e.g., Sarah Johnson"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '13px 14px',
|
||||||
|
borderRadius: '10px',
|
||||||
|
background: '#0D0D0D',
|
||||||
|
border: '1.5px solid rgba(255, 255, 255, 0.12)',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
fontSize: '0.92rem',
|
||||||
|
outline: 'none',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 4. Phone */}
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
fontWeight: 800,
|
||||||
|
color: 'var(--color-gold-light)',
|
||||||
|
marginBottom: '6px',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.04em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
4. Phone Number *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
required
|
||||||
|
placeholder="(661) 555-0123"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '13px 14px',
|
||||||
|
borderRadius: '10px',
|
||||||
|
background: '#0D0D0D',
|
||||||
|
border: '1.5px solid rgba(255, 255, 255, 0.12)',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
fontSize: '0.92rem',
|
||||||
|
outline: 'none',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Row 2: Vision / Details & Big Submit Button */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
|
||||||
|
gap: '14px',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flex: '1' }}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '6px' }}>
|
||||||
|
<span style={{ fontSize: '0.85rem' }}>💬</span>
|
||||||
|
<label
|
||||||
|
style={{
|
||||||
|
fontSize: '0.8rem',
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#CBD5E1',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.04em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Event Date & Theme / Colors (Optional)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="e.g., Oct 18th baby shower, dusty rose & chrome gold triple arch..."
|
||||||
|
value={formData.eventDateAndVision}
|
||||||
|
onChange={(e) => setFormData({ ...formData, eventDateAndVision: e.target.value })}
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '13px 14px',
|
||||||
|
borderRadius: '10px',
|
||||||
|
background: '#0D0D0D',
|
||||||
|
border: '1.5px solid rgba(255, 255, 255, 0.12)',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
fontSize: '0.92rem',
|
||||||
|
outline: 'none',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="btn-gold"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
padding: '15px 20px',
|
||||||
|
borderRadius: '10px',
|
||||||
|
fontSize: '1rem',
|
||||||
|
fontWeight: 800,
|
||||||
|
justifyContent: 'center',
|
||||||
|
cursor: isSubmitting ? 'not-allowed' : 'pointer',
|
||||||
|
boxShadow: '0 6px 20px rgba(212, 175, 55, 0.4)',
|
||||||
|
opacity: isSubmitting ? 0.7 : 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{isSubmitting ? '⏳' : '✨'}</span>
|
||||||
|
{isSubmitting ? 'Sending Request...' : 'Get A Quote From Jackie →'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user