This popup component for "Eventbrite Boost" with a two-column layout. The left side features marketing copy with a lightning bolt icon, headline about a free trial, and three feature items with timeline indicators. The right side displays an event preview with an image, event details ("Let's get together"), event selection area, and action buttons ("No thanks" and "Start a free 14-day trial"). There's a close button in the top right corner.
"use client"
import { useState } from "react"
import PromotionalPopup from "@/components/ui/promotional-popup"
import { CheckCircle2 } from "lucide-react"
export default function PromotionalPopupDemo() {
const [isOpen, setIsOpen] = useState(true)
const [selectedEvent, setSelectedEvent] = useState(true)
const features = [
{
title: "Reach attendees with engaging email campaigns",
description:
'Promote upcoming events or reach out to say "thanks." We\'ll help you organize contacts and design custom emails',
},
{
title: "Strategize your marketing game plan",
description:
"Schedule social posts or use our recommendations for better audience targeting and the best time to share",
},
{
title: "Leverage event data to inform future goals",
description:
"Get insights on ad returns, email engagement, and ticket sales with our performance reporting tools",
},
]
return (
<div className="min-h-screen w-full bg-slate-100 dark:bg-slate-950 flex items-center justify-center p-4">
{/* Button to open modal */}
<button
onClick={() => setIsOpen(true)}
className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-300"
>
View Promotion
</button>
{/* Promotional Popup */}
<PromotionalPopup
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onConfirm={() => {
console.log("Started free trial")
setIsOpen(false)
}}
onCancel={() => {
console.log("Dismissed promotion")
setIsOpen(false)
}}
title="Get more people to your events with a free trial of Eventbrite Boost"
subtitle="Let's get together"
description="Event hosts who used Boost marketing tools sold 63% more tickets per event*"
features={features}
ctaText="Start a free 14-day trial"
cancelText="No thanks"
rightContent={
<div className="space-y-4">
{/* Event Image */}
<div className="relative rounded-lg overflow-hidden h-48 mb-6">
<img
src="https://images.unsplash.com/photo-1474557157379-8aa74a6ef541?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTM1fHx5b2dhfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=900"
alt="Flow-fi Yoga event"
className="w-full h-full object-cover"
/>
</div>
{/* Event Title */}
<div>
<p className="text-sm font-semibold text-orange-600 mb-1">Saturday, April 1</p>
<h3 className="text-xl font-bold mb-1">Flow-fi Yoga</h3>
<p className="text-sm text-muted-foreground">
We're hosting a new event, and we'd love to see you there. Join us for Flow-fi Yoga on Saturday, April
1.
</p>
<p className="text-xs text-muted-foreground mt-2">Register soon because space is limited.</p>
</div>
{/* Event Selection */}
<div className="bg-muted rounded-lg p-4 mt-6">
<div className="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
checked={selectedEvent}
onChange={(e) => setSelectedEvent(e.target.checked)}
className="w-5 h-5 rounded accent-orange-600"
aria-label="Select Flow-fi Yoga event"
/>
<div className="flex-1 flex items-center gap-3">
<img
src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-PHHSqK920jD9XiKESRiJDrx6Lyg82x.png&w=320&q=75"
alt="Event thumbnail"
className="w-12 h-12 rounded object-cover"
/>
<div>
<p className="text-sm font-semibold">Flow-fi Yoga</p>
<p className="text-xs text-muted-foreground">Saturday, April 1</p>
</div>
{selectedEvent && <CheckCircle2 className="w-5 h-5 text-orange-600 ml-auto flex-shrink-0" />}
</div>
</div>
</div>
</div>
}
/>
</div>
)
}