chore(cms): 清理旧版 CMS 客户端代码，完成 CMS 迁移
- 删除已废弃的 CMS 客户端代码：mock-data、registry、client、storage、renderers 等 - 删除已归档的 CMS 页面组件：home-content-cms、news-content-cms、services-content-cms 等 - 删除 CMS Studio 页面 - 将 CaseStudyData 类型移至 types.ts，统一类型定义 - 移除 content-types 对 registry 的依赖，内联 ContentTypeConfig - 修复测试文件中对已删除 mock-data 的引用 - 添加 site-config 和 navigation 内容模型种子数据 - 更新 revalidate API 路由使用 CONTENT_TYPE_CONFIGS 共修改 34 个文件，+132 / -5993 行
This commit is contained in:
张翔
@@ -4,7 +4,7 @@ import { notFound } from 'next/navigation';
|
||||
import CaseDetailPage from '@/components/sections/case-detail-page';
|
||||
import { ScrollProgress } from '@/components/ui/scroll-progress';
|
||||
import type { ContentItem } from '@/lib/cms/types';
|
||||
import type { CaseStudyData } from '@/lib/cms/mock-data';
|
||||
import type { CaseStudyData } from '@/lib/cms/types';
|
||||
|
||||
interface CaseDetailClientProps {
|
||||
item: ContentItem;
|
||||
|
||||
@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation';
|
||||
import { CaseDetailClient } from './client';
|
||||
import { getPublishedItemBySlug, getAllPublishedSlugs } from '@/lib/cms/data-server';
|
||||
import { COMPANY_INFO } from '@/lib/constants/company';
|
||||
import type { CaseStudyData } from '@/lib/cms/mock-data';
|
||||
import type { CaseStudyData } from '@/lib/cms/types';
|
||||
import type { Metadata } from 'next';
|
||||
|
||||
interface CaseDetailPageProps {
|
||||
|
||||
@@ -1,153 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { initCms } from '@/lib/cms';
|
||||
import { ZoneManager } from '@/components/cms/ZoneManager';
|
||||
import ContentEditor from '@/components/cms/ContentEditor';
|
||||
|
||||
type ViewMode = 'content' | 'zones';
|
||||
|
||||
export default function CmsStudioPage() {
|
||||
const [ready, setReady] = useState(false);
|
||||
const [view, setView] = useState<ViewMode>('zones');
|
||||
|
||||
useEffect(() => {
|
||||
initCms();
|
||||
setReady(true);
|
||||
}, []);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="h-screen bg-ink flex items-center justify-center">
|
||||
<div className="text-white/50">加载中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen flex bg-ink text-white overflow-hidden" data-theme="dark">
|
||||
<aside className="w-56 flex-shrink-0 border-r border-white/[0.08] bg-ink-light flex flex-col">
|
||||
<div className="p-4 border-b border-white/[0.08]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand to-brand/70 flex items-center justify-center text-white font-bold text-sm">
|
||||
N
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">Novalon CMS</div>
|
||||
<div className="text-xs text-white/40">内容管理控制台</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 overflow-y-auto p-3 space-y-1">
|
||||
<div className="px-3 py-2 text-xs text-white/40 font-medium uppercase tracking-wider">
|
||||
管理模式
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setView('zones')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors text-left ${
|
||||
view === 'zones'
|
||||
? 'bg-brand/20 text-brand font-medium'
|
||||
: 'text-white/60 hover:bg-white/[0.05] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<span className="text-lg">🎯</span>
|
||||
<span>内容区管理</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setView('content')}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors text-left ${
|
||||
view === 'content'
|
||||
? 'bg-brand/20 text-brand font-medium'
|
||||
: 'text-white/60 hover:bg-white/[0.05] hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<span className="text-lg">📄</span>
|
||||
<span>内容管理</span>
|
||||
</button>
|
||||
|
||||
<div className="my-3 border-t border-white/[0.06]" />
|
||||
|
||||
<div className="px-3 py-2 text-xs text-white/40 font-medium uppercase tracking-wider">
|
||||
快捷入口
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white/60 hover:bg-white/[0.05] hover:text-white transition-colors"
|
||||
>
|
||||
<span className="text-lg">🏠</span>
|
||||
<span>查看首页</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/cases"
|
||||
target="_blank"
|
||||
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white/60 hover:bg-white/[0.05] hover:text-white transition-colors"
|
||||
>
|
||||
<span className="text-lg">📁</span>
|
||||
<span>案例中心</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div className="p-3 border-t border-white/[0.08]">
|
||||
<div className="px-3 py-2 rounded-lg bg-white/[0.03] text-xs text-white/40">
|
||||
<div className="font-medium text-white/60 mb-1">💡 使用提示</div>
|
||||
<div className="leading-relaxed">
|
||||
{view === 'zones'
|
||||
? '拖拽内容排序，配置布局，底部实时预览效果'
|
||||
: '选择内容类型，编辑字段，右侧预览渲染效果'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 flex flex-col min-w-0">
|
||||
<header className="h-14 flex-shrink-0 border-b border-white/[0.08] bg-ink-light flex items-center justify-between px-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-base font-semibold text-white">
|
||||
{view === 'zones' ? '内容区管理' : '内容管理'}
|
||||
</h1>
|
||||
<span className="text-xs text-white/40">
|
||||
{view === 'zones' ? '配置页面内容区块' : '管理所有内容条目'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex bg-white/[0.05] rounded-lg p-0.5">
|
||||
<button
|
||||
onClick={() => setView('zones')}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
view === 'zones'
|
||||
? 'bg-white/[0.1] text-white'
|
||||
: 'text-white/50 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
内容区
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setView('content')}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
view === 'content'
|
||||
? 'bg-white/[0.1] text-white'
|
||||
: 'text-white/50 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
内容条目
|
||||
</button>
|
||||
</div>
|
||||
<button className="px-4 py-1.5 bg-brand hover:bg-brand-hover text-white text-xs font-medium rounded-lg transition-colors">
|
||||
保存更改
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
{view === 'zones' ? <ZoneManager /> : <ContentEditor />}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,195 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback, useMemo, createElement } from 'react';
|
||||
import {
|
||||
initCms,
|
||||
getItemRenderer,
|
||||
ContentZoneRenderer,
|
||||
getContentZone,
|
||||
getContentItems,
|
||||
} from '@/lib/cms';
|
||||
import { getMockHomeHeroBanner } from '@/lib/cms/mock-home';
|
||||
import type { ContentItem, ContentZone } from '@/lib/cms';
|
||||
|
||||
function SectionHeading({ eyebrow, title, description, align = 'center' }: {
|
||||
eyebrow?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
align?: 'center' | 'left';
|
||||
}) {
|
||||
return (
|
||||
<div className={`mb-12 md:mb-16 ${align === 'center' ? 'text-center' : ''}`}>
|
||||
{eyebrow && (
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand/10 text-brand text-xs font-medium mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand" />
|
||||
{eyebrow}
|
||||
</div>
|
||||
)}
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
{title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p
|
||||
className="mt-4 text-lg text-white/50 max-w-2xl leading-relaxed"
|
||||
style={{ marginInline: align === 'center' ? 'auto' : undefined }}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentCms() {
|
||||
const [ready, setReady] = useState(false);
|
||||
const [hero, setHero] = useState<ContentItem | null>(null);
|
||||
const [statsZone, setStatsZone] = useState<ContentZone | null>(null);
|
||||
const [servicesZone, setServicesZone] = useState<ContentZone | null>(null);
|
||||
const [solutionsZone, setSolutionsZone] = useState<ContentZone | null>(null);
|
||||
const [casesZone, setCasesZone] = useState<ContentZone | null>(null);
|
||||
const [newsZone, setNewsZone] = useState<ContentZone | null>(null);
|
||||
|
||||
const loadData = useCallback(() => {
|
||||
const heroItems = getContentItems('hero-banner');
|
||||
setHero(heroItems.length > 0 ? heroItems[0]! : getMockHomeHeroBanner());
|
||||
setStatsZone(getContentZone('home-stats'));
|
||||
setServicesZone(getContentZone('home-services'));
|
||||
setSolutionsZone(getContentZone('home-solutions'));
|
||||
setCasesZone(getContentZone('home-cases'));
|
||||
setNewsZone(getContentZone('home-news'));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
initCms();
|
||||
loadData();
|
||||
setReady(true);
|
||||
|
||||
const handleStorage = (e: StorageEvent) => {
|
||||
if (e.key === 'novalon-cms-data') {
|
||||
loadData();
|
||||
}
|
||||
};
|
||||
window.addEventListener('storage', handleStorage);
|
||||
|
||||
const handleCmsUpdate = () => loadData();
|
||||
window.addEventListener('cms-updated', handleCmsUpdate);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleStorage);
|
||||
window.removeEventListener('cms-updated', handleCmsUpdate);
|
||||
};
|
||||
}, [loadData]);
|
||||
|
||||
const HeroRenderer = useMemo(
|
||||
() => (hero ? getItemRenderer(hero.modelCode) : null),
|
||||
[hero]
|
||||
);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="min-h-screen bg-ink flex items-center justify-center">
|
||||
<div className="text-white/50">加载中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden" data-theme="dark">
|
||||
{hero && HeroRenderer && createElement(HeroRenderer, { item: hero })}
|
||||
|
||||
<section className="relative py-16 sm:py-20 md:py-28 overflow-hidden bg-ink-light">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
eyebrow="数据说话"
|
||||
title="用数字证明实力"
|
||||
description="我们的价值，体现在每一个可量化的成果中。"
|
||||
/>
|
||||
{statsZone && <ContentZoneRenderer zone={statsZone} />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-20 sm:py-28 md:py-36 overflow-hidden bg-ink">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
eyebrow="核心服务"
|
||||
title="端到端的数字化服务能力"
|
||||
description="从战略咨询到技术实施，从平台建设到运营运维，覆盖企业数字化转型的全生命周期。"
|
||||
/>
|
||||
{servicesZone && <ContentZoneRenderer zone={servicesZone} />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-20 sm:py-28 md:py-36 overflow-hidden bg-ink-light">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<SectionHeading
|
||||
eyebrow="解决方案"
|
||||
title="行业场景化解决方案"
|
||||
description="深入理解不同行业的业务特性，提供量身定制的数字化解决方案。"
|
||||
/>
|
||||
{solutionsZone && <ContentZoneRenderer zone={solutionsZone} />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-20 sm:py-28 md:py-36 overflow-hidden bg-ink">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between mb-12 md:mb-16">
|
||||
<SectionHeading
|
||||
eyebrow="客户案例"
|
||||
title="成果验证 · 客户信赖"
|
||||
description="每一个项目，都是我们与客户共同成长的见证。"
|
||||
align="left"
|
||||
/>
|
||||
<a href="/cases" className="inline-flex items-center gap-2 text-brand font-medium hover:gap-3 transition-all">
|
||||
查看全部案例
|
||||
<span>→</span>
|
||||
</a>
|
||||
</div>
|
||||
{casesZone && <ContentZoneRenderer zone={casesZone} />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-20 sm:py-28 md:py-36 overflow-hidden bg-ink-light">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between mb-12 md:mb-16">
|
||||
<SectionHeading
|
||||
eyebrow="新闻动态"
|
||||
title="最新动态"
|
||||
description="了解公司最新动态、行业洞察和技术分享。"
|
||||
align="left"
|
||||
/>
|
||||
<a href="/news" className="inline-flex items-center gap-2 text-brand font-medium hover:gap-3 transition-all">
|
||||
查看全部
|
||||
<span>→</span>
|
||||
</a>
|
||||
</div>
|
||||
{newsZone && <ContentZoneRenderer zone={newsZone} />}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-20 sm:py-28 md:py-36 overflow-hidden bg-ink">
|
||||
<div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
|
||||
<SectionHeading
|
||||
eyebrow="准备好开始了吗"
|
||||
title="开启您的数字化转型之旅"
|
||||
description="无论您处于数字化的哪个阶段，我们都能提供量身定制的解决方案。"
|
||||
/>
|
||||
<div className="mt-12 flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 px-8 py-4 bg-brand hover:bg-brand-hover text-white font-medium rounded-xl transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand/20"
|
||||
>
|
||||
免费咨询
|
||||
<span>→</span>
|
||||
</a>
|
||||
<a
|
||||
href="/solutions"
|
||||
className="inline-flex items-center gap-2 px-8 py-4 bg-white/[0.05] hover:bg-white/[0.1] text-white font-medium rounded-xl border border-white/[0.1] hover:border-white/[0.2] transition-all duration-300"
|
||||
>
|
||||
了解方案
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,183 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { initCms, getItemRenderer } from '@/lib/cms';
|
||||
import type { ContentItem } from '@/lib/cms';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
|
||||
const categories = ['全部', '公司新闻', '研发动态'];
|
||||
const ITEMS_PER_PAGE = 9;
|
||||
|
||||
function newsToContentItem(news: unknown, index: number): ContentItem {
|
||||
const n = news as Record<string, unknown>;
|
||||
return {
|
||||
id: String(n.id),
|
||||
modelId: 'news',
|
||||
modelCode: 'news',
|
||||
title: String(n.title),
|
||||
slug: String(n.id),
|
||||
status: 'published',
|
||||
version: 1,
|
||||
sortOrder: index,
|
||||
data: n,
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
updatedAt: '2024-01-01T00:00:00Z',
|
||||
publishedAt: '2024-01-01T00:00:00Z',
|
||||
createdBy: 'system',
|
||||
updatedBy: 'system',
|
||||
};
|
||||
}
|
||||
|
||||
export default function NewsContentCms() {
|
||||
const [ready, setReady] = useState(false);
|
||||
const [items, setItems] = useState<ContentItem[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState('全部');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
initCms();
|
||||
setItems(NEWS.map(newsToContentItem));
|
||||
setReady(true);
|
||||
}, []);
|
||||
|
||||
const filteredItems = useMemo(() => {
|
||||
return items.filter((item) => {
|
||||
const data = item.data as Record<string, unknown>;
|
||||
const category = (data.category as string) || '';
|
||||
const matchesCategory = selectedCategory === '全部' || category === selectedCategory;
|
||||
const matchesSearch =
|
||||
!searchQuery ||
|
||||
item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
((data.excerpt as string) || '').toLowerCase().includes(searchQuery.toLowerCase());
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
}, [items, selectedCategory, searchQuery]);
|
||||
|
||||
const totalPages = Math.ceil(filteredItems.length / ITEMS_PER_PAGE);
|
||||
const paginatedItems = filteredItems.slice(
|
||||
(currentPage - 1) * ITEMS_PER_PAGE,
|
||||
currentPage * ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [selectedCategory, searchQuery]);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="min-h-screen bg-ink flex items-center justify-center">
|
||||
<div className="text-white/50">加载中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const NewsCardRenderer = getItemRenderer('news');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden" data-theme="dark">
|
||||
<section className="relative min-h-[50vh] flex items-center overflow-hidden bg-ink pt-24">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/4 -left-32 w-96 h-96 rounded-full bg-brand/20 blur-[120px]" />
|
||||
</div>
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto px-6 lg:px-8 py-20">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/[0.05] border border-white/[0.1] text-sm text-white/70 mb-6">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
|
||||
新闻动态
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white tracking-tight leading-[1.1]">
|
||||
最新动态
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-white/60 max-w-2xl leading-relaxed">
|
||||
了解公司最新动态、行业洞察和技术分享，与我们一起成长。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-16 sm:py-20 md:py-28 overflow-hidden bg-ink-light">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6 mb-12">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
className={`px-5 py-2 text-sm font-medium rounded-xl transition-all ${
|
||||
selectedCategory === cat
|
||||
? 'bg-brand text-white'
|
||||
: 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white border border-white/[0.08]'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative w-full md:w-80">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索新闻..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-white/[0.05] border border-white/[0.1] rounded-xl text-white text-sm placeholder-white/30 focus:outline-none focus:border-brand/50 focus:ring-1 focus:ring-brand/30 transition-colors"
|
||||
/>
|
||||
<svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{paginatedItems.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{paginatedItems.map((item, i) =>
|
||||
NewsCardRenderer ? (
|
||||
<NewsCardRenderer key={item.id} item={item} index={i} variant="featured" />
|
||||
) : (
|
||||
<div key={item.id} className="p-4 border border-white/10 rounded-lg">
|
||||
{item.title}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-20 text-center">
|
||||
<div className="text-5xl mb-4 opacity-30">📭</div>
|
||||
<div className="text-white/50">暂无相关新闻</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-16 flex items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="p-2 rounded-lg bg-white/[0.05] text-white/60 hover:bg-white/[0.1] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<button
|
||||
key={page}
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className={`w-10 h-10 rounded-lg text-sm font-medium transition-colors ${
|
||||
currentPage === page
|
||||
? 'bg-brand text-white'
|
||||
: 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1]'
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="p-2 rounded-lg bg-white/[0.05] text-white/60 hover:bg-white/[0.1] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,268 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, ChangeEvent } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Search, Calendar, ArrowRight, Newspaper, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { type NewsItem } from '@/lib/constants/news';
|
||||
import { getMockItems } from '@/lib/cms/mock-data';
|
||||
|
||||
// CMS 数据源：优先使用 prop，回退到 mock-data
|
||||
function getNewsData(newsProp?: NewsItem[]): NewsItem[] {
|
||||
if (newsProp?.length) return newsProp;
|
||||
return getMockItems('news').map(
|
||||
(item) => ({ ...item.data, title: item.data.title || item.title } as unknown as NewsItem),
|
||||
);
|
||||
}
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
|
||||
const categories = ['全部', '公司新闻', '研发动态'];
|
||||
const ITEMS_PER_PAGE = 9;
|
||||
|
||||
function NewsCard({ newsItem, index }: { newsItem: NewsItem; index: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.5, delay: index * 0.08, ease: EASE_OUT }}
|
||||
>
|
||||
<a
|
||||
href={`/news/${newsItem.id}`}
|
||||
className="group relative block border border-border-primary hover:border-brand/30 bg-white transition-all duration-500 hover:-translate-y-2 overflow-hidden h-full"
|
||||
>
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />
|
||||
|
||||
{newsItem.image ? (
|
||||
<div className="aspect-video bg-bg-secondary overflow-hidden">
|
||||
<img
|
||||
src={newsItem.image}
|
||||
alt={newsItem.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-gradient-to-br from-brand/[0.08] to-bg-secondary flex items-center justify-center">
|
||||
<Newspaper className="w-12 h-12 text-brand/30" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-6 sm:p-7 lg:p-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Badge variant="outline" className="text-xs border-brand/30 text-brand">
|
||||
{newsItem.category}
|
||||
</Badge>
|
||||
<div className="flex items-center gap-1.5 text-xs text-text-muted">
|
||||
<Calendar className="w-3.5 h-3.5" />
|
||||
{newsItem.date}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg sm:text-xl font-semibold text-ink mb-3 line-clamp-2 group-hover:text-brand transition-colors duration-300 leading-snug">
|
||||
{newsItem.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-text-secondary line-clamp-3 mb-5 leading-relaxed">
|
||||
{newsItem.excerpt}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-brand text-sm font-medium">
|
||||
阅读全文
|
||||
<ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NewsContentV2({ news }: { news?: NewsItem[] }) {
|
||||
const NEWS = getNewsData(news);
|
||||
const [selectedCategory, setSelectedCategory] = useState('全部');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const filteredNews = useMemo(() => {
|
||||
return NEWS.filter((newsItem) => {
|
||||
const matchesCategory = selectedCategory === '全部' || newsItem.category === selectedCategory;
|
||||
const matchesSearch =
|
||||
newsItem.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
newsItem.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
}, [selectedCategory, searchQuery]);
|
||||
|
||||
const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
|
||||
const paginatedNews = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
return filteredNews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
||||
}, [filteredNews, currentPage]);
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const handleCategoryChange = (category: string) => {
|
||||
setSelectedCategory(category);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-ink overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[75vh] flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>News & Insights</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-[0.92] tracking-tighter mb-10 sm:mb-12 md:mb-16">
|
||||
新闻与
|
||||
<span className="block mt-4 text-brand">洞察</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<p className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed">
|
||||
{COMPANY_INFO.displayName}最新动态、产品更新与行业洞察。了解数字化趋势，把握技术脉搏。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Filter + News List Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
{/* Filters */}
|
||||
<ScrollReveal className="mb-12 sm:mb-16 space-y-6">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{categories.map((category) => (
|
||||
<Button
|
||||
key={category}
|
||||
variant={selectedCategory === category ? 'primary' : 'outline'}
|
||||
onClick={() => handleCategoryChange(category)}
|
||||
>
|
||||
{category}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-md">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-text-muted w-5 h-5 pointer-events-none" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="搜索新闻..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearchChange}
|
||||
className="pl-12 h-12 bg-white border-border-primary text-ink placeholder:text-text-muted focus:border-brand/50"
|
||||
/>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* News Grid */}
|
||||
{paginatedNews.length === 0 ? (
|
||||
<ScrollReveal>
|
||||
<div className="text-center py-24">
|
||||
<Newspaper className="w-16 h-16 text-text-muted/20 mx-auto mb-6" />
|
||||
<p className="text-xl text-text-secondary">没有找到相关新闻</p>
|
||||
<p className="mt-2 text-text-muted">试试其他关键词或分类</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
) : (
|
||||
<>
|
||||
<StaggerReveal
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8"
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{paginatedNews.map((newsItem, index) => (
|
||||
<NewsCard key={newsItem.id} newsItem={newsItem} index={index} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<ScrollReveal>
|
||||
<div className="flex justify-center items-center gap-2 mt-16">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
variant={currentPage === page ? 'primary' : 'outline'}
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(page)}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<SectionLabel className="justify-center">Get in Touch</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
想了解更多？
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-text-secondary leading-relaxed">
|
||||
无论您有合作意向还是想探讨技术趋势，我们都欢迎与您交流。
|
||||
</p>
|
||||
<div className="mt-12 flex flex-col sm:flex-row justify-center gap-4 sm:gap-6">
|
||||
<a
|
||||
href="/contact"
|
||||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
|
||||
>
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
<a
|
||||
href="/about"
|
||||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
|
||||
>
|
||||
了解公司
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -67,48 +67,6 @@ jest.mock('@/lib/constants', () => ({
|
||||
],
|
||||
}));
|
||||
|
||||
jest.mock('@/lib/cms/mock-data', () => {
|
||||
const testProduct = {
|
||||
id: 'test-product',
|
||||
title: '测试产品',
|
||||
category: '企业旗舰系列',
|
||||
categoryId: 'enterprise',
|
||||
tags: ['测试', '示例'],
|
||||
status: '研发中',
|
||||
description: '这是测试产品描述',
|
||||
overview: '这是测试产品概述',
|
||||
features: ['功能1', '功能2'],
|
||||
benefits: ['优势1', '优势2'],
|
||||
process: ['步骤1', '步骤2'],
|
||||
specs: ['规格1', '规格2'],
|
||||
};
|
||||
const testItem = {
|
||||
id: 'test-product',
|
||||
modelId: 'model-product',
|
||||
modelCode: 'product',
|
||||
title: '测试产品',
|
||||
slug: 'test-product',
|
||||
status: 'published',
|
||||
version: 1,
|
||||
sortOrder: 0,
|
||||
data: testProduct,
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
updatedAt: '2024-06-01T00:00:00Z',
|
||||
publishedAt: '2024-06-01T00:00:00Z',
|
||||
createdBy: 'system',
|
||||
updatedBy: 'system',
|
||||
};
|
||||
return {
|
||||
getMockItems: jest.fn(() => [testItem]),
|
||||
getMockItemById: jest.fn((_modelCode: string, id: string) =>
|
||||
id === 'test-product' ? testItem : undefined,
|
||||
),
|
||||
getMockItemBySlug: jest.fn((_modelCode: string, slug: string) =>
|
||||
slug === 'test-product' ? testItem : undefined,
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
describe('ProductDetailPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { initCms, getItemRenderer } from '@/lib/cms';
|
||||
import type { ContentItem } from '@/lib/cms';
|
||||
import { PRODUCTS, PRODUCT_CATEGORIES } from '@/lib/constants';
|
||||
|
||||
function productToContentItem(product: unknown, index: number): ContentItem {
|
||||
const p = product as Record<string, unknown>;
|
||||
return {
|
||||
id: String(p.id),
|
||||
modelId: 'product',
|
||||
modelCode: 'product',
|
||||
title: String(p.title),
|
||||
slug: String(p.id),
|
||||
status: 'published',
|
||||
version: 1,
|
||||
sortOrder: index,
|
||||
data: p,
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
updatedAt: '2024-01-01T00:00:00Z',
|
||||
publishedAt: '2024-01-01T00:00:00Z',
|
||||
createdBy: 'system',
|
||||
updatedBy: 'system',
|
||||
};
|
||||
}
|
||||
|
||||
export default function ProductsContentCms() {
|
||||
const [ready, setReady] = useState(false);
|
||||
const [items, setItems] = useState<ContentItem[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
||||
|
||||
useEffect(() => {
|
||||
initCms();
|
||||
setItems(PRODUCTS.map(productToContentItem));
|
||||
setReady(true);
|
||||
}, []);
|
||||
|
||||
const filteredItems = useMemo(() => {
|
||||
if (selectedCategory === 'all') return items;
|
||||
return items.filter((item) => {
|
||||
const data = item.data as Record<string, unknown>;
|
||||
return data.categoryId === selectedCategory;
|
||||
});
|
||||
}, [items, selectedCategory]);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="min-h-screen bg-ink flex items-center justify-center">
|
||||
<div className="text-white/50">加载中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ProductCardRenderer = getItemRenderer('product');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden" data-theme="dark">
|
||||
<section className="relative min-h-[50vh] flex items-center overflow-hidden bg-ink pt-24">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/3 -right-32 w-96 h-96 rounded-full bg-blue-500/20 blur-[120px]" />
|
||||
</div>
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto px-6 lg:px-8 py-20">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/[0.05] border border-white/[0.1] text-sm text-white/70 mb-6">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
|
||||
产品矩阵
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white tracking-tight leading-[1.1]">
|
||||
产品中心
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-white/60 max-w-2xl leading-relaxed">
|
||||
自主研发的企业级产品矩阵，覆盖数字化转型全场景需求。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-16 sm:py-20 md:py-28 overflow-hidden bg-ink-light">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="flex flex-wrap gap-3 mb-12">
|
||||
<button
|
||||
onClick={() => setSelectedCategory('all')}
|
||||
className={`px-5 py-2 text-sm font-medium rounded-xl transition-all ${
|
||||
selectedCategory === 'all'
|
||||
? 'bg-brand text-white'
|
||||
: 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white border border-white/[0.08]'
|
||||
}`}
|
||||
>
|
||||
全部产品
|
||||
</button>
|
||||
{PRODUCT_CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setSelectedCategory(cat.id)}
|
||||
className={`px-5 py-2 text-sm font-medium rounded-xl transition-all ${
|
||||
selectedCategory === cat.id
|
||||
? 'bg-brand text-white'
|
||||
: 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white border border-white/[0.08]'
|
||||
}`}
|
||||
>
|
||||
{cat.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{filteredItems.map((item, i) =>
|
||||
ProductCardRenderer ? (
|
||||
<ProductCardRenderer key={item.id} item={item} index={i} />
|
||||
) : (
|
||||
<div key={item.id} className="p-4 border border-white/10 rounded-lg">
|
||||
{item.title}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,484 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Package, Cpu, BarChart3, Users, Settings, FileText, CheckCircle2 } from 'lucide-react';
|
||||
import { PRODUCT_CATEGORIES, type Product } from '@/lib/constants/products';
|
||||
import { getMockItems } from '@/lib/cms/mock-data';
|
||||
|
||||
// CMS 数据源：从 mock-data 读取产品数据
|
||||
const FALLBACK_PRODUCTS: Product[] = getMockItems('product').map(
|
||||
(item) => item.data as unknown as Product,
|
||||
);
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const EASE_SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const;
|
||||
|
||||
const PRODUCT_ICONS: Record<string, React.ReactNode> = {
|
||||
'睿新ERP管理系统': <Package className="w-7 h-7" />,
|
||||
'睿视商业智能分析平台': <BarChart3 className="w-7 h-7" />,
|
||||
'睿新客户关系管理系统': <Users className="w-7 h-7" />,
|
||||
'睿新协同办公平台': <Settings className="w-7 h-7" />,
|
||||
'睿新内容管理系统': <FileText className="w-7 h-7" />,
|
||||
'睿新供应链数字化平台': <Cpu className="w-7 h-7" />,
|
||||
};
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
const [count, setCount] = useState(0);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!start || prefersReducedMotion) {
|
||||
setCount(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
let animationId: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setCount(Math.floor(target * easeOutQuart));
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(target);
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(animationId);
|
||||
}, [target, start, duration, prefersReducedMotion]);
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, start, delay }: { value: number; suffix: string; label: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start, 2000);
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={start ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay, duration: 0.6, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-none mb-2">
|
||||
{count}{suffix}
|
||||
</div>
|
||||
<div className="text-sm text-text-muted">{label}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const statsRef = useRef(null);
|
||||
const isInView = useInView(statsRef, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-24 sm:py-28 md:py-32 lg:py-40">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.1, ease: EASE_OUT }}
|
||||
className="mb-10"
|
||||
>
|
||||
<SectionLabel>Product Matrix</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 70 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-ink leading-[0.92] tracking-tighter mb-8 sm:mb-10 md:mb-12"
|
||||
>
|
||||
<div className="block">覆盖企业数字化</div>
|
||||
<div className="block mt-5">
|
||||
<span className="relative inline-block">
|
||||
<span className="text-brand font-extrabold">全场景的</span>
|
||||
<motion.span
|
||||
className="absolute -bottom-3 left-0 w-full h-[3px] bg-brand"
|
||||
style={{ transformOrigin: 'left' }}
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="block mt-5">产品矩阵</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
|
||||
className="text-lg sm:text-xl lg:text-2xl text-text-secondary max-w-2xl leading-relaxed mb-8 sm:mb-10 md:mb-12"
|
||||
>
|
||||
从数据智能到业务协同，每一款产品都经过实战验证。
|
||||
6 大核心产品互为补充，常以组合形式出现在行业解决方案中。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约产品演示
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/solutions">查看行业方案</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<div ref={statsRef} className="grid grid-cols-3 gap-12 mt-24 pt-16 border-t border-border-primary max-w-2xl">
|
||||
<StatItem value={6} suffix="+" label="产品线" start={isInView} delay={0.1} />
|
||||
<StatItem value={100} suffix="%" label="自研率" start={isInView} delay={0.2} />
|
||||
<div>
|
||||
<div className="text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-none mb-2">
|
||||
全<span className="text-brand">栈</span>
|
||||
</div>
|
||||
<div className="text-sm text-text-muted">技术覆盖</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductCard({ product, index }: { product: Product; index: number }) {
|
||||
const productIcon = PRODUCT_ICONS[product.title] || <Package className="w-7 h-7" />;
|
||||
|
||||
const colorMap: Record<string, { color: string; bg: string; border: string }> = {
|
||||
enterprise: {
|
||||
color: '#C41E3A',
|
||||
bg: 'bg-brand-soft',
|
||||
border: 'group-hover:border-brand/30',
|
||||
},
|
||||
specialized: {
|
||||
color: '#3b82f6',
|
||||
bg: 'bg-accent-blue-soft',
|
||||
border: 'group-hover:border-accent-blue/30',
|
||||
},
|
||||
};
|
||||
|
||||
const colors = colorMap[product.categoryId] ?? colorMap.enterprise!;
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/products/${product.id}`}
|
||||
className="group relative block transition-all duration-600 hover:bg-bg-secondary overflow-hidden bg-white border border-border-primary hover:border-brand/30"
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top"
|
||||
style={{ backgroundColor: colors.color }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 p-8 lg:p-10">
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.08, y: -3 }}
|
||||
transition={EASE_SPRING}
|
||||
className={cn('w-14 h-14 flex items-center justify-center rounded-2xl', colors.bg)}
|
||||
style={{ color: colors.color }}
|
||||
>
|
||||
{productIcon}
|
||||
</motion.div>
|
||||
<span className="text-7xl font-bold text-text-muted/10 group-hover:text-text-muted/20 transition-all duration-500 tracking-tighter leading-none">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{product.tags.slice(0, 2).map(tag => (
|
||||
<span key={tag} className="px-2.5 py-1 text-xs text-text-muted border border-border-primary group-hover:border-border-secondary group-hover:text-text-secondary transition-all duration-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl lg:text-2xl font-bold text-ink mb-4 group-hover:translate-x-1.5 transition-transform duration-500">
|
||||
{product.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-text-secondary leading-relaxed mb-8 text-[15px]">
|
||||
{product.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{product.features.slice(0, 3).map((feature) => (
|
||||
<span key={feature} className="flex items-center gap-1.5 text-xs text-text-muted">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-brand/70" />
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="inline-flex items-center gap-2.5 text-sm font-bold"
|
||||
style={{ color: colors.color }}
|
||||
whileHover={{ x: 6 }}
|
||||
transition={EASE_SPRING}
|
||||
>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function EnterpriseProductsSection({ products }: { products: Product[] }) {
|
||||
const enterpriseProducts = products.filter(p => p.categoryId === 'enterprise');
|
||||
const category = PRODUCT_CATEGORIES.find(c => c.id === 'enterprise');
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 sm:gap-10 md:gap-12 mb-16 sm:mb-20 md:mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<div className="flex items-center gap-5 mb-8">
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Package className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<SectionLabel>Enterprise Suite</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
企业套装
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-text-secondary text-lg leading-relaxed max-w-2xl">
|
||||
{category?.description}
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary"
|
||||
staggerDelay={0.08}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{enterpriseProducts.map((product, index) => (
|
||||
<ProductCard key={product.id} product={product} index={index} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SpecializedProductsSection({ products }: { products: Product[] }) {
|
||||
const specializedProducts = products.filter(p => p.categoryId === 'specialized');
|
||||
const category = PRODUCT_CATEGORIES.find(c => c.id === 'specialized');
|
||||
|
||||
if (specializedProducts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 sm:gap-10 md:gap-12 mb-16 sm:mb-20 md:mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<div className="flex items-center gap-5 mb-8">
|
||||
<div className="w-16 h-16 rounded-2xl bg-accent-blue-soft flex items-center justify-center text-accent-blue">
|
||||
<Cpu className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<SectionLabel>Specialized Products</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
专业产品
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-text-secondary text-lg leading-relaxed max-w-2xl">
|
||||
{category?.description}
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary"
|
||||
staggerDelay={0.08}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{specializedProducts.map((product, index) => (
|
||||
<ProductCard key={product.id} product={product} index={index} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SuiteCombosSection({ products }: { products: Product[] }) {
|
||||
const SUITE_COMBOS = [
|
||||
{ products: ['erp', 'bi'], label: 'ERP + BI 数据驱动组合', description: '打通业务数据，实现数据驱动决策' },
|
||||
{ products: ['crm', 'bi'], label: 'CRM + BI 客户洞察组合', description: '深度客户洞察，提升销售转化' },
|
||||
{ products: ['erp', 'sds'], label: 'ERP + SDS 供应链优化组合', description: '供应链全链路数字化，降本增效' },
|
||||
{ products: ['cms', 'oa'], label: 'CMS + OA 协同运营组合', description: '内容管理与办公协同一体化' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Recommended Combos
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
推荐产品组合
|
||||
</h2>
|
||||
<p className="text-text-secondary text-lg mt-6 leading-relaxed">
|
||||
经过实战验证的产品组合，发挥 1+1 ＞ 2 的协同效应
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 gap-px bg-border-primary"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{SUITE_COMBOS.map((combo, idx) => {
|
||||
const comboProducts = combo.products
|
||||
.map(pid => products.find(p => p.id === pid))
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<a
|
||||
key={idx}
|
||||
href="/contact"
|
||||
className="group relative p-10 lg:p-12 bg-white hover:bg-bg-secondary transition-all duration-500 overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="flex -space-x-3">
|
||||
{comboProducts.map((p, pIdx) => p && (
|
||||
<div
|
||||
key={pIdx}
|
||||
className="w-10 h-10 rounded-xl bg-brand-soft flex items-center justify-center text-brand border-2 border-white"
|
||||
style={{ zIndex: 10 - pIdx }}
|
||||
>
|
||||
{PRODUCT_ICONS[p.title] || <Package className="w-5 h-5" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="px-3 py-1 text-[11px] font-bold text-brand bg-brand-soft/50">
|
||||
推荐组合
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl lg:text-2xl font-bold text-ink mb-3 group-hover:translate-x-1.5 transition-transform duration-500">
|
||||
{combo.label}
|
||||
</h3>
|
||||
|
||||
<p className="text-text-secondary leading-relaxed mb-6">
|
||||
{combo.description}
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
className="inline-flex items-center gap-2.5 text-sm font-bold text-brand"
|
||||
whileHover={{ x: 6 }}
|
||||
transition={EASE_SPRING}
|
||||
>
|
||||
<span>咨询组合方案</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6 sm:mb-8">
|
||||
找到适合你的<br />
|
||||
<span className="text-brand">数字化方案</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
无论你是需要单一产品，还是完整的数字化转型方案，
|
||||
我们的专家团队都能为你量身定制最佳路径。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约免费咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/solutions">浏览行业方案</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ProductsContentV2({ products: productsProp }: { products?: Product[] }) {
|
||||
const products = productsProp ?? FALLBACK_PRODUCTS;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<EnterpriseProductsSection products={products} />
|
||||
<SpecializedProductsSection products={products} />
|
||||
<SuiteCombosSection products={products} />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { initCms, getItemRenderer } from '@/lib/cms';
|
||||
import type { ContentItem } from '@/lib/cms';
|
||||
import { SERVICES } from '@/lib/constants';
|
||||
|
||||
function serviceToContentItem(service: unknown, index: number): ContentItem {
|
||||
const s = service as Record<string, unknown>;
|
||||
return {
|
||||
id: String(s.id),
|
||||
modelId: 'service',
|
||||
modelCode: 'service',
|
||||
title: String(s.title),
|
||||
slug: String(s.id),
|
||||
status: 'published',
|
||||
version: 1,
|
||||
sortOrder: index,
|
||||
data: s,
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
updatedAt: '2024-01-01T00:00:00Z',
|
||||
publishedAt: '2024-01-01T00:00:00Z',
|
||||
createdBy: 'system',
|
||||
updatedBy: 'system',
|
||||
};
|
||||
}
|
||||
|
||||
export default function ServicesContentCms() {
|
||||
const [ready, setReady] = useState(false);
|
||||
const [items, setItems] = useState<ContentItem[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
initCms();
|
||||
setItems(SERVICES.map(serviceToContentItem));
|
||||
setReady(true);
|
||||
}, []);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="min-h-screen bg-ink flex items-center justify-center">
|
||||
<div className="text-white/50">加载中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ServiceCardRenderer = getItemRenderer('service');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden" data-theme="dark">
|
||||
<section className="relative min-h-[50vh] flex items-center overflow-hidden bg-ink pt-24">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/3 -left-32 w-96 h-96 rounded-full bg-teal-500/20 blur-[120px]" />
|
||||
</div>
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto px-6 lg:px-8 py-20">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/[0.05] border border-white/[0.1] text-sm text-white/70 mb-6">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
|
||||
服务能力
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white tracking-tight leading-[1.1]">
|
||||
服务体系
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-white/60 max-w-2xl leading-relaxed">
|
||||
端到端的数字化服务能力，从战略咨询到落地实施，陪伴企业成长每一步。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-16 sm:py-20 md:py-28 overflow-hidden bg-ink-light">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{items.map((item, i) =>
|
||||
ServiceCardRenderer ? (
|
||||
<ServiceCardRenderer key={item.id} item={item} index={i} />
|
||||
) : (
|
||||
<div key={item.id} className="p-4 border border-white/10 rounded-lg">
|
||||
{item.title}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,510 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Code, BarChart3, Lightbulb, Puzzle, ClipboardList, PencilRuler, Rocket, HeartHandshake, Briefcase, RefreshCcw, Handshake, CheckCircle2 } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '软件开发',
|
||||
subtitle: 'Software Development',
|
||||
desc: '从需求分析到上线运维，全栈定制化开发。用扎实的工程能力交付高质量软件，确保每个项目都能创造真实业务价值。',
|
||||
href: '/services/software',
|
||||
icon: <Code className="w-7 h-7" />,
|
||||
colorClass: 'text-brand',
|
||||
bgClass: 'bg-brand-soft',
|
||||
highlights: ['定制化开发', '全栈技术栈', '敏捷开发', '质量保证', '持续支持'],
|
||||
metrics: [
|
||||
{ value: '95%+', label: '准时交付率' },
|
||||
{ value: 'A+', label: '代码质量' },
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '数据分析',
|
||||
subtitle: 'Data Analytics',
|
||||
desc: '让数据从"存着"变成"用着"。多源数据整合、可视化看板、预测模型，为经营决策提供可量化的洞察支撑。',
|
||||
href: '/services/data',
|
||||
icon: <BarChart3 className="w-7 h-7" />,
|
||||
colorClass: 'text-accent-blue',
|
||||
bgClass: 'bg-accent-blue-soft',
|
||||
highlights: ['数据整合', '可视化分析', '预测模型', '实时分析', '洞察挖掘'],
|
||||
metrics: [
|
||||
{ value: '100+', label: '分析模型' },
|
||||
{ value: '80%+', label: '洞察转化率' },
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '技术咨询',
|
||||
subtitle: 'Tech Consulting',
|
||||
desc: 'IT 战略规划、技术选型评估、数字化转型路线图——帮您理清方向，规避技术风险，减少试错成本。',
|
||||
href: '/services/consulting',
|
||||
icon: <Lightbulb className="w-7 h-7" />,
|
||||
colorClass: 'text-accent-teal',
|
||||
bgClass: 'bg-accent-teal-soft',
|
||||
highlights: ['IT战略规划', '技术选型评估', '转型路线图', '架构评审', '团队建设'],
|
||||
metrics: [
|
||||
{ value: '90%+', label: '方案落地率' },
|
||||
{ value: '50+', label: '咨询项目' },
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: '行业方案实施',
|
||||
subtitle: 'Industry Solutions',
|
||||
desc: '深耕制造、零售、金融、医疗等行业，提供从咨询到落地的端到端交付。确保方案不只是PPT。',
|
||||
href: '/services/solutions',
|
||||
icon: <Puzzle className="w-7 h-7" />,
|
||||
colorClass: 'text-accent-amber',
|
||||
bgClass: 'bg-accent-amber-soft',
|
||||
highlights: ['行业深耕', '场景化方案', '快速交付', '生态整合', '持续迭代'],
|
||||
metrics: [
|
||||
{ value: '30+', label: '行业方案' },
|
||||
{ value: '85%', label: '客户续约率' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const SERVICE_PROCESS = [
|
||||
{ icon: ClipboardList, step: '01', title: '需求分析', desc: '深入了解业务场景与真实痛点，而非凭空假设' },
|
||||
{ icon: PencilRuler, step: '02', title: '方案设计', desc: '量身定制技术路线，拒绝千篇一律的模板' },
|
||||
{ icon: Rocket, step: '03', title: '敏捷交付', desc: '快速迭代，每个冲刺周期都有可交付成果' },
|
||||
{ icon: HeartHandshake, step: '04', title: '持续支持', desc: '上线不是终点，长期陪伴才是真正的承诺' },
|
||||
];
|
||||
|
||||
const SERVICE_MODES = [
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: '项目制',
|
||||
description: '针对明确的需求和交付目标，以项目为单位进行合作。适合有清晰边界的一次性建设类项目。',
|
||||
highlight: '固定范围 · 固定周期',
|
||||
},
|
||||
{
|
||||
icon: RefreshCcw,
|
||||
title: '订阅制',
|
||||
description: '按月或按年持续提供技术支持和迭代优化。适合需要长期维护、持续演进的产品和系统。',
|
||||
highlight: '持续迭代 · 弹性调整',
|
||||
},
|
||||
{
|
||||
icon: Handshake,
|
||||
title: '长期陪跑',
|
||||
description: '以合作伙伴身份深度参与您的数字化进程，从规划到执行全程陪伴。适合正在系统性转型的企业。',
|
||||
highlight: '深度参与 · 共同成长',
|
||||
},
|
||||
];
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '300px 300px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-[85vh] flex items-center overflow-hidden bg-ink"
|
||||
>
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[42%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 25%, rgba(196, 30, 58, 0.094) 100%)',
|
||||
clipPath: 'polygon(35% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-2/5 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-24 right-[22%] w-[350px] h-[350px] rounded-full opacity-15 blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10 w-full py-32 lg:py-40">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.1, ease: EASE_OUT }}
|
||||
className="mb-10"
|
||||
>
|
||||
<SectionLabel>Professional Services</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 70 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.85] tracking-tighter mb-12"
|
||||
>
|
||||
<div className="block">从规划到运维的</div>
|
||||
<div className="block mt-4">
|
||||
<span className="relative">
|
||||
<span className="text-brand">全程陪伴</span>
|
||||
<motion.span
|
||||
className="absolute -bottom-2 left-0 w-full h-1 bg-brand"
|
||||
style={{ transformOrigin: 'left' }}
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
不只是技术供应商，更是您数字化转型的同行者。
|
||||
12 年行业深耕，我们深知每个项目背后都是真实的业务诉求。从第一次沟通到系统稳定运行，我们始终在您身边。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
聊聊您的需求
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">查看产品矩阵</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.9, ease: EASE_OUT }}
|
||||
className="grid grid-cols-3 gap-12 mt-24 pt-16 border-t border-white/10 max-w-2xl"
|
||||
>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">4<span className="text-brand">大</span></div>
|
||||
<div className="text-sm text-dark-text-muted">服务领域</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">3<span className="text-brand">种</span></div>
|
||||
<div className="text-sm text-dark-text-muted">合作模式</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">全<span className="text-brand">流程</span></div>
|
||||
<div className="text-sm text-dark-text-muted">服务保障</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesGridSection() {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-28">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Service Capabilities</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四大核心服务领域
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
覆盖企业数字化全生命周期的专业能力，每一步都有资深专家陪伴。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 gap-px bg-white/10"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{SERVICES.map((service, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={service.href}
|
||||
className="group relative block p-12 lg:p-16 transition-all duration-600 hover:bg-white/[0.02] overflow-hidden bg-ink-light"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute top-0 left-0 h-full w-[3px] scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top',
|
||||
)}
|
||||
style={{ backgroundColor: 'currentColor' }}
|
||||
/>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-start justify-between mb-12">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1, y: -4 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
className={cn('w-16 h-16 flex items-center justify-center', service.bgClass, service.colorClass)}
|
||||
>
|
||||
{service.icon}
|
||||
</motion.div>
|
||||
<span className="text-7xl font-bold text-white/[0.04] group-hover:text-white/[0.08] transition-colors duration-500 tracking-tight">
|
||||
{service.number}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className="text-[11px] tracking-[0.35em] uppercase text-dark-text-muted mb-3 font-semibold">
|
||||
{service.subtitle}
|
||||
</div>
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white group-hover:translate-x-2 transition-transform duration-500">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed mb-10">
|
||||
{service.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 mb-12">
|
||||
{service.highlights.map((h, j) => (
|
||||
<span
|
||||
key={j}
|
||||
className="px-4 py-2 text-xs text-dark-text-muted border border-white/10 group-hover:border-white/20 group-hover:text-dark-text-secondary transition-all duration-300 font-medium"
|
||||
>
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 pt-8 border-t border-white/[0.06]">
|
||||
{service.metrics.map((m, j) => (
|
||||
<div key={j}>
|
||||
<div className="text-2xl font-bold text-white">{m.value}</div>
|
||||
<div className="text-xs text-dark-text-muted mt-1.5">{m.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className={cn('inline-flex items-center gap-3 text-sm font-bold mt-12', service.colorClass)}
|
||||
whileHover={{ x: 8 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ProcessSection() {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-28 max-w-3xl">
|
||||
<SectionLabel>Our Process</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
我们的做事方式
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
没有复杂的流程，只有清晰的四步：听懂需求、想好方案、快速交付、长期陪伴。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute top-[115px] left-0 right-0 h-px hidden lg:block bg-brand/30" />
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-white/10"
|
||||
staggerDelay={0.12}
|
||||
delayChildren={0.1}
|
||||
>
|
||||
{SERVICE_PROCESS.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div
|
||||
key={item.step}
|
||||
className="relative h-full p-12 lg:p-14 border-t-2 border-transparent hover:border-brand transition-all duration-500 group bg-ink"
|
||||
>
|
||||
<div className="absolute -top-[2px] left-0 w-full flex justify-center hidden lg:flex">
|
||||
<div className="w-5 h-5 rounded-full -mt-[9px] border-2 border-brand bg-ink" />
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-8 w-20 h-20 rounded-2xl bg-ink-light border border-white/10 flex items-center justify-center relative">
|
||||
<Icon className="w-8 h-8 text-white" strokeWidth={1.5} />
|
||||
<span className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-brand text-white text-xs font-bold flex items-center justify-center">
|
||||
{item.step}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">{item.title}</h3>
|
||||
<p className="text-sm text-dark-text-muted leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ModesSection() {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-28">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Engagement Models</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
灵活的合作方式
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
不同企业有不同节奏，我们提供三种合作模式，找到最适合您的那一种。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-3 gap-8"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{SERVICE_MODES.map((mode) => {
|
||||
const Icon = mode.icon;
|
||||
return (
|
||||
<div
|
||||
key={mode.title}
|
||||
className="group relative p-10 lg:p-12 border border-white/10 hover:border-brand/30 bg-ink transition-all duration-500 hover:-translate-y-1"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="w-14 h-14 rounded-xl bg-brand-soft flex items-center justify-center mb-8 text-brand">
|
||||
<Icon className="w-7 h-7" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-5">{mode.title}</h3>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed mb-8">{mode.description}</p>
|
||||
|
||||
<div className="flex items-center gap-3 pt-6 border-t border-white/10">
|
||||
<CheckCircle2 className="w-5 h-5 text-brand shrink-0" />
|
||||
<span className="text-sm font-medium text-white">{mode.highlight}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
聊聊您的需求
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary leading-relaxed mb-12 max-w-2xl mx-auto">
|
||||
无论是一个明确的项目，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。
|
||||
首次咨询免费，没有任何销售压力。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约免费咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/team">了解我们的团队</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ServicesContentV1() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<ServicesGridSection />
|
||||
<ProcessSection />
|
||||
<ModesSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,529 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Code, BarChart3, Lightbulb, Puzzle, ClipboardList, PencilRuler, Rocket, HeartHandshake, Briefcase, RefreshCcw, Handshake, CheckCircle2 } from 'lucide-react';
|
||||
import { GrainOverlay, FloatingInkParticles, SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const EASE_SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const;
|
||||
|
||||
const SERVICES_PARTICLES = [
|
||||
{ x: 12, y: 35, scale: 0.8, duration: 10, delay: 0, size: 3 },
|
||||
{ x: 85, y: 55, scale: 0.6, duration: 12, delay: 1.5, size: 2 },
|
||||
{ x: 48, y: 45, scale: 1.0, duration: 9, delay: 0.8, size: 4 },
|
||||
{ x: 70, y: 28, scale: 0.7, duration: 11, delay: 2.2, size: 2.5 },
|
||||
{ x: 30, y: 78, scale: 0.9, duration: 8.5, delay: 1.0, size: 3.5 },
|
||||
{ x: 65, y: 68, scale: 0.55, duration: 13, delay: 2.8, size: 2 },
|
||||
];
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '软件开发',
|
||||
subtitle: 'Software Development',
|
||||
desc: '从需求分析到上线运维，全栈定制化开发。用扎实的工程能力交付高质量软件，确保每个项目都能创造真实业务价值。',
|
||||
href: '/services/software',
|
||||
icon: <Code className="w-7 h-7" />,
|
||||
color: '#C41E3A',
|
||||
colorClass: 'text-brand',
|
||||
bgClass: 'bg-brand-soft',
|
||||
highlights: ['定制化开发', '全栈技术栈', '敏捷开发', '质量保证', '持续支持'],
|
||||
metrics: [
|
||||
{ value: '95%+', label: '准时交付率' },
|
||||
{ value: 'A+', label: '代码质量' },
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '数据分析',
|
||||
subtitle: 'Data Analytics',
|
||||
desc: '让数据从"存着"变成"用着"。多源数据整合、可视化看板、预测模型，为经营决策提供可量化的洞察支撑。',
|
||||
href: '/services/data',
|
||||
icon: <BarChart3 className="w-7 h-7" />,
|
||||
color: '#3b82f6',
|
||||
colorClass: 'text-accent-blue',
|
||||
bgClass: 'bg-accent-blue-soft',
|
||||
highlights: ['数据整合', '可视化分析', '预测模型', '实时分析', '洞察挖掘'],
|
||||
metrics: [
|
||||
{ value: '100+', label: '分析模型' },
|
||||
{ value: '80%+', label: '洞察转化率' },
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '技术咨询',
|
||||
subtitle: 'Tech Consulting',
|
||||
desc: 'IT 战略规划、技术选型评估、数字化转型路线图——帮您理清方向，规避技术风险，减少试错成本。',
|
||||
href: '/services/consulting',
|
||||
icon: <Lightbulb className="w-7 h-7" />,
|
||||
color: '#14b8a6',
|
||||
colorClass: 'text-accent-teal',
|
||||
bgClass: 'bg-accent-teal-soft',
|
||||
highlights: ['IT战略规划', '技术选型评估', '转型路线图', '架构评审', '团队建设'],
|
||||
metrics: [
|
||||
{ value: '90%+', label: '方案落地率' },
|
||||
{ value: '50+', label: '咨询项目' },
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: '行业方案实施',
|
||||
subtitle: 'Industry Solutions',
|
||||
desc: '深耕制造、零售、金融、医疗等行业，提供从咨询到落地的端到端交付。确保方案不只是PPT。',
|
||||
href: '/services/solutions',
|
||||
icon: <Puzzle className="w-7 h-7" />,
|
||||
color: '#f59e0b',
|
||||
colorClass: 'text-accent-amber',
|
||||
bgClass: 'bg-accent-amber-soft',
|
||||
highlights: ['行业深耕', '场景化方案', '快速交付', '生态整合', '持续迭代'],
|
||||
metrics: [
|
||||
{ value: '30+', label: '行业方案' },
|
||||
{ value: '85%', label: '客户续约率' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const SERVICE_PROCESS = [
|
||||
{ icon: ClipboardList, step: '01', title: '需求分析', desc: '深入了解业务场景与真实痛点，而非凭空假设' },
|
||||
{ icon: PencilRuler, step: '02', title: '方案设计', desc: '量身定制技术路线，拒绝千篇一律的模板' },
|
||||
{ icon: Rocket, step: '03', title: '敏捷交付', desc: '快速迭代，每个冲刺周期都有可交付成果' },
|
||||
{ icon: HeartHandshake, step: '04', title: '持续支持', desc: '上线不是终点，长期陪伴才是真正的承诺' },
|
||||
];
|
||||
|
||||
const SERVICE_MODES = [
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: '项目制',
|
||||
description: '针对明确的需求和交付目标，以项目为单位进行合作。适合有清晰边界的一次性建设类项目。',
|
||||
highlight: '固定范围 · 固定周期',
|
||||
color: '#C41E3A',
|
||||
},
|
||||
{
|
||||
icon: RefreshCcw,
|
||||
title: '订阅制',
|
||||
description: '按月或按年持续提供技术支持和迭代优化。适合需要长期维护、持续演进的产品和系统。',
|
||||
highlight: '持续迭代 · 弹性调整',
|
||||
color: '#3b82f6',
|
||||
},
|
||||
{
|
||||
icon: Handshake,
|
||||
title: '长期陪跑',
|
||||
description: '以合作伙伴身份深度参与您的数字化进程，从规划到执行全程陪伴。适合正在系统性转型的企业。',
|
||||
highlight: '深度参与 · 共同成长',
|
||||
color: '#14b8a6',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
function HeroSection() {
|
||||
return (
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
<FloatingInkParticles particles={SERVICES_PARTICLES} />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[42%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(145deg, transparent 25%, rgba(196, 30, 58, 0.03) 100%)',
|
||||
clipPath: 'polygon(35% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute bottom-0 left-0 w-[50%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(220deg, transparent 35%, rgba(20, 184, 166, 0.02) 100%)',
|
||||
clipPath: 'polygon(0 0, 65% 0, 100% 100%, 0 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-2/5 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-24 right-[22%] w-[360px] h-[360px] rounded-full opacity-[0.04] blur-3xl bg-brand" />
|
||||
<div className="absolute bottom-28 left-[15%] w-[300px] h-[300px] rounded-full opacity-[0.025] blur-3xl bg-teal-500" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-24 sm:py-28 md:py-32 lg:py-40">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.1, ease: EASE_OUT }}
|
||||
className="mb-10"
|
||||
>
|
||||
<SectionLabel>Professional Services</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 70 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.88] tracking-tighter mb-12"
|
||||
>
|
||||
<div className="block">从规划到运维的</div>
|
||||
<div className="block mt-5">
|
||||
<span className="relative inline-block">
|
||||
<span className="text-brand font-extrabold">全程陪伴</span>
|
||||
<motion.span
|
||||
className="absolute -bottom-3 left-0 w-full h-[3px] bg-brand"
|
||||
style={{ transformOrigin: 'left' }}
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
不只是技术供应商，更是您数字化转型的同行者。
|
||||
我们深知每个项目背后都是真实的业务诉求。从第一次沟通到系统稳定运行，我们始终在您身边。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
聊聊您的需求
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">查看产品矩阵</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-12 mt-24 pt-16 border-t border-white/10 max-w-2xl">
|
||||
<div>
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white tracking-tight leading-none mb-2">
|
||||
4<span className="text-brand">大</span>
|
||||
</div>
|
||||
<div className="text-sm text-dark-text-muted">服务领域</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white tracking-tight leading-none mb-2">
|
||||
3<span className="text-brand">种</span>
|
||||
</div>
|
||||
<div className="text-sm text-dark-text-muted">合作模式</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white tracking-tight leading-none mb-2">
|
||||
全<span className="text-brand">流程</span>
|
||||
</div>
|
||||
<div className="text-sm text-dark-text-muted">服务保障</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesGridSection() {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 sm:gap-10 md:gap-12 mb-16 sm:mb-20 md:mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Service Capabilities</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四大核心服务领域
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
覆盖企业数字化全生命周期的专业能力，每一步都有资深专家陪伴。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 gap-px bg-white/10"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{SERVICES.map((service, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={service.href}
|
||||
className="group relative block p-10 lg:p-12 transition-all duration-600 hover:bg-white/[0.02] overflow-hidden bg-ink border border-transparent hover:border-white/10"
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top"
|
||||
style={{ backgroundColor: service.color }}
|
||||
/>
|
||||
|
||||
<div className="absolute top-8 right-8 w-48 h-48 rounded-full opacity-0 group-hover:opacity-100 blur-3xl transition-opacity duration-700" style={{ backgroundColor: service.color + '06' }} />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-start justify-between mb-10">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.08, y: -3 }}
|
||||
transition={EASE_SPRING}
|
||||
className={cn('w-16 h-16 flex items-center justify-center rounded-2xl', service.bgClass, service.colorClass)}
|
||||
>
|
||||
{service.icon}
|
||||
</motion.div>
|
||||
<span className="text-7xl font-bold text-white/[0.05] group-hover:text-white/[0.1] transition-all duration-500 tracking-tighter leading-none">
|
||||
{service.number}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className="text-[11px] tracking-[0.35em] uppercase text-dark-text-muted mb-3 font-semibold">
|
||||
{service.subtitle}
|
||||
</div>
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white group-hover:translate-x-1.5 transition-transform duration-500">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed mb-8 text-[15px]">
|
||||
{service.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2.5 mb-8">
|
||||
{service.highlights.map((h, j) => (
|
||||
<span
|
||||
key={j}
|
||||
className="px-3 py-1.5 text-xs text-dark-text-muted border border-white/10 group-hover:border-white/20 group-hover:text-dark-text-secondary transition-all duration-300 font-medium"
|
||||
>
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 pt-6 border-t border-white/[0.06] mb-8">
|
||||
{service.metrics.map((m, j) => (
|
||||
<div key={j}>
|
||||
<div className="text-2xl font-bold text-white">{m.value}</div>
|
||||
<div className="text-xs text-dark-text-muted mt-1.5">{m.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className={cn('inline-flex items-center gap-2.5 text-sm font-bold', service.colorClass)}
|
||||
whileHover={{ x: 6 }}
|
||||
transition={EASE_SPRING}
|
||||
>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ProcessSection() {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 md:mb-20 max-w-3xl">
|
||||
<SectionLabel>Our Process</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
我们的做事方式
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
没有复杂的流程，只有清晰的四步：听懂需求、想好方案、快速交付、长期陪伴。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute top-[115px] left-0 right-0 h-px hidden lg:block bg-brand/20" />
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-white/10"
|
||||
staggerDelay={0.12}
|
||||
delayChildren={0.1}
|
||||
>
|
||||
{SERVICE_PROCESS.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div
|
||||
key={item.step}
|
||||
className="relative h-full p-10 lg:p-12 border-t-2 border-transparent hover:border-brand transition-all duration-500 group bg-ink"
|
||||
>
|
||||
<div className="absolute -top-[2px] left-0 w-full flex justify-center hidden lg:flex">
|
||||
<div className="w-5 h-5 rounded-full -mt-[9px] border-2 border-brand bg-ink" />
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-8 w-20 h-20 rounded-2xl bg-ink-light border border-white/10 flex items-center justify-center relative">
|
||||
<Icon className="w-8 h-8 text-white" strokeWidth={1.5} />
|
||||
<span className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-brand text-white text-xs font-bold flex items-center justify-center">
|
||||
{item.step}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-3">{item.title}</h3>
|
||||
<p className="text-sm text-dark-text-muted leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ModesSection() {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 sm:gap-10 md:gap-12 mb-16 sm:mb-20 md:mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Engagement Models</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
灵活的合作方式
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
不同企业有不同节奏，我们提供三种合作模式，找到最适合您的那一种。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-3 gap-px bg-white/10"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{SERVICE_MODES.map((mode) => {
|
||||
const Icon = mode.icon;
|
||||
return (
|
||||
<div
|
||||
key={mode.title}
|
||||
className="group relative p-10 lg:p-12 bg-ink transition-all duration-500 hover:bg-white/[0.02]"
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top"
|
||||
style={{ backgroundColor: mode.color }}
|
||||
/>
|
||||
|
||||
<div className="absolute top-8 right-8 w-40 h-40 rounded-full opacity-0 group-hover:opacity-100 blur-3xl transition-opacity duration-700" style={{ backgroundColor: mode.color + '06' }} />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div
|
||||
className="w-14 h-14 rounded-xl flex items-center justify-center mb-8"
|
||||
style={{ backgroundColor: mode.color + '12', color: mode.color }}
|
||||
>
|
||||
<Icon className="w-7 h-7" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-5">{mode.title}</h3>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed mb-8 text-[15px]">{mode.description}</p>
|
||||
|
||||
<div className="flex items-center gap-3 pt-6 border-t border-white/10">
|
||||
<CheckCircle2 className="w-5 h-5 shrink-0" style={{ color: mode.color }} />
|
||||
<span className="text-sm font-medium text-white">{mode.highlight}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
<FloatingInkParticles />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand/30 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand/30 to-transparent" />
|
||||
|
||||
<div className="absolute top-1/4 right-[10%] w-[380px] h-[380px] rounded-full opacity-[0.03] blur-3xl bg-brand" />
|
||||
<div className="absolute bottom-1/4 left-[10%] w-[320px] h-[320px] rounded-full opacity-[0.02] blur-3xl bg-teal-500" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-6 sm:mb-8">
|
||||
聊聊您的<br />
|
||||
<span className="text-brand">需求</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
无论是一个明确的项目，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。
|
||||
首次咨询免费，没有任何销售压力。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约免费咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/team">了解我们的团队</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ServicesContentV2() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<ServicesGridSection />
|
||||
<ProcessSection />
|
||||
<ModesSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { initCms, getItemRenderer } from '@/lib/cms';
|
||||
import type { ContentItem } from '@/lib/cms';
|
||||
import { SOLUTIONS } from '@/lib/constants/solutions';
|
||||
|
||||
function solutionToContentItem(solution: unknown, index: number): ContentItem {
|
||||
const s = solution as Record<string, unknown>;
|
||||
return {
|
||||
id: String(s.id),
|
||||
modelId: 'solution',
|
||||
modelCode: 'solution',
|
||||
title: String(s.title),
|
||||
slug: String(s.id),
|
||||
status: 'published',
|
||||
version: 1,
|
||||
sortOrder: index,
|
||||
data: s,
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
updatedAt: '2024-01-01T00:00:00Z',
|
||||
publishedAt: '2024-01-01T00:00:00Z',
|
||||
createdBy: 'system',
|
||||
updatedBy: 'system',
|
||||
};
|
||||
}
|
||||
|
||||
export default function SolutionsContentCms() {
|
||||
const [ready, setReady] = useState(false);
|
||||
const [items, setItems] = useState<ContentItem[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
initCms();
|
||||
setItems(SOLUTIONS.map(solutionToContentItem));
|
||||
setReady(true);
|
||||
}, []);
|
||||
|
||||
if (!ready) {
|
||||
return (
|
||||
<div className="min-h-screen bg-ink flex items-center justify-center">
|
||||
<div className="text-white/50">加载中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SolutionCardRenderer = getItemRenderer('solution');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden" data-theme="dark">
|
||||
<section className="relative min-h-[50vh] flex items-center overflow-hidden bg-ink pt-24">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/3 -right-32 w-96 h-96 rounded-full bg-purple-500/20 blur-[120px]" />
|
||||
</div>
|
||||
<div className="relative z-10 w-full max-w-7xl mx-auto px-6 lg:px-8 py-20">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/[0.05] border border-white/[0.1] text-sm text-white/70 mb-6">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
|
||||
解决方案
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white tracking-tight leading-[1.1]">
|
||||
行业解决方案
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-white/60 max-w-2xl leading-relaxed">
|
||||
深入理解不同行业的业务特性，提供量身定制的数字化解决方案。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative py-16 sm:py-20 md:py-28 overflow-hidden bg-ink-light">
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{items.map((item, i) =>
|
||||
SolutionCardRenderer ? (
|
||||
<SolutionCardRenderer key={item.id} item={item} index={i} />
|
||||
) : (
|
||||
<div key={item.id} className="p-4 border border-white/10 rounded-lg">
|
||||
{item.title}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,398 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { GrainOverlay, FloatingInkParticles, SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Sparkles } from 'lucide-react';
|
||||
import { type Solution } from '@/lib/constants/solutions';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
import { getMockItems } from '@/lib/cms/mock-data';
|
||||
|
||||
// CMS 数据源：从 mock-data 读取解决方案数据
|
||||
const SOLUTIONS: Solution[] = getMockItems('solution').map(
|
||||
(item) => item.data as unknown as Solution,
|
||||
);
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const EASE_SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const;
|
||||
|
||||
const INDUSTRY_ICONS: Record<string, React.ReactNode> = {
|
||||
制造业: <Factory className="w-7 h-7" />,
|
||||
零售业: <ShoppingCart className="w-7 h-7" />,
|
||||
医疗: <Heart className="w-7 h-7" />,
|
||||
教育: <GraduationCap className="w-7 h-7" />,
|
||||
};
|
||||
|
||||
const INDUSTRY_COLORS: Record<string, { color: string; bg: string; soft: string }> = {
|
||||
制造业: { color: '#C41E3A', bg: 'bg-brand-soft', soft: 'rgba(196, 30, 58, 0.08)' },
|
||||
零售业: { color: '#3b82f6', bg: 'bg-accent-blue-soft', soft: 'rgba(59, 130, 246, 0.08)' },
|
||||
医疗: { color: '#14b8a6', bg: 'bg-accent-teal-soft', soft: 'rgba(20, 184, 166, 0.08)' },
|
||||
教育: { color: '#f59e0b', bg: 'bg-accent-amber-soft', soft: 'rgba(245, 158, 11, 0.08)' },
|
||||
};
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
const [count, setCount] = useState(0);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!start || prefersReducedMotion) {
|
||||
setCount(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
let animationId: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setCount(Math.floor(target * easeOutQuart));
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(target);
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(animationId);
|
||||
}, [target, start, duration, prefersReducedMotion]);
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
const SOLUTION_PARTICLES = [
|
||||
{ x: 18, y: 28, scale: 0.8, duration: 10, delay: 0, size: 3 },
|
||||
{ x: 78, y: 62, scale: 0.6, duration: 12, delay: 1.5, size: 2 },
|
||||
{ x: 50, y: 48, scale: 1.0, duration: 9, delay: 0.8, size: 4 },
|
||||
{ x: 72, y: 30, scale: 0.7, duration: 11, delay: 2.2, size: 2.5 },
|
||||
{ x: 28, y: 72, scale: 0.9, duration: 8.5, delay: 1.0, size: 3.5 },
|
||||
{ x: 62, y: 70, scale: 0.55, duration: 13, delay: 2.8, size: 2 },
|
||||
];
|
||||
|
||||
function HeroSection() {
|
||||
const statsRef = useRef(null);
|
||||
const isInView = useInView(statsRef, { once: true, margin: '-100px' });
|
||||
const count4 = useCountUp(4, isInView, 1500);
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
<FloatingInkParticles particles={SOLUTION_PARTICLES} />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[42%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(145deg, transparent 25%, rgba(196, 30, 58, 0.03) 100%)',
|
||||
clipPath: 'polygon(35% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute bottom-0 left-0 w-[50%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(220deg, transparent 35%, rgba(20, 184, 166, 0.02) 100%)',
|
||||
clipPath: 'polygon(0 0, 65% 0, 100% 100%, 0 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-2/5 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-24 right-[20%] w-[360px] h-[360px] rounded-full opacity-[0.04] blur-3xl bg-brand" />
|
||||
<div className="absolute bottom-28 left-[18%] w-[300px] h-[300px] rounded-full opacity-[0.025] blur-3xl bg-teal-500" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-24 sm:py-28 md:py-32 lg:py-40">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.1, ease: EASE_OUT }}
|
||||
className="mb-10"
|
||||
>
|
||||
<SectionLabel>Industry Solutions</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 70 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.88] tracking-tighter mb-12"
|
||||
>
|
||||
<div className="block">深耕行业场景的</div>
|
||||
<div className="block mt-5">
|
||||
<span className="relative inline-block">
|
||||
<span className="text-brand font-extrabold">解决方案</span>
|
||||
<motion.span
|
||||
className="absolute -bottom-3 left-0 w-full h-[3px] bg-brand"
|
||||
style={{ transformOrigin: 'left' }}
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
端到端交付，推荐套装组合 + 配套服务包。
|
||||
基于自研产品矩阵，为制造业、零售业、教育、医疗等行业量身定制最佳实践。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">浏览产品</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<div ref={statsRef} className="grid grid-cols-3 gap-12 mt-24 pt-16 border-t border-white/10 max-w-2xl">
|
||||
<div>
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white tracking-tight leading-none mb-2">
|
||||
{count4}<span className="text-brand">+</span>
|
||||
</div>
|
||||
<div className="text-sm text-dark-text-muted">行业覆盖</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white tracking-tight leading-none mb-2">
|
||||
端到<span className="text-brand">端</span>
|
||||
</div>
|
||||
<div className="text-sm text-dark-text-muted">交付模式</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white tracking-tight leading-none mb-2">
|
||||
定制<span className="text-brand">化</span>
|
||||
</div>
|
||||
<div className="text-sm text-dark-text-muted">方案特点</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SolutionCard({ solution, index }: { solution: Solution; index: number }) {
|
||||
const industryIcon = INDUSTRY_ICONS[solution.industry] || <Factory className="w-7 h-7" />;
|
||||
const colors = INDUSTRY_COLORS[solution.industry] ?? INDUSTRY_COLORS['制造业']!;
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/solutions/${solution.id}`}
|
||||
className="group relative block transition-all duration-600 hover:bg-white/[0.02] overflow-hidden bg-ink border border-white/10 hover:border-white/20"
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top"
|
||||
style={{ backgroundColor: colors.color }}
|
||||
/>
|
||||
|
||||
<div className="absolute top-10 right-10 w-52 h-52 rounded-full opacity-0 group-hover:opacity-100 blur-3xl transition-opacity duration-700" style={{ backgroundColor: colors.color + '08' }} />
|
||||
|
||||
<div className="relative z-10 p-10 lg:p-12">
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div
|
||||
className={cn('w-16 h-16 flex items-center justify-center rounded-2xl', colors.bg)}
|
||||
style={{ color: colors.color }}
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.08, y: -3 }}
|
||||
transition={EASE_SPRING}
|
||||
>
|
||||
{industryIcon}
|
||||
</motion.div>
|
||||
</div>
|
||||
<span className="text-7xl font-bold text-white/[0.05] group-hover:text-white/[0.1] transition-all duration-500 tracking-tighter leading-none">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<span
|
||||
className="inline-block px-3.5 py-1.5 text-[11px] font-bold mb-4 backdrop-blur-sm rounded-sm"
|
||||
style={{ backgroundColor: colors.soft, color: colors.color }}
|
||||
>
|
||||
{solution.industry}
|
||||
</span>
|
||||
<div className="text-dark-text-muted text-sm tracking-widest uppercase mb-2">
|
||||
{solution.subtitle}
|
||||
</div>
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white group-hover:translate-x-1.5 transition-transform duration-500 leading-tight">
|
||||
{solution.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed mb-8 text-[15px]">
|
||||
{solution.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-2.5 mb-8">
|
||||
{solution.challenges.slice(0, 2).map((challenge, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2.5 text-sm text-dark-text-muted">
|
||||
<span className="text-brand mt-0.5 font-bold">•</span>
|
||||
<span>{challenge}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-white/10">
|
||||
<p className="text-[11px] text-dark-text-muted mb-4 uppercase tracking-widest font-bold flex items-center gap-2">
|
||||
<Sparkles className="w-3.5 h-3.5" style={{ color: colors.color }} />
|
||||
推荐产品组合
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mb-5">
|
||||
{solution.suiteCombination.primaryProducts.map(pid => {
|
||||
const prod = PRODUCTS.find(p => p.id === pid);
|
||||
return prod ? (
|
||||
<span
|
||||
key={pid}
|
||||
className="px-3 py-1.5 text-xs font-medium text-white bg-ink-light border border-white/10 group-hover:border-white/20 transition-colors"
|
||||
>
|
||||
{prod.title.replace('睿新', '').replace('睿视 ', '')}
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
<span
|
||||
className="px-3 py-1.5 text-xs font-bold"
|
||||
style={{ backgroundColor: colors.soft, color: colors.color }}
|
||||
>
|
||||
+ 配套服务
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-dark-text-muted leading-relaxed">
|
||||
{solution.suiteCombination.rationale}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="inline-flex items-center gap-2.5 text-sm font-bold mt-8"
|
||||
style={{ color: colors.color }}
|
||||
whileHover={{ x: 6 }}
|
||||
transition={EASE_SPRING}
|
||||
>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function SolutionsGridSection() {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 sm:gap-10 md:gap-12 mb-16 sm:mb-20 md:mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Industry Expertise</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
行业解决方案
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
每个方案都明确推荐产品组合和服务包，确保落地效果
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 gap-px bg-white/10"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{SOLUTIONS.map((solution, index) => (
|
||||
<SolutionCard key={solution.id} solution={solution} index={index} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
<FloatingInkParticles particles={SOLUTION_PARTICLES} />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand/30 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand/30 to-transparent" />
|
||||
|
||||
<div className="absolute top-1/4 right-[10%] w-[380px] h-[380px] rounded-full opacity-[0.03] blur-3xl bg-brand" />
|
||||
<div className="absolute bottom-1/4 left-[10%] w-[320px] h-[320px] rounded-full opacity-[0.02] blur-3xl bg-teal-500" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-6 sm:mb-8">
|
||||
告诉我们您的<br />
|
||||
<span className="text-brand">行业场景</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
无论您处于哪个行业、哪个数字化阶段，我们都能为您推荐最合适的产品组合和服务包。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
获取定制方案
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">浏览产品</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SolutionsContentV2() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<SolutionsGridSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,14 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { revalidatePath, revalidateTag } from 'next/cache';
|
||||
import {
|
||||
getContentTypeConfig,
|
||||
getAllContentTypeConfigs,
|
||||
} from '@/lib/cms/registry';
|
||||
import { CONTENT_TYPE_CONFIGS } from '@/lib/cms/content-types';
|
||||
|
||||
function getContentTypeConfig(code: string) {
|
||||
return CONTENT_TYPE_CONFIGS[code as keyof typeof CONTENT_TYPE_CONFIGS] ?? null;
|
||||
}
|
||||
|
||||
function getAllContentTypeConfigs() {
|
||||
return Object.values(CONTENT_TYPE_CONFIGS);
|
||||
}
|
||||
|
||||
interface RevalidateRequestBody {
|
||||
event?: string;
|
||||
|
||||
Reference in New Issue
Block a user