Landing Pages with widget layouts

[choldgraf]

Landing pages serve a different purpose than most other documentation pages, and thus they have a different structure than the content-heavy structure that makes up most MyST sites.

For example, they tend to be more UI-heavy, and have elements like Hero boxes, splash pages, etc. They also often get rid of the left/right sidebars so that users focus on the content and don't get distracted.

A good example of this is the MySTMD landing page itself, which has this "blockier" and UI-heavy structure:

Suggestion

• We document a workflow for landing pages using the building blocks that are already there (e.g. grids, cards, etc) to show off some best practices.
• We create a list of UI components to develop that add different landing page-like functionality (e.g. hero cards, sliding galleries, etc)

Then we could use this as the tracking issue around a "landing page" use-case and chip away at the problem with a combination of new development + documentation.

Implement with tailwind components?

The Tailwind component library might be the easiest way to enable this in a flexible-enough manner. Could we build a small library of directives that basically turn themselves into Tailwind components?

For example the hero component of tailwind looks like this:

And is enabled with the following HTML.

      <div class="hidden sm:mb-8 sm:flex sm:justify-center">
        <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
          Announcing our next round of funding. <a href="#" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
        </div>
      </div>
      <div class="text-center">
        <h1 class="text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">Data to enrich your online business</h1>
        <p class="mt-8 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
        <div class="mt-10 flex items-center justify-center gap-x-6">
          <a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
          <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
        </div>
      </div>

It feels like all or part of this could be generated with MyST directives, then we could show users how to create their own landing pages with recipes of directives and/or raw HTML.

You could imagine a directive structure like

```{hero} Hero title
---
button-primary:
    text: My text
    link: https://google.com
button-secondary:
    text: My text
    link: https://google.com
image: link-to-image.png
---
```

and so on (or, the "body" of the directive could be a YAML or TOML configuration for it, and you could thus configure it similar to the Hugo Blox builder

Alternative implementation: Load Tailwind classes on demand with raw HTML on the page

Another option would be to just focus on enabling Tailwind class detection + loading at build time for raw HTML so that users could just build the raw HTML themselves.

• Load tailwind CSS classes when they are used within directives and page content mystmd#1617

Then users should be able to copy/paste arbitrary HTML blocks.

Inspiration

• The HugoBlocks content blocks section describes many UI elements that make up landing pages.
• The mystmd.org landing page has similar content