// Main app for CHTC 30+ Landing v2 (React) const { useState, useEffect, useRef } = React; // ---------- Tiny icon set (no Lucide dep needed) ---------- const Icon = ({ d, size = 20, stroke = 1.6, className = "" }) => {d} ; const Icons = { Calendar: } />, ArrowRight: } />, Book: } />, Cpu: } />, Leaf: } />, Sparkles: } />, Clock: } />, Badge: } />, Compass: } />, Monitor: } />, Hands: } />, Sprout: } />, Flask: } />, Scan: } />, Chart: } />, Infinity: } />, Drop: } />, Gift: } />, Users: } />, Award: } />, Building: } />, Pin: } />, Phone: } />, Mail: } />, Plus: } />, Check: } />, Activity: } />, GraduationCap: } />, Heart: } />, MessageCircle: } /> }; // ---------- NAV ---------- function Nav() { return ( ); } // ---------- HERO ---------- function Hero() { return (
教育部 30+ 大學計畫補助 2026 秋季招生

30+ 職涯再造 用 AI 科技與科學實證 翻轉你的美力人生。

為美容產業、長照工作者與社區居民量身打造的學分學程。 16 學分正式學程．混成學習．取得學分可累計四年制學位。

16
CREDITS · 學分
1+2
CORE + MODULES
100+
YEAR LIFE
{/* Trust marquee */}
{Array(2).fill(0).map((_, r) => {Icons.Award}教育部 30+ 大學計畫補助· {Icons.Building}中華科技大學生技系· {Icons.Badge}16 學分正式學程· {Icons.Users}30+ 在職友善· {Icons.GraduationCap}學位學分可累計· )}
); } function HeroVisual() { return (
{/* TECH */}
{/* Scalp scan circle */}
{[...Array(12)].map((_, i) => { const a = i / 12 * Math.PI * 2; return ; })} SCALP · AI
AI Scalp Image
毛囊密度
87/cm²
Module 02
AI 科技
{Icons.Cpu}
{/* WELLNESS */}
{/* botanical */}
{Icons.Leaf}Botanical
薰衣草 · 迷迭香
純植萃 · 舒眠 · 清晰
{/* bottle */}
Module 01
智慧樂活
{Icons.Sparkles}
{/* Center medallion */}
30+
CHTC
{Icons.GraduationCap}
Certified
中華科技大學
); } // ---------- PAIN / HYBRID ---------- function PainHybrid() { const pains = [ { icon: Icons.Clock, num: "01", title: "白天上班、晚上顧家，根本沒空進修。", note: "傳統實體班時段固定，難以兼顧。" }, { icon: Icons.Badge, num: "02", title: "想要正式學歷背書，不只是短期證書。", note: "短期班含金量低，市場辨識度有限。" }, { icon: Icons.Compass, num: "03", title: "想轉職、想升級，但不知從何開始。", note: "美容、長照、健康產業正紅，但路徑混亂。" }]; return (
Why hybrid learning

想精進，總卡在「時間」
這一關。

我們重新設計了學習節奏：把進修融入週末工作坊與線上彈性課程，讓 30+ 的你也能無痛上路。

{pains.map((p, i) =>
{p.num}
{p.icon}
Pain · {p.num}

{p.title}

{p.note}

)}
{/* Solution */}
Hybrid Learning · 混成學習

週末實作工作坊　＋　線上同步 / 錄影

線上課程支援同步直播與錄影回放，缺課自動補課；週末於校內進行實作，讓技術扎實落地。

{Icons.Monitor}
線上 30%
直播 + 錄影 · 隨時複習
{Icons.Hands}
實作 70%
週末工作坊 · 大師親授
); } // ---------- CURRICULUM ---------- function Curriculum() { return (
Curriculum · 1 + 2

一個核心，兩條路徑，
16 學分一次到位。

以「百年人生思維」串接身心樂活與AI 科技，建構未來十年的職涯能力組合。

{/* Core */}
00
{Icons.Infinity}
Core · 共同核心

百年人生思維

從哲學、健康經濟到生涯規劃，重新定義 30+ 之後的多階段職涯路徑。

2 學分
{/* Connector */}
{/* Module 1 */}
Module · 01

智慧樂活

Wellness & Body Support
8
CREDITS

芳療、植物科學、整體照護，建立全方位樂活與長照能力。

{[ { ic: Icons.Sprout, t: "植物科學概論", s: "植萃成分 · 萃取方法 · 應用案例" }, { ic: Icons.Drop, t: "芳香療法實務", s: "複方調配 · 身心應用 · 個案實作" }, { ic: Icons.Heart, t: "整體式健康照護", s: "經絡導引 · 居家保健 · 身心支持" }]. map((it, i) =>
{it.ic}
{it.t}
{it.s}
)}
{/* Module 2 */}
Module · 02

AI 與職涯轉型

AI & Career Transformation
6
CREDITS

以 AI 影像分析、服務設計與數位健康，讓傳統美業升級成數據驅動的精準服務。

