请为我创建一个精美的中国茶文化电商展示网页，要求如下：

## 图片资源（CDN）

> **所有图片已上传至 CDN，直接使用以下 URL，无需 Unsplash/Picsum 占位图。**
>
> CDN 基础路径：`https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun`

| 用途 | CDN 地址 |
|------|----------|
| **Hero 区背景**（茶园全景） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/hero-bg.jpg` |
| **订阅区背景**（茶园薄雾） | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/newsletter-bg.jpg` |
| **茶品图 — 西湖龙井** | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/longjing.jpg` |
| **茶品图 — 大红袍** | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/dahongpao.jpg` |
| **茶品图 — 云南普洱** | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/puer.jpg` |
| **茶品图 — 安吉白茶** | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/anji-white-tea.jpg` |
| **茶品图 — 正山小种** | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/lapsang.jpg` |
| **茶品图 — 太平猴魁** | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/houkui.jpg` |
| **茶品图 — 茉莉花茶** | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun/jasmine.jpg` |

> 在代码中，所有图片 `src` 直接填写上表中的完整 CDN URL。如果 CDN 图片加载失败，使用对应颜色的渐变背景作为 fallback（绿茶用深翠绿渐变，红茶用暖棕渐变，etc.）。**禁止使用 Unsplash/Picsum 随机占位图。**

---

【整体风格】
- 风格：中国传统美学 × 现代简约设计，融合水墨、竹韵、山水意境
- 色调：以深翠绿（#2D5A27）、暖金色（#C9A84C）、米白（#F5F0E8）、深墨色（#1A1A1A）为主色
- 字体：标题使用仿宋/楷体风格，正文使用现代无衬线字体
- 整体质感：高端、典雅、自然、有文化底蕴

【页面结构】

1. 导航栏（Navigation）
   - Logo：茶叶品牌名 + 毛笔字体或竹叶装饰图标
   - 菜单：首页 / 茶品系列 / 产地故事 / 茶道文化 / 购买
   - 右侧：搜索图标、购物车、用户图标
   - 效果：滚动后导航栏变为半透明毛玻璃背景

2. Hero 区域（全屏首屏）
   - 背景：CDN 图片 `hero-bg.jpg`，配合视差滚动效果（Parallax）
   - 主标题：大字呈现，如"一叶知秋 · 品鉴中国好茶"
   - 副标题：品牌故事一句话介绍
   - CTA按钮：「探索茶品」「立即选购」两个按钮，带 hover 动画
   - 装饰：飘落茶叶粒子动画（CSS/Canvas 实现）

3. 茶品系列展示区（Tea Collection）
   - 分类标签筛选：绿茶 / 红茶 / 白茶 / 乌龙茶 / 普洱茶 / 花草茶
   - 点击标签时，卡片区域以淡入淡出或平滑过渡动画切换
   - 茶品卡片（每行3~4个）：
     * 卡片背景：茶品高清图 + 柔和光影（使用上方 CDN 图片）
     * hover 效果：卡片上浮 + 图片缩放 + 浮现「查看详情」按钮
     * 显示：茶品名称（中英双语）、产地标签、价格、简短描述
     * 点击后展开详情弹窗或跳转详情页

4. 产地故事地图区（Origin Story）
   - 标题：「寻茶之旅 · 探访原产地」
   - 展示一张中国地图（SVG/Canvas 交互地图）
   - 地图上标注各产茶名地：西湖龙井（浙江）、武夷岩茶（福建）、云南普洱、安溪铁观音（福建）、黄山毛峰（安徽）、洞庭碧螺春（江苏）等
   - 鼠标悬停/点击产地标注点：弹出卡片，显示该地茶品图、茶名、海拔、气候特点、代表香型
   - 背景配山水画风格装饰图

5. 特色茶品亮点区（Feature Highlights）
   - 3~4个特色茶品横向滚动或交替展示
   - 每个包含：全屏背景图（使用 CDN 茶品图）、茶品名称、产地、制茶工艺简介、风味描述（如：花香、蜜韵、回甘）
   - 左右切换动画，带进度指示条
   - 右侧显示泡茶步骤（简化版3步图文）

6. 茶道文化科普区（Tea Culture）
   - 标题：「茶道 · 一门生活的艺术」
   - 3栏布局：历史渊源 / 冲泡之道 / 茶器鉴赏
   - 每栏带图标（SVG 毛笔风）、标题、简短文字说明
   - 鼠标 hover 卡片时，背景颜色渐变 + 图标旋转动画

7. 用户评价区（Testimonials）
   - 精选3~5条用户好评，卡片布局
   - 每条包含：用户头像（圆形）、昵称、评分（五星）、评价文字
   - 自动轮播，带暂停 hover 效果

8. 订阅区（Newsletter）
   - 背景：CDN 图片 `newsletter-bg.jpg`（茶园薄雾背景）
   - 标题：「订阅茶语 · 独享珍品资讯」
   - 邮箱输入框 + 订阅按钮
   - 按钮 hover 带墨水扩散动画效果

9. 页脚（Footer）
   - 品牌信息、导航链接、联系方式、社交媒体图标
   - 底部版权声明
   - 可选：加入茶文化格言作为装饰

【动效要求】
- 页面滚动时，各区块以渐入（Fade In Up）动画依次出现（使用 IntersectionObserver 或 AOS.js）
- 茶叶飘落粒子效果（Hero 区）
- 地图标注点的跳动/脉冲动画
- 分类切换时的平滑过渡
- 卡片 hover 的 3D 微倾斜效果（transform: perspective + rotateX/Y）
- 按钮的水墨扩散/波纹点击效果

【技术要求】
- 纯 HTML + CSS + JavaScript 实现（可使用 CDN 引入 AOS、SwiperJS、Chart.js 等）
- 完全响应式设计，支持手机/平板/桌面端
- 代码结构清晰，注释完整
- 不依赖后端，所有图片使用上方 CDN 地址（禁止使用 Unsplash/Picsum 占位图）

【内容示例（茶品数据）】

使用以下 JS 数据对象，图片字段使用 CDN 地址：

```javascript
const CDN_BASE = 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/mingyun';

