Home
Mobile: View design
Desktop: View design
Last modified with commit 508b812 on
by Sara Deric.
Primary landing page layout featuring hero section with brand showcase and modular content areas. Supports three hero variants (product slider, image cards, or tertiary hero) with flexible content modules below for experiences, features, and social proof.
Components
| Name | Description | Mode |
|---|---|---|
| Header | The Header component provides site navigation and branding. Shows brand logo, website switcher dropdown, main navigation menu with dropdown submenus, optional CTA button, and responsive mobile hamburger menu. Main navigation supports up to 2 levels of navigation (main items + one level of submenus/dropdowns). | global |
| Product Hero Slider Hero option 1 - Used for Collegium/Mondial homepages | The Product Hero Slider displays a rotating carousel of hero images or content at the top of product pages. Features navigation controls and automatic progression through slides. | fixed |
| Image Cards Hero Hero option 2 - Used for Cooltura homepage | The Image Cards Hero component displays large image-based cards in a hero section. Features prominent images with overlaid text and call-to-action elements. | fixed |
| Tertiary Hero Hero option 3 - Used for Cooltura homepage | The Tertiary Hero component displays a simplified hero section for tertiary or detail pages. Features minimal design with heading and breadcrumb navigation. | fixed |
| current-experiences-and-events | module | |
| Current Experiences and Events B | The Current Experiences and Events component displays a curated list or grid of ongoing and upcoming experiences and events. Shows key information like dates, titles, and brief descriptions with links to detailed pages. | module |
| Image and Text | The Image and Text component combines image content with structured text content. It displays optional kicker, headline, body paragraph, optional button and optional bulleted list with icons. Images can be static or animated sequences. | module |
| Image Cards | The Image Cards component displays a grid of image-based cards with section title and optional description at the top. Each card contains an image, title, and arrow button. <br>The designer needs to ensure that the background of the image in that area supports sufficient contrast so that text can be overlaid on the image. | module |
| Icon Boxes | The Icon Boxes component displays a grid of numbered icon-based process steps. Shows the booking flow steps (choose, upgrade, pay, enjoy) with optional CTA button. | module |
| Social Media Cards | The Social Media Cards component displays embedded social media posts or links to social media profiles. Shows cards with social media platform branding, content previews, and links to full posts. | module |
| Logos | The Logos component displays a grid or row of partner, sponsor, or certification logos. Shows brand logos with optional links to partner websites. | module |
| Footer | Multi-column footer section with site branding, navigation links, support information, and related site logos. Adapts across different brand sites (Collegium, Mondial, Collegium CRO, Cooltura) and responsive breakpoints. | global |