hero.html

{{ with site.Home.Params.hero }}
<section class="hero">
  <div class="container hero-inner">
    <div class="hero-grid">
      <div>
        <div class="hero-eyebrow">
          <span class="dot"></span>
          {{ .eyebrow }}
        </div>
        <h1>{{ .headline_pre }}<em>{{ .headline_em }}</em>{{ .headline_post }}</h1>
        <div class="hero-lead">{{ .lead | markdownify }}</div>
        <div class="hero-cta">
          <a class="btn btn-primary btn-lg" href="{{ "/guides/install/" | relURL }}">
            <i data-lucide="download" width="16" height="16" aria-hidden="true"></i>
            Install mdsmith
          </a>
          <a class="btn btn-secondary btn-lg" href="{{ "/guides/" | relURL }}">
            <i data-lucide="book-open" width="16" height="16" aria-hidden="true"></i>
            Read the docs
          </a>
          <a class="btn btn-ghost btn-lg btn-mono" href="https://github.com/{{ $.Site.Params.githubRepo }}" rel="noopener">
            {{ partial "github-mark.html" (dict "size" 16) }}
            {{ $.Site.Params.githubRepo }}
          </a>
        </div>
        {{- /* markdownlint users are the highest-intent audience;
               lead with the one-command config conversion and a
               direct path to the migration guide instead of
               leaving it buried in the docs tree. */ -}}
        <p class="hero-switch">
          Coming from markdownlint?
          <code>mdsmith init --from-markdownlint</code> converts your config —
          <a href="{{ "/guides/migrate-from-markdownlint/" | relURL }}">follow the migration guide</a>.
        </p>
        {{- $repo := $.Site.Params.githubRepo -}}
        <div class="hero-badges" aria-label="Live project health">
          <a href="https://github.com/{{ $repo }}/actions/workflows/ci.yml?query=branch%3Amain" rel="noopener">
            <img src="https://github.com/{{ $repo }}/actions/workflows/ci.yml/badge.svg?branch=main"
                 alt="CI build status on main" height="20" loading="lazy">
          </a>
          <a href="https://goreportcard.com/report/github.com/{{ $repo }}" rel="noopener">
            <img src="https://goreportcard.com/badge/github.com/{{ $repo }}"
                 alt="Go Report Card grade" height="20" loading="lazy">
          </a>
          <a href="https://codecov.io/gh/{{ $repo }}/branch/main" rel="noopener">
            <img src="https://codecov.io/gh/{{ $repo }}/branch/main/graph/badge.svg"
                 alt="Codecov coverage on main" height="20" loading="lazy">
          </a>
          <a href="https://github.com/{{ $repo }}/blob/main/LICENSE" rel="noopener">
            <img src="https://img.shields.io/badge/license-MIT-blue.svg"
                 alt="MIT license" height="20" loading="lazy">
          </a>
        </div>
      </div>
      <div>
        <figure class="hero-demo">
          <div class="hero-demo-bar">
            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
            <span class="hero-demo-title">mdsmith — check &amp; fix</span>
          </div>
          {{- /* The GIF is recorded from demo.tape and published
                 to the orphan `assets` branch by demo.yml on push
                 to main. The pages-deploy workflow pulls it into
                 website/static/img/ at build time (mdsmith-release
                 pull-site-assets), so it ships as a first-party
                 site asset instead of a runtime
                 raw.githubusercontent hotlink. */ -}}
          <img class="hero-demo-img"
               src="{{ "img/demo.gif" | relURL }}"
               width="960" height="540" loading="lazy"
               alt="Terminal recording: mdsmith check flags issues, then mdsmith fix auto-resolves them.">
        </figure>
      </div>
    </div>
  </div>
</section>
{{ end }}