Implement user hero design: real HTML copy, cropped visual, app icon in header

Ariver

2026-06-06 19832fd5cf823a45b29e5dc8ec8370c8c9e9c292

 docs/index-en.html

@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TagLauncher — Tag-based Mac app launcher</title>
  <meta name="description" content="TagLauncher organizes Mac apps with tags: scrollable grid, multi-tag apps, searchable notes, JSON layout backup—beyond Launchpad folders and pages.">
  <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/hero-shot-grid.jpg">
  <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/hero-visual.jpg">
  <link rel="stylesheet" href="styles.css">
  <link rel="alternate" hreflang="en" href="index-en.html">
  <link rel="alternate" hreflang="zh-Hans" href="index.html">
@@ -33,33 +33,19 @@
  <section class="hero" aria-label="TagLauncher hero">
    <div class="layout hero__split">
      <div class="hero__copy">
        <h1 class="hero__headline">Possibly the best Mac app launcher—anywhere</h1>
        <p class="hero__lead">Don't mourn Launchpad on macOS 26 Tahoe. It was never great—and it still isn't.</p>
        <h1 class="hero__headline">Possibly the best Mac app launcher—in the world</h1>
        <p class="hero__lead">Don't mourn Launchpad on macOS 26 Tahoe. It was never truly good—it was only barely usable.</p>
      </div>

      <div class="hero__visual">
        <div class="hero__stack">
          <div class="hero-stack-layer hero-stack-layer--far" aria-hidden="true">
            <div class="hero-stack-layer__chrome"><span></span><span></span><span></span></div>
            <div class="hero-stack-layer__body"></div>
          </div>
          <div class="hero-stack-layer hero-stack-layer--near" aria-hidden="true">
            <div class="hero-stack-layer__chrome"><span></span><span></span><span></span></div>
            <div class="hero-stack-layer__body"></div>
          </div>
          <figure class="hero-window">
            <div class="hero-window__chrome">
              <span></span><span></span><span></span>
            </div>
            <div class="hero-window__screen">
              <img src="assets/hero-shot-grid.jpg" alt="TagLauncher App Grid" width="1600" height="1040" fetchpriority="high" decoding="async">
            </div>
            <div class="hero-window__reflection" aria-hidden="true">
              <img src="assets/hero-shot-grid.jpg" alt="" width="1600" height="1040">
            </div>
          </figure>
        </div>
      </div>
      <figure class="hero__visual">
        <img
          src="assets/hero-visual.jpg"
          alt="TagLauncher App Grid with colorful tags"
          width="553"
          height="619"
          fetchpriority="high"
          decoding="async">
      </figure>
    </div>
  </section>