A conference page with a day-tabbed agenda, speaker grid, sponsor tiers, and venue map — the format that handles genuine complexity without becoming a wall.
The most content-heavy page in the set. Its whole job is making three days of programming feel navigable rather than exhausting.
The day tabs are the mechanism — one day visible at a time instead of a hundred-row table.
Notes
Ask for the agenda data as a separate JSON array at the top of the file. It makes updating sessions a five-second edit rather than a hunt through markup — and summit agendas change constantly.
Sponsor tiers are usually contractual. Get the tier structure right before generating, since resizing logos afterwards is fiddly.
The prompt
Create a landing page for [SUMMIT NAME], a [NUMBER]-day summit hosted by [YOUR ORGANISATION] on [DATES] at [VENUE, CITY], for approximately [NUMBER] attendees.
Sections:
1. A confident hero: summit name, tagline, dates, city. A background image or a restrained abstract treatment — no particle effects.
2. A one-paragraph summary of what the summit is and who it's for.
3. A stat strip: [X] speakers, [Y] sessions, [Z] countries, or similar. Only if I give you numbers.
4. THE AGENDA — the centrepiece. Tabs across the top, one per day. Selecting a tab swaps the agenda below it without a page reload. Each session row: time, title, room, speaker names, and a one-line description. Sessions expand on click for the full description.
5. Speakers: a grid of portrait cards. Click a card to open a panel with the full bio and their sessions. Do not put full bios inline — it destroys the grid.
6. Venue: photograph, address, an embedded map image placeholder, and a floor plan placeholder if there are multiple rooms.
7. Sponsors, in visible tiers — larger logos for higher tiers, clearly grouped and labelled.
8. Travel: hotels with booking codes, airports, ground transport.
9. FAQ, six to eight entries.
10. Footer with contact email placeholder.
On mobile: the day tabs become a horizontally scrollable row, and the agenda becomes a single column. Do not hide agenda content behind an accordion on mobile — attendees plan their day on their phone.
Design direction: [bold and contemporary / editorial / technical and precise]. Strong typographic hierarchy. Two colours maximum plus greyscale. The agenda must be genuinely scannable — comfortable row height, clear time column, no dense tables.
Motion: sections fade and rise on entry; the tab swap cross-fades. Keep it quick — 200ms. A summit page should feel efficient, not cinematic.
Two requirements that govern how this page will be used:
FIRST — this page will be embedded inside a Gatsby event page, which supplies its own RSVP frame on top of it. So:
- Do NOT include any RSVP button, register button, ticket link, "reserve your spot" call to action, or registration form. Gatsby provides all of that.
- Do NOT include a contact form, a newsletter signup, or an email capture of any kind.
- Do NOT include a sticky header or floating action button that could collide with the RSVP frame overlaid on top.
- Leave roughly 120px of clear vertical space at the very bottom of the page so the Gatsby RSVP frame has somewhere to sit without covering content.
If a section feels like it needs a call to action, end it with a line of text instead — the Gatsby frame is the button.
SECOND — publish it to a public URL that requires no login, no password, and no invitation. I need to open it in a fresh incognito window and see the whole page with no wall of any kind, because it has to load inside an iframe.
Do not enable any preview password, access gate, or authentication. If your platform sets a Content-Security-Policy with `frame-ancestors 'none'`, remove it or change it to `frame-ancestors 'self' https://gatsby.events` — otherwise the page will refuse to load inside Gatsby.
Build requirements:
- Fully responsive, designed mobile-first. Most guests open event pages on a phone.
- No horizontal scrolling at any width from 320px up.
- Real, specific placeholder copy throughout — never lorem ipsum. I need to see how actual text sits in the layout.
- Descriptive alt text on every image.
- Keep it fast. Avoid heavy video backgrounds and multi-megabyte hero images; this loads inside another page.
- Respect prefers-reduced-motion for any animation.
