Add Steam hosting recommendations

content/docs/buy-server.mdx

@@ -30,7 +30,7 @@ import { Callout } from 'fumadocs-ui/components/callout';
 <Step>
 ### 選擇方案
 
-前往我們的 [商店頁面](https://store.diamondhost.tw)，瀏覽各項 Minecraft 伺服器方案。
+前往我們的 [商店頁面](https://store.diamondhost.tw)，瀏覽 Minecraft 與 Steam 遊戲伺服器方案。
 如果您還不確定要買哪一種，建議先參考我們的 [選購指南](/docs/pricing)。
 
 找到符合需求的方案後，點擊下方的 **「訂購」** 按鈕。

content/docs/pricing.mdx

@@ -10,7 +10,7 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 
 # 選購指南
 
-歡迎來到鑽石託管！不知道該選什麼方案嗎？別擔心，跟著我們的指南挑選就對了。我們提供 **Minecraft 專屬伺服器** 與 **網頁主機 (Web Hosting)**，請參考下方的互動推薦與價目表。
+歡迎來到鑽石託管！不知道該選什麼方案嗎？別擔心，跟著我們的指南挑選就對了。我們提供 **Minecraft 專屬伺服器**、**Steam 遊戲伺服器**與 **網頁主機 (Web Hosting)**，請參考下方的互動推薦與價目表。
 
 ---
 
@@ -119,6 +119,66 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 
 ---
 
+## Steam 遊戲伺服器推薦
+
+目前 Steam 極致主機支援 **泰拉瑞亞（Terraria）**與 **幻獸帕魯（Palworld）**。全系列採用最高 **5.7GHz 的 AMD Ryzen 9 9950X**，適合重視低延遲與穩定運算的多人遊戲伺服器。
+
+<Tabs items={['泰拉瑞亞 Terraria', '幻獸帕魯 Palworld']}>
+<Tab value="泰拉瑞亞 Terraria">
+
+### 泰拉瑞亞方案怎麼選？
+
+泰拉瑞亞本體對資源需求較低；若要安裝 tModLoader、大型模組或同時探索多個區域，建議多保留一些記憶體與 CPU 餘裕。
+
+| 使用情境 | 建議方案 | 適合對象 |
+| --- | --- | --- |
+| 2–8 人原版同樂 | **TW-ST-1** | 小型朋友服、一般世界進度 |
+| 8–16 人或輕量模組 | **TW-ST-2** | 較多人同時探索、少量模組 |
+| 16 人以上或大型模組 | **TW-ST-3 起** | 大型地圖、tModLoader 與長期社群服 |
+
+</Tab>
+<Tab value="幻獸帕魯 Palworld">
+
+### 幻獸帕魯方案怎麼選？
+
+幻獸帕魯會隨玩家數、據點數量與世界存檔成長而提高記憶體用量，建議不要只依照目前在線人數選擇，並為後續進度預留升級空間。
+
+| 使用情境 | 建議方案 | 適合對象 |
+| --- | --- | --- |
+| 2–4 人小型世界 | **TW-ST-3** | 好友同樂、據點數量較少 |
+| 5–12 人一般長期服 | **TW-ST-4 ～ TW-ST-5** | 多據點、穩定長期遊玩 |
+| 13–24 人活躍社群 | **TW-ST-6 ～ TW-ST-7** | 同時在線較高、世界進度較深 |
+| 25–32 人或模組服 | **TW-ST-8 起** | 大型社群、模組與高負載需求 |
+
+</Tab>
+</Tabs>
+
+<Callout title="第一次開服怎麼選？" type="info">
+泰拉瑞亞可從 **TW-ST-1** 開始；幻獸帕魯建議從具備 16 GiB 記憶體的 **TW-ST-3** 開始。購買後若資源不足，可聯絡客服補差價升級方案。
+</Callout>
+
+### TW-ST 臺灣 Steam 極致主機
+
+| 方案名稱 | 月繳 | CPU 使用率 | 記憶體 | 儲存空間 |
+| --- | --- | --- | --- | --- |
+| TW-ST-1 | NT$479 | 200% | 6 GiB | 36 GiB |
+| TW-ST-2 | NT$749 | 300% | 10 GiB | 50 GiB |
+| TW-ST-3 | NT$999 | 400% | 16 GiB | 70 GiB |
+| TW-ST-4 | NT$1,349 | 500% | 18 GiB | 90 GiB |
+| TW-ST-5 | NT$1,699 | 600% | 22 GiB | 110 GiB |
+| TW-ST-6 | NT$2,199 | 800% | 28 GiB | 140 GiB |
+| TW-ST-7 | NT$2,849 | 1000% | 36 GiB | 180 GiB |
+| TW-ST-8 | NT$3,399 | 1200% | 44 GiB | 220 GiB |
+| TW-ST-9 | NT$4,299 | 1500% | 56 GiB | 280 GiB |
+
+<Callout type="warning">
+以上人數為一般使用情境的選購參考，並非效能保證。實際需求會受到遊戲版本、模組、世界大小、據點與實體數量，以及同時在線玩家行為影響。
+</Callout>
+
+[前往選購臺灣 Steam 極致主機](https://store.diamondhost.tw/store/tw-steam)
+
+---
+
 ## 新加坡 DirectAdmin 網頁主機
 
 若您有架設個人網站、論壇、商店或部落格的需求，我們也提供高效能的新加坡網頁主機：

src/app/docs/[[...slug]]/page.tsx

@@ -12,6 +12,7 @@ import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
 import { DeveloperPortalHeader } from '@/components/api-docs';
+import { CircleAlert, ExternalLink } from 'lucide-react';
 
 export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
   const params = await props.params;
@@ -26,6 +27,7 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
 
   const { body: MDX } = page.data as any;
   const markdownUrl = getPageMarkdownUrl(page).url;
+  const hasDisplayedPrice = slug.length === 1 && slug[0] === 'pricing';
 
   const gitConfig = {
     user: 'DiamondHosting',
@@ -44,6 +46,19 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
       <DocsTitle className={isDeveloperPage ? 'developer-doc-title' : undefined}>{page.data.title}</DocsTitle>
       <DocsDescription className={isDeveloperPage ? 'developer-doc-description' : 'mb-0'}>{page.data.description}</DocsDescription>
       <div className={isDeveloperPage ? 'developer-title-rule' : 'flex flex-row gap-2 items-center border-b pb-6 mt-4 mb-8'} />
+      {hasDisplayedPrice ? (
+        <aside className="docs-price-notice" aria-label="價格資訊提醒">
+          <CircleAlert aria-hidden="true" />
+          <p>
+            本頁價格可能不是即時更新，最新售價、規格與優惠內容請以
+            <a href="https://store.diamondhost.tw" target="_blank" rel="noreferrer">
+              官方商店
+              <ExternalLink aria-hidden="true" />
+            </a>
+            為準。
+          </p>
+        </aside>
+      ) : null}
       <DocsBody>
         <MDX
           components={getMDXComponents({

src/app/global.css

@@ -620,6 +620,52 @@
 	flex: none;
 }
 
+.docs-price-notice {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.65rem;
+	margin: 0 0 1.75rem;
+	padding: 0.8rem 0.9rem;
+	border: 1px solid color-mix(in srgb, #d99a16 40%, var(--color-fd-border));
+	border-radius: 0.5rem;
+	background: color-mix(in srgb, #d99a16 10%, var(--color-fd-background));
+	color: var(--color-fd-muted-foreground);
+	font-size: 0.84rem;
+	line-height: 1.55;
+}
+
+.docs-price-notice > svg {
+	width: 1.05rem;
+	height: 1.05rem;
+	margin-top: 0.12rem;
+	flex: none;
+	color: #d99a16;
+}
+
+.docs-price-notice p {
+	margin: 0;
+}
+
+.docs-price-notice a {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.2rem;
+	margin-inline: 0.2rem;
+	font-weight: 700;
+	color: var(--color-fd-foreground);
+	text-decoration: underline;
+	text-underline-offset: 0.18em;
+}
+
+.docs-price-notice a:hover {
+	color: #d99a16;
+}
+
+.docs-price-notice a svg {
+	width: 0.8rem;
+	height: 0.8rem;
+}
+
 #nd-sidebar .docs-section-switcher > a,
 #nd-sidebar-mobile .docs-section-switcher > a {
 	box-sizing: border-box !important;

src/mdx-components.tsx

@@ -1,7 +1,12 @@
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
+import type { ComponentPropsWithoutRef } from 'react';
 import { ApiBasePath, ApiCodeExamples, ApiEndpoint, ApiOverview } from '@/components/api-docs';
 
+function HydrationSafeParagraph(props: ComponentPropsWithoutRef<'p'>) {
+  return <p {...props} suppressHydrationWarning />;
+}
+
 // use this function to get MDX components, you will need it for rendering MDX
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
@@ -10,6 +15,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     ApiCodeExamples,
     ApiEndpoint,
     ApiOverview,
+    p: HydrationSafeParagraph,
     ...components,
   };
 }