web_huangguo2_h5/app/template/pages/about.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{.metaTitle}}</title>
  {{template "seoCommon" .}}
  <link rel="stylesheet" href="/static/css/base.css">
  <link rel="stylesheet" href="/static/css/about.css?v=1">
  <link rel="stylesheet" href="/static/css/about-mobile.css?v=1">
</head>
<body class="about-page">
  {{template "header" .}}
  <header class="page-subheader only-h5" aria-label="关于我们页顶栏">
    <a class="page-subheader__btn" href="/" aria-label="返回首页"><img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-left.svg" alt="返回"></a>
    <div class="page-subheader__title">关于我们</div>
    <span class="page-subheader__btn" aria-hidden="true"></span>
  </header>
  <main class="about-main">
    <section class="about-intro" aria-labelledby="about-title">
      <div class="about-intro__heading">
        <p class="about-kicker"><span class="about-kicker__bar" aria-hidden="true"></span>关于我们</p>
        <h1 class="about-intro__title" id="about-title">不是所有短剧，都能被称作作品。</h1>
        <p class="about-intro__subtitle">黄果短剧，因为专业，所以领先。</p>
      </div>
      <div class="about-story">
        <div class="about-story__copy">
          <p class="about-story__paragraph">别人拼命追赶风口，我们定义创造标准。每一支作品都经过精心制作，分镜反复推敲，为一句台词的语气重新生成十次，字幕与剪辑的表情调整到满意为止。这就是我们的匠人精神，也是黄果品质唯一的定义。</p>
          <p class="about-story__paragraph about-story__paragraph--desktop">我们用 AI 帮助提升作品的品质，把不可能的画面化为可能。题材多元，都会、悬疑、古装、奇幻同步推进；每日更新，精彩不断。短剧与影集双轨并行，仿真与动画齐发。我们只做一件事：把每一支作品，做到值得被记得。</p>
          <p class="about-story__paragraph about-story__paragraph--mobile">我们用 AI 帮助提升作品的品质，把不可能的画面化为可能。题材多元，每日更新，短剧与影集双轨并行，仿真与动画齐发。我们只做一件事：把每一支作品，做到值得被记得。</p>
          <p class="about-story__slogan">黄果一开，全射出来，每一帧都能解你的色。</p>
          <div class="about-story__tags" aria-label="黄果特色">
            <span class="about-story__tag">短剧与影集双轨并行</span>
            <span class="about-story__tag">仿真与动画齐发</span>
            <span class="about-story__tag">AI 协力制作</span>
            <span class="about-story__tag">每日更新</span>
          </div>
        </div>
        <div class="about-story__visual"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/about/about-hero.png" alt="黄果短剧作品画面拼贴"></div>
      </div>
    </section>
    <section class="about-features" aria-labelledby="about-features-title">
      <div class="about-features__heading">
        <h2 class="about-features__title" id="about-features-title">把最好看的留给你</h2>
        <span class="about-features__subtitle">黄果特色</span>
      </div>
      <div class="about-features__grid">
        <article class="about-feature">
          <strong class="about-feature__number">01</strong>
          <div class="about-feature__copy">
            <h3 class="about-feature__title">多元齐全</h3>
            <p class="about-feature__description">多元的题材、海量的短剧与影集，我们把最好看的留给你。</p>
          </div>
        </article>
        <article class="about-feature">
          <strong class="about-feature__number">02</strong>
          <div class="about-feature__copy">
            <h3 class="about-feature__title">天天上新</h3>
            <p class="about-feature__description">持续更新的内容节奏，每天打开都有新惊喜，追剧永不断档。</p>
          </div>
        </article>
        <article class="about-feature">
          <strong class="about-feature__number">03</strong>
          <div class="about-feature__copy">
            <h3 class="about-feature__title">沉浸体验</h3>
            <p class="about-feature__description">高清画质、震撼音效，每个动作、每个画面，全心投入剧情。</p>
          </div>
        </article>
      </div>
    </section>
    <section class="about-app" aria-labelledby="about-app-title">
      <div class="about-app__card">
        <div class="about-app__copy">
          <p class="about-app__kicker"><span class="about-kicker__bar" aria-hidden="true"></span>黄果短剧 App</p>
          <h2 class="about-app__title" id="about-app-title">把黄果装进口袋，随时随地追剧</h2>
          <p class="about-app__desc-desktop">iOS / Android 双端&nbsp; 竖屏沉浸播放&nbsp; 离线缓存随时看</p>
          <p class="about-app__desc-mobile">竖屏沉浸播放&nbsp; 离线缓存&nbsp; 弹幕互动</p>
          <p class="about-app__note-desktop">手机扫码会自动识别设备并推荐安装方式&nbsp; iOS 商店版 / iOS 轻量版 / Android 版</p>
        </div>
        <div class="about-app__qr"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/app-qr.png" alt="下载黄果短剧 App 二维码"></div>
        {{$appAddr := .appConfig.AppAddr}}
        <div class="about-app__actions">
          <a class="about-app__button is-primary" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}>
            <img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/brand-apple.svg" alt="Apple"><span class="about-app__button-label-desktop">iOS 商店版</span><span class="about-app__button-label-mobile">下载 iOS 商店版</span><span class="about-app__recommendation">推荐</span>
          </a>
          <a class="about-app__button" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/brand-apple.svg" alt="Apple">iOS 轻量版</a>
          <a class="about-app__button about-app__button--android" href="{{if $appAddr}}{{$appAddr}}{{else}}/download-app{{end}}"{{if $appAddr}} target="_blank" rel="sponsored nofollow noopener"{{end}}><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/brand-android.svg" alt="Android">Android 版</a>
        </div>
        <p class="about-app__note-mobile">已识别为 iOS 设备：推荐商店版前往 App Store，也可选轻量版用 Safari 安装描述文件</p>
      </div>
    </section>
  </main>
  {{template "footer" .}}
</body>
</html>