The only page here optimised for repeat visits rather than first impressions. Nobody needs persuading — they need to know what time the bus leaves.
Ruthlessly practical, which makes it a genuinely different design problem.
Notes
The "at a glance" block is what makes this work. Everything else is scrolled past after day one.
Checkbox state won't persist across visits without local storage — ask for that explicitly if you want it.
The prompt
Create a landing page for [OFFSITE NAME], a [NUMBER]-day team offsite for [YOUR ORGANISATION], [DATES] at [LOCATION].
The audience is our own team. Nobody needs convincing — this is a reference document they'll open repeatedly on a phone. Optimise for finding a specific fact in five seconds.
Sections:
1. A warm but brief hero: offsite name, dates, location, and one photograph of the destination. Two lines of copy maximum.
2. AT A GLANCE — a compact block at the very top with the four things people look up constantly: arrival time and place, departure time, the wifi placeholder, and the emergency contact placeholder. Make this scannable and put it above everything else.
3. Day-by-day schedule. Each day a clear heading; each item a time, a title, a location, and a one-line note. Include meals and free time — people plan around those.
4. Travel: how to get there, whether transport is arranged, parking, and what to do if a flight is delayed.
5. Accommodation: hotel name, address, check-in and check-out, and how rooms are assigned.
6. What to bring — a genuine checklist with checkboxes, covering weather, dress code per session, and anything activity-specific.
7. A map image placeholder showing the venue and the hotel relative to each other.
8. FAQ: dietary requirements, partners and family, expenses, and what happens if someone can't make a session.
9. Footer with the organiser's name and contact placeholder.
Design direction: friendly and clear. Sans-serif throughout. Colour used functionally — a distinct accent per day so the schedule is navigable at a glance. Comfortable spacing, generous tap targets.
Prioritise legibility over atmosphere. This gets opened one-handed in an airport.
On mobile, the day schedule should collapse to one day at a time with quick day-switching at the top.
Motion: none beyond a simple fade on load. This is a utility.
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.
