diff --git a/.gitignore b/.gitignore index d4c882b..3518084 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ build/ .env.development .env.production .claude/ +*.tsbuildinfo diff --git a/docs/design-redesign-plan.md b/docs/design-redesign-plan.md new file mode 100644 index 0000000..765082b --- /dev/null +++ b/docs/design-redesign-plan.md @@ -0,0 +1,328 @@ +# 图灵引擎官网 — UI 重构设计方案 v2 + +> 日期：2026-07-28 +> 方向：立体层次 · 阴影深度 · 动效叙事 + +--- + +## 一、设计方向 + +### 设计理念 + +**"科技深度，触手可及"** + +结合 Soft UI Evolution（进化软 UI）的立体层次感与 Glassmorphism（玻璃态）的轻盈通透，打造 B2B AI 基础设施的科技信任感。 + +核心设计语言： +- **3D 立体感** — 通过双阴影（light + dark）营造 extruded 立体卡片效果 +- **层次深度** — 3 级 Elevation 系统，从扁平到悬浮 +- **动效叙事** — 滚动触发 + 交错入场，引导用户逐层探索 + +### 风格定位 + +| 维度 | 选择 | +|:----|:-----| +| 基础风格 | **Soft UI Evolution**（进化软 UI） | +| 特殊效果 | **Glassmorphism**（玻璃态，用于 Hero/弹窗） | +| 主色 | Sky 天蓝（#0369A1 / #38BDF8） | +| 中性色 | Slate 色板 | +| 圆角系统 | 12px（卡片）/ 8px（按钮）/ 24px（Hero 玻璃面板） | +| 阴影系统 | **三层 Elevation** | + +--- + +## 二、色彩系统 + +### 色板 + +| 角色 | 亮色 | 暗色 | Tailwind | +|:----|:----|:----|:---------| +| **主强调色** | `#0369A1` | `#38BDF8` | `sky-700` / `sky-400` | +| **主色 Hover** | `#075985` | `#7DD3FC` | `sky-800` / `sky-300` | +| **主色亮背景** | `#F0F9FF` | `#0C4A6E/30` | `sky-50` / `sky-900/30` | +| **页面背景** | `#F8FAFC` | `#020617` | `slate-50` / `slate-950` | +| **卡片背景** | `#FFFFFF` | `#0F172A` | `white` / `slate-900` | +| **正文** | `#0F172A` | `#F8FAFC` | `slate-900` / `slate-50` | +| **次要文字** | `#64748B` | `#94A3B8` | `slate-500` / `slate-400` | +| **边框** | `#E2E8F0` | `#334155` | `slate-200` / `slate-700` | +| **静默区块** | `#F1F5F9` | `#1E293B` | `slate-100` / `slate-800` | + +**色彩签名**：全站唯一彩色标识为 Sky 天蓝。无渐变，无其他颜色介入。 + +--- + +## 三、Elevation 层次系统 + +### 三级阴影规范 + +| 层级 | 名称 | 亮色阴影 | 暗色阴影 | 用途 | +|:---:|:----|:---------|:---------|:-----| +| **1** | Base | `0 1px 2px rgba(0,0,0,0.05)` | `0 1px 2px rgba(0,0,0,0.3)` | **按钮**、小卡片 | +| **2** | Card | `0 4px 12px rgba(0,0,0,0.08)` | `0 4px 12px rgba(0,0,0,0.4)` | **普通卡片**、内容区块 | +| **3** | Elevated | `0 8px 24px rgba(0,0,0,0.12)` | `0 8px 24px rgba(0,0,0,0.5)` | **Hover 态**、弹窗、下拉菜单 | + +### 交互阴影 + +```css +/* 卡片 hover 效果 */ +.card { + box-shadow: 0 4px 12px rgba(0,0,0,0.08); + transition: box-shadow 250ms ease, transform 250ms ease; +} +.card:hover { + box-shadow: 0 8px 24px rgba(0,0,0,0.12); + transform: translateY(-2px); +} +``` + +### Tailwind 扩展配置 + +```js +// tailwind.config +boxShadow: { + 'card': '0 4px 12px rgba(0,0,0,0.08)', + 'card-hover': '0 8px 24px rgba(0,0,0,0.12)', + 'elevated': '0 12px 32px rgba(0,0,0,0.15)', +} +// Dark mode +darkMode: 'class', +``` + +--- + +## 四、玻璃态（Glassmorphism）应用 + +限定用于两个场景： + +### 4.1 Hero 背景面板 + +``` +背景：backdrop-filter: blur(20px) + background: rgba(255,255,255,0.08) / 暗色 rgba(0,0,0,0.3) + 边框：1px solid rgba(255,255,255,0.1) +``` + +### 4.2 特殊卡片（如"什么是AI TaaS"引文区块） + +``` +背景：backdrop-filter: blur(12px) + background: rgba(255,255,255,0.06) + 圆角：rounded-2xl (16px) +``` + +--- + +## 五、字体系统 + +| 用法 | 字重 | 字号 | 行高 | +|:----|:---:|:---:|:----:| +| Hero 标题 | **Bold 700** | 40-48px | 1.15 | +| Section 标题 | **Bold 700** | 24-30px | 1.25 | +| 卡片标题 | **SemiBold 600** | 16-18px | 1.4 | +| 正文 | Regular 400 | 15-16px | 1.6 | +| 辅助文本 | Regular 400 | 13-14px | 1.5 | + +字体：**Plus Jakarta Sans**（单字重体系） +```css +@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap'); +``` + +--- + +## 六、动画系统 + +### 6.1 滚动触发入场（Scroll Reveal） + +所有 section 进入视口时触发： + +| 元素类型 | 动画 | 延迟 | 时长 | +|:--------|:----|:----|:----| +| Section 标题 | fade-up（translateY 20px → 0 + opacity 0→1） | 0ms | 500ms | +| 卡片网格 | fade-up + scale | 逐个 stagger **80ms** | 400ms | +| 统计数字 | count-up（数值从 0→目标） | 入视时 | 800ms | +| CTA 区块 | fade-up | 0ms | 400ms | + +### 6.2 Hover 微交互 + +| 元素 | 效果 | 时长 | +|:----|:----|:----| +| **卡片** | shadow: card → elevated, translateY: -2px | **250ms** ease | +| **按钮** | scale: 1→0.97（按下）, 1→1.02（悬停） | 150ms ease | +| **链接** | 下划线展开（宽度 0→100%） | 200ms ease | +| **图标** | scale: 1→1.1 | 200ms ease | + +### 6.3 性能规范 + +- 所有动画使用 `transform` + `opacity`，**禁移动 width/height/top/left** +- 遵守 `prefers-reduced-motion`： + ```css + @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + } + } + ``` +- 单页面动画元素 ≤ 8 个同时播放 +- 入场动画连续播完后，不重复触发 + +### 6.4 滚动行为 + +```css +html { + scroll-behavior: smooth; +} +``` + +--- + +## 七、组件规范（更新版） + +### 卡片 + +``` +组件结构： +┌──────────────────────────────────────┐ +│ (阴影 card 层：shadow-card) │ +│ 圆角：rounded-xl (12px) │ +│ 背景：bg-white / dark:bg-slate-900 │ +│ 过渡：transition-all duration-250 │ +│ hover: shadow-card-hover -translateY-2│ +├──────────────────────────────────────┤ +│ [图标] 标题 │ +│ 描述文字 │ +│ ───────────────── │ +│ ● 列表项 1 │ +│ ● 列表项 2 │ +│ ● 列表项 3 │ +│ ───────────────── │ +│ [CTA 按钮] │ +└──────────────────────────────────────┘ +``` + +### 按钮 + +| 类型 | 样式 | 阴影 | +|:----|:----|:----| +| **Primary** | `bg-sky-700 hover:bg-sky-800 text-white` | `shadow-card hover:shadow-elevated` | +| **Secondary** | `border border-slate-200 hover:bg-slate-100 text-slate-700` | 无阴影 | +| **Ghost** | `text-slate-500 hover:text-slate-900` | 无 | + +### Section 标题 + +```html +
+ +
+

