chore: 初始化仓库 — www.tlyq.ai 官网
This commit is contained in:
commit
853620df5f
|
|
@ -0,0 +1,11 @@
|
|||
node_modules/
|
||||
.next/
|
||||
out/
|
||||
build/
|
||||
.DS_Store
|
||||
*.pem
|
||||
.env
|
||||
.env.local
|
||||
.env.development
|
||||
.env.production
|
||||
.claude/
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# 变更日志
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# www.tlyq.ai
|
||||
|
||||
图灵引擎官网，基于 Next.js 构建，生成纯静态文件由 nginx 提供服务。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Next.js (App Router)
|
||||
- Tailwind CSS
|
||||
- 纯静态导出 (`output: 'export'`)
|
||||
|
||||
## 部署
|
||||
|
||||
源码复制到服务器后执行 `npm run build`，构建产物 `out/` 由 nginx 容器提供静态文件服务。
|
||||
|
||||
详见 `docker-compose.yml`。
|
||||
|
||||
## 关联站点
|
||||
|
||||
- [cloud.tlyq.ai](https://cloud.tlyq.ai) — 图灵智算系统云平台
|
||||
- [token.tlyq.ai](https://token.tlyq.ai) — Token 工厂
|
||||
- [issue.tlyq.ai](https://issue.tlyq.ai) — 工单系统
|
||||
- [assets.tlyq.ai](https://assets.tlyq.ai) — 资产管理系统
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
services:
|
||||
www-dev:
|
||||
image: node:20-alpine
|
||||
container_name: www-local-ai
|
||||
working_dir: /app
|
||||
volumes:
|
||||
- ./src:/app
|
||||
- node_modules:/app/node_modules
|
||||
ports:
|
||||
- "6173:5173"
|
||||
command: sh -c "npm install && npm run dev -- --hostname 0.0.0.0"
|
||||
networks:
|
||||
- devnet
|
||||
|
||||
volumes:
|
||||
node_modules:
|
||||
|
||||
networks:
|
||||
devnet:
|
||||
driver: bridge
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
# ===========================================
|
||||
# Next.js Environment Variables
|
||||
# ===========================================
|
||||
|
||||
# API URL (leave empty for local, set for production)
|
||||
NEXT_PUBLIC_API_URL=
|
||||
|
||||
# Example:
|
||||
# NEXT_PUBLIC_API_URL=https://api.example.com
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
node_modules/
|
||||
.next/
|
||||
out/
|
||||
.DS_Store
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/**
|
||||
* babel-plugin-nxcode-source
|
||||
*
|
||||
* Babel 插件：为每个 JSX 元素注入 data-nxcode-source 属性
|
||||
* 用于 Element Inspector 功能的精准源码定位
|
||||
*
|
||||
* 输入:
|
||||
* <button className="submit">登录</button>
|
||||
*
|
||||
* 输出:
|
||||
* <button className="submit" data-nxcode-source="src/components/Login.tsx:42:5">登录</button>
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function({ types: t }) {
|
||||
return {
|
||||
name: 'nxcode-source-plugin',
|
||||
|
||||
visitor: {
|
||||
JSXOpeningElement(nodePath, state) {
|
||||
// 跳过 Fragment
|
||||
if (t.isJSXIdentifier(nodePath.node.name, { name: 'Fragment' })) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 跳过 React.Fragment
|
||||
if (t.isJSXMemberExpression(nodePath.node.name)) {
|
||||
const { object, property } = nodePath.node.name;
|
||||
if (
|
||||
t.isJSXIdentifier(object, { name: 'React' }) &&
|
||||
t.isJSXIdentifier(property, { name: 'Fragment' })
|
||||
) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 跳过已经有 data-nxcode-source 的元素
|
||||
const hasSource = nodePath.node.attributes.some(
|
||||
attr => t.isJSXAttribute(attr) &&
|
||||
t.isJSXIdentifier(attr.name, { name: 'data-nxcode-source' })
|
||||
);
|
||||
if (hasSource) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取位置信息
|
||||
const { loc } = nodePath.node;
|
||||
if (!loc) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取相对路径
|
||||
const filename = state.filename || 'unknown';
|
||||
const rootDir = state.opts.rootDir || state.cwd || process.cwd();
|
||||
|
||||
let relativePath;
|
||||
try {
|
||||
relativePath = path.relative(rootDir, filename).replace(/\\/g, '/');
|
||||
// 确保路径不以 ../ 开头（文件在 rootDir 外面）
|
||||
if (relativePath.startsWith('../')) {
|
||||
relativePath = path.basename(filename);
|
||||
}
|
||||
} catch {
|
||||
relativePath = path.basename(filename);
|
||||
}
|
||||
|
||||
// 构建 source 值: "src/components/Button.tsx:42:5"
|
||||
const sourceValue = `${relativePath}:${loc.start.line}:${loc.start.column + 1}`;
|
||||
|
||||
// 注入 data-nxcode-source 属性
|
||||
nodePath.node.attributes.push(
|
||||
t.jsxAttribute(
|
||||
t.jsxIdentifier('data-nxcode-source'),
|
||||
t.stringLiteral(sourceValue)
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
# Apple 风格设计系统变更记录
|
||||
|
||||
> 参考：`docs/DESIGN-apple.md`
|
||||
> 分支：apple
|
||||
> 创建时间：2026-04-21
|
||||
|
||||
## 颜色系统
|
||||
|
||||
### 页面背景
|
||||
| 模式 | 当前值 | 新值 |
|
||||
|------|--------|------|
|
||||
| 亮色 | `#f8fafc` (slate-50) | `#f5f5f7` |
|
||||
| 暗色 | `#020617` (slate-950) | `#000000` |
|
||||
|
||||
### 强调色
|
||||
| 元素 | 当前值 | 新值 |
|
||||
|------|--------|------|
|
||||
| CTA/按钮 | `#2563eb→#0891b2` 渐变 | `#0071e3` 纯色 |
|
||||
| 链接（亮） | `text-blue-600` | `#0066cc` |
|
||||
| 链接（暗） | `text-blue-400` | `#2997ff` |
|
||||
| Focus ring | `ring-blue-500` | `#0071e3` |
|
||||
|
||||
### 文字色
|
||||
| 模式 | 当前值 | 新值 |
|
||||
|------|--------|------|
|
||||
| 主文字（亮） | `#0f172a` (slate-900) | `#1d1d1f` |
|
||||
| 主文字（暗） | `#ffffff` | `#ffffff` |
|
||||
| 次要文字（亮） | `#475569` (slate-600) | `rgba(0,0,0,0.8)` |
|
||||
| 次要文字（暗） | `#d1d5db` (gray-300) | `#ffffff` (80%) |
|
||||
| 弱化文字 | `#94a3b8` / `#6b7280` | `rgba(0,0,0,0.48)` |
|
||||
|
||||
### 卡片/表面色
|
||||
| 模式 | 当前值 | 新值 |
|
||||
|------|--------|------|
|
||||
| 亮色卡片 | `from-slate-100 to-slate-200` 渐变 | `#f5f5f7` 纯色 |
|
||||
| 暗色卡片 | `from-slate-800 to-slate-900` 渐变 | `#272729` 纯色 |
|
||||
|
||||
### 边框
|
||||
| 当前 | 新值 |
|
||||
|------|------|
|
||||
| `border-blue-300/50` / `border-blue-500/20` | **无边框** |
|
||||
| `border-amber-300/50` / `border-amber-500/20` | **无边框** |
|
||||
| `border-purple-300/50` / `border-purple-500/20` | **无边框** |
|
||||
|
||||
### 图标渐变 → 单色
|
||||
| 当前 | 新值 |
|
||||
|------|------|
|
||||
| `from-blue-500 to-cyan-400` | `#0071e3` 或 `rgba(0,0,0,0.48)` |
|
||||
| `from-amber-500 to-orange-400` | `#0071e3` 或 `rgba(0,0,0,0.48)` |
|
||||
| `from-purple-500 to-pink-400` | `#0071e3` 或 `rgba(0,0,0,0.48)` |
|
||||
|
||||
## 字体系统
|
||||
|
||||
### 字体族
|
||||
| 当前 | 新值 |
|
||||
|------|------|
|
||||
| 系统默认 | `SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif` |
|
||||
|
||||
- 20px 及以上使用 SF Pro Display
|
||||
- 19px 及以下使用 SF Pro Text
|
||||
|
||||
### 排版层级
|
||||
| 角色 | 字号 | 字重 | 行高 | 字间距 |
|
||||
|------|------|------|------|--------|
|
||||
| Hero 标题 | 56px | 600 | 1.07 | -0.28px |
|
||||
| 区块标题 | 40px | 600 | 1.10 | normal |
|
||||
| 瓷砖标题 | 28px | 400 | 1.14 | 0.196px |
|
||||
| 卡片标题 | 21px | 700 | 1.19 | 0.231px |
|
||||
| 正文 | 17px | 400 | 1.47 | -0.374px |
|
||||
| 按钮大 | 18px | 300 | 1.00 | normal |
|
||||
| 链接 | 14px | 400 | 1.43 | -0.224px |
|
||||
| 说明文字 | 14px | 400 | 1.29 | -0.224px |
|
||||
| 微小文字 | 12px | 400 | 1.33 | -0.12px |
|
||||
|
||||
## 布局系统
|
||||
|
||||
### 内容宽度
|
||||
| 当前 | 新值 |
|
||||
|------|------|
|
||||
| `max-w-7xl` (1280px) | `max-w-[980px]` |
|
||||
|
||||
### 区块背景交替
|
||||
| 当前 | 新值 |
|
||||
|------|------|
|
||||
| `bg-slate-100/80` ↔ `bg-slate-900/50` | `#f5f5f7` ↔ `#000000` 纯色交替 |
|
||||
|
||||
### 圆角
|
||||
| 元素 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 卡片 | `rounded-2xl` (16px) | `rounded-lg` (8px) |
|
||||
| CTA 按钮 | `rounded-full` | `rounded-lg` (8px) |
|
||||
| 胶囊链接 | 无 | `rounded-full` (980px) |
|
||||
|
||||
### 间距
|
||||
| 当前 | 新值 |
|
||||
|------|------|
|
||||
| Section `py-20` | 全屏高度区块，cinematic breathing |
|
||||
| Card `p-8` | 保持，但减少内边距层级 |
|
||||
|
||||
## 组件变更
|
||||
|
||||
### 导航栏
|
||||
| 属性 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 背景 | `bg-white/95 dark:bg-slate-900/95` | `rgba(0,0,0,0.8)` + blur |
|
||||
| 高度 | `h-16` (64px) | `h-12` (48px) |
|
||||
| 边框 | `border-blue-200/50` | 无边框 |
|
||||
| 模糊 | `backdrop-blur-sm` | `backdrop-blur-xl saturate-180` |
|
||||
| 文字色 | 跟随模式切换 | 始终白色 |
|
||||
| 活跃态 | `text-blue-600 bg-blue-500/10` | 下划线 |
|
||||
|
||||
### Hero 区域
|
||||
| 属性 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 背景 | 蓝→slate 渐变 + 脉冲 blob | 纯黑 `#000000` |
|
||||
| 装饰 | 网格 SVG + 浮动徽章 + blob | 无装饰 |
|
||||
| 标题 | 渐变文字 `text-gradient` | 纯白，56px/600/1.07/-0.28px |
|
||||
| CTA | 渐变按钮 + shadow | `#0071e3` 实心 + 胶囊 outline |
|
||||
|
||||
### 业务卡片
|
||||
| 属性 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 背景 | 渐变 `from-slate-100 to-slate-200` | 纯色 `#f5f5f7` / `#272729` |
|
||||
| 边框 | 蓝/琥珀/紫边框 | 无边框 |
|
||||
| Hover | `scale(1.05)` + 蓝色光晕 | 无变形，链接交互 |
|
||||
| 图标 | 渐变色块 | 单色 |
|
||||
| CTA | 箭头图标 | 「了解更多 >」胶囊链接 |
|
||||
|
||||
### CTA 按钮
|
||||
| 属性 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 背景 | `from-blue-600 to-cyan-600` 渐变 | `#0071e3` 纯色 |
|
||||
| 阴影 | `shadow-lg shadow-blue-500/50` | 无阴影 |
|
||||
| 圆角 | `rounded-full` | `rounded-lg` (8px) |
|
||||
| Focus | `ring-2 ring-blue-500` | `2px solid #0071e3` outline |
|
||||
|
||||
### 统计数字
|
||||
| 属性 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 颜色 | 蓝→青渐变文字 | 纯色 `#1d1d1f` / `#ffffff` |
|
||||
|
||||
### 时间线
|
||||
| 属性 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 圆点 | `bg-blue-500` + 蓝色边框 | 极简灰色圆点 |
|
||||
| 卡片 | 渐变背景 + 蓝色边框 hover | 纯色背景，无边框 |
|
||||
|
||||
### 表单输入
|
||||
| 属性 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 边框 | `border-blue-300/50` | `border-gray-300` 极简灰 |
|
||||
| Focus | `ring-blue-500` | `ring-#0071e3` |
|
||||
|
||||
### Footer
|
||||
| 属性 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 背景 | `bg-slate-900` | `#f5f5f7`（亮）/ `#000000`（暗） |
|
||||
| 边框 | 蓝色顶部分隔线 | 无边框 |
|
||||
| 文字 | `text-gray-400` | `rgba(0,0,0,0.48)` |
|
||||
|
||||
## 动画变更
|
||||
|
||||
| 效果 | 当前 | 新值 |
|
||||
|------|------|------|
|
||||
| 浮动徽章 | `animate-float` translateY ±20px | **移除** |
|
||||
| 脉冲 blob | `animate-pulse` 模糊渐变圆 | **移除** |
|
||||
| 卡片 hover | `scale(1.05)` + 蓝色光晕 | **移除** |
|
||||
| 图标 hover | `scale(110%)` | **移除或极微小** |
|
||||
| 箭头滑动 | `translate-x-2` | 保留，更微妙 |
|
||||
| 按钮 hover | 渐变色变深 | 蓝色微亮 `#0077ed` |
|
||||
| 下拉菜单 | `opacity + visibility` 200ms | 保留 |
|
||||
| 表单 focus | `transition-colors` | 保留 |
|
||||
|
||||
## 响应式断点
|
||||
|
||||
| 名称 | 宽度 | 变化 |
|
||||
|------|------|------|
|
||||
| Mobile | 360-480px | 单列，标题 28px |
|
||||
| Tablet | 640-834px | 2 列开始，标题 40px |
|
||||
| Desktop | 1024-1440px | 完整布局，980px 最大宽度 |
|
||||
| Large | >1440px | 居中 + 宽裕边距 |
|
||||
|
||||
## 涉及文件清单
|
||||
|
||||
| 文件 | 改动类型 |
|
||||
|------|---------|
|
||||
| `src/app/globals.css` | 重写样式系统 |
|
||||
| `tailwind.config.js` | 添加 Apple token |
|
||||
| `src/app/layout.tsx` | 字体、背景色 |
|
||||
| `src/components/Navigation.tsx` | 玻璃导航栏 |
|
||||
| `src/components/Footer.tsx` | 极简化 |
|
||||
| `src/app/page.tsx` | 首页全面重设计 |
|
||||
| `src/app/about/page.tsx` | 风格统一 |
|
||||
| `src/app/business/page.tsx` | 风格统一 |
|
||||
| `src/app/business/infrastructure/page.tsx` | 风格统一 |
|
||||
| `src/app/business/token-factory/page.tsx` | 风格统一 |
|
||||
| `src/app/business/cloud-platform/page.tsx` | 风格统一 |
|
||||
| `src/app/news/page.tsx` | 风格统一 |
|
||||
| `src/app/contact/page.tsx` | 风格统一 |
|
||||
| `src/app/console/page.tsx` | 风格统一 |
|
||||
|
||||
## 验证清单
|
||||
|
||||
- [ ] `npm run build` 静态导出成功
|
||||
- [ ] 所有页面亮色模式正常
|
||||
- [ ] 所有页面暗色模式正常
|
||||
- [ ] 导航栏玻璃效果生效
|
||||
- [ ] 无渐变文字、无渐变按钮、无渐变背景
|
||||
- [ ] 无卡片边框（所有页面）
|
||||
- [ ] 图标全部单色
|
||||
- [ ] Hero 区域无装饰动画
|
||||
- [ ] 字体使用 SF Pro fallback
|
||||
- [ ] 负 letter-spacing 生效
|
||||
- [ ] 移动端 375px 正常显示
|
||||
- [ ] 平板 768px 正常显示
|
||||
- [ ] 桌面 1024px 正常显示
|
||||
- [ ] 所有链接和按钮可点击
|
||||
- [ ] 表单提交功能正常
|
||||
- [ ] 语言切换正常
|
||||
- [ ] 主题切换正常
|
||||
- [ ] 部署后线上验证通过
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
/// <reference path="./.next/types/routes.d.ts" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import type { NextConfig } from 'next'
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: 'export',
|
||||
images: {
|
||||
unoptimized: true
|
||||
},
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true
|
||||
},
|
||||
typescript: {
|
||||
ignoreBuildErrors: true
|
||||
}
|
||||
}
|
||||
|
||||
export default nextConfig
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "turing-engine",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "NODE_OPTIONS='--max-old-space-size=2048' next dev --port 5173",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^1.8.0",
|
||||
"next": "^15.1.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.0.0",
|
||||
"@types/node": "^22.10.0",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"eslint": "^10.2.1",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.6.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
'use client'
|
||||
|
||||
import { Building2, Target, Rocket, Award } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function AboutPage() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-slate-900 dark:text-white">
|
||||
{tr.about.h1a}<span className="text-gradient">{tr.about.h1b}</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
{tr.about.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Company Introduction */}
|
||||
<section className="mb-20">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-6 text-slate-900 dark:text-white">{tr.about.introTitle}</h2>
|
||||
<div className="space-y-4 text-slate-600 dark:text-gray-300 leading-relaxed">
|
||||
<p>{tr.about.p1}</p>
|
||||
<p>{tr.about.p2}</p>
|
||||
<p>{tr.about.p3}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="p-6 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<Building2 size={40} className="text-blue-500 dark:text-blue-400 mb-4" />
|
||||
<h3 className="text-lg font-bold mb-2 text-slate-900 dark:text-white">{tr.about.c1Title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 text-sm">{tr.about.c1Desc}</p>
|
||||
</div>
|
||||
<div className="p-6 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<Target size={40} className="text-purple-500 dark:text-purple-400 mb-4" />
|
||||
<h3 className="text-lg font-bold mb-2 text-slate-900 dark:text-white">{tr.about.c2Title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 text-sm">{tr.about.c2Desc}</p>
|
||||
</div>
|
||||
<div className="p-6 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<Rocket size={40} className="text-amber-500 dark:text-amber-400 mb-4" />
|
||||
<h3 className="text-lg font-bold mb-2 text-slate-900 dark:text-white">{tr.about.c3Title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 text-sm">{tr.about.c3Desc}</p>
|
||||
</div>
|
||||
<div className="p-6 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<Award size={40} className="text-cyan-500 dark:text-cyan-400 mb-4" />
|
||||
<h3 className="text-lg font-bold mb-2 text-slate-900 dark:text-white">{tr.about.c4Title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 text-sm">{tr.about.c4Desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission & Vision */}
|
||||
<section className="mb-20 py-16 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-2xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="max-w-5xl mx-auto px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-blue-600 dark:text-blue-400">{tr.about.missionTitle}</h3>
|
||||
<p className="text-slate-600 dark:text-gray-300 leading-relaxed">{tr.about.missionText}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-blue-600 dark:text-blue-400">{tr.about.visionTitle}</h3>
|
||||
<p className="text-slate-600 dark:text-gray-300 leading-relaxed">{tr.about.visionText}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Development Timeline */}
|
||||
<section>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{tr.about.timelineTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{tr.about.timelineSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute left-4 md:left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 via-cyan-400 to-blue-500"></div>
|
||||
|
||||
<div className="space-y-12">
|
||||
{tr.about.milestones.map((milestone, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`relative flex items-center ${
|
||||
index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
|
||||
} flex-col md:gap-8`}
|
||||
>
|
||||
<div className="absolute left-4 md:left-1/2 w-4 h-4 -ml-2 rounded-full bg-blue-500 border-4 border-slate-100 dark:border-slate-950 z-10"></div>
|
||||
<div className={`w-full md:w-[calc(50%-2rem)] ml-12 md:ml-0 ${index % 2 === 0 ? 'md:text-right' : 'md:text-left'}`}>
|
||||
<div className="inline-block">
|
||||
<div className="p-6 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20 hover:border-blue-500/40 transition-all duration-300 hover:scale-105">
|
||||
<div className="text-blue-600 dark:text-blue-400 font-semibold mb-2">{milestone.date}</div>
|
||||
<h3 className="text-xl font-bold mb-2 text-slate-900 dark:text-white">{milestone.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{milestone.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Section */}
|
||||
<section className="mt-20 pt-20 border-t border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{tr.about.teamTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 mb-12">{tr.about.teamSubtitle}</p>
|
||||
<div className="p-12 bg-slate-100/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<p className="text-slate-500 dark:text-gray-400">{tr.about.teamPlaceholder}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { ArrowRight, Cloud, Layers, Boxes, Gauge, Lock, Workflow } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function CloudPlatformPage() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
const cp = tr.cloudPlatform
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-20">
|
||||
<div className="inline-flex items-center space-x-2 bg-purple-500/10 border border-purple-500/30 rounded-full px-6 py-2 mb-6">
|
||||
<Cloud size={20} className="text-purple-500 dark:text-purple-400" />
|
||||
<span className="text-purple-600 dark:text-purple-400 text-sm font-medium">{cp.badge}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-slate-900 dark:text-white">
|
||||
<span className="text-gradient">{cp.h1a}</span>{cp.h1b}
|
||||
</h1>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 max-w-3xl mx-auto">{cp.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* Platform Highlights */}
|
||||
<section className="mb-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="p-8 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl border border-purple-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">{cp.s1Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{cp.s1Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{cp.s1Sub}</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-xl border border-blue-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">{cp.s2Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{cp.s2Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{cp.s2Sub}</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-amber-500/10 to-orange-500/10 rounded-xl border border-amber-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">{cp.s3Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{cp.s3Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{cp.s3Sub}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Features */}
|
||||
<section className="mb-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{cp.coreTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{cp.coreSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: <Layers size={28} className="text-white" />, grad: 'from-purple-500 to-pink-400', title: cp.f1Title, desc: cp.f1Desc },
|
||||
{ icon: <Boxes size={28} className="text-white" />, grad: 'from-blue-500 to-cyan-400', title: cp.f2Title, desc: cp.f2Desc },
|
||||
{ icon: <Gauge size={28} className="text-white" />, grad: 'from-amber-500 to-orange-400', title: cp.f3Title, desc: cp.f3Desc },
|
||||
{ icon: <Lock size={28} className="text-white" />, grad: 'from-cyan-500 to-blue-400', title: cp.f4Title, desc: cp.f4Desc },
|
||||
{ icon: <Workflow size={28} className="text-white" />, grad: 'from-green-500 to-emerald-400', title: cp.f5Title, desc: cp.f5Desc },
|
||||
{ icon: <Cloud size={28} className="text-white" />, grad: 'from-pink-500 to-rose-400', title: cp.f6Title, desc: cp.f6Desc },
|
||||
].map((f, idx) => (
|
||||
<div key={idx} className="p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-purple-300/50 dark:border-purple-500/20">
|
||||
<div className={`w-14 h-14 bg-gradient-to-br ${f.grad} rounded-lg flex items-center justify-center mb-6`}>
|
||||
{f.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-slate-900 dark:text-white">{f.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* AI Toolchain */}
|
||||
<section className="mb-20 py-16 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-2xl border border-purple-300/50 dark:border-purple-500/20">
|
||||
<div className="max-w-5xl mx-auto px-8">
|
||||
<h2 className="text-3xl font-bold mb-12 text-center text-slate-900 dark:text-white">{cp.toolTitle}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{[
|
||||
{ title: cp.t1Title, color: 'text-purple-600 dark:text-purple-400', items: [cp.t1i1, cp.t1i2, cp.t1i3] },
|
||||
{ title: cp.t2Title, color: 'text-purple-600 dark:text-purple-400', items: [cp.t2i1, cp.t2i2, cp.t2i3] },
|
||||
{ title: cp.t3Title, color: 'text-purple-600 dark:text-purple-400', items: [cp.t3i1, cp.t3i2, cp.t3i3] },
|
||||
{ title: cp.t4Title, color: 'text-purple-600 dark:text-purple-400', items: [cp.t4i1, cp.t4i2, cp.t4i3] },
|
||||
].map((section, idx) => (
|
||||
<div key={idx}>
|
||||
<h3 className={`text-xl font-bold mb-4 ${section.color}`}>{section.title}</h3>
|
||||
<ul className="space-y-3 text-slate-500 dark:text-gray-400">
|
||||
{section.items.map((item, iIdx) => (
|
||||
<li key={iIdx} className="flex items-start space-x-2">
|
||||
<span className="text-purple-500 dark:text-purple-400 mt-1">✓</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Use Cases */}
|
||||
<section className="mb-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{cp.useCaseTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{cp.useCaseSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{[
|
||||
{ title: cp.uc1Title, desc: cp.uc1Desc, items: [cp.uc1i1, cp.uc1i2, cp.uc1i3] },
|
||||
{ title: cp.uc2Title, desc: cp.uc2Desc, items: [cp.uc2i1, cp.uc2i2, cp.uc2i3] },
|
||||
{ title: cp.uc3Title, desc: cp.uc3Desc, items: [cp.uc3i1, cp.uc3i2, cp.uc3i3] },
|
||||
{ title: cp.uc4Title, desc: cp.uc4Desc, items: [cp.uc4i1, cp.uc4i2, cp.uc4i3] },
|
||||
].map((uc, idx) => (
|
||||
<div key={idx} className="p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-purple-300/50 dark:border-purple-500/20">
|
||||
<h3 className="text-2xl font-bold mb-4 text-slate-900 dark:text-white">{uc.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-4">{uc.desc}</p>
|
||||
<div className="space-y-2">
|
||||
{uc.items.map((item, iIdx) => (
|
||||
<div key={iIdx} className="flex items-center space-x-2 text-sm text-slate-500 dark:text-gray-400">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-purple-500 dark:bg-purple-400"></div>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="text-center py-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl border border-purple-500/20">
|
||||
<h2 className="text-3xl font-bold mb-6 text-slate-900 dark:text-white">{cp.ctaTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 mb-8 max-w-2xl mx-auto">{cp.ctaSubtitle}</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a
|
||||
href="http://localhost:6174/login"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center space-x-2 px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold text-white hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-lg shadow-purple-500/50"
|
||||
>
|
||||
<span>{cp.ctaBtn1}</span>
|
||||
<ArrowRight size={20} />
|
||||
</a>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="px-8 py-4 bg-white dark:bg-slate-800 border border-purple-500/30 rounded-lg font-semibold text-slate-800 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-300"
|
||||
>
|
||||
{cp.ctaBtn2}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { ArrowRight, Cpu, Server, Zap, Shield, TrendingUp, Network } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function InfrastructurePage() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
const i = tr.infrastructure
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-20">
|
||||
<div className="inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/30 rounded-full px-6 py-2 mb-6">
|
||||
<Cpu size={20} className="text-blue-500 dark:text-blue-400" />
|
||||
<span className="text-blue-600 dark:text-blue-400 text-sm font-medium">{i.badge}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-slate-900 dark:text-white">
|
||||
{i.h1a}<span className="text-gradient">{i.h1b}</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 max-w-3xl mx-auto">{i.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* Key Stats */}
|
||||
<section className="mb-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="p-8 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-xl border border-blue-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">1440</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{i.s1Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{i.s1Sub}</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl border border-purple-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">H800</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{i.s2Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{i.s2Sub}</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-amber-500/10 to-orange-500/10 rounded-xl border border-amber-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">{i.s3Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{i.s3Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{i.s3Sub}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Features */}
|
||||
<section className="mb-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{i.coreTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{i.coreSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: <Server size={28} className="text-white" />, grad: 'from-blue-500 to-cyan-400', title: i.f1Title, desc: i.f1Desc },
|
||||
{ icon: <Zap size={28} className="text-white" />, grad: 'from-purple-500 to-pink-400', title: i.f2Title, desc: i.f2Desc },
|
||||
{ icon: <Network size={28} className="text-white" />, grad: 'from-amber-500 to-orange-400', title: i.f3Title, desc: i.f3Desc },
|
||||
{ icon: <Shield size={28} className="text-white" />, grad: 'from-cyan-500 to-blue-400', title: i.f4Title, desc: i.f4Desc },
|
||||
{ icon: <TrendingUp size={28} className="text-white" />, grad: 'from-green-500 to-emerald-400', title: i.f5Title, desc: i.f5Desc },
|
||||
{ icon: <Cpu size={28} className="text-white" />, grad: 'from-pink-500 to-rose-400', title: i.f6Title, desc: i.f6Desc },
|
||||
].map((f, idx) => (
|
||||
<div key={idx} className="p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className={`w-14 h-14 bg-gradient-to-br ${f.grad} rounded-lg flex items-center justify-center mb-6`}>
|
||||
{f.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-slate-900 dark:text-white">{f.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Technical Specs */}
|
||||
<section className="mb-20 py-16 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-2xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="max-w-5xl mx-auto px-8">
|
||||
<h2 className="text-3xl font-bold mb-12 text-center text-slate-900 dark:text-white">{i.specTitle}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
{[{ title: i.sp1Title, desc: i.sp1Desc }, { title: i.sp2Title, desc: i.sp2Desc }, { title: i.sp3Title, desc: i.sp3Desc }].map((s, idx) => (
|
||||
<div key={idx} className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-blue-500 dark:bg-blue-400"></div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-1 text-slate-900 dark:text-white">{s.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{s.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
{[{ title: i.sp4Title, desc: i.sp4Desc }, { title: i.sp5Title, desc: i.sp5Desc }, { title: i.sp6Title, desc: i.sp6Desc }].map((s, idx) => (
|
||||
<div key={idx} className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-blue-500 dark:bg-blue-400"></div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-1 text-slate-900 dark:text-white">{s.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{s.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Use Cases */}
|
||||
<section className="mb-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{i.useCaseTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{i.useCaseSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{[
|
||||
{ title: i.uc1Title, desc: i.uc1Desc, items: [i.uc1i1, i.uc1i2, i.uc1i3] },
|
||||
{ title: i.uc2Title, desc: i.uc2Desc, items: [i.uc2i1, i.uc2i2, i.uc2i3] },
|
||||
{ title: i.uc3Title, desc: i.uc3Desc, items: [i.uc3i1, i.uc3i2, i.uc3i3] },
|
||||
{ title: i.uc4Title, desc: i.uc4Desc, items: [i.uc4i1, i.uc4i2, i.uc4i3] },
|
||||
].map((uc, idx) => (
|
||||
<div key={idx} className="p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<h3 className="text-2xl font-bold mb-4 text-slate-900 dark:text-white">{uc.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-4">{uc.desc}</p>
|
||||
<ul className="space-y-2 text-slate-500 dark:text-gray-400">
|
||||
{uc.items.map((item, iIdx) => (
|
||||
<li key={iIdx} className="flex items-start space-x-2">
|
||||
<span className="text-blue-500 dark:text-blue-400 mt-1">•</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-bold mb-6 text-slate-900 dark:text-white">{i.ctaTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 mb-8">{i.ctaSubtitle}</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center space-x-2 px-8 py-4 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg font-semibold text-white hover:from-blue-700 hover:to-cyan-700 transition-all duration-300 shadow-lg shadow-blue-500/50"
|
||||
>
|
||||
<span>{i.ctaBtn}</span>
|
||||
<ArrowRight size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { ArrowRight, Cpu, Cloud, Factory } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function BusinessPage() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
|
||||
<span className="text-gradient">{tr.business.h1}</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
{tr.business.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Business Cards */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20">
|
||||
<Link href="/business/infrastructure" className="group">
|
||||
<div className="h-full p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20 card-hover">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<Cpu size={40} className="text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||
{tr.business.infraTitle}
|
||||
</h2>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-6 leading-relaxed">{tr.business.infraDesc}</p>
|
||||
<div className="flex items-center text-blue-600 dark:text-blue-400 font-semibold">
|
||||
<span>{tr.business.infraCta}</span>
|
||||
<ArrowRight size={20} className="ml-2 group-hover:translate-x-2 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/business/token-factory" className="group">
|
||||
<div className="h-full p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20 card-hover">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-amber-500 to-orange-400 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<Factory size={40} className="text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||
{tr.business.tokenTitle}
|
||||
</h2>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-6 leading-relaxed">{tr.business.tokenDesc}</p>
|
||||
<div className="flex items-center text-blue-600 dark:text-blue-400 font-semibold">
|
||||
<span>{tr.business.tokenCta}</span>
|
||||
<ArrowRight size={20} className="ml-2 group-hover:translate-x-2 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/business/cloud-platform" className="group">
|
||||
<div className="h-full p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20 card-hover">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-400 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<Cloud size={40} className="text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||
{tr.business.cloudTitle}
|
||||
</h2>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-6 leading-relaxed">{tr.business.cloudDesc}</p>
|
||||
<div className="flex items-center text-blue-600 dark:text-blue-400 font-semibold">
|
||||
<span>{tr.business.cloudCta}</span>
|
||||
<ArrowRight size={20} className="ml-2 group-hover:translate-x-2 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Business Value */}
|
||||
<section className="py-16 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-2xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="max-w-5xl mx-auto px-8">
|
||||
<h2 className="text-3xl font-bold mb-12 text-center text-slate-900 dark:text-white">{tr.business.valueTitle}</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{[
|
||||
{ num: '1', title: tr.business.v1Title, desc: tr.business.v1Desc },
|
||||
{ num: '2', title: tr.business.v2Title, desc: tr.business.v2Desc },
|
||||
{ num: '3', title: tr.business.v3Title, desc: tr.business.v3Desc },
|
||||
{ num: '4', title: tr.business.v4Title, desc: tr.business.v4Desc },
|
||||
].map((v) => (
|
||||
<div key={v.num} className="flex space-x-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
|
||||
<span className="text-2xl font-bold text-blue-600 dark:text-blue-400">{v.num}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-2 text-slate-900 dark:text-white">{v.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{v.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="mt-20 text-center">
|
||||
<h2 className="text-3xl font-bold mb-6 text-slate-900 dark:text-white">{tr.business.ctaTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 mb-8">{tr.business.ctaSubtitle}</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center space-x-2 px-8 py-4 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg font-semibold text-white hover:from-blue-700 hover:to-cyan-700 transition-all duration-300 shadow-lg shadow-blue-500/50"
|
||||
>
|
||||
<span>{tr.business.ctaBtn}</span>
|
||||
<ArrowRight size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { ArrowRight, Factory, Zap, Shield, TrendingUp, Cpu, Network } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function TokenFactoryPage() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
const tf = tr.tokenFactory
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-20">
|
||||
<div className="inline-flex items-center space-x-2 bg-amber-500/10 border border-amber-500/30 rounded-full px-6 py-2 mb-6">
|
||||
<Factory size={20} className="text-amber-500 dark:text-amber-400" />
|
||||
<span className="text-amber-600 dark:text-amber-400 text-sm font-medium">{tf.badge}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-slate-900 dark:text-white">
|
||||
<span className="text-gradient">{tf.h1a}</span>{tf.h1b}
|
||||
</h1>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 max-w-3xl mx-auto">{tf.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* Key Advantages */}
|
||||
<section className="mb-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="p-8 bg-gradient-to-br from-amber-500/10 to-orange-500/10 rounded-xl border border-amber-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">{tf.s1Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{tf.s1Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{tf.s1Sub}</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-xl border border-blue-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">{tf.s2Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{tf.s2Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{tf.s2Sub}</p>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl border border-purple-500/20 text-center">
|
||||
<div className="text-5xl font-bold text-gradient mb-2">{tf.s3Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400 mb-4">{tf.s3Label}</div>
|
||||
<p className="text-sm text-slate-400 dark:text-gray-500">{tf.s3Sub}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What is TaaS */}
|
||||
<section className="mb-20 py-16 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-2xl border border-amber-300/50 dark:border-amber-500/20">
|
||||
<div className="max-w-5xl mx-auto px-8">
|
||||
<h2 className="text-3xl font-bold mb-8 text-center text-slate-900 dark:text-white">{tf.taasTitle}</h2>
|
||||
<div className="space-y-6 text-slate-600 dark:text-gray-300 leading-relaxed">
|
||||
<p>{tf.tp1}</p>
|
||||
<p>{tf.tp2}</p>
|
||||
<p>{tf.tp3}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Features */}
|
||||
<section className="mb-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{tf.coreTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{tf.coreSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ icon: <Factory size={28} className="text-white" />, grad: 'from-amber-500 to-orange-400', title: tf.f1Title, desc: tf.f1Desc },
|
||||
{ icon: <Zap size={28} className="text-white" />, grad: 'from-blue-500 to-cyan-400', title: tf.f2Title, desc: tf.f2Desc },
|
||||
{ icon: <Shield size={28} className="text-white" />, grad: 'from-purple-500 to-pink-400', title: tf.f3Title, desc: tf.f3Desc },
|
||||
{ icon: <TrendingUp size={28} className="text-white" />, grad: 'from-cyan-500 to-blue-400', title: tf.f4Title, desc: tf.f4Desc },
|
||||
{ icon: <Cpu size={28} className="text-white" />, grad: 'from-green-500 to-emerald-400', title: tf.f5Title, desc: tf.f5Desc },
|
||||
{ icon: <Network size={28} className="text-white" />, grad: 'from-pink-500 to-rose-400', title: tf.f6Title, desc: tf.f6Desc },
|
||||
].map((f, idx) => (
|
||||
<div key={idx} className="p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-amber-300/50 dark:border-amber-500/20">
|
||||
<div className={`w-14 h-14 bg-gradient-to-br ${f.grad} rounded-lg flex items-center justify-center mb-6`}>
|
||||
{f.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 text-slate-900 dark:text-white">{f.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Process */}
|
||||
<section className="mb-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{tf.processTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{tf.processSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ num: '1', grad: 'from-amber-500 to-orange-400', title: tf.st1Title, desc: tf.st1Desc },
|
||||
{ num: '2', grad: 'from-blue-500 to-cyan-400', title: tf.st2Title, desc: tf.st2Desc },
|
||||
{ num: '3', grad: 'from-purple-500 to-pink-400', title: tf.st3Title, desc: tf.st3Desc },
|
||||
{ num: '4', grad: 'from-green-500 to-emerald-400', title: tf.st4Title, desc: tf.st4Desc },
|
||||
].map((step) => (
|
||||
<div key={step.num} className="relative p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-amber-300/50 dark:border-amber-500/20">
|
||||
<div className={`absolute -top-4 -left-4 w-12 h-12 bg-gradient-to-br ${step.grad} rounded-full flex items-center justify-center text-xl font-bold text-white`}>
|
||||
{step.num}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 mt-4 text-slate-900 dark:text-white">{step.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{step.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Use Cases */}
|
||||
<section className="mb-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-slate-900 dark:text-white">{tf.useCaseTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{tf.useCaseSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{[
|
||||
{ title: tf.uc1Title, desc: tf.uc1Desc, items: [tf.uc1i1, tf.uc1i2, tf.uc1i3] },
|
||||
{ title: tf.uc2Title, desc: tf.uc2Desc, items: [tf.uc2i1, tf.uc2i2, tf.uc2i3] },
|
||||
{ title: tf.uc3Title, desc: tf.uc3Desc, items: [tf.uc3i1, tf.uc3i2, tf.uc3i3] },
|
||||
{ title: tf.uc4Title, desc: tf.uc4Desc, items: [tf.uc4i1, tf.uc4i2, tf.uc4i3] },
|
||||
].map((uc, idx) => (
|
||||
<div key={idx} className="p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-amber-300/50 dark:border-amber-500/20">
|
||||
<h3 className="text-2xl font-bold mb-4 text-slate-900 dark:text-white">{uc.title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-4">{uc.desc}</p>
|
||||
<ul className="space-y-2 text-slate-500 dark:text-gray-400 text-sm">
|
||||
{uc.items.map((item, iIdx) => (
|
||||
<li key={iIdx} className="flex items-start space-x-2">
|
||||
<span className="text-amber-500 dark:text-amber-400 mt-1">•</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="text-center py-16 bg-gradient-to-br from-amber-500/10 to-orange-500/10 rounded-2xl border border-amber-500/20">
|
||||
<h2 className="text-3xl font-bold mb-6 text-slate-900 dark:text-white">{tf.ctaTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 mb-8 max-w-2xl mx-auto">{tf.ctaSubtitle}</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a
|
||||
href="http://localhost:6175/login"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center space-x-2 px-8 py-4 bg-gradient-to-r from-amber-600 to-orange-600 rounded-lg font-semibold text-white hover:from-amber-700 hover:to-orange-700 transition-all duration-300 shadow-lg shadow-amber-500/50"
|
||||
>
|
||||
<span>{tf.ctaBtn1}</span>
|
||||
<ArrowRight size={20} />
|
||||
</a>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="px-8 py-4 bg-white dark:bg-slate-800 border border-amber-500/30 rounded-lg font-semibold text-slate-800 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-300"
|
||||
>
|
||||
{tf.ctaBtn2}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { ArrowRight, Cloud, Factory, ExternalLink } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function ConsolePage() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
const co = tr.console
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
|
||||
<span className="text-gradient">{co.h1}</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 max-w-3xl mx-auto">{co.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* Console Cards */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl mx-auto mb-20">
|
||||
{/* Cloud Platform */}
|
||||
<div className="group relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
|
||||
<div className="relative p-10 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-2xl border-2 border-purple-400/30 dark:border-purple-500/30 group-hover:border-purple-500/50 transition-all duration-300">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-400 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<Cloud size={40} className="text-white" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
|
||||
{co.cloudTitle}
|
||||
</h2>
|
||||
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-6 leading-relaxed">{co.cloudDesc}</p>
|
||||
|
||||
<div className="space-y-3 mb-8">
|
||||
{[co.cloudF1, co.cloudF2, co.cloudF3].map((f) => (
|
||||
<div key={f} className="flex items-start space-x-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-purple-500 dark:bg-purple-400 mt-2"></div>
|
||||
<span className="text-sm text-slate-500 dark:text-gray-400">{f}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="http://localhost:6174/login"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group/btn w-full flex items-center justify-center space-x-2 px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-lg font-semibold text-white transition-all duration-300 shadow-lg shadow-purple-500/50"
|
||||
>
|
||||
<span>{co.cloudBtn}</span>
|
||||
<ExternalLink size={20} className="group-hover/btn:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Token Factory */}
|
||||
<div className="group relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-amber-500/20 to-orange-500/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
|
||||
<div className="relative p-10 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-2xl border-2 border-amber-400/30 dark:border-amber-500/30 group-hover:border-amber-500/50 transition-all duration-300">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-amber-500 to-orange-400 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<Factory size={40} className="text-white" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors">
|
||||
{co.tokenTitle}
|
||||
</h2>
|
||||
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-6 leading-relaxed">{co.tokenDesc}</p>
|
||||
|
||||
<div className="space-y-3 mb-8">
|
||||
{[co.tokenF1, co.tokenF2, co.tokenF3].map((f) => (
|
||||
<div key={f} className="flex items-start space-x-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-amber-500 dark:bg-amber-400 mt-2"></div>
|
||||
<span className="text-sm text-slate-500 dark:text-gray-400">{f}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="http://localhost:6175/login"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group/btn w-full flex items-center justify-center space-x-2 px-8 py-4 bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 rounded-lg font-semibold text-white transition-all duration-300 shadow-lg shadow-amber-500/50"
|
||||
>
|
||||
<span>{co.tokenBtn}</span>
|
||||
<ExternalLink size={20} className="group-hover/btn:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Help Section */}
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="p-8 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-2xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center text-slate-900 dark:text-white">{co.helpTitle}</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{[
|
||||
{ emoji: '📚', title: co.helpDoc, desc: co.helpDocDesc },
|
||||
{ emoji: '💬', title: co.helpSupport, desc: co.helpSupportDesc },
|
||||
{ emoji: '🎓', title: co.helpTutorial, desc: co.helpTutorialDesc },
|
||||
].map((h) => (
|
||||
<div key={h.title} className="text-center">
|
||||
<div className="text-4xl mb-2">{h.emoji}</div>
|
||||
<h4 className="font-semibold mb-2 text-slate-900 dark:text-white">{h.title}</h4>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400">{h.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center space-x-2 px-6 py-3 bg-white dark:bg-slate-800 border border-blue-500/30 rounded-lg font-semibold text-slate-800 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-300"
|
||||
>
|
||||
<span>{co.helpBtn}</span>
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="mt-12 text-center">
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-4">{co.noAccount}</p>
|
||||
<Link href="/contact" className="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 font-semibold transition-colors">
|
||||
{co.applyTrial} →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Mail, Phone, MapPin, Send } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function ContactPage() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
const c = tr.contact
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
company: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
service: '',
|
||||
message: ''
|
||||
})
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
console.log('Form submitted:', formData)
|
||||
setSubmitted(true)
|
||||
setTimeout(() => {
|
||||
setSubmitted(false)
|
||||
setFormData({ name: '', company: '', email: '', phone: '', service: '', message: '' })
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
|
||||
<span className="text-gradient">{c.h1}</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 max-w-3xl mx-auto">{c.subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Information */}
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-8 text-slate-900 dark:text-white">{c.infoTitle}</h2>
|
||||
|
||||
<div className="space-y-6 mb-12">
|
||||
<div className="flex items-start space-x-4 p-6 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-lg flex items-center justify-center">
|
||||
<Mail size={24} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-2 text-slate-900 dark:text-white">{c.emailTitle}</h3>
|
||||
<a href="mailto:contact@qx002575.com" className="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors">
|
||||
contact@qx002575.com
|
||||
</a>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400 mt-1">{c.emailNote}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4 p-6 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-400 rounded-lg flex items-center justify-center">
|
||||
<Phone size={24} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-2 text-slate-900 dark:text-white">{c.phoneTitle}</h3>
|
||||
<a href="tel:13888888888" className="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors">
|
||||
13888888888
|
||||
</a>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400 mt-1">{c.phoneNote}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4 p-6 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-400 rounded-lg flex items-center justify-center">
|
||||
<MapPin size={24} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold mb-2 text-slate-900 dark:text-white">{c.addrTitle}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">{c.addrText}</p>
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400 mt-1">{c.addrNote}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="p-8 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<h3 className="text-xl font-bold mb-4 text-slate-900 dark:text-white">{c.quickTitle}</h3>
|
||||
<div className="space-y-3">
|
||||
<a
|
||||
href="http://localhost:6174/login"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block p-4 bg-white/80 dark:bg-slate-800/50 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors border border-blue-300/20 dark:border-blue-500/10 hover:border-blue-500/30"
|
||||
>
|
||||
<div className="font-semibold text-blue-600 dark:text-blue-400 mb-1">{c.cloudLinkTitle}</div>
|
||||
<div className="text-sm text-slate-500 dark:text-gray-400">{c.cloudLinkDesc}</div>
|
||||
</a>
|
||||
<a
|
||||
href="http://localhost:6175/login"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block p-4 bg-white/80 dark:bg-slate-800/50 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors border border-amber-300/20 dark:border-amber-500/10 hover:border-amber-500/30"
|
||||
>
|
||||
<div className="font-semibold text-amber-600 dark:text-amber-400 mb-1">{c.tokenLinkTitle}</div>
|
||||
<div className="text-sm text-slate-500 dark:text-gray-400">{c.tokenLinkDesc}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold mb-8 text-slate-900 dark:text-white">{c.formTitle}</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium mb-2 text-slate-700 dark:text-gray-300">
|
||||
{c.nameLabel} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text" id="name" name="name" required
|
||||
value={formData.name} onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-white dark:bg-slate-800/50 border border-blue-300/50 dark:border-blue-500/20 rounded-lg focus:outline-none focus:border-blue-500/50 transition-colors text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder={c.namePH}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium mb-2 text-slate-700 dark:text-gray-300">
|
||||
{c.companyLabel}
|
||||
</label>
|
||||
<input
|
||||
type="text" id="company" name="company"
|
||||
value={formData.company} onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-white dark:bg-slate-800/50 border border-blue-300/50 dark:border-blue-500/20 rounded-lg focus:outline-none focus:border-blue-500/50 transition-colors text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder={c.companyPH}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-2 text-slate-700 dark:text-gray-300">
|
||||
{c.emailLabel} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email" id="email" name="email" required
|
||||
value={formData.email} onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-white dark:bg-slate-800/50 border border-blue-300/50 dark:border-blue-500/20 rounded-lg focus:outline-none focus:border-blue-500/50 transition-colors text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium mb-2 text-slate-700 dark:text-gray-300">
|
||||
{c.phoneLabel}
|
||||
</label>
|
||||
<input
|
||||
type="tel" id="phone" name="phone"
|
||||
value={formData.phone} onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-white dark:bg-slate-800/50 border border-blue-300/50 dark:border-blue-500/20 rounded-lg focus:outline-none focus:border-blue-500/50 transition-colors text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder={c.phonePH}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="service" className="block text-sm font-medium mb-2 text-slate-700 dark:text-gray-300">
|
||||
{c.serviceLabel} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="service" name="service" required
|
||||
value={formData.service} onChange={handleChange}
|
||||
className="w-full px-4 py-3 bg-white dark:bg-slate-800/50 border border-blue-300/50 dark:border-blue-500/20 rounded-lg focus:outline-none focus:border-blue-500/50 transition-colors text-slate-900 dark:text-white"
|
||||
>
|
||||
<option value="">{c.servicePH}</option>
|
||||
<option value="infrastructure">{c.sOpt1}</option>
|
||||
<option value="token-factory">{c.sOpt2}</option>
|
||||
<option value="cloud-platform">{c.sOpt3}</option>
|
||||
<option value="other">{c.sOpt4}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium mb-2 text-slate-700 dark:text-gray-300">
|
||||
{c.msgLabel} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message" name="message" required
|
||||
value={formData.message} onChange={handleChange}
|
||||
rows={6}
|
||||
className="w-full px-4 py-3 bg-white dark:bg-slate-800/50 border border-blue-300/50 dark:border-blue-500/20 rounded-lg focus:outline-none focus:border-blue-500/50 transition-colors text-slate-900 dark:text-white placeholder-slate-400 resize-none"
|
||||
placeholder={c.msgPH}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitted}
|
||||
className={`w-full py-4 rounded-lg font-semibold text-white transition-all duration-300 flex items-center justify-center space-x-2 ${
|
||||
submitted
|
||||
? 'bg-green-600 cursor-not-allowed'
|
||||
: 'bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 shadow-lg shadow-blue-500/50'
|
||||
}`}
|
||||
>
|
||||
{submitted ? <span>{c.submitOk}</span> : <><span>{c.submitBtn}</span><Send size={20} /></>}
|
||||
</button>
|
||||
|
||||
<p className="text-sm text-slate-500 dark:text-gray-400 text-center">{c.submitNote}</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="mt-20 p-8 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20 text-center">
|
||||
<h2 className="text-2xl font-bold mb-4 text-slate-900 dark:text-white">{c.coopTitle}</h2>
|
||||
<p className="text-slate-500 dark:text-gray-400 max-w-2xl mx-auto mb-6">{c.coopDesc}</p>
|
||||
<div className="flex flex-wrap justify-center gap-4 text-sm text-slate-500 dark:text-gray-400">
|
||||
{[c.tag1, c.tag2, c.tag3, c.tag4].map((tag) => (
|
||||
<span key={tag} className="px-4 py-2 bg-white/80 dark:bg-slate-800/50 rounded-full border border-blue-200/50 dark:border-transparent">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
@import "tailwindcss";
|
||||
@config "../../tailwind.config.js";
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
background-color: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
html.dark body {
|
||||
background-color: #020617;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
background-image: linear-gradient(to right, #2563eb, #0891b2);
|
||||
}
|
||||
html.dark .text-gradient {
|
||||
background-image: linear-gradient(to right, #60a5fa, #22d3ee);
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.card-hover:hover {
|
||||
scale: 1.05;
|
||||
box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import type { Metadata } from 'next'
|
||||
import Script from 'next/script'
|
||||
import { Providers } from '@/components/Providers'
|
||||
import Navigation from '@/components/Navigation'
|
||||
import Footer from '@/components/Footer'
|
||||
import './globals.css'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '图灵引擎 - 聚算成力，筑梦AGI',
|
||||
description: 'AGI全栈服务运营商，提供算力基础设施建设、图灵智算系统云平台、Token工厂等核心服务'
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="zh-CN" className="dark" suppressHydrationWarning>
|
||||
<head>
|
||||
{/* Prevent flash of unstyled content: runs synchronously before React hydrates */}
|
||||
<Script
|
||||
id="theme-init"
|
||||
strategy="beforeInteractive"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `(function(){try{var t=localStorage.getItem('theme');if(!t){t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}if(t==='light'){document.documentElement.classList.remove('dark');document.documentElement.classList.add('light');}else{document.documentElement.classList.add('dark');document.documentElement.classList.remove('light');}}catch(e){}})();`
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<Providers>
|
||||
<Navigation />
|
||||
<main className="min-h-screen pt-16">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
'use client'
|
||||
|
||||
import { Newspaper, TrendingUp, Calendar } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function NewsPage() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
const n = tr.news
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Page Header */}
|
||||
<div className="text-center mb-20">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
|
||||
<span className="text-gradient">{n.h1}</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 max-w-3xl mx-auto">{n.subtitle}</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<section className="mb-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="p-8 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-xl border border-blue-500/20 text-center">
|
||||
<Newspaper size={40} className="text-blue-500 dark:text-blue-400 mx-auto mb-4" />
|
||||
<div className="text-3xl font-bold text-gradient mb-2">{n.articles.length}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400">{n.s1Label}</div>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl border border-purple-500/20 text-center">
|
||||
<TrendingUp size={40} className="text-purple-500 dark:text-purple-400 mx-auto mb-4" />
|
||||
<div className="text-3xl font-bold text-gradient mb-2">{n.s2Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400">{n.s2Label}</div>
|
||||
</div>
|
||||
<div className="p-8 bg-gradient-to-br from-amber-500/10 to-orange-500/10 rounded-xl border border-amber-500/20 text-center">
|
||||
<Calendar size={40} className="text-amber-500 dark:text-amber-400 mx-auto mb-4" />
|
||||
<div className="text-3xl font-bold text-gradient mb-2">{n.s3Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400">{n.s3Label}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* News List */}
|
||||
<section>
|
||||
<div className="space-y-8">
|
||||
{n.articles.map((item, index) => (
|
||||
<article
|
||||
key={index}
|
||||
className="p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20 hover:border-blue-500/40 transition-all duration-300 hover:scale-[1.02]"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-start md:justify-between mb-4">
|
||||
<div className="flex items-center space-x-3 mb-2 md:mb-0">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
||||
item.category === n.catCompany
|
||||
? 'bg-blue-500/20 text-blue-600 dark:text-blue-400'
|
||||
: 'bg-purple-500/20 text-purple-600 dark:text-purple-400'
|
||||
}`}>
|
||||
{item.category}
|
||||
</span>
|
||||
<span className="text-slate-400 dark:text-gray-400 text-sm flex items-center space-x-1">
|
||||
<Calendar size={14} />
|
||||
<span>{item.date}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold mb-3 text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||
{item.title}
|
||||
</h2>
|
||||
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-4 leading-relaxed">{item.desc}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{item.tags.map((tag, tagIndex) => (
|
||||
<span
|
||||
key={tagIndex}
|
||||
className="px-3 py-1 bg-slate-200/80 dark:bg-slate-700/50 rounded-full text-xs text-slate-500 dark:text-gray-400"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="mt-20 text-center py-16 bg-gradient-to-br from-slate-100/80 to-slate-200/80 dark:from-slate-900/50 dark:to-slate-800/50 rounded-2xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<h2 className="text-3xl font-bold mb-6 text-slate-900 dark:text-white">{n.ctaTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 mb-8">{n.ctaSubtitle}</p>
|
||||
<a
|
||||
href="mailto:contact@qx002575.com"
|
||||
className="px-8 py-4 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg font-semibold text-white hover:from-blue-700 hover:to-cyan-700 transition-all duration-300 shadow-lg shadow-blue-500/50"
|
||||
>
|
||||
{n.ctaBtn}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { ArrowRight, Cpu, Cloud, Factory, Sparkles, TrendingUp, Users } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function Home() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
|
||||
{/* Animated Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-100 via-slate-100 to-slate-200 dark:from-blue-950 dark:via-slate-900 dark:to-slate-950">
|
||||
<div className="absolute inset-0 bg-[url('/grid.svg')] opacity-10 dark:opacity-20"></div>
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-400/20 dark:bg-blue-500/30 rounded-full filter blur-3xl animate-pulse"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyan-400/20 dark:bg-cyan-500/30 rounded-full filter blur-3xl animate-pulse delay-1000"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div className="animate-float">
|
||||
<div className="inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/30 rounded-full px-6 py-2 mb-8">
|
||||
<Sparkles size={20} className="text-blue-500 dark:text-blue-400" />
|
||||
<span className="text-blue-600 dark:text-blue-400 text-sm font-medium">{tr.home.heroBadge}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight text-slate-900 dark:text-white">
|
||||
{tr.home.heroH1a}<span className="text-gradient">{tr.home.heroH1b}</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl sm:text-2xl text-slate-600 dark:text-gray-300 mb-4 max-w-3xl mx-auto">
|
||||
{tr.home.heroSubtitle}
|
||||
</p>
|
||||
|
||||
<p className="text-lg text-slate-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
|
||||
{tr.home.heroDesc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link
|
||||
href="/business"
|
||||
className="group px-8 py-4 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg font-semibold text-white hover:from-blue-700 hover:to-cyan-700 transition-all duration-300 flex items-center space-x-2 shadow-lg shadow-blue-500/50"
|
||||
>
|
||||
<span>{tr.home.cta1}</span>
|
||||
<ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/console"
|
||||
className="px-8 py-4 bg-white dark:bg-slate-800 border border-blue-500/30 rounded-lg font-semibold text-slate-800 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-300"
|
||||
>
|
||||
{tr.home.cta2}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-20 bg-slate-100/80 dark:bg-slate-900/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="text-4xl sm:text-5xl font-bold text-gradient mb-2">{tr.home.stat1Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400">{tr.home.stat1Label}</div>
|
||||
</div>
|
||||
<div className="text-center p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="text-4xl sm:text-5xl font-bold text-gradient mb-2">{tr.home.stat2Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400">{tr.home.stat2Label}</div>
|
||||
</div>
|
||||
<div className="text-center p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20">
|
||||
<div className="text-4xl sm:text-5xl font-bold text-gradient mb-2">{tr.home.stat3Value}</div>
|
||||
<div className="text-slate-500 dark:text-gray-400">{tr.home.stat3Label}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Business Overview */}
|
||||
<section className="py-20 bg-white dark:bg-transparent">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl sm:text-5xl font-bold mb-4 text-slate-900 dark:text-white">{tr.home.coreTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{tr.home.coreSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Infrastructure */}
|
||||
<Link href="/business/infrastructure" className="group">
|
||||
<div className="h-full p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20 card-hover">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<Cpu size={32} className="text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||
{tr.home.infraTitle}
|
||||
</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-4">
|
||||
{tr.home.infraDesc}
|
||||
</p>
|
||||
<div className="flex items-center text-blue-600 dark:text-blue-400 font-semibold">
|
||||
<span>{tr.home.infraMore}</span>
|
||||
<ArrowRight size={20} className="ml-2 group-hover:translate-x-2 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Token Factory */}
|
||||
<Link href="/business/token-factory" className="group">
|
||||
<div className="h-full p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20 card-hover">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-400 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<Factory size={32} className="text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||
{tr.home.tokenTitle}
|
||||
</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-4">
|
||||
{tr.home.tokenDesc}
|
||||
</p>
|
||||
<div className="flex items-center text-blue-600 dark:text-blue-400 font-semibold">
|
||||
<span>{tr.home.tokenMore}</span>
|
||||
<ArrowRight size={20} className="ml-2 group-hover:translate-x-2 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Cloud Platform */}
|
||||
<Link href="/business/cloud-platform" className="group">
|
||||
<div className="h-full p-8 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900 rounded-xl border border-blue-300/50 dark:border-blue-500/20 card-hover">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-400 rounded-lg flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<Cloud size={32} className="text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-4 text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||
{tr.home.cloudTitle}
|
||||
</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400 mb-4">
|
||||
{tr.home.cloudDesc}
|
||||
</p>
|
||||
<div className="flex items-center text-blue-600 dark:text-blue-400 font-semibold">
|
||||
<span>{tr.home.cloudMore}</span>
|
||||
<ArrowRight size={20} className="ml-2 group-hover:translate-x-2 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<section className="py-20 bg-slate-100/80 dark:bg-slate-900/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl sm:text-5xl font-bold mb-4 text-slate-900 dark:text-white">{tr.home.whyTitle}</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400">{tr.home.whySubtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20 text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<TrendingUp size={32} className="text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-4 text-slate-900 dark:text-white">{tr.home.why1Title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">
|
||||
{tr.home.why1Desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20 text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-400 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<Cpu size={32} className="text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-4 text-slate-900 dark:text-white">{tr.home.why2Title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">
|
||||
{tr.home.why2Desc}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-8 bg-white/80 dark:bg-slate-800/50 rounded-xl border border-blue-300/50 dark:border-blue-500/20 text-center">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-400 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<Users size={32} className="text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-4 text-slate-900 dark:text-white">{tr.home.why3Title}</h3>
|
||||
<p className="text-slate-500 dark:text-gray-400">
|
||||
{tr.home.why3Desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-white dark:bg-transparent">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 className="text-4xl sm:text-5xl font-bold mb-6 text-slate-900 dark:text-white">
|
||||
{tr.home.ctaTitle1}<span className="text-gradient">{tr.home.ctaAccent}</span>{tr.home.ctaTitle2}
|
||||
</h2>
|
||||
<p className="text-xl text-slate-500 dark:text-gray-400 mb-12">
|
||||
{tr.home.ctaSubtitle}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="group px-8 py-4 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg font-semibold text-white hover:from-blue-700 hover:to-cyan-700 transition-all duration-300 flex items-center space-x-2 shadow-lg shadow-blue-500/50"
|
||||
>
|
||||
<span>{tr.home.ctaBtn1}</span>
|
||||
<ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className="px-8 py-4 bg-white dark:bg-slate-800 border border-blue-500/30 rounded-lg font-semibold text-slate-800 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-300"
|
||||
>
|
||||
{tr.home.ctaBtn2}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { Mail, Phone } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function Footer() {
|
||||
const { language } = useApp()
|
||||
const tr = t(language)
|
||||
|
||||
return (
|
||||
<footer className="bg-white dark:bg-slate-900 border-t border-blue-200/50 dark:border-blue-500/20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{/* Brand */}
|
||||
<div className="col-span-1">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xl">{tr.nav.logoChar}</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-slate-900 dark:text-white">{tr.nav.logoText}</span>
|
||||
</div>
|
||||
<p className="text-slate-500 dark:text-gray-400 text-sm">{tr.footer.tagline}</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="text-slate-900 dark:text-white font-semibold mb-4">{tr.footer.quickTitle}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><Link href="/about" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">{tr.footer.about}</Link></li>
|
||||
<li><Link href="/business" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">{tr.footer.business}</Link></li>
|
||||
<li><Link href="/news" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">{tr.footer.news}</Link></li>
|
||||
<li><Link href="/contact" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">{tr.footer.contact}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Business */}
|
||||
<div>
|
||||
<h3 className="text-slate-900 dark:text-white font-semibold mb-4">{tr.footer.bizTitle}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li><Link href="/business/infrastructure" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">{tr.footer.infra}</Link></li>
|
||||
<li><Link href="/business/token-factory" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">{tr.footer.token}</Link></li>
|
||||
<li><Link href="/business/cloud-platform" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">{tr.footer.cloud}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
<h3 className="text-slate-900 dark:text-white font-semibold mb-4">{tr.footer.contactTitle}</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start space-x-2">
|
||||
<Mail size={18} className="text-blue-500 dark:text-blue-400 mt-0.5" />
|
||||
<a href="mailto:contact@qx002575.com" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">contact@qx002575.com</a>
|
||||
</li>
|
||||
<li className="flex items-start space-x-2">
|
||||
<Phone size={18} className="text-blue-500 dark:text-blue-400 mt-0.5" />
|
||||
<a href="tel:13888888888" className="text-slate-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm">13888888888</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="mt-12 pt-8 border-t border-blue-200/50 dark:border-blue-500/20 text-center">
|
||||
<p className="text-slate-400 dark:text-gray-500 text-sm">
|
||||
© {new Date().getFullYear()} {tr.nav.logoText}. {tr.footer.copyright}.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useState } from 'react'
|
||||
import { Menu, X, Moon, Sun } from 'lucide-react'
|
||||
import { useApp } from '@/context/AppContext'
|
||||
import { t } from '@/lib/translations'
|
||||
|
||||
export default function Navigation() {
|
||||
const pathname = usePathname()
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [businessMenuOpen, setBusinessMenuOpen] = useState(false)
|
||||
const { language, theme, toggleLanguage, toggleTheme } = useApp()
|
||||
const tr = t(language)
|
||||
|
||||
const navLinks = [
|
||||
{ name: tr.nav.home, href: '/' },
|
||||
{ name: tr.nav.about, href: '/about' },
|
||||
{
|
||||
name: tr.nav.business,
|
||||
href: '/business',
|
||||
subLinks: [
|
||||
{ name: tr.nav.businessInfrastructure, href: '/business/infrastructure' },
|
||||
{ name: tr.nav.businessTokenFactory, href: '/business/token-factory' },
|
||||
{ name: tr.nav.businessCloudPlatform, href: '/business/cloud-platform' },
|
||||
]
|
||||
},
|
||||
{ name: tr.nav.news, href: '/news' },
|
||||
{ name: tr.nav.contact, href: '/contact' },
|
||||
{ name: tr.nav.console, href: '/console' },
|
||||
]
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-blue-200/50 dark:border-blue-500/20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center space-x-2">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xl">{tr.nav.logoChar}</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold text-slate-900 dark:text-white">{tr.nav.logoText}</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex space-x-1">
|
||||
{navLinks.map((link) => {
|
||||
if ('subLinks' in link && link.subLinks) {
|
||||
return (
|
||||
<div key={link.name} className="relative group">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname.startsWith(link.href)
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-500/10'
|
||||
: 'text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800'
|
||||
}`}
|
||||
>
|
||||
{link.name}
|
||||
</button>
|
||||
<div className="absolute top-full left-0 mt-1 w-56 bg-white dark:bg-slate-800 border border-blue-200/50 dark:border-blue-500/20 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
{link.subLinks.map((subLink) => (
|
||||
<Link
|
||||
key={subLink.href}
|
||||
href={subLink.href}
|
||||
className={`block px-4 py-3 text-sm transition-colors ${
|
||||
pathname === subLink.href
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-500/10'
|
||||
: 'text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
{subLink.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname === link.href
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-500/10'
|
||||
: 'text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800'
|
||||
}`}
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Right controls */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Language toggle — desktop */}
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="hidden md:flex items-center px-3 py-1.5 rounded-full text-xs font-semibold border border-blue-400/40 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-all duration-200"
|
||||
aria-label="Toggle language"
|
||||
>
|
||||
<span className={language === 'zh' ? 'text-blue-700 dark:text-white font-bold' : 'opacity-50'}>中</span>
|
||||
<span className="mx-1 opacity-40">/</span>
|
||||
<span className={language === 'en' ? 'text-blue-700 dark:text-white font-bold' : 'opacity-50'}>EN</span>
|
||||
</button>
|
||||
|
||||
{/* Theme toggle — desktop */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="hidden md:flex items-center justify-center w-9 h-9 rounded-lg border border-blue-400/40 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-all duration-200"
|
||||
aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
|
||||
>
|
||||
{theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
|
||||
</button>
|
||||
|
||||
{/* Mobile hamburger */}
|
||||
<button
|
||||
className="md:hidden p-2 rounded-lg text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden bg-white dark:bg-slate-800 border-t border-blue-200/50 dark:border-blue-500/20">
|
||||
<div className="px-4 py-2 space-y-1">
|
||||
{navLinks.map((link) => {
|
||||
if ('subLinks' in link && link.subLinks) {
|
||||
return (
|
||||
<div key={link.name}>
|
||||
<button
|
||||
onClick={() => setBusinessMenuOpen(!businessMenuOpen)}
|
||||
className={`w-full text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname.startsWith(link.href)
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-500/10'
|
||||
: 'text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
{link.name}
|
||||
</button>
|
||||
{businessMenuOpen && (
|
||||
<div className="ml-4 mt-1 space-y-1">
|
||||
{link.subLinks.map((subLink) => (
|
||||
<Link
|
||||
key={subLink.href}
|
||||
href={subLink.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`block px-4 py-2 rounded-lg text-sm transition-colors ${
|
||||
pathname === subLink.href
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-500/10'
|
||||
: 'text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
{subLink.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`block px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
|
||||
pathname === link.href
|
||||
? 'text-blue-600 dark:text-blue-400 bg-blue-500/10'
|
||||
: 'text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Mobile toggles */}
|
||||
<div className="flex items-center space-x-3 px-4 py-3 border-t border-blue-200/50 dark:border-blue-500/20 mt-2">
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="flex items-center px-4 py-2 rounded-full text-xs font-semibold border border-blue-400/40 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-all duration-200"
|
||||
>
|
||||
<span className={language === 'zh' ? 'text-blue-700 dark:text-white font-bold' : 'opacity-50'}>中</span>
|
||||
<span className="mx-1 opacity-40">/</span>
|
||||
<span className={language === 'en' ? 'text-blue-700 dark:text-white font-bold' : 'opacity-50'}>EN</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="flex items-center space-x-1.5 px-4 py-2 rounded-lg text-xs font-semibold border border-blue-400/40 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-all duration-200"
|
||||
>
|
||||
{theme === 'dark'
|
||||
? <><Sun size={14} /><span className="ml-1">{language === 'zh' ? '浅色' : 'Light'}</span></>
|
||||
: <><Moon size={14} /><span className="ml-1">{language === 'zh' ? '深色' : 'Dark'}</span></>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
'use client'
|
||||
|
||||
import { ReactNode } from 'react'
|
||||
import { AppProvider } from '@/context/AppContext'
|
||||
|
||||
interface ProvidersProps {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function Providers({ children }: ProvidersProps) {
|
||||
return <AppProvider>{children}</AppProvider>
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
'use client'
|
||||
|
||||
import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
|
||||
|
||||
export type Language = 'zh' | 'en'
|
||||
export type Theme = 'dark' | 'light'
|
||||
|
||||
interface AppContextValue {
|
||||
language: Language
|
||||
theme: Theme
|
||||
setLanguage: (lang: Language) => void
|
||||
setTheme: (theme: Theme) => void
|
||||
toggleLanguage: () => void
|
||||
toggleTheme: () => void
|
||||
mounted: boolean
|
||||
}
|
||||
|
||||
const AppContext = createContext<AppContextValue | null>(null)
|
||||
|
||||
export function AppProvider({ children }: { children: ReactNode }) {
|
||||
const [language, setLanguageState] = useState<Language>('zh')
|
||||
const [theme, setThemeState] = useState<Theme>('dark')
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// 优先读取用户手动设置（localStorage）
|
||||
const savedLang = localStorage.getItem('lang') as Language | null
|
||||
const savedTheme = localStorage.getItem('theme') as Theme | null
|
||||
|
||||
if (savedLang === 'en' || savedLang === 'zh') {
|
||||
setLanguageState(savedLang)
|
||||
} else {
|
||||
// 首次访问：自动检测系统语言
|
||||
const sysLang = navigator.language || navigator.languages?.[0] || 'zh'
|
||||
setLanguageState(sysLang.startsWith('zh') ? 'zh' : 'en')
|
||||
}
|
||||
|
||||
if (savedTheme === 'light' || savedTheme === 'dark') {
|
||||
setThemeState(savedTheme)
|
||||
} else {
|
||||
// 首次访问：自动检测系统主题
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
setThemeState(prefersDark ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return
|
||||
const root = document.documentElement
|
||||
if (theme === 'dark') {
|
||||
root.classList.add('dark')
|
||||
root.classList.remove('light')
|
||||
} else {
|
||||
root.classList.remove('dark')
|
||||
root.classList.add('light')
|
||||
}
|
||||
localStorage.setItem('theme', theme)
|
||||
}, [theme, mounted])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return
|
||||
document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en'
|
||||
localStorage.setItem('lang', language)
|
||||
}, [language, mounted])
|
||||
|
||||
const setLanguage = (lang: Language) => setLanguageState(lang)
|
||||
const setTheme = (t: Theme) => setThemeState(t)
|
||||
const toggleLanguage = () => setLanguageState(prev => prev === 'zh' ? 'en' : 'zh')
|
||||
const toggleTheme = () => setThemeState(prev => prev === 'dark' ? 'light' : 'dark')
|
||||
|
||||
return (
|
||||
<AppContext.Provider value={{ language, theme, setLanguage, setTheme, toggleLanguage, toggleTheme, mounted }}>
|
||||
{children}
|
||||
</AppContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useApp() {
|
||||
const ctx = useContext(AppContext)
|
||||
if (!ctx) throw new Error('useApp must be used within AppProvider')
|
||||
return ctx
|
||||
}
|
||||
|
||||
export function useLanguage() {
|
||||
const { language, setLanguage, toggleLanguage } = useApp()
|
||||
return { language, setLanguage, toggleLanguage }
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const { theme, setTheme, toggleTheme } = useApp()
|
||||
return { theme, setTheme, toggleTheme }
|
||||
}
|
||||
|
|
@ -0,0 +1,591 @@
|
|||
export type Language = 'zh' | 'en'
|
||||
|
||||
const zh = {
|
||||
nav: {
|
||||
home: '首页',
|
||||
about: '公司介绍',
|
||||
business: '主营业务',
|
||||
businessInfrastructure: '算力集群服务',
|
||||
businessCloudPlatform: '图灵智算系统云平台',
|
||||
businessTokenFactory: 'Token工厂',
|
||||
news: '企业动态',
|
||||
contact: '联系我们',
|
||||
console: '控制台',
|
||||
logoText: '图灵引擎',
|
||||
logoChar: '图',
|
||||
},
|
||||
home: {
|
||||
heroBadge: 'AGI全栈服务运营商',
|
||||
heroH1a: '聚算成力，筑梦',
|
||||
heroH1b: 'AGI',
|
||||
heroSubtitle: '图灵引擎，智绘产业新篇',
|
||||
heroDesc: '构建智算基础设施，赋能AI产业生态，开创Token工业化生产新时代',
|
||||
cta1: '探索业务',
|
||||
cta2: '进入控制台',
|
||||
stat1Value: '1440',
|
||||
stat1Label: 'Pflops 算力规模',
|
||||
stat2Value: '10,000+',
|
||||
stat2Label: 'GPU 卡数管理',
|
||||
stat3Value: '3大',
|
||||
stat3Label: '核心业务板块',
|
||||
coreTitle: '核心业务',
|
||||
coreSubtitle: '三大主营业务赋能AI产业生态',
|
||||
infraTitle: '算力集群服务',
|
||||
infraDesc: '自建H800集群，打造1440Pflops超大规模算力中心，为AI训练和推理提供稳定高效的基础设施支撑。',
|
||||
infraMore: '了解更多',
|
||||
cloudTitle: '图灵智算系统云平台',
|
||||
cloudDesc: '万卡集群调度管理系统，集成AI开发全工具链，为企业提供从训练到部署的一站式智算服务。',
|
||||
cloudMore: '了解更多',
|
||||
tokenTitle: 'Token工厂',
|
||||
tokenDesc: 'TaaS（Token-as-a-Service）模式，实现Token工业化生产，为企业提供高效、稳定、可扩展的Token服务。',
|
||||
tokenMore: '了解更多',
|
||||
whyTitle: '为什么选择图灵引擎',
|
||||
whySubtitle: '专业、可靠、创新的AGI服务伙伴',
|
||||
why1Title: '技术领先',
|
||||
why1Desc: '自主研发的智算系统，万卡调度能力，行业领先的AI工具链集成',
|
||||
why2Title: '算力强大',
|
||||
why2Desc: '1440Pflops超大规模算力中心，为AI训练和推理提供坚实保障',
|
||||
why3Title: '服务全面',
|
||||
why3Desc: '从基础设施到平台服务，从算力租赁到Token生产，全栈服务覆盖',
|
||||
ctaTitle1: '准备好开启您的',
|
||||
ctaAccent: 'AI之旅',
|
||||
ctaTitle2: '了吗？',
|
||||
ctaSubtitle: '立即联系我们，获取专业的智算解决方案',
|
||||
ctaBtn1: '联系我们',
|
||||
ctaBtn2: '了解公司',
|
||||
},
|
||||
about: {
|
||||
h1a: '关于',
|
||||
h1b: '我们',
|
||||
subtitle: 'AGI全栈服务运营商，致力于构建智算基础设施，赋能AI产业生态',
|
||||
introTitle: '公司简介',
|
||||
p1: '杭州图灵引擎科技有限公司是一家专注于AGI（通用人工智能）领域的全栈服务运营商。我们以"聚算成力，筑梦AGI"为使命，致力于为AI产业提供从基础设施到应用服务的完整解决方案。',
|
||||
p2: '公司自建H800 GPU集群，打造了总规模达1440Pflops的超大规模算力中心，为AI训练和推理提供稳定高效的基础设施支撑。同时，我们自主研发的图灵智算系统云平台，实现了万卡级别的集群调度管理能力，集成了从数据处理、模型训练到应用部署的AI开发全工具链。',
|
||||
p3: '在Token经济领域，我们创新性地提出了TaaS（Token-as-a-Service）模式，通过Token工厂平台实现Token的工业化生产，为企业提供高效、稳定、可扩展的Token服务，开创了AI与Token经济融合的新范式。',
|
||||
c1Title: '基础设施', c1Desc: '1440Pflops超大规模算力中心',
|
||||
c2Title: '云平台', c2Desc: '万卡调度智算系统',
|
||||
c3Title: 'Token工厂', c3Desc: 'TaaS工业化生产模式',
|
||||
c4Title: '全栈服务', c4Desc: '端到端AI解决方案',
|
||||
missionTitle: '我们的使命',
|
||||
missionText: '聚算成力，筑梦AGI。通过构建强大的智算基础设施和完善的服务体系，降低AI开发和应用的门槛，让每一个企业和开发者都能轻松获取和使用AI能力，推动AGI技术的普及和发展。',
|
||||
visionTitle: '我们的愿景',
|
||||
visionText: '成为全球领先的AGI全栈服务运营商，打造最值得信赖的智算平台，在AI产业发展中发挥关键作用，为人类社会的智能化转型贡献力量。',
|
||||
timelineTitle: '发展历程',
|
||||
timelineSubtitle: '从创立到今天，我们一路砥砺前行',
|
||||
teamTitle: '团队介绍',
|
||||
teamSubtitle: '汇聚行业精英，打造卓越团队',
|
||||
teamPlaceholder: '团队信息即将更新，敬请期待...',
|
||||
milestones: [
|
||||
{ date: '2024年1月', title: '公司成立', desc: '图灵引擎正式成立，确立AGI全栈服务运营商战略定位' },
|
||||
{ date: '2024年3月', title: 'H800集群启动建设', desc: '开始建设大规模H800 GPU集群，规划1440Pflops算力规模' },
|
||||
{ date: '2024年6月', title: '图灵智算系统立项', desc: '启动万卡集群调度管理系统研发，集成AI开发全工具链' },
|
||||
{ date: '2024年9月', title: '首批算力中心投产', desc: '第一批H800集群正式投入运营，开始对外提供算力服务' },
|
||||
{ date: '2024年12月', title: '云平台Beta版上线', desc: '图灵智算系统云平台Beta版发布，支持多租户算力调度' },
|
||||
{ date: '2025年3月', title: 'Token工厂概念提出', desc: '提出TaaS（Token-as-a-Service）模式，探索Token工业化生产' },
|
||||
{ date: '2025年6月', title: '云平台正式版发布', desc: '图灵智算系统云平台1.0正式发布，实现万卡级别调度能力' },
|
||||
{ date: '2025年9月', title: 'Token工厂试运行', desc: 'Token工厂平台开始试运行，首批客户接入测试' },
|
||||
{ date: '2025年12月', title: '算力规模达标', desc: 'H800集群建设完成，总算力达到1440Pflops' },
|
||||
{ date: '2026年3月', title: 'Token工厂正式运营', desc: 'Token工厂平台正式对外运营，开创Token工业化生产新模式' },
|
||||
{ date: '2026年未来', title: '持续创新', desc: '持续优化产品服务，深化AI产业布局，成为领先的AGI服务运营商' },
|
||||
],
|
||||
},
|
||||
business: {
|
||||
h1: '主营业务',
|
||||
subtitle: '三大核心业务板块，全方位赋能AI产业生态',
|
||||
infraTitle: '算力集群服务',
|
||||
infraDesc: '自建H800 GPU集群，打造1440Pflops超大规模算力中心，为AI训练和推理提供稳定高效的基础设施支撑。',
|
||||
infraCta: '了解详情',
|
||||
cloudTitle: '图灵智算系统云平台',
|
||||
cloudDesc: '万卡集群调度管理系统，集成AI开发全工具链，为企业提供从训练到部署的一站式智算服务。',
|
||||
cloudCta: '了解详情',
|
||||
tokenTitle: 'Token工厂',
|
||||
tokenDesc: 'TaaS（Token-as-a-Service）模式，实现Token工业化生产，为企业提供高效、稳定、可扩展的Token服务。',
|
||||
tokenCta: '了解详情',
|
||||
valueTitle: '业务价值',
|
||||
v1Title: '降低AI应用门槛', v1Desc: '通过完善的基础设施和平台服务，让企业无需自建昂贵的GPU集群，即可快速开展AI业务。',
|
||||
v2Title: '提升开发效率', v2Desc: '集成的AI工具链和自动化调度系统，大幅提升从开发到部署的整体效率。',
|
||||
v3Title: '灵活的资源调配', v3Desc: '按需使用、弹性扩展，根据业务需求灵活调整算力资源，降低运营成本。',
|
||||
v4Title: '创新Token经济', v4Desc: '开创Token工业化生产模式，为AI应用与Token经济的融合提供新思路。',
|
||||
ctaTitle: '立即体验我们的服务',
|
||||
ctaSubtitle: '联系我们，获取专业的智算解决方案',
|
||||
ctaBtn: '联系我们',
|
||||
},
|
||||
infrastructure: {
|
||||
badge: '算力基础设施建设',
|
||||
h1a: '超大规模',
|
||||
h1b: '算力中心',
|
||||
subtitle: '自建H800 GPU集群，打造1440Pflops算力基础设施，为AI训练和推理提供强大支撑',
|
||||
s1Label: 'Pflops 总算力', s1Sub: '超大规模计算能力',
|
||||
s2Label: 'GPU 集群', s2Sub: '企业级高性能GPU',
|
||||
s3Value: '99.9%', s3Label: '可用性保障', s3Sub: '7x24小时稳定运行',
|
||||
coreTitle: '核心优势', coreSubtitle: '专业的算力基础设施建设与运维能力',
|
||||
f1Title: '自主可控', f1Desc: '自建GPU集群，完全自主可控的算力资源，保障业务连续性和数据安全。',
|
||||
f2Title: '高性能', f2Desc: '采用H800企业级GPU，单卡性能强劲，支持大规模AI模型训练和推理。',
|
||||
f3Title: '高速互联', f3Desc: '高带宽低延迟网络架构，支持大规模分布式训练，提升训练效率。',
|
||||
f4Title: '安全可靠', f4Desc: '多重安全防护机制，数据加密传输存储，保障客户数据和模型安全。',
|
||||
f5Title: '弹性扩展', f5Desc: '灵活的资源调配能力，根据业务需求快速扩展，支持突发性算力需求。',
|
||||
f6Title: '专业运维', f6Desc: '7x24小时专业运维团队，实时监控，快速响应，确保系统稳定运行。',
|
||||
specTitle: '技术规格',
|
||||
sp1Title: 'GPU型号', sp1Desc: 'NVIDIA H800 企业级GPU',
|
||||
sp2Title: '总算力规模', sp2Desc: '1440 Pflops（双精度浮点运算）',
|
||||
sp3Title: '网络架构', sp3Desc: 'InfiniBand高速互联网络，支持RDMA',
|
||||
sp4Title: '存储系统', sp4Desc: '分布式高性能存储，支持PB级数据',
|
||||
sp5Title: '冷却系统', sp5Desc: '液冷+风冷混合方案，高效节能',
|
||||
sp6Title: '电力保障', sp6Desc: '双路供电+UPS备份，确保不间断运行',
|
||||
useCaseTitle: '应用场景', useCaseSubtitle: '广泛支持各类AI应用场景',
|
||||
uc1Title: '大模型训练', uc1Desc: '支持千亿、万亿参数规模的大语言模型训练，提供充足的算力和存储资源。',
|
||||
uc1i1: 'LLM（大语言模型）训练', uc1i2: '多模态模型训练', uc1i3: '模型微调与优化',
|
||||
uc2Title: '推理服务', uc2Desc: '高性能推理加速，低延迟响应，支持海量并发请求处理。',
|
||||
uc2i1: '实时AI推理服务', uc2i2: '批量推理处理', uc2i3: '边缘AI部署',
|
||||
uc3Title: '科学计算', uc3Desc: '支持高性能科学计算任务，加速科研创新进程。',
|
||||
uc3i1: '分子动力学模拟', uc3i2: '气象预测计算', uc3i3: '生物信息分析',
|
||||
uc4Title: '行业AI应用', uc4Desc: '为各行业提供定制化AI算力支持，助力产业智能化升级。',
|
||||
uc4i1: '智能制造', uc4i2: '金融风控', uc4i3: '医疗影像分析',
|
||||
ctaTitle: '需要更多算力资源？', ctaSubtitle: '联系我们，获取定制化算力解决方案', ctaBtn: '联系我们',
|
||||
},
|
||||
cloudPlatform: {
|
||||
badge: '图灵智算系统云平台',
|
||||
h1a: '万卡调度',
|
||||
h1b: '智算云平台',
|
||||
subtitle: '一站式AI开发平台，从训练到部署，全流程智能化管理',
|
||||
s1Value: '10,000+', s1Label: 'GPU卡调度能力', s1Sub: '万卡级集群管理',
|
||||
s2Value: '全工具链', s2Label: 'AI开发集成', s2Sub: '一站式开发体验',
|
||||
s3Value: '秒级', s3Label: '资源调度响应', s3Sub: '高效智能调度',
|
||||
coreTitle: '平台核心功能', coreSubtitle: '强大的智算管理与服务能力',
|
||||
f1Title: '智能调度', f1Desc: '基于AI的智能资源调度算法，自动优化任务分配，最大化资源利用率。',
|
||||
f2Title: '容器化部署', f2Desc: '支持Docker和Kubernetes，实现应用的快速部署、扩展和管理。',
|
||||
f3Title: '实时监控', f3Desc: '全方位的性能监控和可视化，实时掌握集群状态和任务进度。',
|
||||
f4Title: '多租户隔离', f4Desc: '完善的多租户管理机制，确保不同用户之间的资源和数据隔离。',
|
||||
f5Title: '工作流编排', f5Desc: '可视化的工作流设计器，轻松编排复杂的AI训练和推理流程。',
|
||||
f6Title: '弹性伸缩', f6Desc: '根据负载自动调整资源配置，支持突发流量和大规模并发。',
|
||||
toolTitle: '集成AI工具链',
|
||||
t1Title: '开发框架', t1i1: 'PyTorch、TensorFlow、JAX等主流框架', t1i2: 'Hugging Face Transformers生态', t1i3: 'DeepSpeed、Megatron等训练加速库',
|
||||
t2Title: '数据处理', t2i1: '分布式数据预处理管道', t2i2: '数据标注与管理工具', t2i3: '特征工程自动化',
|
||||
t3Title: '模型管理', t3i1: '模型版本管理与追踪', t3i2: '实验对比与可视化', t3i3: '超参数自动调优',
|
||||
t4Title: '部署服务', t4i1: '一键模型部署与发布', t4i2: 'API网关与负载均衡', t4i3: '模型性能优化与量化',
|
||||
useCaseTitle: '典型应用场景', useCaseSubtitle: '覆盖AI全生命周期的应用支持',
|
||||
uc1Title: '大模型训练', uc1Desc: '支持超大规模模型的分布式训练，自动处理数据并行和模型并行。',
|
||||
uc1i1: '自动混合精度训练', uc1i2: '梯度累积与检查点', uc1i3: '分布式优化器',
|
||||
uc2Title: '模型微调', uc2Desc: '基于预训练模型快速微调，适配特定业务场景和数据集。',
|
||||
uc2i1: 'LoRA、QLoRA等高效微调', uc2i2: '少样本学习支持', uc2i3: '迁移学习优化',
|
||||
uc3Title: '推理服务', uc3Desc: '高性能推理引擎，支持多种优化策略，降低延迟提升吞吐。',
|
||||
uc3i1: '模型量化与剪枝', uc3i2: '批处理优化', uc3i3: '多模型集成服务',
|
||||
uc4Title: 'AutoML', uc4Desc: '自动化机器学习流程，降低AI应用开发门槛。',
|
||||
uc4i1: '自动特征工程', uc4i2: '神经架构搜索', uc4i3: '超参数优化',
|
||||
ctaTitle: '立即体验图灵智算云平台', ctaSubtitle: '登录控制台，开启您的AI开发之旅',
|
||||
ctaBtn1: '登录云平台', ctaBtn2: '联系咨询',
|
||||
},
|
||||
tokenFactory: {
|
||||
badge: 'Token工厂',
|
||||
h1a: 'Token工业化生产',
|
||||
h1b: '新模式',
|
||||
subtitle: 'TaaS（Token-as-a-Service）模式，高效、稳定、可扩展的Token服务平台',
|
||||
s1Value: '工业化', s1Label: '生产模式', s1Sub: '规模化高效生产',
|
||||
s2Value: 'TaaS', s2Label: '服务模式', s2Sub: '即开即用按需付费',
|
||||
s3Value: 'AI驱动', s3Label: '智能优化', s3Sub: '自动调优提升效率',
|
||||
taasTitle: '什么是TaaS？',
|
||||
tp1: 'TaaS（Token-as-a-Service）是图灵引擎创新提出的Token工业化生产服务模式。通过整合强大的算力基础设施、智能调度系统和AI优化算法，我们将Token生产过程标准化、自动化和规模化，为企业提供高效、稳定、可扩展的Token生产服务。',
|
||||
tp2: '传统的Token生产往往面临技术门槛高、成本投入大、运维复杂等挑战。Token工厂通过TaaS模式，让企业无需自建基础设施，无需深入了解底层技术细节，即可快速获得专业的Token生产能力，专注于业务创新和应用开发。',
|
||||
tp3: '我们的Token工厂不仅提供Token生产服务，还集成了从参数配置、任务调度、质量监控到结果交付的完整工作流，确保每一个Token都符合高质量标准。',
|
||||
coreTitle: '核心能力', coreSubtitle: '专业的Token生产与服务能力',
|
||||
f1Title: '工业化生产', f1Desc: '标准化的生产流程，自动化的任务执行，规模化的批量处理能力。',
|
||||
f2Title: '高效生产', f2Desc: '基于H800算力集群，配合智能调度算法，大幅提升Token生产效率。',
|
||||
f3Title: '质量保障', f3Desc: '全流程质量监控，多维度质量评估，确保Token输出符合标准。',
|
||||
f4Title: '弹性扩展', f4Desc: '根据需求动态分配资源，支持从小规模试验到大规模生产的平滑过渡。',
|
||||
f5Title: 'AI优化', f5Desc: 'AI驱动的参数优化和流程优化，持续提升生产效率和输出质量。',
|
||||
f6Title: 'API接入', f6Desc: '标准化API接口，轻松集成到现有系统，支持多种调用方式。',
|
||||
processTitle: '服务流程', processSubtitle: '简单四步，快速获得Token生产服务',
|
||||
st1Title: '需求配置', st1Desc: '根据业务需求配置Token生产参数，选择生产规模和质量标准。',
|
||||
st2Title: '资源调度', st2Desc: '系统自动分配最优算力资源，启动Token生产任务。',
|
||||
st3Title: '生产监控', st3Desc: '实时监控生产进度和质量指标，确保任务顺利执行。',
|
||||
st4Title: '结果交付', st4Desc: '生产完成后，通过API或下载方式获取Token，开始使用。',
|
||||
useCaseTitle: '应用场景', useCaseSubtitle: '广泛的Token应用场景支持',
|
||||
uc1Title: 'AI应用Token化', uc1Desc: '为AI模型输出、内容生成等场景提供Token化服务，实现结果的标准化和可追溯性。',
|
||||
uc1i1: 'LLM输出Token化', uc1i2: 'AI生成内容Token化', uc1i3: '模型预测结果Token化',
|
||||
uc2Title: '数据资产Token化', uc2Desc: '将数据资产转化为Token，实现数据价值的确权、流转和交易。',
|
||||
uc2i1: '训练数据集Token化', uc2i2: '知识产权Token化', uc2i3: '数字资产Token化',
|
||||
uc3Title: '算力Token化', uc3Desc: '将算力资源Token化，实现算力的灵活交易和使用。',
|
||||
uc3i1: 'GPU算力Token', uc3i2: '存储资源Token', uc3i3: '网络带宽Token',
|
||||
uc4Title: '服务权益Token化', uc4Desc: '将各类服务权益Token化，实现权益的标准化管理和流通。',
|
||||
uc4i1: 'API调用权益Token', uc4i2: '会员权益Token', uc4i3: '积分兑换Token',
|
||||
ctaTitle: '立即体验Token工厂', ctaSubtitle: '登录Token工厂平台，开启Token工业化生产之旅',
|
||||
ctaBtn1: '登录Token工厂', ctaBtn2: '联系咨询',
|
||||
},
|
||||
news: {
|
||||
h1: '企业动态',
|
||||
subtitle: '了解图灵引擎最新动态和行业资讯',
|
||||
s1Label: '动态资讯',
|
||||
s2Value: '持续', s2Label: '创新发展',
|
||||
s3Value: '2年+', s3Label: '发展历程',
|
||||
catCompany: '公司新闻',
|
||||
catIndustry: '行业资讯',
|
||||
ctaTitle: '关注我们，获取最新动态',
|
||||
ctaSubtitle: '了解更多图灵引擎的发展动态和行业资讯',
|
||||
ctaBtn: '订阅资讯',
|
||||
articles: [
|
||||
{ category: '公司新闻', date: '2026年3月', title: 'Token工厂正式运营，开创Token工业化生产新模式', desc: '图灵引擎Token工厂平台正式对外运营，标志着TaaS（Token-as-a-Service）模式正式落地。平台提供高效、稳定、可扩展的Token生产服务，为AI应用与Token经济的融合提供了新的解决方案。', tags: ['Token工厂', 'TaaS', '产品发布'] },
|
||||
{ category: '公司新闻', date: '2025年12月', title: 'H800集群建设完成，总算力达到1440Pflops', desc: '经过近两年的建设，图灵引擎自建H800 GPU集群建设全面完成，总算力规模达到1440Pflops，成为国内领先的超大规模智算中心之一。', tags: ['算力基础设施', '里程碑'] },
|
||||
{ category: '公司新闻', date: '2025年9月', title: 'Token工厂平台开始试运行，首批客户接入测试', desc: 'Token工厂平台Beta版发布，邀请首批合作伙伴和客户进行试运行测试，收集反馈优化产品功能和用户体验。', tags: ['Token工厂', '产品测试'] },
|
||||
{ category: '公司新闻', date: '2025年6月', title: '图灵智算系统云平台1.0正式发布', desc: '图灵智算系统云平台正式版发布，实现万卡级别的集群调度管理能力，集成AI开发全工具链，为企业提供从训练到部署的一站式智算服务。', tags: ['云平台', '产品发布', '万卡调度'] },
|
||||
{ category: '行业资讯', date: '2025年5月', title: 'AGI技术快速发展，智算需求持续增长', desc: '随着GPT-4、Claude等大模型的广泛应用，AGI技术进入快速发展期，企业对智算资源的需求呈现爆发式增长，智算服务市场前景广阔。', tags: ['行业趋势', 'AGI', '市场分析'] },
|
||||
{ category: '公司新闻', date: '2025年3月', title: 'Token工厂概念提出，探索TaaS新模式', desc: '图灵引擎正式提出TaaS（Token-as-a-Service）模式，将Token生产过程工业化、标准化，为AI应用与Token经济融合探索新路径。', tags: ['Token工厂', 'TaaS', '创新'] },
|
||||
{ category: '公司新闻', date: '2024年12月', title: '图灵智算系统云平台Beta版上线', desc: '云平台Beta版成功上线，支持多租户算力调度，为后续正式版发布奠定坚实基础。', tags: ['云平台', '产品测试'] },
|
||||
{ category: '公司新闻', date: '2024年9月', title: '首批算力中心投产，开始对外提供服务', desc: '第一批H800集群正式投入运营，开始为合作伙伴提供算力租赁和AI训练服务，标志着图灵引擎正式进入运营阶段。', tags: ['算力服务', '运营'] },
|
||||
{ category: '行业资讯', date: '2024年8月', title: '国内AI基础设施建设加速，政策支持力度加大', desc: '国家发布多项政策支持AI基础设施建设，鼓励企业投资智算中心，为AI产业发展提供坚实保障。', tags: ['政策', '行业趋势'] },
|
||||
{ category: '公司新闻', date: '2024年6月', title: '图灵智算系统立项，启动研发', desc: '正式启动万卡集群调度管理系统研发项目，目标打造业界领先的智算云平台。', tags: ['云平台', '研发'] },
|
||||
{ category: '公司新闻', date: '2024年3月', title: 'H800集群启动建设，规划1440Pflops算力规模', desc: '图灵引擎正式启动大规模H800 GPU集群建设项目，规划总算力达到1440Pflops，为后续业务发展打下坚实基础。', tags: ['算力基础设施', '建设'] },
|
||||
{ category: '公司新闻', date: '2024年1月', title: '图灵引擎正式成立，定位AGI全栈服务运营商', desc: '图灵引擎正式成立，确立"聚算成力，筑梦AGI"的企业使命，致力于成为领先的AGI全栈服务运营商。', tags: ['公司成立', '战略'] },
|
||||
],
|
||||
},
|
||||
contact: {
|
||||
h1: '联系我们',
|
||||
subtitle: '我们期待与您合作，共同推动AI产业发展',
|
||||
infoTitle: '联系方式',
|
||||
emailTitle: '电子邮箱', emailNote: '工作日24小时内回复',
|
||||
phoneTitle: '联系电话', phoneNote: '工作时间：9:00-18:00',
|
||||
addrTitle: '公司地址', addrText: '浙江-杭州', addrNote: '具体地址请通过邮件或电话咨询',
|
||||
quickTitle: '快速入口',
|
||||
cloudLinkTitle: '图灵智算系统云平台', cloudLinkDesc: '登录控制台，开始使用云平台服务',
|
||||
tokenLinkTitle: 'Token工厂', tokenLinkDesc: '访问Token工厂，体验TaaS服务',
|
||||
formTitle: '在线咨询',
|
||||
nameLabel: '姓名', namePH: '请输入您的姓名',
|
||||
companyLabel: '公司名称', companyPH: '请输入公司名称',
|
||||
emailLabel: '邮箱',
|
||||
phoneLabel: '电话', phonePH: '手机号码',
|
||||
serviceLabel: '感兴趣的服务', servicePH: '请选择服务类型',
|
||||
sOpt1: '算力集群服务', sOpt2: 'Token工厂', sOpt3: '图灵智算系统云平台', sOpt4: '其他咨询',
|
||||
msgLabel: '留言内容', msgPH: '请详细描述您的需求...',
|
||||
submitBtn: '提交咨询', submitOk: '提交成功！',
|
||||
submitNote: '提交后，我们将在1个工作日内与您取得联系',
|
||||
coopTitle: '合作咨询',
|
||||
coopDesc: '无论您是需要算力资源、想要部署AI应用，还是探索Token经济新模式，我们都期待与您深入交流，共同探索AI产业的无限可能。',
|
||||
tag1: '算力租赁', tag2: '定制化解决方案', tag3: '商务合作', tag4: '技术支持',
|
||||
},
|
||||
console: {
|
||||
h1: '控制台入口',
|
||||
subtitle: '选择您需要访问的平台，开启智算服务之旅',
|
||||
cloudTitle: '图灵智算系统云平台',
|
||||
cloudDesc: '万卡级别集群调度管理，AI开发全工具链集成，从训练到部署的一站式智算服务平台。',
|
||||
cloudF1: '万卡集群调度能力', cloudF2: 'AI开发全工具链', cloudF3: '一键部署与发布',
|
||||
cloudBtn: '进入云平台',
|
||||
tokenTitle: 'Token工厂',
|
||||
tokenDesc: 'TaaS（Token-as-a-Service）工业化生产模式，高效、稳定、可扩展的Token生产服务平台。',
|
||||
tokenF1: 'Token工业化生产', tokenF2: 'TaaS服务模式', tokenF3: 'AI驱动智能优化',
|
||||
tokenBtn: '进入Token工厂',
|
||||
helpTitle: '需要帮助？',
|
||||
helpDoc: '使用文档', helpDocDesc: '查看详细的产品使用文档和API接口说明',
|
||||
helpSupport: '技术支持', helpSupportDesc: '遇到问题？联系我们的技术支持团队',
|
||||
helpTutorial: '快速入门', helpTutorialDesc: '观看视频教程，快速上手使用平台',
|
||||
helpBtn: '联系我们',
|
||||
noAccount: '还没有账号？',
|
||||
applyTrial: '立即申请试用 →',
|
||||
},
|
||||
footer: {
|
||||
tagline: '聚算成力，筑梦AGI',
|
||||
quickTitle: '快速链接',
|
||||
bizTitle: '核心业务',
|
||||
contactTitle: '联系方式',
|
||||
about: '公司介绍', business: '主营业务', news: '企业动态', contact: '联系我们',
|
||||
infra: '算力集群服务', cloud: '图灵智算系统云平台', token: 'Token工厂',
|
||||
copyright: '版权所有',
|
||||
},
|
||||
}
|
||||
|
||||
const en: typeof zh = {
|
||||
nav: {
|
||||
home: 'Home',
|
||||
about: 'About',
|
||||
business: 'Business',
|
||||
businessInfrastructure: 'Computing Infrastructure',
|
||||
businessCloudPlatform: 'Turing Cloud Platform',
|
||||
businessTokenFactory: 'Token Factory',
|
||||
news: 'News',
|
||||
contact: 'Contact',
|
||||
console: 'Console',
|
||||
logoText: 'Turing Engine',
|
||||
logoChar: 'T',
|
||||
},
|
||||
home: {
|
||||
heroBadge: 'Full-Stack AGI Service Provider',
|
||||
heroH1a: 'Aggregate Power, Build ',
|
||||
heroH1b: 'AGI',
|
||||
heroSubtitle: 'Turing Engine — Painting a New Industrial Future',
|
||||
heroDesc: 'Building AI computing infrastructure, empowering the AI ecosystem, pioneering industrialized Token production',
|
||||
cta1: 'Explore Business',
|
||||
cta2: 'Enter Console',
|
||||
stat1Value: '1440',
|
||||
stat1Label: 'Pflops Computing Scale',
|
||||
stat2Value: '10,000+',
|
||||
stat2Label: 'GPUs Under Management',
|
||||
stat3Value: '3',
|
||||
stat3Label: 'Core Business Segments',
|
||||
coreTitle: 'Core Business',
|
||||
coreSubtitle: 'Three core segments empowering the AI industry ecosystem',
|
||||
infraTitle: 'Computing Infrastructure',
|
||||
infraDesc: 'Self-built H800 clusters forming 1440 Pflops hyper-scale computing center for stable, efficient AI training and inference.',
|
||||
infraMore: 'Learn More',
|
||||
cloudTitle: 'Turing Cloud Platform',
|
||||
cloudDesc: '10K-GPU cluster scheduling with full AI toolchain — one-stop intelligent computing from training to deployment.',
|
||||
cloudMore: 'Learn More',
|
||||
tokenTitle: 'Token Factory',
|
||||
tokenDesc: 'TaaS (Token-as-a-Service) model for industrialized Token production — efficient, stable, and scalable.',
|
||||
tokenMore: 'Learn More',
|
||||
whyTitle: 'Why Choose Turing Engine',
|
||||
whySubtitle: 'Professional, reliable, and innovative AGI service partner',
|
||||
why1Title: 'Technology Leader',
|
||||
why1Desc: 'Proprietary intelligent computing system with 10K-GPU scheduling and industry-leading AI toolchain',
|
||||
why2Title: 'Massive Compute',
|
||||
why2Desc: '1440 Pflops hyper-scale computing center — solid foundation for AI training and inference',
|
||||
why3Title: 'Full-Stack Services',
|
||||
why3Desc: 'From infrastructure to platform services, from compute rental to Token production',
|
||||
ctaTitle1: 'Ready to Start Your ',
|
||||
ctaAccent: 'AI Journey',
|
||||
ctaTitle2: '?',
|
||||
ctaSubtitle: 'Contact us for professional intelligent computing solutions',
|
||||
ctaBtn1: 'Contact Us',
|
||||
ctaBtn2: 'Learn About Us',
|
||||
},
|
||||
about: {
|
||||
h1a: 'About ',
|
||||
h1b: 'Turing Engine',
|
||||
subtitle: 'Full-Stack AGI service provider committed to building intelligent computing infrastructure',
|
||||
introTitle: 'Company Overview',
|
||||
p1: 'Turing Engine is a full-stack service provider focused on AGI (Artificial General Intelligence). Guided by "Aggregate Power, Build AGI," we deliver complete solutions for the AI industry — from infrastructure to application services.',
|
||||
p2: 'We have self-built H800 GPU clusters forming a 1440 Pflops hyper-scale computing center. Our Turing Cloud Platform achieves 10,000-GPU scheduling capability with a full AI development toolchain covering data processing, model training, and deployment.',
|
||||
p3: 'In the Token economy, we have innovatively proposed the TaaS (Token-as-a-Service) model. Through the Token Factory platform, we industrialize Token production — providing efficient, stable, and scalable Token services and pioneering AI-Token economy integration.',
|
||||
c1Title: 'Infrastructure', c1Desc: '1440 Pflops hyper-scale computing center',
|
||||
c2Title: 'Cloud Platform', c2Desc: '10K-GPU scheduling system',
|
||||
c3Title: 'Token Factory', c3Desc: 'TaaS industrialized production model',
|
||||
c4Title: 'Full-Stack', c4Desc: 'End-to-end AI solutions',
|
||||
missionTitle: 'Our Mission',
|
||||
missionText: 'Aggregate computing power, build the AGI dream. By constructing powerful intelligent computing infrastructure and a comprehensive service system, we lower the barrier to AI development so every enterprise and developer can easily access AI capabilities.',
|
||||
visionTitle: 'Our Vision',
|
||||
visionText: 'To become the world\'s leading full-stack AGI service provider, building the most trusted intelligent computing platform and contributing to the intelligent transformation of human society.',
|
||||
timelineTitle: 'Development Milestones',
|
||||
timelineSubtitle: 'From founding to today — forging ahead every step of the way',
|
||||
teamTitle: 'Our Team',
|
||||
teamSubtitle: 'Gathering industry elites to build an outstanding team',
|
||||
teamPlaceholder: 'Team information coming soon...',
|
||||
milestones: [
|
||||
{ date: 'Jan 2024', title: 'Company Founded', desc: 'Turing Engine established, positioned as a full-stack AGI service provider' },
|
||||
{ date: 'Mar 2024', title: 'H800 Build Starts', desc: 'Launched large-scale H800 GPU cluster construction, targeting 1440 Pflops' },
|
||||
{ date: 'Jun 2024', title: 'Cloud System Initiated', desc: 'Started development of 10K-GPU scheduling system with full AI toolchain' },
|
||||
{ date: 'Sep 2024', title: 'First Center Goes Live', desc: 'First H800 cluster operational, began providing external computing services' },
|
||||
{ date: 'Dec 2024', title: 'Cloud Platform Beta', desc: 'Turing Cloud Platform Beta released with multi-tenant scheduling support' },
|
||||
{ date: 'Mar 2025', title: 'Token Factory Concept', desc: 'Proposed TaaS (Token-as-a-Service) model for industrialized Token production' },
|
||||
{ date: 'Jun 2025', title: 'Cloud Platform v1.0', desc: 'Turing Cloud Platform 1.0 launched with 10K-GPU scheduling capability' },
|
||||
{ date: 'Sep 2025', title: 'Token Factory Trial', desc: 'Token Factory began trial operations, first batch of clients onboarded' },
|
||||
{ date: 'Dec 2025', title: 'Compute Target Reached', desc: 'H800 cluster construction complete, total compute reaches 1440 Pflops' },
|
||||
{ date: 'Mar 2026', title: 'Token Factory Launch', desc: 'Token Factory officially launched, pioneering industrialized Token production' },
|
||||
{ date: 'Future 2026+', title: 'Continuous Innovation', desc: 'Continuously optimizing services, deepening AI industry presence' },
|
||||
],
|
||||
},
|
||||
business: {
|
||||
h1: 'Our Business',
|
||||
subtitle: 'Three core business segments providing comprehensive empowerment for the AI industry ecosystem',
|
||||
infraTitle: 'Computing Infrastructure',
|
||||
infraDesc: 'Self-built H800 GPU clusters forming 1440 Pflops hyper-scale computing center for AI training and inference.',
|
||||
infraCta: 'Learn More',
|
||||
cloudTitle: 'Turing Cloud Platform',
|
||||
cloudDesc: '10K-GPU cluster scheduling with full AI toolchain — one-stop intelligent computing from training to deployment.',
|
||||
cloudCta: 'Learn More',
|
||||
tokenTitle: 'Token Factory',
|
||||
tokenDesc: 'TaaS (Token-as-a-Service) model for industrialized Token production — efficient, stable, and scalable.',
|
||||
tokenCta: 'Learn More',
|
||||
valueTitle: 'Business Value',
|
||||
v1Title: 'Lower AI Barrier', v1Desc: 'Launch AI workloads without building costly GPU clusters, using our comprehensive infrastructure and platform.',
|
||||
v2Title: 'Boost Efficiency', v2Desc: 'Integrated AI toolchains and automated scheduling dramatically improve development-to-deployment efficiency.',
|
||||
v3Title: 'Flexible Resources', v3Desc: 'On-demand usage and elastic scaling — adjust computing resources to match needs and reduce costs.',
|
||||
v4Title: 'Token Economy', v4Desc: 'Pioneer industrialized Token production, providing new ideas for AI-Token economy integration.',
|
||||
ctaTitle: 'Experience Our Services Now',
|
||||
ctaSubtitle: 'Contact us for professional intelligent computing solutions',
|
||||
ctaBtn: 'Contact Us',
|
||||
},
|
||||
infrastructure: {
|
||||
badge: 'Computing Infrastructure',
|
||||
h1a: 'Hyper-Scale ',
|
||||
h1b: 'Computing Center',
|
||||
subtitle: 'Self-built H800 GPU clusters forming 1440 Pflops of computing infrastructure',
|
||||
s1Label: 'Pflops Total Compute', s1Sub: 'Hyper-scale computing capability',
|
||||
s2Label: 'GPU Cluster', s2Sub: 'Enterprise-grade high-performance GPU',
|
||||
s3Value: '99.9%', s3Label: 'Availability', s3Sub: '24/7 stable operation',
|
||||
coreTitle: 'Core Advantages', coreSubtitle: 'Professional computing infrastructure and operations',
|
||||
f1Title: 'Self-Controlled', f1Desc: 'Self-built GPU clusters — fully autonomous computing resources ensuring business continuity and data security.',
|
||||
f2Title: 'High Performance', f2Desc: 'Enterprise H800 GPUs with strong single-card performance for large-scale AI model training and inference.',
|
||||
f3Title: 'High-Speed Interconnect', f3Desc: 'High-bandwidth, low-latency network supporting large-scale distributed training.',
|
||||
f4Title: 'Secure & Reliable', f4Desc: 'Multi-layer security and encrypted data transmission to protect customer data and models.',
|
||||
f5Title: 'Elastic Scaling', f5Desc: 'Flexible resource allocation — rapidly scale to match business demands.',
|
||||
f6Title: 'Professional O&M', f6Desc: '24/7 professional operations team with real-time monitoring and rapid response.',
|
||||
specTitle: 'Technical Specifications',
|
||||
sp1Title: 'GPU Model', sp1Desc: 'NVIDIA H800 Enterprise GPU',
|
||||
sp2Title: 'Total Compute', sp2Desc: '1440 Pflops (double-precision floating point)',
|
||||
sp3Title: 'Network', sp3Desc: 'InfiniBand high-speed interconnect, RDMA-capable',
|
||||
sp4Title: 'Storage', sp4Desc: 'Distributed high-performance storage, supports PB-scale data',
|
||||
sp5Title: 'Cooling', sp5Desc: 'Hybrid liquid + air cooling — efficient and energy-saving',
|
||||
sp6Title: 'Power', sp6Desc: 'Dual-path power + UPS backup for uninterrupted operation',
|
||||
useCaseTitle: 'Use Cases', useCaseSubtitle: 'Broad support for all types of AI scenarios',
|
||||
uc1Title: 'Large Model Training', uc1Desc: 'Supports training of models with hundreds of billions to trillions of parameters.',
|
||||
uc1i1: 'LLM training', uc1i2: 'Multi-modal model training', uc1i3: 'Model fine-tuning and optimization',
|
||||
uc2Title: 'Inference Services', uc2Desc: 'High-performance inference acceleration with low latency and massive concurrency support.',
|
||||
uc2i1: 'Real-time AI inference', uc2i2: 'Batch inference processing', uc2i3: 'Edge AI deployment',
|
||||
uc3Title: 'Scientific Computing', uc3Desc: 'High-performance scientific computing to accelerate research innovation.',
|
||||
uc3i1: 'Molecular dynamics simulation', uc3i2: 'Weather prediction computing', uc3i3: 'Bioinformatics analysis',
|
||||
uc4Title: 'Industry AI', uc4Desc: 'Customized AI computing for various industries to facilitate intelligent upgrades.',
|
||||
uc4i1: 'Intelligent manufacturing', uc4i2: 'Financial risk control', uc4i3: 'Medical image analysis',
|
||||
ctaTitle: 'Need More Computing Resources?', ctaSubtitle: 'Contact us for customized computing solutions', ctaBtn: 'Contact Us',
|
||||
},
|
||||
cloudPlatform: {
|
||||
badge: 'Turing Cloud Platform',
|
||||
h1a: '10K-GPU Scheduling ',
|
||||
h1b: 'Cloud Platform',
|
||||
subtitle: 'One-stop AI development platform — from training to deployment, end-to-end intelligent management',
|
||||
s1Value: '10,000+', s1Label: 'GPU Scheduling', s1Sub: '10K-scale cluster management',
|
||||
s2Value: 'Full Toolchain', s2Label: 'AI Development', s2Sub: 'One-stop dev experience',
|
||||
s3Value: 'Second-level', s3Label: 'Scheduling Response', s3Sub: 'Efficient intelligent scheduling',
|
||||
coreTitle: 'Platform Core Features', coreSubtitle: 'Powerful intelligent computing management capabilities',
|
||||
f1Title: 'Intelligent Scheduling', f1Desc: 'AI-based resource scheduling automatically optimizes task allocation to maximize utilization.',
|
||||
f2Title: 'Containerized Deployment', f2Desc: 'Supports Docker and Kubernetes for rapid application deployment, scaling, and management.',
|
||||
f3Title: 'Real-time Monitoring', f3Desc: 'Comprehensive performance monitoring — real-time insight into cluster status and task progress.',
|
||||
f4Title: 'Multi-tenant Isolation', f4Desc: 'Complete multi-tenant management ensuring resource and data isolation between users.',
|
||||
f5Title: 'Workflow Orchestration', f5Desc: 'Visual workflow designer for orchestrating complex AI training and inference pipelines.',
|
||||
f6Title: 'Elastic Scaling', f6Desc: 'Automatically adjusts resource allocation based on load, supporting burst traffic.',
|
||||
toolTitle: 'Integrated AI Toolchain',
|
||||
t1Title: 'Frameworks', t1i1: 'PyTorch, TensorFlow, JAX and other major frameworks', t1i2: 'Hugging Face Transformers ecosystem', t1i3: 'DeepSpeed, Megatron and training acceleration libraries',
|
||||
t2Title: 'Data Processing', t2i1: 'Distributed data preprocessing pipelines', t2i2: 'Data annotation and management tools', t2i3: 'Feature engineering automation',
|
||||
t3Title: 'Model Management', t3i1: 'Model version management and tracking', t3i2: 'Experiment comparison and visualization', t3i3: 'Hyperparameter auto-tuning',
|
||||
t4Title: 'Deployment', t4i1: 'One-click model deployment and publishing', t4i2: 'API gateway and load balancing', t4i3: 'Model performance optimization and quantization',
|
||||
useCaseTitle: 'Typical Use Cases', useCaseSubtitle: 'Application support covering the full AI lifecycle',
|
||||
uc1Title: 'Large Model Training', uc1Desc: 'Distributed training of ultra-large models with automatic data and model parallelism.',
|
||||
uc1i1: 'Automatic mixed-precision training', uc1i2: 'Gradient accumulation and checkpointing', uc1i3: 'Distributed optimizer',
|
||||
uc2Title: 'Model Fine-tuning', uc2Desc: 'Rapid fine-tuning based on pre-trained models for specific business scenarios.',
|
||||
uc2i1: 'LoRA, QLoRA efficient fine-tuning', uc2i2: 'Few-shot learning support', uc2i3: 'Transfer learning optimization',
|
||||
uc3Title: 'Inference Services', uc3Desc: 'High-performance inference engine supporting multiple optimization strategies.',
|
||||
uc3i1: 'Model quantization and pruning', uc3i2: 'Batch processing optimization', uc3i3: 'Multi-model ensemble services',
|
||||
uc4Title: 'AutoML', uc4Desc: 'Automated machine learning pipeline lowering the barrier to AI development.',
|
||||
uc4i1: 'Automatic feature engineering', uc4i2: 'Neural architecture search', uc4i3: 'Hyperparameter optimization',
|
||||
ctaTitle: 'Try Turing Cloud Platform Now', ctaSubtitle: 'Log in to the console and start your AI development journey',
|
||||
ctaBtn1: 'Login to Cloud Platform', ctaBtn2: 'Contact Us',
|
||||
},
|
||||
tokenFactory: {
|
||||
badge: 'Token Factory',
|
||||
h1a: 'Industrialized Token Production',
|
||||
h1b: 'New Model',
|
||||
subtitle: 'TaaS (Token-as-a-Service) model — efficient, stable, and scalable Token service platform',
|
||||
s1Value: 'Industrial', s1Label: 'Production Model', s1Sub: 'Scalable efficient production',
|
||||
s2Value: 'TaaS', s2Label: 'Service Model', s2Sub: 'Ready to use, pay as you go',
|
||||
s3Value: 'AI-Driven', s3Label: 'Intelligent Optimization', s3Sub: 'Auto-tuning for higher efficiency',
|
||||
taasTitle: 'What is TaaS?',
|
||||
tp1: 'TaaS (Token-as-a-Service) is an innovative Token industrialization service model by Turing Engine. By integrating powerful computing infrastructure, intelligent scheduling, and AI optimization algorithms, we standardize, automate, and scale Token production for enterprises.',
|
||||
tp2: 'Traditional Token production faces high technical barriers, large capital investment, and complex operations. The Token Factory\'s TaaS model allows enterprises to quickly obtain professional Token production capabilities without building infrastructure or understanding low-level details.',
|
||||
tp3: 'Our Token Factory integrates a complete workflow from parameter configuration, task scheduling, and quality monitoring to result delivery — ensuring every Token meets high quality standards.',
|
||||
coreTitle: 'Core Capabilities', coreSubtitle: 'Professional Token production and service capabilities',
|
||||
f1Title: 'Industrialized Production', f1Desc: 'Standardized production processes, automated task execution, and scalable batch processing.',
|
||||
f2Title: 'Efficient Production', f2Desc: 'Leveraging H800 clusters with intelligent scheduling to boost Token production efficiency.',
|
||||
f3Title: 'Quality Assurance', f3Desc: 'End-to-end quality monitoring with multi-dimensional evaluation ensuring Token output meets standards.',
|
||||
f4Title: 'Elastic Scaling', f4Desc: 'Dynamic resource allocation supporting smooth transitions from small tests to large-scale production.',
|
||||
f5Title: 'AI Optimization', f5Desc: 'AI-driven parameter and process optimization for continuously improving efficiency and quality.',
|
||||
f6Title: 'API Integration', f6Desc: 'Standardized API interfaces that easily integrate into existing systems.',
|
||||
processTitle: 'Service Process', processSubtitle: 'Four simple steps to get Token production services',
|
||||
st1Title: 'Configure Requirements', st1Desc: 'Configure Token production parameters based on business needs, selecting scale and quality standards.',
|
||||
st2Title: 'Resource Scheduling', st2Desc: 'System automatically allocates optimal computing resources and launches the production task.',
|
||||
st3Title: 'Production Monitoring', st3Desc: 'Real-time monitoring of production progress and quality metrics to ensure smooth execution.',
|
||||
st4Title: 'Result Delivery', st4Desc: 'Once complete, obtain Tokens via API or download and start using them.',
|
||||
useCaseTitle: 'Use Cases', useCaseSubtitle: 'Broad Token application scenario support',
|
||||
uc1Title: 'AI Application Tokenization', uc1Desc: 'Tokenization services for AI model outputs and content generation.',
|
||||
uc1i1: 'LLM output tokenization', uc1i2: 'AI-generated content tokenization', uc1i3: 'Model prediction tokenization',
|
||||
uc2Title: 'Data Asset Tokenization', uc2Desc: 'Convert data assets into Tokens for ownership confirmation and trading.',
|
||||
uc2i1: 'Training dataset tokenization', uc2i2: 'IP tokenization', uc2i3: 'Digital asset tokenization',
|
||||
uc3Title: 'Compute Tokenization', uc3Desc: 'Tokenize computing resources for flexible trading and usage.',
|
||||
uc3i1: 'GPU compute tokens', uc3i2: 'Storage resource tokens', uc3i3: 'Network bandwidth tokens',
|
||||
uc4Title: 'Service Rights Tokenization', uc4Desc: 'Tokenize service rights for standardized management and circulation.',
|
||||
uc4i1: 'API call rights tokens', uc4i2: 'Membership tokens', uc4i3: 'Points redemption tokens',
|
||||
ctaTitle: 'Try Token Factory Now', ctaSubtitle: 'Log in to the Token Factory and start your journey',
|
||||
ctaBtn1: 'Login to Token Factory', ctaBtn2: 'Contact Us',
|
||||
},
|
||||
news: {
|
||||
h1: 'Company News',
|
||||
subtitle: 'Stay updated on Turing Engine\'s latest developments and industry insights',
|
||||
s1Label: 'News & Updates',
|
||||
s2Value: 'Ongoing', s2Label: 'Innovation & Growth',
|
||||
s3Value: '2+ Years', s3Label: 'Development History',
|
||||
catCompany: 'Company News',
|
||||
catIndustry: 'Industry News',
|
||||
ctaTitle: 'Follow Us for the Latest Updates',
|
||||
ctaSubtitle: 'Learn more about Turing Engine\'s developments and industry insights',
|
||||
ctaBtn: 'Subscribe',
|
||||
articles: [
|
||||
{ category: 'Company News', date: 'March 2026', title: 'Token Factory Officially Launched, Pioneering Industrialized Token Production', desc: 'Turing Engine\'s Token Factory platform officially launched, marking the TaaS (Token-as-a-Service) model going live. The platform provides efficient, stable, and scalable Token production services.', tags: ['Token Factory', 'TaaS', 'Product Launch'] },
|
||||
{ category: 'Company News', date: 'December 2025', title: 'H800 Cluster Build Complete, Total Compute Reaches 1440 Pflops', desc: 'After nearly two years of construction, Turing Engine\'s self-built H800 GPU cluster is fully complete, achieving 1440 Pflops total computing scale.', tags: ['Infrastructure', 'Milestone'] },
|
||||
{ category: 'Company News', date: 'September 2025', title: 'Token Factory Begins Trial Operations', desc: 'Token Factory Beta launched, inviting first partners and clients for trial testing to gather feedback and optimize product features.', tags: ['Token Factory', 'Beta Test'] },
|
||||
{ category: 'Company News', date: 'June 2025', title: 'Turing Cloud Platform 1.0 Officially Released', desc: 'The official version of Turing Cloud Platform launched with 10K-GPU cluster scheduling capability and full AI development toolchain.', tags: ['Cloud Platform', 'Product Launch', '10K-GPU'] },
|
||||
{ category: 'Industry News', date: 'May 2025', title: 'AGI Technology Accelerates, Demand for Intelligent Computing Surges', desc: 'With the widespread adoption of large models like GPT-4 and Claude, AGI technology enters rapid development phase, driving explosive growth in enterprise demand for computing resources.', tags: ['Industry Trend', 'AGI', 'Market Analysis'] },
|
||||
{ category: 'Company News', date: 'March 2025', title: 'Token Factory Concept Introduced, Exploring TaaS Model', desc: 'Turing Engine formally proposed the TaaS (Token-as-a-Service) model, industrializing and standardizing the Token production process.', tags: ['Token Factory', 'TaaS', 'Innovation'] },
|
||||
{ category: 'Company News', date: 'December 2024', title: 'Turing Cloud Platform Beta Goes Live', desc: 'Cloud Platform Beta successfully launched with multi-tenant computing scheduling support, laying a solid foundation for the official release.', tags: ['Cloud Platform', 'Beta'] },
|
||||
{ category: 'Company News', date: 'September 2024', title: 'First Computing Center Goes Live', desc: 'First H800 cluster officially operational, began providing computing rental and AI training services to partners.', tags: ['Computing Services', 'Operations'] },
|
||||
{ category: 'Industry News', date: 'August 2024', title: 'China Accelerates AI Infrastructure Build, Policy Support Strengthened', desc: 'The government published multiple policies supporting AI infrastructure construction, encouraging enterprises to invest in intelligent computing centers.', tags: ['Policy', 'Industry Trend'] },
|
||||
{ category: 'Company News', date: 'June 2024', title: 'Turing Cloud System Initiated', desc: 'Officially launched the 10K-GPU cluster scheduling system R&D project, targeting a leading intelligent computing cloud platform.', tags: ['Cloud Platform', 'R&D'] },
|
||||
{ category: 'Company News', date: 'March 2024', title: 'H800 Cluster Construction Begins, Planning 1440 Pflops Scale', desc: 'Turing Engine officially launched large-scale H800 GPU cluster construction, planning 1440 Pflops total computing power.', tags: ['Infrastructure', 'Construction'] },
|
||||
{ category: 'Company News', date: 'January 2024', title: 'Turing Engine Founded, Positioned as Full-Stack AGI Provider', desc: 'Turing Engine officially founded with the mission "Aggregate Power, Build AGI," committed to becoming a leading full-stack AGI service provider.', tags: ['Founded', 'Strategy'] },
|
||||
],
|
||||
},
|
||||
contact: {
|
||||
h1: 'Contact Us',
|
||||
subtitle: 'We look forward to working with you to advance the AI industry',
|
||||
infoTitle: 'Contact Information',
|
||||
emailTitle: 'Email', emailNote: 'Reply within 24 hours on business days',
|
||||
phoneTitle: 'Phone', phoneNote: 'Business hours: 9:00-18:00',
|
||||
addrTitle: 'Address', addrText: 'Hangzhou, Zhejiang Province, China', addrNote: 'For specific address, please inquire via email or phone',
|
||||
quickTitle: 'Quick Links',
|
||||
cloudLinkTitle: 'Turing Cloud Platform', cloudLinkDesc: 'Log in to the console and start using cloud platform services',
|
||||
tokenLinkTitle: 'Token Factory', tokenLinkDesc: 'Visit Token Factory to experience TaaS services',
|
||||
formTitle: 'Online Consultation',
|
||||
nameLabel: 'Name', namePH: 'Enter your name',
|
||||
companyLabel: 'Company', companyPH: 'Enter company name',
|
||||
emailLabel: 'Email',
|
||||
phoneLabel: 'Phone', phonePH: 'Phone number',
|
||||
serviceLabel: 'Service of Interest', servicePH: 'Select service type',
|
||||
sOpt1: 'Computing Infrastructure', sOpt2: 'Turing Cloud Platform', sOpt3: 'Token Factory', sOpt4: 'Other Inquiries',
|
||||
msgLabel: 'Message', msgPH: 'Please describe your requirements in detail...',
|
||||
submitBtn: 'Submit Inquiry', submitOk: 'Submitted Successfully!',
|
||||
submitNote: 'We will contact you within 1 business day after submission',
|
||||
coopTitle: 'Partnership Inquiries',
|
||||
coopDesc: 'Whether you need computing resources, want to deploy AI applications, or explore new Token economy models, we look forward to in-depth conversations to explore AI industry possibilities.',
|
||||
tag1: 'Compute Rental', tag2: 'Custom Solutions', tag3: 'Business Cooperation', tag4: 'Technical Support',
|
||||
},
|
||||
console: {
|
||||
h1: 'Console',
|
||||
subtitle: 'Choose the platform you need to access and start your intelligent computing journey',
|
||||
cloudTitle: 'Turing Cloud Platform',
|
||||
cloudDesc: '10K-GPU cluster scheduling, full AI toolchain integration — one-stop intelligent computing from training to deployment.',
|
||||
cloudF1: '10K-GPU scheduling capability', cloudF2: 'Full AI development toolchain', cloudF3: 'One-click deployment',
|
||||
cloudBtn: 'Enter Cloud Platform',
|
||||
tokenTitle: 'Token Factory',
|
||||
tokenDesc: 'TaaS (Token-as-a-Service) industrialized production model — efficient, stable, and scalable Token production platform.',
|
||||
tokenF1: 'Industrialized Token production', tokenF2: 'TaaS service model', tokenF3: 'AI-driven optimization',
|
||||
tokenBtn: 'Enter Token Factory',
|
||||
helpTitle: 'Need Help?',
|
||||
helpDoc: 'Documentation', helpDocDesc: 'View detailed product documentation and API references',
|
||||
helpSupport: 'Technical Support', helpSupportDesc: 'Having issues? Contact our technical support team',
|
||||
helpTutorial: 'Quick Start', helpTutorialDesc: 'Watch video tutorials for a quick introduction',
|
||||
helpBtn: 'Contact Us',
|
||||
noAccount: 'Don\'t have an account yet?',
|
||||
applyTrial: 'Apply for Trial Now →',
|
||||
},
|
||||
footer: {
|
||||
tagline: 'Aggregate Power, Build AGI',
|
||||
quickTitle: 'Quick Links',
|
||||
bizTitle: 'Core Business',
|
||||
contactTitle: 'Contact',
|
||||
about: 'About', business: 'Business', news: 'News', contact: 'Contact',
|
||||
infra: 'Computing Infrastructure', cloud: 'Turing Cloud Platform', token: 'Token Factory',
|
||||
copyright: 'All rights reserved',
|
||||
},
|
||||
}
|
||||
|
||||
export type Translations = typeof zh
|
||||
|
||||
export const translations: Record<Language, Translations> = { zh, en }
|
||||
|
||||
export function t(lang: Language): Translations {
|
||||
return translations[lang]
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
name = "turing-engine"
|
||||
compatibility_date = "2024-12-01"
|
||||
|
||||
# Uncomment after creating D1 database with: nxcode-d1 create <name>
|
||||
# [[d1_databases]]
|
||||
# binding = "DB"
|
||||
# database_name = "nxcode-xxx-your-db-name"
|
||||
# database_id = "xxx"
|
||||
|
||||
# Uncomment after creating KV namespace with: nxcode-kv create <name>
|
||||
# [[kv_namespaces]]
|
||||
# binding = "CACHE"
|
||||
# id = "xxx"
|
||||
|
||||
# Uncomment after creating R2 bucket with: nxcode-r2 create <name>
|
||||
# [[r2_buckets]]
|
||||
# binding = "STORAGE"
|
||||
# bucket_name = "nxcode-xxx-your-bucket"
|
||||
Loading…
Reference in New Issue