For twelve people around one table. The page exists to convey that this is small, considered, and worth an evening — which a long page actively undermines.
Everything fits above the fold on a laptop. On a phone it's one short scroll.
Notes
Naming guests on a public page is the mistake to avoid — the URL is shareable and guests haven't consented to being listed.
If you need an agenda, this is the wrong template. Use the Speaker Series or Private Forum page instead.
The prompt
Create a landing page for an intimate dinner hosted by [YOUR FIRM] on [DATE] at [RESTAURANT OR VENUE, CITY], for approximately [NUMBER] guests.
This must be SHORT. One screen on a laptop, one brief scroll on a phone. If a section isn't essential, leave it out.
Content:
1. A full-bleed hero photograph of the venue or a dish, with the event framing overlaid in restrained type: host firm, "Dinner", the date.
2. Two or three sentences on the evening. Not an agenda — a sense of the occasion and who will be there. Do not name individual guests.
3. The essentials as a compact block: date, arrival time, venue name, address, dress code.
4. A short note on the food — the chef, the restaurant's character, or a menu direction. One paragraph, not a menu.
5. A single quiet line about who to contact with questions, with an email placeholder.
Do not include: an agenda, a speaker list, a sponsor section, an FAQ, or a map. This is a dinner.
Design direction: [warm and candlelit / crisp and modern / classic and understated]. Photography carries the page — type stays out of the way. A single serif for the few headings. Muted palette drawn from the photograph itself.
Restraint signals exclusivity. A page with six sections says conference; a page with four elements says table for twelve.
The one motion: a slow, subtle scale on the hero image as the page loads — 8 seconds, barely perceptible. Nothing else moves.
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.
