Speaking Landing Page Design and Structure

[madrilene]

Summary

Design the /speaking landing page. The design should highlight upcoming talks, facilitate spreaking requests, and showcase selected past talks.

Description

The speaking landing page will be segmented into several sections:

1. Upcoming Talks:

   • Display cards for up to three forthcoming talks.
   • Each card should link to the respective conference page if applicable.

2. Call to Action:

   • Feature a prominent CTA for "Want me to speak at your event?".
   • Determine where the CTA links to.

3. Highlighted Past Talks:

   • Showcase a selection of three past presentations.
   • Include cards with accessible slide decks or playable video content.
   • TBD: Define criteria for selecting featured talks.

4. Archive Access:

   • Implement a "See More" button to direct users to an archive of all presentations. that’s a P2 feature

Tasks

• Design layout and interface for the speaking landing page.
• Determine the workflow and UI components for upcoming talks and past presentations.

Discussion Points

• Do conferences like FOSDEM2024 get their own route? If yes, do they get Conference-specific routes like /fosdem-2023, /fosdem-2024 or one route for all years /fosdem?
• How to deal with “duplicate” talks across different conferences - only cover image and conference relationship changes. For example https://speaking.unlockopen.com/rfBLQk/does-open-source-need-its-own-priority-of-constituencies, https://speaking.unlockopen.com/rfBLQk/does-open-source-need-its-own-priority-of-constituencies. show all?
• How to setup the CTA (where does it lead in MVP?)
• Selection for featured past talks - since the relationships between conference and presentation are likely set by a front matter key we could use it here either. TBD: is there a readable and short ID provided by notist we can use as key?
• How to access all past conferences (meaning: archive only accessible through "view all talks" button?)
• Important: How do videos fit into that? sometimes there is only a video OR a slide, sometimes there is both. How does this reflect on the OG images? And if the video really is a presentation (in terms of post type), does it make sense to use another color (also in the OGP images), or should the OGP image just reflect the nature of the presentation? meaning: show a video OG image if there is a vide available. but do not change color (stay in tangerine theme)
• There was the idea to store all conferences in Eleventy directly, just like the articles.
• Just like for article OG images, I need a dedicated square image I can import in the OG image template for presentations and videos (and conferences?). Where do we store it?

Assets

[madrilene]

Design idea for that: https://www.figma.com/design/CIXElK1qmSorPlNk0UPRWr/Unlock-Open-Style-Guide?node-id=835-1578&t=HFRwXS3UG8dcEy9D-0