diff --git a/src/app/page.tsx b/src/app/page.tsx index 1c2a700..2c5f144 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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() {
+ diff --git a/src/components/QuickQuotePartyForm.tsx b/src/components/QuickQuotePartyForm.tsx new file mode 100644 index 0000000..8b1aa7f --- /dev/null +++ b/src/components/QuickQuotePartyForm.tsx @@ -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 ( +
+
+
+ {submitted ? ( +
+
🎉
+

+ Thank You, {formData.name || 'Friend'}! +

+

+ We received your request for {formData.eventType} in {formData.location}. Jackie will reach out to you at {formData.phone} within 24 hours with custom design ideas and availability! +

+ +
+ ) : ( +
+ {/* Header / Trust Ribbon */} +
+
+
+ + + Need to Plan a Party? Reach Out to Us + +
+

+ Request a Free Quote From Jackie +

+
+ + {/* Trust Badges */} +
+ + ✓ Bespoke Styling + + + ✓ Full Setup & Teardown + + + ✓ Zero Obligation + +
+
+ + {/* Fast Input Form */} +
+ {/* Row 1: 4 Main Parameters */} +
+ {/* 1. Celebration Select */} +
+ + +
+ + {/* 2. City Select */} +
+ + +
+ + {/* 3. Name */} +
+ + 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', + }} + /> +
+ + {/* 4. Phone */} +
+ + 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', + }} + /> +
+
+ + {/* Row 2: Vision / Details & Big Submit Button */} +
+
+
+ 💬 + +
+ 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', + }} + /> +
+ +
+ +
+
+
+
+ )} +
+
+
+ ); +}