Built around one insight: the past-episodes strip does more persuasive work than any copy on the page. Seeing four previous sessions with names attached tells a first-time guest this is real and ongoing.
Duplicate per session and swap the speaker.
Notes
Ask for the past-episodes data as a JSON array at the top. Each new session means adding one entry and duplicating the file.
Do not link past episodes to recordings unless they're genuinely public — the most common accidental leak on series pages.
The prompt
Create a landing page for one session of [SERIES NAME], a recurring [monthly / quarterly] speaker series hosted by [YOUR ORGANISATION]. This session features [SPEAKER NAME, TITLE, ORGANISATION] on [DATE] at [VENUE OR "virtual"].
Sections:
1. A hero built around a large speaker portrait, with the session title, speaker name and title, and the date. The portrait is the hero — treat it properly, not as a small circular avatar.
2. The session: two paragraphs on what will be discussed and why now. Specific, not promotional.
3. The speaker's full bio, three or four sentences, with their organisation and a link.
4. Format and logistics: start time, expected duration, whether there's a Q&A, whether food is served, and location.
5. A PAST EPISODES strip — a horizontally scrollable row of previous sessions, each a small card with the speaker's portrait, name, title, and date. Four to six visible. This is the most important section after the hero: it establishes the series has history.
6. A single line about the series itself and its cadence.
7. Footer with contact email placeholder.
Design direction: [editorial / warm and conversational / crisp and modern]. Portrait photography leads. One accent colour, [#HEX]. Set the series name in a smaller, consistent treatment across every page so sessions read as siblings.
Structure the page so I can duplicate it and change only the speaker, title, date, and description — keep everything session-specific in one clearly commented block at the top of the file.
Motion: the past-episodes strip scrolls smoothly with momentum on touch. Hero fades in on load. Nothing else.
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.