const teas = [
  {
    name: '西湖龙井', nameEn: 'West Lake Longjing', category: 'green',
    origin: '浙江杭州', price: 388, altitude: '300m',
    flavor: '清香型 · 色绿、香郁、味甘、形美',
    desc: '中国十大名茶之首，采自清明前后，扁平挺直，清香持久。',
    image: `${CDN_BASE}/longjing.jpg`
  },
  {
    name: '大红袍', nameEn: 'Da Hong Pao', category: 'oolong',
    origin: '福建武夷山', price: 680, altitude: '700m',
    flavor: '岩韵型 · 岩骨花香，醇厚回甘',
    desc: '武夷岩茶之王，生长于岩缝之间，独特的岩骨花香令人回味无穷。',
    image: `${CDN_BASE}/dahongpao.jpg`
  },
  {
    name: '云南普洱', nameEn: 'Yunnan Pu\'er', category: 'puer',
    origin: '云南西双版纳', price: 520, altitude: '1500m',
    flavor: '陈香型 · 越陈越香，适合收藏',
    desc: '后发酵茶，具有独特的陈香，越陈越醇，是最具收藏价值的茶品。',
    image: `${CDN_BASE}/puer.jpg`
  },
  {
    name: '安吉白茶', nameEn: 'Anji White Tea', category: 'green',
    origin: '浙江安吉', price: 298, altitude: '500m',
    flavor: '鲜爽型 · 氨基酸含量极高，清甜回甘',
    desc: '虽名为白茶，实属绿茶。叶白如玉，氨基酸含量为普通绿茶的3~4倍。',
    image: `${CDN_BASE}/anji-white-tea.jpg`
  },
  {
    name: '正山小种', nameEn: 'Lapsang Souchong', category: 'red',
    origin: '福建桐木关', price: 458, altitude: '1200m',
    flavor: '松烟香型 · 世界红茶鼻祖，桂圆干香',
    desc: '世界红茶的鼻祖，松木熏制工艺赋予其独特的松烟香气，醇厚甘甜。',
    image: `${CDN_BASE}/lapsang.jpg`
  },
  {
    name: '太平猴魁', nameEn: 'Taiping Houkui', category: 'green',
    origin: '安徽黄山', price: 568, altitude: '600m',
    flavor: '兰香型 · 形如猴魁，独特扁直条形',
    desc: '尖茶之冠，两叶抱一芽，自然舒展，兰香幽远，汤色清碧。',
    image: `${CDN_BASE}/houkui.jpg`
  },
  {
    name: '茉莉花茶', nameEn: 'Jasmine Tea', category: 'flower',
    origin: '福建福州', price: 168, altitude: '200m',
    flavor: '花香型 · 茉莉清香，柔和甘甜',
    desc: '以绿茶为茶坯，以茉莉花窨制，花香与茶香相互融合，清新宜人。',
    image: `${CDN_BASE}/jasmine.jpg`
  }
];
```

执行：Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers. 使得最终产物部署到 EdgeOne Makers