示範照片來源：Unsplash calm forest 搜尋；正式上線請確認單張素材授權並替換成自有圖片。
01 / KNOWLEDGE
從分類、文章卡到目錄、作者資訊與延伸閱讀，建立長期內容的基本骨架。
ARTICLE / 01
長期內容不是把每個想法都發出去，而是找到一種容易回來、也容易被讀者理解的整理方式。這段示範文字展示文章頁字級、行距與內容寬度。
先定義主題，再讓文章之間互相連結。每一篇文章都可以有清楚的標題、作者、分類、日期和閱讀時間；這些 metadata 幫助人快速判斷內容是否符合需要。
文章目錄、引用、圖片說明和程式碼區塊都可以由 Markdown／MDX 內容提供。Astro 元件負責一致呈現，不需要把每段文章都變成獨立互動。
讓網站幫內容服務，而不是讓內容替特效找理由。
低壓力的訂閱、延伸閱讀或免費資源，可以放在正文之後。確保 CTA 說清楚會發生什麼事，不要用倒數計時或模糊承諾催促讀者。
02 / PRACTICE
清楚說明服務對象、範圍、資格、費用和預約方式，避免讓網站變成強推式 Landing Page。
以上只是版型示範，請由專業者依資格、地區與實際服務調整。緊急狀況請聯絡所在地的緊急服務。
TRANSPARENT FEES
不確定的數字不要填；說明誰適用、包含什麼，以及付款和取消政策。
建議起點
請填入實際費用
費用／時長由專業者確認
說明初談目的、可討論範圍與取消政策。
請填入實際費用
頻率與時長由專業者確認
清楚列出服務內容、適用對象與不包含事項。
本頁費用為待替換提示，不是實際報價。請勿直接上線。
見證區僅展示視覺排版；其中內容是虛構示範，不是真實客戶評價。
“這是展示元件排版的示範文字，請勿當成真實個案見證。”
“正式使用前，請以可核實、獲授權且不暗示療效保證的內容替換。”
請在正式網站說明第一次會談的流程、時間、費用與後續選擇；示範文案不代表實際承諾。
這個 Astro 範例不收集病歷、保險或其他敏感健康資訊。需要安全預約流程時，請連至合規且已配置的服務提供者。
先閱讀服務範圍與限制，再用一般聯絡方式詢問。訪客不需要因為瀏覽網站而承諾預約。
A GENTLE FIRST STEP
初談的目的、長度與費用，請在此填上實際安排。訪客可以先了解，不必承諾預約。
03 / COMPONENT CATALOG
依兩組 Top 10 站點研究整理；技術平台不設限，抽取能跨品牌重用的內容結構與互動。元件以 Astro server-rendered HTML 為主，僅必要處使用原生 JavaScript。
SiteHeader、SplitHero、Button、SectionHeading、TrustStrip、CtaBand、NewsletterForm、SearchForm、SocialLinks、SiteFooter、FAQAccordion。
PostCard、PostGrid、CategoryPills、ArticleHeader、ArticleMeta、TableOfContents、ArticleBody、ReadingProgress、AuthorCard、ShareLinks、ArticleNavigation、NewsletterArchive、MediaCard、MediaGrid、Callout、CommentThread、RelatedPosts、Pagination、LeadMagnetCard。
ServiceCard、ServiceGrid、PractitionerCard、PricingList、TestimonialCard、TestimonialGrid、ProofStats、FitChecklist、AppointmentCTA、ContactForm。
Reveal、StaggerGroup、MotionCard（柔光／3D tilt）、ZoomImage（Pan／Zoom）、磁吸 Button、UnderlineLink、FAQ 原生展開、文章閱讀進度；尊重 prefers-reduced-motion 與觸控輸入。
SOFT TILT / SPOTLIGHT
最大旋轉角度僅 4°；輕移游標即可感受到層次。
Tailwind tokens: bg-sage-50 text-forest-700 font-display shadow-floating motion-safe:animate-soft-enter。傳入 className 的 utility 會覆寫元件預設樣式。
一個容易開始的做法
把內容結構做清楚，再依實際品牌調整顏色、影像與字體。
DISCUSSION
讀者回應
目前沒有公開留言。
留言功能未連接；正式啟用前請先設定審核、隱私與防垃圾留言。