运动鞋笑商城产品系统

立项原因
服饰线下品牌想要低成本搭建线上展示门户，不需要复杂下单支付后端能力，优先把新品、折扣商品对外展示，完成品牌宣传与商品曝光。不想投入高昂的完整电商系统开发成本，希望通过轻量化静态页面快速上线，把新品活动、促销折扣直观呈现给用户，作为线上引流的展示窗口。本人以此业务场景做前端练习项目，模拟真实商业需求完成页面开发。
旨在解决的产品问题
1. 解决品牌新品、折扣商品缺少线上可视化展示阵地的问题，把新品标签、折扣力度直观展示给访客，提升商品信息传递效率。
2. 轻量化方案，无需后端服务即可上线，降低小型服饰品牌前期建站成本，快速完成官网首页对外发布。
3. 统一页面视觉，将轮播宣传位、商品分类、商品卡片做模块化展示，改善用户浏览体验，方便用户快速浏览新品与促销货品。
4. 模拟真实电商业务交互，解决商品多、标签繁杂时页面布局混乱，促销信息不突出的展示问题。
随着线上流量成为服饰品牌重要的宣传渠道，不少中小服饰商家，暂不需要完整的下单、支付、订单管理的重型电商系统。核心诉求是搭建品牌线上展示门户，对外曝光新品、折扣活动，完成品牌种草与商品引流，把线下货品同步到线上给客户浏览。

完整电商平台开发、服务器、后端维护成本较高，部分商家优先选择轻量化静态展示站点，只聚焦首页宣传、商品陈列、促销信息透出，快速上线对外访问，用于私域引流、新品推广。

本项目模拟该真实商业业务场景，复刻服饰品牌展示官网首页，实现轮播banner、商品分类导航、商品卡片、新品标签、折扣标签等电商常见模块，以纯前端静态页面实现，无需后端接口，可直接部署上线，还原中小服饰品牌低成本线上展示的业务需求。

该服饰品牌展示官网为纯前端静态项目，面向浏览商品的用户，实现品牌宣传、商品陈列展示能力，主要功能如下：

1. 轮播Banner宣传模块：首页顶部轮播海报，展示新品主题、促销活动，自动切换，用于品牌活动曝光。

2. 商品分类导航：提供多组商品分类标签，对货品做品类划分，方便用户快速定位对应系列商品。

3. 商品卡片渲染：统一封装商品卡片组件，展示商品图片、商品名称、原价、折后售价。

4. 促销标签展示：支持渲染新品标识、折扣百分比标签，直观突出促销、上新信息，强化营销感知。

5. 商品列表陈列：批量展示多件商品，集中呈现新品、折扣货品，完成货品集中曝光。

6. 基础页面布局适配：完成PC端页面排版，模块划分清晰，页面可直接部署至Netlify，公网浏览器访问查看完整效果。

技术栈完成纯静态服饰电商首页开发，无需后端接口，完成后部署在 Netlify 实现公网访问。

1. 页面结构搭建：使用 HTML 语义化标签划分页面模块，拆分为轮播Banner区、分类导航区、商品陈列区，模块职责清晰，便于后续维护扩展。

2. 样式开发：通过 CSS 完成整体页面布局，统一商品卡片样式，实现新品标签、折扣标签的特殊样式渲染，处理价格原价划线、折后价突出显示等UI细节。

3. 轮播交互开发：使用原生 JS 编写轮播逻辑，实现海报自动轮播切换，完成基础的宣传位交互效果。

4. 模拟数据处理：本地定义模拟商品数据，包含商品名称、图片、原价、折扣价、标签类型，通过数据驱动渲染批量生成商品卡片，体现组件化开发思想。

5. 项目打包部署：完成页面调试，打包静态资源，上传至 Netlify，生成线上可访问链接，方便作品展示。