aura-landing

作 品 介 紹

名 稱 ： 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/

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