MAL1688 是「好家庭 MAL 活『粒』生活」的前端品牌與產品展示專案，聚焦於家庭與兒童複合鈣產品的品牌故事、科學溝通、產品矩陣與營養資訊呈現。專案目前以瀏覽器端展示體驗為主，適合用於品牌概念驗證、內容審閱與靜態網站預覽。
| 區塊 | 說明 |
|---|---|
| 品牌首頁與 Hero | 呈現 MAL 活「粒」生活的品牌主張與視覺入口。 |
| 品牌故事 | 說明品牌定位與產品溝通脈絡。 |
| 科學支柱 | 以圖像化區塊整理鈣、營養與日常保養的溝通主題。 |
| 家庭系列 | 展示不同家庭成員與年齡情境的產品分類。 |
| 產品矩陣與價格 | 呈現產品卡片、規格與價格資訊。 |
| Nutrition Lab | 提供營養主題的互動式展示區塊。 |
| 輪播與宣傳素材 | 使用輪播元件與品牌素材支援首頁內容編排。 |
- React 19
- Vite 8
- Tailwind CSS 4
lucide-react- JavaScript（JSX）
需要 Node.js 與 npm。安裝相依套件並啟動開發伺服器：
npm ci
npm run dev開發伺服器啟動後，依終端機顯示的網址開啟瀏覽器。常用指令如下：
npm run build # 建立 production bundle
npm run preview # 預覽 dist/ 建置結果MAL1688/
├── src/
│ ├── components/ # 品牌、產品、營養與版面元件
│ ├── data/ # 產品與宣傳素材資料
│ ├── App.jsx # 應用程式根元件
│ ├── index.css # 全域樣式
│ └── main.jsx # React 入口
├── index.html
├── package.json
├── vite.config.js
└── .github/workflows/ # 靜態網站部署工作流程
repository 內含 GitHub Pages 靜態部署工作流程。若要啟用自動部署，請在 repository 的 Settings → Pages 將來源設定為 GitHub Actions，之後推送至 main 分支即可觸發工作流程。部署前請確認產品文案、價格、圖片與健康相關表述均已完成內容審核。
本專案的產品與營養內容屬於品牌展示素材，不應取代醫療診斷、治療或個人化醫療建議。正式對外發布前，請依產品實際標示、食品法規與已核准的宣稱範圍逐項確認。repository 目前未附獨立 LICENSE，若要重用程式碼或素材，請先取得權利人授權。
更新產品或品牌內容時，優先檢查 src/data/、相關元件與 index.html 的頁面標題，再執行 npm run build 驗證 production bundle。若修改了圖片或外部資源，也應一併檢查行動版版面與替代文字。