## 轮次1
新建index.html文件
一、网站说明
这是一个 商品列表页 (Web版)。
核心用于展示功能性服装产品价值，同时通过高强度视觉与场景化内容推动用户直接购买或进入商品详情页。

二、全局视觉风格
整体呈现为「硬朗户外机能风 + 工业感品牌视觉」，以浅色为主背景，搭配高对比的黑色文字与橙色/暖色点缀强化行动引导；字体采用粗体无衬线，字重变化明显，强调力量感与可读性；版心偏宽，留白克制但不极简，信息密度中高，通过大标题 + 强视觉图片建立层级；图片以真实户外场景摄影为主（工地、山地、极端环境），强调"人在环境中"的使用状态；整体偏桌面优先设计，同时在移动端通过模块重排与卡片化保持信息连续性。

三、整体页面结构
页面结构以"强视觉开场 → 产品价值拆解 → 分类导购 → 场景强化 → 社会证明 → 转化收口"为主线。

内容推进节奏明显：
前段用情绪与品牌调性抓人 → 中段密集讲产品优势 → 后段通过分类与推荐引导选购 → 最后通过评价与品牌信任完成转化。

模块之间衔接紧凑，视觉与信息交替出现，避免纯文字堆叠，始终围绕"产品可买性"展开。

四、动效系统（重点）
整体动效属于「有力量感」的风格，强调反馈与节奏控制。

页面加载：首屏大图+文字轻微淡入，加载过程干净直接，无复杂预加载动画
滚动触发：
图片与文字分批 fade-in + slight translate
局部视差（背景图与前景内容轻微速度差）
部分模块 sticky（如分类或导航强化浏览路径）
Hover交互：
按钮：颜色反转 / 背景填充
商品卡片：图片轻微缩放 + 信息浮层显现
分类入口：强调边框或遮罩变化
内容切换：
商品分类使用横向滑动或卡片滚动
无复杂tab，多为直接展开或滚动浏览
动效节奏：
快速、干脆
动画时长短（200–400ms）
强调"响应"而非"展示"

整体策略：动效服务于浏览效率和转化，而非视觉炫耀。

五、页面模块分析

1.【顶部导航栏】
结构：Logo + 分类导航（Men / Women / Workwear等）+ 搜索 + 购物车
布局：横向分布，左右对齐，顶部固定（sticky）
内容：核心品类入口 + 功能入口
交互：滚动时保持吸顶，hover出现下拉分类或高亮状态

2.【首屏品牌视觉】
结构：全屏背景图 + 大标题 + CTA按钮
布局：文字叠加在图片上，居中或偏左
内容：品牌主张 + 产品使用场景（户外/工地）
动效：文字逐个由模糊变清晰

3.【核心卖点横向区块】
结构：多列（3–4个）卖点卡片
布局：横向等分或卡片排列
内容：如耐用、防水、舒适等核心特性
动效：

滚动进入逐个出现
icon或图片轻微动画
hover强化边框或背景

4.【产品分类入口】
结构：大图卡片（Men / Women / Best Sellers等）
布局：网格或横向滑动
内容：分类名称 + 场景图片
动效：

hover图片放大 + 遮罩渐变
点击跳转对应列表页

5.【主打产品展示】
结构：商品卡片列表（图片 + 名称 + 价格）
布局：多列网格
内容：核心SKU推荐
动效：
hover图片切换,切换要有动效
按钮浮现（Quick view / Add to cart）

6.【场景化内容区块】
结构：大图 + 文案组合
布局：文字在左,图片在右,页面上同时只展示一组图片和文字
内容：产品在真实环境中的使用说明
动效：滚动时页面不滚动,而是切换页面中显示的内容,左侧文字上下滚动切换,右侧图片与文字同步切换

7.【促销/CTA强化区】
结构：横幅 + 强CTA按钮
布局：全宽区块
内容：折扣、活动或限时信息
动效：

背景轻微动效或渐变
按钮hover高对比变化

9.【页脚（Footer）】
结构：多列链接 + 品牌信息 + 订阅入口
布局：网格结构
内容：帮助中心、政策、社交媒体
动效：

hover链接高亮
输入框聚焦反馈

- 技术栈要求: html
- 样式：Tailwind css（使用任意值 arbitary values 实现精细控制）​
- 图标：Lucide​
- 字体：Inter（使用 Google Fonts）​
- 图片：找不到图片的情况下可以使用 unsplash 的高质量占位图

## 轮次2
hero屏文字出现时要逐个由模糊变清晰

## 轮次3
核心卖点卡片部分,逐个出现的时候要有动效

## 轮次4
ENGINEERED FOR REAL WORLD部分,右侧切换时增加点动效