1Claw Landing Page

让你的服务器，长出一只 24/7 的 AI 爪子

这是 1Claw 产品的官方 landing page，使用 React + TypeScript + Tailwind CSS 构建。

📋 项目简介

1Claw 是一个运行在 1Panel 上的开源 AI 智能体平台。它将 OpenClaw / Moltbot 的"会自己干活的个人助手"，和 1Panel 的"现代化 Linux 运维面板"结合起来。

✨ 特性

• 🎨 现代化 UI 设计
• 📱 完全响应式布局
• ⚡ 基于 Vite 的快速开发
• 🎭 流畅的动画效果
• 🎯 TypeScript 类型安全
• 🌈 Tailwind CSS 样式系统

🚀 快速开始

前置要求

• Node.js 18+
• npm 或 yarn 或 pnpm

安装依赖

cd 1claw-landing
npm install

开发模式

npm run dev

访问 http://localhost:3000 查看效果。

构建生产版本

npm run build

构建产物将生成在 dist/ 目录。

预览生产构建

npm run preview

📁 项目结构

1claw-landing/
├── public/
│   └── favicon.svg              # 网站图标
├── src/
│   ├── components/
│   │   ├── Navigation.tsx       # 导航栏组件
│   │   ├── Hero.tsx            # Hero 区域（主标题 + CTA）
│   │   ├── WhatIs.tsx          # Section 1: 什么是 1Claw
│   │   ├── WhyNeed.tsx         # Section 2: 核心价值
│   │   ├── PanelIntegration.tsx # Section 3: 结合 1Panel 的特色
│   │   ├── UseCases.tsx        # Section 4: 典型场景
│   │   ├── Features.tsx        # Section 5: 产品特性
│   │   ├── QuickStart.tsx      # Section 6: 快速开始
│   │   ├── OpenSource.tsx      # Section 7: 开源社区
│   │   └── Footer.tsx          # Section 8: 页脚
│   ├── App.tsx                 # 主应用组件
│   ├── main.tsx                # 入口文件
│   └── index.css               # 全局样式
├── index.html                  # HTML 模板
├── package.json                # 项目配置
├── tsconfig.json               # TypeScript 配置
├── vite.config.ts              # Vite 配置
├── tailwind.config.js          # Tailwind CSS 配置
└── postcss.config.js           # PostCSS 配置

🎨 设计系统

颜色方案

• 主色: 蓝色系 (#0ea5e9) - Primary
• 辅助色: 深灰色 (#1f2937)
• 背景: 白色 + 浅灰渐变
• 强调: 各种渐变色用于不同场景

组件风格

• 卡片: 圆角、阴影、悬停动画
• 按钮: 渐变背景、悬停效果
• 导航: 固定顶部、滚动时背景变化
• 响应式: 移动优先设计

🔧 技术栈

• React 18 - UI 框架
• TypeScript - 类型安全
• Vite - 构建工具
• Tailwind CSS - 样式框架
• Lucide React - 图标库

📝 页面内容

1. Hero Section

• 主标题："让你的服务器，长出一只 24/7 的 AI 爪子"
• 副标题介绍
• CTA 按钮组
• 产品特点标签

2. What Is 1Claw

• 产品简介（3段式说明）
• 三大核心卖点

3. Why Need

• 4个核心价值主张
• 带态度的文案风格

4. Panel Integration

• 4个与 1Panel 集成的特色能力

5. Use Cases

• 4个典型应用场景：
  • CEO / 创始人
  • DevOps / 运维
  • 产品 / 内容团队
  • 个人数字生活

6. Features

• 6个核心特性展示

7. Quick Start

• 3步快速开始指南
• 命令行示例

8. Open Source

• 开源生态介绍
• 社区链接

9. Footer

• 最终 CTA
• 导航链接
• 版权信息

🌐 部署

Vercel

npm install -g vercel
vercel

Netlify

npm run build
# 上传 dist/ 目录到 Netlify

Docker

FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 联系方式

• GitHub: github.com/1claw
• 文档: docs.1claw.io
• 社区: Discord / Telegram

---

Made with ❤️ by 1Claw Team