项目简介
这是一个基于 React 18 + TypeScript + Vite + Tailwind CSS 构建的专业企业官网。网站展示了砌砖建材公司的产品、案例和联系方式。
技术栈
- 前端框架:React 18
- 开发工具:Vite 5
- 编程语言:TypeScript
- 样式框架:Tailwind CSS 3
- 路由管理:React Router DOM 6
1. 首页(Home)
首页包含以下几个主要部分:
- Banner 轮播:自动轮播展示公司形象图片,共有 3 张轮播图
- 核心优势:展示品质保证、产能充足、专业团队、配送服务四大优势
- 产品速览:快速预览主要产品分类
- 标杆案例:展示精选工程案例
2. 关于我们(About)
"关于我们"页面包含三个标签页:
- 公司简介:公司介绍、发展历程、企业文化
- 企业荣誉:资质证书、AAA 信用、体系认证、荣誉牌匾
- 生产基地:厂区实景、生产线、研发中心实拍
3. 产品中心(Products)
产品中心页面功能:
- 产品分类:展示 10 大产品类别
- 承重砌块
- 装饰砌块
- 仿古砌块
- 复合保温砌块
- 水工砌块
- 土工砌块
- 隔声砌块
- 防火砌块
- 园林景观砌块
- 彩色混凝土路面砖
- 分类筛选:按类别快速筛选产品
- 产品详情弹窗:点击产品卡片可查看详细参数、性能、应用场景、图片
4. 经典案例(Cases)
案例展示页面功能:
- 案例分类:展示 5 大案例类别
- 建筑工程案例
- 高校项目案例
- 国企工业案例
- 市政园林案例
- 乡村文旅案例
- 分类筛选:按类别快速筛选案例
- 案例详情弹窗:查看案例详细信息和应用场景
5. 联系我们(Contact)
联系我们页面功能:
- 联系方式展示:地址、电话、邮箱、工作时间
- 地图导航:点击地图可选择导航软件打开导航
- 支持高德地图
- 支持百度地图
- 支持腾讯地图
- 支持 Google 地图
- 在线表单:可填写姓名、公司、电话、邮箱、留言
- 表单提交:支持验证、加载状态、成功提示