Expanded landing page macros

[alexandrascript]

The new landing page designs for Workbox are terrific, and I'd like to use those macros for Privacy Sandbox! However, we've got some additional needs around ordering and style that weren't captured in the Figma process.

I've worked out some possible examples in https://github.com/GoogleChrome/developer.chrome.com/pull/3233

Tl;dr No one comes to the Privacy Sandbox docs to see everything. How can we make this a more pleasant and organized to their needs experience?

I'm hoping to achieve:

1. High-level, use case based navigation. The Privacy Sandbox navigation is unique among dcc doc sets, as a reader will most likely care about some sets of docs and completely disregard the rest. There is a set of introductory material (including a glossary and FAQs), and the rest of the materials are grouped by use case
   • Strengthen cross-site privacy boundaries
   • Show relevant content and ads,
   • Measure digital ads
   • Prevent covert tracking
   • Fight spam and fraud on the web

This matches the expectations of privacysandbox.com, which is a point of entry for many of our users. These use cases will soon have expanded documentation which gives more context (go/k-visions).

Specific design module needs

1. Introducing use cases. It would be useful, after the introduction materials, to list the use cases. Ideally, this module would not take too much visual real estate, but would serve to point users towards the list of relevant materials. This could be carried through iconography as jump links.
2. “Learn more” about the headlines. I'm writing up documentation about the use cases, the history and Privacy Sandbox proposals, which should have high prominence in a section.
3. Highlighting a short list of important docs in a larger list. Some APIs have a longer list of documentation, such as Attribution Reporting. It would be useful to highlight the top-most important content, which is relevant to all of our docs visitors (technical practitioners who implement the APIS, as well as leadership and regulators). But, we also want to make it easy for technical practitioners to skip what they already know (overview materials) and get right to the advanced materials. In the context of current design modules:
4. Single use case with multiple ordered sets. For example, the “Show relevant content use case” has two active, in-progress API proposals with several docs: Topics and FLEDGE. Both have multiple docs which should be read in order. And while these could be there own boxes of content, they both fit with the same use case.

[alexandrascript]

@devnook I'm going to book some time to chat with you about this!

[alexandrascript]

@devnook @rachelandrew I've expanded on our design needs, and hope the detail brings some clarity.

[mollietokyo]

Estimate - 2.5 days (design)

We are not currently able to estimate the dev time needed due to a dev required to review full designs once completed, discuss with Ewa & digest scope.

[tokyodanj]

Design approved - included additional request by Alexandra to reduce height of hero block component.

Ready to reassign for development @mollietokyo