refactor(style): 优化首页主要组件样式及布局实现

- 移除 BestSellers 组件中多余的 SCSS 样式，改用 TailwindCSS 工具类规范字体大小和颜色
- 替换 BestSellers.tsx 中对应元素的样式类为 TailwindCSS 实现，提升样式一致性和维护性
- 调整 CatalogShowcase 组件样式，删除不必要的 SCSS 样式，增加内边距并修改书本尺寸，整体优化布局
- CatalogShowcase.tsx 中相关文本和图形元素改为 TailwindCSS 实现，规范字体大小、颜色和间距
- ContactSection 组件部分样式移除过

.workbuddy/memory/MEMORY.md

@@ -47,13 +47,22 @@
 
 ## 字体大小规范 (2026-04-09 更新)
 - 微信小程序端按移动端标准设计，最小辅助文字 13-14px
-- 标签/辅助：14px
-- 正文/描述：15-16px
-- 小标题/按钮文字：16-17px
-- 区块标题：20-24px
-- 强调数字（价格、数据）：28-36px
+- 使用 TailwindCSS 工具类（text-xs/sm/base/lg/xl/2xl/3xl/4xl），不使用 SCSS font-size
+- 扩展了 tailwind.config.js：text-15(15px)、text-17(17px)、text-28(28px)
+- 标签/辅助：14px (text-sm)
+- 正文/描述：15-16px (text-15/text-base)
+- 小标题/按钮文字：16-17px (text-base/text-17)
+- 区块标题：20-24px (text-xl/text-2xl)
+- 强调数字（价格、数据）：28-36px (text-28/text-4xl)
 - 所有图标必须从 `@nutui/icons-react-taro` 导入
 
+## Tailwind 小程序兼容性注意事项
+- **禁止使用斜杠透明度简写**：`text-white/40`、`bg-black/50`、`border-gray/30` 等含 `/` 的写法在小程序不兼容，需要透明度时改用 SCSS `color: rgba(...)` 或在 tailwind.config.js 中定义语义色
+- **禁止使用小数间距**：`mt-0.5`、`p-0.5`、`gap-0.5` 等含小数点的工具类在小程序不兼容，改用整数如 `mt-1`、`p-1`
+- **禁止使用任意值 `-[?]` 写法**：`text-[14px]`、`w-[100px]` 等方括号任意值写法在小程序不兼容，改用 Tailwind 预设类或在 tailwind.config.js 中扩展
+- **颜色替代方案**：`text-white` 在小程序中可能不生效，改用 `text-gray`（如 `text-gray-100`~`text-gray-50` 等），深色背景上的白色文字优先用 `text-gray-100`
+- 当前代码中 ContactSection/TrustSection/CatalogShowcase 共有 9 处 `text-white/xx` 待修复
+
 ## 画册页正式版 (2026-04-01)
 - 首页已实际挂载 `src/pages/index/BrochureEntry.tsx` 入口，位置在 Banner 下方。
 - `src/pages/brochure/index.tsx` 当前为原生正式版结构：主营方案、核心优势、升级关键词、服务承诺、案例方向、服务流程、预约咨询信息。