chore(cleanup): 清理废弃组件与旧版本归档
- 删除 detail-v2 旧版叙事组件 - 删除 narrative 旧版区块组件 - 删除 theme-toggle 主题切换与 theme-context 上下文 - 删除 detail-data-proof/service-value/solution-value 旧版组件 - 删除 home-content-v2/v3 旧版首页 - 归档旧版营销页面内容至 _archive 目录
This commit is contained in:
张翔
File diff suppressed because it is too large
Load Diff
+19
-19
@@ -59,8 +59,8 @@ const enterpriseProducts = PRODUCTS.filter(p => p.categoryId === 'enterprise');
|
||||
function HomeHeroRight() {
|
||||
return (
|
||||
<InkCard padding="lg" className="lg:opacity-95">
|
||||
<div className="w-12 h-12 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-5">
|
||||
<Briefcase className="w-5 h-5 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
<div className="w-12 h-12 rounded-xl bg-[var(--color-brand-bg)] flex items-center justify-center mb-5">
|
||||
<Briefcase className="w-5 h-5 text-[var(--color-brand)]" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2">
|
||||
@@ -81,8 +81,8 @@ function HomeHeroRight() {
|
||||
key={item.step}
|
||||
className="flex items-center gap-4 p-3 rounded-lg bg-[var(--color-bg-section)]/60"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
|
||||
<span className="text-xs font-bold text-[var(--color-brand-primary)]">{item.step}</span>
|
||||
<div className="w-9 h-9 rounded-lg bg-[var(--color-brand-bg)] flex items-center justify-center shrink-0">
|
||||
<span className="text-xs font-bold text-[var(--color-brand)]">{item.step}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-[var(--color-text-primary)]">{item.label}</span>
|
||||
@@ -109,12 +109,12 @@ function ProductMatrixPreview() {
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="mb-14"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">产品矩阵</span>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-bg)] border border-[var(--color-brand)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand)]">产品矩阵</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
覆盖企业数字化<span className="text-[var(--color-brand-primary)] font-calligraphy">全场景</span>
|
||||
覆盖企业数字化<span className="text-[var(--color-brand)] font-calligraphy">全场景</span>
|
||||
</h2>
|
||||
<p className="text-base text-[var(--color-text-muted)] max-w-2xl">
|
||||
6 大自研产品互为补充，从数据智能到业务协同，每一款都经过实战验证
|
||||
@@ -131,8 +131,8 @@ function ProductMatrixPreview() {
|
||||
transition={{ duration: 0.5, delay: idx * 0.06, ease: EASE }}
|
||||
>
|
||||
<InkCard padding="sm" href={`/products/${product.id}`} className="group">
|
||||
<Package className="w-5 h-5 text-[var(--color-brand-primary)] mb-3" strokeWidth={1.8} />
|
||||
<h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-1 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
<Package className="w-5 h-5 text-[var(--color-brand)] mb-3" strokeWidth={1.8} />
|
||||
<h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-1 group-hover:text-[var(--color-brand)] transition-colors">
|
||||
{product.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[var(--color-text-muted)] leading-relaxed line-clamp-2">
|
||||
@@ -152,7 +152,7 @@ function ProductMatrixPreview() {
|
||||
>
|
||||
<StaticLink
|
||||
href="/products"
|
||||
className="inline-flex items-center gap-2 text-sm font-medium text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-hover)] transition-colors group"
|
||||
className="inline-flex items-center gap-2 text-sm font-medium text-[var(--color-brand)] hover:text-[var(--color-brand-hover)] transition-colors group"
|
||||
>
|
||||
浏览完整产品矩阵
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
@@ -177,12 +177,12 @@ function SolutionsPreview() {
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="mb-14"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">行业方案</span>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-bg)] border border-[var(--color-brand)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand)]">行业方案</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
深耕行业<span className="text-[var(--color-brand-primary)] font-calligraphy">场景</span>
|
||||
深耕行业<span className="text-[var(--color-brand)] font-calligraphy">场景</span>
|
||||
</h2>
|
||||
<p className="text-base text-[var(--color-text-muted)] max-w-2xl">
|
||||
基于自研产品矩阵，为不同行业量身定制端到端的数字化解决方案
|
||||
@@ -200,11 +200,11 @@ function SolutionsPreview() {
|
||||
>
|
||||
<InkCard padding="md" href={`/solutions/${solution.id}`} className="group">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]">
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-bg)] text-[var(--color-brand)]">
|
||||
{solution.industry}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 group-hover:text-[var(--color-brand)] transition-colors">
|
||||
{solution.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-3 line-clamp-2">
|
||||
@@ -219,7 +219,7 @@ function SolutionsPreview() {
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
<span className="px-2 py-0.5 rounded text-[10px] text-[var(--color-brand-primary)] font-medium">
|
||||
<span className="px-2 py-0.5 rounded text-[10px] text-[var(--color-brand)] font-medium">
|
||||
+ 配套服务
|
||||
</span>
|
||||
</div>
|
||||
@@ -237,7 +237,7 @@ function SolutionsPreview() {
|
||||
>
|
||||
<StaticLink
|
||||
href="/solutions"
|
||||
className="inline-flex items-center gap-2 text-sm font-medium text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-hover)] transition-colors group"
|
||||
className="inline-flex items-center gap-2 text-sm font-medium text-[var(--color-brand)] hover:text-[var(--color-brand-hover)] transition-colors group"
|
||||
>
|
||||
查看全部行业方案
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,599 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { motion, useScroll, useTransform, useInView } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import {
|
||||
ArrowRight, Cpu, Globe, Factory, ShoppingCart, Stethoscope,
|
||||
GraduationCap, Building, Shield, Users, Brain,
|
||||
ChevronRight, TrendingUp, Target, Briefcase,
|
||||
} from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const INK = '#0A0E14';
|
||||
const CINNABAR = '#C41E3A';
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const CONTAINER = 'max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16';
|
||||
|
||||
const SERVICES = [
|
||||
{ icon: <Target className="w-6 h-6" />, title: '战略咨询', desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长', href: '/services/consulting' },
|
||||
{ icon: <Briefcase className="w-6 h-6" />, title: '企业软件', desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发', href: '/products' },
|
||||
{ icon: <Cpu className="w-6 h-6" />, title: '技术服务', desc: '系统集成、数据中台、云原生架构设计与技术外包服务', href: '/services' },
|
||||
{ icon: <Brain className="w-6 h-6" />, title: 'AI 赋能', desc: 'AI 成熟度评估、场景落地与大模型应用开发', href: '/services/ai' },
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: <Factory className="w-5 h-5" />, name: '智能制造' },
|
||||
{ icon: <ShoppingCart className="w-5 h-5" />, name: '贸易零售' },
|
||||
{ icon: <Stethoscope className="w-5 h-5" />, name: '医疗健康' },
|
||||
{ icon: <GraduationCap className="w-5 h-5" />, name: '教育科技' },
|
||||
{ icon: <Building className="w-5 h-5" />, name: '金融服务' },
|
||||
{ icon: <Shield className="w-5 h-5" />, name: '政务合规' },
|
||||
{ icon: <Globe className="w-5 h-5" />, name: '跨境电商' },
|
||||
{ icon: <Users className="w-5 h-5" />, name: '专业服务' },
|
||||
];
|
||||
|
||||
const CASES = [
|
||||
{
|
||||
industry: '智能制造',
|
||||
title: '大型制造企业 ERP 全面升级',
|
||||
impact: [{ value: 40, suffix: '%', label: '生产效率提升' }, { value: 30, suffix: '天', label: '核心系统上线' }],
|
||||
quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系。',
|
||||
author: 'CTO，某上市制造企业',
|
||||
},
|
||||
{
|
||||
industry: '贸易零售',
|
||||
title: '连锁零售全渠道数字化升级',
|
||||
impact: [{ value: 25, suffix: '%', label: '营收增长' }, { value: 50, suffix: '%', label: '库存周转优化' }],
|
||||
quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心。',
|
||||
author: 'CEO，某区域零售龙头',
|
||||
},
|
||||
{
|
||||
industry: '医疗健康',
|
||||
title: '三甲医院数据合规与患者服务',
|
||||
impact: [{ value: 100, suffix: '%', label: '合规达标' }, { value: 60, suffix: '%', label: '患者满意度提升' }],
|
||||
quote: '在医疗数据合规领域，睿新的专业度在行业中非常难得。',
|
||||
author: '信息科主任，某三甲医院',
|
||||
},
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 500, suffix: '+', label: '服务企业客户' },
|
||||
{ value: 12, suffix: '年', label: '行业深耕经验' },
|
||||
{ value: 98, suffix: '%', label: '客户满意度' },
|
||||
{ value: 200, suffix: '+', label: '专业技术团队' },
|
||||
];
|
||||
|
||||
const INSIGHTS = [
|
||||
{ tag: '白皮书', title: '2026 中国企业数字化转型趋势报告', desc: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。' },
|
||||
{ tag: '行业洞察', title: 'AI 浪潮下的企业数字化升级路径', desc: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风。' },
|
||||
{ tag: '实践指南', title: 'ERP 选型避坑指南：从需求到落地全流程', desc: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。' },
|
||||
];
|
||||
|
||||
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 StatCard({ value, suffix, label, delay = 0 }: { value: number; suffix: string; label: string; delay?: number }) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-50px' });
|
||||
const count = useCountUp(value, isInView);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.6, delay, ease: EASE }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="text-4xl md:text-5xl font-bold text-white mb-2 tracking-tight">
|
||||
{count}{suffix}
|
||||
</div>
|
||||
<div className="text-gray-400 text-sm">{label}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, 100]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0.2]);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-screen flex items-center overflow-hidden"
|
||||
style={{ backgroundColor: INK }}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div
|
||||
className="absolute top-1/4 -right-1/4 w-[800px] h-[800px] rounded-full opacity-20"
|
||||
style={{
|
||||
background: `radial-gradient(circle, ${CINNABAR} 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-0 -left-1/4 w-[600px] h-[600px] rounded-full opacity-10"
|
||||
style={{
|
||||
background: `radial-gradient(circle, ${CINNABAR} 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
||||
backgroundSize: '60px 60px',
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<motion.div style={{ y, opacity }} className={`${CONTAINER} relative z-10 pt-24 pb-20`}>
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 bg-white/5 text-sm text-gray-300 mb-8"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: CINNABAR }} />
|
||||
专注企业数字化转型 12 年
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.1, ease: EASE }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.1] tracking-tight mb-8"
|
||||
>
|
||||
以战略远见，
|
||||
<br />
|
||||
<span style={{ color: CINNABAR }}>驱动</span> 数字化未来
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.25, ease: EASE }}
|
||||
className="text-lg md:text-xl text-gray-400 max-w-2xl mb-12 leading-relaxed"
|
||||
>
|
||||
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
|
||||
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: EASE }}
|
||||
className="flex flex-wrap gap-4 mb-20"
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group inline-flex items-center gap-2 px-8 py-4 text-white font-medium rounded-sm transition-all duration-300 hover:shadow-lg hover:shadow-[#C41E3A]/20"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
预约咨询
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="inline-flex items-center gap-2 px-8 py-4 text-white font-medium rounded-sm border border-white/20 hover:bg-white/5 transition-all duration-300"
|
||||
>
|
||||
了解服务
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.6 }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-8"
|
||||
>
|
||||
{STATS.map((stat, i) => (
|
||||
<StatCard key={i} {...stat} delay={i * 0.1} />
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.2 }}
|
||||
className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-gray-500"
|
||||
>
|
||||
<span className="text-xs">向下滚动</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
|
||||
>
|
||||
<ChevronRight className="w-5 h-5 rotate-90" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function QuestionsSection() {
|
||||
const questions = [
|
||||
{
|
||||
question: '我们的数字化投入，是否真正带来了业务增长？',
|
||||
description: '许多企业在数字化上投入巨大，却难以量化 ROI。我们帮助您建立可衡量的数字化价值评估体系，让每一分投入都可见、可追踪、可优化。',
|
||||
href: '/services/consulting',
|
||||
},
|
||||
{
|
||||
question: '核心系统如何选型、落地与集成，才能支撑业务持续增长？',
|
||||
description: 'ERP、BI、CRM 等核心系统的评估、实施与无缝集成，确保技术架构稳健可扩展，避免「上线即落后」的困境。',
|
||||
href: '/products',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-24 md:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, ease: EASE }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<div className="inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
核心命题
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
企业数字化的<span style={{ color: CINNABAR }}>关键问题</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{questions.map((q, i) => (
|
||||
<motion.a
|
||||
key={i}
|
||||
href={q.href}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.7, delay: i * 0.15, ease: EASE }}
|
||||
className="group relative p-8 md:p-10 rounded-sm border border-white/10 bg-white/[0.02] hover:bg-white/[0.04] transition-all duration-500 hover:border-white/20"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-0.5 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
<div className="text-5xl font-bold mb-6 opacity-20" style={{ color: CINNABAR }}>0{i + 1}</div>
|
||||
<h3 className="text-xl md:text-2xl font-semibold text-white mb-4 leading-snug">
|
||||
{q.question}
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed mb-6">
|
||||
{q.description}
|
||||
</p>
|
||||
<div className="inline-flex items-center gap-2 text-sm font-medium" style={{ color: CINNABAR }}>
|
||||
深入了解
|
||||
<ChevronRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32" style={{ backgroundColor: '#0D1218' }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, ease: EASE }}
|
||||
>
|
||||
<div className="inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
核心服务
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
四大服务板块
|
||||
</h2>
|
||||
</motion.div>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: EASE }}
|
||||
className="text-gray-400 max-w-md"
|
||||
>
|
||||
从战略规划到技术落地，为企业数字化转型提供全链路专业服务
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}>
|
||||
{SERVICES.map((service, i) => (
|
||||
<motion.a
|
||||
key={i}
|
||||
href={service.href}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.5, delay: i * 0.1, ease: EASE }}
|
||||
className="group relative p-8 md:p-10 transition-all duration-500 hover:bg-white/[0.03]"
|
||||
style={{ backgroundColor: '#0D1218' }}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-12 rounded-sm flex items-center justify-center mb-6 transition-colors duration-300"
|
||||
style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}
|
||||
>
|
||||
{service.icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-3">{service.title}</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-6">{service.desc}</p>
|
||||
<div className="inline-flex items-center gap-1 text-sm font-medium text-gray-400 group-hover:text-white transition-colors duration-300">
|
||||
了解更多
|
||||
<ArrowRight className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.7, delay: 0.4, ease: EASE }}
|
||||
className="mt-16 pt-16 border-t border-white/5"
|
||||
>
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-lg font-medium text-white mb-2">覆盖八大行业</h3>
|
||||
<p className="text-gray-500 text-sm">深耕垂直领域，提供行业专属解决方案</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{INDUSTRIES.map((ind, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 px-5 py-2.5 rounded-full border border-white/10 text-gray-400 hover:border-white/20 hover:text-white transition-all duration-300"
|
||||
>
|
||||
{ind.icon}
|
||||
<span className="text-sm">{ind.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CasesSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, ease: EASE }}
|
||||
>
|
||||
<div className="inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
客户案例
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
可衡量的<span style={{ color: CINNABAR }}>业务成果</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
<motion.a
|
||||
href="/solutions"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: EASE }}
|
||||
className="group inline-flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
查看全部案例
|
||||
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{CASES.map((caseItem, i) => (
|
||||
<motion.article
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.7, delay: i * 0.15, ease: EASE }}
|
||||
className="group relative flex flex-col rounded-sm border border-white/10 bg-white/[0.02] overflow-hidden hover:border-white/20 transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-0.5 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
|
||||
<div className="p-6 md:p-8 flex-1">
|
||||
<div className="inline-block px-3 py-1 rounded text-xs font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
{caseItem.industry}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-6 leading-snug">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
{caseItem.impact.map((imp, j) => (
|
||||
<div key={j} className="border-l-2 pl-3" style={{ borderColor: CINNABAR }}>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{imp.value}{imp.suffix}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">{imp.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<blockquote className="text-gray-400 text-sm italic leading-relaxed border-l-2 border-white/10 pl-4">
|
||||
「{caseItem.quote}」
|
||||
</blockquote>
|
||||
<p className="text-xs text-gray-600 mt-3">— {caseItem.author}</p>
|
||||
</div>
|
||||
</motion.article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32" style={{ backgroundColor: '#0D1218' }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, ease: EASE }}
|
||||
>
|
||||
<div className="inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
行业洞察
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
思想领导力
|
||||
</h2>
|
||||
</motion.div>
|
||||
<motion.a
|
||||
href="/news"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: EASE }}
|
||||
className="group inline-flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
查看全部洞察
|
||||
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{INSIGHTS.map((insight, i) => (
|
||||
<motion.article
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.6, delay: i * 0.1, ease: EASE }}
|
||||
className="group cursor-pointer"
|
||||
>
|
||||
<div className="aspect-[16/9] rounded-sm mb-5 relative overflow-hidden border border-white/10" style={{ backgroundColor: '#151B23' }}>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<TrendingUp className="w-12 h-12 text-white/10" />
|
||||
</div>
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="px-3 py-1 rounded text-xs font-medium" style={{ backgroundColor: CINNABAR, color: 'white' }}>
|
||||
{insight.tag}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||
{insight.title}
|
||||
</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">
|
||||
{insight.desc}
|
||||
</p>
|
||||
</motion.article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 relative overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<div className="absolute inset-0">
|
||||
<div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] rounded-full opacity-20"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse, ${CINNABAR} 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${CONTAINER} relative z-10`}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-6">
|
||||
准备好开启您的
|
||||
<span style={{ color: CINNABAR }}> 数字化转型 </span>
|
||||
之旅了吗？
|
||||
</h2>
|
||||
<p className="text-gray-400 text-lg mb-10 max-w-xl mx-auto">
|
||||
与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group inline-flex items-center gap-2 px-8 py-4 text-white font-medium rounded-sm transition-all duration-300 hover:shadow-lg hover:shadow-[#C41E3A]/20"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
立即咨询
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="inline-flex items-center gap-2 px-8 py-4 text-white font-medium rounded-sm border border-white/20 hover:bg-white/5 transition-all duration-300"
|
||||
>
|
||||
关于我们
|
||||
</StaticLink>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV5() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<QuestionsSection />
|
||||
<ServicesSection />
|
||||
<CasesSection />
|
||||
<InsightsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,497 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import {
|
||||
ArrowUpRight, ChevronDown,
|
||||
Target, Briefcase, Cpu, Brain,
|
||||
BarChart2,
|
||||
Building, Factory, ShoppingCart, Stethoscope,
|
||||
GraduationCap, Globe,
|
||||
} from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const INK = '#0A0E14';
|
||||
const INK_LIGHT = '#0F1419';
|
||||
const CINNABAR = '#C41E3A';
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const CONTAINER = 'max-w-[1200px] mx-auto px-6 lg:px-8';
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '战略咨询',
|
||||
desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。',
|
||||
href: '/services/consulting',
|
||||
icon: <Target className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '企业软件',
|
||||
desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。',
|
||||
href: '/products',
|
||||
icon: <Briefcase className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '技术服务',
|
||||
desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
|
||||
href: '/services',
|
||||
icon: <Cpu className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'AI 赋能',
|
||||
desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。',
|
||||
href: '/services/ai',
|
||||
icon: <Brain className="w-5 h-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: <Factory className="w-5 h-5" />, name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化' },
|
||||
{ icon: <ShoppingCart className="w-5 h-5" />, name: '贸易零售', desc: '全渠道零售、会员体系、数字营销' },
|
||||
{ icon: <Stethoscope className="w-5 h-5" />, name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗' },
|
||||
{ icon: <GraduationCap className="w-5 h-5" />, name: '教育科技', desc: '在线教育、学习管理、教育数字化' },
|
||||
{ icon: <Building className="w-5 h-5" />, name: '金融服务', desc: '金融科技、风控合规、数据中台' },
|
||||
{ icon: <Globe className="w-5 h-5" />, name: '跨境电商', desc: '独立站、跨境支付、全球化运营' },
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 500, suffix: '+', label: '企业客户服务' },
|
||||
{ value: 12, suffix: '年', label: '行业深耕经验' },
|
||||
{ value: 98, suffix: '%', label: '客户满意度' },
|
||||
{ value: 200, suffix: '+', label: '专业技术顾问' },
|
||||
];
|
||||
|
||||
const INSIGHTS = [
|
||||
{
|
||||
tag: '研究报告',
|
||||
date: '2026.06',
|
||||
title: '2026 中国企业数字化转型趋势报告',
|
||||
desc: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。',
|
||||
readTime: '12 分钟阅读',
|
||||
},
|
||||
{
|
||||
tag: '行业洞察',
|
||||
date: '2026.05',
|
||||
title: 'AI 浪潮下的企业数字化升级路径',
|
||||
desc: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。',
|
||||
readTime: '8 分钟阅读',
|
||||
},
|
||||
{
|
||||
tag: '实践指南',
|
||||
date: '2026.04',
|
||||
title: 'ERP 选型避坑指南：从需求到落地全流程',
|
||||
desc: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。',
|
||||
readTime: '15 分钟阅读',
|
||||
},
|
||||
];
|
||||
|
||||
const APPROACH_STEPS = [
|
||||
{
|
||||
step: '01',
|
||||
title: '诊断评估',
|
||||
desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。',
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: '方案设计',
|
||||
desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。',
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '交付落地',
|
||||
desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。',
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: '持续运营',
|
||||
desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。',
|
||||
},
|
||||
];
|
||||
|
||||
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 FadeIn({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.7, delay, ease: EASE }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center" style={{ backgroundColor: INK }}>
|
||||
<div className={`${CONTAINER} w-full py-32 lg:py-40`}>
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="text-sm tracking-[0.2em] uppercase mb-8"
|
||||
style={{ color: CINNABAR }}
|
||||
>
|
||||
数字化转型伙伴
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.1, ease: EASE }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-light text-white leading-[1.15] tracking-tight mb-10"
|
||||
>
|
||||
以战略远见，
|
||||
<br />
|
||||
驱动<span style={{ color: CINNABAR, fontWeight: 400 }}>数字化</span>未来
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.25, ease: EASE }}
|
||||
className="text-lg text-gray-400 max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
|
||||
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: EASE }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group inline-flex items-center gap-2 text-white text-sm font-medium tracking-wide pb-1 border-b border-white/20 hover:border-white transition-colors duration-300"
|
||||
>
|
||||
预约咨询
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="group inline-flex items-center gap-2 text-gray-400 text-sm font-medium tracking-wide pb-1 border-b border-transparent hover:border-gray-500 hover:text-white transition-colors duration-300"
|
||||
>
|
||||
了解我们的服务
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, delay: 1 }}
|
||||
className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3"
|
||||
>
|
||||
<span className="text-xs text-gray-600 tracking-widest uppercase">Scroll</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 6, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
|
||||
>
|
||||
<ChevronDown className="w-4 h-4 text-gray-600" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, start, delay }: { value: number; suffix: string; label: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start);
|
||||
return (
|
||||
<FadeIn delay={delay} className="text-center lg:text-left">
|
||||
<div className="text-4xl lg:text-5xl font-light text-white mb-3 tracking-tight">
|
||||
{count}{suffix}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 tracking-wide">{label}</div>
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section ref={ref} className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
|
||||
{STATS.map((stat, i) => (
|
||||
<StatItem key={i} {...stat} start={isInView} delay={i * 0.1} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-20">
|
||||
<div className="text-sm tracking-[0.2em] uppercase mb-4" style={{ color: CINNABAR }}>
|
||||
核心服务
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-light text-white tracking-tight leading-tight max-w-2xl">
|
||||
四位一体的数字化服务体系
|
||||
</h2>
|
||||
</FadeIn>
|
||||
|
||||
<div className="space-y-px" style={{ backgroundColor: 'rgba(255,255,255,0.06)' }}>
|
||||
{SERVICES.map((service, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<a
|
||||
href={service.href}
|
||||
className="group relative block py-10 lg:py-12 transition-colors duration-500 hover:bg-white/[0.02]"
|
||||
style={{ backgroundColor: INK }}
|
||||
>
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-6 lg:gap-12">
|
||||
<div className="text-sm text-gray-600 font-mono tracking-wider pt-1">
|
||||
{service.number}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-10 h-10 rounded-sm flex items-center justify-center text-gray-400 group-hover:text-white transition-colors duration-300" style={{ backgroundColor: 'rgba(255,255,255,0.04)' }}>
|
||||
{service.icon}
|
||||
</div>
|
||||
<h3 className="text-xl md:text-2xl font-light text-white group-hover:translate-x-2 transition-transform duration-500">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-500 leading-relaxed max-w-2xl pl-14">
|
||||
{service.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="hidden lg:flex items-center justify-center w-10 h-10">
|
||||
<ArrowUpRight className="w-5 h-5 text-gray-600 group-hover:text-white group-hover:translate-x-1 group-hover:-translate-y-1 transition-all duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 h-px w-0 group-hover:w-full transition-all duration-700"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
/>
|
||||
</a>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function IndustriesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-16 mb-16">
|
||||
<FadeIn className="lg:w-1/3">
|
||||
<div className="text-sm tracking-[0.2em] uppercase mb-4" style={{ color: CINNABAR }}>
|
||||
行业覆盖
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-light text-white tracking-tight leading-tight">
|
||||
深耕六大行业
|
||||
</h2>
|
||||
<p className="text-gray-500 mt-6 leading-relaxed">
|
||||
专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="lg:w-2/3">
|
||||
<div className="grid sm:grid-cols-2 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.06)' }}>
|
||||
{INDUSTRIES.map((ind, i) => (
|
||||
<FadeIn key={i} delay={i * 0.08}>
|
||||
<div
|
||||
className="p-8 transition-colors duration-300 hover:bg-white/[0.02]"
|
||||
style={{ backgroundColor: INK_LIGHT }}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-sm flex items-center justify-center mb-5 text-gray-400" style={{ backgroundColor: 'rgba(255,255,255,0.04)' }}>
|
||||
{ind.icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-2">{ind.name}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{ind.desc}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ApproachSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-20 max-w-2xl">
|
||||
<div className="text-sm tracking-[0.2em] uppercase mb-4" style={{ color: CINNABAR }}>
|
||||
方法论
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-light text-white tracking-tight leading-tight">
|
||||
四步交付法，确保每一个项目成功落地
|
||||
</h2>
|
||||
</FadeIn>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.06)' }}>
|
||||
{APPROACH_STEPS.map((step, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<div className="p-8 lg:p-10 h-full" style={{ backgroundColor: INK }}>
|
||||
<div className="text-5xl font-light mb-6" style={{ color: CINNABAR }}>
|
||||
{step.step}
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-3">{step.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{step.desc}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-16">
|
||||
<FadeIn>
|
||||
<div className="text-sm tracking-[0.2em] uppercase mb-4" style={{ color: CINNABAR }}>
|
||||
思想领导力
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-light text-white tracking-tight">
|
||||
最新洞察
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/news"
|
||||
className="group inline-flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-colors duration-300"
|
||||
>
|
||||
查看全部
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 lg:gap-10">
|
||||
{INSIGHTS.map((insight, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<article className="group cursor-pointer">
|
||||
<div className="aspect-[4/3] mb-6 overflow-hidden" style={{ backgroundColor: '#151B23' }}>
|
||||
<div className="w-full h-full flex items-center justify-center transition-transform duration-700 group-hover:scale-105">
|
||||
<BarChart2 className="w-16 h-16 text-white/5" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<span className="text-xs tracking-wider uppercase" style={{ color: CINNABAR }}>
|
||||
{insight.tag}
|
||||
</span>
|
||||
<span className="text-xs text-gray-600">{insight.date}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-3 leading-snug group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||
{insight.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mb-4">
|
||||
{insight.desc}
|
||||
</p>
|
||||
<span className="text-xs text-gray-600">{insight.readTime}</span>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="max-w-3xl text-center mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-light text-white tracking-tight leading-tight mb-8">
|
||||
准备好开启您的数字化转型之旅了吗？
|
||||
</h2>
|
||||
<p className="text-gray-400 mb-12 leading-relaxed max-w-xl mx-auto">
|
||||
与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-8">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group inline-flex items-center gap-2 text-white text-sm font-medium tracking-wide pb-1 border-b border-white/20 hover:border-white transition-colors duration-300"
|
||||
>
|
||||
预约咨询
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="group inline-flex items-center gap-2 text-gray-400 text-sm font-medium tracking-wide pb-1 border-b border-transparent hover:border-gray-500 hover:text-white transition-colors duration-300"
|
||||
>
|
||||
关于我们
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV6() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<ServicesSection />
|
||||
<IndustriesSection />
|
||||
<ApproachSection />
|
||||
<InsightsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,767 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useScroll, useTransform, useInView } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import {
|
||||
ArrowRight, ArrowUpRight, ChevronDown,
|
||||
Target, Briefcase, Cpu, Brain,
|
||||
BarChart2,
|
||||
Building, Factory, ShoppingCart, Stethoscope,
|
||||
GraduationCap, Globe,
|
||||
Quote,
|
||||
} from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const INK = '#0A0E14';
|
||||
const INK_LIGHT = '#0F1419';
|
||||
const INK_LIGHTER = '#151B23';
|
||||
const CINNABAR = '#C41E3A';
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const CONTAINER = 'max-w-[1280px] mx-auto px-6 lg:px-8';
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '战略咨询',
|
||||
desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。',
|
||||
href: '/services/consulting',
|
||||
icon: <Target className="w-6 h-6" />,
|
||||
highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理'],
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '企业软件',
|
||||
desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。',
|
||||
href: '/products',
|
||||
icon: <Briefcase className="w-6 h-6" />,
|
||||
highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能'],
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '技术服务',
|
||||
desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
|
||||
href: '/services',
|
||||
icon: <Cpu className="w-6 h-6" />,
|
||||
highlights: ['系统集成与架构', '数据中台建设', '云原生迁移'],
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'AI 赋能',
|
||||
desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。',
|
||||
href: '/services/ai',
|
||||
icon: <Brain className="w-6 h-6" />,
|
||||
highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化'],
|
||||
},
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: <Factory className="w-6 h-6" />, name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+' },
|
||||
{ icon: <ShoppingCart className="w-6 h-6" />, name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+' },
|
||||
{ icon: <Stethoscope className="w-6 h-6" />, name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+' },
|
||||
{ icon: <GraduationCap className="w-6 h-6" />, name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+' },
|
||||
{ icon: <Building className="w-6 h-6" />, name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+' },
|
||||
{ icon: <Globe className="w-6 h-6" />, name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+' },
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 500, suffix: '+', label: '企业客户', sub: '累计服务' },
|
||||
{ value: 12, suffix: '年', label: '行业经验', sub: '深耕积累' },
|
||||
{ value: 98, suffix: '%', label: '客户满意度', sub: '持续服务' },
|
||||
{ value: 200, suffix: '+', label: '专业顾问', sub: '技术专家' },
|
||||
];
|
||||
|
||||
const CASES = [
|
||||
{
|
||||
industry: '智能制造',
|
||||
title: '大型制造企业 ERP 全面升级项目',
|
||||
description: '为某上市制造企业实施 ERP 系统升级，覆盖生产、供应链、财务等核心模块，实现业务流程全面数字化。',
|
||||
metrics: [
|
||||
{ value: '40%', label: '生产效率提升' },
|
||||
{ value: '30天', label: '核心系统上线' },
|
||||
{ value: '99.5%', label: '数据准确率' },
|
||||
],
|
||||
quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。',
|
||||
author: 'CTO',
|
||||
company: '某上市制造企业',
|
||||
},
|
||||
{
|
||||
industry: '贸易零售',
|
||||
title: '连锁零售全渠道数字化升级',
|
||||
description: '助力区域零售龙头构建全渠道零售体系，打通线上线下会员、库存、营销体系，实现营收快速增长。',
|
||||
metrics: [
|
||||
{ value: '25%', label: '营收增长' },
|
||||
{ value: '50%', label: '库存周转优化' },
|
||||
{ value: '3x', label: '会员复购率' },
|
||||
],
|
||||
quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。',
|
||||
author: 'CEO',
|
||||
company: '某区域零售龙头',
|
||||
},
|
||||
];
|
||||
|
||||
const INSIGHTS = [
|
||||
{
|
||||
category: '研究报告',
|
||||
date: '2026.06',
|
||||
title: '2026 中国企业数字化转型趋势报告',
|
||||
excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。',
|
||||
readTime: '12 分钟',
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
category: '行业洞察',
|
||||
date: '2026.05',
|
||||
title: 'AI 浪潮下的企业数字化升级路径',
|
||||
excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。',
|
||||
readTime: '8 分钟',
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
category: '实践指南',
|
||||
date: '2026.04',
|
||||
title: 'ERP 选型避坑指南：从需求到落地全流程',
|
||||
excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。',
|
||||
readTime: '15 分钟',
|
||||
featured: false,
|
||||
},
|
||||
];
|
||||
|
||||
const APPROACH = [
|
||||
{
|
||||
step: '01',
|
||||
title: '诊断评估',
|
||||
desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。',
|
||||
duration: '2-4 周',
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: '方案设计',
|
||||
desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。',
|
||||
duration: '4-6 周',
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '交付落地',
|
||||
desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。',
|
||||
duration: '3-9 月',
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: '持续运营',
|
||||
desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。',
|
||||
duration: '长期陪伴',
|
||||
},
|
||||
];
|
||||
|
||||
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 FadeIn({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.8, delay, ease: EASE }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, sub, start, delay }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start);
|
||||
return (
|
||||
<FadeIn delay={delay}>
|
||||
<div className="relative">
|
||||
<div className="text-5xl lg:text-6xl font-bold text-white tracking-tight mb-2">
|
||||
{count}<span style={{ color: CINNABAR }}>{suffix}</span>
|
||||
</div>
|
||||
<div className="text-white font-medium">{label}</div>
|
||||
<div className="text-sm text-gray-500 mt-1">{sub}</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, 120]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0.3]);
|
||||
|
||||
return (
|
||||
<section ref={containerRef} className="relative min-h-screen flex items-center overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-1/2 h-full opacity-20"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, transparent 40%, ${CINNABAR}30 100%)`,
|
||||
clipPath: 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 w-full h-1/3"
|
||||
style={{
|
||||
background: `linear-gradient(to top, ${INK_LIGHT} 0%, transparent 100%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
||||
backgroundSize: '80px 80px',
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<motion.div style={{ y, opacity }} className={`${CONTAINER} relative z-10 w-full py-32 lg:py-40`}>
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="flex items-center gap-4 mb-8"
|
||||
>
|
||||
<div className="w-12 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase text-gray-400">
|
||||
Digital Transformation Partner
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.1, ease: EASE }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.95] tracking-tight mb-10"
|
||||
>
|
||||
以战略远见
|
||||
<br />
|
||||
<span className="relative inline-block">
|
||||
驱动
|
||||
<span style={{ color: CINNABAR }}>数字化</span>
|
||||
<svg className="absolute -bottom-2 left-0 w-full" height="8" viewBox="0 0 200 8" fill="none" preserveAspectRatio="none">
|
||||
<path d="M0 4 Q 50 0, 100 4 T 200 4" stroke={CINNABAR} strokeWidth="2" fill="none" />
|
||||
</svg>
|
||||
</span>
|
||||
<br />
|
||||
未来
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3, ease: EASE }}
|
||||
className="text-xl text-gray-400 max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
|
||||
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.45, ease: EASE }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group relative inline-flex items-center gap-3 px-8 py-4 text-white font-medium overflow-hidden"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
<span className="relative z-10">预约咨询</span>
|
||||
<ArrowRight className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
<div className="absolute inset-0 bg-black/20 translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="group inline-flex items-center gap-2 px-8 py-4 text-white font-medium border border-white/20 hover:border-white/50 hover:bg-white/5 transition-all duration-300"
|
||||
>
|
||||
了解服务
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, delay: 1.2 }}
|
||||
className="absolute bottom-12 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3"
|
||||
>
|
||||
<span className="text-xs text-gray-600 tracking-[0.3em] uppercase">探索更多</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
|
||||
>
|
||||
<ChevronDown className="w-5 h-5 text-gray-500" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section ref={ref} className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-16">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
实力验证
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
数据印证专业
|
||||
</h2>
|
||||
</FadeIn>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
|
||||
{STATS.map((stat, i) => (
|
||||
<StatItem key={i} {...stat} start={isInView} delay={i * 0.12} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
|
||||
<FadeIn className="lg:max-w-xl">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
核心服务
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四位一体的<br />数字化服务体系
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-gray-400 max-w-md leading-relaxed">
|
||||
从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有专家陪伴。
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.08)' }}>
|
||||
{SERVICES.map((service, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<a
|
||||
href={service.href}
|
||||
className="group relative block p-8 lg:p-10 transition-all duration-500 hover:bg-white/[0.02]"
|
||||
style={{ backgroundColor: INK }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-0.5 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
|
||||
<div className="flex items-start gap-5 mb-6">
|
||||
<div
|
||||
className="w-14 h-14 flex items-center justify-center shrink-0 transition-all duration-500 group-hover:scale-110"
|
||||
style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}
|
||||
>
|
||||
{service.icon}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 font-mono tracking-wider mb-1">{service.number}</div>
|
||||
<h3 className="text-2xl font-bold text-white group-hover:translate-x-1 transition-transform duration-500">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-400 leading-relaxed mb-6">
|
||||
{service.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{service.highlights.map((h, j) => (
|
||||
<span key={j} className="px-3 py-1 text-xs text-gray-500 border border-white/10 rounded-sm">
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-sm font-medium" style={{ color: CINNABAR }}>
|
||||
了解详情
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</a>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function IndustriesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-16 mb-16">
|
||||
<FadeIn className="lg:w-1/3">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
行业覆盖
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
深耕六大行业
|
||||
</h2>
|
||||
<p className="text-gray-400 leading-relaxed">
|
||||
专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。
|
||||
每一个行业都有专属的专家团队与成熟的方法论。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="lg:w-2/3">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.08)' }}>
|
||||
{INDUSTRIES.map((ind, i) => (
|
||||
<FadeIn key={i} delay={i * 0.08}>
|
||||
<div
|
||||
className="group p-8 transition-all duration-500 hover:bg-white/[0.03] cursor-pointer"
|
||||
style={{ backgroundColor: INK_LIGHT }}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-12 flex items-center justify-center mb-5 text-gray-400 group-hover:text-white transition-colors duration-300"
|
||||
style={{ backgroundColor: 'rgba(255,255,255,0.04)' }}
|
||||
>
|
||||
{ind.icon}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-bold text-white">{ind.name}</h3>
|
||||
<span className="text-xs px-2 py-0.5 rounded-sm" style={{ backgroundColor: 'rgba(196, 30, 58, 0.15)', color: CINNABAR }}>
|
||||
{ind.count}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{ind.desc}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CasesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<FadeIn>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
客户案例
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
可衡量的业务成果
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/solutions"
|
||||
className="group inline-flex items-center gap-2 text-white font-medium"
|
||||
>
|
||||
查看全部案例
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{CASES.map((caseItem, i) => (
|
||||
<FadeIn key={i} delay={i * 0.15}>
|
||||
<article className="group relative overflow-hidden border border-white/10 hover:border-white/20 transition-all duration-500">
|
||||
<div className="grid lg:grid-cols-5 gap-0">
|
||||
<div className="lg:col-span-3 p-8 lg:p-10" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<span className="px-4 py-1.5 text-xs font-medium tracking-wide" style={{ backgroundColor: CINNABAR, color: 'white' }}>
|
||||
{caseItem.industry}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed mb-8">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
<div className="flex items-start gap-4 pt-6 border-t border-white/10">
|
||||
<Quote className="w-8 h-8 shrink-0 mt-1" style={{ color: CINNABAR, opacity: 0.5 }} />
|
||||
<div>
|
||||
<p className="text-gray-300 italic leading-relaxed mb-3">
|
||||
"{caseItem.quote}"
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
— {caseItem.author}，{caseItem.company}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 p-8 lg:p-10 flex flex-col justify-center" style={{ backgroundColor: INK_LIGHTER }}>
|
||||
<div className="text-sm text-gray-500 mb-6 tracking-wide">核心成果</div>
|
||||
<div className="space-y-6">
|
||||
{caseItem.metrics.map((metric, j) => (
|
||||
<div key={j} className="flex items-baseline gap-4">
|
||||
<div className="text-4xl font-bold text-white">
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-gray-400">{metric.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-1 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ApproachSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-20 max-w-2xl">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
方法论
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四步交付法
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-6 leading-relaxed">
|
||||
确保每一个项目成功落地的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute top-16 left-0 right-0 h-px hidden lg:block" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} />
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{APPROACH.map((step, i) => (
|
||||
<FadeIn key={i} delay={i * 0.12}>
|
||||
<div className="relative h-full p-8 border border-white/10 hover:border-white/20 transition-all duration-500 group" style={{ backgroundColor: INK }}>
|
||||
<div className="absolute -top-3 left-8 px-4" style={{ backgroundColor: INK }}>
|
||||
<span className="text-6xl font-bold" style={{ color: CINNABAR }}>
|
||||
{step.step}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pt-12">
|
||||
<h3 className="text-xl font-bold text-white mb-3">{step.title}</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-4">{step.desc}</p>
|
||||
<div className="inline-block px-3 py-1 text-xs text-gray-400 border border-white/10">
|
||||
周期：{step.duration}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<FadeIn>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
思想领导力
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
最新洞察
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/news"
|
||||
className="group inline-flex items-center gap-2 text-white font-medium"
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.08)' }}>
|
||||
{INSIGHTS.map((insight, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<article className="group cursor-pointer h-full flex flex-col" style={{ backgroundColor: INK }}>
|
||||
<div className={`relative overflow-hidden ${insight.featured ? 'aspect-[16/10]' : 'aspect-[16/9]'}`} style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-700 group-hover:scale-110">
|
||||
<BarChart2 className="w-20 h-20 text-white/5" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
|
||||
<div className="absolute top-6 left-6">
|
||||
<span className="px-3 py-1 text-xs font-medium tracking-wide" style={{ backgroundColor: CINNABAR, color: 'white' }}>
|
||||
{insight.category}
|
||||
</span>
|
||||
</div>
|
||||
{insight.featured && (
|
||||
<div className="absolute bottom-6 right-6">
|
||||
<span className="px-3 py-1 text-xs bg-white/10 backdrop-blur-sm text-white border border-white/20">
|
||||
精选推荐
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-6 lg:p-8 flex-1 flex flex-col">
|
||||
<div className="flex items-center gap-4 mb-4 text-sm text-gray-600">
|
||||
<span>{insight.date}</span>
|
||||
<span>·</span>
|
||||
<span>{insight.readTime}</span>
|
||||
</div>
|
||||
<h3 className={`font-bold text-white mb-4 leading-snug group-hover:text-[#C41E3A] transition-colors duration-300 ${insight.featured ? 'text-xl' : 'text-lg'}`}>
|
||||
{insight.title}
|
||||
</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed flex-1">
|
||||
{insight.excerpt}
|
||||
</p>
|
||||
<div className="mt-6 pt-6 border-t border-white/5">
|
||||
<span className="inline-flex items-center gap-2 text-sm font-medium" style={{ color: CINNABAR }}>
|
||||
阅读全文
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute -top-1/2 -right-1/4 w-3/4 h-full opacity-30"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at center, ${CINNABAR}40 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${CONTAINER} relative z-10`}>
|
||||
<FadeIn className="max-w-4xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
开启合作
|
||||
</span>
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
准备好开启您的
|
||||
<br />
|
||||
<span style={{ color: CINNABAR }}>数字化转型</span>之旅了吗？
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group relative inline-flex items-center gap-3 px-10 py-5 text-white font-medium text-lg overflow-hidden"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
<span className="relative z-10">立即咨询</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
<div className="absolute inset-0 bg-black/20 translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="group inline-flex items-center gap-2 px-10 py-5 text-white font-medium text-lg border border-white/20 hover:border-white/50 hover:bg-white/5 transition-all duration-300"
|
||||
>
|
||||
关于我们
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV7() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<ServicesSection />
|
||||
<IndustriesSection />
|
||||
<CasesSection />
|
||||
<ApproachSection />
|
||||
<InsightsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,964 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useScroll, useTransform, useInView } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import {
|
||||
ArrowRight, ArrowUpRight, ChevronDown,
|
||||
Target, Briefcase, Cpu, Brain,
|
||||
BarChart3,
|
||||
Building2, Factory, ShoppingBag, Heart,
|
||||
GraduationCap, Globe2,
|
||||
Quote, ArrowDownRight,
|
||||
} from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const INK = '#0A0E14';
|
||||
const INK_LIGHT = '#0F1419';
|
||||
const INK_LIGHTER = '#151B23';
|
||||
const CINNABAR = '#C41E3A';
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const CONTAINER = 'max-w-[1320px] mx-auto px-6 lg:px-10';
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '战略咨询',
|
||||
subtitle: 'Strategy Consulting',
|
||||
desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。',
|
||||
href: '/services/consulting',
|
||||
icon: <Target className="w-7 h-7" />,
|
||||
highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理', '技术选型顾问'],
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '企业软件',
|
||||
subtitle: 'Enterprise Software',
|
||||
desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。',
|
||||
href: '/products',
|
||||
icon: <Briefcase className="w-7 h-7" />,
|
||||
highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能', '低代码平台'],
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '技术服务',
|
||||
subtitle: 'Technology Services',
|
||||
desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
|
||||
href: '/services',
|
||||
icon: <Cpu className="w-7 h-7" />,
|
||||
highlights: ['系统集成与架构', '数据中台建设', '云原生迁移', '研发效能提升'],
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'AI 赋能',
|
||||
subtitle: 'AI Empowerment',
|
||||
desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。',
|
||||
href: '/services/ai',
|
||||
icon: <Brain className="w-7 h-7" />,
|
||||
highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化', '数据治理'],
|
||||
},
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: <Factory className="w-6 h-6" />, name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+' },
|
||||
{ icon: <ShoppingBag className="w-6 h-6" />, name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+' },
|
||||
{ icon: <Heart className="w-6 h-6" />, name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+' },
|
||||
{ icon: <GraduationCap className="w-6 h-6" />, name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+' },
|
||||
{ icon: <Building2 className="w-6 h-6" />, name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+' },
|
||||
{ icon: <Globe2 className="w-6 h-6" />, name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+' },
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 500, suffix: '+', label: '企业客户', sub: '累计服务' },
|
||||
{ value: 12, suffix: '年', label: '行业经验', sub: '深耕积累' },
|
||||
{ value: 98, suffix: '%', label: '客户满意度', sub: '持续服务' },
|
||||
{ value: 200, suffix: '+', label: '专业顾问', sub: '技术专家' },
|
||||
];
|
||||
|
||||
const CASES = [
|
||||
{
|
||||
industry: '智能制造',
|
||||
title: '大型制造企业 ERP 全面升级项目',
|
||||
description: '为某上市制造企业实施 ERP 系统升级，覆盖生产、供应链、财务等核心模块，实现业务流程全面数字化。项目周期 9 个月，核心系统一次性上线成功。',
|
||||
metrics: [
|
||||
{ value: '40%', label: '生产效率提升' },
|
||||
{ value: '25%', label: '库存成本下降' },
|
||||
{ value: '99.5%', label: '数据准确率' },
|
||||
],
|
||||
quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。',
|
||||
author: 'CTO',
|
||||
company: '某上市制造企业',
|
||||
},
|
||||
{
|
||||
industry: '贸易零售',
|
||||
title: '连锁零售全渠道数字化升级',
|
||||
description: '助力区域零售龙头构建全渠道零售体系，打通线上线下会员、库存、营销体系，实现营收快速增长。项目覆盖 200+ 门店。',
|
||||
metrics: [
|
||||
{ value: '25%', label: '营收增长' },
|
||||
{ value: '50%', label: '库存周转优化' },
|
||||
{ value: '3x', label: '会员复购率' },
|
||||
],
|
||||
quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。',
|
||||
author: 'CEO',
|
||||
company: '某区域零售龙头',
|
||||
},
|
||||
];
|
||||
|
||||
const INSIGHTS = [
|
||||
{
|
||||
category: '研究报告',
|
||||
date: '2026.06.15',
|
||||
title: '2026 中国企业数字化转型趋势报告',
|
||||
excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。报告共 120 页，包含 23 个行业标杆案例。',
|
||||
readTime: '12 分钟',
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
category: '行业洞察',
|
||||
date: '2026.05.28',
|
||||
title: 'AI 浪潮下的企业数字化升级路径',
|
||||
excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。',
|
||||
readTime: '8 分钟',
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
category: '实践指南',
|
||||
date: '2026.04.20',
|
||||
title: 'ERP 选型避坑指南：从需求到落地全流程',
|
||||
excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。',
|
||||
readTime: '15 分钟',
|
||||
featured: false,
|
||||
},
|
||||
];
|
||||
|
||||
const APPROACH = [
|
||||
{
|
||||
step: '01',
|
||||
title: '诊断评估',
|
||||
desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。',
|
||||
duration: '2-4 周',
|
||||
deliverables: ['现状评估报告', '转型路线图', '优先级排序'],
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: '方案设计',
|
||||
desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。',
|
||||
duration: '4-6 周',
|
||||
deliverables: ['技术架构设计', '实施计划', '成本收益分析'],
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '交付落地',
|
||||
desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。',
|
||||
duration: '3-9 月',
|
||||
deliverables: ['系统上线', '知识转移', '运维手册'],
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: '持续运营',
|
||||
desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。',
|
||||
duration: '长期陪伴',
|
||||
deliverables: ['运维支持', '持续优化', '定期复盘'],
|
||||
},
|
||||
];
|
||||
|
||||
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 NoiseOverlay() {
|
||||
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 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 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: '180px 180px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DiagonalLine({ className = '', color = 'rgba(255,255,255,0.06)' }: { className?: string; color?: string }) {
|
||||
return (
|
||||
<div className={`absolute ${className}`}>
|
||||
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<line x1="0" y1="100" x2="100" y2="0" stroke={color} strokeWidth="0.5" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FadeIn({ children, delay = 0, className = '', y = 30 }: { children: React.ReactNode; delay?: number; className?: string; y?: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.9, delay, ease: EASE_OUT }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, sub, start, delay }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start);
|
||||
return (
|
||||
<FadeIn delay={delay}>
|
||||
<div className="relative group">
|
||||
<div className="text-6xl lg:text-7xl font-bold tracking-tight mb-3">
|
||||
<span className="text-white">{count}</span>
|
||||
<span style={{ color: CINNABAR }}>{suffix}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-px" style={{ backgroundColor: CINNABAR }} />
|
||||
<div>
|
||||
<div className="text-white font-medium text-base">{label}</div>
|
||||
<div className="text-sm text-gray-500">{sub}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, 180]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0.2]);
|
||||
const gridY = useTransform(scrollYProgress, [0, 1], [0, -80]);
|
||||
|
||||
return (
|
||||
<section ref={containerRef} className="relative min-h-screen flex items-center overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<motion.div style={{ y: gridY }} className="absolute inset-0 opacity-[0.04]">
|
||||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '120px 120px',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 right-0 w-1/2 h-full"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, transparent 30%, ${CINNABAR}15 100%)`,
|
||||
clipPath: 'polygon(40% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute bottom-0 left-0 w-full h-2/3"
|
||||
style={{
|
||||
background: `linear-gradient(to top, ${INK} 0%, transparent 100%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<DiagonalLine className="top-0 right-[20%] w-[400px] h-[400px]" color="rgba(196,30,58,0.2)" />
|
||||
</div>
|
||||
|
||||
<motion.div style={{ y, opacity }} className={`${CONTAINER} relative z-10 w-full py-36 lg:py-44`}>
|
||||
<div className="grid lg:grid-cols-12 gap-8 items-center">
|
||||
<div className="lg:col-span-9">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.9, ease: EASE_OUT }}
|
||||
className="flex items-center gap-5 mb-10"
|
||||
>
|
||||
<div className="w-16 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.4em] uppercase text-gray-400 font-medium">
|
||||
Digital Transformation Partner
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold text-white leading-[0.9] tracking-tight mb-12"
|
||||
>
|
||||
<div className="flex items-baseline gap-4">
|
||||
<span>以战略远见</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-4 mt-2">
|
||||
<span>驱动</span>
|
||||
<span className="relative inline-block">
|
||||
<span style={{ color: CINNABAR }}>数字化</span>
|
||||
<svg
|
||||
className="absolute -bottom-3 left-0 w-full"
|
||||
height="12"
|
||||
viewBox="0 0 300 12"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0 6 Q 75 0, 150 6 T 300 6"
|
||||
stroke={CINNABAR}
|
||||
strokeWidth="2.5"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>未来</span>
|
||||
</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.35, ease: EASE_OUT }}
|
||||
className="text-xl text-gray-400 max-w-2xl leading-relaxed mb-14"
|
||||
>
|
||||
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
|
||||
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.5, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group relative inline-flex items-center gap-3 px-10 py-5 text-white font-medium text-base overflow-hidden"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
<span className="relative z-10">预约咨询</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 transition-transform duration-500 group-hover:translate-x-2" />
|
||||
<div className="absolute inset-0 bg-black/30 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="group inline-flex items-center gap-3 px-10 py-5 text-white font-medium text-base border border-white/20 hover:border-white/40 hover:bg-white/5 transition-all duration-400"
|
||||
>
|
||||
了解我们的服务
|
||||
<ArrowUpRight className="w-5 h-5 transition-all duration-400 group-hover:translate-x-1 group-hover:-translate-y-1" />
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1, delay: 0.65, ease: EASE_OUT }}
|
||||
className="hidden lg:block lg:col-span-3"
|
||||
>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute -top-10 -left-10 w-24 h-24 border-l-2 border-t-2"
|
||||
style={{ borderColor: CINNABAR }}
|
||||
/>
|
||||
<div className="border border-white/10 p-8" style={{ backgroundColor: 'rgba(15, 20, 25, 0.6)' }}>
|
||||
<div className="text-xs tracking-[0.3em] uppercase text-gray-500 mb-4">Est. 2014</div>
|
||||
<div className="text-4xl font-bold text-white mb-2">12<span style={{ color: CINNABAR }}>年</span></div>
|
||||
<div className="text-sm text-gray-400 mb-6">深耕企业数字化服务</div>
|
||||
<div className="space-y-3 pt-6 border-t border-white/10">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-500">服务企业</span>
|
||||
<span className="text-white font-medium">500+</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-500">专业团队</span>
|
||||
<span className="text-white font-medium">200+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, delay: 1.3 }}
|
||||
className="absolute bottom-14 left-1/2 -translate-x-1/2 flex flex-col items-center gap-4"
|
||||
>
|
||||
<span className="text-xs text-gray-600 tracking-[0.4em] uppercase">Scroll to explore</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
|
||||
>
|
||||
<ChevronDown className="w-6 h-6 text-gray-500" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-120px' });
|
||||
|
||||
return (
|
||||
<section ref={ref} className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)' }} />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)' }} />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="grid lg:grid-cols-12 gap-12 items-start">
|
||||
<FadeIn className="lg:col-span-4">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Proven Results
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
用数据说话<br />的专业实力
|
||||
</h2>
|
||||
<p className="text-gray-400 leading-relaxed">
|
||||
十二年深耕，五百余家企业的共同选择。我们用实实在在的业务成果，赢得客户的长期信赖。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="lg:col-span-8">
|
||||
<div className="grid grid-cols-2 gap-12 lg:gap-16">
|
||||
{STATS.map((stat, i) => (
|
||||
<StatItem key={i} {...stat} start={isInView} delay={0.15 + i * 0.12} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-10 mb-20">
|
||||
<FadeIn className="lg:max-w-2xl">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Our Services
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四位一体的数字化服务体系
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-gray-400 max-w-md leading-relaxed">
|
||||
从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有资深专家陪伴。
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
|
||||
{SERVICES.map((service, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<a
|
||||
href={service.href}
|
||||
className="group relative block p-10 lg:p-14 transition-all duration-600 hover:bg-white/[0.02]"
|
||||
style={{ backgroundColor: INK }}
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full w-0.5 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
/>
|
||||
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div
|
||||
className="w-16 h-16 flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:-translate-y-1"
|
||||
style={{ backgroundColor: 'rgba(196, 30, 58, 0.12)', color: CINNABAR }}
|
||||
>
|
||||
{service.icon}
|
||||
</div>
|
||||
<span className="text-5xl font-bold text-white/5 group-hover:text-white/10 transition-colors duration-500">
|
||||
{service.number}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="text-xs tracking-[0.3em] uppercase text-gray-600 mb-2">{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-gray-400 leading-relaxed mb-8">
|
||||
{service.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-10">
|
||||
{service.highlights.map((h, j) => (
|
||||
<span
|
||||
key={j}
|
||||
className="px-3 py-1.5 text-xs text-gray-500 border border-white/10 group-hover:border-white/20 group-hover:text-gray-400 transition-all duration-300"
|
||||
>
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-3 text-sm font-semibold" style={{ color: CINNABAR }}>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4 transition-all duration-400 group-hover:translate-x-2" />
|
||||
</div>
|
||||
</a>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function IndustriesSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="grid lg:grid-cols-12 gap-16 mb-16">
|
||||
<FadeIn className="lg:col-span-4">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Industries
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
深耕六大<br />核心行业
|
||||
</h2>
|
||||
<p className="text-gray-400 leading-relaxed mb-8">
|
||||
专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。
|
||||
每一个行业都有专属的专家团队与成熟的方法论。
|
||||
</p>
|
||||
<a
|
||||
href="/solutions"
|
||||
className="group inline-flex items-center gap-2 text-white font-medium text-sm"
|
||||
>
|
||||
查看全部行业方案
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" style={{ color: CINNABAR }} />
|
||||
</a>
|
||||
</FadeIn>
|
||||
|
||||
<div className="lg:col-span-8">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
|
||||
{INDUSTRIES.map((ind, i) => (
|
||||
<FadeIn key={i} delay={i * 0.08}>
|
||||
<div
|
||||
className="group p-8 lg:p-10 transition-all duration-500 hover:bg-white/[0.03] cursor-pointer relative overflow-hidden"
|
||||
style={{ backgroundColor: INK_LIGHT }}
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
<div className="absolute top-0 right-0 w-full h-full" style={{ background: `linear-gradient(135deg, ${CINNABAR}20 0%, transparent 70%)` }} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="w-14 h-14 flex items-center justify-center mb-6 text-gray-400 group-hover:text-white transition-all duration-400 group-hover:scale-110"
|
||||
style={{ backgroundColor: 'rgba(255,255,255,0.04)' }}
|
||||
>
|
||||
{ind.icon}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<h3 className="text-lg font-bold text-white">{ind.name}</h3>
|
||||
<span
|
||||
className="text-xs px-2.5 py-1 font-medium"
|
||||
style={{ backgroundColor: 'rgba(196, 30, 58, 0.15)', color: CINNABAR }}
|
||||
>
|
||||
{ind.count} 案例
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{ind.desc}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CasesSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-20">
|
||||
<FadeIn className="md:max-w-2xl">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Case Studies
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
可衡量的业务成果
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/solutions"
|
||||
className="group inline-flex items-center gap-3 text-white font-medium"
|
||||
>
|
||||
查看全部案例
|
||||
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-2" style={{ color: CINNABAR }} />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="space-y-10">
|
||||
{CASES.map((caseItem, i) => (
|
||||
<FadeIn key={i} delay={i * 0.15}>
|
||||
<article className="group relative overflow-hidden border border-white/10 hover:border-white/20 transition-all duration-600">
|
||||
<div className="grid lg:grid-cols-5 gap-0">
|
||||
<div className="lg:col-span-3 p-10 lg:p-14 relative" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute top-0 left-0 w-full h-1 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<span className="px-5 py-2 text-xs font-bold tracking-wider" style={{ backgroundColor: CINNABAR, color: 'white' }}>
|
||||
{caseItem.industry}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 tracking-wide">CASE #{String(i + 1).padStart(2, '0')}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white mb-6 leading-tight group-hover:text-[#C41E3A] transition-colors duration-400">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed mb-10">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-start gap-5 pt-8 border-t border-white/10">
|
||||
<Quote className="w-10 h-10 shrink-0 mt-0.5" style={{ color: CINNABAR, opacity: 0.4 }} />
|
||||
<div>
|
||||
<p className="text-gray-300 italic leading-relaxed mb-4 text-base">
|
||||
"{caseItem.quote}"
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
— {caseItem.author}，{caseItem.company}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 p-10 lg:p-14 flex flex-col justify-center relative" style={{ backgroundColor: INK_LIGHTER }}>
|
||||
<div className="text-sm text-gray-500 mb-8 tracking-[0.2em] uppercase">Key Results</div>
|
||||
<div className="space-y-8">
|
||||
{caseItem.metrics.map((metric, j) => (
|
||||
<div key={j} className="group/metric">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2 group-hover/metric:translate-x-2 transition-transform duration-400">
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-px" style={{ backgroundColor: CINNABAR }} />
|
||||
<div className="text-gray-400">{metric.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ApproachSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-20 max-w-3xl">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Our Approach
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四步交付法，<br />确保每一个项目成功落地
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-8 leading-relaxed text-lg">
|
||||
基于 500+ 项目经验沉淀的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物，让数字化转型可见、可控、可衡量。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute top-[88px] left-0 right-0 h-px hidden lg:block" style={{ background: 'linear-gradient(90deg, rgba(196,30,58,0.3), rgba(196,30,58,0.3))' }} />
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
|
||||
{APPROACH.map((step, i) => (
|
||||
<FadeIn key={i} delay={i * 0.12}>
|
||||
<div className="relative h-full p-8 lg:p-10 border-t-2 border-transparent hover:border-[#C41E3A] transition-all duration-500 group" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute -top-[2px] left-0 w-full flex justify-center hidden lg:flex">
|
||||
<div
|
||||
className="w-4 h-4 rounded-full -mt-[7px] border-2 transition-all duration-400 group-hover:scale-125"
|
||||
style={{ borderColor: CINNABAR, backgroundColor: INK_LIGHT }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<span className="text-6xl font-bold" style={{ color: CINNABAR }}>
|
||||
{step.step}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">{step.title}</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-6">{step.desc}</p>
|
||||
|
||||
<div className="pt-5 border-t border-white/5">
|
||||
<div className="text-xs text-gray-600 mb-3 uppercase tracking-wider">交付物</div>
|
||||
<ul className="space-y-2">
|
||||
{step.deliverables.map((d, j) => (
|
||||
<li key={j} className="flex items-center gap-2 text-xs text-gray-400">
|
||||
<ArrowDownRight className="w-3 h-3" style={{ color: CINNABAR }} />
|
||||
{d}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 inline-block px-3 py-1.5 text-xs text-gray-500 border border-white/10">
|
||||
周期：{step.duration}
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-20">
|
||||
<FadeIn>
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Insights
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
思想领导力
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/news"
|
||||
className="group inline-flex items-center gap-3 text-white font-medium"
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-2" style={{ color: CINNABAR }} />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
|
||||
{INSIGHTS.map((insight, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<article className="group cursor-pointer h-full flex flex-col" style={{ backgroundColor: INK }}>
|
||||
<div className={`relative overflow-hidden ${insight.featured ? 'aspect-[16/9]' : 'aspect-[16/10]'}`} style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-700 group-hover:scale-110">
|
||||
<BarChart3 className="w-24 h-24 text-white/[0.04]" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
|
||||
<div className="absolute top-6 left-6">
|
||||
<span
|
||||
className="px-4 py-1.5 text-xs font-bold tracking-wider"
|
||||
style={{ backgroundColor: insight.featured ? CINNABAR : 'rgba(255,255,255,0.1)', color: 'white' }}
|
||||
>
|
||||
{insight.category}
|
||||
</span>
|
||||
</div>
|
||||
{insight.featured && (
|
||||
<div className="absolute top-6 right-6">
|
||||
<span className="px-4 py-1.5 text-xs font-medium bg-white/10 backdrop-blur-sm text-white border border-white/20">
|
||||
精选推荐
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-8 lg:p-10 flex-1 flex flex-col">
|
||||
<div className="flex items-center gap-4 mb-5 text-sm text-gray-600">
|
||||
<span>{insight.date}</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-700" />
|
||||
<span>{insight.readTime}阅读</span>
|
||||
</div>
|
||||
<h3 className={`font-bold text-white mb-5 leading-snug group-hover:text-[#C41E3A] transition-colors duration-400 ${insight.featured ? 'text-2xl' : 'text-xl'}`}>
|
||||
{insight.title}
|
||||
</h3>
|
||||
<p className="text-gray-500 leading-relaxed flex-1">
|
||||
{insight.excerpt}
|
||||
</p>
|
||||
<div className="mt-8 pt-6 border-t border-white/5">
|
||||
<span className="inline-flex items-center gap-2 text-sm font-semibold" style={{ color: CINNABAR }}>
|
||||
阅读全文
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-400 group-hover:translate-x-2" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-32 lg:py-44 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute -top-1/3 -right-1/4 w-3/4 h-full"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at center, ${CINNABAR}25 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute -bottom-1/3 -left-1/4 w-3/4 h-full"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at center, ${CINNABAR}10 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${CONTAINER} relative z-10`}>
|
||||
<FadeIn className="max-w-4xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center gap-5 mb-8">
|
||||
<div className="w-12 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.4em] uppercase" style={{ color: CINNABAR }}>
|
||||
Let's Talk
|
||||
</span>
|
||||
<div className="w-12 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-10">
|
||||
准备好开启您的
|
||||
<br />
|
||||
<span className="relative inline-block">
|
||||
<span style={{ color: CINNABAR }}>数字化转型</span>
|
||||
<svg
|
||||
className="absolute -bottom-3 left-0 w-full"
|
||||
height="14"
|
||||
viewBox="0 0 400 14"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0 7 Q 100 0, 200 7 T 400 7"
|
||||
stroke={CINNABAR}
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
之旅了吗？
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 mb-14 max-w-2xl mx-auto leading-relaxed">
|
||||
与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
|
||||
首次咨询完全免费，无任何商业承诺。
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group relative inline-flex items-center gap-4 px-12 py-6 text-white font-semibold text-lg overflow-hidden"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
<span className="relative z-10">立即预约咨询</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 transition-transform duration-500 group-hover:translate-x-2" />
|
||||
<div className="absolute inset-0 bg-black/30 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="group inline-flex items-center gap-4 px-12 py-6 text-white font-medium text-lg border border-white/20 hover:border-white/40 hover:bg-white/5 transition-all duration-400"
|
||||
>
|
||||
了解更多
|
||||
<ArrowUpRight className="w-5 h-5 transition-all duration-400 group-hover:translate-x-1 group-hover:-translate-y-1" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV8() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<ServicesSection />
|
||||
<IndustriesSection />
|
||||
<CasesSection />
|
||||
<ApproachSection />
|
||||
<InsightsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,188 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { type LucideIcon } from 'lucide-react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
interface BrandSealProps {
|
||||
text?: string;
|
||||
variant?: 'red' | 'gold' | 'blue';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}
|
||||
|
||||
export function BrandSeal({ text = '旗舰', variant = 'red', size = 'md' }: BrandSealProps) {
|
||||
const sizes = {
|
||||
sm: 'w-14 h-14 text-xs',
|
||||
md: 'w-20 h-20 text-sm',
|
||||
lg: 'w-28 h-28 text-base',
|
||||
};
|
||||
|
||||
const colors = {
|
||||
red: {
|
||||
border: '#C41E3A',
|
||||
bg: 'rgba(196, 30, 58, 0.06)',
|
||||
text: '#C41E3A',
|
||||
shadow: 'rgba(196, 30, 58, 0.2)',
|
||||
},
|
||||
gold: {
|
||||
border: '#d97706',
|
||||
bg: 'rgba(217, 119, 6, 0.06)',
|
||||
text: '#d97706',
|
||||
shadow: 'rgba(217, 119, 6, 0.2)',
|
||||
},
|
||||
blue: {
|
||||
border: '#2563eb',
|
||||
bg: 'rgba(37, 99, 235, 0.06)',
|
||||
text: '#2563eb',
|
||||
shadow: 'rgba(37, 99, 235, 0.2)',
|
||||
},
|
||||
};
|
||||
|
||||
const color = colors[variant];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.5, rotate: -15 }}
|
||||
whileInView={{ opacity: 1, scale: 1, rotate: -12 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
delay: 0.5,
|
||||
ease: [0.34, 1.56, 0.64, 1] as const,
|
||||
}}
|
||||
className={`relative ${sizes[size]} flex items-center justify-center rounded-lg border-2 font-bold select-none`}
|
||||
style={{
|
||||
borderColor: color.border,
|
||||
backgroundColor: color.bg,
|
||||
color: color.text,
|
||||
boxShadow: `0 4px 16px ${color.shadow}`,
|
||||
fontFamily: "'Noto Serif SC', serif",
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-[4px] border border-current opacity-20 rounded-md" />
|
||||
<span
|
||||
className="relative z-10 tracking-widest"
|
||||
style={{ writingMode: 'vertical-rl' }}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
<div
|
||||
className="absolute inset-0 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-500"
|
||||
style={{
|
||||
background: `conic-gradient(from 0deg, transparent 0%, ${color.border}10 50%, transparent 100%)`,
|
||||
animation: 'rotate 8s linear infinite',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CalligraphyTextProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
as?: 'h1' | 'h2' | 'h3' | 'span';
|
||||
}
|
||||
|
||||
export function CalligraphyText({
|
||||
children,
|
||||
className = '',
|
||||
as: Tag = 'span',
|
||||
}: CalligraphyTextProps) {
|
||||
return (
|
||||
<Tag
|
||||
className={`font-calligraphy ${className}`}
|
||||
style={{
|
||||
fontFamily: "'Noto Serif SC', 'STKaiti', 'KaiTi', serif",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
|
||||
interface InkDividerProps {
|
||||
variant?: 'subtle' | 'bold' | 'decorative';
|
||||
}
|
||||
|
||||
export function InkDivider({ variant = 'subtle' }: InkDividerProps) {
|
||||
if (variant === 'subtle') {
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-4 py-6">
|
||||
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
|
||||
<div className="w-2 h-2 rounded-full bg-gray-300" />
|
||||
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (variant === 'bold') {
|
||||
return (
|
||||
<div className="flex items-center gap-6 py-8">
|
||||
<div className="flex-1 h-0.5 bg-gradient-to-r from-transparent via-gray-300 to-[#C41E3A]" />
|
||||
<BrandSeal size="sm" variant="red" text="墨" />
|
||||
<div className="flex-1 h-0.5 bg-gradient-to-l from-transparent via-gray-300 to-[#C41E3A]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<svg width="200" height="24" viewBox="0 0 200 24" fill="none" className="opacity-40">
|
||||
<path
|
||||
d="M0 12 Q 50 4, 100 12 T 200 12"
|
||||
stroke="#C41E3A"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
<circle cx="100" cy="12" r="3" fill="#C41E3A" opacity="0.6" />
|
||||
<circle cx="60" cy="9" r="1.5" fill="#C41E3A" opacity="0.3" />
|
||||
<circle cx="140" cy="15" r="1.5" fill="#C41E3A" opacity="0.3" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SectionHeaderProps {
|
||||
badge?: string;
|
||||
title: ReactNode;
|
||||
subtitle?: string;
|
||||
align?: 'left' | 'center';
|
||||
icon?: LucideIcon;
|
||||
}
|
||||
|
||||
export function SectionHeader({
|
||||
badge,
|
||||
title,
|
||||
subtitle,
|
||||
align = 'center',
|
||||
icon: Icon,
|
||||
}: SectionHeaderProps) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 28 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
className={`mb-16 ${align === 'center' ? 'text-center max-w-3xl mx-auto' : ''}`}
|
||||
>
|
||||
{(badge || Icon) && (
|
||||
<div className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-50 text-[#C41E3A] text-sm font-bold tracking-wider uppercase mb-5 ${
|
||||
align === 'center' ? '' : ''
|
||||
}`}>
|
||||
{Icon && <Icon className="w-4 h-4" />}
|
||||
{badge}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900 mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{subtitle && (
|
||||
<p className="text-lg text-gray-600 leading-relaxed">{subtitle}</p>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight, MessageCircle, Download } from 'lucide-react';
|
||||
import type { HeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
|
||||
|
||||
interface DetailCTASectionV2Props {
|
||||
theme: HeroTheme;
|
||||
title?: string;
|
||||
description?: string;
|
||||
primaryAction: { label: string; href: string };
|
||||
secondaryAction?: { label: string; href: string };
|
||||
}
|
||||
|
||||
export function DetailCTASectionV2({
|
||||
theme,
|
||||
title = '准备好开始了吗？',
|
||||
description = '联系我们，获取专属方案和报价',
|
||||
primaryAction,
|
||||
secondaryAction,
|
||||
}: DetailCTASectionV2Props) {
|
||||
return (
|
||||
<section
|
||||
className="relative py-24 lg:py-32 overflow-hidden"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_rgba(255,255,255,0.05)_0%,_transparent_60%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,_rgba(196,30,58,0.08)_0%,_transparent_50%)]" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.02]"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 20c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-4.477-10-10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.8, ease: [0.4, 0, 0.2, 1] }}
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm text-white/90 text-sm font-medium mb-6 border border-white/20">
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
免费咨询
|
||||
</div>
|
||||
|
||||
<h2 className={`${DESIGN_SYSTEM.typography.hero.title} text-white mb-6`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-white/70 mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-5">
|
||||
<motion.a
|
||||
href={primaryAction.href}
|
||||
whileHover={{ scale: 1.02, y: -2 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="group relative inline-flex items-center gap-3 px-10 py-4 bg-white text-gray-900 font-bold rounded-xl shadow-2xl hover:shadow-3xl transition-all duration-300"
|
||||
>
|
||||
<span>{primaryAction.label}</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-white to-gray-50 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</motion.a>
|
||||
|
||||
{secondaryAction && (
|
||||
<a
|
||||
href={secondaryAction.href}
|
||||
className="group inline-flex items-center gap-2.5 px-8 py-4 text-white font-semibold rounded-xl border-2 border-white/25 hover:bg-white/10 hover:border-white/40 backdrop-blur-sm transition-all duration-300"
|
||||
>
|
||||
<Download className="w-5 h-5 group-hover:animate-bounce" />
|
||||
{secondaryAction.label}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.5, duration: 0.6 }}
|
||||
className="mt-10 text-sm text-white/50"
|
||||
>
|
||||
平均响应时间 < 2小时 · 7×24小时技术支持 · 无需预付费用
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight, Sparkles } from 'lucide-react';
|
||||
import type { HeroTheme, HeroTexture } from '@/lib/constants/hero-themes';
|
||||
import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
|
||||
|
||||
interface DetailHeroV2Props {
|
||||
theme: HeroTheme;
|
||||
badge?: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description?: string;
|
||||
primaryAction?: { label: string; href: string };
|
||||
secondaryAction?: { label: string; href: string };
|
||||
}
|
||||
|
||||
function TextureOverlay({ texture }: { texture: HeroTexture }) {
|
||||
if (texture.type === 'none') return null;
|
||||
|
||||
const textureStyles: Record<string, React.CSSProperties> = {
|
||||
grid: {
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px)',
|
||||
backgroundSize: '60px 60px',
|
||||
},
|
||||
'data-flow': {
|
||||
backgroundImage:
|
||||
'radial-gradient(circle at 20% 50%, rgba(0,0,0,.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0,0,0,.02) 0%, transparent 40%)',
|
||||
},
|
||||
layers: {
|
||||
backgroundImage:
|
||||
'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.01) 50%, transparent 100%)',
|
||||
},
|
||||
'shield-hex': {
|
||||
backgroundImage:
|
||||
'repeating-linear-gradient(60deg, transparent, transparent 30px, rgba(0,0,0,.02) 30px, rgba(0,0,0,.02) 31px)',
|
||||
},
|
||||
circuit: {
|
||||
backgroundImage:
|
||||
'linear-gradient(90deg, transparent 49%, rgba(0,0,0,.02) 49%, rgba(0,0,0,.02) 51%, transparent 51%)',
|
||||
backgroundSize: '40px 40px',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0"
|
||||
style={{ opacity: texture.opacity, ...textureStyles[texture.type] }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function InkWashBackground() {
|
||||
return (
|
||||
<>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(196,30,58,0.04)_0%,_transparent_60%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(30,58,95,0.03)_0%,_transparent_60%)]" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.015]"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function DetailHeroV2({
|
||||
theme,
|
||||
badge,
|
||||
title,
|
||||
subtitle,
|
||||
description,
|
||||
primaryAction,
|
||||
secondaryAction,
|
||||
}: DetailHeroV2Props) {
|
||||
const isCenterLayout = theme.layout === 'center' || theme.layout === 'wide';
|
||||
|
||||
const containerClasses = theme.layout === 'wide'
|
||||
? 'container-wide py-32 lg:py-40'
|
||||
: 'container-wide py-28 lg:py-36';
|
||||
|
||||
return (
|
||||
<section
|
||||
className="relative overflow-hidden min-h-[600px] flex items-center"
|
||||
style={{
|
||||
background: `linear-gradient(${theme.gradientAngle}deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
|
||||
}}
|
||||
>
|
||||
<TextureOverlay texture={theme.texture} />
|
||||
<InkWashBackground />
|
||||
|
||||
<div className={containerClasses}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: [0.4, 0, 0.2, 1] }}
|
||||
className={`max-w-4xl ${isCenterLayout ? 'mx-auto text-center' : ''}`}
|
||||
>
|
||||
{(badge || theme.badge) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 10 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
transition={{ delay: 0.15, duration: 0.5, ease: [0.4, 0, 0.2, 1] }}
|
||||
className={`mb-6 inline-flex items-center gap-2 rounded-full px-4 py-2 text-xs font-medium tracking-wide backdrop-blur-sm ${
|
||||
isCenterLayout ? '' : ''
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: `${theme.accentColor}15`,
|
||||
color: theme.accentColor,
|
||||
border: `1px solid ${theme.accentColor}25`,
|
||||
}}
|
||||
>
|
||||
<Sparkles className="w-3.5 h-3.5" />
|
||||
{badge || theme.badge}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.7, ease: [0.4, 0, 0.2, 1] }}
|
||||
className={`${DESIGN_SYSTEM.typography.hero.title} text-stone-900 mb-6`}
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.35, duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
|
||||
className={DESIGN_SYSTEM.typography.hero.subtitle}
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
|
||||
{description && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.45, duration: 0.5, ease: [0.4, 0, 0.2, 1] }}
|
||||
className={DESIGN_SYSTEM.typography.hero.description}
|
||||
>
|
||||
{description}
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
{(primaryAction || secondaryAction) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.55, duration: 0.5, ease: [0.4, 0, 0.2, 1] }}
|
||||
className={`mt-10 flex flex-wrap gap-4 ${isCenterLayout ? 'justify-center' : ''}`}
|
||||
>
|
||||
{primaryAction && (
|
||||
<a
|
||||
href={primaryAction.href}
|
||||
className="group relative inline-flex items-center gap-2.5 px-8 py-4 bg-white text-gray-900 font-semibold rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-0.5"
|
||||
>
|
||||
<span>{primaryAction.label}</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-white to-gray-50 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</a>
|
||||
)}
|
||||
{secondaryAction && (
|
||||
<a
|
||||
href={secondaryAction.href}
|
||||
className="inline-flex items-center gap-2 px-6 py-4 text-stone-700 font-medium rounded-xl border border-stone-900/10 hover:bg-stone-900/5 hover:border-stone-900/15 transition-all duration-300"
|
||||
>
|
||||
{secondaryAction.label}
|
||||
</a>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white to-transparent" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,318 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { ArrowRight, Sparkles, ChevronDown } from 'lucide-react';
|
||||
import type { HeroTheme, HeroTexture } from '@/lib/constants/hero-themes';
|
||||
import { PressableButton } from './micro-interactions';
|
||||
|
||||
interface DetailHeroV3Props {
|
||||
theme: HeroTheme;
|
||||
badge?: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description?: string;
|
||||
primaryAction?: { label: string; href: string };
|
||||
secondaryAction?: { label: string; href: string };
|
||||
}
|
||||
|
||||
function InkWashBackgroundV3({ theme }: { theme: HeroTheme }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: ref,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0.3]);
|
||||
const scale = useTransform(scrollYProgress, [0, 0.8], [1, 1.1]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
style={{ opacity, scale }}
|
||||
className="absolute inset-0 overflow-hidden"
|
||||
>
|
||||
{/* 水墨雅致浅色渐变底 */}
|
||||
<div className="absolute inset-0" style={{
|
||||
background: `linear-gradient(${theme.gradientAngle}deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
|
||||
}} />
|
||||
|
||||
{/* 墨韵光晕 — 品牌色淡染 */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_20%_30%,_rgba(196,30,58,0.04)_0%,_transparent_50%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_80%_70%,_rgba(30,58,95,0.03)_0%,_transparent_50%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_100%,_rgba(255,255,255,0.5)_0%,_transparent_40%)]" />
|
||||
|
||||
{/* 宣纸纹理 */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.015]"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 10c27.614 0 50 22.386 50 50s-22.386 50-50 50S10 87.614 10 60 32.386 10 60 10zm0 10c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40z' fill='%23000000' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E")`,
|
||||
backgroundSize: '80px 80px',
|
||||
}}
|
||||
/>
|
||||
|
||||
{theme.texture.type !== 'none' && (
|
||||
<TextureOverlayV3 texture={theme.texture} />
|
||||
)}
|
||||
|
||||
{/* 底部渐变融入页面背景 */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-white via-white/60 to-transparent" />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function TextureOverlayV3({ texture }: { texture: HeroTexture }) {
|
||||
if (texture.type === 'none') return null;
|
||||
|
||||
const textures: Record<string, React.CSSProperties> = {
|
||||
grid: {
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px)',
|
||||
backgroundSize: '80px 80px',
|
||||
},
|
||||
'data-flow': {
|
||||
backgroundImage:
|
||||
'radial-gradient(circle at 15% 45%, rgba(0,0,0,.03) 0%, transparent 55%), radial-gradient(circle at 85% 25%, rgba(0,0,0,.02) 0%, transparent 45%)',
|
||||
},
|
||||
layers: {
|
||||
backgroundImage:
|
||||
'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.01) 35%, rgba(0,0,0,.02) 65%, transparent 100%)',
|
||||
},
|
||||
'shield-hex': {
|
||||
backgroundImage:
|
||||
'repeating-linear-gradient(55deg, transparent, transparent 28px, rgba(0,0,0,.02) 28px, rgba(0,0,0,.02) 29px)',
|
||||
},
|
||||
circuit: {
|
||||
backgroundImage:
|
||||
'linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,.02) 49.5%, rgba(0,0,0,.02) 50.5%, transparent 50.5%)',
|
||||
backgroundSize: '50px 50px',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0"
|
||||
style={{ ...textures[texture.type], opacity: texture.opacity * 2 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function FloatingParticles() {
|
||||
const particles = [
|
||||
{ x: 15, y: 25, scale: 0.7, duration: 8, delay: 0, startY: 100, endY: -20 },
|
||||
{ x: 75, y: 60, scale: 0.5, duration: 10, delay: 1.5, startY: 80, endY: 15 },
|
||||
{ x: 45, y: 35, scale: 0.9, duration: 9, delay: 0.8, startY: 90, endY: -10 },
|
||||
{ x: 85, y: 20, scale: 0.6, duration: 11, delay: 2.2, startY: 70, endY: 5 },
|
||||
{ x: 25, y: 75, scale: 0.8, duration: 7.5, delay: 1.0, startY: 85, endY: -15 },
|
||||
{ x: 65, y: 45, scale: 0.55, duration: 12, delay: 2.8, startY: 95, endY: 10 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
{particles.map((particle, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute w-1 h-1 rounded-full bg-black/[0.06]"
|
||||
initial={{
|
||||
x: `${particle.x}%`,
|
||||
y: `${particle.y}%`,
|
||||
scale: particle.scale,
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
y: [`${particle.startY}%`, `${particle.endY}%`],
|
||||
opacity: [0, 0.3, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: particle.duration,
|
||||
repeat: Infinity,
|
||||
delay: particle.delay,
|
||||
ease: 'easeInOut' as const,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DetailHeroV3({
|
||||
theme,
|
||||
badge,
|
||||
title,
|
||||
subtitle,
|
||||
description,
|
||||
primaryAction,
|
||||
secondaryAction,
|
||||
}: DetailHeroV3Props) {
|
||||
const isCenterLayout = theme.layout === 'center' || theme.layout === 'wide';
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[700px] flex items-center overflow-hidden">
|
||||
<InkWashBackgroundV3 theme={theme} />
|
||||
<FloatingParticles />
|
||||
|
||||
<div className={`container-wide relative z-10 ${theme.layout === 'wide' ? 'py-36 lg:py-44' : 'py-32 lg:py-40'}`}>
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={{
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.12,
|
||||
delayChildren: 0.2,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className={`max-w-4xl ${isCenterLayout ? 'mx-auto text-center' : ''}`}
|
||||
>
|
||||
{(badge || theme.badge) && (
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0, scale: 0.9, filter: 'blur(8px)' },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
filter: 'blur(0px)',
|
||||
transition: {
|
||||
duration: 0.7,
|
||||
ease: [0.34, 1.56, 0.64, 1] as const,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className={`mb-8 inline-flex items-center gap-2.5 rounded-full px-5 py-2.5 text-xs font-semibold tracking-widest uppercase backdrop-blur-md border ${
|
||||
isCenterLayout ? '' : ''
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: `${theme.accentColor}10`,
|
||||
color: theme.accentColor,
|
||||
borderColor: `${theme.accentColor}25`,
|
||||
boxShadow: `0 0 20px ${theme.accentColor}08`,
|
||||
}}
|
||||
>
|
||||
<motion.span
|
||||
animate={{ rotate: [0, 360] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: 'linear' as const }}
|
||||
>
|
||||
<Sparkles className="w-3.5 h-3.5" />
|
||||
</motion.span>
|
||||
{badge || theme.badge}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<motion.h1
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 40, filter: 'blur(10px)' },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
filter: 'blur(0px)',
|
||||
transition: {
|
||||
duration: 0.9,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className={`text-4xl md:text-5xl lg:text-[3.75rem] font-bold tracking-tight leading-[1.1] mb-8 ${
|
||||
isCenterLayout ? '' : ''
|
||||
}`}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #1c1917 0%, #292524 60%, #44403c 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.75,
|
||||
delay: 0.25,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="text-lg md:text-xl text-stone-700 leading-relaxed mb-5 max-w-3xl"
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
|
||||
{description && (
|
||||
<motion.p
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 24 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.65,
|
||||
delay: 0.4,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="text-base text-stone-500 mt-5 max-w-2xl leading-relaxed"
|
||||
>
|
||||
{description}
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
{(primaryAction || secondaryAction) && (
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 24 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
delay: 0.55,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className={`mt-12 flex flex-wrap gap-5 ${isCenterLayout ? 'justify-center' : ''}`}
|
||||
>
|
||||
{primaryAction && (
|
||||
<a href={primaryAction.href}>
|
||||
<PressableButton variant="primary" className="px-10 py-4 text-base shadow-lg group">
|
||||
<span>{primaryAction.label}</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-0.5 transition-transform duration-300" />
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" />
|
||||
</PressableButton>
|
||||
</a>
|
||||
)}
|
||||
{secondaryAction && (
|
||||
<a href={secondaryAction.href}>
|
||||
<PressableButton variant="secondary" className="px-8 py-4 text-base bg-stone-900/5 border-stone-900/10 hover:bg-stone-900/10 backdrop-blur-sm text-stone-800 shadow-md">
|
||||
{secondaryAction.label}
|
||||
</PressableButton>
|
||||
</a>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.5, duration: 0.8 }}
|
||||
className="absolute bottom-8 left-1/2 -translate-x-1/2"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' as const }}
|
||||
className="text-stone-400 cursor-pointer hover:text-stone-600 transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-6 h-6" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
CheckCircle2,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
Shield,
|
||||
BarChart3,
|
||||
Cpu,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
|
||||
interface ProductValueSectionV2Props {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
const featureIcons: LucideIcon[] = [Zap, Shield, BarChart3, Cpu];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: DESIGN_SYSTEM.animation.delay.stagger,
|
||||
delayChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.4,
|
||||
ease: [0.4, 0, 0.2, 1] as const,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function ProductValueSectionV2({ product }: ProductValueSectionV2Props) {
|
||||
return (
|
||||
<section className="relative bg-white py-20 lg:py-28 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-gray-50/50 to-transparent" />
|
||||
|
||||
<div className="container-wide relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
|
||||
className="max-w-3xl mx-auto text-center mb-16"
|
||||
>
|
||||
<span className="inline-block mb-4 text-sm font-semibold text-[#C41E3A] tracking-wider uppercase">
|
||||
核心能力
|
||||
</span>
|
||||
<h2 className={`${DESIGN_SYSTEM.typography.section.title} text-gray-900`}>
|
||||
为企业打造的{product.title}
|
||||
</h2>
|
||||
<p className={`${DESIGN_SYSTEM.typography.section.subtitle} mt-4 max-w-2xl mx-auto`}>
|
||||
{product.overview}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#C41E3A] to-[#99182d] flex items-center justify-center shadow-lg">
|
||||
<Zap className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900">功能模块</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{product.features.map((feature, index) => {
|
||||
const Icon = featureIcons[index % featureIcons.length]!;
|
||||
const [title, ...descParts] = feature.split('：');
|
||||
const desc = descParts.join('：');
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={feature}
|
||||
variants={itemVariants}
|
||||
className={`group relative p-5 rounded-xl border transition-all duration-300 ${
|
||||
index === 0
|
||||
? 'bg-gradient-to-br from-red-50 to-white border-red-100'
|
||||
: 'bg-white border-gray-100 hover:border-red-100 hover:bg-red-50/30'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`shrink-0 w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
|
||||
index === 0 ? 'bg-[#C41E3A] text-white' : 'bg-gray-100 text-gray-600 group-hover:bg-[#C41E3A] group-hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">{title}</h4>
|
||||
{desc && <p className="text-sm text-gray-600 leading-relaxed">{desc}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ delayChildren: 0.15 }}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-lg">
|
||||
<BarChart3 className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900">核心优势</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
|
||||
{product.benefits.map((benefit, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
variants={itemVariants}
|
||||
className="group p-5 rounded-xl bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-100 hover:shadow-md hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mb-3" />
|
||||
<p className="text-sm font-medium text-gray-800 leading-relaxed">{benefit}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-xl bg-gradient-to-br from-gray-50 to-gray-100/50 border border-gray-200">
|
||||
<h4 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-green-600" />
|
||||
技术规格
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
{product.specs.slice(0, 4).map((spec, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.05, duration: 0.3 }}
|
||||
className="flex items-start gap-2.5 text-sm text-gray-700"
|
||||
>
|
||||
<ArrowRight className="w-4 h-4 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||
<span>{spec}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,435 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
CheckCircle2,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
Shield,
|
||||
BarChart3,
|
||||
Cpu,
|
||||
TrendingUp,
|
||||
Clock,
|
||||
Award,
|
||||
Users,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { TiltCard, InkGlowCard } from './micro-interactions';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
|
||||
interface ProductValueSectionV3Props {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
const featureIcons: LucideIcon[] = [Zap, Shield, BarChart3, Cpu];
|
||||
|
||||
function FeatureTags({ text }: { text: string }) {
|
||||
const [title, ...descParts] = text.split('：');
|
||||
const desc = descParts.join('：');
|
||||
|
||||
if (!desc) return <span className="text-sm font-medium">{title}</span>;
|
||||
|
||||
const tags = desc.split('、').map((tag) => tag.trim()).filter(Boolean);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-bold text-gray-900 text-base">{title}</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map((tag, i) => (
|
||||
<motion.span
|
||||
key={tag}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.05, duration: 0.3 }}
|
||||
className="px-3 py-1.5 bg-gradient-to-r from-gray-50 to-gray-100 text-gray-700 text-xs font-medium rounded-lg border border-gray-200 hover:border-[#C41E3A]/30 hover:bg-red-50/30 transition-colors cursor-default"
|
||||
>
|
||||
{tag}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CircularProgress({ value, label, color = '#C41E3A' }: { value: number; label: string; color?: string }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const isInView = useInView(ref, { once: true });
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
if (isInView && progress === 0) {
|
||||
setTimeout(() => setProgress(value), 300);
|
||||
}
|
||||
|
||||
const circumference = 2 * Math.PI * 45;
|
||||
const strokeDashoffset = circumference - (progress / 100) * circumference;
|
||||
|
||||
return (
|
||||
<div ref={ref} className="text-center">
|
||||
<div className="relative w-28 h-28 mx-auto mb-3">
|
||||
<svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke="#f3f4f6"
|
||||
strokeWidth="8"
|
||||
/>
|
||||
<motion.circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth="8"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
initial={{ strokeDashoffset: circumference }}
|
||||
animate={{ strokeDashoffset }}
|
||||
transition={{ duration: 1.5, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xl font-bold text-gray-900">{value}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs font-medium text-gray-600">{label}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCard({
|
||||
icon: Icon,
|
||||
value,
|
||||
metric,
|
||||
description,
|
||||
index: _index,
|
||||
accent = false,
|
||||
}: {
|
||||
icon: LucideIcon;
|
||||
value: string;
|
||||
metric: string;
|
||||
description: string;
|
||||
index: number;
|
||||
accent?: boolean;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const isInView = useInView(ref, { once: true });
|
||||
|
||||
const numericValue = parseFloat(value.replace(/[^0-9.]/g, ''));
|
||||
const suffix = value.replace(/[0-9.]/g, '');
|
||||
const [displayValue, setDisplayValue] = useState('0');
|
||||
|
||||
if (isInView && displayValue === '0') {
|
||||
let startTime: number;
|
||||
const animate = (currentTime: number) => {
|
||||
if (!startTime) startTime = currentTime;
|
||||
const progress = Math.min((currentTime - startTime) / 2000, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setDisplayValue(
|
||||
Number.isInteger(numericValue)
|
||||
? Math.floor(numericValue * easeOutQuart).toString() + suffix
|
||||
: (numericValue * easeOutQuart).toFixed(1) + suffix
|
||||
);
|
||||
if (progress < 1) requestAnimationFrame(animate);
|
||||
};
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
return (
|
||||
<TiltCard
|
||||
tiltAmount={8}
|
||||
glareEnable={accent}
|
||||
glareMaxOpacity={accent ? 0.12 : 0}
|
||||
className={`p-8 rounded-2xl ${
|
||||
accent
|
||||
? 'bg-gradient-to-br from-red-50 via-white to-orange-50/30 border border-red-100'
|
||||
: 'bg-white border border-gray-100 hover:border-gray-200'
|
||||
}`}
|
||||
>
|
||||
{accent && (
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-red-100/40 to-transparent rounded-bl-full" />
|
||||
)}
|
||||
|
||||
<div className={`relative ${accent ? '' : ''}`}>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center mb-5 shadow-lg ${
|
||||
accent
|
||||
? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white'
|
||||
: 'bg-gradient-to-br from-gray-50 to-gray-100 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
|
||||
<div className="text-4xl md:text-5xl font-bold text-gray-900 mb-2 tracking-tight">
|
||||
{displayValue}
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-1.5">{metric}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{description}</p>
|
||||
</div>
|
||||
</TiltCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProductValueSectionV3({ product }: ProductValueSectionV3Props) {
|
||||
return (
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-slate-50/80 via-transparent to-slate-50/50" />
|
||||
|
||||
<div className="container-wide relative">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-120px' }}
|
||||
transition={{ duration: 0.85, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
className="max-w-3xl mx-auto text-center mb-20"
|
||||
>
|
||||
<motion.span
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.15, duration: 0.5 }}
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-50 text-[#C41E3A] text-sm font-bold tracking-wider uppercase mb-5"
|
||||
>
|
||||
<Zap className="w-4 h-4" />
|
||||
核心能力
|
||||
</motion.span>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900 mb-5">
|
||||
为企业打造的<span className="relative inline-block">
|
||||
{product.title}
|
||||
<motion.span
|
||||
layoutId="underline"
|
||||
className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-[#C41E3A] to-[#99182d] rounded-full"
|
||||
initial={{ scaleX: 0 }}
|
||||
whileInView={{ scaleX: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.7, duration: 0.6, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
/>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
|
||||
{product.overview}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-5 gap-10 lg:gap-14">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
variants={{
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.08,
|
||||
delayChildren: 0.2,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="xl:col-span-3 space-y-6"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#C41E3A] via-red-600 to-[#99182d] flex items-center justify-center shadow-xl shadow-red-500/20">
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">功能模块</h3>
|
||||
<p className="text-sm text-gray-500 mt-0.5">六大核心业务领域全覆盖</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
{product.features.map((feature, index) => {
|
||||
const Icon = featureIcons[index % featureIcons.length]!;
|
||||
|
||||
return (
|
||||
<InkGlowCard
|
||||
key={feature}
|
||||
active={index === 0}
|
||||
className="group p-6 hover:border-red-100"
|
||||
>
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.55,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-300 shadow-md ${
|
||||
index === 0
|
||||
? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white shadow-lg shadow-red-500/25'
|
||||
: 'bg-gradient-to-br from-gray-100 to-gray-200 text-gray-600 group-hover:from-[#C41E3A] group-hover:to-[#99182d] group-hover:text-white group-hover:shadow-lg group-hover:shadow-red-500/25'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5.5 h-5.5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 pt-1">
|
||||
<FeatureTags text={feature} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
variants={{
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.06,
|
||||
delayChildren: 0.35,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="xl:col-span-2 space-y-6"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-xl shadow-blue-500/20">
|
||||
<TrendingUp className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">核心优势</h3>
|
||||
<p className="text-sm text-gray-500 mt-0.5">为什么选择我们</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{product.benefits.map((benefit, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="group p-5 rounded-2xl bg-gradient-to-br from-blue-50/80 via-indigo-50/30 to-purple-50/20 border border-blue-100/60 hover:border-blue-200 hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 shrink-0 group-hover:scale-110 transition-transform" />
|
||||
<p className="text-sm font-medium text-gray-800 leading-relaxed">{benefit}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 0.5,
|
||||
duration: 0.55,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}}
|
||||
className="mt-8 p-6 rounded-2xl bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100/50 border border-gray-200/80"
|
||||
>
|
||||
<h4 className="font-bold text-gray-900 mb-5 flex items-center gap-2.5">
|
||||
<Shield className="w-5 h-5 text-green-600" />
|
||||
技术规格
|
||||
</h4>
|
||||
<ul className="space-y-3.5">
|
||||
{product.specs.slice(0, 5).map((spec, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -15 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.6 + index * 0.05,
|
||||
duration: 0.35,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="flex items-start gap-3 text-sm text-gray-700 group/item"
|
||||
>
|
||||
<ArrowRight className="w-4 h-4 text-[#C41E3A] mt-0.5 shrink-0 group-hover/item:translate-x-1 transition-transform" />
|
||||
<span>{spec}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{product.dataProofs && product.dataProofs.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.75, delay: 0.2 }}
|
||||
className="mt-24"
|
||||
>
|
||||
<div className="text-center mb-14">
|
||||
<span className="inline-block mb-4 text-sm font-bold text-[#C41E3A] tracking-wider uppercase">
|
||||
数据说话
|
||||
</span>
|
||||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900">
|
||||
用真实效果证明价值
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-7 max-w-5xl mx-auto">
|
||||
{product.dataProofs.map((proof, index) => {
|
||||
const icons: LucideIcon[] = [TrendingUp, Clock, Award, Users];
|
||||
const Icon = icons[index % icons.length]!;
|
||||
|
||||
return (
|
||||
<MetricCard
|
||||
key={proof.metric}
|
||||
icon={Icon}
|
||||
value={proof.value}
|
||||
metric={proof.metric}
|
||||
description={proof.description}
|
||||
index={index}
|
||||
accent={index === 0}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ delay: 0.4, duration: 0.65 }}
|
||||
className="mt-16 grid grid-cols-3 gap-8 max-w-3xl mx-auto"
|
||||
>
|
||||
<CircularProgress value={95} label="客户满意度" color="#3b82f6" />
|
||||
<CircularProgress value={99} label="系统稳定性" color="#10b981" />
|
||||
<CircularProgress value={98} label="交付准时率" color="#f59e0b" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { CaseStudyCard } from '../detail/detail-case-study';
|
||||
import { CertificationList } from '../detail/detail-certification';
|
||||
import type { CaseStudy, DataProof, Certification } from '@/lib/constants/products';
|
||||
import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
|
||||
|
||||
interface DetailTrustSectionV2Props {
|
||||
caseStudies?: CaseStudy[];
|
||||
dataProofs?: DataProof[];
|
||||
certifications?: Certification[];
|
||||
accentColor?: string;
|
||||
}
|
||||
|
||||
function AnimatedCounter({ value, duration = 2000 }: { value: string; duration?: number }) {
|
||||
const [displayValue, setDisplayValue] = useState('0');
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const isInView = useInView(ref, { once: true });
|
||||
|
||||
useEffect(() => {
|
||||
if (!isInView) return;
|
||||
|
||||
const numericValue = parseFloat(value.replace(/[^0-9.]/g, ''));
|
||||
const suffix = value.replace(/[0-9.]/g, '');
|
||||
let startTime: number;
|
||||
let animationFrame: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
if (!startTime) startTime = currentTime;
|
||||
const progress = Math.min((currentTime - startTime) / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
const currentValue = numericValue * easeOutQuart;
|
||||
|
||||
setDisplayValue(
|
||||
Number.isInteger(numericValue)
|
||||
? Math.floor(currentValue).toString() + suffix
|
||||
: currentValue.toFixed(1) + suffix
|
||||
);
|
||||
|
||||
if (progress < 1) {
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
|
||||
return () => cancelAnimationFrame(animationFrame);
|
||||
}, [isInView, value, duration]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="text-4xl md:text-5xl font-bold text-gray-900">
|
||||
{displayValue}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DetailTrustSectionV2({
|
||||
caseStudies = [],
|
||||
dataProofs = [],
|
||||
certifications = [],
|
||||
accentColor = '#C41E3A',
|
||||
}: DetailTrustSectionV2Props) {
|
||||
const hasContent = caseStudies.length > 0 || dataProofs.length > 0 || certifications.length > 0;
|
||||
if (!hasContent) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-20 lg:py-28 bg-gradient-to-b from-gray-50 to-white overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23000000' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E")`,
|
||||
}} />
|
||||
|
||||
<div className="container-wide relative">
|
||||
{dataProofs.length > 0 && (
|
||||
<div className="mb-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<span className="inline-block mb-3 text-sm font-semibold text-[#C41E3A] tracking-wider uppercase">
|
||||
数据说话
|
||||
</span>
|
||||
<h2 className={`${DESIGN_SYSTEM.typography.section.title} text-gray-900`}>
|
||||
用真实效果证明价值
|
||||
</h2>
|
||||
<p className={`${DESIGN_SYSTEM.typography.section.subtitle} mt-3 max-w-xl mx-auto`}>
|
||||
来自真实客户的使用数据，让效果可衡量、可验证
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
{dataProofs.map((proof, index) => (
|
||||
<motion.div
|
||||
key={proof.metric}
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{
|
||||
...DESIGN_SYSTEM.effects.scroll.fadeInUp.transition,
|
||||
delay: index * DESIGN_SYSTEM.animation.delay.stagger,
|
||||
}}
|
||||
whileHover={{
|
||||
y: -8,
|
||||
boxShadow: '0 20px 40px rgba(0,0,0,0.08)',
|
||||
transition: { duration: 0.3 },
|
||||
}}
|
||||
className={`relative p-8 rounded-2xl border backdrop-blur-sm transition-all duration-300 ${
|
||||
index === 0
|
||||
? 'bg-gradient-to-br from-red-50 to-white border-red-100'
|
||||
: 'bg-white border-gray-100 hover:border-gray-200'
|
||||
}`}
|
||||
>
|
||||
{index === 0 && (
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-red-100/50 to-transparent rounded-bl-full" />
|
||||
)}
|
||||
<AnimatedCounter value={proof.value} />
|
||||
<p className="text-lg font-semibold text-gray-800 mt-2">{proof.metric}</p>
|
||||
<p className="text-sm text-gray-500 mt-1 leading-relaxed">{proof.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{caseStudies.length > 0 && (
|
||||
<div className="mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<span className="inline-block mb-3 text-sm font-semibold tracking-wider uppercase" style={{ color: accentColor }}>
|
||||
客户案例
|
||||
</span>
|
||||
<h2 className={`${DESIGN_SYSTEM.typography.section.title} text-gray-900`}>
|
||||
他们已经实现了转型突破
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{caseStudies.map((study, index) => (
|
||||
<motion.div
|
||||
key={study.client}
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{
|
||||
...DESIGN_SYSTEM.effects.scroll.fadeInUp.transition,
|
||||
delay: index * DESIGN_SYSTEM.animation.delay.stagger,
|
||||
}}
|
||||
>
|
||||
<CaseStudyCard study={study} index={index} />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{certifications.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={DESIGN_SYSTEM.effects.scroll.fadeInUp.transition}
|
||||
className="text-center"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-6">资质认证</h3>
|
||||
<CertificationList certifications={certifications} />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
interface ListPageHeroV3Props {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description?: string;
|
||||
stats?: Array<{ value: string; label: string }>;
|
||||
badge?: {
|
||||
text: string;
|
||||
variant?: 'brand' | 'blue' | 'green' | 'neutral';
|
||||
};
|
||||
}
|
||||
|
||||
const BADGE_VARIANTS = {
|
||||
brand: {
|
||||
bg: 'var(--color-brand-primary-bg)',
|
||||
text: 'var(--color-brand-primary)',
|
||||
border: 'rgba(var(--color-brand-primary-rgb), 0.15)',
|
||||
dot: 'var(--color-brand-primary)',
|
||||
},
|
||||
blue: {
|
||||
bg: 'rgba(var(--color-accent-blue-rgb), 0.08)',
|
||||
text: 'var(--color-accent-blue)',
|
||||
border: 'rgba(var(--color-accent-blue-rgb), 0.15)',
|
||||
dot: 'var(--color-accent-blue)',
|
||||
},
|
||||
green: {
|
||||
bg: 'rgba(34, 197, 94, 0.08)',
|
||||
text: '#16a34a',
|
||||
border: 'rgba(34, 197, 94, 0.15)',
|
||||
dot: '#22c55e',
|
||||
},
|
||||
neutral: {
|
||||
bg: 'var(--color-bg-section)',
|
||||
text: 'var(--color-text-secondary)',
|
||||
border: 'var(--color-border-primary)',
|
||||
dot: 'var(--color-text-subtle)',
|
||||
},
|
||||
};
|
||||
|
||||
export function ListPageHeroV3({
|
||||
title,
|
||||
subtitle,
|
||||
description,
|
||||
stats,
|
||||
badge,
|
||||
}: ListPageHeroV3Props) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const badgeStyle = BADGE_VARIANTS[badge?.variant || 'brand'];
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Multi-layer background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[var(--color-bg-section)] via-[var(--color-bg-secondary)] to-[var(--color-bg-section)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(var(--color-brand-primary-rgb),_0.05)_0%,_transparent_50%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(var(--color-primary-rgb),_0.03)_0%,_transparent_50%)]" />
|
||||
|
||||
{/* Subtle grid texture */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(var(--color-border-primary-rgb), 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--color-border-primary-rgb), 0.5) 1px, transparent 1px)',
|
||||
backgroundSize: '60px 60px',
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Decorative accent line */}
|
||||
<div className="absolute top-0 left-0 right-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, var(--color-brand-primary), transparent)' }} aria-hidden="true" />
|
||||
|
||||
<div className="container-wide relative z-10 py-20 lg:py-28">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
>
|
||||
{/* Dynamic Badge */}
|
||||
{badge && badge.text && (
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.95, y: 8 }}
|
||||
whileInView={{ opacity: 1, scale: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1, duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium mb-6 backdrop-blur-sm"
|
||||
style={{ backgroundColor: badgeStyle.bg, color: badgeStyle.text, border: `1px solid ${badgeStyle.border}` }}
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: badgeStyle.dot }} />
|
||||
{badge?.text || ''}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
<motion.h1
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.15, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 text-[var(--color-text-primary)]"
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.25, duration: 0.65, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-lg md:text-xl max-w-2xl mx-auto leading-relaxed mb-4 text-[var(--color-text-secondary)]"
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
|
||||
{/* Description */}
|
||||
{description && (
|
||||
<motion.p
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 18 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.35, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-base max-w-xl mx-auto mb-10 text-[var(--color-text-muted)]"
|
||||
>
|
||||
{description}
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
{/* Stats Row */}
|
||||
{stats && stats.length > 0 && (
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.4, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="flex flex-wrap justify-center gap-8 md:gap-12 mt-12 pt-12 border-t border-[var(--color-border-primary)]"
|
||||
>
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.5 + index * 0.08, duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center min-w-[100px]"
|
||||
>
|
||||
<div className="text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-sm mt-1 text-[var(--color-text-subtle)]">{stat.label}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Bottom fade */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-[var(--color-bg-primary)] to-transparent pointer-events-none" aria-hidden="true" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useMotionValue, useTransform, useSpring } from 'framer-motion';
|
||||
import { useRef, ReactNode } from 'react';
|
||||
|
||||
interface TiltCardProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
tiltAmount?: number;
|
||||
glareEnable?: boolean;
|
||||
glareMaxOpacity?: number;
|
||||
}
|
||||
|
||||
export function TiltCard({
|
||||
children,
|
||||
className = '',
|
||||
tiltAmount = 10,
|
||||
glareEnable = true,
|
||||
glareMaxOpacity = 0.15,
|
||||
}: TiltCardProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const x = useMotionValue(0.5);
|
||||
const y = useMotionValue(0.5);
|
||||
|
||||
const rotateX = useSpring(useTransform(y, [0, 1], [tiltAmount, -tiltAmount]), {
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
});
|
||||
const rotateY = useSpring(useTransform(x, [0, 1], [-tiltAmount, tiltAmount]), {
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
});
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!ref.current) return;
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
x.set((e.clientX - rect.left) / rect.width);
|
||||
y.set((e.clientY - rect.top) / rect.height);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
x.set(0.5);
|
||||
y.set(0.5);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{
|
||||
rotateX,
|
||||
rotateY,
|
||||
transformStyle: 'preserve-3d',
|
||||
perspective: 1000,
|
||||
}}
|
||||
className={`relative ${className}`}
|
||||
>
|
||||
{children}
|
||||
{glareEnable && (
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-300"
|
||||
style={{
|
||||
opacity: glareMaxOpacity,
|
||||
background: `radial-gradient(circle at ${x.get() * 100}% ${y.get() * 100}%, white 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PressableButtonProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
variant?: 'primary' | 'secondary' | 'ghost';
|
||||
}
|
||||
|
||||
export function PressableButton({
|
||||
children,
|
||||
className = '',
|
||||
onClick,
|
||||
variant = 'primary',
|
||||
}: PressableButtonProps) {
|
||||
const baseStyles = {
|
||||
primary:
|
||||
'bg-gradient-to-r from-[#C41E3A] to-[#99182d] text-white shadow-lg shadow-red-500/25 hover:shadow-xl hover:shadow-red-500/40',
|
||||
secondary:
|
||||
'bg-white text-gray-700 border-2 border-gray-200 hover:border-gray-300 shadow-md hover:shadow-lg',
|
||||
ghost:
|
||||
'bg-transparent text-[#C41E3A] hover:bg-red-50',
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98, transition: { duration: 0.1 } }}
|
||||
onClick={onClick}
|
||||
className={`inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-xl transition-all duration-200 ${baseStyles[variant]} ${className}`}
|
||||
>
|
||||
{children}
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
interface InkGlowCardProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
export function InkGlowCard({ children, className = '', active = false }: InkGlowCardProps) {
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{
|
||||
y: -4,
|
||||
boxShadow: active
|
||||
? '0 20px 40px rgba(196, 30, 58, 0.15), 0 0 0 1px rgba(196, 30, 58, 0.1)'
|
||||
: '0 20px 40px rgba(0, 0, 0, 0.08)',
|
||||
transition: { duration: 0.3 },
|
||||
}}
|
||||
className={`relative bg-white rounded-2xl overflow-hidden ${active ? 'border border-red-100' : 'border border-gray-100'} ${className}`}
|
||||
>
|
||||
{active && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-red-50/50 to-transparent pointer-events-none" />
|
||||
)}
|
||||
<div className="absolute inset-0 opacity-0 hover:opacity-100 transition-opacity duration-500">
|
||||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
background: `conic-gradient(from var(--angle), transparent 0%, rgba(196, 30, 58, 0.08) 10%, transparent 20%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">{children}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { ArrowRight, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
interface ProductCardV3Props {
|
||||
product: {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
category: string;
|
||||
status: string;
|
||||
features?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export function ProductCardV3({ product }: ProductCardV3Props) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
duration: 0.65,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<Link href={`/products/${product.id}`} className="block">
|
||||
<div className="relative h-full rounded-2xl bg-white border border-[var(--color-border-primary)] overflow-hidden hover:border-[#C41E3A]/30 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
|
||||
<div className="aspect-video relative overflow-hidden bg-gradient-to-br from-[var(--color-bg-section)] to-[var(--color-bg-tertiary)]">
|
||||
<Image
|
||||
src={product.image}
|
||||
alt={product.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
|
||||
|
||||
<div className="absolute top-4 left-4 flex gap-2">
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#C41E3A] text-white shadow-lg">
|
||||
{product.category}
|
||||
</span>
|
||||
{product.status === '已发布' && (
|
||||
<span className="px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white shadow-lg flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3" />
|
||||
已发布
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-bold text-[var(--color-text-primary)] mb-3 group-hover:text-[#C41E3A] transition-colors">
|
||||
{product.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5 line-clamp-2">
|
||||
{product.description}
|
||||
</p>
|
||||
|
||||
{product.features && product.features.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-5">
|
||||
{product.features.slice(0, 3).map((feature) => (
|
||||
<span
|
||||
key={feature}
|
||||
className="px-2.5 py-1 rounded-md text-xs font-medium bg-[var(--color-bg-section)] text-[var(--color-text-muted)] border border-[var(--color-border-primary)]"
|
||||
>
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-[#C41E3A] group-hover:gap-3 transition-all">
|
||||
了解详情
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,191 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
CheckCircle2,
|
||||
Zap,
|
||||
Clock,
|
||||
Users,
|
||||
Award,
|
||||
TrendingUp,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { TiltCard, InkGlowCard } from './micro-interactions';
|
||||
import { SectionHeader, InkDivider } from './brand-elements';
|
||||
import type { Service } from '@/lib/constants/services';
|
||||
|
||||
interface ServiceValueSectionV3Props {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
export function ServiceValueSectionV3({ service }: ServiceValueSectionV3Props) {
|
||||
const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp];
|
||||
|
||||
return (
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-slate-50/80 via-transparent to-slate-50/50" />
|
||||
|
||||
<div className="container-wide relative">
|
||||
<SectionHeader
|
||||
badge="专业服务"
|
||||
title={`为什么选择我们的${service.title}？`}
|
||||
subtitle={service.overview}
|
||||
icon={Zap}
|
||||
/>
|
||||
|
||||
<div className="mt-16">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#C41E3A] to-[#99182d] flex items-center justify-center shadow-xl shadow-red-500/20">
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">核心能力</h3>
|
||||
<p className="text-sm text-gray-500 mt-0.5">我们提供的服务特色</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{service.features.map((feature, index) => {
|
||||
const Icon = icons[index % icons.length]!;
|
||||
|
||||
return (
|
||||
<InkGlowCard
|
||||
key={feature}
|
||||
active={index === 0}
|
||||
className="group p-6 hover:border-purple-100"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: index * 0.08,
|
||||
duration: 0.5,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-300 shadow-md ${
|
||||
index === 0
|
||||
? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white'
|
||||
: 'bg-gradient-to-br from-gray-100 to-gray-200 text-gray-600 group-hover:from-[#C41E3A] group-hover:to-[#99182d] group-hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5.5 h-5.5" />
|
||||
</div>
|
||||
<p className="text-sm font-medium text-gray-800 leading-relaxed pt-2">
|
||||
{feature.split('：')[1] || feature}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.75, delay: 0.3 }}
|
||||
className="mt-16"
|
||||
>
|
||||
<InkDivider variant="subtle" />
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-xl shadow-green-500/20">
|
||||
<Award className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">服务优势</h3>
|
||||
<p className="text-sm text-gray-500 mt-0.5">选择我们的理由</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{service.benefits.map((benefit, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.4 + index * 0.06,
|
||||
duration: 0.5,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="group p-6 rounded-2xl bg-gradient-to-br from-green-50/80 via-emerald-50/30 to-teal-50/20 border border-green-100/60 hover:border-green-200 hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 shrink-0 group-hover:scale-110 transition-transform" />
|
||||
<p className="text-sm font-medium text-gray-800 leading-relaxed">{benefit}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{service.process && service.process.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.75, delay: 0.45 }}
|
||||
className="mt-20"
|
||||
>
|
||||
<InkDivider variant="decorative" />
|
||||
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900">
|
||||
服务流程
|
||||
</h3>
|
||||
<p className="text-gray-600 mt-3">标准化流程保障服务质量</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-[#C41E3A] via-blue-400 to-green-400 hidden md:block" />
|
||||
|
||||
<div className="space-y-6">
|
||||
{service.process.map((step, index) => (
|
||||
<motion.div
|
||||
key={step}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.5 + index * 0.1,
|
||||
duration: 0.55,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="relative flex gap-6 group"
|
||||
>
|
||||
<div className="relative z-10 shrink-0">
|
||||
<div className="w-16 h-16 rounded-full bg-white border-4 border-[#C41E3A] flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||||
<span className="text-lg font-bold text-[#C41E3A]">{String(index + 1).padStart(2, '0')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TiltCard
|
||||
tiltAmount={5}
|
||||
glareEnable={false}
|
||||
className="flex-1 p-6 rounded-2xl bg-white border border-gray-100 hover:border-[#C41E3A]/30 hover:shadow-lg transition-all"
|
||||
>
|
||||
<h4 className="font-bold text-gray-900 mb-2">
|
||||
{step.split('：')[0]}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 leading-relaxed">
|
||||
{step.split('：')[1] || step}
|
||||
</p>
|
||||
</TiltCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { ArrowRight, Building2, Users, Cpu, Package } from 'lucide-react';
|
||||
|
||||
interface SolutionCardV3Props {
|
||||
solution: {
|
||||
id: string;
|
||||
title: string;
|
||||
industry: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
challenges?: string[];
|
||||
suiteCombination?: {
|
||||
primaryProducts: string[];
|
||||
complementaryServices: string[];
|
||||
rationale: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function SolutionCardV3({ solution }: SolutionCardV3Props) {
|
||||
const industryIcons = {
|
||||
制造业: Building2,
|
||||
零售: Users,
|
||||
金融: Cpu,
|
||||
政务: Building2,
|
||||
};
|
||||
|
||||
const Icon = industryIcons[solution.industry as keyof typeof industryIcons] || Building2;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
duration: 0.65,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<Link href={`/solutions/${solution.id}`} className="block">
|
||||
<div className="relative h-full rounded-2xl bg-white border border-[var(--color-border-primary)] overflow-hidden hover:border-[rgba(var(--color-brand-primary-rgb),0.3)] hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
|
||||
<div className="aspect-video relative overflow-hidden bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[rgba(var(--color-brand-primary-rgb),0.04)] flex items-center justify-center">
|
||||
{solution.image ? (
|
||||
<Image
|
||||
src={solution.image}
|
||||
alt={solution.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<Icon className="w-16 h-16 text-[var(--color-brand-primary)]/20 group-hover:text-[var(--color-brand-primary)]/40 transition-colors" />
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
|
||||
|
||||
<div className="absolute top-4 left-4 flex gap-2">
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-[var(--color-brand-primary)] text-white shadow-lg inline-flex items-center gap-1.5">
|
||||
<Icon className="w-3 h-3" />
|
||||
{solution.industry}
|
||||
</span>
|
||||
{solution.suiteCombination && solution.suiteCombination.primaryProducts.length > 0 && (
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-white/90 text-[var(--color-text-secondary)] shadow-lg inline-flex items-center gap-1.5 backdrop-blur-sm">
|
||||
<Package className="w-3 h-3" />
|
||||
{solution.suiteCombination.primaryProducts.length} 产品组合
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-bold text-[var(--color-text-primary)] mb-3 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
{solution.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5 line-clamp-2">
|
||||
{solution.description}
|
||||
</p>
|
||||
|
||||
{solution.challenges && solution.challenges.length > 0 && (
|
||||
<div className="space-y-2 mb-5">
|
||||
{solution.challenges.slice(0, 2).map((challenge) => (
|
||||
<div key={challenge} className="flex items-start gap-2 text-sm text-[var(--color-text-muted)]">
|
||||
<span className="w-1 h-1 rounded-full bg-[var(--color-brand-primary)] mt-1.5 shrink-0" />
|
||||
<span className="line-clamp-1">{challenge}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-[var(--color-brand-primary)] group-hover:gap-3 transition-all">
|
||||
查看方案
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ServiceCardV3Props {
|
||||
service: {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
features?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export function ServiceCardV3({ service }: ServiceCardV3Props) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
duration: 0.65,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<Link href={`/services/${service.id}`} className="block">
|
||||
<div className="relative h-full rounded-2xl bg-gradient-to-br from-[rgba(var(--color-accent-blue-rgb),0.06)] to-[rgba(var(--color-accent-blue-rgb),0.02)] border border-[var(--color-border-primary)] overflow-hidden hover:border-[rgba(var(--color-accent-blue-rgb),0.3)] hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
|
||||
<div className="p-8">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[var(--color-accent-blue)] to-[#1d4ed8] flex items-center justify-center mb-5 shadow-lg shadow-[rgba(var(--color-accent-blue-rgb),0.2)] group-hover:scale-110 transition-transform">
|
||||
<Cpu className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-[var(--color-text-primary)] mb-3 group-hover:text-[var(--color-accent-blue)] transition-colors">
|
||||
{service.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5 line-clamp-3">
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
{service.features && service.features.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-5">
|
||||
{service.features.slice(0, 3).map((feature) => (
|
||||
<span
|
||||
key={feature}
|
||||
className="px-2.5 py-1 rounded-md text-xs font-medium bg-[var(--color-bg-primary)] text-[var(--color-accent-blue)] border border-[var(--color-border-primary)]"
|
||||
>
|
||||
{feature.split('：')[0]}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-[var(--color-accent-blue)] group-hover:gap-3 transition-all">
|
||||
了解服务
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,223 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
CheckCircle2,
|
||||
Lightbulb,
|
||||
Target,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import { TiltCard } from './micro-interactions';
|
||||
import { SectionHeader, InkDivider } from './brand-elements';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
|
||||
interface SolutionValueSectionV3Props {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
export function SolutionValueSectionV3({ solution }: SolutionValueSectionV3Props) {
|
||||
return (
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-slate-50/80 via-transparent to-slate-50/50" />
|
||||
|
||||
<div className="container-wide relative">
|
||||
<SectionHeader
|
||||
badge="解决方案"
|
||||
title={
|
||||
<>
|
||||
为<span className="text-[#C41E3A]">{solution.industry}</span>量身定制
|
||||
</>
|
||||
}
|
||||
subtitle={solution.description}
|
||||
icon={Lightbulb}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-red-50 to-orange-50/30 rounded-2xl p-8 border border-red-100">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
|
||||
<span className="w-10 h-10 rounded-xl bg-[#C41E3A] flex items-center justify-center">
|
||||
<Target className="w-5 h-5 text-white" />
|
||||
</span>
|
||||
行业痛点挑战
|
||||
</h3>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{solution.challenges.map((challenge, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: index * 0.08,
|
||||
duration: 0.45,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="flex items-start gap-3 text-gray-700"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#C41E3A] mt-2 shrink-0" />
|
||||
<span className="text-sm leading-relaxed">{challenge}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.7, delay: 0.15, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-blue-50 to-indigo-50/30 rounded-2xl p-8 border border-blue-100">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
|
||||
<span className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center">
|
||||
<Lightbulb className="w-5 h-5 text-white" />
|
||||
</span>
|
||||
Novalon解决方案
|
||||
</h3>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{solution.solutions.map((solutionItem, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.25 + index * 0.08,
|
||||
duration: 0.45,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="flex items-start gap-3 text-gray-700"
|
||||
>
|
||||
<CheckCircle2 className="w-4.5 h-4.5 text-blue-600 mt-0.5 shrink-0" />
|
||||
<span className="text-sm leading-relaxed">{solutionItem}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{solution.valueProposition && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.75, delay: 0.3 }}
|
||||
className="mt-20"
|
||||
>
|
||||
<InkDivider variant="decorative" />
|
||||
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900">
|
||||
{solution.valueProposition.headline}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-7">
|
||||
{solution.valueProposition.points.map((point, index) => (
|
||||
<TiltCard
|
||||
key={index}
|
||||
tiltAmount={6}
|
||||
className="p-7 rounded-2xl bg-white border border-gray-100 hover:border-blue-200 shadow-sm hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mb-5 shadow-lg shadow-blue-500/20">
|
||||
<TrendingUp className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<h4 className="text-lg font-bold text-gray-900 mb-2">{point.title}</h4>
|
||||
<p className="text-sm text-gray-600 leading-relaxed">{point.description}</p>
|
||||
</TiltCard>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{solution.suiteCombination && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.75, delay: 0.4 }}
|
||||
className="mt-20"
|
||||
>
|
||||
<InkDivider variant="subtle" />
|
||||
|
||||
<div className="bg-gradient-to-br from-slate-50 to-gray-100/50 rounded-2xl p-10 border border-gray-200/80">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2.5">
|
||||
<span className="w-8 h-8 rounded-lg bg-[#C41E3A] flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">核</span>
|
||||
</span>
|
||||
核心产品组合
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{solution.suiteCombination.primaryProducts.map((product, index) => (
|
||||
<motion.span
|
||||
key={product}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.5 + index * 0.06,
|
||||
duration: 0.35,
|
||||
}}
|
||||
className="px-5 py-2.5 bg-gradient-to-r from-red-50 to-red-100/60 text-[#C41E3A] text-sm font-semibold rounded-xl border border-red-200"
|
||||
>
|
||||
{product}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2.5">
|
||||
<span className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">配</span>
|
||||
</span>
|
||||
配套专业服务
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{solution.suiteCombination.complementaryServices.map((service, index) => (
|
||||
<motion.span
|
||||
key={service}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.65 + index * 0.06,
|
||||
duration: 0.35,
|
||||
}}
|
||||
className="px-5 py-2.5 bg-gradient-to-r from-blue-50 to-blue-100/60 text-blue-700 text-sm font-semibold rounded-xl border border-blue-200"
|
||||
>
|
||||
{service}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.85, duration: 0.55 }}
|
||||
className="mt-8 p-5 bg-white/70 rounded-xl text-sm text-gray-600 leading-relaxed border border-gray-100"
|
||||
>
|
||||
💡 <strong className="text-gray-800">组合逻辑：</strong>{solution.suiteCombination.rationale}
|
||||
</motion.p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import type { DataProof } from '@/lib/constants/products';
|
||||
|
||||
interface DataProofGridProps {
|
||||
proofs: DataProof[];
|
||||
accentColor?: string;
|
||||
}
|
||||
|
||||
export function DataProofGrid({ proofs, accentColor = '#C41E3A' }: DataProofGridProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
|
||||
{proofs.map((proof, index) => (
|
||||
<motion.div
|
||||
key={proof.metric}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="rounded-xl border border-gray-200 bg-white p-6 text-center shadow-sm"
|
||||
>
|
||||
<p
|
||||
className="text-3xl font-bold tracking-tight"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
{proof.value}
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-semibold text-gray-900">{proof.metric}</p>
|
||||
<p className="mt-1 text-xs text-gray-500">{proof.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
Target,
|
||||
Rocket,
|
||||
ClipboardCheck,
|
||||
Headphones,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import type { Service } from '@/lib/constants/services';
|
||||
|
||||
interface ServiceValueSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
const processIcons: LucideIcon[] = [Target, Rocket, ClipboardCheck, Headphones];
|
||||
|
||||
export function ServiceValueSection({ service }: ServiceValueSectionProps) {
|
||||
return (
|
||||
<section className="bg-white py-16 lg:py-20">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-10"
|
||||
>
|
||||
<p className="text-sm leading-relaxed text-gray-600">{service.overview}</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="mb-6 text-xl font-bold text-gray-900">服务能力</h2>
|
||||
<ul className="space-y-3">
|
||||
{service.features.map((feature, index) => (
|
||||
<motion.li
|
||||
key={feature}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="flex items-start gap-3"
|
||||
>
|
||||
<CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-[#C41E3A]" />
|
||||
<span className="text-sm leading-relaxed text-gray-700">{feature}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h3 className="mb-4 mt-8 text-lg font-bold text-gray-900">核心价值</h3>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
{service.benefits.map((benefit, index) => (
|
||||
<motion.div
|
||||
key={benefit}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.06 }}
|
||||
className="rounded-lg border border-red-50 bg-red-50/30 p-3"
|
||||
>
|
||||
<p className="text-sm text-gray-700">{benefit}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.15 }}
|
||||
>
|
||||
<h2 className="mb-6 flex items-center gap-2 text-xl font-bold text-gray-900">
|
||||
<Clock className="h-5 w-5 text-[#C41E3A]" />
|
||||
服务流程
|
||||
</h2>
|
||||
<div className="relative">
|
||||
{service.process.map((step, index) => {
|
||||
const Icon = processIcons[index % processIcons.length]!;
|
||||
const isLast = index === service.process.length - 1;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={step}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.08 }}
|
||||
className="relative flex gap-4 pb-6 last:pb-0"
|
||||
>
|
||||
{!isLast && (
|
||||
<div className="absolute left-[19px] top-11 h-full w-px bg-gray-200" />
|
||||
)}
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#C41E3A] text-white shadow-md">
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<span className="text-xs font-semibold text-[#C41E3A]">
|
||||
步骤 {index + 1}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{step.split('：')[0]}
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs leading-relaxed text-gray-500">
|
||||
{step.split('：')[1] || step.split(':')[1] || ''}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,158 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { AlertTriangle, CheckCircle2, ArrowRight, Package, Wrench } from 'lucide-react';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
import { SERVICES } from '@/lib/constants/services';
|
||||
|
||||
interface SolutionValueSectionProps {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
|
||||
const primaryProducts = solution.suiteCombination.primaryProducts
|
||||
.map((id) => PRODUCTS.find((p) => p.id === id))
|
||||
.filter(Boolean);
|
||||
|
||||
const complementaryServices = solution.suiteCombination.complementaryServices
|
||||
.map((id) => SERVICES.find((s) => s.id === id))
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<section className="bg-white py-16 lg:py-20">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-12 text-center"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-gray-900 lg:text-3xl">
|
||||
{solution.valueProposition.headline}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="mb-12 grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{solution.valueProposition.points.map((point, index) => (
|
||||
<motion.div
|
||||
key={point.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||
className="rounded-xl border border-gray-100 bg-gray-50/50 p-6 text-center"
|
||||
>
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#C41E3A]/10 text-[#C41E3A]">
|
||||
<span className="text-lg">{point.icon}</span>
|
||||
</div>
|
||||
<h3 className="mb-2 text-base font-semibold text-gray-900">{point.title}</h3>
|
||||
<p className="text-sm leading-relaxed text-gray-600">{point.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-gray-900">
|
||||
<AlertTriangle className="h-5 w-5 text-orange-500" />
|
||||
行业挑战
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{solution.challenges.map((challenge, index) => (
|
||||
<motion.li
|
||||
key={challenge}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="flex items-start gap-2 text-sm text-gray-700"
|
||||
>
|
||||
<span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-orange-400" />
|
||||
{challenge}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.15 }}
|
||||
>
|
||||
<h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-gray-900">
|
||||
<CheckCircle2 className="h-5 w-5 text-green-500" />
|
||||
解决方案
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{solution.solutions.map((sol, index) => (
|
||||
<motion.li
|
||||
key={sol}
|
||||
initial={{ opacity: 0, x: 10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="flex items-start gap-2 text-sm text-gray-700"
|
||||
>
|
||||
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
|
||||
{sol}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{(primaryProducts.length > 0 || complementaryServices.length > 0) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mt-12 rounded-2xl bg-gradient-to-br from-gray-50 to-gray-100 p-8"
|
||||
>
|
||||
<h3 className="mb-2 text-lg font-bold text-gray-900">推荐套装组合</h3>
|
||||
<p className="mb-6 text-sm leading-relaxed text-gray-600">
|
||||
{solution.suiteCombination.rationale}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{primaryProducts.map((product) =>
|
||||
product ? (
|
||||
<a
|
||||
key={product.id}
|
||||
href={`/products/${product.id}`}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-blue-200 bg-white px-4 py-2 text-sm font-medium text-blue-700 transition-all hover:bg-blue-50 hover:border-blue-300"
|
||||
>
|
||||
<Package className="h-4 w-4" />
|
||||
{product.title}
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
</a>
|
||||
) : null,
|
||||
)}
|
||||
{complementaryServices.map((service) =>
|
||||
service ? (
|
||||
<a
|
||||
key={service.id}
|
||||
href={`/services/${service.id}`}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-purple-200 bg-white px-4 py-2 text-sm font-medium text-purple-700 transition-all hover:bg-purple-50 hover:border-purple-300"
|
||||
>
|
||||
<Wrench className="h-4 w-4" />
|
||||
{service.title}
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
</a>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState } from 'react';
|
||||
import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, MessageCircle } from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
export interface NarrativeCTAProps {
|
||||
title?: string;
|
||||
description?: string;
|
||||
primaryLabel?: string;
|
||||
primaryHref?: string;
|
||||
secondaryLabel?: string;
|
||||
secondaryHref?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 第四层：行动号召
|
||||
* 全宽深色背景 + 水墨纹理 + 双CTA按钮
|
||||
*/
|
||||
export function NarrativeCTA({
|
||||
title = '一起聊聊您的数字化需求',
|
||||
description = '无论您处于数字化转型的哪个阶段，我们都愿意坐下来一起想办法。首次咨询免费，无任何销售压力。',
|
||||
primaryLabel = '预约免费咨询',
|
||||
primaryHref = '/contact',
|
||||
secondaryLabel = '了解我们的方法',
|
||||
secondaryHref = '/team',
|
||||
}: NarrativeCTAProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const mouseX = useMotionValue(0);
|
||||
const mouseY = useMotionValue(0);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const springX = useSpring(mouseX, { stiffness: 80, damping: 20 });
|
||||
const springY = useSpring(mouseY, { stiffness: 80, damping: 20 });
|
||||
|
||||
const glowX = useTransform(springX, [0, 1], ['-10%', '110%']);
|
||||
const glowY = useTransform(springY, [0, 1], ['-10%', '110%']);
|
||||
|
||||
function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
|
||||
if (!containerRef.current || shouldReduceMotion) return;
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
mouseX.set((e.clientX - rect.left) / rect.width);
|
||||
mouseY.set((e.clientY - rect.top) / rect.height);
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
id="cta"
|
||||
ref={containerRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
className="relative py-24 md:py-32 overflow-hidden"
|
||||
style={{ backgroundColor: 'var(--color-cta-bg)' }}
|
||||
>
|
||||
{/* Ink texture background */}
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
{!shouldReduceMotion && (
|
||||
<motion.div
|
||||
className="absolute inset-[-20%]"
|
||||
style={{
|
||||
background: 'radial-gradient(circle at center, rgba(196, 30, 58, 0.06) 0%, transparent 50%)',
|
||||
x: glowX,
|
||||
y: glowY,
|
||||
opacity: isHovered ? 1 : 0.4,
|
||||
}}
|
||||
transition={{ opacity: { duration: 0.6 } }}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '200px 200px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.97, y: 16 }}
|
||||
whileInView={{ opacity: 1, scale: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.6, ease: [0.25, 1, 0.5, 1] }}
|
||||
className="text-center max-w-3xl mx-auto"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-white mb-6 tracking-tight leading-tight">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="text-lg text-white/60 leading-relaxed mb-10 max-w-2xl mx-auto">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Button size="lg" asChild className="group relative overflow-hidden">
|
||||
<StaticLink href={primaryHref}>
|
||||
<span className="relative z-10 flex items-center">
|
||||
<MessageCircle className="w-4 h-4 mr-2" />
|
||||
{primaryLabel}
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</span>
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10 hover:border-white/35 backdrop-blur-sm"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href={secondaryHref}>{secondaryLabel}</StaticLink>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InkWashBackground } from '@/components/ui/ink-wash';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export interface NarrativeHeroProps {
|
||||
/** Page badge/tag */
|
||||
badge?: { text: string; variant?: 'brand' | 'blue' | 'green' | 'purple' };
|
||||
/** Main headline */
|
||||
title: string;
|
||||
/** Keyword highlighted in calligraphy font + brand red */
|
||||
highlight?: string;
|
||||
/** Subtitle / one-line value proposition */
|
||||
subtitle: string;
|
||||
/** Description paragraph */
|
||||
description?: string;
|
||||
/** Primary CTA */
|
||||
primaryCta?: { label: string; href: string };
|
||||
/** Secondary CTA */
|
||||
secondaryCta?: { label: string; href: string };
|
||||
/** Right side content (card, image, etc.) */
|
||||
rightContent?: ReactNode;
|
||||
/** Stats row */
|
||||
stats?: { value: string; label: string }[];
|
||||
/** Extra content below description */
|
||||
extraContent?: ReactNode;
|
||||
}
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
export function NarrativeHero({
|
||||
badge,
|
||||
title,
|
||||
highlight,
|
||||
subtitle,
|
||||
description,
|
||||
primaryCta,
|
||||
secondaryCta,
|
||||
rightContent,
|
||||
stats,
|
||||
extraContent,
|
||||
}: NarrativeHeroProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const fadeUp = (delay: number) => ({
|
||||
initial: shouldReduceMotion ? {} : { opacity: 0, y: 20 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.6, delay, ease: EASE },
|
||||
});
|
||||
|
||||
return (
|
||||
<section
|
||||
className="relative min-h-[80vh] flex flex-col justify-center overflow-hidden bg-[var(--color-bg-primary)]"
|
||||
>
|
||||
<InkWashBackground variant="hero" />
|
||||
|
||||
<div className="container-wide py-20 md:py-28 lg:py-36 relative z-10 flex-1 flex items-center">
|
||||
<div className={`grid grid-cols-1 ${rightContent ? 'lg:grid-cols-2 gap-10 lg:gap-16' : 'max-w-4xl mx-auto text-center'} items-center w-full`}>
|
||||
<div className={rightContent ? '' : 'mx-auto'}>
|
||||
{/* Badge */}
|
||||
{badge && (
|
||||
<motion.div {...fadeUp(0)} className="mb-6">
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10">
|
||||
{badge.text}
|
||||
</span>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Subtitle above title */}
|
||||
<motion.p
|
||||
{...fadeUp(0.05)}
|
||||
className="text-base sm:text-lg text-[var(--color-text-muted)] mb-3"
|
||||
>
|
||||
{subtitle}
|
||||
</motion.p>
|
||||
|
||||
{/* Title with calligraphy highlight */}
|
||||
<motion.h1
|
||||
{...fadeUp(0.1)}
|
||||
className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl tracking-tight mb-6 leading-[1.12]"
|
||||
>
|
||||
{highlight ? (
|
||||
<>
|
||||
{title}{' '}
|
||||
<span className="text-[var(--color-brand-primary)] font-calligraphy">{highlight}</span>
|
||||
</>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
</motion.h1>
|
||||
|
||||
{/* Description */}
|
||||
{description && (
|
||||
<motion.p
|
||||
{...fadeUp(0.2)}
|
||||
className="text-base sm:text-lg text-[var(--color-text-muted)] max-w-lg leading-relaxed mb-8"
|
||||
>
|
||||
{description}
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
{/* CTAs */}
|
||||
{(primaryCta || secondaryCta) && (
|
||||
<motion.div
|
||||
{...fadeUp(0.3)}
|
||||
className={`flex ${rightContent ? 'flex-col sm:flex-row items-start' : 'flex-col sm:flex-row items-center justify-center'} gap-4 mb-10`}
|
||||
>
|
||||
{primaryCta && (
|
||||
<Button size="lg" asChild className="min-h-[52px] px-8 text-base font-semibold shadow-lg shadow-[var(--color-brand-primary)]/15">
|
||||
<StaticLink href={primaryCta.href}>
|
||||
{primaryCta.label}
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
)}
|
||||
{secondaryCta && (
|
||||
<Button size="lg" variant="ghost" asChild className="text-[var(--color-text-muted)]">
|
||||
<StaticLink href={secondaryCta.href}>{secondaryCta.label}</StaticLink>
|
||||
</Button>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Extra content */}
|
||||
{extraContent}
|
||||
</div>
|
||||
|
||||
{/* Right side content */}
|
||||
{rightContent && (
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 28 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4, ease: EASE }}
|
||||
>
|
||||
{rightContent}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats row */}
|
||||
{stats && stats.length > 0 && (
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.6, ease: EASE }}
|
||||
className="container-wide pb-16 relative z-10"
|
||||
>
|
||||
<div className="ink-divider mb-10" />
|
||||
<div className="flex flex-wrap justify-center gap-8 md:gap-16">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.label} className="text-center">
|
||||
<div className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] leading-none mb-1">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--color-text-subtle)] tracking-wide">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { InkWashBackground } from '@/components/ui/ink-wash';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export interface NarrativeTrustProps {
|
||||
/** Section badge */
|
||||
badge?: string;
|
||||
/** Section title */
|
||||
title: string;
|
||||
/** Title highlight */
|
||||
highlight?: string;
|
||||
/** Stat metrics */
|
||||
metrics?: { value: string; label: string; description?: string }[];
|
||||
/** Custom content (e.g., case studies, testimonials) */
|
||||
children?: ReactNode;
|
||||
/** Background variant */
|
||||
bgVariant?: 'default' | 'section';
|
||||
}
|
||||
|
||||
/**
|
||||
* 第三层：信任证明
|
||||
* 数据指标 + 案例摘要 + 资质认证
|
||||
*/
|
||||
export function NarrativeTrust({
|
||||
badge,
|
||||
title,
|
||||
highlight,
|
||||
metrics,
|
||||
children,
|
||||
bgVariant = 'default',
|
||||
}: NarrativeTrustProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<section className={`relative section-padding overflow-hidden ${bgVariant === 'section' ? 'bg-[var(--color-bg-section)]' : 'bg-[var(--color-bg-primary)]'}`}>
|
||||
<InkWashBackground variant="subtle" />
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.6, ease: [0.25, 1, 0.5, 1] }}
|
||||
className="mb-14"
|
||||
>
|
||||
{badge && (
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">{badge}</span>
|
||||
</div>
|
||||
)}
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
{title}
|
||||
{highlight && <span className="text-[var(--color-brand-primary)] font-calligraphy ml-1">{highlight}</span>}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* Metrics strip */}
|
||||
{metrics && metrics.length > 0 && (
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, ease: [0.25, 1, 0.5, 1] }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 mb-16"
|
||||
>
|
||||
{metrics.map((metric, idx) => (
|
||||
<motion.div
|
||||
key={metric.label}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: idx * 0.06 }}
|
||||
className="text-center p-6 rounded-xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)]"
|
||||
>
|
||||
<div className="text-3xl md:text-4xl font-bold text-[var(--color-brand-primary)] leading-none mb-2">
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-[var(--color-text-primary)] mb-1">{metric.label}</div>
|
||||
{metric.description && (
|
||||
<div className="text-xs text-[var(--color-text-subtle)]">{metric.description}</div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Custom content */}
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { InkCard } from '@/components/ui/ink-wash';
|
||||
import { InkWashBackground } from '@/components/ui/ink-wash';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
export interface ValuePoint {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
/** Optional stat number shown in corner */
|
||||
stat?: string;
|
||||
statLabel?: string;
|
||||
}
|
||||
|
||||
export interface NarrativeValueProps {
|
||||
/** Section badge */
|
||||
badge?: string;
|
||||
/** Section title */
|
||||
title: string;
|
||||
/** Title highlight (calligraphy) */
|
||||
highlight?: string;
|
||||
/** Subtitle */
|
||||
subtitle?: string;
|
||||
/** Value points */
|
||||
points: ValuePoint[];
|
||||
/** Grid columns */
|
||||
columns?: 2 | 3 | 4 | 5;
|
||||
/** Background variant */
|
||||
bgVariant?: 'default' | 'section';
|
||||
}
|
||||
|
||||
export function NarrativeValue({
|
||||
badge,
|
||||
title,
|
||||
highlight,
|
||||
subtitle,
|
||||
points,
|
||||
columns = 3,
|
||||
bgVariant = 'section',
|
||||
}: NarrativeValueProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const gridCols = {
|
||||
2: 'md:grid-cols-2',
|
||||
3: 'md:grid-cols-2 lg:grid-cols-3',
|
||||
4: 'md:grid-cols-2 lg:grid-cols-4',
|
||||
5: 'md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={`relative section-padding overflow-hidden ${bgVariant === 'section' ? 'bg-[var(--color-bg-section)]' : 'bg-[var(--color-bg-primary)]'}`}>
|
||||
<InkWashBackground variant="subtle" />
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.6, ease: [0.25, 1, 0.5, 1] }}
|
||||
className="mb-14"
|
||||
>
|
||||
{badge && (
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">{badge}</span>
|
||||
</div>
|
||||
)}
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
{title}
|
||||
{highlight && <span className="text-[var(--color-brand-primary)] font-calligraphy ml-1">{highlight}</span>}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="text-base text-[var(--color-text-muted)] max-w-2xl">{subtitle}</p>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Value cards grid */}
|
||||
<div className={`grid grid-cols-1 ${gridCols[columns]} gap-6 md:gap-8`}>
|
||||
{points.map((point, idx) => {
|
||||
const Icon = point.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={point.title}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.08, ease: [0.25, 1, 0.5, 1] }}
|
||||
>
|
||||
<InkCard padding="md" className="h-full">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-11 h-11 rounded-xl flex items-center justify-center bg-[var(--color-brand-primary-bg)]">
|
||||
<Icon className="w-5 h-5 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
</div>
|
||||
{point.stat && (
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold text-[var(--color-brand-primary)] leading-none">{point.stat}</div>
|
||||
{point.statLabel && (
|
||||
<div className="text-[10px] text-[var(--color-text-subtle)] mt-0.5">{point.statLabel}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{point.title}</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{point.description}</p>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export { NarrativeHero } from './NarrativeHero';
|
||||
export type { NarrativeHeroProps } from './NarrativeHero';
|
||||
export { NarrativeValue } from './NarrativeValue';
|
||||
export type { NarrativeValueProps, ValuePoint } from './NarrativeValue';
|
||||
export { NarrativeTrust } from './NarrativeTrust';
|
||||
export type { NarrativeTrustProps } from './NarrativeTrust';
|
||||
export { NarrativeCTA } from './NarrativeCTA';
|
||||
export type { NarrativeCTAProps } from './NarrativeCTA';
|
||||
@@ -1,73 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useTheme } from '@/contexts/theme-context';
|
||||
import { Sun, Moon, Monitor } from 'lucide-react';
|
||||
import { useCallback, useState, useRef, useEffect } from 'react';
|
||||
|
||||
const THEME_OPTIONS = [
|
||||
{ value: 'light' as const, label: '浅色', icon: Sun },
|
||||
{ value: 'dark' as const, label: '深色', icon: Moon },
|
||||
{ value: 'system' as const, label: '跟随系统', icon: Monitor },
|
||||
];
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => document.removeEventListener('mousedown', handleClick);
|
||||
}, []);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(value: 'light' | 'dark' | 'system') => {
|
||||
setTheme(value);
|
||||
setOpen(false);
|
||||
},
|
||||
[setTheme],
|
||||
);
|
||||
|
||||
const CurrentIcon =
|
||||
THEME_OPTIONS.find((o) => o.value === theme)?.icon ?? Monitor;
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center justify-center w-9 h-9 rounded-lg text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors"
|
||||
aria-label="切换主题"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<CurrentIcon className="w-[18px] h-[18px]" strokeWidth={1.8} />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 top-full mt-2 w-36 rounded-lg border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] shadow-lg py-1 z-50">
|
||||
{THEME_OPTIONS.map((opt) => {
|
||||
const Icon = opt.icon;
|
||||
const isActive = theme === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => handleSelect(opt.value)}
|
||||
className={`flex items-center gap-2.5 w-full px-3 py-2 text-sm transition-colors ${isActive
|
||||
? 'text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)]'
|
||||
: 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-4 h-4" strokeWidth={1.8} />
|
||||
<span>{opt.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import { renderHook, act } from '@testing-library/react';
|
||||
import { ThemeProvider, useTheme } from './theme-context';
|
||||
|
||||
describe('theme-context', () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
});
|
||||
|
||||
it('应该提供默认 system 主题', () => {
|
||||
const wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
);
|
||||
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current.theme).toBe('system');
|
||||
expect(['light', 'dark']).toContain(result.current.resolvedTheme);
|
||||
});
|
||||
|
||||
it('应该支持切换到深色模式', () => {
|
||||
const wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
);
|
||||
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.setTheme('dark');
|
||||
});
|
||||
|
||||
expect(result.current.theme).toBe('dark');
|
||||
expect(result.current.resolvedTheme).toBe('dark');
|
||||
expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
|
||||
});
|
||||
|
||||
it('应该支持切换到浅色模式', () => {
|
||||
const wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
);
|
||||
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.setTheme('dark');
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.setTheme('light');
|
||||
});
|
||||
|
||||
expect(result.current.theme).toBe('light');
|
||||
expect(result.current.resolvedTheme).toBe('light');
|
||||
expect(document.documentElement.getAttribute('data-theme')).toBeNull();
|
||||
});
|
||||
|
||||
it('应该持久化主题选择到 localStorage', () => {
|
||||
const wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
);
|
||||
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.setTheme('dark');
|
||||
});
|
||||
|
||||
expect(localStorage.getItem('novalon-theme')).toBe('dark');
|
||||
});
|
||||
});
|
||||
@@ -1,108 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark' | 'system';
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
resolvedTheme: 'light' | 'dark';
|
||||
setTheme: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
const STORAGE_KEY = 'novalon-theme';
|
||||
|
||||
function getSystemTheme(): 'light' | 'dark' {
|
||||
if (typeof window === 'undefined') {return 'light';}
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
}
|
||||
|
||||
function applyTheme(resolved: 'light' | 'dark') {
|
||||
const root = document.documentElement;
|
||||
if (resolved === 'dark') {
|
||||
root.setAttribute('data-theme', 'dark');
|
||||
} else {
|
||||
root.removeAttribute('data-theme');
|
||||
}
|
||||
}
|
||||
|
||||
function getInitialTheme(): Theme {
|
||||
if (typeof window === 'undefined') {return 'system';}
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored === 'light' || stored === 'dark' || stored === 'system') {
|
||||
return stored;
|
||||
}
|
||||
} catch { /* localStorage unavailable */ }
|
||||
return 'system';
|
||||
}
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [theme, setThemeState] = useState<Theme>(getInitialTheme);
|
||||
const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(() => {
|
||||
const initial = getInitialTheme();
|
||||
return initial === 'system' ? getSystemTheme() : initial;
|
||||
});
|
||||
const mounted = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (mounted.current) {return;}
|
||||
mounted.current = true;
|
||||
const initial = getInitialTheme();
|
||||
const resolved = initial === 'system' ? getSystemTheme() : initial;
|
||||
setResolvedTheme(resolved);
|
||||
applyTheme(resolved);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (theme !== 'system') {return;}
|
||||
|
||||
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const handler = () => {
|
||||
const resolved = getSystemTheme();
|
||||
setResolvedTheme(resolved);
|
||||
applyTheme(resolved);
|
||||
};
|
||||
mql.addEventListener('change', handler);
|
||||
return () => mql.removeEventListener('change', handler);
|
||||
}, [theme]);
|
||||
|
||||
const setTheme = useCallback(
|
||||
(t: Theme) => {
|
||||
setThemeState(t);
|
||||
const resolved = t === 'system' ? getSystemTheme() : t;
|
||||
setResolvedTheme(resolved);
|
||||
applyTheme(resolved);
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, t);
|
||||
} catch { /* localStorage unavailable */ }
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const context = useContext(ThemeContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
Reference in New Issue
Block a user