projects.html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工程實績 Projects｜冠閤企業 F.I.T</title>
<meta name="description" content="冠閤薄膜結構工程實績：T 系列遮陽膜、M 系列網格膜、S 系列吸音膜。設計、膜結構分析、布膜加工到鋼構施工一手包辦。">
<link rel="icon" href="assets/title.ico" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Sora:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style.css">
</head>
<body data-page="projects">
<div id="site-nav"></div>

<header class="phero">
  <div class="phero__bg" style="background-image:url('assets/banner4.png')"></div>
  <div class="phero__inner wrap">
    <span class="eyebrow">Projects</span>
    <h1 data-zh="工程實績" data-en="Our Projects">工程實績</h1>
    <p data-zh="從設計到完工，遍布各地的薄膜結構作品。" data-en="Membrane structures delivered from design to completion, across the region.">從設計到完工，遍布各地的薄膜結構作品。</p>
    <div class="crumb"><a href="index.html" data-zh="首頁" data-en="Home">首頁</a><span>/</span><span data-zh="工程實績" data-en="Projects">工程實績</span></div>
  </div>
</header>

<!-- process -->
<section class="section">
  <div class="wrap">
    <div class="section__head reveal">
      <span class="eyebrow">How we work</span>
      <h2 data-zh="一手包辦的施工流程" data-en="A fully integrated process">一手包辦的施工流程</h2>
      <p data-zh="由業務整合需求，設計團隊規劃並進行膜結構分析，加工團隊完成膜材，鋼構團隊現場安裝。" data-en="Sales integrate the brief, design plans and runs structural analysis, fabrication produces the membrane, and the steel team installs on site.">由業務整合需求，設計團隊規劃並進行膜結構分析，加工團隊完成膜材，鋼構團隊現場安裝。</p>
    </div>
    <div class="featgrid">
      <div class="fcard glass reveal"><div class="fcard__ic"><strong style="font-family:Sora;font-size:1.2rem">01</strong></div><h3 data-zh="需求整合" data-en="Brief & integration">需求整合</h3><p data-zh="業務部門整合客戶需求與基地條件。" data-en="Sales consolidate client needs and site conditions.">業務部門整合客戶需求與基地條件。</p></div>
      <div class="fcard glass reveal" data-d="1"><div class="fcard__ic"><strong style="font-family:Sora;font-size:1.2rem">02</strong></div><h3 data-zh="設計與分析" data-en="Design & analysis">設計與分析</h3><p data-zh="設計團隊規劃設計圖並進行膜結構分析。" data-en="The design team prepares drawings and structural analysis.">設計團隊規劃設計圖並進行膜結構分析。</p></div>
      <div class="fcard glass reveal" data-d="2"><div class="fcard__ic"><strong style="font-family:Sora;font-size:1.2rem">03</strong></div><h3 data-zh="布膜加工" data-en="Fabrication">布膜加工</h3><p data-zh="加工團隊完成膜材裁切、加工與包裝出貨。" data-en="Fabrication cuts, processes, packs and ships the membrane.">加工團隊完成膜材裁切、加工與包裝出貨。</p></div>
      <div class="fcard glass reveal" data-d="3"><div class="fcard__ic"><strong style="font-family:Sora;font-size:1.2rem">04</strong></div><h3 data-zh="鋼構施工" data-en="Steel & install">鋼構施工</h3><p data-zh="鋼構團隊現場施工安裝，完成交付。" data-en="The steel team erects and installs on site to completion.">鋼構團隊現場施工安裝，完成交付。</p></div>
    </div>
  </div>
</section>

<!-- gallery -->
<section class="section section--tint">
  <div class="wrap">
    <div class="section__head reveal">
      <span class="eyebrow">Gallery</span>
      <h2 data-zh="實績作品" data-en="Selected works">實績作品</h2>
    </div>
    <div class="filters reveal">
      <button class="filter active" data-cat="all" data-zh="全部" data-en="All">全部</button>
      <button class="filter" data-cat="t" data-zh="T 遮陽膜" data-en="T · Shade">T 遮陽膜</button>
      <button class="filter" data-cat="m" data-zh="M 網格膜" data-en="M · Mesh">M 網格膜</button>
      <button class="filter" data-cat="s" data-zh="S 吸音膜" data-en="S · Acoustic">S 吸音膜</button>
    </div>
    <div class="gallery" id="gallery"></div>
    <p style="text-align:center;margin-top:36px;color:var(--muted);font-size:.9rem" data-zh="＊ 示意圖片，實際作品照片可後續替換。" data-en="* Placeholder images — replace with real project photos later.">＊ 示意圖片，實際作品照片可後續替換。</p>
  </div>
</section>

<section class="cta"><div class="wrap cta__inner reveal">
  <h2 data-zh="讓您的構想成為地標" data-en="Turn your idea into a landmark">讓您的構想成為地標</h2>
  <p data-zh="告訴我們您的基地與需求，我們提供完整的膜結構解決方案。" data-en="Share your site and brief — we'll provide a complete membrane-structure solution.">告訴我們您的基地與需求，我們提供完整的膜結構解決方案。</p>
  <div class="cta__cta"><a href="contact.html" class="btn btn--light"><span data-zh="聯絡我們" data-en="Contact us">聯絡我們</span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
</div></section>

<div id="site-footer"></div>
<script src="assets/app.js"></script>
</body>
</html>