+ {title} +

+

+ {subtitle} +

+
+``` + +### 导航栏 + +- `bg-white/90 dark:bg-slate-950/90 backdrop-blur-md` +- 底部发丝边框 +- 当前页标记：蓝色下划线（`border-b-2 border-sky-500`） +- Logo 左，导航居中，功能按钮右 + +--- + +## 八、页面布局模板（更新版） + +### 产品中心页（重点重构） + +``` +┌─ Glass Hero ──────────────────────────┐ +│ backdrop-blur, 标题 fade-up │ +├──────────────────────────────────────┤ +│ ┌─shadow-card──┐ ┌─shadow-card───┐ │ +│ │ 云平台 │ │ Token工厂 │ │ +│ │ hover 升高 │ │ hover 升高 │ │ +│ │ + 蓝图标 │ │ + 蓝图标 │ │ +│ │ [Primary Btn] │ │ [Primary Btn] │ │ +│ └──────────────┘ └───────────────┘ │ +│ stagger 80ms × 2 │ +├──────────────────────────────────────┤ +│ 帮助卡片 (3列) — fade-up delayed │ +├──────────────────────────────────────┤ +│ 试用引导 — fade-up │ +└──────────────────────────────────────┘ +``` + +### 业务子页面模板 + +``` +┌─ Section Header (fade-up) ───────────┐ +├──────────────────────────────────────┤ +│ 统计数字 (3列, count-up 动画) │ +├──shadow-card──shadow-card──shadow-card│ +│ stagger 80ms │ +├──────────────────────────────────────┤ +│ 功能列表 (3列网格) │ +│ card 1 (80ms delay) → 2 → 3 │ +│ card 4 → 5 → 6 (row 2) │ +├──────────────────────────────────────┤ +│ 技术规格 / 应用场景 │ +│ fade-up │ +├──────────────────────────────────────┤ +│ CTA (fade-up) │ +└──────────────────────────────────────┘ +``` + +--- + +## 九、应用场景案例 + +### 首页 Hero 设计 + +``` +┌─────────────── backdrop-blur ──────────┐ +│ │ +│ 聚算成力，智绘未来 │ +│ 从芯到云，一站贯通 │ +│ │ +│ [探索业务] [了解公司] │ +│ ↑ shadow ↑ ghost │ +│ │ +│ (背景: 暗色淡蓝渐变 + 浮动光晕粒子) │ +└─────────────────────────────────────────┘ +``` + +背景效果： +- 深蓝到黑的渐变基底 +- 2-3 个半透明光晕圆（absolute + blur-3xl），缓慢浮动（CSS animation 20s infinite alternate） +- 玻璃面板承载标题文字 +- 主按钮有悬浮阴影，悬停时阴影加深 + +--- + +## 十、实施优先级 + +| Phase | 内容 | 预估 | +|:----:|:----|:----:| +| 0 | 更新 tailwind.config（阴影/颜色/字体），globals.css（基础/动画） | 15min | +| 1 | **导航栏** + 页脚（最全局组件） | 20min | +| 2 | **产品中心页**（重点页面，先出效果） | 30min | +| 3 | 业务概览 + 子页面（模板化，依次实现） | 45min | +| 4 | 公司介绍（时间轴 + 入场动画） | 30min | +| 5 | 企业动态 + 联系我们 | 20min | +| 6 | 首页 Hero + 动画打磨 | 30min | +| 7 | 暗色模式验证 + 动画 `prefers-reduced-motion` | 15min | + +--- + +## 十一、设计决策记录 + +| 决策 | 选择 | 理由 | +|:----|:----|:-----| +| 阴影 vs 扁平 | **三层阴影系统** | 用户要求"立体感"+"阴影层次" | +| 动画复杂度 | **滚动触发 + hover 微交互** | 避免过度动画导致"AI 生成感" | +| 玻璃态范围 | **仅 Hero + 特殊区块** | 全站玻璃态性能开销大，限定使用 | +| 字体 | Plus Jakarta Sans | 单字重体系简洁，B2B 科技感 | +| 主色 | sky-700（非 blue-600） | 更沉稳专业，与 navy slate 更协调 | +| 渐变使用 | **禁用** | 纯平色 + 阴影搭建立体感，不依赖渐变 | diff --git a/src/package.json b/src/package.json index 8cbc9fa..715f113 100644 --- a/src/package.json +++ b/src/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "private": true, "scripts": { - "dev": "NODE_OPTIONS='--max-old-space-size=2048' next dev --port 5173", + "dev": "NODE_OPTIONS='--max-old-space-size=2048' next dev --port 6173", "build": "next build", "start": "next start", "lint": "next lint" diff --git a/src/src/app/about/page.tsx b/src/src/app/about/page.tsx index e8dd51c..6bb95b5 100644 --- a/src/src/app/about/page.tsx +++ b/src/src/app/about/page.tsx @@ -14,7 +14,7 @@ export default function AboutPage() { {/* Page Header */}

- {tr.about.h1a}{tr.about.h1b} + {tr.about.h1a}{tr.about.h1b}

{tr.about.subtitle} @@ -30,27 +30,28 @@ export default function AboutPage() {

{tr.about.p1}

{tr.about.p2}

{tr.about.p3}

+

{tr.about.p4}

-
+

{tr.about.c1Title}

{tr.about.c1Desc}

-
- +
+

{tr.about.c2Title}

{tr.about.c2Desc}

-
- +
+

{tr.about.c3Title}

{tr.about.c3Desc}

-
- +
+

{tr.about.c4Title}

{tr.about.c4Desc}

@@ -59,7 +60,7 @@ export default function AboutPage() { {/* Mission & Vision */} -
+
@@ -81,25 +82,39 @@ export default function AboutPage() {

{tr.about.timelineSubtitle}

-
-
+
+ {/* Vertical connecting line */} +
-
+
{tr.about.milestones.map((milestone, index) => ( -
-
-
-
-
-
{milestone.date}
-

{milestone.title}

-

{milestone.desc}

-
+
+ {/* Diamond marker */} +
+
+ + {/* Content row */} +
+
+ {milestone.date} +
+
+

+ {milestone.title} +

+

+ {milestone.desc} +

@@ -109,11 +124,11 @@ export default function AboutPage() {
{/* Team Section */} -
+

{tr.about.teamTitle}

{tr.about.teamSubtitle}

-
+

{tr.about.teamPlaceholder}

diff --git a/src/src/app/business/cloud-platform/page.tsx b/src/src/app/business/cloud-platform/page.tsx index 43e8be2..5f69cbf 100644 --- a/src/src/app/business/cloud-platform/page.tsx +++ b/src/src/app/business/cloud-platform/page.tsx @@ -1,7 +1,7 @@ 'use client' import Link from 'next/link' -import { ArrowRight, Cloud, Layers, Boxes, Gauge, Lock, Workflow } from 'lucide-react' +import { ArrowRight, Cloud, Layers, Boxes, Gauge, Lock, Workflow, CheckCircle } from 'lucide-react' import { useApp } from '@/context/AppContext' import { t } from '@/lib/translations' @@ -14,139 +14,138 @@ export default function CloudPlatformPage() {
{/* Page Header */} -
-
- - {cp.badge} -
-

- {cp.h1a}{cp.h1b} +
+
+

+ {cp.h1a}{cp.h1b}

-

{cp.subtitle}

+

{cp.subtitle}

- {/* Platform Highlights */} -
-
-
-
{cp.s1Value}
-
{cp.s1Label}
-

{cp.s1Sub}

-
-
-
{cp.s2Value}
-
{cp.s2Label}
-

{cp.s2Sub}

-
-
-
{cp.s3Value}
-
{cp.s3Label}
-

{cp.s3Sub}

-
+ {/* Key Highlights */} +
+
+ {[cp.s1Value, cp.s2Value, cp.s3Value].map((val, idx) => ( +
+
{val}
+
+ {[cp.s1Label, cp.s2Label, cp.s3Label][idx]} +
+

+ {[cp.s1Sub, cp.s2Sub, cp.s3Sub][idx]} +

+
+ ))}
{/* Core Features */} -
-
-

{cp.coreTitle}

-

{cp.coreSubtitle}

+
+
+
+

{cp.coreTitle}

+

{cp.coreSubtitle}

-
+
{[ - { icon: , grad: 'from-purple-500 to-pink-400', title: cp.f1Title, desc: cp.f1Desc }, - { icon: , grad: 'from-blue-500 to-cyan-400', title: cp.f2Title, desc: cp.f2Desc }, - { icon: , grad: 'from-amber-500 to-orange-400', title: cp.f3Title, desc: cp.f3Desc }, - { icon: , grad: 'from-cyan-500 to-blue-400', title: cp.f4Title, desc: cp.f4Desc }, - { icon: , grad: 'from-green-500 to-emerald-400', title: cp.f5Title, desc: cp.f5Desc }, - { icon: , grad: 'from-pink-500 to-rose-400', title: cp.f6Title, desc: cp.f6Desc }, + { icon: , title: cp.f1Title, desc: cp.f1Desc }, + { icon: , title: cp.f2Title, desc: cp.f2Desc }, + { icon: , title: cp.f3Title, desc: cp.f3Desc }, + { icon: , title: cp.f4Title, desc: cp.f4Desc }, + { icon: , title: cp.f5Title, desc: cp.f5Desc }, + { icon: , title: cp.f6Title, desc: cp.f6Desc }, ].map((f, idx) => ( -
-
- {f.icon} +
+
+
+
+ {f.icon} +
+

{f.title}

+

{f.desc}

-

{f.title}

-

{f.desc}

))}
{/* AI Toolchain */} -
-
-

{cp.toolTitle}

-
- {[ - { 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) => ( -
-

{section.title}

-
    - {section.items.map((item, iIdx) => ( -
  • - ✓ - {item} -
    • - ))} -
-
- ))} -
+
+
+
+

{cp.toolTitle}

+
+
+ {[ + { title: cp.t1Title, items: [cp.t1i1, cp.t1i2, cp.t1i3] }, + { title: cp.t2Title, items: [cp.t2i1, cp.t2i2, cp.t2i3] }, + { title: cp.t3Title, items: [cp.t3i1, cp.t3i2, cp.t3i3] }, + { title: cp.t4Title, items: [cp.t4i1, cp.t4i2, cp.t4i3] }, + ].map((section, idx) => ( +
+

{section.title}

+
    + {section.items.map((item, iIdx) => ( +
  • + + {item} +
    • + ))} +
+
+ ))}
{/* Use Cases */} -
-
-

{cp.useCaseTitle}

-

{cp.useCaseSubtitle}

+
+
+
+

{cp.useCaseTitle}

+

{cp.useCaseSubtitle}

-
+
{[ { 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) => ( -
-

{uc.title}

-

{uc.desc}

-
+
+

{uc.title}

+

{uc.desc}

+
    {uc.items.map((item, iIdx) => ( -
    -
    +
  • + {item} -
    • + ))} -
+
))}
- {/* CTA Section */} -
-

{cp.ctaTitle}

-

{cp.ctaSubtitle}

+ {/* CTA */} +
+

{cp.ctaTitle}

+

{cp.ctaSubtitle}

{cp.ctaBtn1} - + {cp.ctaBtn2} diff --git a/src/src/app/business/infrastructure/page.tsx b/src/src/app/business/infrastructure/page.tsx index 7b0a949..c24fb19 100644 --- a/src/src/app/business/infrastructure/page.tsx +++ b/src/src/app/business/infrastructure/page.tsx @@ -14,117 +14,114 @@ export default function InfrastructurePage() {
{/* Page Header */} -
-
- - {i.badge} +
+
+ + {i.badge}
-

- {i.h1a}{i.h1b} +
+

+ {i.h1a}{i.h1b}

-

{i.subtitle}

+

{i.subtitle}

{/* Key Stats */} -
-
-
-
1440
-
{i.s1Label}
-

{i.s1Sub}

-
-
-
H800
-
{i.s2Label}
-

{i.s2Sub}

-
-
-
{i.s3Value}
-
{i.s3Label}
-

{i.s3Sub}

-
+
+
+ {[i.s1Value, i.s2Value, i.s3Value].map((val, idx) => ( +
+
{val}
+
+ {[i.s1Label, i.s2Label, i.s3Label][idx]} +
+

+ {[i.s1Sub, i.s2Sub, i.s3Sub][idx]} +

+
+ ))}
{/* Core Features */} -
-
-

{i.coreTitle}

-

{i.coreSubtitle}

+
+
+
+

{i.coreTitle}

+

{i.coreSubtitle}

-
+
{[ - { icon: , grad: 'from-blue-500 to-cyan-400', title: i.f1Title, desc: i.f1Desc }, - { icon: , grad: 'from-purple-500 to-pink-400', title: i.f2Title, desc: i.f2Desc }, - { icon: , grad: 'from-amber-500 to-orange-400', title: i.f3Title, desc: i.f3Desc }, - { icon: , grad: 'from-cyan-500 to-blue-400', title: i.f4Title, desc: i.f4Desc }, - { icon: , grad: 'from-green-500 to-emerald-400', title: i.f5Title, desc: i.f5Desc }, - { icon: , grad: 'from-pink-500 to-rose-400', title: i.f6Title, desc: i.f6Desc }, + { icon: , title: i.f1Title, desc: i.f1Desc }, + { icon: , title: i.f2Title, desc: i.f2Desc }, + { icon: , title: i.f3Title, desc: i.f3Desc }, + { icon: , title: i.f4Title, desc: i.f4Desc }, + { icon: , title: i.f5Title, desc: i.f5Desc }, + { icon: , title: i.f6Title, desc: i.f6Desc }, ].map((f, idx) => ( -
-
- {f.icon} +
+
+
+
+ {f.icon} +
+

{f.title}

+

{f.desc}

-

{f.title}

-

{f.desc}

))}
{/* Technical Specs */} -
-
-

{i.specTitle}

-
-
- {[{ title: i.sp1Title, desc: i.sp1Desc }, { title: i.sp2Title, desc: i.sp2Desc }, { title: i.sp3Title, desc: i.sp3Desc }].map((s, idx) => ( -
-
-
-

{s.title}

-

{s.desc}

-
-
- ))} +
+
+
+

{i.specTitle}

+
+
+ {[ + { title: i.sp1Title, desc: i.sp1Desc }, + { title: i.sp2Title, desc: i.sp2Desc }, + { title: i.sp3Title, desc: i.sp3Desc }, + { title: i.sp4Title, desc: i.sp4Desc }, + { title: i.sp5Title, desc: i.sp5Desc }, + { title: i.sp6Title, desc: i.sp6Desc }, + ].map((s, idx) => ( +
+
+
+ {s.title} + — {s.desc} +
-
- {[{ title: i.sp4Title, desc: i.sp4Desc }, { title: i.sp5Title, desc: i.sp5Desc }, { title: i.sp6Title, desc: i.sp6Desc }].map((s, idx) => ( -
-
-
-

{s.title}

-

{s.desc}

-
-
- ))} -
-
+ ))}
{/* Use Cases */}
-
-

{i.useCaseTitle}

-

{i.useCaseSubtitle}

+
+
+

{i.useCaseTitle}

+

{i.useCaseSubtitle}

-
+
{[ { 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) => ( -
-

{uc.title}

-

{uc.desc}

-
    +
    +

    {uc.title}

    +

    {uc.desc}

    +
      {uc.items.map((item, iIdx) => ( -
    • - • +
    • + {item}
      • ))} @@ -135,15 +132,15 @@ export default function InfrastructurePage() {
{/* CTA */} -
-

{i.ctaTitle}

-

{i.ctaSubtitle}

+
+

{i.ctaTitle}

+

{i.ctaSubtitle}

{i.ctaBtn} - +
diff --git a/src/src/app/business/page.tsx b/src/src/app/business/page.tsx index c23f30b..6ff0107 100644 --- a/src/src/app/business/page.tsx +++ b/src/src/app/business/page.tsx @@ -13,101 +13,76 @@ export default function BusinessPage() {
{/* Page Header */} -
-

- {tr.business.h1} +
+
+

+ {tr.business.h1}

-

+

{tr.business.subtitle}

{/* Business Cards */} -
- -
-
- +
+ {[ + { href: '/business/infrastructure', icon: Cpu, title: tr.business.infraTitle, desc: tr.business.infraDesc, cta: tr.business.infraCta }, + { href: '/business/token-factory', icon: Factory, title: tr.business.tokenTitle, desc: tr.business.tokenDesc, cta: tr.business.tokenCta }, + { href: '/business/cloud-platform', icon: Cloud, title: tr.business.cloudTitle, desc: tr.business.cloudDesc, cta: tr.business.cloudCta }, + ].map((card) => ( + +
+
+
+ +
+

{card.title}

+

{card.desc}

+
+ {card.cta} + +
-

- {tr.business.infraTitle} -

-

{tr.business.infraDesc}

-
- {tr.business.infraCta} - -
-
- - - -
-
- -
-

- {tr.business.tokenTitle} -

-

{tr.business.tokenDesc}

-
- {tr.business.tokenCta} - -
-
- - - -
-
- -
-

- {tr.business.cloudTitle} -

-

{tr.business.cloudDesc}

-
- {tr.business.cloudCta} - -
-
- + + ))}
{/* Business Value */} -
-
-

{tr.business.valueTitle}

-
- {[ - { 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) => ( -
-
- {v.num} -
-
-

{v.title}

-

{v.desc}

-
+
+
+
+

{tr.business.valueTitle}

+
+
+ {[ + { title: tr.business.v1Title, desc: tr.business.v1Desc }, + { title: tr.business.v2Title, desc: tr.business.v2Desc }, + { title: tr.business.v3Title, desc: tr.business.v3Desc }, + { title: tr.business.v4Title, desc: tr.business.v4Desc }, + ].map((v, i) => ( +
+
+ {i + 1}
- ))} -
+
+

{v.title}

+

{v.desc}

+
+
+ ))}
{/* CTA */} -
-

{tr.business.ctaTitle}

-

{tr.business.ctaSubtitle}

+
+

{tr.business.ctaTitle}

+

{tr.business.ctaSubtitle}

{tr.business.ctaBtn} - +
diff --git a/src/src/app/business/token-factory/page.tsx b/src/src/app/business/token-factory/page.tsx index eeec0c2..a00e593 100644 --- a/src/src/app/business/token-factory/page.tsx +++ b/src/src/app/business/token-factory/page.tsx @@ -14,43 +14,36 @@ export default function TokenFactoryPage() {
{/* Page Header */} -
-
- - {tf.badge} -
-

- {tf.h1a}{tf.h1b} +
+
+

+ {tf.h1a}{tf.h1b}

-

{tf.subtitle}

+

{tf.subtitle}

- {/* Key Advantages */} -
-
-
-
{tf.s1Value}
-
{tf.s1Label}
-

{tf.s1Sub}

-
-
-
{tf.s2Value}
-
{tf.s2Label}
-

{tf.s2Sub}

-
-
-
{tf.s3Value}
-
{tf.s3Label}
-

{tf.s3Sub}

-
+ {/* Key Stats */} +
+
+ {[tf.s1Value, tf.s2Value, tf.s3Value].map((val, idx) => ( +
+
{val}
+
+ {[tf.s1Label, tf.s2Label, tf.s3Label][idx]} +
+

+ {[tf.s1Sub, tf.s2Sub, tf.s3Sub][idx]} +

+
+ ))}
- {/* What is TaaS */} -
-
-

{tf.taasTitle}

-
+ {/* What is AI TaaS */} +
+
+

{tf.taasTitle}

+

{tf.tp1}

{tf.tp2}

{tf.tp3}

@@ -59,78 +52,84 @@ export default function TokenFactoryPage() {
{/* Core Features */} -
-
-

{tf.coreTitle}

-

{tf.coreSubtitle}

+
+
+
+

{tf.coreTitle}

+

{tf.coreSubtitle}

-
+
{[ - { icon: , grad: 'from-amber-500 to-orange-400', title: tf.f1Title, desc: tf.f1Desc }, - { icon: , grad: 'from-blue-500 to-cyan-400', title: tf.f2Title, desc: tf.f2Desc }, - { icon: , grad: 'from-purple-500 to-pink-400', title: tf.f3Title, desc: tf.f3Desc }, - { icon: , grad: 'from-cyan-500 to-blue-400', title: tf.f4Title, desc: tf.f4Desc }, - { icon: , grad: 'from-green-500 to-emerald-400', title: tf.f5Title, desc: tf.f5Desc }, - { icon: , grad: 'from-pink-500 to-rose-400', title: tf.f6Title, desc: tf.f6Desc }, + { icon: , title: tf.f1Title, desc: tf.f1Desc }, + { icon: , title: tf.f2Title, desc: tf.f2Desc }, + { icon: , title: tf.f3Title, desc: tf.f3Desc }, + { icon: , title: tf.f4Title, desc: tf.f4Desc }, + { icon: , title: tf.f5Title, desc: tf.f5Desc }, + { icon: , title: tf.f6Title, desc: tf.f6Desc }, ].map((f, idx) => ( -
-
- {f.icon} +
+
+
+
+ {f.icon} +
+

{f.title}

+

{f.desc}

-

{f.title}

-

{f.desc}

))}
{/* Service Process */} -
-
-

{tf.processTitle}

-

{tf.processSubtitle}

+
+
+
+

{tf.processTitle}

+

{tf.processSubtitle}

{[ - { 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 }, + { num: '1', title: tf.st1Title, desc: tf.st1Desc }, + { num: '2', title: tf.st2Title, desc: tf.st2Desc }, + { num: '3', title: tf.st3Title, desc: tf.st3Desc }, + { num: '4', title: tf.st4Title, desc: tf.st4Desc }, ].map((step) => ( -
-
+
+
{step.num}
-

{step.title}

-

{step.desc}

+

{step.title}

+

{step.desc}

))}
{/* Use Cases */} -
-
-

{tf.useCaseTitle}

-

{tf.useCaseSubtitle}

+
+
+
+

{tf.useCaseTitle}

+

{tf.useCaseSubtitle}

-
+
{[ { 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) => ( -
-

{uc.title}

-

{uc.desc}

-
    +
    +

    {uc.title}

    +

    {uc.desc}

    +
      {uc.items.map((item, iIdx) => ( -
    • - • +
    • + {item}
      • ))} @@ -140,23 +139,23 @@ export default function TokenFactoryPage() {
- {/* CTA Section */} -
-

{tf.ctaTitle}

-

{tf.ctaSubtitle}

+ {/* CTA */} +
+

{tf.ctaTitle}

+

{tf.ctaSubtitle}

{tf.ctaBtn1} - + {tf.ctaBtn2} diff --git a/src/src/app/console/page.tsx b/src/src/app/console/page.tsx index 8cf53d4..d74b738 100644 --- a/src/src/app/console/page.tsx +++ b/src/src/app/console/page.tsx @@ -1,7 +1,7 @@ 'use client' import Link from 'next/link' -import { ArrowRight, Cloud, Factory, ExternalLink } from 'lucide-react' +import { Cloud, Factory, ExternalLink, FileText, LifeBuoy, PlayCircle } from 'lucide-react' import { useApp } from '@/context/AppContext' import { t } from '@/lib/translations' @@ -14,121 +14,110 @@ export default function ConsolePage() {
{/* Page Header */} -
-

- {co.h1} +
+
+

+ {co.h1}

-

{co.subtitle}

+

{co.subtitle}

- {/* Console Cards */} -
+ {/* Product Cards */} +
{/* Cloud Platform */} -
-
-
-
- +
+
+
+
+
- -

- {co.cloudTitle} -

- -

{co.cloudDesc}

- -
+

{co.cloudTitle}

+

{co.cloudDesc}

+
{[co.cloudF1, co.cloudF2, co.cloudF3].map((f) => ( -
-
- {f} +
+
+ {f}
))}
- {co.cloudBtn} - +
{/* Token Factory */} -
-
-
-
- +
+
+
+
+
- -

- {co.tokenTitle} -

- -

{co.tokenDesc}

- -
+

{co.tokenTitle}

+

{co.tokenDesc}

+
{[co.tokenF1, co.tokenF2, co.tokenF3].map((f) => ( -
-
- {f} +
+
+ {f}
))}
- {co.tokenBtn} - +
{/* Help Section */} -
-
-

{co.helpTitle}

- -
- {[ - { emoji: '📚', title: co.helpDoc, desc: co.helpDocDesc }, - { emoji: '💬', title: co.helpSupport, desc: co.helpSupportDesc }, - { emoji: '🎓', title: co.helpTutorial, desc: co.helpTutorialDesc }, - ].map((h) => ( -
-
{h.emoji}
-

{h.title}

-

{h.desc}

+
+
+ {[ + { icon: FileText, title: co.helpDoc, desc: co.helpDocDesc }, + { icon: LifeBuoy, title: co.helpSupport, desc: co.helpSupportDesc }, + { icon: PlayCircle, title: co.helpTutorial, desc: co.helpTutorialDesc }, + ].map((h) => ( +
+
+
- ))} -
+

{h.title}

+

{h.desc}

+
+ ))} +
-
- - {co.helpBtn} - - -
+
+ + {co.helpBtn} +
- {/* Additional Info */} -
-

{co.noAccount}

- + {/* Trial CTA */} +
+

{co.noAccount}

+ {co.applyTrial} →
diff --git a/src/src/app/contact/page.tsx b/src/src/app/contact/page.tsx index b4e26d7..db7cf5a 100644 --- a/src/src/app/contact/page.tsx +++ b/src/src/app/contact/page.tsx @@ -40,7 +40,7 @@ export default function ContactPage() { {/* Page Header */}

- {c.h1} + {c.h1}

{c.subtitle}

@@ -51,8 +51,8 @@ export default function ContactPage() {

{c.infoTitle}

-
-
+
+
@@ -64,8 +64,8 @@ export default function ContactPage() {
-
-
+
+
@@ -77,8 +77,8 @@ export default function ContactPage() {
-
-
+
+
@@ -90,7 +90,7 @@ export default function ContactPage() {
{/* Quick Links */} -
+

{c.quickTitle}

@@ -127,7 +127,7 @@ export default function ContactPage() {
@@ -139,7 +139,7 @@ export default function ContactPage() {
@@ -152,7 +152,7 @@ export default function ContactPage() {
@@ -163,7 +163,7 @@ export default function ContactPage() {
@@ -176,7 +176,7 @@ export default function ContactPage() {