TechCorp 官网首页

现代简约风格的科技公司官网首页，基于 React + TypeScript + Tailwind CSS 构建

项目特性

• ✨ 现代简约设计 - 采用 SaaS 行业流行的 Flat Design + Glassmorphism 风格
• 🎨 专业配色方案 - 基于搜索优化的蓝白配色，增强信任感
• 📱 完全响应式 - 适配桌面端、平板和移动设备
• ⚡ 高性能 - 使用 Vite 构建，极速开发体验
• 🎯 微交互动画 - 精心设计的 hover 效果和过渡动画
• ♿ 无障碍访问 - 符合 WCAG 标准的可访问性设计

设计规范

配色方案

用途	颜色	Hex 代码
Primary（主色）	蓝色	#2563EB
Secondary（辅助色）	浅蓝	#3B82F6
CTA（行动按钮）	橙色	#F97316
Background（背景）	浅灰	#F8FAFC
Text（文本）	深灰	#1E293B
Border（边框）	边框灰	#E2E8F0

字体方案

• 标题字体: Space Grotesk（几何感、现代）
• 正文字体: DM Sans（易读、专业）

项目结构

test/
├── src/
│   ├── components/          # 可复用组件
│   │   ├── Navbar.tsx      # 导航栏
│   │   ├── Hero.tsx        # Hero 区域
│   │   ├── Features.tsx    # 特性展示
│   │   ├── ProductShowcase.tsx  # 产品展示
│   │   ├── CTASection.tsx  # CTA 区域
│   │   └── Footer.tsx      # 页脚
│   ├── pages/              # 页面组件
│   │   └── HomePage.tsx    # 首页
│   ├── App.tsx             # 根组件
│   ├── main.tsx            # 应用入口
│   └── index.css           # 全局样式
├── index.html              # HTML 模板
├── package.json            # 项目依赖
├── tailwind.config.js      # Tailwind 配置
├── tsconfig.json           # TypeScript 配置
├── vite.config.ts          # Vite 配置
└── postcss.config.js       # PostCSS 配置

快速开始

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

访问 http://localhost:3000 查看网站

3. 构建生产版本

npm run build

构建产物将输出到 dist 目录

4. 预览生产构建

npm run preview

页面结构

1. 导航栏（Navbar）

• 固定顶部导航
• Logo 和品牌名称
• 响应式菜单（移动端汉堡菜单）
• CTA 按钮（免费试用）

2. Hero 区域

• 吸引人的主标题和副标题
• 双 CTA 按钮（主要 + 次要）
• 产品预览图
• 信任标识（客户 Logo）

3. 特性展示区

• 4 个核心特性卡片
• 图标 + 标题 + 描述
• Hover 微交互效果
• 渐变背景色区分

4. 产品展示区

• 详细功能介绍
• 左右交替布局
• 功能亮点列表
• 数据统计展示

5. CTA 区域

• 醒目的渐变背景
• 强有力的行动号召
• 信任标识（无需信用卡、14 天免费）

6. 页脚

• 4 列链接分组
• 社交媒体链接
• 版权信息
• 语言和地区选择

技术栈

• 框架: React 18.2
• 语言: TypeScript 5.2
• 样式: Tailwind CSS 3.4
• 构建工具: Vite 5.0
• 字体: Google Fonts（Space Grotesk + DM Sans）

设计亮点

交互规范遵循

• ✅ 所有可点击元素添加 cursor-pointer
• ✅ Hover 效果使用颜色/透明度变化，不使用 scale
• ✅ 过渡时间 150-300ms，流畅自然
• ✅ 玻璃态效果使用 bg-white/80 以上透明度

响应式设计

• 移动端优先的设计理念
• 使用 px-4 md:px-6 lg:px-8 渐进式 padding
• 断点：sm (640px)、md (768px)、lg (1024px)

无障碍访问

• 所有图片包含 alt 文本
• 焦点状态可见
• 适当的颜色对比度（4.5:1）
• 语义化 HTML 结构

自定义配置

修改主题颜色

编辑 tailwind.config.js:

colors: {
  primary: {
    DEFAULT: '#YOUR_COLOR',
  },
  // ...
}

修改字体

1. 在 index.css 中导入新字体
2. 在 tailwind.config.js 中配置字体名称

浏览器支持

• Chrome（最新版）
• Firefox（最新版）
• Safari（最新版）
• Edge（最新版）

许可证

MIT License

---

设计参考：UI/UX Pro Max Skill - 基于 SaaS 行业最佳实践