{[ { ic: Icons.Scan, t: "AI 頭皮影像分析", s: "影像判讀 · 數據解讀 · 客製化建議" }, { ic: Icons.Sparkles, t: "服務設計與顧客經驗", s: "客戶輪廓 · 流程優化 · 商業模式" }, { ic: Icons.Activity, t: "數位健康管理", s: "穿戴裝置 · 數據追蹤 · 健康介入" }]. map((it, i) =>
{it.ic}
{it.t}
{it.s}
)}
{/* Total */}
2核心
+
8樂活
+
6科技
=
16學分總計
); } // ---------- BENEFITS ---------- function Benefits() { const items = [ { tag: "01 · Material Support", title: "專業器材與耗材免費使用", desc: "學員享有、按摩工具、AI 頭皮檢測儀等專業設備使用權，課程期間無須自備。", tags: ["原廠精油組", "按摩工具", "AI 檢測儀配件", "耗材補助"], icon: Icons.Drop, accent: "sage" }, { tag: "02 · Master Collaboration", title: "業界大師親授｜尖端設備教學", desc: "師資網羅美容、芳療、生技、AI 各領域業界資深專家，並引進市值千萬的教學設備。", tags: ["業界專家", "尖端設備", "個案實作", "業師輔導"], icon: Icons.Users, accent: "tech" }, { tag: "03 · Academic Path", title: "正式學分｜可累計四年制學位", desc: "修畢之 16 學分為中華科技大學正式學程學分，可累計四年制學位學程。", tags: ["正式學分", "可轉學位", "學分證明", "官方核發"], icon: Icons.GraduationCap, accent: "ink" }]; return (
Exclusive Benefits

專屬入學福利｜
不只一張證書，一整套職涯。

從學習工具、業師人脈到正式學位，三重保障幫你把每一份投入轉化為長期回報。
{items.map((b, i) =>
{b.tag}
{b.icon}

{b.title}

{b.desc}

{b.tags.map((t, j) => {t} )}
)}
); } // ---------- FACILITY ---------- function Facility() { return (
Professional Facilities

專業教學場域｜
學習場所即業界現場。

中華科技大學生技系兩大旗艦教室，將植萃藝術與生技實驗的氛圍融入日常教學。
{/* Fragrance classroom */}
{/* shelf of bottles */}
{[60, 80, 50, 90, 70, 65, 85].map((h, i) =>
)}
Module 01 · Wellness
{Icons.Leaf}

香氛藝術多功能教室

Fragrance Art Multi-functional Classroom

配備專業精油吧檯、調香實驗工作站、按摩照護與保健模擬區，讓芳療、按摩與身心支持的訓練在同一空間完成。

{["精油吧檯", "調香工作站", "按摩床位", "保健模擬區"].map((t, i) => {t} )}
{/* Cosmetic Biotech Lab */}
{/* lab bench - flasks */}
AI · CAM
Module 02 · Beauty Tech
{Icons.Flask}

妝品生技實驗室

Cosmetic Biotech Lab

配置 AI 頭皮影像分析設備、皮膚檢測儀、配方實驗工作站，串聯數據檢測、配方研發與顧客諮詢的完整服務流程。

{["AI 影像分析儀", "皮膚檢測儀", "配方實驗台", "數位諮詢區"].map((t, i) => {t} )}
); } // ---------- FAQ ---------- const FAQS = [ { q: "上課方式為何？需要每天到校嗎？", a: "本學程採混成模式：約 30% 線上同步直播或錄影課程（可隨時複習），約 70% 為週末實作工作坊，於中華科技大學南港校區進行。對在職族非常友善。" }, { q: "16 學分修完後可以取得什麼？", a: "修畢可獲中華科技大學官方核發之「學分修習證明」，且這 16 學分為正式學程學分，可累計轉入生技系四年制學位學程。" }, { q: "我沒有美容或科技背景，可以報名嗎？", a: "完全可以。本學程為 30+ 跨領域學員設計，課程從基礎建立。長照工作者、社區照顧員、二度就業者皆為核心歡迎對象。" }, { q: "學費與材料金如何負擔？", a: "本學程獲教育部 30+ 大學計畫補助。學員享專業器材與耗材免費使用，包含原廠精油、AI 頭皮分析等。實際金額依招生年度公告，請於說明會或 LINE 諮詢取得最新方案。" }, { q: "招生對象有限制嗎？", a: "凡 30 歲以上、對美容、長照、健康或職涯轉型有興趣者皆可報名。歡迎在職人員、社區居民、二度就業者一同參與。" }]; function FAQ() { const [open, setOpen] = useState(0); return (
FAQ

常見問題 Q&A

找不到你的問題？歡迎透過下方 LINE 直接詢問。

{FAQS.map((it, i) =>
setOpen(open === i ? -1 : i)} className={`bg-white border rounded-2xl px-6 py-5 cursor-pointer transition ${open === i ? 'border-tech/40' : 'border-ink/10 hover:border-tech/30'}`}>
{String(i + 1).padStart(2, '0')}

{it.q}

{it.a}
)}
); } // ---------- CTA ---------- function CTA() { return (
2026 秋季招生中｜名額有限

把 30+ 的下半場，
交給最值得的選擇。

說明會中，我們會帶你逐一了解課程地圖、補助申請、學分轉換流程，並一對一回答你的個人狀況。

{Icons.Pin}
中華科技大學
台北市南港區研究院路三段 245 號
{Icons.Mail}
judychen1018444@gmail.com
24 小時內回覆
); } function Footer() { return (
30+
中華科技大學 · 智慧樂活與妝品科技學分學程
© 2026 CUST Education. 教育部 30+ 大學計畫補助.
); } function StickyLine() { return (
FREE 1:1
LINE 諮詢
); } // ---------- ROOT ---------- function App() { useEffect(() => { const io = new IntersectionObserver((es) => es.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}}), { threshold: 0.08 }); document.querySelectorAll('.reveal').forEach((el) => { const r = el.getBoundingClientRect(); if (r.top < window.innerHeight && r.bottom > 0) el.classList.add('in');else io.observe(el); }); return () => io.disconnect(); }, []); return ( <>