--- title: "Landing page" description: "The home page of orcwg.org, part by part. A hero, a ticker of topics, sections that each make one point, live data, the members and the latest news, then a shared call to action." canonical_url: "http://localhost:3000/recipes/landing-page" --- # Landing page > The home page of orcwg.org, part by part. A hero, a ticker of topics, sections that each make one point, live data, the members and the latest news, then a shared call to action. The home page (`content/index.md`) is the site's landing page: a large `hero`, then full-width sections, each making one point, and the "Collaborate with us" call to action shared with other pages. Use this shape for any page that introduces a topic to newcomers: a group, a programme, an event series. ## The outline The page spans the window (`width: full`), without breadcrumbs, and without the featured story above the footer, since a shared call to action closes it: ```yaml --- title: Open Regulatory Compliance Working Group breadcrumbs: hidden featuredFooter: hidden width: full --- ``` Then its blocks, one after the other at the top level: 1. `hero` (plain): the promise and two buttons. 2. `ticker`: the topics, scrolling. 3. `page-section` with a split title: why the group exists, a filled card and a card. 4. `page-section` on the `tint` background: who is involved, three cards and a watermark word. 5. `page-section`: what the group delivers, live data counted in the title. 6. `page-section` on the `aqua` background: the courses, two cards. 7. `page-section`: the members, the latest news and events. 8. `content-fragment`: the shared "Collaborate with us" call to action, on the dark `band`. Sections alternate their backgrounds (white, `tint`, white, `aqua`, white, then the `band`), so they read apart without lines between them. The examples below are the sections, one by one. ## The hero A plain `hero` opens the page: it spans the window above the breadcrumbs, under the transparent header. Its `#eyebrow` is the page heading, its `#title` the promise, with a few words in the brand colour (an inline `typography`). The main action is a `secondary` button with an arrow after its label, the second one is `outlined`. ```mdc ::hero{variant="plain"} Key stakeholders from industry and open source communities are collaborating to support compliance with government regulations. #eyebrow Open Regulatory Compliance Working Group #title Leading regulatory compliance for :typography[open source]{color="primary"} #actions :::button-link{href="/participate/" color="secondary" icon="lucide:arrow-right" icon-position="after"} Get involved ::: :::button-link{href="/about/" outlined} Learn more ::: :: ``` ## The topics A `ticker` right below the hero lists what the group works on, as a band of words scrolling across the page. Its content is a Markdown list, a few words per item. ```mdc ::ticker - Regulatory compliance - Cybersecurity processes - Open source community collaboration - Cyber Resilience Act - SBOMs - Vulnerability handling - Secure by design :: ``` ## Why: a split section The first section says why the group exists. `title-align="split"` puts the title on the left and the intro on the right, its `#actions` below the intro. The content is a `grid`: a `column` spans two of its three columns with a `filled` card, and an ordinary card takes the third. Small `translucent` cards fit on the filled one. ```mdc ::page-section{title-style="heading" title-align="split"} :::grid{spacing-top="large"} ::::column{span="2"} :::::card{variant="filled"} ::::::typography{variant="overline"} Who is at the table :::::: ### Industry and community, in one room. ::::::grid{columns="3" spacing-top="medium" gap="small"} :::::::card{variant="translucent" padding="small"} **Industry** ::::::: :::::::card{variant="translucent" padding="small"} **Open source foundations** ::::::: :::::::card{variant="translucent" padding="small"} **Maintainers** ::::::: :::::: ::::: :::: ::::card{icon="lucide:landmark"} ### Working with legislators We collect and share input in legislative and standardisation processes so requirements stay workable for open source. :::: ::: #eyebrow Why we exist #title New regulations will :typography[significantly impact]{color="primary"} open source communities. #intro The working group brings together industry, small and medium enterprises, research institutions, open source foundations, maintainers and contributors. #actions :::button-link{href="https://www.eclipse.org/collaborations/working-groups/open-regulatory-compliance/charter/" icon="lucide:arrow-right" icon-position="after" outlined} Read the charter ::: :: ``` ## Who: a tinted section with a watermark Three cards in a `grid` (three columns by default), each with an icon. The `tint` background and the outlined word of `#decoration` behind the title make the section a pause between the white ones; the word is decoration, hidden from screen readers. ```mdc ::page-section{title-style="heading" background="tint"} :::grid ::::card{icon="lucide:factory"} ### Manufacturers and software vendors Real-world perspectives on how open source is used across products and supply chains. :::: ::::card{icon="lucide:landmark"} ### Open source stewards and foundations Governance, sustainability and community dynamics. :::: ::::card{icon="lucide:code"} ### Open source developers and maintainers How open source is created, reviewed and improved. :::: ::: #eyebrow Who's involved #title Three voices, one practical direction. #decoration community :: ``` ## What: live data, counted in the title A section can hold live data: here ORC's `deliverables-summary` (the progress of the CRA deliverables), with `deliverables-count` inline in the title, so the numbers stay up to date. A `tertiary` button leads to the full list. See [ORC's own blocks](http://localhost:3000/orc/site-blocks). ```mdc ::page-section{title-style="heading" anchor="deliverables"} :::deliverables-summary ::: #eyebrow What we deliver #title :deliverables-count deliverables on the CRA, :typography[:deliverables-count{status="shipped"} already shipped.]{color="primary"} #actions :::button-link{href="/cra/resources/" icon="lucide:arrow-right" icon-position="after" color="tertiary"} Browse CRA resources ::: :: ``` ## Members, news and events The last section before the call to action shows the community: the members' logos (`members-list`), then the latest news and events side by side, compact, each with a link to its page in `#actions`. The section's `subheading` title is quieter than the others. ```mdc ::page-section{title-style="subheading"} :::members-list{count="6" working-group="orc"} ::: :::grid{columns="2" spacing-top="x-large" gap="large"} ::::newsroom-news-list{count="2" publish-target="orc" variant="compact"} #title Community news #actions :::::text-link{href="/news/" icon="lucide:arrow-right" weight="semibold"} View all news ::::: :::: ::::newsroom-event-list{count="2" publish-target="orc" variant="compact"} #title Events #actions :::::text-link{href="/events/" icon="lucide:arrow-right" weight="semibold"} View all events ::::: :::: ::: #title Working group members #actions :::text-link{href="/membership/" icon="lucide:arrow-right" weight="semibold"} See all members ::: :: ``` ## The call to action The page ends with a shared section, edited once in `content/fragments/` and shown with `content-fragment`: see [Calls to action](http://localhost:3000/recipes/calls-to-action). ```mdc ::content-fragment{name="collaborate-with-us"} :: ``` ## Notes - One point per section: its `#eyebrow` says what it is about, its `#title` makes the point, its content backs it up. - Highlight words of a title with `:typography[…]{color="primary"}`, a few per page: in the hero's title and one or two section titles. - Buttons: `secondary` for the page's main action, `outlined` beside it, `tertiary` on light sections that end with a link to more. See [ORC's looks](http://localhost:3000/orc/looks). - Sections and the blocks inside them follow the [rules](http://localhost:3000/writing-pages/rules): named slots after the content, two spaces of indentation per level. ## Sitemap See the full [sitemap](http://localhost:3000/sitemap.md) for all pages.