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 Header from '@/components/Header';
|
||||
import Hero from '@/components/Hero';
|
||||
import QuickQuotePartyForm from '@/components/QuickQuotePartyForm';
|
||||
import PortfolioGallery from '@/components/PortfolioGallery';
|
||||
import MoodBoardEstimator from '@/components/MoodBoardEstimator';
|
||||
import PillarsSection from '@/components/PillarsSection';
|
||||
@@ -33,6 +34,7 @@ export default function Home() {
|
||||
<GoldSparkles />
|
||||
<Header />
|
||||
<Hero />
|
||||
<QuickQuotePartyForm />
|
||||
<PortfolioGallery />
|
||||
<MoodBoardEstimator />
|
||||
<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