══════════════════════════════════════════════════════════════
     作 品 介 紹
     名 稱 ： aura-landing · Aura Pro 產品落地頁
     類 型 ： Apple 風格產品行銷落地頁（單頁 · 純前端）
     線 上 ： https://wh-penink.pages.dev/projects/aura-landing/
     技 術 ： HTML / CSS / Vanilla JavaScript（零依賴、零建置）
     部 署 ： Cloudflare Pages（wh-penink 同步上架）
══════════════════════════════════════════════════════════════


一、這是什麼
──────────────────────────────────────────────────────────────
aura-landing 是一個「Apple 風格」的產品行銷落地頁示範，主角是
虛構的旗艦耳機「Aura Pro」。整頁以單一 HTML 檔＋CSS＋原生
JavaScript 完成，不加任何框架、不裝任何套件。

  設計重點
  ＊ 半透明毛玻璃全域導覽列（backdrop-filter blur）
  ＊ 全螢幕深色 Hero：漸層大字標題＋SVG 繪製的耳機主視覺
  ＊ 捲動後才出現的「黏性購買列」（sticky subnav）
  ＊ 數字統計列、交替式圖文特色區塊、規格卡片、購買區
  ＊ 全站以 IntersectionObserver 做捲動淡入動畫
  ＊ 響應式排版，手機自動切換為漢堡選單

  設計風格
  承襲 Apple 產品頁語言：極大留白、SF Pro 字體堆疊、黑／白／
  淺灰三段式背景、單一藍色強調色、細膩的捲動節奏。


二、製作過程
──────────────────────────────────────────────────────────────
  1. 規劃結構
     先切出 Hero → 黏性購買列 → 聲學 → 設計 → 材質 → 規格
     → 購買 → 頁尾的頁面骨架（index.html）。
  2. 建立視覺系統
     在 style.css 定義設計變數（色彩、字體、緩動、圓角），
     排版以 clamp() 做流體縮放，確保各尺寸都好看。
  3. 產品主視覺
     不用任何外部圖片，以內嵌 SVG（漸層金屬＋深色耳罩＋藍色
     指示燈）繪製耳機，並加上浮動與光暈動畫。
  4. 互動與動效
     用原生 JavaScript 實作：捲動淡入、黏性購買列顯示時機、
     響應式選單開合、加入購物袋的成功回饋。
  5. 瀏覽器實測
     以共享瀏覽器座實際操作：捲動各區塊、點導覽連結、按下
     加入購物袋、測試選單開合，並逐張截圖用視覺模型確認。


三、使用教學
──────────────────────────────────────────────────────────────
  ① 直接開啟
     這是純靜態頁面，用瀏覽器打開 index.html 即可，
     不需要任何伺服器或安裝步驟。
  ② 瀏覽
     往下捲動即可看到各特色區塊；頂部導覽列可跳到
     「總覽／聲學／設計／技術規格／購買」。
  ③ 試玩互動
     捲過 Hero 後底部會出現黏性購買列；點「加入購物袋」
     會顯示成功訊息數秒後自動復原。
  ④ 手機版
     視窗縮到 760px 以下時，導覽列會變成漢堡選單。


四、注意事項
──────────────────────────────────────────────────────────────
  ＊ 本頁為設計示範，產品「Aura Pro」為虛構，非真實商品。
  ＊ 頁面不含任何外部資源、追蹤碼或私密資料，完全離線可用。
  ＊ 捲動動畫以 IntersectionObserver 實作，尊重系統的
     「減少動態效果」(prefers-reduced-motion) 設定。


五、保存資訊
──────────────────────────────────────────────────────────────
  本資料夾即專案原始碼，共三個檔案，可直接在瀏覽器執行：

      index.html     頁面結構與內嵌 SVG 產品圖
      style.css      全站樣式與動畫
      script.js      互動邏輯（捲動、選單、回饋）

  線上正式版：https://wh-penink.pages.dev/projects/aura-landing/

══════════════════════════════════════════════════════════════
    文件完成 · 以上為公開資訊，不含任何私密資料
══════════════════════════════════════════════════════════════
