From 5860ef62267f89cfa93ab991be8f9dd52a0ce4f8 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 20 Mar 2026 18:49:28 +0000 Subject: [PATCH 1/2] Update src/app/page.tsx --- src/app/page.tsx | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 74a8106..ed2c288 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -11,8 +11,23 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne'; import ContactCTA from '@/components/sections/contact/ContactCTA'; import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; import { Zap, Layers, Sparkles, CheckCircle, Target, DollarSign, Rocket, Users } from "lucide-react"; +import { useState } from "react"; +import ContactFormModal from '@/components/modals/ContactFormModal'; export default function LandingPage() { + const [isModalOpen, setIsModalOpen] = useState(false); + const [selectedPlan, setSelectedPlan] = useState(null); + + const openModal = (planName: string) => { + setSelectedPlan(planName); + setIsModalOpen(true); + }; + + const closeModal = () => { + setIsModalOpen(false); + setSelectedPlan(null); + }; + return ( openModal("Starter Plan") }], features: ["4-6 ad variations", "Multiple hooks and angles", "Primary ad text and headlines", "Correct ad sizes and formats", "Ready to upload"] }, { id: "professional", badge: "Most Popular", badgeIcon: Zap, - price: "$350/mo", subtitle: "Comprehensive creative support", buttons: [{ text: "Get Started", href: "/about" }], + price: "$350/mo", subtitle: "Comprehensive creative support", buttons: [{ text: "Request Growth Plan", onClick: () => openModal("Growth Plan") }], features: ["8-12 ad variations", "Diverse visual angles", "Copy testing variations", "Multiple formats and sizes", "Platform-optimized specs", "Priority support"] }, { id: "enterprise", badge: "For Scaling Brands", badgeIcon: Rocket, - price: "$500/mo", subtitle: "Maximum creative output and strategy", buttons: [{ text: "Get Started", href: "/enterprise" }], + price: "$500/mo", subtitle: "Maximum creative output and strategy", buttons: [{ text: "Request Premium Plan", onClick: () => openModal("Premium Plan") }], features: ["15+ ad variations monthly", "A/B testing frameworks", "Video and static assets", "Campaign-specific creative", " Creative tailored to your offer and audience", "Dedicated creative support", "Structured revision rounds included "] } ]} @@ -225,6 +240,13 @@ export default function LandingPage() { rightLink={{ text: "Terms of Service", href: "#" }} /> + + {isModalOpen && ( + + )} ); -} +} \ No newline at end of file -- 2.49.1 From d0034d783f5d3566224f34619a7368b9418f4885 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 20 Mar 2026 18:49:28 +0000 Subject: [PATCH 2/2] Add src/components/modals/ContactFormModal.tsx --- src/components/modals/ContactFormModal.tsx | 232 +++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 src/components/modals/ContactFormModal.tsx diff --git a/src/components/modals/ContactFormModal.tsx b/src/components/modals/ContactFormModal.tsx new file mode 100644 index 0000000..cc18af3 --- /dev/null +++ b/src/components/modals/ContactFormModal.tsx @@ -0,0 +1,232 @@ +"use client" + +import { useState } from 'react'; +import { X } from 'lucide-react'; + +interface ContactFormModalProps { + planName: string | null; + onClose: () => void; +} + +export default function ContactFormModal({ planName, onClose }: ContactFormModalProps) { + const [formData, setFormData] = useState({ + fullName: '', + businessName: '', + email: '', + websiteOrInstagram: '', + businessGoal: '', + projectDetails: '' + }); + + const [isSubmitting, setIsSubmitting] = useState(false); + const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle'); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + setSubmitStatus('idle'); + + try { + const payload = { + ...formData, + selectedPlan: planName, + timestamp: new Date().toISOString() + }; + + // Send to your backend or email service + const response = await fetch('/api/contact-form', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(payload), + }); + + if (response.ok) { + setSubmitStatus('success'); + setFormData({ + fullName: '', + businessName: '', + email: '', + websiteOrInstagram: '', + businessGoal: '', + projectDetails: '' + }); + setTimeout(() => { + onClose(); + }, 2000); + } else { + setSubmitStatus('error'); + } + } catch (error) { + console.error('Form submission error:', error); + setSubmitStatus('error'); + } finally { + setIsSubmitting(false); + } + }; + + const getModalTitle = () => { + if (planName === 'Starter Plan') return 'Starter Plan Inquiry'; + if (planName === 'Growth Plan') return 'Growth Plan Inquiry'; + if (planName === 'Premium Plan') return 'Premium Plan Inquiry'; + return 'Contact Us'; + }; + + return ( +
+
+ {/* Header */} +
+

+ {getModalTitle()} +

+ +
+ + {/* Content */} +
+ {submitStatus === 'success' ? ( +
+
✓
+

+ Thank you! +

+

+ Your {planName} inquiry has been received. We'll be in touch within 24 hours. +

+
+ ) : ( +
+ {/* Full Name */} +
+ + +
+ + {/* Business Name */} +
+ + +
+ + {/* Email Address */} +
+ + +
+ + {/* Instagram or Website Link */} +
+ + +
+ + {/* Business Goal */} +
+ + +
+ + {/* Project Details */} +
+ +