Kodev 官方网站建设 (Next.js + Tailwind)

开发功能详情展示页面，详细介绍 Kodev 产品的所有功能模块。

页面结构：

1. 页面顶部 Banner：标题'产品功能'，简短引导文案
2. 功能分类导航：水平标签栏或侧边栏，支持按分类筛选功能
3. 功能列表区域：每个功能模块以左右交替布局展示（奇数行图左文右，偶数行文左图右），包含功能标题、详细描述、功能截图/示意图占位区域
4. 功能对比表格（可选）：以表格形式对比不同版本/方案的功能差异

UI设计要求：

• 功能卡片使用圆角(rounded-xl)、轻微阴影(shadow-md)，深色模式下使用边框(border-gray-700)替代阴影
• 截图区域使用 16:9 或 4:3 比例的占位容器，带圆角和阴影模拟浏览器窗口效果
• 功能图标使用 Heroicons 或 Lucide React 图标库
• 列表项进入视口时触发淡入上移动画（使用 Intersection Observer 或 framer-motion）
• 移动端所有内容改为单列纵向堆叠

技术要求：

• 功能列表数据从后端 API 获取（GET /api/v1/features）
• 支持按分类过滤（query param: ?category=xxx）
• 图片使用懒加载优化性能
• 页面 SEO meta tags 配置