diff --git a/dashboard/backend/src/config/database.ts b/dashboard/backend/src/config/database.ts
index 6fcf7f3..4499ad1 100644
--- a/dashboard/backend/src/config/database.ts
+++ b/dashboard/backend/src/config/database.ts
@@ -14,6 +14,15 @@ const pool = mysql.createPool({
   connectionLimit: 10,
 });
 
+// drizzle 约定 DATETIME 以 UTC 字符串读写（mapToDriverValue 写 toISOString，
+// mapFromDriverValue 按 `+Z` 解析），因此把会话时区固定为 UTC，
+// 否则 MySQL 服务器本地时区（如 +08:00）写入的 CURRENT_TIMESTAMP 会被误读为 UTC，产生 8 小时偏差
+pool.on('connection', (conn) => {
+  // 事件回调收到的是底层回调式连接，类型定义缺失 promise()，运行时存在
+  const callbackConn = conn as unknown as { promise(): { query(sql: string): Promise<unknown> } };
+  callbackConn.promise().query("SET time_zone = '+00:00'").catch(() => {});
+});
+
 export const db = drizzle(pool, { schema, mode: 'default' });
 
 if (isDevelopment) {
diff --git a/dashboard/backend/src/routes/site.ts b/dashboard/backend/src/routes/site.ts
index 9d1586a..0023b26 100644
--- a/dashboard/backend/src/routes/site.ts
+++ b/dashboard/backend/src/routes/site.ts
@@ -1,5 +1,5 @@
 import { Router, type Request, type Response } from 'express';
-import { eq, and } from 'drizzle-orm';
+import { eq, and, desc, count, like, isNull, inArray } from 'drizzle-orm';
 import { db } from '../config/database.js';
 import {
   wwwSiteSettings,
@@ -14,6 +14,16 @@ import {
   wwwI18nEntries,
   wwwProductSeries,
   wwwProducts,
+  wwwNewsArticles,
+  wwwNewsRecommendations,
+  wwwProductListSettings,
+  wwwNewsListSettings,
+  wwwAboutSettings,
+  wwwSupportSettings,
+  wwwPageSeo,
+  wwwFormSettings,
+  wwwFormFields,
+  wwwFormSubmissions,
 } from '../schemas/index.js';
 import logger from '../config/logger.js';
 import { ApiResponse } from '../utils/response.js';
@@ -151,4 +161,227 @@ router.get('/api/site/products', async (_req: Request, res: Response) => {
   }
 });
 
+// ===== 新闻：已发布文章列表（供新闻列表页使用） =====
+// GET /api/site/news?skip=0&limit=9
+router.get('/api/site/news', async (req: Request, res: Response) => {
+  try {
+    const skip = parseInt(req.query.skip as string || '0', 10);
+    const limit = Math.min(parseInt(req.query.limit as string || '9', 10), 100);
+    const title = req.query.title as string | undefined;
+
+    const conditions = [eq(wwwNewsArticles.status, 'published')];
+    if (title) conditions.push(like(wwwNewsArticles.titleZh, `%${title}%`));
+    const whereClause = and(...conditions);
+
+    const [totalResult] = await db.select({ value: count() }).from(wwwNewsArticles).where(whereClause);
+    const total = totalResult?.value ?? 0;
+
+    const rows = await db.select({
+      id: wwwNewsArticles.id,
+      titleZh: wwwNewsArticles.titleZh,
+      titleEn: wwwNewsArticles.titleEn,
+      slug: wwwNewsArticles.slug,
+      summaryZh: wwwNewsArticles.summaryZh,
+      summaryEn: wwwNewsArticles.summaryEn,
+      coverUrl: wwwNewsArticles.coverUrl,
+      publishedAt: wwwNewsArticles.publishedAt,
+      createdAt: wwwNewsArticles.createdAt,
+    }).from(wwwNewsArticles)
+      .where(whereClause)
+      .orderBy(desc(wwwNewsArticles.publishedAt), desc(wwwNewsArticles.createdAt))
+      .offset(skip)
+      .limit(limit);
+
+    res.json(ApiResponse.success({ items: rows, total, skip, limit }));
+  } catch (e: unknown) {
+    logger.error(`[site/news] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取新闻列表失败'));
+  }
+});
+
+// ===== 新闻详情：按 slug 查询（含内容与推荐文章） =====
+// GET /api/site/news/:slug
+router.get('/api/site/news/:slug', async (req: Request, res: Response) => {
+  try {
+    const slug = String(req.params.slug);
+    const [row] = await db.select().from(wwwNewsArticles)
+      .where(and(eq(wwwNewsArticles.slug, slug), eq(wwwNewsArticles.status, 'published')));
+    if (!row) {
+      res.json(ApiResponse.noData('文章不存在'));
+      return;
+    }
+
+    // 推荐文章（关联表按 sort_order 排序）
+    const recLinks = await db.select().from(wwwNewsRecommendations)
+      .where(eq(wwwNewsRecommendations.articleId, row.id))
+      .orderBy(wwwNewsRecommendations.sortOrder);
+    let recommendations: unknown[] = [];
+    if (recLinks.length > 0) {
+      const recIds = recLinks.map((r) => r.recommendedId);
+      const recRows = await db.select({
+        id: wwwNewsArticles.id,
+        titleZh: wwwNewsArticles.titleZh,
+        titleEn: wwwNewsArticles.titleEn,
+        slug: wwwNewsArticles.slug,
+        summaryZh: wwwNewsArticles.summaryZh,
+        summaryEn: wwwNewsArticles.summaryEn,
+        coverUrl: wwwNewsArticles.coverUrl,
+        publishedAt: wwwNewsArticles.publishedAt,
+      }).from(wwwNewsArticles)
+        .where(and(eq(wwwNewsArticles.status, 'published'), inArray(wwwNewsArticles.id, recIds)));
+      recommendations = recLinks
+        .map((r) => recRows.find((a) => a.id === r.recommendedId))
+        .filter((a): a is NonNullable<typeof a> => Boolean(a));
+    }
+
+    res.json(ApiResponse.success({ ...row, recommendations }));
+  } catch (e: unknown) {
+    logger.error(`[site/news/:slug] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取文章详情失败'));
+  }
+});
+
+// ===== 页面配置：产品列表 / 新闻列表 / 关于 / 支持 =====
+// GET /api/site/page?type=product-list|news-list|about|support
+router.get('/api/site/page', async (req: Request, res: Response) => {
+  try {
+    const type = req.query.type as string;
+    let row: unknown = null;
+    switch (type) {
+      case 'product-list': {
+        const [r] = await db.select().from(wwwProductListSettings).limit(1);
+        row = r ?? null;
+        break;
+      }
+      case 'news-list': {
+        const [r] = await db.select().from(wwwNewsListSettings).limit(1);
+        row = r ?? null;
+        break;
+      }
+      case 'about': {
+        const [r] = await db.select().from(wwwAboutSettings).limit(1);
+        row = r ?? null;
+        break;
+      }
+      case 'support': {
+        const [r] = await db.select().from(wwwSupportSettings).limit(1);
+        row = r ?? null;
+        break;
+      }
+      default:
+        res.json(ApiResponse.error('type 参数不合法'));
+        return;
+    }
+    res.json(ApiResponse.success(row));
+  } catch (e: unknown) {
+    logger.error(`[site/page] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取页面配置失败'));
+  }
+});
+
+// ===== 页面 SEO：按 page_type + entity_id 查询 =====
+// GET /api/site/page-seo?page_type=home&entity_id=1
+router.get('/api/site/page-seo', async (req: Request, res: Response) => {
+  try {
+    const pageType = req.query.page_type as string;
+    const entityId = req.query.entity_id ? Number(req.query.entity_id) : undefined;
+    if (!pageType) {
+      res.json(ApiResponse.error('page_type 参数必填'));
+      return;
+    }
+    const conditions = [eq(wwwPageSeo.pageType, pageType)];
+    if (entityId) {
+      conditions.push(eq(wwwPageSeo.entityId, entityId));
+    } else {
+      conditions.push(isNull(wwwPageSeo.entityId));
+    }
+
+    const [row] = await db.select().from(wwwPageSeo).where(and(...conditions));
+    res.json(ApiResponse.success(row ?? null));
+  } catch (e: unknown) {
+    logger.error(`[site/page-seo] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取页面 SEO 失败'));
+  }
+});
+
+// ===== 联系表单：配置 + 字段列表 =====
+// GET /api/site/contact
+router.get('/api/site/contact', async (_req: Request, res: Response) => {
+  try {
+    const [settings] = await db.select().from(wwwFormSettings).limit(1);
+    const fields = await db.select().from(wwwFormFields).orderBy(wwwFormFields.sortOrder);
+    res.json(ApiResponse.success({
+      settings: settings ?? null,
+      fields: fields ?? [],
+    }));
+  } catch (e: unknown) {
+    logger.error(`[site/contact] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取表单配置失败'));
+  }
+});
+
+// ===== 联系表单提交（公开） =====
+// POST /api/site/contact/submit
+// body: { form_data: Record<string, string> }
+router.post('/api/site/contact/submit', async (req: Request, res: Response) => {
+  try {
+    const b = req.body;
+    const formData = b.form_data;
+    if (!formData || typeof formData !== 'object' || Array.isArray(formData) || Object.keys(formData).length === 0) {
+      res.json(ApiResponse.error('form_data 不能为空'));
+      return;
+    }
+
+    const [settings] = await db.select().from(wwwFormSettings).limit(1);
+    const fields = await db.select().from(wwwFormFields).orderBy(wwwFormFields.sortOrder);
+    const cooldownSeconds = settings?.cooldownSeconds ?? 60;
+
+    // 冷却校验：同一 IP 最近一次提交时间
+    const ip = (req.headers['x-forwarded-for'] as string | undefined)?.split(',')[0]?.trim() || req.ip || '';
+    if (cooldownSeconds > 0 && ip) {
+      const [last] = await db.select().from(wwwFormSubmissions)
+        .where(eq(wwwFormSubmissions.visitorIp, ip))
+        .orderBy(desc(wwwFormSubmissions.createdAt))
+        .limit(1);
+      if (last) {
+        const elapsed = (Date.now() - new Date(last.createdAt).getTime()) / 1000;
+        if (elapsed < cooldownSeconds) {
+          res.json(ApiResponse.error(`提交过于频繁，请 ${Math.ceil(cooldownSeconds - elapsed)} 秒后再试`));
+          return;
+        }
+      }
+    }
+
+    // 必填字段校验：提交 key 与字段 name_zh / name_en 任一匹配
+    const values = Object.values(formData) as string[];
+    for (const field of fields) {
+      if (!field.isRequired) continue;
+      const key = (Object.keys(formData) as string[]).find((k) => k === field.nameZh || k === field.nameEn);
+      if (!key || !String(formData[key]).trim()) {
+        res.json(ApiResponse.error(`「${field.nameZh}」为必填项`));
+        return;
+      }
+    }
+
+    // 全字段值转字符串，限制长度
+    const sanitized: Record<string, string> = {};
+    for (const [k, v] of Object.entries(formData)) {
+      sanitized[k] = String(v ?? '').slice(0, 1000);
+    }
+
+    const userAgent = (req.headers['user-agent'] as string || '').slice(0, 500);
+    await db.insert(wwwFormSubmissions).values({
+      formData: sanitized,
+      visitorIp: ip,
+      userAgent,
+    });
+
+    const successMessage = req.query.lang === 'en' ? settings?.successMessageEn : settings?.successMessageZh;
+    res.json(ApiResponse.success(null, successMessage || '提交成功'));
+  } catch (e: unknown) {
+    logger.error(`[site/contact/submit] POST error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('提交失败，请稍后重试'));
+  }
+});
+
 export default router;
diff --git a/dashboard/backend/src/routes/www/sections.ts b/dashboard/backend/src/routes/www/sections.ts
index a99c235..b3aadbc 100644
--- a/dashboard/backend/src/routes/www/sections.ts
+++ b/dashboard/backend/src/routes/www/sections.ts
@@ -82,6 +82,9 @@ router.post('/api/www/sections', async (req: Request, res: Response) => {
       productId: b.product_id || null,
       layout: b.layout,
       theme: b.theme || 'light',
+      overlineColor: b.overline_color || '',
+      titleColor: b.title_color || '',
+      bodyColor: b.body_color || '',
       bgType: b.bg_type || 'color',
       bgValue: b.bg_value || '',
       overlayEnabled: b.overlay_enabled ? 1 : 0,
@@ -131,6 +134,9 @@ router.put('/api/www/sections/:id', async (req: Request, res: Response) => {
     await db.update(wwwSectionBlocks).set({
       layout: b.layout ?? existing.layout,
       theme: b.theme ?? existing.theme,
+      overlineColor: b.overline_color ?? existing.overlineColor,
+      titleColor: b.title_color ?? existing.titleColor,
+      bodyColor: b.body_color ?? existing.bodyColor,
       bgType: b.bg_type ?? existing.bgType,
       bgValue: b.bg_value ?? existing.bgValue,
       overlayEnabled: b.overlay_enabled !== undefined ? (b.overlay_enabled ? 1 : 0) : existing.overlayEnabled,
diff --git a/dashboard/backend/src/schemas/www/sections.ts b/dashboard/backend/src/schemas/www/sections.ts
index c2d030a..9ca35c6 100644
--- a/dashboard/backend/src/schemas/www/sections.ts
+++ b/dashboard/backend/src/schemas/www/sections.ts
@@ -7,6 +7,10 @@ export const wwwSectionBlocks = mysqlTable('www_section_blocks', {
   productId: bigint('product_id', { mode: 'number', unsigned: true }),
   layout: varchar('layout', { length: 30 }).notNull(),
   theme: varchar('theme', { length: 10 }).notNull().default('light'),
+  // 前景文案自定义颜色（空字符串 = 跟随 theme 默认配色）
+  overlineColor: varchar('overline_color', { length: 20 }).notNull().default(''),
+  titleColor: varchar('title_color', { length: 20 }).notNull().default(''),
+  bodyColor: varchar('body_color', { length: 20 }).notNull().default(''),
   bgType: varchar('bg_type', { length: 10 }).notNull().default('color'),
   bgValue: varchar('bg_value', { length: 500 }).notNull().default(''),
   overlayEnabled: tinyint('overlay_enabled').notNull().default(0),
diff --git a/dashboard/frontend/src/typings/api/www.d.ts b/dashboard/frontend/src/typings/api/www.d.ts
index 3ff7543..0c4aa42 100644
--- a/dashboard/frontend/src/typings/api/www.d.ts
+++ b/dashboard/frontend/src/typings/api/www.d.ts
@@ -76,6 +76,9 @@ declare namespace Api {
       product_id: number | null;
       layout: string;
       theme: string;
+      overline_color: string;
+      title_color: string;
+      body_color: string;
       bg_type: string;
       bg_value: string;
       overlay_enabled: boolean;
@@ -109,6 +112,9 @@ declare namespace Api {
       product_id?: number | null;
       layout: string;
       theme?: string;
+      overline_color?: string;
+      title_color?: string;
+      body_color?: string;
       bg_type?: string;
       bg_value?: string;
       overlay_enabled?: boolean;
diff --git a/dashboard/frontend/src/views/www/page/home/components/ColorInput.vue b/dashboard/frontend/src/views/www/page/home/components/ColorInput.vue
new file mode 100644
index 0000000..810a7d0
--- /dev/null
+++ b/dashboard/frontend/src/views/www/page/home/components/ColorInput.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { NColorPicker, NInput } from 'naive-ui';
+
+defineOptions({ name: 'ColorInput' });
+
+const props = defineProps<{ value: string }>();
+const emit = defineEmits<{ (e: 'update:value', value: string): void }>();
+
+// 空值 = 跟随主题默认色
+const model = computed({
+  get: () => props.value,
+  set: v => emit('update:value', v || '')
+});
+
+// 输入框获取焦点后在下方显示取色器（default-show 自动展开面板）；面板关闭后自动收起。
+// 注意：不能把 NColorPicker 塞进 NPopover，双层弹层嵌套会导致取色面板位置跑出框外。
+const showPicker = ref(false);
+</script>
+
+<template>
+  <div class="w-full flex flex-col gap-8px">
+    <NInput
+      v-model:value="model"
+      placeholder="留空则跟随主题默认色"
+      clearable
+      @focus="showPicker = true"
+    />
+    <!-- 空值时取色器内部以白色兜底展示，选中任意颜色即写回 -->
+    <NColorPicker
+      v-if="showPicker"
+      :value="model || '#FFFFFF'"
+      :show-alpha="false"
+      :modes="['hex']"
+      default-show
+      class="w-full"
+      @update:value="v => (model = v)"
+      @update:show="v => !v && (showPicker = false)"
+    />
+  </div>
+</template>
diff --git a/dashboard/frontend/src/views/www/page/home/index.vue b/dashboard/frontend/src/views/www/page/home/index.vue
index 33851c5..c4fea8b 100644
--- a/dashboard/frontend/src/views/www/page/home/index.vue
+++ b/dashboard/frontend/src/views/www/page/home/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, h, onMounted, reactive, ref } from 'vue';
 import { NButton, NSpace, NSwitch, NTag, type DataTableColumns, type FormInst, type SelectOption, type SelectRenderOption } from 'naive-ui';
+import ColorInput from './components/ColorInput.vue';
 import {
   fetchCreateSection,
   fetchDeleteSection,
@@ -64,6 +65,9 @@ const formData = reactive({
   id: null as number | null,
   layout: 'hero_split',
   theme: 'light',
+  overline_color: '',
+  title_color: '',
+  body_color: '',
   bg_type: 'color',
   bg_value: '',
   overlay_enabled: false,
@@ -85,9 +89,23 @@ const formData = reactive({
   media_url_zh: '',
   media_url_en: '',
   video_url: '',
-  is_visible: true
+  is_visible: true,
+  config: { text_position: 'middle_left' } as Record<string, unknown>
 });
 
+// 九宫格文案位置（hero_split 专用）
+const textPositionOptions = [
+  { label: '左上', value: 'top_left' },
+  { label: '中上', value: 'top_center' },
+  { label: '右上', value: 'top_right' },
+  { label: '左中', value: 'middle_left' },
+  { label: '正中', value: 'middle_center' },
+  { label: '右中', value: 'middle_right' },
+  { label: '左下', value: 'bottom_left' },
+  { label: '中下', value: 'bottom_center' },
+  { label: '右下', value: 'bottom_right' }
+];
+
 const columns = computed((): DataTableColumns<Api.Www.SectionBlock> => [
   {
     title: '排序',
@@ -177,6 +195,9 @@ function handleAdd() {
   formData.id = null;
   formData.layout = 'hero_split';
   formData.theme = 'light';
+  formData.overline_color = '';
+  formData.title_color = '';
+  formData.body_color = '';
   formData.bg_type = 'color';
   formData.bg_value = '';
   formData.overlay_enabled = false;
@@ -199,6 +220,7 @@ function handleAdd() {
   formData.media_url_en = '';
   formData.video_url = '';
   formData.is_visible = true;
+  formData.config = { text_position: 'middle_left' };
   dialogVisible.value = true;
 }
 
@@ -207,6 +229,9 @@ function handleEdit(row: Api.Www.SectionBlock) {
   formData.id = row.id;
   formData.layout = row.layout;
   formData.theme = row.theme;
+  formData.overline_color = row.overline_color || '';
+  formData.title_color = row.title_color || '';
+  formData.body_color = row.body_color || '';
   formData.bg_type = row.bg_type;
   formData.bg_value = row.bg_value;
   formData.overlay_enabled = Boolean(row.overlay_enabled);
@@ -229,6 +254,8 @@ function handleEdit(row: Api.Www.SectionBlock) {
   formData.media_url_en = row.media_url_en;
   formData.video_url = row.video_url;
   formData.is_visible = Boolean(row.is_visible);
+  const cfg = (row.config || {}) as Record<string, unknown>;
+  formData.config = { ...cfg, text_position: cfg.text_position || 'middle_left' };
   dialogVisible.value = true;
 }
 
@@ -306,6 +333,16 @@ onMounted(loadData);
             <NRadio v-for="opt in themeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</NRadio>
           </NRadioGroup>
         </NFormItem>
+        <NDivider>文案颜色（留空=跟随主题默认色）</NDivider>
+        <NFormItem label="Overline 颜色">
+          <ColorInput v-model:value="formData.overline_color" />
+        </NFormItem>
+        <NFormItem label="标题颜色">
+          <ColorInput v-model:value="formData.title_color" />
+        </NFormItem>
+        <NFormItem label="副标题/正文颜色">
+          <ColorInput v-model:value="formData.body_color" />
+        </NFormItem>
         <NFormItem label="背景类型">
           <NRadioGroup v-model:value="formData.bg_type">
             <NRadioButton value="color">纯色</NRadioButton>
@@ -315,7 +352,20 @@ onMounted(loadData);
           </NRadioGroup>
         </NFormItem>
         <NFormItem label="背景值">
-          <NInput v-model:value="formData.bg_value" placeholder="颜色值或图片路径" />
+          <NInput v-model:value="formData.bg_value" placeholder="颜色值或图片/视频路径" />
+        </NFormItem>
+        <NFormItem v-if="formData.layout === 'hero_split'" label="文案位置">
+          <div class="grid grid-cols-3 gap-4px">
+            <NButton
+              v-for="pos in textPositionOptions"
+              :key="pos.value"
+              size="tiny"
+              :type="formData.config.text_position === pos.value ? 'primary' : 'default'"
+              @click="formData.config.text_position = pos.value"
+            >
+              {{ pos.label }}
+            </NButton>
+          </div>
         </NFormItem>
         <NFormItem label="遮罩">
           <NSpace align="center">
diff --git a/db/02_sections.sql b/db/02_sections.sql
index eb46505..88e7496 100644
--- a/db/02_sections.sql
+++ b/db/02_sections.sql
@@ -15,6 +15,9 @@ CREATE TABLE IF NOT EXISTS `www_section_blocks` (
   `product_id`      BIGINT UNSIGNED DEFAULT NULL COMMENT '关联产品 ID（page_type=product 时）',
   `layout`          VARCHAR(30)   NOT NULL COMMENT '布局类型: hero_split / hero_center / image_text / two_column / feature_grid / spec_showcase / video_showcase / scroll_narrative / cta_banner / spec_table',
   `theme`           VARCHAR(10)   NOT NULL DEFAULT 'light' COMMENT '主题: light / dark',
+  `overline_color`  VARCHAR(20)   NOT NULL DEFAULT '' COMMENT 'Overline 自定义颜色（空=跟随主题默认色）',
+  `title_color`     VARCHAR(20)   NOT NULL DEFAULT '' COMMENT '标题自定义颜色（空=跟随主题默认色）',
+  `body_color`      VARCHAR(20)   NOT NULL DEFAULT '' COMMENT '副标题/正文自定义颜色（空=跟随主题默认色）',
   `bg_type`         VARCHAR(10)   NOT NULL DEFAULT 'color' COMMENT '背景类型: color / image / video',
   `bg_value`        VARCHAR(500)  NOT NULL DEFAULT '' COMMENT '背景值（颜色值 或 素材路径）',
   `overlay_enabled` TINYINT(1)    NOT NULL DEFAULT 0 COMMENT '是否启用遮罩层',
diff --git a/www/app/assets/css/main.css b/www/app/assets/css/main.css
index 386f902..1721f85 100644
--- a/www/app/assets/css/main.css
+++ b/www/app/assets/css/main.css
@@ -18,3 +18,8 @@ body {
     'Microsoft YaHei',
     sans-serif;
 }
+
+/* 链接统一下划线重置，避免浏览器默认样式 */
+a {
+  text-decoration: none;
+}
diff --git a/www/app/components/AppHeader.vue b/www/app/components/AppHeader.vue
index efb86c0..56f1e2e 100644
--- a/www/app/components/AppHeader.vue
+++ b/www/app/components/AppHeader.vue
@@ -75,8 +75,8 @@ function closeMobile() {
     :class="useTransparent ? 'bg-transparent' : 'bg-white/80 backdrop-blur-md border-b border-gray-100 dark:bg-dark-900/80 dark:border-dark-700'"
   >
     <div class="section-container h-64px flex items-center justify-between">
-      <!-- Logo -->
-      <NuxtLink :to="switchLocalePath(locale)" class="flex items-center gap-8px shrink-0" @click="closeMobile">
+      <!-- Logo：点击返回首页 -->
+      <NuxtLink :to="localePath('/')" class="flex items-center gap-8px shrink-0" @click="closeMobile">
         <img v-if="logoUrl" :src="logoUrl" :alt="site?.site_title || 'Luxsin'" class="h-32px w-auto" />
         <span
           v-else
@@ -99,7 +99,7 @@ function closeMobile() {
           >
             <NuxtLink
               :to="resolveLink(item.link)"
-              class="text-sm font-medium transition-colors flex items-center gap-4px"
+              class="text-base font-medium transition-colors flex items-center gap-4px"
               :class="lightText ? 'text-white/90 hover:text-white' : 'text-gray-700 hover:text-primary dark:text-gray-200'"
             >
               {{ siteStore.navLabel(item) }}
@@ -147,7 +147,7 @@ function closeMobile() {
             v-else-if="isExternal(item.link)"
             :href="item.link"
             :target="item.open_new_tab ? '_blank' : undefined"
-            class="text-sm font-medium transition-colors"
+            class="text-base font-medium transition-colors"
             :class="lightText ? 'text-white/90 hover:text-white' : 'text-gray-700 hover:text-primary dark:text-gray-200'"
           >
             {{ siteStore.navLabel(item) }}
@@ -158,7 +158,7 @@ function closeMobile() {
             v-else
             :to="resolveLink(item.link)"
             :target="item.open_new_tab ? '_blank' : undefined"
-            class="text-sm font-medium transition-colors"
+            class="text-base font-medium transition-colors"
             :class="lightText ? 'text-white/90 hover:text-white' : 'text-gray-700 hover:text-primary dark:text-gray-200'"
           >
             {{ siteStore.navLabel(item) }}
diff --git a/www/app/components/PageHero.vue b/www/app/components/PageHero.vue
new file mode 100644
index 0000000..ae65ee6
--- /dev/null
+++ b/www/app/components/PageHero.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * 内页 Hero 公共区：overline + 标题 + 副标题 + 可选背景图
+ *
+ * 非首页导航栏为 glass 风格（深色文字），因此无背景图时使用深色文字，
+ * 有背景图时叠加半透明遮罩并使用白色文字。
+ */
+defineProps<{
+  title: string;
+  subtitle?: string;
+  overline?: string;
+  bgUrl?: string;
+}>();
+</script>
+
+<template>
+  <section class="relative overflow-hidden">
+    <!-- 背景图 + 遮罩 -->
+    <div v-if="bgUrl" class="absolute inset-0 bg-cover bg-center" :style="{ backgroundImage: `url(${bgUrl})` }" />
+    <div v-if="bgUrl" class="absolute inset-0 bg-black/45" />
+
+    <!-- 内容 -->
+    <div
+      class="section-container relative flex flex-col items-center text-center gap-16px py-72px md:py-96px"
+      :class="bgUrl ? 'text-white' : 'text-gray-900 dark:text-white'"
+    >
+      <p v-if="overline" class="text-sm tracking-[0.35em] uppercase opacity-80 font-medium">
+        {{ overline }}
+      </p>
+      <h1 class="text-3xl md:text-5xl font-bold leading-tight">{{ title }}</h1>
+      <p v-if="subtitle" class="max-w-680px text-base md:text-lg opacity-90 leading-relaxed">
+        {{ subtitle }}
+      </p>
+    </div>
+  </section>
+</template>
diff --git a/www/app/components/section/layouts/LayoutFeatureGrid.vue b/www/app/components/section/layouts/LayoutFeatureGrid.vue
index db8cc60..1765cf3 100644
--- a/www/app/components/section/layouts/LayoutFeatureGrid.vue
+++ b/www/app/components/section/layouts/LayoutFeatureGrid.vue
@@ -3,7 +3,7 @@ import type { SectionBlock } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
+const { overline, title, subtitle, config, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
 
 const features = computed(() => config.value.features ?? []);
 </script>
@@ -12,13 +12,13 @@ const features = computed(() => config.value.features ?? []);
   <div class="section-container py-96px">
     <!-- 标题区 -->
     <div class="text-center max-w-640px mx-auto mb-56px">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
-      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
         {{ title }}
       </h2>
-      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
         {{ subtitle }}
       </p>
     </div>
@@ -32,10 +32,10 @@ const features = computed(() => config.value.features ?? []);
         :class="isDark ? 'bg-white/5 border border-white/10' : 'bg-white border border-gray-100 shadow-sm hover:shadow-md dark:bg-dark-800 dark:border-dark-700'"
       >
         <span v-if="feature.icon" class="text-3xl">{{ feature.icon }}</span>
-        <h3 class="mt-16px text-lg font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        <h3 class="mt-16px text-lg font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
           {{ isEn ? feature.title_en : feature.title_zh }}
         </h3>
-        <p class="mt-8px text-sm leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+        <p class="mt-8px text-sm leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
           {{ isEn ? feature.desc_en : feature.desc_zh }}
         </p>
       </div>
diff --git a/www/app/components/section/layouts/LayoutFullBanner.vue b/www/app/components/section/layouts/LayoutFullBanner.vue
index 325c03b..3d15955 100644
--- a/www/app/components/section/layouts/LayoutFullBanner.vue
+++ b/www/app/components/section/layouts/LayoutFullBanner.vue
@@ -3,21 +3,21 @@ import type { SectionBlock } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, content } = useSectionContent(props.section);
+const { overline, title, subtitle, content, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
 </script>
 
 <template>
   <div class="section-container py-120px flex-col-center text-center max-w-800px">
-    <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="section.theme === 'dark' ? 'text-primary-300' : 'text-primary'">
+    <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="section.theme === 'dark' ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
       {{ overline }}
     </p>
-    <h2 class="mt-16px text-3xl md:text-5xl font-bold leading-tight" :class="section.theme === 'dark' ? 'text-white' : 'text-gray-900 dark:text-white'">
+    <h2 class="mt-16px text-3xl md:text-5xl font-bold leading-tight" :class="section.theme === 'dark' ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
       {{ title }}
     </h2>
-    <p v-if="subtitle" class="mt-20px text-lg md:text-xl" :class="section.theme === 'dark' ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'">
+    <p v-if="subtitle" class="mt-20px text-lg md:text-xl" :class="section.theme === 'dark' ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'" :style="bodyStyle">
       {{ subtitle }}
     </p>
-    <div v-if="content" class="mt-16px text-15px leading-relaxed" :class="section.theme === 'dark' ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" v-html="content" />
+    <div v-if="content" class="mt-16px text-15px leading-relaxed" :class="section.theme === 'dark' ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle" v-html="content" />
     <SectionCta :section="section" class="mt-32px justify-center" />
   </div>
 </template>
diff --git a/www/app/components/section/layouts/LayoutGallery.vue b/www/app/components/section/layouts/LayoutGallery.vue
index ce0153c..8b4005c 100644
--- a/www/app/components/section/layouts/LayoutGallery.vue
+++ b/www/app/components/section/layouts/LayoutGallery.vue
@@ -3,7 +3,7 @@ import type { SectionBlock } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
+const { overline, title, subtitle, config, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
 
 const images = computed(() => config.value.images ?? []);
 </script>
@@ -12,13 +12,13 @@ const images = computed(() => config.value.images ?? []);
   <div class="section-container py-96px">
     <!-- 标题区 -->
     <div class="text-center max-w-640px mx-auto mb-56px">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
-      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
         {{ title }}
       </h2>
-      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
         {{ subtitle }}
       </p>
     </div>
diff --git a/www/app/components/section/layouts/LayoutHeroSplit.vue b/www/app/components/section/layouts/LayoutHeroSplit.vue
index 6dffd13..a6d1955 100644
--- a/www/app/components/section/layouts/LayoutHeroSplit.vue
+++ b/www/app/components/section/layouts/LayoutHeroSplit.vue
@@ -3,28 +3,57 @@ import type { SectionBlock } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, content, mediaUrl, isDark } = useSectionContent(props.section);
+const { overline, title, subtitle, content, mediaUrl, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
+
+// 九宫格文案位置（config.text_position，默认左中）：top/middle/bottom + left/center/right
+const textPosition = computed(() => (props.section.config as Record<string, string> | null)?.text_position ?? 'middle_left');
+
+// 垂直对齐（flex-col 主轴）：top->start / middle->center / bottom->end
+const vAlign = computed(() => ({
+  top: 'justify-start',
+  middle: 'justify-center',
+  bottom: 'justify-end'
+} as Record<string, string>)[textPosition.value.split('_')[0] ?? ''] ?? 'justify-center');
+
+// 水平对齐（flex-col 交叉轴）：left->start / center->center / right->end
+const hAlign = computed(() => ({
+  left: 'items-start',
+  center: 'items-center',
+  right: 'items-end'
+} as Record<string, string>)[textPosition.value.split('_')[1] ?? ''] ?? 'items-start');
+
+// 水平内边距：左列贴左、右列贴右、中列居中留白
+const hPad = computed(() => ({
+  left: 'md:pl-128px md:pr-96px',
+  center: 'md:px-64px',
+  right: 'md:pl-96px md:pr-128px'
+} as Record<string, string>)[textPosition.value.split('_')[1] ?? ''] ?? 'md:px-64px');
 </script>
 
 <template>
-  <div class="section-container aspect-[2/3] md:aspect-auto md:min-h-[min(calc(92vh-64px),54vw)] grid md:grid-cols-2 gap-48px items-center">
-    <!-- 左侧文案 -->
-    <div class="flex flex-col gap-20px self-center md:min-h-[680px]">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
-        {{ overline }}
-      </p>
-      <h2 class="text-3xl md:text-5xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
-        {{ title }}
-      </h2>
-      <p v-if="subtitle" class="text-lg md:text-xl" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'">
-        {{ subtitle }}
-      </p>
-      <div v-if="content" class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" v-html="content" />
-      <SectionCta :section="section" class="mt-8px" />
+  <div class="relative aspect-[2/3] md:aspect-auto md:min-h-[max(680px,min(calc(92vh-64px),54vw))] grid gap-48px px-16px md:px-0">
+    <!-- 文案块：移动端文档流；桌面端全宽绝对定位 + 九宫格对齐 -->
+    <div
+      class="relative z-10 flex flex-col gap-20px py-64px md:py-64px md:absolute md:inset-0"
+      :class="[vAlign, hAlign, hPad]"
+    >
+      <div class="flex flex-col gap-20px max-w-560px">
+        <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
+          {{ overline }}
+        </p>
+        <h2 class="text-3xl md:text-5xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
+          {{ title }}
+        </h2>
+        <p v-if="subtitle" class="text-lg md:text-xl" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'" :style="bodyStyle">
+          {{ subtitle }}
+        </p>
+        <div v-if="content" class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle" v-html="content" />
+        <SectionCta :section="section" class="mt-8px" />
+      </div>
     </div>
 
-    <!-- 右侧图片 -->
-    <div v-if="mediaUrl" class="flex-center">
+    <!-- 图片：移动端文档流；桌面端占右侧一半 -->
+    <div v-if="mediaUrl" class="flex-center md:absolute md:top-0 md:right-0 md:bottom-0 md:w-1/2">
       <img :src="mediaUrl" :alt="title" class="w-full max-w-560px rounded-16px object-cover shadow-lg" />
     </div>
   </div>
diff --git a/www/app/components/section/layouts/LayoutQuote.vue b/www/app/components/section/layouts/LayoutQuote.vue
index cdfb38d..792d7d6 100644
--- a/www/app/components/section/layouts/LayoutQuote.vue
+++ b/www/app/components/section/layouts/LayoutQuote.vue
@@ -4,7 +4,7 @@ import type { SectionBlock } from '~/types/site';
 const props = defineProps<{ section: SectionBlock }>();
 
 // 引言评价：正文 content 作为引用语，subtitle 作为作者/出处
-const { content, subtitle, isDark } = useSectionContent(props.section);
+const { content, subtitle, isDark, titleStyle, bodyStyle } = useSectionContent(props.section);
 </script>
 
 <template>
@@ -13,9 +13,10 @@ const { content, subtitle, isDark } = useSectionContent(props.section);
     <blockquote
       class="mt-8px text-2xl md:text-3xl font-medium leading-relaxed"
       :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'"
+      :style="titleStyle"
       v-html="content"
     />
-    <p v-if="subtitle" class="mt-24px text-sm tracking-wide" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+    <p v-if="subtitle" class="mt-24px text-sm tracking-wide" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
       —— {{ subtitle }}
     </p>
   </div>
diff --git a/www/app/components/section/layouts/LayoutScrollNarrative.vue b/www/app/components/section/layouts/LayoutScrollNarrative.vue
index da4a9cd..33c12cc 100644
--- a/www/app/components/section/layouts/LayoutScrollNarrative.vue
+++ b/www/app/components/section/layouts/LayoutScrollNarrative.vue
@@ -3,7 +3,7 @@ import type { SectionBlock } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
+const { overline, title, subtitle, config, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
 
 const steps = computed(() => config.value.steps ?? []);
 </script>
@@ -12,13 +12,13 @@ const steps = computed(() => config.value.steps ?? []);
   <div class="section-container py-96px">
     <!-- 标题区 -->
     <div class="text-center max-w-640px mx-auto mb-64px">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
-      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
         {{ title }}
       </h2>
-      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
         {{ subtitle }}
       </p>
     </div>
@@ -35,10 +35,10 @@ const steps = computed(() => config.value.steps ?? []);
           <span class="text-4xl font-bold opacity-20" :class="isDark ? 'text-white' : 'text-gray-900'">
             {{ String(idx + 1).padStart(2, '0') }}
           </span>
-          <h3 class="text-xl font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+          <h3 class="text-xl font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
             {{ isEn ? step.title_en : step.title_zh }}
           </h3>
-          <p class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+          <p class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
             {{ isEn ? step.desc_en : step.desc_zh }}
           </p>
         </div>
diff --git a/www/app/components/section/layouts/LayoutSpecTable.vue b/www/app/components/section/layouts/LayoutSpecTable.vue
index 499775a..581da61 100644
--- a/www/app/components/section/layouts/LayoutSpecTable.vue
+++ b/www/app/components/section/layouts/LayoutSpecTable.vue
@@ -3,7 +3,7 @@ import type { SectionBlock, SpecGroup } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, isEn, isDark } = useSectionContent(props.section);
+const { overline, title, subtitle, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
 
 const specGroups = computed<SpecGroup[]>(() => props.section.spec_groups ?? []);
 
@@ -35,13 +35,13 @@ function needToggle(group: SpecGroup): boolean {
   <div class="section-container py-96px">
     <!-- 标题区 -->
     <div class="text-center max-w-640px mx-auto mb-56px">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
-      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
         {{ title }}
       </h2>
-      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
         {{ subtitle }}
       </p>
     </div>
@@ -56,7 +56,7 @@ function needToggle(group: SpecGroup): boolean {
       >
         <!-- 分组标题 -->
         <div class="px-32px py-20px border-b" :class="isDark ? 'border-white/10' : 'border-gray-100 dark:border-dark-700'">
-          <h3 class="text-lg font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+          <h3 class="text-lg font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
             {{ isEn ? group.title_en : group.title_zh }}
           </h3>
         </div>
diff --git a/www/app/components/section/layouts/LayoutSplitContent.vue b/www/app/components/section/layouts/LayoutSplitContent.vue
index 08617df..22bc4aa 100644
--- a/www/app/components/section/layouts/LayoutSplitContent.vue
+++ b/www/app/components/section/layouts/LayoutSplitContent.vue
@@ -3,7 +3,7 @@ import type { SectionBlock } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, content, mediaUrl, isDark } = useSectionContent(props.section);
+const { overline, title, subtitle, content, mediaUrl, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
 </script>
 
 <template>
@@ -15,16 +15,16 @@ const { overline, title, subtitle, content, mediaUrl, isDark } = useSectionConte
 
     <!-- 文案 -->
     <div class="flex flex-col gap-20px order-1 md:order-2">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
-      <h2 class="text-3xl md:text-4xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+      <h2 class="text-3xl md:text-4xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
         {{ title }}
       </h2>
-      <p v-if="subtitle" class="text-lg" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'">
+      <p v-if="subtitle" class="text-lg" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'" :style="bodyStyle">
         {{ subtitle }}
       </p>
-      <div v-if="content" class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" v-html="content" />
+      <div v-if="content" class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle" v-html="content" />
       <SectionCta :section="section" class="mt-8px" />
     </div>
   </div>
diff --git a/www/app/components/section/layouts/LayoutStats.vue b/www/app/components/section/layouts/LayoutStats.vue
index f401a84..5e08608 100644
--- a/www/app/components/section/layouts/LayoutStats.vue
+++ b/www/app/components/section/layouts/LayoutStats.vue
@@ -3,7 +3,7 @@ import type { SectionBlock } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
+const { overline, title, subtitle, config, isEn, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
 
 const stats = computed(() => config.value.stats ?? []);
 </script>
@@ -12,13 +12,13 @@ const stats = computed(() => config.value.stats ?? []);
   <div class="section-container py-96px">
     <!-- 标题区 -->
     <div class="text-center max-w-640px mx-auto mb-64px">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
-      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
         {{ title }}
       </h2>
-      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
         {{ subtitle }}
       </p>
     </div>
@@ -26,10 +26,10 @@ const stats = computed(() => config.value.stats ?? []);
     <!-- 数据统计 -->
     <div class="grid grid-cols-2 lg:grid-cols-4 gap-32px">
       <div v-for="(stat, idx) in stats" :key="idx" class="flex-col-center text-center">
-        <p class="text-4xl md:text-5xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        <p class="text-4xl md:text-5xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
           {{ stat.value }}<span class="text-2xl md:text-3xl ml-4px opacity-70">{{ stat.unit }}</span>
         </p>
-        <p class="mt-12px text-sm" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+        <p class="mt-12px text-sm" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
           {{ isEn ? stat.label_en : stat.label_zh }}
         </p>
       </div>
diff --git a/www/app/components/section/layouts/LayoutVideoShowcase.vue b/www/app/components/section/layouts/LayoutVideoShowcase.vue
index e1aca89..32c507e 100644
--- a/www/app/components/section/layouts/LayoutVideoShowcase.vue
+++ b/www/app/components/section/layouts/LayoutVideoShowcase.vue
@@ -3,7 +3,7 @@ import type { SectionBlock } from '~/types/site';
 
 const props = defineProps<{ section: SectionBlock }>();
 
-const { overline, title, subtitle, isDark } = useSectionContent(props.section);
+const { overline, title, subtitle, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
 
 // 判断是否为可嵌入的 iframe 视频（YouTube / Bilibili）
 const isEmbed = computed(() => /youtube\.com|youtu\.be|bilibili\.com|player\.bilibili\.com/.test(props.section.video_url));
@@ -13,13 +13,13 @@ const isEmbed = computed(() => /youtube\.com|youtu\.be|bilibili\.com|player\.bil
   <div class="section-container py-96px">
     <!-- 标题区 -->
     <div class="text-center max-w-640px mx-auto mb-48px">
-      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
-      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
         {{ title }}
       </h2>
-      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" :style="bodyStyle">
         {{ subtitle }}
       </p>
     </div>
diff --git a/www/app/composables/usePageSeo.ts b/www/app/composables/usePageSeo.ts
new file mode 100644
index 0000000..3ff2dcf
--- /dev/null
+++ b/www/app/composables/usePageSeo.ts
@@ -0,0 +1,36 @@
+import type { PageSeo } from '~/types/site';
+
+/**
+ * 页面 SEO 适配
+ *
+ * 从 dashboard 的 page-seo 配置读取 meta_title / meta_description / meta_keywords / og_image_url，
+ * 应用到当前页面的 useHead；未配置时回退到全局 SEO 默认值或页面默认标题。
+ */
+export async function usePageSeo(pageType: string, entityId?: number, fallbackTitle?: string) {
+  const { getPageSeo } = useSiteApi();
+  const siteStore = useSiteStore();
+  // 注意：本函数可能在 onMounted 等异步上下文中被调用，useI18n 要求 setup 顶层，
+  // 这里改用全局 i18n 实例（$i18n.t 跟随当前 locale，任意上下文安全）
+  const i18n = (useNuxtApp() as unknown as { $i18n?: { t(key: string): string } }).$i18n;
+  const t = (key: string) => i18n?.t(key) || key;
+
+  let seo: PageSeo | null = null;
+  try {
+    seo = await getPageSeo(pageType, entityId);
+  } catch {
+    seo = null;
+  }
+
+  const title = seo?.meta_title || fallbackTitle || t('app.name');
+  const description = seo?.meta_description || siteStore.seo?.meta_description || '';
+  const keywords = seo?.meta_keywords || siteStore.seo?.meta_keywords || '';
+
+  useHead({
+    title,
+    meta: [
+      ...(description ? [{ name: 'description', content: description }] : []),
+      ...(keywords ? [{ name: 'keywords', content: keywords }] : []),
+      ...(seo?.og_image_url ? [{ property: 'og:image', content: seo.og_image_url }] : [])
+    ]
+  });
+}
diff --git a/www/app/composables/useSectionContent.ts b/www/app/composables/useSectionContent.ts
index caca01e..39c1b72 100644
--- a/www/app/composables/useSectionContent.ts
+++ b/www/app/composables/useSectionContent.ts
@@ -23,6 +23,12 @@ export function useSectionContent(section: SectionBlock) {
   /** 深色主题区块 */
   const isDark = computed(() => section.theme === 'dark');
 
+  // 前景文案自定义颜色（空 = 跟随 theme 默认配色，由布局组件的 class 控制）
+  // 内联 style 优先级高于 class，非空时直接覆盖默认色
+  const overlineStyle = computed(() => (section.overline_color ? { color: section.overline_color } : undefined));
+  const titleStyle = computed(() => (section.title_color ? { color: section.title_color } : undefined));
+  const bodyStyle = computed(() => (section.body_color ? { color: section.body_color } : undefined));
+
   return {
     isEn,
     overline,
@@ -33,6 +39,9 @@ export function useSectionContent(section: SectionBlock) {
     ctaSecondaryText,
     mediaUrl,
     config,
-    isDark
+    isDark,
+    overlineStyle,
+    titleStyle,
+    bodyStyle
   };
 }
diff --git a/www/app/composables/useSiteApi.ts b/www/app/composables/useSiteApi.ts
index 4d16d2e..37c08e8 100644
--- a/www/app/composables/useSiteApi.ts
+++ b/www/app/composables/useSiteApi.ts
@@ -1,4 +1,18 @@
-import type { GlobalConfig, NavConfig, SectionBlock, I18nEntry, ProductsData } from '~/types/site';
+import type {
+  GlobalConfig,
+  NavConfig,
+  SectionBlock,
+  I18nEntry,
+  ProductsData,
+  NewsArticle,
+  NewsDetail,
+  NewsListConfig,
+  ProductListConfig,
+  AboutConfig,
+  SupportConfig,
+  ContactConfig,
+  PageSeo
+} from '~/types/site';
 
 /**
  * 官网前台公开接口服务层
@@ -35,5 +49,37 @@ export function useSiteApi() {
     return get<ProductsData>('/site/products');
   }
 
-  return { getGlobal, getNav, getSections, getI18n, getProducts };
+  /** 新闻列表（仅已发布） */
+  function getNews(skip = 0, limit = 9) {
+    return get<{ items: NewsArticle[]; total: number; skip: number; limit: number }>('/site/news', { skip, limit });
+  }
+
+  /** 新闻详情（按 slug，含推荐） */
+  function getNewsDetail(slug: string) {
+    return get<NewsDetail>(`/site/news/${encodeURIComponent(slug)}`);
+  }
+
+  /** 页面配置：product-list / news-list / about / support */
+  function getPageConfig<T>(type: 'product-list' | 'news-list' | 'about' | 'support') {
+    return get<T>('/site/page', { type });
+  }
+
+  /** 页面 SEO 配置 */
+  function getPageSeo(pageType: string, entityId?: number) {
+    const params: Record<string, unknown> = { page_type: pageType };
+    if (entityId) params.entity_id = entityId;
+    return get<PageSeo | null>('/site/page-seo', params);
+  }
+
+  /** 联系表单配置 + 字段 */
+  function getContact() {
+    return get<ContactConfig>('/site/contact');
+  }
+
+  /** 提交联系表单 */
+  function submitContact(formData: Record<string, string>) {
+    return useRequest().post<null>('/site/contact/submit', { form_data: formData });
+  }
+
+  return { getGlobal, getNav, getSections, getI18n, getProducts, getNews, getNewsDetail, getPageConfig, getPageSeo, getContact, submitContact };
 }
diff --git a/www/app/pages/about.vue b/www/app/pages/about.vue
new file mode 100644
index 0000000..18cb60d
--- /dev/null
+++ b/www/app/pages/about.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { AboutConfig, AboutFeature } from '~/types/site';
+import { parseJson } from '~/utils/parseJson';
+
+const { t, locale } = useI18n();
+const localePath = useLocalePath();
+const { getPageConfig } = useSiteApi();
+
+// SEO：关于我们
+await usePageSeo('about', undefined, `${t('app.name')} - ${t('nav.about')}`);
+
+const config = ref<AboutConfig | null>(null);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    config.value = await getPageConfig<AboutConfig>('about');
+  } catch {
+    config.value = null;
+  } finally {
+    loading.value = false;
+  }
+});
+
+// ===== 按语言取值 =====
+const heroTitle = computed(() => (locale.value === 'en' ? config.value?.hero_title_en : config.value?.hero_title_zh) || (locale.value === 'en' ? 'About Us' : '关于我们'));
+const heroSubtitle = computed(() => (locale.value === 'en' ? config.value?.hero_subtitle_en : config.value?.hero_subtitle_zh) || '');
+const s1Title = computed(() => (locale.value === 'en' ? config.value?.s1_title_en : config.value?.s1_title_zh) || '');
+const s1Content = computed(() => (locale.value === 'en' ? config.value?.s1_content_en : config.value?.s1_content_zh) || '');
+const s1Cta = computed(() => (locale.value === 'en' ? config.value?.s1_cta_en : config.value?.s1_cta_zh) || '');
+const s2Title = computed(() => (locale.value === 'en' ? config.value?.s2_title_en : config.value?.s2_title_zh) || '');
+const s3Title = computed(() => (locale.value === 'en' ? config.value?.s3_title_en : config.value?.s3_title_zh) || '');
+const s3Cta = computed(() => (locale.value === 'en' ? config.value?.s3_cta_en : config.value?.s3_cta_zh) || '');
+
+// s2_features：JSON 字符串或数组
+const features = computed<AboutFeature[]>(() =>
+  parseJson<AboutFeature[]>(config.value?.s2_features, [])
+);
+
+function featureTitle(f: AboutFeature): string {
+  return locale.value === 'en' ? f.title_en : f.title_zh;
+}
+function featureDesc(f: AboutFeature): string {
+  return locale.value === 'en' ? f.desc_en : f.desc_zh;
+}
+
+// 是否需要展示各区块
+const hasS1 = computed(() => Boolean(s1Title.value || s1Content.value || config.value?.s1_image_url));
+const hasS2 = computed(() => Boolean(s2Title.value && features.value.length));
+const hasS3 = computed(() => Boolean(s3Title.value || s3Cta.value));
+</script>
+
+<template>
+  <div>
+    <PageHero
+      :title="heroTitle"
+      :subtitle="heroSubtitle || undefined"
+      :bg-url="config?.hero_bg_url || undefined"
+    />
+
+    <div v-if="loading" class="py-80px text-center text-sm text-gray-400">
+      {{ t('common.loading') }}
+    </div>
+
+    <div v-else>
+      <!-- S1：图文介绍 -->
+      <section v-if="hasS1" class="section-container py-64px md:py-96px">
+        <div class="grid md:grid-cols-2 gap-40px md:gap-64px items-center">
+          <div class="flex flex-col gap-20px order-2 md:order-1">
+            <h2 v-if="s1Title" class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">{{ s1Title }}</h2>
+            <!-- 富文本（dashboard 端为 HTML 内容） -->
+            <div v-if="s1Content" class="text-base md:text-lg text-gray-600 dark:text-gray-300 leading-relaxed" v-html="s1Content" />
+            <div v-if="s1Cta">
+              <NuxtLink
+                :to="localePath(config?.s1_cta_url || '/contact')"
+                class="inline-block px-28px py-12px rounded-8px bg-primary text-white text-sm font-medium hover:opacity-90 transition-opacity"
+              >
+                {{ s1Cta }}
+              </NuxtLink>
+            </div>
+          </div>
+          <div v-if="config?.s1_image_url" class="order-1 md:order-2">
+            <img
+              :src="config.s1_image_url"
+              :alt="s1Title"
+              class="w-full rounded-16px shadow-lg object-cover aspect-[4/3]"
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- S2：核心优势 -->
+      <section v-if="hasS2" class="bg-gray-50 dark:bg-dark-900 border-y border-gray-100 dark:border-dark-700">
+        <div class="section-container py-64px md:py-96px">
+          <h2 class="text-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-48px">{{ s2Title }}</h2>
+          <div class="grid gap-24px sm:grid-cols-2 lg:grid-cols-3">
+            <div
+              v-for="(f, idx) in features"
+              :key="idx"
+              class="p-24px rounded-16px bg-white dark:bg-dark-800 border border-gray-100 dark:border-dark-700 hover:shadow-lg transition-shadow"
+            >
+              <h3 class="font-semibold text-gray-900 dark:text-white mb-8px">{{ featureTitle(f) }}</h3>
+              <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">{{ featureDesc(f) }}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- S3：CTA -->
+      <section v-if="hasS3" class="section-container py-64px md:py-96px text-center">
+        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-32px">{{ s3Title }}</h2>
+        <NuxtLink
+          v-if="s3Cta"
+          :to="localePath(config?.s3_cta_url || '/contact')"
+          class="inline-block px-32px py-12px rounded-8px bg-primary text-white text-sm font-medium hover:opacity-90 transition-opacity"
+        >
+          {{ s3Cta }}
+        </NuxtLink>
+      </section>
+
+      <!-- 空配置提示 -->
+      <div v-if="!hasS1 && !hasS2 && !hasS3" class="section-container py-80px text-center">
+        <p class="text-gray-400">{{ t('common.empty') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/www/app/pages/contact.vue b/www/app/pages/contact.vue
new file mode 100644
index 0000000..7117c9b
--- /dev/null
+++ b/www/app/pages/contact.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import type { ContactConfig, FormField } from '~/types/site';
+import { parseJson } from '~/utils/parseJson';
+import { ApiError } from '~/composables/useRequest';
+
+const { t, locale } = useI18n();
+const { getContact, submitContact } = useSiteApi();
+
+// SEO：联系页（dashboard 未提供 contact 类型，用默认标题）
+useHead({
+  title: () => `${t('app.name')} - ${t('nav.contact')}`
+});
+
+const config = ref<ContactConfig | null>(null);
+const loading = ref(true);
+
+// ===== 表单状态 =====
+const values = reactive<Record<string, string>>({});
+const errors = ref<Record<string, string>>({});
+const submitting = ref(false);
+const submitted = ref(false);
+const notice = ref('');
+
+onMounted(async () => {
+  try {
+    config.value = await getContact();
+    // 初始化字段值
+    for (const f of config.value?.fields || []) {
+      values[fieldKey(f)] = '';
+    }
+  } catch {
+    config.value = null;
+  } finally {
+    loading.value = false;
+  }
+});
+
+const fields = computed<FormField[]>(() => config.value?.fields || []);
+const settings = computed(() => config.value?.settings);
+
+/** 字段在提交数据中的 key：使用当前语言的字段名（与后端必填校验匹配） */
+function fieldKey(f: FormField): string {
+  return locale.value === 'en' ? f.name_en : f.name_zh;
+}
+function fieldLabel(f: FormField): string {
+  return locale.value === 'en' ? f.name_en : f.name_zh;
+}
+function fieldPlaceholder(f: FormField): string {
+  return locale.value === 'en' ? f.placeholder_en : f.placeholder_zh;
+}
+function fieldOptions(f: FormField): { label: string; value: string }[] {
+  return parseJson<{ label: string; value: string }[]>(f.options_json, []);
+}
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const PHONE_RE = /^[+0-9()\-\s]{6,20}$/;
+
+function validate(): boolean {
+  const errs: Record<string, string> = {};
+  for (const f of fields.value) {
+    const v = (values[fieldKey(f)] || '').trim();
+    if (f.is_required && !v) {
+      errs[fieldKey(f)] = t('form.required');
+      continue;
+    }
+    if (!v) continue;
+    if (f.field_type === 'email' && !EMAIL_RE.test(v)) {
+      errs[fieldKey(f)] = t('form.invalidEmail');
+    }
+    if (f.field_type === 'phone' && !PHONE_RE.test(v)) {
+      errs[fieldKey(f)] = t('form.invalidPhone');
+    }
+  }
+  errors.value = errs;
+  return Object.keys(errs).length === 0;
+}
+
+async function handleSubmit() {
+  if (submitting.value) return;
+  if (!validate()) return;
+
+  submitting.value = true;
+  submitted.value = false;
+  notice.value = '';
+  try {
+    await submitContact({ ...values });
+    submitted.value = true;
+    notice.value = locale.value === 'en'
+      ? settings.value?.success_message_en || t('form.success')
+      : settings.value?.success_message_zh || t('form.success');
+    // 清空表单
+    for (const k of Object.keys(values)) values[k] = '';
+  } catch (e) {
+    notice.value = e instanceof ApiError
+      ? e.message
+      : (locale.value === 'en'
+        ? settings.value?.error_message_en || t('form.failed')
+        : settings.value?.error_message_zh || t('form.failed'));
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <PageHero
+      :title="t('nav.contact')"
+      :subtitle="t('form.subtitle')"
+    />
+
+    <div v-if="loading" class="py-80px text-center text-sm text-gray-400">
+      {{ t('common.loading') }}
+    </div>
+
+    <div v-else class="section-container py-64px md:py-80px max-w-720px">
+      <!-- 提交成功/失败提示 -->
+      <div
+        v-if="notice"
+        class="mb-24px px-20px py-14px rounded-8px text-sm leading-relaxed"
+        :class="submitted
+          ? 'bg-green-50 text-green-700 border border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800'
+          : 'bg-red-50 text-red-600 border border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800'"
+      >
+        {{ notice }}
+      </div>
+
+      <!-- 表单字段：由 CMS 动态配置 -->
+      <form v-if="fields.length" class="flex flex-col gap-20px" @submit.prevent="handleSubmit">
+        <div v-for="f in fields" :key="f.id" class="flex flex-col gap-8px">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-200">
+            {{ fieldLabel(f) }}
+            <span v-if="f.is_required" class="text-red-500 ml-4px">*</span>
+          </label>
+
+          <!-- 下拉选择 -->
+          <select
+            v-if="f.field_type === 'select'"
+            v-model="values[fieldKey(f)]"
+            class="px-16px py-12px rounded-8px border text-sm bg-white dark:bg-dark-800 dark:text-gray-100 outline-none transition-colors"
+            :class="errors[fieldKey(f)]
+              ? 'border-red-400 focus:border-red-400'
+              : 'border-gray-200 dark:border-dark-600 focus:border-primary'"
+          >
+            <option value="">{{ fieldPlaceholder(f) }}</option>
+            <option v-for="opt in fieldOptions(f)" :key="opt.value" :value="opt.value">
+              {{ opt.label }}
+            </option>
+          </select>
+
+          <!-- 多行文本 -->
+          <textarea
+            v-else-if="f.field_type === 'textarea'"
+            v-model="values[fieldKey(f)]"
+            :placeholder="fieldPlaceholder(f)"
+            rows="5"
+            class="px-16px py-12px rounded-8px border text-sm bg-white dark:bg-dark-800 dark:text-gray-100 outline-none transition-colors resize-y"
+            :class="errors[fieldKey(f)]
+              ? 'border-red-400 focus:border-red-400'
+              : 'border-gray-200 dark:border-dark-600 focus:border-primary'"
+          ></textarea>
+
+          <!-- 单行文本 / 邮箱 / 电话 -->
+          <input
+            v-else
+            v-model="values[fieldKey(f)]"
+            :type="f.field_type === 'email' ? 'email' : f.field_type === 'phone' ? 'tel' : 'text'"
+            :placeholder="fieldPlaceholder(f)"
+            class="px-16px py-12px rounded-8px border text-sm bg-white dark:bg-dark-800 dark:text-gray-100 outline-none transition-colors"
+            :class="errors[fieldKey(f)]
+              ? 'border-red-400 focus:border-red-400'
+              : 'border-gray-200 dark:border-dark-600 focus:border-primary'"
+          />
+
+          <p v-if="errors[fieldKey(f)]" class="text-xs text-red-500">{{ errors[fieldKey(f)] }}</p>
+        </div>
+
+        <button
+          type="submit"
+          :disabled="submitting"
+          class="mt-8px px-32px py-12px rounded-8px bg-primary text-white text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed self-start"
+        >
+          {{ submitting ? t('common.loading') : t('form.submit') }}
+        </button>
+      </form>
+
+      <!-- 未配置字段 -->
+      <div v-else class="py-80px text-center">
+        <p class="text-gray-400">{{ t('common.empty') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/www/app/pages/index.vue b/www/app/pages/index.vue
index 1c8f474..29b3487 100644
--- a/www/app/pages/index.vue
+++ b/www/app/pages/index.vue
@@ -4,9 +4,8 @@ import type { SectionBlock } from '~/types/site';
 const { t } = useI18n();
 const { getSections } = useSiteApi();
 
-useHead({
-  title: () => `${t('app.name')} - ${t('nav.home')}`
-});
+// SEO：首页（page-seo 配置优先，回退默认标题）
+await usePageSeo('home', undefined, `${t('app.name')} - ${t('nav.home')}`);
 
 // 拉取首页区块列表（仅可见，按 sort_order 排序）
 const sections = ref<SectionBlock[]>([]);
diff --git a/www/app/pages/news/[slug].vue b/www/app/pages/news/[slug].vue
new file mode 100644
index 0000000..1c5c278
--- /dev/null
+++ b/www/app/pages/news/[slug].vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { NewsArticle, NewsDetail } from '~/types/site';
+
+const { t, locale } = useI18n();
+const localePath = useLocalePath();
+const route = useRoute();
+const { getNewsDetail } = useSiteApi();
+
+const slug = String(route.params.slug || '');
+
+const article = ref<NewsDetail | null>(null);
+const loading = ref(true);
+const notFound = ref(false);
+
+onMounted(async () => {
+  try {
+    const res = await getNewsDetail(slug);
+    if (!res) {
+      notFound.value = true;
+      return;
+    }
+    article.value = res;
+    // SEO：新闻详情页
+    await usePageSeo('news_detail', res.id, locale.value === 'en' ? res.title_en : res.title_zh);
+  } catch {
+    notFound.value = true;
+  } finally {
+    loading.value = false;
+  }
+});
+
+const title = computed(() => (locale.value === 'en' ? article.value?.title_en : article.value?.title_zh) || '');
+const content = computed(() => (locale.value === 'en' ? article.value?.content_en : article.value?.content_zh) || '');
+
+function formatDate(iso: string | null): string {
+  if (!iso) return '';
+  const d = new Date(iso);
+  return d.toLocaleDateString(locale.value === 'en' ? 'en-US' : 'zh-CN') + ' ' + d.toLocaleTimeString(locale.value === 'en' ? 'en-US' : 'zh-CN', { hour: '2-digit', minute: '2-digit' });
+}
+
+function recTitle(a: NewsArticle): string {
+  return locale.value === 'en' ? a.title_en : a.title_zh;
+}
+</script>
+
+<template>
+  <div v-if="loading" class="min-h-60vh flex-col-center text-sm text-gray-400">
+    {{ t('common.loading') }}
+  </div>
+
+  <!-- 文章不存在 -->
+  <div v-else-if="notFound || !article" class="min-h-60vh flex-col-center px-16px text-center">
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">404</h1>
+    <p class="mt-12px text-gray-500 dark:text-gray-400">{{ t('common.notFoundDesc') }}</p>
+    <NuxtLink
+      :to="localePath('/news')"
+      class="mt-24px px-24px py-10px rounded-6px bg-primary text-white text-sm hover:opacity-90 transition-opacity"
+    >
+      {{ t('nav.news') }}
+    </NuxtLink>
+  </div>
+
+  <div v-else>
+    <!-- 文章头部 -->
+    <section class="section-container py-48px md:py-64px flex flex-col items-center text-center gap-16px">
+      <nav class="flex items-center gap-8px text-sm text-gray-400">
+        <NuxtLink :to="localePath('/')" class="hover:text-primary transition-colors">{{ t('nav.home') }}</NuxtLink>
+        <span>/</span>
+        <NuxtLink :to="localePath('/news')" class="hover:text-primary transition-colors">{{ t('nav.news') }}</NuxtLink>
+      </nav>
+      <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white max-w-860px leading-tight">{{ title }}</h1>
+      <time class="text-sm text-gray-400">{{ formatDate(article.published_at) }}</time>
+    </section>
+
+    <!-- 封面图 -->
+    <div v-if="article.cover_url" class="section-container">
+      <img
+        :src="article.cover_url"
+        :alt="title"
+        class="w-full max-h-480px object-cover rounded-16px shadow-md"
+      />
+    </div>
+
+    <!-- 正文：CMS 输入支持 HTML -->
+    <article class="section-container py-48px md:py-64px">
+      <div
+        class="prose max-w-860px mx-auto text-base md:text-lg leading-relaxed text-gray-700 dark:text-gray-200 break-words"
+        v-html="content"
+      />
+    </article>
+
+    <!-- 推荐文章 -->
+    <section v-if="article.recommendations?.length" class="border-t border-gray-100 dark:border-dark-700 bg-gray-50 dark:bg-dark-900">
+      <div class="section-container py-48px md:py-64px">
+        <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-24px">
+          {{ t('common.relatedNews') }}
+        </h2>
+        <div class="grid gap-16px sm:grid-cols-2 lg:grid-cols-3">
+          <NuxtLink
+            v-for="rec in article.recommendations"
+            :key="rec.id"
+            :to="localePath(`/news/${rec.slug}`)"
+            class="group flex flex-col rounded-12px border border-gray-100 dark:border-dark-700 overflow-hidden bg-white dark:bg-dark-800 hover:shadow-md hover:-translate-y-2px transition-all duration-300"
+          >
+            <div class="aspect-[16/8] bg-gray-50 dark:bg-dark-700 overflow-hidden">
+              <img v-if="rec.cover_url" :src="rec.cover_url" :alt="recTitle(rec)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+            </div>
+            <div class="p-16px flex flex-col gap-6px">
+              <h3 class="font-medium text-gray-900 dark:text-white group-hover:text-primary transition-colors line-clamp-1">
+                {{ recTitle(rec) }}
+              </h3>
+              <time class="text-xs text-gray-400">{{ formatDate(rec.published_at) }}</time>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+/* 正文 HTML 排版（CMS 输入支持 HTML） */
+.prose :deep(h2),
+.prose :deep(h3),
+.prose :deep(h4) {
+  margin-top: 1.5em;
+  margin-bottom: 0.6em;
+  font-weight: 700;
+  color: inherit;
+}
+.prose :deep(h2) {
+  font-size: 1.5em;
+}
+.prose :deep(h3) {
+  font-size: 1.25em;
+}
+.prose :deep(p) {
+  margin: 1em 0;
+}
+.prose :deep(ul),
+.prose :deep(ol) {
+  margin: 1em 0;
+  padding-left: 1.5em;
+  list-style: revert;
+}
+.prose :deep(img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+  margin: 1.5em auto;
+  display: block;
+}
+.prose :deep(a) {
+  color: #2563eb;
+  text-decoration: underline;
+}
+.prose :deep(blockquote) {
+  border-left: 4px solid #d1d5db;
+  padding-left: 1em;
+  color: #6b7280;
+  margin: 1.5em 0;
+}
+.prose :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5em 0;
+}
+.prose :deep(th),
+.prose :deep(td) {
+  border: 1px solid #e5e7eb;
+  padding: 8px 12px;
+}
+.prose :deep(pre) {
+  background: #f3f4f6;
+  padding: 1em;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 1.5em 0;
+}
+.prose :deep(code) {
+  background: #f3f4f6;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+</style>
diff --git a/www/app/pages/news/index.vue b/www/app/pages/news/index.vue
new file mode 100644
index 0000000..9addb48
--- /dev/null
+++ b/www/app/pages/news/index.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import type { NewsArticle, NewsListConfig } from '~/types/site';
+
+const { t, locale } = useI18n();
+const localePath = useLocalePath();
+const { getNews, getPageConfig } = useSiteApi();
+
+// SEO：新闻列表页
+await usePageSeo('news', undefined, `${t('app.name')} - ${t('nav.news')}`);
+
+// ===== 页面配置 =====
+const config = ref<NewsListConfig | null>(null);
+
+// ===== 文章列表 + 分页 =====
+const articles = ref<NewsArticle[]>([]);
+const total = ref(0);
+const page = ref(1);
+const loading = ref(true);
+const loadingMore = ref(false);
+const noMore = ref(false);
+
+const pageSize = computed(() => config.value?.page_size || 9);
+const totalPages = computed(() => Math.max(Math.ceil(total.value / pageSize.value), 1));
+
+async function loadArticles() {
+  const skip = (page.value - 1) * pageSize.value;
+  try {
+    const res = await getNews(skip, pageSize.value);
+    articles.value = res?.items ?? [];
+    total.value = res?.total ?? 0;
+    noMore.value = articles.value.length >= (res?.total ?? 0);
+  } catch {
+    articles.value = [];
+  }
+}
+
+async function loadMore() {
+  if (loadingMore.value || noMore.value) return;
+  loadingMore.value = true;
+  try {
+    const skip = articles.value.length;
+    const res = await getNews(skip, pageSize.value);
+    const items = res?.items ?? [];
+    articles.value = [...articles.value, ...items];
+    total.value = res?.total ?? 0;
+    noMore.value = articles.value.length >= total.value;
+  } catch {
+    // ignore
+  } finally {
+    loadingMore.value = false;
+  }
+}
+
+onMounted(async () => {
+  try {
+    const [cfg] = await Promise.all([getPageConfig<NewsListConfig>('news-list')]);
+    config.value = cfg;
+  } catch {
+    config.value = null;
+  }
+  await loadArticles();
+  loading.value = false;
+});
+
+function goPage(p: number) {
+  if (p < 1 || p > totalPages.value || p === page.value) return;
+  page.value = p;
+  loadArticles();
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+const heroTitle = computed(() => (locale.value === 'en' ? config.value?.hero_title_en : config.value?.hero_title_zh) || (locale.value === 'en' ? 'News' : '新闻中心'));
+const heroSubtitle = computed(() => (locale.value === 'en' ? config.value?.hero_subtitle_en : config.value?.hero_subtitle_zh) || '');
+
+function formatDate(iso: string | null): string {
+  if (!iso) return '';
+  return new Date(iso).toLocaleDateString(locale.value === 'en' ? 'en-US' : 'zh-CN');
+}
+</script>
+
+<template>
+  <div>
+    <PageHero
+      :title="heroTitle"
+      :subtitle="heroSubtitle || undefined"
+      :bg-url="config?.hero_bg_url || undefined"
+    />
+
+    <div v-if="loading" class="py-80px text-center text-sm text-gray-400">
+      {{ t('common.loading') }}
+    </div>
+
+    <div v-else class="section-container py-64px md:py-80px">
+      <!-- 文章卡片网格 -->
+      <div v-if="articles.length" class="grid gap-24px sm:grid-cols-2 lg:grid-cols-3">
+        <NuxtLink
+          v-for="article in articles"
+          :key="article.id"
+          :to="localePath(`/news/${article.slug}`)"
+          class="group flex flex-col rounded-16px border border-gray-100 dark:border-dark-700 overflow-hidden bg-white dark:bg-dark-800 hover:shadow-xl hover:-translate-y-4px transition-all duration-300"
+        >
+          <div class="aspect-[16/9] bg-gray-50 dark:bg-dark-700 overflow-hidden">
+            <img
+              v-if="article.cover_url"
+              :src="article.cover_url"
+              :alt="locale === 'en' ? article.title_en : article.title_zh"
+              class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+            />
+            <div v-else class="w-full h-full flex-center text-gray-300 dark:text-gray-600 text-4xl">📰</div>
+          </div>
+          <div class="p-20px flex flex-col gap-8px flex-1">
+            <time class="text-xs text-gray-400">{{ formatDate(article.published_at) }}</time>
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-primary transition-colors line-clamp-2">
+              {{ locale === 'en' ? article.title_en : article.title_zh }}
+            </h2>
+            <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
+              {{ locale === 'en' ? article.summary_en : article.summary_zh }}
+            </p>
+          </div>
+        </NuxtLink>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else class="py-80px text-center">
+        <p class="text-gray-400">{{ t('common.empty') }}</p>
+      </div>
+
+      <!-- 分页：页码模式 -->
+      <div
+        v-if="articles.length && config?.pagination_mode !== 'load_more' && totalPages > 1"
+        class="mt-48px flex items-center justify-center gap-8px"
+      >
+        <button
+          :disabled="page <= 1"
+          class="px-12px py-6px rounded-6px border border-gray-200 dark:border-dark-600 text-sm text-gray-600 dark:text-gray-300 disabled:opacity-40 disabled:cursor-not-allowed hover:border-primary transition-colors"
+          @click="goPage(page - 1)"
+        >
+          ‹
+        </button>
+        <button
+          v-for="p in totalPages"
+          :key="p"
+          class="min-w-32px px-8px py-6px rounded-6px border text-sm transition-colors"
+          :class="p === page
+            ? 'bg-primary border-primary text-white'
+            : 'border-gray-200 dark:border-dark-600 text-gray-600 dark:text-gray-300 hover:border-primary'"
+          @click="goPage(p)"
+        >
+          {{ p }}
+        </button>
+        <button
+          :disabled="page >= totalPages"
+          class="px-12px py-6px rounded-6px border border-gray-200 dark:border-dark-600 text-sm text-gray-600 dark:text-gray-300 disabled:opacity-40 disabled:cursor-not-allowed hover:border-primary transition-colors"
+          @click="goPage(page + 1)"
+        >
+          ›
+        </button>
+      </div>
+
+      <!-- 分页：加载更多模式 -->
+      <div v-else-if="articles.length && !noMore" class="mt-48px flex justify-center">
+        <button
+          class="px-32px py-10px rounded-8px border border-gray-200 dark:border-dark-600 text-sm text-gray-700 dark:text-gray-200 hover:border-primary hover:text-primary transition-colors"
+          :disabled="loadingMore"
+          @click="loadMore"
+        >
+          {{ loadingMore ? t('common.loading') : t('common.loadMore') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/www/app/pages/products/[slug].vue b/www/app/pages/products/[slug].vue
new file mode 100644
index 0000000..c0bfcb4
--- /dev/null
+++ b/www/app/pages/products/[slug].vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { SectionBlock, Product, ProductSeries } from '~/types/site';
+
+const { t, locale } = useI18n();
+const localePath = useLocalePath();
+const route = useRoute();
+const siteStore = useSiteStore();
+const { getSections, getProducts } = useSiteApi();
+
+const slug = String(route.params.slug || '');
+
+// ===== 查找产品（优先用 store 数据，直接访问时主动加载） =====
+const product = ref<Product | null>(null);
+const series = ref<ProductSeries | null>(null);
+const sections = ref<SectionBlock[]>([]);
+const loading = ref(true);
+const notFound = ref(false);
+
+async function loadProduct() {
+  const { productSeries } = storeToRefs(siteStore);
+  // store 未初始化或未命中时，主动拉取一次
+  if (!siteStore.loaded && !siteStore.loading) {
+    await siteStore.init();
+  }
+  for (const s of productSeries.value || []) {
+    const p = (s.products || []).find((item) => item.slug === slug);
+    if (p) {
+      product.value = p;
+      series.value = s;
+      break;
+    }
+  }
+  // 兜底：直接调接口
+  if (!product.value) {
+    try {
+      const data = await getProducts();
+      for (const s of data?.series || []) {
+        const p = (s.products || []).find((item) => item.slug === slug);
+        if (p) {
+          product.value = p;
+          series.value = s;
+          break;
+        }
+      }
+    } catch {
+      // ignore
+    }
+  }
+}
+
+onMounted(async () => {
+  try {
+    await loadProduct();
+    if (!product.value) {
+      notFound.value = true;
+      return;
+    }
+    // SEO：产品详情页
+    await usePageSeo('product_detail', product.value.id, product.value.name_zh);
+    // 产品详情区块（page_type=product_detail + product_id）
+    const res = await getSections('product_detail', product.value.id);
+    sections.value = res?.items ?? [];
+  } catch {
+    // ignore
+  } finally {
+    loading.value = false;
+  }
+});
+
+// ===== 同系列其他产品 =====
+const siblings = computed(() =>
+  (series.value?.products || []).filter((p) => p.slug !== slug)
+);
+
+function productName(p: Product): string {
+  return locale.value === 'en' ? p.name_en : p.name_zh;
+}
+</script>
+
+<template>
+  <div v-if="loading" class="min-h-60vh flex-col-center text-sm text-gray-400">
+    {{ t('common.loading') }}
+  </div>
+
+  <!-- 产品不存在 -->
+  <div v-else-if="notFound || !product" class="min-h-60vh flex-col-center px-16px text-center">
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">404</h1>
+    <p class="mt-12px text-gray-500 dark:text-gray-400">{{ t('common.notFoundDesc') }}</p>
+    <NuxtLink
+      :to="localePath('/products')"
+      class="mt-24px px-24px py-10px rounded-6px bg-primary text-white text-sm hover:opacity-90 transition-opacity"
+    >
+      {{ t('nav.products') }}
+    </NuxtLink>
+  </div>
+
+  <div v-else>
+    <!-- 产品头部：面包屑 + 名称 + 简介 -->
+    <section class="section-container py-48px md:py-64px flex flex-col gap-12px">
+      <nav class="flex items-center gap-8px text-sm text-gray-400">
+        <NuxtLink :to="localePath('/')" class="hover:text-primary transition-colors">{{ t('nav.home') }}</NuxtLink>
+        <span>/</span>
+        <NuxtLink :to="localePath('/products')" class="hover:text-primary transition-colors">{{ t('nav.products') }}</NuxtLink>
+        <span>/</span>
+        <span class="text-gray-600 dark:text-gray-300">{{ productName(product) }}</span>
+      </nav>
+      <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mt-8px">{{ productName(product) }}</h1>
+      <p class="text-base md:text-lg text-gray-500 dark:text-gray-400 max-w-760px leading-relaxed">
+        {{ locale === 'en' ? product.intro_en : product.intro_zh }}
+      </p>
+    </section>
+
+    <!-- 详情区块：由 CMS 的 Section 组合渲染 -->
+    <SectionRenderer v-for="section in sections" :key="section.id" :section="section" />
+
+    <!-- 空区块提示 -->
+    <div v-if="!sections.length" class="section-container py-64px text-center">
+      <p class="text-gray-400">{{ t('common.empty') }}</p>
+    </div>
+
+    <!-- 同系列其他产品 -->
+    <section v-if="siblings.length" class="border-t border-gray-100 dark:border-dark-700 bg-gray-50 dark:bg-dark-900">
+      <div class="section-container py-48px md:py-64px">
+        <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-24px">
+          {{ t('common.moreInSeries') }}
+        </h2>
+        <div class="grid gap-16px sm:grid-cols-2 lg:grid-cols-3">
+          <NuxtLink
+            v-for="p in siblings"
+            :key="p.id"
+            :to="localePath(`/products/${p.slug}`)"
+            class="group flex items-center gap-16px p-16px rounded-12px border border-gray-100 dark:border-dark-700 bg-white dark:bg-dark-800 hover:shadow-md hover:-translate-y-2px transition-all duration-300"
+          >
+            <div class="w-64px h-48px rounded-8px bg-gray-50 dark:bg-dark-700 overflow-hidden shrink-0">
+              <img v-if="p.cover_url" :src="p.cover_url" :alt="productName(p)" class="w-full h-full object-cover" />
+            </div>
+            <div class="flex flex-col gap-4px min-w-0">
+              <span class="font-medium text-gray-900 dark:text-white group-hover:text-primary transition-colors truncate">
+                {{ productName(p) }}
+              </span>
+              <span class="text-xs text-gray-400 truncate">{{ locale === 'en' ? p.intro_en : p.intro_zh }}</span>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/www/app/pages/products/index.vue b/www/app/pages/products/index.vue
new file mode 100644
index 0000000..a2ecc05
--- /dev/null
+++ b/www/app/pages/products/index.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { ProductListConfig, ProductSeries } from '~/types/site';
+
+const { t, locale } = useI18n();
+const localePath = useLocalePath();
+const siteStore = useSiteStore();
+const { getPageConfig } = useSiteApi();
+
+// SEO：产品列表页
+await usePageSeo('products', undefined, `${t('app.name')} - ${t('nav.products')}`);
+
+// 页面配置（hero + 列数），未配置时用默认值
+const config = ref<ProductListConfig | null>(null);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    const [cfg] = await Promise.all([getPageConfig<ProductListConfig>('product-list')]);
+    config.value = cfg;
+  } catch {
+    config.value = null;
+  } finally {
+    loading.value = false;
+  }
+});
+
+// 产品系列（store 已在 app 启动时加载）
+const { productSeries } = storeToRefs(siteStore);
+
+const maxColumns = computed(() => Math.min(Math.max(config.value?.max_columns || 3, 1), 4));
+
+// 有产品的系列才展示
+const visibleSeries = computed(() =>
+  (productSeries.value || []).filter((s) => (s.products || []).length > 0)
+);
+
+const heroTitle = computed(() => (locale.value === 'en' ? config.value?.hero_title_en : config.value?.hero_title_zh) || (locale.value === 'en' ? 'Products' : '产品中心'));
+const heroSubtitle = computed(() => (locale.value === 'en' ? config.value?.hero_subtitle_en : config.value?.hero_subtitle_zh) || '');
+const heroOverline = computed(() => (locale.value === 'en' ? config.value?.hero_overline_en : config.value?.hero_overline_zh) || '');
+
+function seriesName(s: ProductSeries): string {
+  return locale.value === 'en' ? s.name_en : s.name_zh;
+}
+
+function seriesSubtitle(s: ProductSeries): string {
+  return locale.value === 'en' ? s.subtitle_en : s.subtitle_zh;
+}
+</script>
+
+<template>
+  <div>
+    <PageHero
+      :title="heroTitle"
+      :subtitle="heroSubtitle || undefined"
+      :overline="heroOverline || undefined"
+      :bg-url="config?.hero_bg_url || undefined"
+    />
+
+    <div v-if="loading" class="py-80px text-center text-sm text-gray-400">
+      {{ t('common.loading') }}
+    </div>
+
+    <!-- 按系列分组的产品卡片 -->
+    <div v-else-if="visibleSeries.length" class="section-container py-64px md:py-80px flex flex-col gap-80px">
+      <section v-for="series in visibleSeries" :key="series.id">
+        <div class="mb-32px flex flex-col gap-8px">
+          <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">{{ seriesName(series) }}</h2>
+          <p v-if="seriesSubtitle(series)" class="text-gray-500 dark:text-gray-400">{{ seriesSubtitle(series) }}</p>
+        </div>
+
+        <div
+          class="grid gap-24px"
+          :class="{
+            'grid-cols-1': maxColumns === 1,
+            'sm:grid-cols-2': maxColumns === 2,
+            'sm:grid-cols-2 lg:grid-cols-3': maxColumns === 3,
+            'sm:grid-cols-2 lg:grid-cols-4': maxColumns === 4
+          }"
+        >
+          <NuxtLink
+            v-for="product in series.products"
+            :key="product.id"
+            :to="localePath(`/products/${product.slug}`)"
+            class="group flex flex-col rounded-16px border border-gray-100 dark:border-dark-700 overflow-hidden bg-white dark:bg-dark-800 hover:shadow-xl hover:-translate-y-4px transition-all duration-300"
+          >
+            <div class="aspect-[16/10] bg-gray-50 dark:bg-dark-700 overflow-hidden">
+              <img
+                v-if="product.cover_url"
+                :src="product.cover_url"
+                :alt="locale === 'en' ? product.name_en : product.name_zh"
+                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+              />
+              <div v-else class="w-full h-full flex-center text-gray-300 dark:text-gray-600 text-4xl">🎧</div>
+            </div>
+            <div class="p-20px flex flex-col gap-8px flex-1">
+              <h3 class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-primary transition-colors">
+                {{ locale === 'en' ? product.name_en : product.name_zh }}
+              </h3>
+              <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
+                {{ locale === 'en' ? product.intro_en : product.intro_zh }}
+              </p>
+            </div>
+          </NuxtLink>
+        </div>
+      </section>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else class="section-container py-80px text-center">
+      <p class="text-gray-400">{{ t('common.empty') }}</p>
+    </div>
+  </div>
+</template>
diff --git a/www/app/pages/support.vue b/www/app/pages/support.vue
new file mode 100644
index 0000000..61dab24
--- /dev/null
+++ b/www/app/pages/support.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import type { SupportConfig, FaqCategory, FaqItem, SupportDownload, SupportContactItem } from '~/types/site';
+import { parseJson } from '~/utils/parseJson';
+
+const { t, locale } = useI18n();
+const localePath = useLocalePath();
+const { getPageConfig } = useSiteApi();
+
+// SEO：技术支持
+await usePageSeo('support', undefined, `${t('app.name')} - ${t('nav.support')}`);
+
+const config = ref<SupportConfig | null>(null);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    config.value = await getPageConfig<SupportConfig>('support');
+  } catch {
+    config.value = null;
+  } finally {
+    loading.value = false;
+  }
+});
+
+// ===== JSON 字段解析 =====
+const faqCategories = computed<FaqCategory[]>(() =>
+  parseJson<FaqCategory[]>(config.value?.s1_faq_categories, [])
+);
+const downloads = computed<SupportDownload[]>(() =>
+  parseJson<SupportDownload[]>(config.value?.s2_downloads, [])
+);
+const contacts = computed<SupportContactItem[]>(() =>
+  parseJson<SupportContactItem[]>(config.value?.s3_contact, [])
+);
+
+// ===== 按语言取值 =====
+const heroTitle = computed(() => (locale.value === 'en' ? config.value?.hero_title_en : config.value?.hero_title_zh) || (locale.value === 'en' ? 'Support' : '技术支持'));
+const heroSubtitle = computed(() => (locale.value === 'en' ? config.value?.hero_subtitle_en : config.value?.hero_subtitle_zh) || '');
+const s4Cta = computed(() => (locale.value === 'en' ? config.value?.s4_cta_en : config.value?.s4_cta_zh) || '');
+
+function catTitle(c: FaqCategory): string {
+  return locale.value === 'en' ? c.title_en : c.title_zh;
+}
+function qText(q: FaqItem): string {
+  return locale.value === 'en' ? q.question_en : q.question_zh;
+}
+function aText(q: FaqItem): string {
+  return locale.value === 'en' ? q.answer_en : q.answer_zh;
+}
+function downloadName(d: SupportDownload): string {
+  return locale.value === 'en' ? d.name_en : d.name_zh;
+}
+function contactLabel(c: SupportContactItem): string {
+  return locale.value === 'en' ? c.label_en : c.label_zh;
+}
+function contactValue(c: SupportContactItem): string {
+  return locale.value === 'en' ? c.value_en : c.value_zh;
+}
+
+// ===== FAQ 手风琴展开状态（分类 -> 展开的问答 index） =====
+const openFaq = ref<Record<number, number>>({});
+function toggleFaq(catIdx: number, itemIdx: number) {
+  if (openFaq.value[catIdx] === itemIdx) {
+    delete openFaq.value[catIdx];
+  } else {
+    openFaq.value[catIdx] = itemIdx;
+  }
+}
+
+const hasFaq = computed(() => faqCategories.value.length > 0);
+const hasDownloads = computed(() => downloads.value.length > 0);
+const hasContacts = computed(() => contacts.value.length > 0);
+</script>
+
+<template>
+  <div>
+    <PageHero
+      :title="heroTitle"
+      :subtitle="heroSubtitle || undefined"
+      :bg-url="config?.hero_bg_url || undefined"
+    />
+
+    <div v-if="loading" class="py-80px text-center text-sm text-gray-400">
+      {{ t('common.loading') }}
+    </div>
+
+    <div v-else class="section-container py-64px md:py-80px flex flex-col gap-64px md:gap-80px">
+      <!-- S1：常见问题 -->
+      <section v-if="hasFaq">
+        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-32px">{{ t('support.faq') }}</h2>
+        <div class="flex flex-col gap-24px">
+          <div v-for="(cat, catIdx) in faqCategories" :key="catIdx">
+            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-16px">{{ catTitle(cat) }}</h3>
+            <div class="flex flex-col gap-12px">
+              <div
+                v-for="(item, itemIdx) in cat.items"
+                :key="itemIdx"
+                class="rounded-12px border border-gray-100 dark:border-dark-700 overflow-hidden bg-white dark:bg-dark-800"
+              >
+                <button
+                  class="w-full flex items-center justify-between gap-16px px-20px py-16px text-left hover:bg-gray-50 dark:hover:bg-dark-700 transition-colors"
+                  @click="toggleFaq(catIdx, itemIdx)"
+                >
+                  <span class="font-medium text-gray-900 dark:text-white">{{ qText(item) }}</span>
+                  <span
+                    class="text-gray-400 transition-transform duration-200 shrink-0"
+                    :class="openFaq[catIdx] === itemIdx ? 'rotate-180' : ''"
+                  >▾</span>
+                </button>
+                <div v-if="openFaq[catIdx] === itemIdx" class="px-20px pb-16px text-sm text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-line">
+                  {{ aText(item) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- S2：资料下载 -->
+      <section v-if="hasDownloads">
+        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-32px">{{ t('support.downloads') }}</h2>
+        <div class="grid gap-16px sm:grid-cols-2 lg:grid-cols-3">
+          <a
+            v-for="(d, idx) in downloads"
+            :key="idx"
+            :href="d.file_url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center gap-16px p-20px rounded-12px border border-gray-100 dark:border-dark-700 bg-white dark:bg-dark-800 hover:border-primary hover:shadow-md transition-all"
+          >
+            <span class="text-2xl">📄</span>
+            <div class="flex flex-col gap-4px min-w-0 flex-1">
+              <span class="font-medium text-gray-900 dark:text-white truncate">{{ downloadName(d) }}</span>
+              <span v-if="d.file_size" class="text-xs text-gray-400">{{ d.file_size }}</span>
+            </div>
+            <span class="text-primary text-lg shrink-0">↓</span>
+          </a>
+        </div>
+      </section>
+
+      <!-- S3：联系方式 -->
+      <section v-if="hasContacts">
+        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-32px">{{ t('support.contact') }}</h2>
+        <div class="grid gap-16px sm:grid-cols-2 lg:grid-cols-3">
+          <div
+            v-for="(c, idx) in contacts"
+            :key="idx"
+            class="p-20px rounded-12px border border-gray-100 dark:border-dark-700 bg-white dark:bg-dark-800"
+          >
+            <p class="text-xs text-gray-400 mb-8px">{{ contactLabel(c) }}</p>
+            <p class="font-medium text-gray-900 dark:text-white break-all">{{ contactValue(c) }}</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- S4：CTA -->
+      <section v-if="s4Cta" class="text-center py-32px">
+        <NuxtLink
+          :to="localePath(config?.s4_cta_url || '/contact')"
+          class="inline-block px-36px py-14px rounded-8px bg-primary text-white font-medium hover:opacity-90 transition-opacity"
+        >
+          {{ s4Cta }}
+        </NuxtLink>
+      </section>
+
+      <!-- 空配置提示 -->
+      <div v-if="!hasFaq && !hasDownloads && !hasContacts && !s4Cta" class="py-80px text-center">
+        <p class="text-gray-400">{{ t('common.empty') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/www/app/types/site.ts b/www/app/types/site.ts
index 8ceec19..a2b807c 100644
--- a/www/app/types/site.ts
+++ b/www/app/types/site.ts
@@ -150,6 +150,10 @@ export interface SectionBlock {
   product_id: number | null;
   layout: SectionLayout;
   theme: 'light' | 'dark';
+  /** 前景文案自定义颜色（空字符串 = 跟随 theme 默认配色） */
+  overline_color: string;
+  title_color: string;
+  body_color: string;
   bg_type: 'color' | 'image' | 'video';
   bg_value: string;
   overlay_enabled: number;
@@ -217,3 +221,147 @@ export interface ProductsData {
   series: ProductSeries[];
   total: number;
 }
+
+// ===== 新闻 =====
+export interface NewsArticle {
+  id: number;
+  title_zh: string;
+  title_en: string;
+  slug: string;
+  summary_zh: string;
+  summary_en: string;
+  cover_url: string;
+  published_at: string | null;
+  created_at: string;
+}
+
+export interface NewsDetail extends NewsArticle {
+  content_zh: string | null;
+  content_en: string | null;
+  recommendations: NewsArticle[];
+}
+
+// ===== 页面配置 =====
+export interface PageHeroConfig {
+  hero_title_zh: string;
+  hero_title_en: string;
+  hero_subtitle_zh: string;
+  hero_subtitle_en: string;
+  hero_bg_url: string;
+}
+
+export interface ProductListConfig extends PageHeroConfig {
+  hero_overline_zh: string;
+  hero_overline_en: string;
+  max_columns: number;
+}
+
+export interface NewsListConfig extends PageHeroConfig {
+  page_size: number;
+  pagination_mode: 'paginator' | 'load_more';
+}
+
+// ===== 关于页（s2_features 为 JSON 字符串，需 parse） =====
+export interface AboutFeature {
+  title_zh: string;
+  title_en: string;
+  desc_zh: string;
+  desc_en: string;
+}
+
+export interface AboutConfig extends PageHeroConfig {
+  s1_title_zh: string;
+  s1_title_en: string;
+  s1_content_zh: string | null;
+  s1_content_en: string | null;
+  s1_image_url: string;
+  s1_cta_zh: string;
+  s1_cta_en: string;
+  s1_cta_url: string;
+  s2_title_zh: string;
+  s2_title_en: string;
+  s2_features: string | AboutFeature[] | null;
+  s3_title_zh: string;
+  s3_title_en: string;
+  s3_cta_zh: string;
+  s3_cta_en: string;
+  s3_cta_url: string;
+}
+
+// ===== 支持页（JSON 字段为字符串，需 parse） =====
+export interface FaqItem {
+  question_zh: string;
+  question_en: string;
+  answer_zh: string;
+  answer_en: string;
+}
+
+export interface FaqCategory {
+  title_zh: string;
+  title_en: string;
+  items: FaqItem[];
+}
+
+export interface SupportDownload {
+  name_zh: string;
+  name_en: string;
+  file_url: string;
+  file_size: string;
+}
+
+export interface SupportContactItem {
+  label_zh: string;
+  label_en: string;
+  value_zh: string;
+  value_en: string;
+}
+
+export interface SupportConfig extends PageHeroConfig {
+  s1_faq_categories: string | FaqCategory[] | null;
+  s2_downloads: string | SupportDownload[] | null;
+  s3_contact: string | SupportContactItem[] | null;
+  s4_cta_zh: string;
+  s4_cta_en: string;
+  s4_cta_url: string;
+}
+
+// ===== 联系表单 =====
+export type FormFieldType = 'text' | 'email' | 'phone' | 'textarea' | 'select';
+
+export interface FormField {
+  id: number;
+  name_zh: string;
+  name_en: string;
+  field_type: FormFieldType;
+  is_required: number;
+  placeholder_zh: string;
+  placeholder_en: string;
+  options_json: string | null;
+  sort_order: number;
+}
+
+export interface FormSettings {
+  id: number;
+  recipient_email: string;
+  success_message_zh: string;
+  success_message_en: string;
+  error_message_zh: string;
+  error_message_en: string;
+  cooldown_seconds: number;
+}
+
+export interface ContactConfig {
+  settings: FormSettings | null;
+  fields: FormField[];
+}
+
+// ===== 页面 SEO =====
+export interface PageSeo {
+  id: number;
+  page_type: string;
+  entity_id: number | null;
+  meta_title: string;
+  meta_description: string;
+  meta_keywords: string;
+  og_image_url: string;
+}
diff --git a/www/app/utils/parseJson.ts b/www/app/utils/parseJson.ts
new file mode 100644
index 0000000..5a84862
--- /dev/null
+++ b/www/app/utils/parseJson.ts
@@ -0,0 +1,16 @@
+/**
+ * 安全解析后端 JSON 字段
+ *
+ * dashboard 的 JSON 列（s2_features、s1_faq_categories、options_json 等）
+ * 经 Drizzle ORM 返回时可能是字符串或已解析对象，统一转为对象数组。
+ */
+export function parseJson<T>(value: string | T | null | undefined, fallback: T): T {
+  if (value == null) return fallback;
+  if (typeof value !== 'string') return value as T;
+  try {
+    const parsed = JSON.parse(value) as T;
+    return parsed;
+  } catch {
+    return fallback;
+  }
+}
diff --git a/www/i18n/locales/en.json b/www/i18n/locales/en.json
index c913af2..5931e97 100644
--- a/www/i18n/locales/en.json
+++ b/www/i18n/locales/en.json
@@ -8,7 +8,8 @@
     "products": "Products",
     "news": "News",
     "about": "About Us",
-    "contact": "Contact"
+    "contact": "Contact",
+    "support": "Support"
   },
   "footer": {
     "copyright": "© {year} Luxsin. All rights reserved."
@@ -17,6 +18,25 @@
     "learnMore": "Learn More",
     "backHome": "Back to Home",
     "notFound": "Page Not Found",
-    "notFoundDesc": "Sorry, the page you visited does not exist or has been removed."
+    "notFoundDesc": "Sorry, the page you visited does not exist or has been removed.",
+    "loading": "Loading…",
+    "empty": "No content yet",
+    "loadMore": "Load More",
+    "moreInSeries": "More in This Series",
+    "relatedNews": "Related News"
+  },
+  "support": {
+    "faq": "FAQ",
+    "downloads": "Downloads",
+    "contact": "Contact Us"
+  },
+  "form": {
+    "subtitle": "Fill in the form and we will get back to you soon",
+    "submit": "Submit",
+    "required": "This field is required",
+    "invalidEmail": "Please enter a valid email address",
+    "invalidPhone": "Please enter a valid phone number",
+    "success": "Submitted successfully. We will reply soon!",
+    "failed": "Submission failed. Please try again later."
   }
 }
diff --git a/www/i18n/locales/zh.json b/www/i18n/locales/zh.json
index ff24813..e276d83 100644
--- a/www/i18n/locales/zh.json
+++ b/www/i18n/locales/zh.json
@@ -8,7 +8,8 @@
     "products": "产品",
     "news": "新闻",
     "about": "关于我们",
-    "contact": "联系我们"
+    "contact": "联系我们",
+    "support": "技术支持"
   },
   "footer": {
     "copyright": "© {year} 乐笙 Luxsin. 保留所有权利。"
@@ -17,6 +18,25 @@
     "learnMore": "了解更多",
     "backHome": "返回首页",
     "notFound": "页面不存在",
-    "notFoundDesc": "抱歉，您访问的页面不存在或已被移除。"
+    "notFoundDesc": "抱歉，您访问的页面不存在或已被移除。",
+    "loading": "加载中…",
+    "empty": "暂无内容",
+    "loadMore": "加载更多",
+    "moreInSeries": "同系列产品",
+    "relatedNews": "相关新闻"
+  },
+  "support": {
+    "faq": "常见问题",
+    "downloads": "资料下载",
+    "contact": "联系方式"
+  },
+  "form": {
+    "subtitle": "请填写以下信息，我们将尽快与您联系",
+    "submit": "提交",
+    "required": "此项为必填项",
+    "invalidEmail": "请输入有效的邮箱地址",
+    "invalidPhone": "请输入有效的电话号码",
+    "success": "提交成功，我们会尽快回复！",
+    "failed": "提交失败，请稍后重试"
   }
 }