Add 3D promo hero asset and refresh landing page visuals

Ariver

2026-06-06 c3afc017401957609edbec3fcea3bead1d7d06e7

Add 3D promo hero asset and refresh landing page visuals

 docs/assets/app-icon.png

 docs/assets/taglauncher-hero-3d-16x9.jpg

 docs/assets/taglauncher-hero-3d-alt-16x9.jpg

 docs/assets/taglauncher-hero-3d-promo-16x9.jpg

 docs/assets/taglauncher-hero-3d-promo-2880x1800.jpg

 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/screenshot-app-grid.jpg">
  <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/taglauncher-hero-3d-promo-2880x1800.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">
@@ -50,17 +50,15 @@
        </div>
      </div>

      <div class="hero-visual" aria-hidden="true">
        <div class="icon-float">
          <img src="assets/app-icon-256.png" width="112" height="112" alt="TagLauncher app icon">
        </div>
        <figure class="device-shot shot-back">
          <img src="assets/screenshot-app-grid.jpg" alt="" loading="lazy">
        </figure>
        <figure class="device-shot shot-front">
          <img src="assets/screenshot-notes.jpg" alt="" loading="lazy">
        </figure>
      </div>
      <figure class="hero-promo-3d" aria-hidden="true">
        <img
          src="assets/taglauncher-hero-3d-promo-2880x1800.jpg"
          alt=""
          width="2880"
          height="1800"
          loading="eager"
          decoding="async">
      </figure>
    </section>

    <section class="showcase">

 docs/index.html

@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TagLauncher — 标签化 Mac 应用启动器</title>
  <meta name="description" content="TagLauncher：用标签管理 Mac 应用，可滚动网格、多标签归类、应用备忘、布局备份。比 Launchpad 更适合应用很多的用户。">
  <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/screenshot-app-grid.jpg">
  <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/taglauncher-hero-3d-promo-2880x1800.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">
@@ -50,17 +50,15 @@
        </div>
      </div>

      <div class="hero-visual" aria-hidden="true">
        <div class="icon-float">
          <img src="assets/app-icon-256.png" width="112" height="112" alt="TagLauncher 图标">
        </div>
        <figure class="device-shot shot-back">
          <img src="assets/screenshot-app-grid.jpg" alt="" loading="lazy">
        </figure>
        <figure class="device-shot shot-front">
          <img src="assets/screenshot-notes.jpg" alt="" loading="lazy">
        </figure>
      </div>
      <figure class="hero-promo-3d" aria-hidden="true">
        <img
          src="assets/taglauncher-hero-3d-promo-2880x1800.jpg"
          alt=""
          width="2880"
          height="1800"
          loading="eager"
          decoding="async">
      </figure>
    </section>

    <section class="showcase">

 docs/styles.css

@@ -211,6 +211,28 @@
  text-decoration: none;
}

.hero-promo-3d {
  margin: 0;
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: #0a0b12;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.45s ease;
}

.hero-promo-3d:hover {
  transform: perspective(1200px) rotateY(-1deg) rotateX(0deg);
}

.hero-promo-3d img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.hero-visual {
  position: relative;
  min-height: 380px;