Best for
Event organizers, venue owners, and experience brands who need an elegant, high-converting landing page for a specific event or event series.
Stack
A ready-made Luminary Events Landing Page UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the Luminary Events Landing Pagetemplate does, how it's wired, and where it's opinionated.
Luminary Events is a single-page event landing template that covers the full visitor journey from first impression to ticket purchase. The Hero Section leads with a large background image or gradient overlay behind the event name, date, venue, and a prominent CTA button — exactly the hierarchy event attendees expect when they land on a page. Below it, Event Highlights cards summarize the experience (venue, entertainment, catering, atmosphere), followed by a Schedule or Timeline section that lists the day's activities in time order. A Speaker or Featured Guests grid then gives visitors social proof through faces and names, and the Ticket Section presents Early Bird, General, and VIP tier cards with price and benefits. A Venue Map or Location card closes the page with address and directions.
On the technical side, Framer Motion handles two standout effects: a parallax scroll on the hero background that gives depth to the opening impression, and staggered card entrances as the visitor scrolls through Event Highlights and the Speakers grid. These are scroll-triggered whileInView animations — they look polished without requiring the builder to write animation code from scratch. shadcn/ui Card, Button, and Badge primitives underpin the ticket tier cards and event feature components, giving the template a consistent component vocabulary.
The honest caveat: the template ships with static data — event name, date, ticket prices, speaker names — hardcoded directly into the component files. There is no CMS or admin panel; every content update means either re-prompting v0 or editing the code directly. It also has no built-in payment integration, so while the Ticket Section looks complete, the CTA buttons are placeholder links until you wire up Stripe Checkout. For a single, fixed-date event this is fine — but if you run recurring events or need a content editor for non-technical organizers, you will outgrow the template quickly.
Key UI components
Hero SectionLarge background image or gradient with event name, date, venue, and primary ticket/registration CTA
Event Highlights3-4 feature cards showcasing key aspects: venue, entertainment, catering, and overall experience
Schedule / TimelineTime-ordered session or activity list for the event day
Speakers / Featured GuestsAvatar + name + title card grid for keynote speakers or performers
Ticket / Pricing SectionTier cards (Early Bird, General, VIP) with price, included benefits, and CTA buttons
Venue Map / Location SectionEmbedded map or address card with a directions link
Navigation BarSticky top nav with organization logo and primary ticket CTA
Libraries it leans on
framer-motionParallax effect on hero background and staggered card entrance animations on scroll
shadcn/uiCard, Button, and Badge primitives used for ticket tier cards and event feature components
lucide-reactIcons for event feature cards and navigation elements
Fork it and get it running
Forking Luminary Events takes about 5 minutes in a browser — no local setup, no npm install, no terminal. Follow these steps to go from community template to a live event page on your own domain.
Open the template and fork it
Go to https://v0.dev/chat/community/BUa9hJmxXtd in your browser. You will see the Luminary Events template with a live preview. Click the blue 'Fork' button in the top-right corner of the community page to copy it into a new V0 Project under your account. V0 will prompt you to sign in if you aren't already — a free account is enough to fork.
Tip: Forking creates an independent copy: changes you make do not affect the original community template.
You should see: A new V0 Project opens with the Luminary Events template loaded in the editor and a Vercel Sandbox live preview visible on the right.
Verify the preview renders correctly
In the Vercel Sandbox preview pane, scroll through the full page. Confirm the Hero Section, Event Highlights, Schedule / Timeline, Speaker grid, Ticket Section, and Venue Map all render with the elegant design aesthetic. If any section shows a blank area or a loading spinner that never resolves, try clicking the refresh icon on the preview pane — the sandbox occasionally needs a cold-start moment.
You should see: All sections are visible with placeholder event data, placeholder speaker avatars, and the Framer Motion parallax hero animation running.
Add environment variables you plan to use
Click the 'Vars' panel in the left sidebar to open the environment variables drawer. If you plan to replace the static venue map with a live Google Maps embed, add NEXT_PUBLIC_GOOGLE_MAPS_KEY here. If you are wiring up Stripe ticket payments, add STRIPE_SECRET_KEY (server-only — no NEXT_PUBLIC_ prefix) and NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY. You can skip this step now and come back to it before deployment.
Tip: Server-only keys (STRIPE_SECRET_KEY, SUPABASE_SERVICE_ROLE_KEY) must never have the NEXT_PUBLIC_ prefix — they must stay out of the client bundle.
You should see: The Vars panel shows your added keys. The preview does not change yet — env vars take effect at runtime or after deployment.
Update event copy in Design Mode
Press Option+D (Mac) or Alt+D (Windows) to open Design Mode — this lets you click directly on any text element in the preview and edit it without consuming v0 credits. Update the hero headline to your event name, the date and venue text, ticket tier names and prices, and the speaker names. For color theme changes (hero gradient, accent color on CTA buttons), use a prompt in the chat instead of Design Mode.
Tip: Design Mode edits are free — use it for all copy changes before spending credits on structural prompts.
You should see: Your event name, date, venue, and ticket prices appear in the live preview immediately as you type.
Publish to a live URL
Click the Share icon (top-right of the V0 editor) → Publish tab → 'Publish to Production'. V0 builds and deploys the page to a vercel.app subdomain in about 30 seconds. Copy the live URL from the Publish panel and open it in a new tab to confirm the page looks correct on a real browser — not just the V0 sandbox preview.
You should see: Your event landing page is live at a vercel.app URL and accessible to anyone you share it with.
Connect a custom domain
Go to https://vercel.com/dashboard, find the project V0 created, and open the Settings → Domains tab. Click 'Add Domain', type your custom domain (e.g., events.yourdomain.com), and follow the instructions to add a CNAME DNS record at your domain registrar pointing to cname.vercel-dns.com. DNS propagation typically takes 5–30 minutes. Once verified, Vercel auto-provisions an SSL certificate.
Tip: Use a subdomain like events.yourdomain.com rather than the root domain if you already have a main website — it avoids DNS conflicts.
You should see: Your event landing page is accessible at events.yourdomain.com with a valid HTTPS certificate.
The prompt pack
Copy-paste these straight into v0's chat to customize the Luminary Events Landing Pagetemplate. Each one names this template's own components — no generic filler.
Update event details and visual theme
Replaces all placeholder event copy and the hero gradient with your real event's branding in one pass. Leaves the Framer Motion parallax and staggered card animations untouched.
Update the Luminary Events landing page for [EVENT_NAME]: set the hero headline to [EVENT_NAME], the date/time to [DATE] at [TIME], the venue to [VENUE_NAME], and the hero background to a dark gradient from [COLOR_1] to [COLOR_2]. Update the Navigation logo to [ORG_NAME]. Replace the primary CTA button label in the Hero Section with 'Get Tickets' and the secondary CTA with 'Learn More'. In the Ticket Section, update the three tier names to [TIER_1], [TIER_2], [TIER_3] with prices [PRICE_1], [PRICE_2], [PRICE_3]. Keep all layout, Framer Motion animations, and shadcn/ui component structure intact.
Replace static venue map with Google Maps embed
Swaps the placeholder location card for a real interactive map embed, giving attendees immediate venue context and a one-tap directions link.
Replace the static venue location card in the Venue Map / Location Section with an embedded Google Maps iframe for the address [VENUE_ADDRESS]. Use the Google Maps Embed API URL format: https://www.google.com/maps/embed/v1/place?key=NEXT_PUBLIC_GOOGLE_MAPS_KEY&q=[ENCODED_ADDRESS]. Wrap the iframe in a rounded-xl overflow-hidden container matching the existing card styling and aspect-video proportions. Add a 'Get Directions' button below the map using shadcn Button variant='outline', linking to https://maps.google.com/?q=[ENCODED_ADDRESS] in a new tab.
Add Stripe ticket checkout for all ticket tiers
Turns the Ticket Section's placeholder CTA buttons into live Stripe Checkout flows, one per tier, with proper server-side key separation.
Connect the Ticket Section CTA buttons to Stripe Checkout Sessions. Create a Next.js route handler at app/api/tickets/route.ts using the stripe Node.js SDK with STRIPE_SECRET_KEY (server-only, no NEXT_PUBLIC_ prefix). Map each ticket tier (Early Bird, General, VIP) to its Stripe Price ID stored as server-only env vars: STRIPE_PRICE_EARLY_BIRD, STRIPE_PRICE_GENERAL, STRIPE_PRICE_VIP. On button click, POST the selected tier name to the route handler, create a Checkout Session with mode: 'payment', success_url pointing to /tickets/success, and cancel_url pointing back to the landing page. Redirect to the Checkout URL. Use NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY on the client to call loadStripe and redirect to checkout.
Add sold-out waitlist for ticket tiers
Adds a non-blocking waitlist capture for sold-out tiers so you never lose a conversion, storing entries in Supabase with zero UI disruption.
Add a waitlist flow for sold-out ticket tiers in the Ticket Section. Show a shadcn Badge with text 'Sold Out' on the relevant ticket card and replace its CTA button with a 'Join Waitlist' shadcn Button variant='outline'. Clicking it opens a shadcn Dialog with a Name field (shadcn Input) and Email field (shadcn Input). On submit, call a Next.js Server Action that validates the inputs with zod and inserts the entry into a Supabase table event_waitlist with columns: id (uuid primary key default gen_random_uuid()), event_id (text), tier (text), name (text), email (text), created_at (timestamptz default now()). Use SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY as server-only env vars with @supabase/supabase-js createClient. Show a confirmation message inside the Dialog on success without closing or reloading the page.
Add real-time ticket availability counters
Makes ticket availability update live for every visitor — no page refresh needed — and automatically switches the UI to sold-out state when inventory is exhausted.
Add a real-time ticket availability counter to each Ticket Section card showing '[X] tickets remaining'. Store ticket inventory in a Supabase table ticket_inventory with columns: id (uuid), tier (text unique), total (int), sold (int). Enable RLS with a SELECT policy allowing anon reads. Create a 'use client' component TicketCounter that initializes from a Supabase query and then subscribes to real-time changes using supabase.channel('ticket_inventory').on('postgres_changes', ...).subscribe() via @supabase/supabase-js createClient with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Set up the subscription inside a useEffect hook and clean it up in the return function with supabase.removeChannel(). When sold equals total, automatically render the 'Sold Out' badge and swap the CTA button to 'Join Waitlist'. Display the remaining count as a shadcn Badge on each Ticket Section card.Add speaker grid with Supabase data source
Moves speaker data out of hardcoded component files into a Supabase table that any team member can update from the Supabase Table Editor, with ISR cache refresh every hour.
Replace the static speaker data in the Speakers / Featured Guests grid with data fetched from a Supabase table event_speakers (id uuid, name text, title text, company text, talk_title text, avatar_url text, sort_order int). Create an async Next.js Server Component that queries the table ordered by sort_order using @supabase/supabase-js createClient with SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY (both server-only). Add the speaker avatar CDN hostname to next.config.js remotePatterns. Render each speaker using the existing shadcn Card layout with a Next.js Image component for the avatar (width=96 height=96, rounded-full). Add revalidate: 3600 to the fetch so speaker data refreshes hourly without a full rebuild.
Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
Error: Invalid src prop on `next/image`, hostname not configuredWhy: The Hero Section uses a large background image from an external URL (a stock photo CDN or your own image host). Next.js blocks external domains not listed in next.config.js remotePatterns, throwing a build-time error when the project is deployed.
Fix: Add the image CDN hostname to the remotePatterns array in next.config.js: `{ protocol: 'https', hostname: 'your-cdn.com' }`. Alternatively, download the hero image to the public/ folder and reference it as a local path like /hero.jpg — this also avoids the domain restriction entirely.
Move the hero background image to public/hero.jpg and update the Hero Section to use /hero.jpg as the src prop. Add a CSS gradient fallback on the hero container in case the image fails to load. Remove the external CDN URL reference.
Stripe webhook signature verification failedWhy: If you add a Stripe webhook handler to process ticket purchase confirmations, the route uses request.json() which parses the raw body before Stripe can verify the HMAC signature — making constructEvent throw every time.
Fix: Change the webhook route at app/api/webhooks/stripe/route.ts to use `const body = await request.text()` before passing the raw string to `stripe.webhooks.constructEvent(body, signature, STRIPE_WEBHOOK_SECRET)`.
Fix the Stripe webhook route at app/api/webhooks/stripe/route.ts: replace request.json() with request.text() so the raw body is preserved before calling stripe.webhooks.constructEvent. Do not parse the body as JSON anywhere before the constructEvent call.
Supabase real-time channel causes `window is not defined` during SSRWhy: Setting up a Supabase real-time channel (supabase.channel()) at the module level or inside a Server Component tries to access WebSocket APIs that only exist in the browser, crashing the Next.js SSR render with a ReferenceError.
Fix: Move the real-time subscription setup inside a useEffect hook in a Client Component tagged with 'use client'. Initialize the channel after mount and clean it up with supabase.removeChannel() in the effect's return function.
Move the Supabase real-time channel subscription for ticket_inventory into a useEffect hook inside a 'use client' component. Initialize the channel after mount and call supabase.removeChannel(channel) in the useEffect cleanup return function so subscriptions don't leak on unmount.
Google Maps API key abused — NEXT_PUBLIC_GOOGLE_MAPS_KEY unrestrictedWhy: The Maps embed key must have the NEXT_PUBLIC_ prefix to appear in the browser iframe URL — but without domain restriction, anyone who views page source can extract the key and use it on their own domains, running up your Google Cloud bill.
Fix: Before adding NEXT_PUBLIC_GOOGLE_MAPS_KEY to V0's Vars panel or Vercel, go to Google Cloud Console → Credentials → restrict the key to HTTP referrers matching your deployed domain (e.g., events.yourdomain.com/*). An unrestricted key should never be deployed to production.
Framer Motion parallax animation causes layout shift (CLS) on mobile SafariWhy: The hero parallax effect translates the background image on scroll using a y motion value. On iOS Safari, translateY on a large background image triggers layout recalculations if the image size isn't explicitly constrained, showing up as a CLS score hit in Core Web Vitals.
Fix: Use opacity and transform-only animations with `will-change-transform` class on the hero container. Ensure the hero background image has explicit dimensions and use `object-cover` so the image never changes the container's block size during the parallax movement.
Review the Hero Section's Framer Motion parallax animation and ensure it only animates translateY on a child element inside a fixed-height overflow-hidden container. Add the Tailwind class will-change-transform to the animated element. The hero container height must not change during scroll.
Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- You are organizing a single, fixed-date event and need a public-facing page live today
- Your ticket tiers are simple (Early Bird / General / VIP) and Stripe Checkout handles the full payment flow
- You don't need attendee profiles, QR ticket generation, or post-event content access
- You want to validate the event concept and collect early ticket interest before committing to a full platform
Go custom when
- You run a recurring event series and need a CMS so non-technical staff can manage multiple events from one dashboard
- You require QR code ticket generation and a mobile attendee check-in app at the door
- You need a private attendee portal with session personalization, networking features, or post-event recordings
- Your event has sponsors requiring ad placement dashboards, lead retrieval integrations, or co-branded pages
RapidDev transforms V0 event landing pages into full ticketing platforms — Stripe checkout, Supabase attendee database, email confirmations, and check-in tooling built to your event's exact needs.
Frequently asked questions
Is the Luminary Events template free to use?
Yes. All templates in the v0.dev community gallery are free to fork and use. Forking requires a free v0.dev account. There are no licensing fees for the template itself — costs only arise from v0 credits if you use the AI chat to customize it, and from Vercel hosting (which has a generous free tier for personal projects).
Can I use this template commercially — for a paid event or a client project?
Yes. v0.dev community templates are released for unrestricted use including commercial projects. You can fork Luminary Events, replace the branding, wire up Stripe for paid tickets, and use it for client work or your own paid events. Check the specific license note on the template's community page for confirmation, but commercial use is the default expectation for v0 community templates.
Why does my fork break in the V0 preview but work after deployment?
The V0 Vercel Sandbox preview runs code in an esm.sh-based environment that has limitations compared to a real Next.js runtime. Common causes of preview-only breakage include: Supabase real-time channel setup outside a useEffect (crashes with 'window is not defined' during SSR), external image URLs blocked by Next.js remotePatterns (shows broken image icons), and Google Maps iframes that need a real domain for the API key restriction to resolve. Deploy to Vercel and test on the live URL if the preview shows issues that seem environment-specific.
How do I add real ticket purchasing to the Ticket Section?
Use the Stripe Checkout prompt from the Prompt Pack above. You will need a Stripe account, a product with Early Bird / General / VIP price IDs created in the Stripe Dashboard, and three server-only env vars added to V0's Vars panel: STRIPE_SECRET_KEY, STRIPE_PRICE_EARLY_BIRD, and STRIPE_PRICE_GENERAL / STRIPE_PRICE_VIP. The prompt creates a route handler at app/api/tickets/route.ts that creates a Checkout Session per tier. No Stripe code touches the browser directly — all secret key usage is server-side.
How do I add a working map to the Venue Section?
Use the Google Maps embed prompt from the Prompt Pack. You need a Google Maps Embed API key from Google Cloud Console — create one, restrict it to your deployed domain (e.g., events.yourdomain.com), and add it as NEXT_PUBLIC_GOOGLE_MAPS_KEY in the V0 Vars panel. The prompt replaces the static location card with an iframe embed and a 'Get Directions' button. Never deploy an unrestricted Maps API key — restrict it by domain in Google Cloud Console first.
How do I update the speaker photos to real headshots?
If the speaker photos are hosted on an external CDN, add the CDN hostname to next.config.js remotePatterns so Next.js Image doesn't block them. The safest approach is to download the headshots and place them in the public/images/speakers/ folder, then reference them with local paths like /images/speakers/jane-doe.jpg — no remotePatterns changes needed and the images are served from Vercel's CDN automatically.
Can RapidDev customize this template for my event?
Yes. RapidDev specializes in taking V0 event landing page prototypes to production — adding Stripe ticketing, Supabase attendee databases, email confirmation flows, and custom domain setup so your event page is fully operational in days, not weeks.
Does this template support multiple events or is it single-event only?
The template is designed for a single event — all content (event name, date, schedule, ticket prices) is hardcoded in the component files. It does not include a CMS, database-driven event list, or multi-event routing. If you run a recurring event series and need one site to manage multiple events, you will need to extend the template with a Supabase events table and dynamic routing, or consider a custom build.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.