<!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="theme-color" content="#3f352a" /> <title>三希典藏學院｜Sanxi Academy</title> <style> :root{--paper:#f4efe5;--card:#fffdf8;--ink:#2f2a25;--muted:#746d64;--tea:#765b3f;--dark:#3f352a;--gold:#c7a870;--line:#ded3c4;--moss:#66705d;--shadow:0 18px 50px rgba(60,45,30,.10);--r:22px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Serif TC","PingFang TC","Microsoft JhengHei",serif;color:var(--ink);background:radial-gradient(circle at 85% 0,rgba(199,168,112,.18),transparent 30%),var(--paper);line-height:1.75}a{color:inherit;text-decoration:none}.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:20;background:rgba(63,53,42,.96);backdrop-filter:blur(12px);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 8px 28px rgba(0,0,0,.1)}.brand{display:flex;align-items:center;gap:12px}.seal{width:42px;height:42px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-weight:700}.brand strong{display:block}.brand small{color:#ddd2c3}.topnav{display:flex;gap:8px}.topnav a{padding:.45rem .75rem;border-radius:999px;color:#eee5da}.topnav a:hover{background:rgba(255,255,255,.1)}main{max-width:1180px;margin:auto;padding:28px 22px 80px}.hero{min-height:460px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:clamp(32px,6vw,74px);background:linear-gradient(135deg,rgba(255,253,248,.98),rgba(239,229,213,.9));border:1px solid rgba(118,91,63,.15);border-radius:32px;box-shadow:var(--shadow);overflow:hidden}.eyebrow{letter-spacing:.18em;color:var(--tea);font-weight:700;font-size:.82rem}.hero h1{font-size:clamp(2.4rem,5vw,4.7rem);line-height:1.12;margin:.55rem 0}.hero .en{font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.08em;color:var(--muted)}.hero p{color:var(--muted);font-size:1.06rem;max-width:680px}.quote{min-height:300px;border-radius:50% 46% 52% 48%/50% 48% 52% 50%;background:var(--dark);color:#fff8ec;display:grid;place-items:center;text-align:center;padding:36px;box-shadow:0 28px 60px rgba(63,53,42,.24)}.quote strong{font-size:1.45rem;display:block}.quote span{display:block;margin-top:10px;color:#d8c9b6}.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.15rem;border-radius:12px;border:1px solid var(--tea);font-weight:700}.btn.primary{background:var(--tea);color:#fff}.btn.secondary{background:transparent;color:var(--tea)}section{padding-top:72px}.section-head{max-width:760px;margin-bottom:24px}.section-head h2{font-size:clamp(1.7rem,3vw,2.5rem);margin:0 0 8px}.section-head p{color:var(--muted)}.academy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.module{background:rgba(255,253,248,.94);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:0 10px 28px rgba(66,52,36,.05);transition:.22s ease;position:relative;overflow:hidden}.module:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.module::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-54px;top:-54px;background:rgba(199,168,112,.15)}.icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#eee3d4;font-size:1.4rem;margin-bottom:16px}.module h3{font-size:1.28rem;margin:0 0 6px}.module p{color:var(--muted);min-height:84px}.meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:15px;font-size:.9rem}.status{padding:.22rem .6rem;border-radius:999px;background:#e8eee5;color:var(--moss);font-weight:700}.status.plan{background:#f0e8dc;color:var(--tea)}.path{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.path-card{padding:20px;border-left:4px solid var(--gold);background:var(--card);border-radius:14px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.path-card b{display:block;margin-bottom:6px}.path-card span{color:var(--muted);font-size:.93rem}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.feature{background:var(--dark);color:#fff8ec;border-radius:24px;padding:28px}.feature.light{background:var(--card);color:var(--ink);border:1px solid var(--line)}.feature p{color:#d7cab9}.feature.light p{color:var(--muted)}.footer{text-align:center;color:var(--muted);padding-top:70px}.install{position:fixed;right:18px;bottom:18px;background:var(--dark);color:white;border:0;border-radius:999px;padding:.8rem 1rem;box-shadow:0 10px 30px rgba(0,0,0,.18);display:none} @media(max-width:900px){.topnav{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding:34px 24px}.quote{min-height:220px}.academy-grid{grid-template-columns:1fr 1fr}.path{grid-template-columns:1fr 1fr}.feature-grid{grid-template-columns:1fr}} @media(max-width:620px){main{padding:18px 14px 70px}.brand small{display:none}.hero{border-radius:22px}.academy-grid,.path{grid-template-columns:1fr}.module p{min-height:auto}.cta{display:grid}.btn{width:100%}.quote strong{font-size:1.2rem}section{padding-top:54px}} </style> </head> <body> <div class="shell"> <header class="topbar"><div class="brand"><div class="seal">三希</div><div><strong>三希典藏學院</strong><small>Sanxi Academy</small></div></div><nav class="topnav"><a href="#academies">六大學院</a><a href="#path">學習路徑</a><a href="reception.html">接待系統</a></nav></header> <main> <section class="hero" id="home"><div><div class="eyebrow">SANXI CULTURAL LEARNING SYSTEM</div><h1>三希典藏學院</h1><div class="en">Knowledge · Practice · Service · Transmission</div><p>這不只是一套員工教材，而是一個把三希多年累積的文化理解、接待判斷與引導方法，轉化為可學習、可練習、可傳承的系統。</p><div class="cta"><a class="btn primary" href="reception.html">開始學習接待引導</a><a class="btn secondary" href="#academies">瀏覽六大學院</a></div></div><div class="quote"><div><strong>從知識，到理解；<br>從理解，到實踐；<br>從實踐，到影響他人。</strong><span>以茶為緣・以禪為宗・以文化傳承為使命</span></div></div></section> <section id="academies"><div class="section-head"><div class="eyebrow">SIX LEARNING DOMAINS</div><h2>六大學院</h2><p>每一個學院解決一種能力：懂人、懂產品、懂文化、懂茶、懂現場，最後能在需要時獲得智慧協助。</p></div><div class="academy-grid"> <a class="module" href="reception.html"><div class="icon">迎</div><h3>接待引導學院</h3><p>學會觀察客人、建立信任、判斷需求、自然分享與邀請體驗。</p><div class="meta"><span>七層流程・情境話術</span><span class="status">已開放</span></div></a> <div class="module"><div class="icon">藏</div><h3>產品知識學院</h3><p>佛像、七款情緒茶、茶粉、茶膏與玻璃茶器的核心價值與介紹方式。</p><div class="meta"><span>產品故事・常見問答</span><span class="status plan">規劃中</span></div></div> <div class="module"><div class="icon">法</div><h3>佛教文化學院</h3><p>以白話、理性與生活實踐的方式，理解佛像、供養與經典核心。</p><div class="meta"><span>佛教常識・經典導讀</span><span class="status plan">規劃中</span></div></div> <div class="module"><div class="icon">茶</div><h3>茶文化學院</h3><p>六大茶系、沖泡、茶器、茶席美學、禪茶與三希的現代喝茶方式。</p><div class="meta"><span>基礎知識・實作流程</span><span class="status plan">規劃中</span></div></div> <div class="module"><div class="icon">境</div><h3>服務實戰學院</h3><p>面對沉默、只拍照、親子、長輩、團體與外國客時，如何應對而不失分寸。</p><div class="meta"><span>真實案例・角色練習</span><span class="status plan">規劃中</span></div></div> <div class="module"><div class="icon">智</div><h3>AI 智慧助教</h3><p>輸入客人狀況，即時判斷目前階段、信任程度與最適合的下一步。</p><div class="meta"><span>情境分析・行動建議</span><span class="status plan">第二階段</span></div></div> </div></section> <section id="path"><div class="section-head"><div class="eyebrow">LEARNING PATH</div><h2>建議學習路徑</h2><p>先學會與人建立關係，再補足產品與文化知識，最後進入實戰與個人化判斷。</p></div><div class="path"><div class="path-card"><b>第一階｜看見人</b><span>接待理念、觀察訊號、七層流程。</span></div><div class="path-card"><b>第二階｜說清楚</b><span>產品價值、文化轉譯、生活化表達。</span></div><div class="path-card"><b>第三階｜做得出</b><span>情境演練、錯誤修正、接待紀錄。</span></div><div class="path-card"><b>第四階｜能傳承</b><span>獨立判斷、帶領新人、優化系統。</span></div></div></section> <section><div class="feature-grid"><div class="feature"><h2>目前可立即使用</h2><p>第一門正式課程已完成：三希典藏接待流程系統 V1.0。員工可直接在手機閱讀、進行情境判斷、完成測驗並留下接待紀錄。</p><a class="btn primary" href="reception.html">進入接待引導學院</a></div><div class="feature light"><h2>手機使用方式</h2><p>將整個網站上傳至網路空間後，員工只需開啟網址，並在瀏覽器選擇「加入主畫面」，即可像 App 一樣從手機桌面進入。</p><p><strong>建議：</strong>未來使用 academy.sfbsanxi.com 作為固定入口，所有教材更新後全體員工同步看到新版。</p></div></div></section> <div class="footer">三希典藏學院 Sanxi Academy · 以文化安住生活，以理解傳遞價值</div> </main></div> </body></html>