# gaea-studio-frontend

**Repository Path**: gaea-studio/gaea-studio-frontend

## Basic Information

- **Project Name**: gaea-studio-frontend
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-30
- **Last Updated**: 2025-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Gaea Studio 官方网站

![Gaea Studio](https://img.shields.io/badge/Gaea%20Studio-Official%20Website-blue?style=for-the-badge&logo=react)
![React](https://img.shields.io/badge/React-18.2.0-61DAFB?style=flat-square&logo=react)
![TypeScript](https://img.shields.io/badge/TypeScript-4.9.5-3178C6?style=flat-square&logo=typescript)
![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.3.0-38B2AC?style=flat-square&logo=tailwind-css)

> 专业的 Gaea Studio 官方网站，采用现代化技术栈构建，提供卓越的用户体验和视觉效果。

## 🎯 项目概述

Gaea Studio 官方网站是一个基于 React 18 + TypeScript 构建的现代化企业官网，采用 Awwwards 级别的设计标准，为 Gaea Studio 技术团队提供专业的品牌展示和业务转化平台。

### ✨ 核心特性

- 🎨 **现代化设计**: 采用 Vercel 风格的极简主义设计理念
- 📱 **完全响应式**: 完美适配桌面、平板和移动设备
- ⚡ **高性能**: 基于 React 18 和现代前端技术栈
- 🎭 **流畅动画**: 使用 Framer Motion 实现丝滑的交互体验
- 🔍 **SEO 优化**: 完整的 SEO 元数据和结构化数据
- ♿ **无障碍设计**: 符合 WCAG 2.1 AA 标准
- 🌐 **国际化支持**: 支持多语言切换

## 🛠 技术栈

### 前端框架
- **React 18.2.0** - 现代化的 React 框架
- **TypeScript 4.9.5** - 类型安全的 JavaScript
- **React Router DOM 6.8.0** - 客户端路由管理

### 样式系统
- **Tailwind CSS 3.3.0** - 原子化 CSS 框架
- **PostCSS 8.4.0** - CSS 后处理器
- **Autoprefixer 10.4.0** - 自动添加 CSS 前缀

### 动画与交互
- **Framer Motion 10.16.4** - 强大的动画库
- **Lucide React 0.263.1** - 现代化图标库

### 开发工具
- **Create React App 5.0.1** - React 应用脚手架
- **ESLint** - 代码质量检查
- **Prettier** - 代码格式化

## 📁 项目结构

```
gaea-studio-frontend/
├── public/                 # 静态资源
│   ├── index.html         # HTML 模板
│   ├── manifest.json      # PWA 配置
│   └── logo.png          # 品牌 Logo
├── src/                   # 源代码
│   ├── components/        # React 组件
│   │   ├── Header.tsx    # 导航栏组件
│   │   ├── Hero.tsx      # 英雄区域组件
│   │   ├── Services.tsx  # 服务展示组件
│   │   ├── About.tsx     # 关于我们组件
│   │   ├── Projects.tsx  # 项目案例组件
│   │   ├── Contact.tsx   # 联系表单组件
│   │   └── Footer.tsx    # 页脚组件
│   ├── pages/            # 页面组件
│   │   └── Home.tsx      # 首页组件
│   ├── styles/           # 样式文件
│   ├── App.tsx           # 应用根组件
│   ├── index.tsx         # 应用入口
│   └── index.css         # 全局样式
├── package.json          # 项目配置
├── tsconfig.json         # TypeScript 配置
├── tailwind.config.js    # Tailwind CSS 配置
└── README.md             # 项目文档
```

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
# 克隆项目
git clone https://github.com/gaea-studio/gaea-studio-frontend.git
cd gaea-studio-frontend

# 安装依赖
npm install
```

### 开发环境

```bash
# 启动开发服务器
npm start

# 访问 http://localhost:3000
```

### 生产构建

```bash
# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 🎨 设计系统

### 色彩方案

- **主色调**: `#165DFF` (深蓝色) - 专业、可靠、信任
- **辅助色**: `#36D399` (科技绿) - 创新、活力
- **强调色**: `#FF7D00` (橙色) - 吸引注意、行动号召
- **中性色**: 灰度系统，用于文本和背景

### 字体系统

- **主字体**: Inter - 现代无衬线字体
- **代码字体**: JetBrains Mono - 等宽字体
- **字体层次**: 清晰的标题、副标题、正文层次

### 组件规范

- **按钮**: 主按钮、次按钮、文本按钮
- **卡片**: 信息卡片、项目卡片、服务卡片
- **表单**: 输入框、选择器、文本域
- **导航**: 主导航、移动端菜单、面包屑

## 📱 响应式设计

### 断点设置

- **移动端**: 360px - 767px
- **平板端**: 768px - 1023px
- **桌面端**: 1024px - 1439px
- **大屏端**: 1440px+

### 适配策略

- **移动优先**: 采用移动优先的设计理念
- **渐进增强**: 在基础功能上逐步增强
- **触摸优化**: 针对触摸设备优化交互

## ⚡ 性能优化

### 代码分割

- 路由级别的代码分割
- 组件懒加载
- 动态导入

### 资源优化

- 图片懒加载
- 字体优化
- CSS 压缩

### 缓存策略

- 静态资源缓存
- API 响应缓存
- 浏览器缓存

## 🔧 开发指南

### 代码规范

```typescript
// 组件命名使用 PascalCase
const HeroSection: React.FC = () => {
  // 使用 TypeScript 类型注解
  const [isVisible, setIsVisible] = useState<boolean>(false);
  
  return (
    <section className="hero-section">
      {/* 使用语义化的 HTML 标签 */}
    </section>
  );
};
```

### 样式规范

```css
/* 使用 Tailwind CSS 类名 */
.hero-section {
  @apply relative min-h-screen flex items-center justify-center;
}

/* 自定义样式使用 @layer */
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white;
  }
}
```

### 组件开发

1. **功能单一**: 每个组件只负责一个功能
2. **可复用**: 组件应该可以在多个地方使用
3. **可测试**: 组件应该易于测试
4. **可维护**: 代码应该清晰易懂

## 🧪 测试

### 单元测试

```bash
# 运行测试
npm test

# 运行测试覆盖率
npm test -- --coverage
```

### 端到端测试

```bash
# 运行 E2E 测试
npm run test:e2e
```

## 📦 部署

### 构建生产版本

```bash
# 构建优化版本
npm run build

# 构建文件位于 build/ 目录
```

### 部署到阿里云

详细的阿里云部署指南请参考 [DEPLOYMENT.md](./DEPLOYMENT.md)

## 🔗 相关链接

- [设计规范文档](./gaea-studio-website-design.md)
- [API 接口文档](./API-INTERFACES.md)
- [部署指南](./DEPLOYMENT.md)

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 ISC 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系我们

- **官网**: https://gaea-studio.com
- **邮箱**: contact@gaea-studio.com
- **GitHub**: https://github.com/gaea-studio

---

**Gaea Studio** - 专业的技术服务提供商，为企业提供高质量的数字化解决方案。