style(index): 优化首页样式与布局

- 重新设计首页背景色与容器安全区适配
- 优化Hero Banner区域增加圆角遮罩效果
- 调整Hero Grid菜单区样式，去除背景色实现透明效果
- 新增公告条样式，自定义样式替代NutUI NoticeBar
- 优化底部购买按钮样式，调整高度及阴影
- 统一首页通用section的左右边距，融合TrustSection和ContactSection样式

.workbuddy/memory/MEMORY.md

@@ -20,21 +20,21 @@
 - 邀请码：`src/dealer/qrcode/index`
 - 导航工具：`src/utils/common.ts` (navTo函数)
 
-## 首页结构 (2026-04-02 更新)
-- Header (吸顶搜索栏)
-- Menu (导航菜单，hidden)
-- Banner (轮播广告)
-- Grid (功能菜单)
-- NoticeBar (公告栏)
-- **BrochureEntry** (品牌画册入口卡片 — 位于公告栏下方)
-- BestSellers (热销商品)
-- **TrustSection** (品牌信任区 - 3列水平布局)
-  - 品质保障：10年质保，德国进口五金
-  - 专业团队：15年安装经验，持证上岗
-  - 客户好评：5000+家庭选择，98%满意度
-- ~~CaseShowcase~~ (已注释隐藏，待有真实素材后再恢复)
-- **ContactSection** (联系方式 - 2x2网格布局)
-  - 客服热线、在线咨询、门店地址、关注我们
+## 首页结构 (2026-04-09 重大重构)
+- Header (吸顶搜索栏，深色渐变背景)
+- **Hero区域** (Banner + Grid 融合，圆角过渡)
+- **NoticeStrip** (自定义轻量公告条，黄色圆点+文字)
+- **BestSellers** (热销推荐 — 横向图文卡片，左图右信息)
+- **CatalogShowcase** (品牌画册 — 大面积渐变视觉卡片)
+- **TrustSection** (品质信任区 — 横向滑动渐变卡片：10年质保/15年经验/98%满意度)
+- **ContactSection** (联系我们 — 全宽深色沉浸式底部)
+- PopUpAd (弹窗广告)
+
+### 设计特点
+- 非豆腐块布局，差异化间距和视觉层次
+- 页面背景：#f5f5f7
+- 底部区域为深色渐变(#1e293b→#0f172a)
+- ~~CaseShowcase~~ (已注释隐藏)
 
 ## 图标使用注意事项
 - NutUI图标库中不存在的图标：
@@ -45,13 +45,14 @@
 - 所有图标必须从 `@nutui/icons-react-taro` 导入
 - 构建前需验证图标名称是否在可用导出列表中
 
-## 字体大小规范
-- 微信小程序使用 TailwindCSS 文本类，不使用固定像素值
-- 主标题：`text-lg font-semibold text-gray-800`
-- 副标题：`text-sm text-gray-500`
-- 项目标题：`text-base font-semibold text-gray-800`
-- 项目描述：`text-xs text-gray-500`
-- 小文本：`text-xs text-gray-500`
+## 字体大小规范 (2026-04-09 更新)
+- 微信小程序端按移动端标准设计，最小辅助文字 13-14px
+- 标签/辅助：14px
+- 正文/描述：15-16px
+- 小标题/按钮文字：16-17px
+- 区块标题：20-24px
+- 强调数字（价格、数据）：28-36px
+- 所有图标必须从 `@nutui/icons-react-taro` 导入
 
 ## 画册页正式版 (2026-04-01)
 - 首页已实际挂载 `src/pages/index/BrochureEntry.tsx` 入口，位置在 Banner 下方。