feat(marketing): 重构营销页面与四层叙事组件体系
- 重构 About、Contact、Team 等静态营销页面 - 重构 News 新闻列表与详情页 - 重构 Products 产品目录、详情与独立产品页面 - 重构 Services 与 Solutions 服务/解决方案页面 - 重构 Detail 四层叙事组件 (Hero → Value → Trust → CTA) - 重构 Sections 页面区块组件 (Hero, CTA, SocialProof, WhyUs 等) - 新增 SectionHeader、ServiceCard、CaseCard 等可复用组件
This commit is contained in:
张翔
@@ -0,0 +1,188 @@
|
||||
'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-brand 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>
|
||||
);
|
||||
}
|
||||
@@ -18,7 +18,7 @@ export function CaseStudyCard({ study, index }: CaseStudyCardProps) {
|
||||
className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md"
|
||||
>
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<span className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-[#C41E3A]">
|
||||
<span className="rounded-full bg-red-50 px-2.5 py-1 text-xs font-medium text-brand">
|
||||
{study.industry}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">{study.client}</span>
|
||||
|
||||
@@ -23,7 +23,7 @@ export function CertificationList({ certifications }: CertificationListProps) {
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-700 shadow-sm transition-all hover:border-gray-300 hover:shadow-md"
|
||||
>
|
||||
<Award className="h-4 w-4 text-[#C41E3A]" />
|
||||
<Award className="h-4 w-4 text-brand" />
|
||||
<span className="font-medium">{cert.name}</span>
|
||||
<span className="text-xs text-gray-400">{cert.issuer}</span>
|
||||
{cert.link && cert.link !== '#' && (
|
||||
|
||||
@@ -20,7 +20,7 @@ const typeConfig = {
|
||||
icon: Lightbulb,
|
||||
label: '方案',
|
||||
color: '#C41E3A',
|
||||
bg: '#fef2f2',
|
||||
bg: '#FEF2F4',
|
||||
},
|
||||
service: {
|
||||
icon: Wrench,
|
||||
@@ -40,7 +40,7 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-2 text-center text-2xl font-bold text-gray-900"
|
||||
className="mb-2 text-center text-2xl font-bold text-ink"
|
||||
>
|
||||
{title}
|
||||
</motion.h2>
|
||||
@@ -49,7 +49,7 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="mx-auto mb-8 max-w-2xl text-center text-sm text-gray-500"
|
||||
className="mx-auto mb-8 max-w-2xl text-center text-sm text-text-muted"
|
||||
>
|
||||
探索更多可能，发现与您需求相关的产品、方案和服务
|
||||
</motion.p>
|
||||
@@ -67,7 +67,7 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.08 }}
|
||||
className="group flex items-start gap-4 rounded-xl border border-gray-100 bg-gray-50/50 p-5 transition-all hover:border-gray-200 hover:bg-white hover:shadow-md"
|
||||
className="group flex items-start gap-4 rounded-xl border border-border-primary bg-bg-secondary/50 p-5 transition-all hover:border-border-secondary hover:bg-white hover:shadow-md"
|
||||
>
|
||||
<div
|
||||
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
|
||||
@@ -86,10 +86,10 @@ export function CrossRecommendGrid({ items, title = '相关推荐' }: CrossRecom
|
||||
>
|
||||
{config.label}
|
||||
</span>
|
||||
<ArrowRight className="h-3 w-3 text-gray-400 opacity-0 transition-opacity group-hover:opacity-100" />
|
||||
<ArrowRight className="h-3 w-3 text-text-muted opacity-0 transition-opacity group-hover:opacity-100" />
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-gray-900">{item.title}</h3>
|
||||
<p className="mt-1 text-xs leading-relaxed text-gray-500">
|
||||
<h3 className="text-sm font-semibold text-ink">{item.title}</h3>
|
||||
<p className="mt-1 text-xs leading-relaxed text-text-muted">
|
||||
{item.reason}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { ArrowRight, MessageCircle, Download } from 'lucide-react';
|
||||
import type { HeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
|
||||
|
||||
interface DetailCTASectionProps {
|
||||
theme: HeroTheme;
|
||||
@@ -13,46 +14,69 @@ interface DetailCTASectionProps {
|
||||
}
|
||||
|
||||
export function DetailCTASection({
|
||||
theme,
|
||||
theme: _theme,
|
||||
title = '准备好开始了吗？',
|
||||
description = '联系我们，获取专属方案和报价',
|
||||
primaryAction,
|
||||
secondaryAction,
|
||||
}: DetailCTASectionProps) {
|
||||
return (
|
||||
<section
|
||||
className="py-16 lg:py-20"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
|
||||
}}
|
||||
>
|
||||
<div className="container-wide text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-white lg:text-3xl">{title}</h2>
|
||||
<p className="mx-auto mt-3 max-w-xl text-sm text-white/70">{description}</p>
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="mt-8 flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
<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-brand-soft text-brand text-sm font-medium mb-6 border border-brand/20">
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
免费咨询
|
||||
</div>
|
||||
|
||||
<h2 className={`${DESIGN_SYSTEM.typography.hero.title} text-ink mb-6`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-text-secondary 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}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-white px-8 py-3 text-sm font-semibold text-gray-900 shadow-lg transition-all hover:shadow-xl"
|
||||
whileHover={{ scale: 1.02, y: -2 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="group relative inline-flex items-center gap-3 px-10 py-4 bg-brand text-white font-bold rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
{primaryAction.label}
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</a>
|
||||
<span>{primaryAction.label}</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</motion.a>
|
||||
|
||||
{secondaryAction && (
|
||||
<a
|
||||
href={secondaryAction.href}
|
||||
className="inline-flex items-center rounded-lg border border-white/30 px-6 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10"
|
||||
className="group inline-flex items-center gap-2.5 px-8 py-4 text-ink font-semibold rounded-xl border-2 border-border-primary hover:bg-white hover:border-brand/30 transition-all duration-300"
|
||||
>
|
||||
<Download className="w-5 h-5 transition-transform duration-300 group-hover:-translate-y-0.5" />
|
||||
{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-text-muted"
|
||||
>
|
||||
平均响应时间 < 2小时 · 7×24小时技术支持 · 无需预付费用
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import type { HeroTheme, HeroTexture } from '@/lib/constants/hero-themes';
|
||||
import { ArrowRight, Sparkles, ChevronDown } from 'lucide-react';
|
||||
import type { HeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { PressableButton } from './micro-interactions';
|
||||
|
||||
interface DetailHeroProps {
|
||||
theme: HeroTheme;
|
||||
@@ -13,42 +15,6 @@ interface DetailHeroProps {
|
||||
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(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px)',
|
||||
backgroundSize: '60px 60px',
|
||||
},
|
||||
'data-flow': {
|
||||
backgroundImage:
|
||||
'radial-gradient(circle at 20% 50%, rgba(255,255,255,.04) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.03) 0%, transparent 40%)',
|
||||
},
|
||||
layers: {
|
||||
backgroundImage:
|
||||
'linear-gradient(180deg, transparent 0%, rgba(255,255,255,.02) 50%, transparent 100%)',
|
||||
},
|
||||
'shield-hex': {
|
||||
backgroundImage:
|
||||
'repeating-linear-gradient(60deg, transparent, transparent 30px, rgba(255,255,255,.025) 30px, rgba(255,255,255,.025) 31px)',
|
||||
},
|
||||
circuit: {
|
||||
backgroundImage:
|
||||
'linear-gradient(90deg, transparent 49%, rgba(255,255,255,.02) 49%, rgba(255,255,255,.02) 51%, transparent 51%)',
|
||||
backgroundSize: '40px 40px',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0"
|
||||
style={{ opacity: texture.opacity, ...textureStyles[texture.type] }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function DetailHero({
|
||||
theme,
|
||||
badge,
|
||||
@@ -59,114 +25,164 @@ export function DetailHero({
|
||||
secondaryAction,
|
||||
}: DetailHeroProps) {
|
||||
const isCenterLayout = theme.layout === 'center' || theme.layout === 'wide';
|
||||
const isIconLeft = theme.layout === 'icon-left';
|
||||
|
||||
const containerClasses =
|
||||
theme.layout === 'wide'
|
||||
? 'container-wide py-24 lg:py-32'
|
||||
: 'container-wide py-20 lg:py-28';
|
||||
|
||||
const contentClasses = [
|
||||
'max-w-4xl',
|
||||
isCenterLayout ? 'mx-auto text-center' : '',
|
||||
isIconLeft ? 'flex items-center gap-8' : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<section
|
||||
className="relative overflow-hidden"
|
||||
style={{
|
||||
background: `linear-gradient(${theme.gradientAngle}deg, ${theme.gradientFrom}, ${theme.gradientTo})`,
|
||||
}}
|
||||
>
|
||||
<TextureOverlay texture={theme.texture} />
|
||||
|
||||
<div className={containerClasses}>
|
||||
<section className="relative min-h-[700px] flex items-center overflow-hidden bg-white">
|
||||
<div className={`container-wide relative z-10 ${theme.layout === 'wide' ? 'py-36 lg:py-44' : 'py-32 lg:py-40'}`}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
className={contentClasses}
|
||||
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.span
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.1, duration: 0.4 }}
|
||||
className={`mb-4 inline-block rounded-full px-3 py-1 text-xs font-medium tracking-wide ${
|
||||
<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.22, 1, 0.36, 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 ${
|
||||
isCenterLayout ? '' : ''
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: theme.accentBg,
|
||||
backgroundColor: `${theme.accentColor}10`,
|
||||
color: theme.accentColor,
|
||||
border: `1px solid ${theme.accentColor}33`,
|
||||
borderColor: `${theme.accentColor}25`,
|
||||
}}
|
||||
>
|
||||
<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.span>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<h1
|
||||
className="text-3xl font-bold tracking-tight text-white sm:text-4xl lg:text-5xl"
|
||||
style={{ lineHeight: 1.2 }}
|
||||
<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 text-ink ${
|
||||
isCenterLayout ? '' : ''
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
</motion.h1>
|
||||
|
||||
<p
|
||||
className={`mt-4 text-lg ${
|
||||
isCenterLayout ? 'mx-auto max-w-2xl' : 'max-w-2xl'
|
||||
}`}
|
||||
style={{ color: `${theme.accentColor}cc`, lineHeight: 1.6 }}
|
||||
<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-text-secondary leading-relaxed mb-5 max-w-3xl"
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
{description && (
|
||||
<p
|
||||
className={`mt-3 text-base leading-relaxed ${
|
||||
isCenterLayout ? 'mx-auto max-w-2xl' : 'max-w-2xl'
|
||||
}`}
|
||||
style={{ color: 'rgba(255,255,255,0.7)' }}
|
||||
<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-text-muted mt-5 max-w-2xl leading-relaxed"
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
{(primaryAction || secondaryAction) && (
|
||||
<div
|
||||
className={`mt-8 flex flex-wrap gap-4 ${
|
||||
isCenterLayout ? 'justify-center' : ''
|
||||
}`}
|
||||
<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}
|
||||
className="inline-flex items-center rounded-lg px-6 py-3 text-sm font-semibold text-white shadow-lg transition-all hover:shadow-xl hover:brightness-110"
|
||||
style={{
|
||||
backgroundColor: theme.accentColor,
|
||||
}}
|
||||
>
|
||||
{primaryAction.label}
|
||||
<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" />
|
||||
</PressableButton>
|
||||
</a>
|
||||
)}
|
||||
{secondaryAction && (
|
||||
<a
|
||||
href={secondaryAction.href}
|
||||
className="inline-flex items-center rounded-lg border px-6 py-3 text-sm font-semibold transition-all hover:bg-white/10"
|
||||
style={{
|
||||
borderColor: `${theme.accentColor}66`,
|
||||
color: `${theme.accentColor}ee`,
|
||||
}}
|
||||
>
|
||||
{secondaryAction.label}
|
||||
<a href={secondaryAction.href}>
|
||||
<PressableButton variant="secondary" className="px-8 py-4 text-base">
|
||||
{secondaryAction.label}
|
||||
</PressableButton>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</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-text-muted cursor-pointer hover:text-text-secondary transition-colors"
|
||||
>
|
||||
<ChevronDown className="w-6 h-6" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,90 +1,432 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { CheckCircle2, Zap, Shield, TrendingUp, type LucideIcon } from 'lucide-react';
|
||||
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 ProductValueSectionProps {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
const icons: LucideIcon[] = [CheckCircle2, Zap, Shield, TrendingUp];
|
||||
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 text-ink">{title}</span>;
|
||||
|
||||
const tags = desc.split('、').map((tag) => tag.trim()).filter(Boolean);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-bold text-ink 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-bg-secondary text-text-secondary text-xs font-medium rounded-lg border border-border-primary hover:border-brand/30 hover:bg-brand-soft/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="var(--color-bg-tertiary)"
|
||||
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-ink">{value}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs font-medium text-text-muted">{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') {
|
||||
if (isNaN(numericValue)) {
|
||||
setDisplayValue(value);
|
||||
} else {
|
||||
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-brand-soft/30 border border-brand/20'
|
||||
: 'bg-white border border-border-primary hover:border-border-secondary'
|
||||
}`}
|
||||
>
|
||||
<div className="relative">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center mb-5 shadow-md ${
|
||||
accent
|
||||
? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white'
|
||||
: 'bg-bg-secondary text-text-secondary'
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
|
||||
<div className="text-4xl md:text-5xl font-bold text-ink mb-2 tracking-tight">
|
||||
{displayValue}
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-ink mb-1.5">{metric}</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed">{description}</p>
|
||||
</div>
|
||||
</TiltCard>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProductValueSection({ product }: ProductValueSectionProps) {
|
||||
return (
|
||||
<section className="bg-white py-16 lg:py-20">
|
||||
<div className="container-wide">
|
||||
<div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
|
||||
<motion.div
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<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={{ duration: 0.5 }}
|
||||
transition={{ delay: 0.15, duration: 0.5 }}
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-soft text-brand text-sm font-bold tracking-wider uppercase mb-5"
|
||||
>
|
||||
<h2 className="mb-4 text-2xl font-bold text-gray-900 lg:text-3xl">
|
||||
核心能力
|
||||
</h2>
|
||||
<p className="mb-6 text-sm leading-relaxed text-gray-600">
|
||||
{product.overview}
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
<Zap className="w-4 h-4" />
|
||||
核心能力
|
||||
</motion.span>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-ink 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-text-secondary 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-md shadow-brand/20">
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-ink">功能模块</h3>
|
||||
<p className="text-sm text-text-muted 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 = icons[index % icons.length]!;
|
||||
const Icon = featureIcons[index % featureIcons.length]!;
|
||||
|
||||
return (
|
||||
<motion.li
|
||||
<InkGlowCard
|
||||
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"
|
||||
active={index === 0}
|
||||
className="group p-6 hover:border-brand/20"
|
||||
>
|
||||
<Icon 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>
|
||||
<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-sm ${
|
||||
index === 0
|
||||
? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white shadow-md shadow-brand/25'
|
||||
: 'bg-bg-secondary text-text-secondary group-hover:from-[#C41E3A] group-hover:to-[#99182d] group-hover:text-white group-hover:shadow-md group-hover:shadow-brand/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>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</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 }}
|
||||
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"
|
||||
>
|
||||
<h2 className="mb-4 text-2xl font-bold text-gray-900 lg:text-3xl">
|
||||
为什么选择我们
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<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-md shadow-blue-500/20">
|
||||
<TrendingUp className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-ink">核心优势</h3>
|
||||
<p className="text-sm text-text-muted mt-0.5">为什么选择我们</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{product.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-gray-100 bg-gray-50 p-4"
|
||||
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-bg-secondary border border-border-primary hover:border-brand/30 hover:shadow-md hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
<CheckCircle2 className="mb-2 h-5 w-5 text-green-600" />
|
||||
<p className="text-sm leading-relaxed text-gray-700">{benefit}</p>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-brand mt-0.5 shrink-0 group-hover:scale-110 transition-transform" />
|
||||
<p className="text-sm font-medium text-text-secondary leading-relaxed">{benefit}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 rounded-xl bg-gray-900 p-6">
|
||||
<h3 className="mb-3 text-sm font-semibold text-white">技术规格</h3>
|
||||
<ul className="space-y-2">
|
||||
{product.specs.slice(0, 4).map((spec) => (
|
||||
<li key={spec} className="flex items-start gap-2 text-xs text-gray-300">
|
||||
<span className="mt-1 h-1 w-1 shrink-0 rounded-full bg-[#C41E3A]" />
|
||||
{spec}
|
||||
</li>
|
||||
<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-bg-secondary border border-border-primary"
|
||||
>
|
||||
<h4 className="font-bold text-ink 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-text-secondary group/item"
|
||||
>
|
||||
<ArrowRight className="w-4 h-4 text-brand mt-0.5 shrink-0 group-hover/item:translate-x-1 transition-transform" />
|
||||
<span>{spec}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</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-brand tracking-wider uppercase">
|
||||
数据说话
|
||||
</span>
|
||||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight text-ink">
|
||||
用真实效果证明价值
|
||||
</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,9 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { CaseStudyCard } from './detail-case-study';
|
||||
import { DataProofGrid } from './detail-data-proof';
|
||||
import { CertificationList } from './detail-certification';
|
||||
import type { CaseStudy, DataProof, Certification } from '@/lib/constants/products';
|
||||
import { DESIGN_SYSTEM } from '@/lib/constants/design-system';
|
||||
|
||||
interface DetailTrustSectionProps {
|
||||
caseStudies?: CaseStudy[];
|
||||
@@ -12,6 +14,53 @@ interface DetailTrustSectionProps {
|
||||
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, ''));
|
||||
if (isNaN(numericValue)) {
|
||||
setDisplayValue(value);
|
||||
return;
|
||||
}
|
||||
|
||||
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-ink">
|
||||
{displayValue}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DetailTrustSection({
|
||||
caseStudies = [],
|
||||
dataProofs = [],
|
||||
@@ -22,48 +71,108 @@ export function DetailTrustSection({
|
||||
if (!hasContent) return null;
|
||||
|
||||
return (
|
||||
<section className="bg-gray-50 py-16 lg:py-20">
|
||||
<div className="container-wide">
|
||||
<section className="relative py-20 lg:py-28 bg-bg-secondary overflow-hidden">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="container-wide relative">
|
||||
{dataProofs.length > 0 && (
|
||||
<div className="mb-12">
|
||||
<h2 className="mb-2 text-center text-2xl font-bold text-gray-900">
|
||||
关键数据
|
||||
</h2>
|
||||
<p className="mx-auto mb-8 max-w-2xl text-center text-sm text-gray-500">
|
||||
用真实数据说话，让效果可衡量、可验证
|
||||
</p>
|
||||
<DataProofGrid proofs={dataProofs} accentColor={accentColor} />
|
||||
<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-brand tracking-wider uppercase">
|
||||
数据说话
|
||||
</span>
|
||||
<h2 className={`${DESIGN_SYSTEM.typography.section.title} text-ink`}>
|
||||
用真实效果证明价值
|
||||
</h2>
|
||||
<p className={`${DESIGN_SYSTEM.typography.section.subtitle} mt-3 max-w-xl mx-auto text-text-secondary`}>
|
||||
来自真实客户的使用数据，让效果可衡量、可验证
|
||||
</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,
|
||||
transition: { duration: 0.3 },
|
||||
}}
|
||||
className={`relative p-8 rounded-2xl border transition-all duration-300 ${
|
||||
index === 0
|
||||
? 'bg-brand-soft/50 border-brand/20'
|
||||
: 'bg-white border-border-primary hover:border-border-secondary hover:shadow-md'
|
||||
}`}
|
||||
>
|
||||
<AnimatedCounter value={proof.value} />
|
||||
<p className="text-lg font-semibold text-ink mt-2">{proof.metric}</p>
|
||||
<p className="text-sm text-text-muted mt-1 leading-relaxed">{proof.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{caseStudies.length > 0 && (
|
||||
<div className="mb-12">
|
||||
<h2 className="mb-2 text-center text-2xl font-bold text-gray-900">
|
||||
客户案例
|
||||
</h2>
|
||||
<p className="mx-auto mb-8 max-w-2xl text-center text-sm text-gray-500">
|
||||
来自真实客户的成功实践，看看他们如何实现转型突破
|
||||
</p>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<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-ink`}>
|
||||
他们已经实现了转型突破
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{caseStudies.map((study, index) => (
|
||||
<CaseStudyCard key={study.client} study={study} index={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 && (
|
||||
<div>
|
||||
<h2 className="mb-2 text-center text-2xl font-bold text-gray-900">
|
||||
资质认证
|
||||
</h2>
|
||||
<p className="mx-auto mb-6 max-w-2xl text-center text-sm text-gray-500">
|
||||
通过权威机构认证，保障安全合规
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<CertificationList certifications={certifications} />
|
||||
</div>
|
||||
</div>
|
||||
<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-text-secondary mb-6">资质认证</h3>
|
||||
<CertificationList certifications={certifications} />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
export { DetailHero } from './detail-hero';
|
||||
|
||||
export { ProductValueSection } from './detail-product-value';
|
||||
|
||||
export { DetailTrustSection } from './detail-trust-section';
|
||||
|
||||
export { DetailCTASection } from './detail-cta-section';
|
||||
|
||||
export { CaseStudyCard } from './detail-case-study';
|
||||
export { CertificationList } from './detail-certification';
|
||||
export { CrossRecommendGrid } from './detail-cross-recommend';
|
||||
|
||||
export { SolutionValueSection } from './solution-value';
|
||||
export { ServiceValueSection } from './service-value';
|
||||
|
||||
export { ListPageHero } from './list-page-hero';
|
||||
export { ProductCard } from './product-card';
|
||||
export { SolutionCard } from './solution-service-card';
|
||||
|
||||
export { TiltCard, PressableButton, InkGlowCard, HoverLink } from './micro-interactions';
|
||||
|
||||
export { BrandSeal, CalligraphyText, InkDivider, SectionHeader } from './brand-elements';
|
||||
@@ -0,0 +1,166 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
interface ListPageHeroProps {
|
||||
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-bg)',
|
||||
text: 'var(--color-brand)',
|
||||
border: 'rgba(var(--color-brand-rgb), 0.15)',
|
||||
dot: 'var(--color-brand)',
|
||||
},
|
||||
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 ListPageHero({
|
||||
title,
|
||||
subtitle,
|
||||
description,
|
||||
stats,
|
||||
badge,
|
||||
}: ListPageHeroProps) {
|
||||
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-rgb),_0.05)_0%,_transparent_50%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(var(--color-brand-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), 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useMotionValue, useTransform, useSpring } from 'framer-motion';
|
||||
import { useRef, ReactNode, useState, useCallback } from 'react';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
|
||||
interface TiltCardProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
tiltAmount?: number;
|
||||
glareEnable?: boolean;
|
||||
glareMaxOpacity?: number;
|
||||
scaleOnHover?: number;
|
||||
}
|
||||
|
||||
export function TiltCard({
|
||||
children,
|
||||
className = '',
|
||||
tiltAmount = 6,
|
||||
glareEnable = true,
|
||||
glareMaxOpacity = 0.06,
|
||||
scaleOnHover = 1.01,
|
||||
}: TiltCardProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const x = useMotionValue(0.5);
|
||||
const y = useMotionValue(0.5);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const rotateX = useSpring(useTransform(y, [0, 1], [tiltAmount, -tiltAmount]), {
|
||||
stiffness: 280,
|
||||
damping: 24,
|
||||
mass: 0.8,
|
||||
});
|
||||
const rotateY = useSpring(useTransform(x, [0, 1], [-tiltAmount, tiltAmount]), {
|
||||
stiffness: 280,
|
||||
damping: 24,
|
||||
mass: 0.8,
|
||||
});
|
||||
const scale = useSpring(isHovered ? scaleOnHover : 1, {
|
||||
stiffness: 300,
|
||||
damping: 28,
|
||||
mass: 0.6,
|
||||
});
|
||||
|
||||
const handleMouseMove = useCallback((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);
|
||||
}, [x, y]);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
setIsHovered(true);
|
||||
}, []);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setIsHovered(false);
|
||||
x.set(0.5);
|
||||
y.set(0.5);
|
||||
}, [x, y]);
|
||||
|
||||
const glareX = useTransform(x, [0, 1], ['0%', '100%']);
|
||||
const glareY = useTransform(y, [0, 1], ['0%', '100%']);
|
||||
const glareOpacity = useTransform(
|
||||
y,
|
||||
[0, 0.5, 1],
|
||||
[glareMaxOpacity * 0.3, glareMaxOpacity, glareMaxOpacity * 0.2]
|
||||
);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{
|
||||
rotateX,
|
||||
rotateY,
|
||||
scale,
|
||||
transformStyle: 'preserve-3d',
|
||||
perspective: 1400,
|
||||
}}
|
||||
className={`relative will-change-transform ${className}`}
|
||||
>
|
||||
{children}
|
||||
{glareEnable && (
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-0 rounded-[inherit] overflow-hidden"
|
||||
style={{
|
||||
opacity: glareOpacity,
|
||||
backgroundImage: `linear-gradient(
|
||||
135deg,
|
||||
rgba(255,255,255,0.6) 0%,
|
||||
rgba(255,255,255,0.2) 40%,
|
||||
transparent 60%
|
||||
)`,
|
||||
backgroundPositionX: glareX,
|
||||
backgroundPositionY: glareY,
|
||||
backgroundSize: '250% 250%',
|
||||
mixBlendMode: 'overlay',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PressableButtonProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
onClick?: () => void;
|
||||
variant?: 'primary' | 'secondary' | 'ghost';
|
||||
href?: string;
|
||||
}
|
||||
|
||||
export function PressableButton({
|
||||
children,
|
||||
className = '',
|
||||
onClick,
|
||||
variant = 'primary',
|
||||
href,
|
||||
}: PressableButtonProps) {
|
||||
const baseStyles = {
|
||||
primary:
|
||||
'bg-brand text-white shadow-sm hover:shadow-brand-hover',
|
||||
secondary:
|
||||
'bg-white text-ink border border-border-primary hover:border-brand/30 hover:shadow-md',
|
||||
ghost:
|
||||
'bg-transparent text-brand hover:bg-brand/5',
|
||||
};
|
||||
|
||||
const content = (
|
||||
<motion.button
|
||||
whileHover={{ y: -1 }}
|
||||
whileTap={{ scale: 0.97, y: 0 }}
|
||||
transition={{
|
||||
type: 'spring',
|
||||
stiffness: 400,
|
||||
damping: 25,
|
||||
}}
|
||||
onClick={onClick}
|
||||
className={`inline-flex items-center gap-2 px-6 py-3 font-semibold rounded-md transition-all duration-fast ease-standard ${baseStyles[variant]} ${className}`}
|
||||
>
|
||||
{children}
|
||||
</motion.button>
|
||||
);
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<a href={href} className="inline-block">
|
||||
{content}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
interface InkGlowCardProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
active?: boolean;
|
||||
color?: string;
|
||||
glowSize?: number;
|
||||
}
|
||||
|
||||
export function InkGlowCard({ children, className = '', active = false, color = '#C41E3A', glowSize = 280 }: InkGlowCardProps) {
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleMouseMove = useCallback((e: React.MouseEvent) => {
|
||||
if (!ref.current) return;
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
setMousePos({
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
setIsHovered(true);
|
||||
}, []);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setIsHovered(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
whileHover={{
|
||||
y: -2,
|
||||
transition: {
|
||||
duration: 0.25,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
},
|
||||
}}
|
||||
className={`relative bg-white overflow-hidden transition-shadow duration-fast ease-standard ${active ? 'border border-brand/20' : 'border border-border-primary'} ${className}`}
|
||||
style={{
|
||||
borderRadius: 'var(--radius-lg)',
|
||||
boxShadow: isHovered
|
||||
? '0 4px 12px rgba(10, 14, 20, 0.06), 0 2px 4px rgba(10, 14, 20, 0.03)'
|
||||
: '0 1px 3px rgba(10, 14, 20, 0.04), 0 1px 2px rgba(10, 14, 20, 0.02)',
|
||||
}}
|
||||
>
|
||||
{active && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-brand/[0.03] to-transparent pointer-events-none" />
|
||||
)}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none transition-opacity duration-normal ease-ink"
|
||||
style={{
|
||||
opacity: isHovered ? 1 : 0,
|
||||
background: `radial-gradient(${glowSize}px circle at ${mousePos.x}px ${mousePos.y}px, ${color}08, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="relative z-10">{children}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface HoverLinkProps {
|
||||
children: ReactNode;
|
||||
href: string;
|
||||
className?: string;
|
||||
showArrow?: boolean;
|
||||
color?: 'default' | 'brand';
|
||||
}
|
||||
|
||||
export function HoverLink({
|
||||
children,
|
||||
href,
|
||||
className = '',
|
||||
showArrow = false,
|
||||
color = 'default',
|
||||
}: HoverLinkProps) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
className={`group inline-flex items-center gap-1.5 font-medium transition-colors duration-fast ease-standard ${
|
||||
color === 'brand' ? 'text-brand' : 'text-text-secondary hover:text-brand'
|
||||
} ${className}`}
|
||||
>
|
||||
<span className="relative inline-block">
|
||||
<span className="relative z-10">{children}</span>
|
||||
<span
|
||||
className="absolute bottom-0 left-0 w-full h-px origin-left scale-x-0 transition-transform duration-normal ease-standard group-hover:scale-x-100"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, currentColor 0%, currentColor 100%)`,
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
{showArrow && (
|
||||
<ArrowUpRight className="w-4 h-4 transition-all duration-fast ease-standard group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { ArrowRight, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
interface ProductCardProps {
|
||||
product: {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
category: string;
|
||||
status: string;
|
||||
features?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export function ProductCard({ product }: ProductCardProps) {
|
||||
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-border-primary overflow-hidden hover:border-brand/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
|
||||
<div className="aspect-video relative overflow-hidden bg-bg-secondary">
|
||||
<Image
|
||||
src={product.image}
|
||||
alt={product.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
|
||||
<div className="absolute top-4 left-4 flex gap-2">
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-brand text-white shadow-md">
|
||||
{product.category}
|
||||
</span>
|
||||
{product.status === '已发布' && (
|
||||
<span className="px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white shadow-md 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-ink mb-3 group-hover:text-brand transition-colors">
|
||||
{product.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-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-bg-secondary text-text-muted border border-border-primary"
|
||||
>
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-brand group-hover:gap-3 transition-all">
|
||||
了解详情
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
'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 ServiceValueSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
export function ServiceValueSection({ service }: ServiceValueSectionProps) {
|
||||
const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp];
|
||||
|
||||
return (
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<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-md shadow-brand/20">
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-ink">核心能力</h3>
|
||||
<p className="text-sm text-text-muted 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-brand/20"
|
||||
>
|
||||
<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-sm ${
|
||||
index === 0
|
||||
? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white'
|
||||
: 'bg-bg-secondary text-text-secondary 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-text-secondary 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-md shadow-green-500/20">
|
||||
<Award className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-ink">服务优势</h3>
|
||||
<p className="text-sm text-text-muted 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-bg-secondary border border-border-primary hover:border-brand/30 hover:shadow-md 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-text-secondary 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-ink">
|
||||
服务流程
|
||||
</h3>
|
||||
<p className="text-text-secondary 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-brand flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
|
||||
<span className="text-lg font-bold text-brand">{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-border-primary hover:border-brand/30 hover:shadow-md transition-all"
|
||||
>
|
||||
<h4 className="font-bold text-ink mb-2">
|
||||
{step.split('：')[0]}
|
||||
</h4>
|
||||
<p className="text-sm text-text-secondary leading-relaxed">
|
||||
{step.split('：')[1] || step}
|
||||
</p>
|
||||
</TiltCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
'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 SolutionCardProps {
|
||||
solution: {
|
||||
id: string;
|
||||
title: string;
|
||||
industry: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
challenges?: string[];
|
||||
suiteCombination?: {
|
||||
primaryProducts: string[];
|
||||
complementaryServices: string[];
|
||||
rationale: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export function SolutionCard({ solution }: SolutionCardProps) {
|
||||
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-border-primary overflow-hidden hover:border-brand/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
|
||||
<div className="aspect-video relative overflow-hidden bg-bg-secondary 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-brand/20 group-hover:text-brand/40 transition-colors" />
|
||||
)}
|
||||
|
||||
<div className="absolute top-4 left-4 flex gap-2">
|
||||
<span className="px-3 py-1 rounded-full text-xs font-semibold bg-brand text-white shadow-md 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-text-secondary shadow-md inline-flex items-center gap-1.5">
|
||||
<Package className="w-3 h-3" />
|
||||
{solution.suiteCombination.primaryProducts.length} 产品组合
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-bold text-ink mb-3 group-hover:text-brand transition-colors">
|
||||
{solution.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-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-text-muted">
|
||||
<span className="w-1 h-1 rounded-full bg-brand 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-brand group-hover:gap-3 transition-all">
|
||||
查看方案
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ServiceCardProps {
|
||||
service: {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
features?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export function ServiceCard({ service }: ServiceCardProps) {
|
||||
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-bg-secondary border border-border-primary overflow-hidden hover:border-blue-300 hover:shadow-lg 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-md shadow-blue-500/20 group-hover:scale-110 transition-transform">
|
||||
<Cpu className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-ink mb-3 group-hover:text-blue-600 transition-colors">
|
||||
{service.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-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-white text-blue-600 border border-border-primary"
|
||||
>
|
||||
{feature.split('：')[0]}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-blue-600 group-hover:gap-3 transition-all">
|
||||
了解服务
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
'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 SolutionValueSectionProps {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
|
||||
return (
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<div className="container-wide relative">
|
||||
<SectionHeader
|
||||
badge="解决方案"
|
||||
title={
|
||||
<>
|
||||
为<span className="text-brand">{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-brand-soft/30 rounded-2xl p-8 border border-brand/20">
|
||||
<h3 className="text-xl font-bold text-ink mb-6 flex items-center gap-3">
|
||||
<span className="w-10 h-10 rounded-xl bg-brand 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-text-secondary"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand 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-blue-50/50 rounded-2xl p-8 border border-blue-100/60">
|
||||
<h3 className="text-xl font-bold text-ink 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>
|
||||
睿新致远解决方案
|
||||
</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-text-secondary"
|
||||
>
|
||||
<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-ink">
|
||||
{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-border-primary hover:border-blue-200 hover:shadow-md 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-md shadow-blue-500/20">
|
||||
<TrendingUp className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<h4 className="text-lg font-bold text-ink mb-2">{point.title}</h4>
|
||||
<p className="text-sm text-text-secondary 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-bg-secondary rounded-2xl p-10 border border-border-primary">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-ink mb-5 flex items-center gap-2.5">
|
||||
<span className="w-8 h-8 rounded-lg bg-brand 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-brand-soft/50 text-brand text-sm font-semibold rounded-xl border border-brand/20"
|
||||
>
|
||||
{product}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-ink 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-blue-50/80 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 rounded-xl text-sm text-text-secondary leading-relaxed border border-border-primary"
|
||||
>
|
||||
<strong className="text-ink">组合逻辑：</strong>{solution.suiteCombination.rationale}
|
||||
</motion.p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
'use client';
|
||||
|
||||
interface CaseImpact {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface CaseCardProps {
|
||||
/** Industry label (e.g. "制造业") */
|
||||
industry: string;
|
||||
/** Case title */
|
||||
title: string;
|
||||
/** Challenge the client faced (Bain-style) */
|
||||
challenge: string;
|
||||
/** Solution we provided (Bain-style) */
|
||||
solution: string;
|
||||
/** @deprecated Use challenge + solution instead */
|
||||
context?: string;
|
||||
/** Quantified impact metrics (2 items) */
|
||||
impact: CaseImpact[];
|
||||
/** Client quote */
|
||||
quote: string;
|
||||
/** Client name/title */
|
||||
author: string;
|
||||
/** Optional background image URL */
|
||||
image?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CaseCard({
|
||||
industry,
|
||||
title,
|
||||
challenge,
|
||||
solution,
|
||||
context,
|
||||
impact,
|
||||
quote,
|
||||
author,
|
||||
image,
|
||||
className = '',
|
||||
}: CaseCardProps) {
|
||||
const displayChallenge = challenge || context || '';
|
||||
const displaySolution = solution || '';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative overflow-hidden p-6 sm:p-8 md:p-10 lg:p-14 flex flex-col transition-all duration-500 bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:bg-[var(--color-bg-secondary)] ${className}`}
|
||||
>
|
||||
{/* Background image */}
|
||||
{image && (
|
||||
<div className="absolute inset-0 transition-opacity duration-500 opacity-[0.02] group-hover:opacity-[0.05]">
|
||||
<img
|
||||
src={image}
|
||||
alt=""
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative z-10 flex flex-col flex-1">
|
||||
{/* Industry tag */}
|
||||
<div
|
||||
className="text-[10px] tracking-[3px] uppercase font-medium mb-4 md:mb-5"
|
||||
style={{ color: 'var(--color-text-muted)' }}
|
||||
>
|
||||
{industry}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-sans text-[19px] sm:text-[22px] font-bold leading-[1.3] tracking-[-0.3px] text-[var(--color-text-primary)] mb-5 md:mb-6">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
{/* Bain-style: Challenge + Solution */}
|
||||
<div className="space-y-4 mb-6 md:mb-8 flex-1">
|
||||
{/* Challenge */}
|
||||
<div>
|
||||
<div
|
||||
className="text-[10px] tracking-[2px] uppercase font-semibold mb-2"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
挑战
|
||||
</div>
|
||||
<p className="text-[13px] sm:text-[14px] leading-relaxed text-[var(--color-text-secondary)]">
|
||||
{displayChallenge}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Solution (only if provided) */}
|
||||
{displaySolution && (
|
||||
<div>
|
||||
<div
|
||||
className="text-[10px] tracking-[2px] uppercase font-semibold mb-2"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
方案
|
||||
</div>
|
||||
<p className="text-[13px] sm:text-[14px] leading-relaxed text-[var(--color-text-secondary)]">
|
||||
{displaySolution}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Impact numbers — Results (Bain-style, most visual weight) */}
|
||||
<div className="grid grid-cols-2 gap-4 sm:gap-6 pt-5 md:pt-7 mb-5 md:mb-7 border-t border-[var(--color-border-primary)]">
|
||||
{impact.map((item, i) => (
|
||||
<div key={i} className="transition-transform duration-300 group-hover:scale-[1.02]">
|
||||
<div className="font-sans tabular-nums text-[32px] sm:text-[38px] md:text-[42px] font-bold leading-none mb-1 md:mb-1.5 tracking-[-1.5px] text-[var(--color-text-primary)]">
|
||||
{item.value}
|
||||
</div>
|
||||
<div className="text-[10px] sm:text-[11px] text-[var(--color-text-muted)]">
|
||||
{item.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
<blockquote className="text-[13px] leading-relaxed italic mb-2 md:mb-3 text-[var(--color-text-secondary)]">
|
||||
“{quote}”
|
||||
</blockquote>
|
||||
<cite className="text-[11px] sm:text-[12px] not-italic text-[var(--color-text-muted)]">
|
||||
{author}
|
||||
</cite>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,493 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { SectionHeader } from '@/components/sections/section-header';
|
||||
import { ServiceCard } from '@/components/sections/service-card';
|
||||
import { ScrollProgress } from '@/components/ui/scroll-progress';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { ArrowRight, Quote, Building2, Target, Lightbulb, TrendingUp } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { AnimatedCounter } from '@/components/ui/animated-counter';
|
||||
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
export interface CaseDetailData {
|
||||
id: string;
|
||||
client: string;
|
||||
industry: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
challenge: string;
|
||||
solution: string;
|
||||
result: string;
|
||||
metrics: { value: string; label: string; highlight?: boolean }[];
|
||||
timeline: { phase: string; duration: string; description: string }[];
|
||||
services: { id: string; title: string; description: string }[];
|
||||
testimonial?: { quote: string; author: string; role: string };
|
||||
}
|
||||
|
||||
interface CaseDetailHeroProps {
|
||||
data: CaseDetailData;
|
||||
}
|
||||
|
||||
function CaseDetailHero({ data }: CaseDetailHeroProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const heroRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: heroRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
|
||||
const contentY = useTransform(scrollYProgress, [0, 1], [0, 50]);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={heroRef}
|
||||
className="relative min-h-[85svh] flex items-center overflow-hidden pt-20"
|
||||
style={{ background: 'var(--color-bg-primary)' }}
|
||||
>
|
||||
<motion.div
|
||||
className="relative z-10 w-full max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 py-20 md:py-28"
|
||||
style={{ opacity, y: shouldReduceMotion ? 0 : contentY }}
|
||||
>
|
||||
<motion.div
|
||||
className="flex flex-wrap items-center gap-3 mb-8"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
>
|
||||
<span
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[11px] font-medium tracking-wider uppercase"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
}}
|
||||
>
|
||||
<Building2 className="w-3.5 h-3.5" />
|
||||
{data.industry}
|
||||
</span>
|
||||
<span className="text-[12px]" style={{ color: 'var(--color-text-muted)' }}>
|
||||
{data.client}
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Bain-style: big result number first */}
|
||||
<motion.div
|
||||
className="mb-8"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1, ease: EASE }}
|
||||
>
|
||||
<div
|
||||
className="font-sans text-[clamp(56px,12vw,120px)] font-black leading-none tracking-[-2px] mb-2"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
{data.metrics[0]?.value || '40%'}
|
||||
</div>
|
||||
<div
|
||||
className="text-lg md:text-xl font-medium"
|
||||
style={{ color: 'var(--color-text-secondary)' }}
|
||||
>
|
||||
{data.metrics[0]?.label || '核心成果提升'}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
className="font-sans text-[clamp(28px,5vw,48px)] font-bold leading-[1.15] tracking-[-0.5px] text-[var(--color-text-primary)] mb-6 max-w-3xl"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.25, ease: EASE }}
|
||||
>
|
||||
{data.title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-base md:text-lg max-w-2xl leading-relaxed mb-10 font-light"
|
||||
style={{ color: 'var(--color-text-secondary)' }}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: EASE }}
|
||||
>
|
||||
{data.subtitle}
|
||||
</motion.p>
|
||||
|
||||
{/* Quick stats row */}
|
||||
<motion.div
|
||||
className="grid grid-cols-3 gap-6 sm:gap-10 max-w-lg mb-10"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.55, ease: EASE }}
|
||||
>
|
||||
{data.metrics.slice(1, 4).map((m, i) => (
|
||||
<div key={i}>
|
||||
<div
|
||||
className="font-sans tabular-nums text-[28px] sm:text-[32px] font-bold leading-none mb-1.5"
|
||||
style={{ color: m.highlight ? 'var(--color-brand)' : 'var(--color-text-primary)' }}
|
||||
>
|
||||
{m.value}
|
||||
</div>
|
||||
<div className="text-[11px] sm:text-[12px]" style={{ color: 'var(--color-text-muted)' }}>
|
||||
{m.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-4"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.7, ease: EASE }}
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
咨询类似方案
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="#solution">查看方案</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ChallengeSection({ data }: { data: CaseDetailData }) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-start">
|
||||
<ScrollReveal className="lg:col-span-5">
|
||||
<SectionHeader
|
||||
label="Challenge"
|
||||
title="业务"
|
||||
highlight="挑战"
|
||||
desc="每个项目，都从一个真实的业务痛点出发"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} className="lg:col-span-7">
|
||||
<div
|
||||
className="p-8 sm:p-10 lg:p-12"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-secondary)',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Target className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
面临的挑战
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
className="text-lg md:text-xl leading-relaxed mb-6"
|
||||
style={{ color: 'var(--color-text-primary)' }}
|
||||
>
|
||||
{data.challenge}
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SolutionSection({ data }: { data: CaseDetailData }) {
|
||||
return (
|
||||
<section
|
||||
id="solution"
|
||||
className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden"
|
||||
style={{ background: 'var(--color-bg-secondary)' }}
|
||||
>
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
|
||||
<SectionHeader
|
||||
label="Solution"
|
||||
title="我们的"
|
||||
highlight="方案"
|
||||
desc="针对性的解决方案，每一步都有明确的目标"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-0" style={{ border: '1px solid var(--color-border-primary)' }}>
|
||||
<div style={{ backgroundColor: 'var(--color-bg-primary)' }}>
|
||||
<div className="p-8 sm:p-10 lg:p-12">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Lightbulb className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
核心思路
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-base md:text-lg leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{data.solution}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 sm:p-10 lg:p-12" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<TrendingUp className="w-6 h-6" style={{ color: 'var(--color-brand)' }} />
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wider uppercase"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
实施路径
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-5">
|
||||
{data.timeline.map((t, i) => (
|
||||
<div key={i} className="flex gap-4">
|
||||
<div
|
||||
className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
}}
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h4 className="text-[var(--color-text-primary)] font-semibold">{t.phase}</h4>
|
||||
<span className="text-[11px] px-2 py-0.5 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
|
||||
{t.duration}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{t.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ResultsSection({ data }: { data: CaseDetailData }) {
|
||||
const resultsRef = useRef<HTMLDivElement>(null);
|
||||
const [inView, setInView] = useState(false);
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!resultsRef.current) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setInView(true);
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
observer.observe(resultsRef.current);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const parseValue = (val: string): { num: number; suffix: string; isNumeric: boolean } => {
|
||||
const match = val.match(/^([\d.]+)(.*)$/);
|
||||
if (match && match[1] && !isNaN(parseFloat(match[1]))) {
|
||||
return { num: parseFloat(match[1]), suffix: match[2] || '', isNumeric: true };
|
||||
}
|
||||
return { num: 0, suffix: val, isNumeric: false };
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={resultsRef}
|
||||
className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden"
|
||||
style={{ background: 'var(--color-brand)' }}
|
||||
>
|
||||
{/* Background decoration */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute w-[600px] h-[600px] rounded-full opacity-[0.15] blur-[120px]"
|
||||
style={{
|
||||
background: 'radial-gradient(circle, rgba(255,255,255,0.8), transparent 70%)',
|
||||
top: '-30%',
|
||||
right: '-10%',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute w-[400px] h-[400px] rounded-full opacity-[0.1] blur-[100px]"
|
||||
style={{
|
||||
background: 'radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%)',
|
||||
bottom: '-20%',
|
||||
left: '10%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 relative z-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 text-center max-w-3xl mx-auto">
|
||||
<div
|
||||
className="text-[10px] tracking-[4px] uppercase font-medium mb-4"
|
||||
style={{ color: 'rgba(255,255,255,0.6)' }}
|
||||
>
|
||||
Results
|
||||
</div>
|
||||
<h2 className="font-sans text-3xl sm:text-4xl md:text-5xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
可量化的业务成果
|
||||
</h2>
|
||||
<p className="text-lg text-white/60 leading-relaxed max-w-2xl mx-auto">
|
||||
{data.result}
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px mb-16" style={{ backgroundColor: 'rgba(255,255,255,0.15)' }}>
|
||||
{data.metrics.slice(0, 4).map((m, i) => {
|
||||
const { num, suffix, isNumeric } = parseValue(m.value);
|
||||
const decimals = String(num).includes('.') ? String(num).split('.')[1]?.length ?? 0 : 0;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="p-10 sm:p-12 text-center transition-all duration-500 hover:bg-white/[0.05] group relative overflow-hidden"
|
||||
style={{ backgroundColor: 'var(--color-brand)' }}
|
||||
>
|
||||
{m.highlight && (
|
||||
<div className="absolute top-4 right-4 px-2 py-1 text-[10px] font-bold text-brand bg-white rounded-full">
|
||||
核心指标
|
||||
</div>
|
||||
)}
|
||||
<div className="font-sans tabular-nums text-[clamp(40px,8vw,64px)] font-black leading-none mb-3 text-white transition-transform duration-500 group-hover:scale-110">
|
||||
{isNumeric && inView && !shouldReduceMotion ? (
|
||||
<AnimatedCounter
|
||||
value={num}
|
||||
decimals={decimals}
|
||||
suffix={suffix}
|
||||
startOnView={false}
|
||||
duration={2000}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{isNumeric ? num : suffix}
|
||||
{isNumeric && suffix && (
|
||||
<span className="text-[0.5em] font-bold text-white/80 ml-0.5">{suffix}</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm md:text-base text-white/60 font-medium">
|
||||
{m.label}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{data.testimonial && (
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="relative p-8 sm:p-10 lg:p-14 border border-white/20 bg-white/[0.03] backdrop-blur-sm">
|
||||
<Quote className="w-12 h-12 absolute -top-6 left-8 text-white/20" />
|
||||
<blockquote className="text-xl sm:text-2xl md:text-3xl font-medium leading-relaxed text-white mb-8">
|
||||
“{data.testimonial.quote}”
|
||||
</blockquote>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center">
|
||||
<Building2 className="w-5 h-5 text-white/60" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-white text-lg">{data.testimonial.author}</div>
|
||||
<div className="text-sm text-white/50">{data.testimonial.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function RelatedServicesSection({ services }: { services: CaseDetailData['services'] }) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
|
||||
<SectionHeader
|
||||
label="Related"
|
||||
title="相关"
|
||||
highlight="服务"
|
||||
desc="类似的项目，我们还提供这些专业服务"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<StaggerReveal staggerDelay={0.08}>
|
||||
{services.slice(0, 3).map((s, i) => (
|
||||
<ServiceCard
|
||||
key={s.id}
|
||||
number={String(i + 1).padStart(2, '0')}
|
||||
title={s.title}
|
||||
description={s.description}
|
||||
href={`/services/${s.id}`}
|
||||
color="brand"
|
||||
/>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden" style={{ background: 'var(--color-bg-secondary)' }}>
|
||||
<div className="max-w-[800px] mx-auto px-5 sm:px-8 lg:px-16 text-center relative z-10">
|
||||
<ScrollReveal>
|
||||
<h2 className="font-sans text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-text-primary)] leading-tight tracking-tight mb-6">
|
||||
您也想实现类似的
|
||||
<span style={{ color: 'var(--color-brand)' }}> 业务突破</span>
|
||||
？
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl mb-10 font-light" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
免费咨询，48小时内给出初步方案建议
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
免费咨询
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="/cases">查看更多案例</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CaseDetailPage({ data }: { data: CaseDetailData }) {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<ScrollProgress />
|
||||
<CaseDetailHero data={data} />
|
||||
<ChallengeSection data={data} />
|
||||
<SolutionSection data={data} />
|
||||
<ResultsSection data={data} />
|
||||
<RelatedServicesSection services={data.services} />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export function ChallengeSection() {
|
||||
<div className="h-px flex-1 bg-[var(--color-border-primary)]" />
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] text-center">
|
||||
您的挑战，我们的<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)] text-center mt-4 max-w-xl mx-auto">
|
||||
深入理解企业数字化进程中的核心痛点，提供针对性解决方案
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState } from 'react';
|
||||
import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { BrandStamp } from '@/components/ui/brand-visuals';
|
||||
@@ -27,66 +27,14 @@ export function CTASection({
|
||||
}: CTASectionProps) {
|
||||
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)' }}
|
||||
style={{ backgroundColor: 'var(--color-bg-secondary)' }}
|
||||
>
|
||||
<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.08) 0%, transparent 50%)',
|
||||
x: glowX,
|
||||
y: glowY,
|
||||
opacity: isHovered ? 1 : 0.5,
|
||||
}}
|
||||
transition={{ opacity: { duration: 0.6 } }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(to top, rgba(196, 30, 58, 0.06) 0%, transparent 40%), linear-gradient(135deg, transparent 40%, rgba(196, 30, 58, 0.03) 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 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: '128px 128px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.96, y: 16 }}
|
||||
@@ -103,29 +51,29 @@ export function CTASection({
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: 0.15 }}
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 mb-8"
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-soft)] border border-[var(--color-border-primary)] mb-8"
|
||||
>
|
||||
<Sparkles className="w-3.5 h-3.5 text-[var(--color-brand-primary)]" />
|
||||
<span className="text-sm font-medium text-white/80">开始对话</span>
|
||||
<Sparkles className="w-3.5 h-3.5 text-[var(--color-brand)]" />
|
||||
<span className="text-sm font-medium text-[var(--color-text-primary)]">开始对话</span>
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-white mb-6 tracking-tight leading-tight">
|
||||
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-[var(--color-text-primary)] mb-6 tracking-tight leading-tight">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-white/65 leading-relaxed mb-10 max-w-2xl mx-auto">
|
||||
<p className="text-lg md:text-xl text-[var(--color-text-secondary)] leading-relaxed mb-10 max-w-2xl mx-auto">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-3 mb-10">
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] text-[var(--color-text-secondary)] text-xs">
|
||||
<MessageCircle className="w-3.5 h-3.5" />
|
||||
<span>免费咨询</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] text-[var(--color-text-secondary)] text-xs">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
<span>30 分钟内响应</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs">
|
||||
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] text-[var(--color-text-secondary)] text-xs">
|
||||
<ShieldCheck className="w-3.5 h-3.5" />
|
||||
<span>无销售压力</span>
|
||||
</div>
|
||||
@@ -144,7 +92,6 @@ export function CTASection({
|
||||
<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>
|
||||
|
||||
@@ -61,18 +61,16 @@ export function HeroSectionV2() {
|
||||
{...fadeUp(0)}
|
||||
className="mb-6"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs sm:text-sm font-medium border border-[var(--color-brand-primary)]/10">
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1.5 sm:px-4 sm:py-2 rounded-full bg-[var(--color-brand-bg)] text-[var(--color-brand)] text-xs sm:text-sm font-medium border border-[var(--color-brand)]/10">
|
||||
{COMPANY_INFO.slogan}
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.p
|
||||
{...fadeUp(0.1)}
|
||||
className="text-lg sm:text-xl lg:text-2xl text-[var(--color-text-primary)] mb-3"
|
||||
className="text-lg sm:text-xl lg:text-2xl text-[var(--color-text-secondary)] mb-3 font-medium"
|
||||
>
|
||||
<span className="font-semibold text-[var(--color-brand-primary)] font-calligraphy">
|
||||
企业数字化转型服务商
|
||||
</span>
|
||||
企业数字化转型服务商
|
||||
</motion.p>
|
||||
|
||||
<motion.h1
|
||||
@@ -95,7 +93,7 @@ export function HeroSectionV2() {
|
||||
{...fadeUp(0.35)}
|
||||
className="flex flex-col sm:flex-row items-start gap-4 mb-10"
|
||||
>
|
||||
<Button size="lg" asChild className="min-h-[52px] px-8 text-base font-semibold shadow-lg shadow-[var(--color-brand-primary)]/20">
|
||||
<Button size="lg" asChild className="min-h-[52px] px-8 text-base font-semibold shadow-lg shadow-[var(--color-brand)]/20">
|
||||
<StaticLink href="/contact">
|
||||
免费获取定制方案
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
@@ -117,7 +115,7 @@ export function HeroSectionV2() {
|
||||
className="relative ink-glow-border rounded-2xl lg:opacity-95"
|
||||
style={
|
||||
{
|
||||
'--glow-start': 'var(--color-brand-primary)',
|
||||
'--glow-start': 'var(--color-brand)',
|
||||
'--glow-end': 'var(--color-warning)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
@@ -129,13 +127,13 @@ export function HeroSectionV2() {
|
||||
className="absolute inset-0 rounded-2xl pointer-events-none transition-opacity duration-500"
|
||||
style={{
|
||||
opacity: isCardHovered ? 1 : 0,
|
||||
background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(var(--color-brand-primary-rgb), 0.06), transparent 40%)`,
|
||||
background: `radial-gradient(400px circle at ${mousePos.x}px ${mousePos.y}px, rgba(var(--color-brand-rgb), 0.06), transparent 40%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative rounded-2xl bg-[var(--color-bg-primary)]/80 backdrop-blur-sm p-6 sm:p-8 lg:p-10">
|
||||
<div className="w-12 h-12 lg:w-14 lg:h-14 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-5 lg:mb-6">
|
||||
<Handshake className="w-5 h-5 lg:w-6 lg:h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
<div className="w-12 h-12 lg:w-14 lg:h-14 rounded-xl bg-[var(--color-brand-bg)] flex items-center justify-center mb-5 lg:mb-6">
|
||||
<Handshake className="w-5 h-5 lg:w-6 lg:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg lg:text-xl font-semibold text-[var(--color-text-primary)] mb-2">
|
||||
@@ -153,12 +151,12 @@ export function HeroSectionV2() {
|
||||
key={step.label}
|
||||
className="flex items-center gap-3 lg:gap-4 p-2.5 lg:p-3 rounded-lg bg-[var(--color-bg-section)]/60"
|
||||
>
|
||||
<div className="w-8 h-8 lg:w-9 lg:h-9 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
|
||||
<Icon className="w-3.5 h-3.5 lg:w-4 lg:h-4 text-[var(--color-brand-primary)]" strokeWidth={2.2} />
|
||||
<div className="w-8 h-8 lg:w-9 lg:h-9 rounded-lg bg-[var(--color-brand-bg)] flex items-center justify-center shrink-0">
|
||||
<Icon className="w-3.5 h-3.5 lg:w-4 lg:h-4 text-[var(--color-brand)]" strokeWidth={2.2} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5 lg:gap-2">
|
||||
<span className="text-[10px] lg:text-xs font-bold text-[var(--color-brand-primary)]">0{idx + 1}</span>
|
||||
<span className="text-[10px] lg:text-xs font-bold text-[var(--color-brand)]">0{idx + 1}</span>
|
||||
<span className="text-xs lg:text-sm font-medium text-[var(--color-text-primary)]">{step.label}</span>
|
||||
</div>
|
||||
<p className="text-[10px] lg:text-xs text-[var(--color-text-muted)] mt-0.5 hidden sm:block">{step.desc}</p>
|
||||
@@ -178,13 +176,13 @@ export function HeroSectionV2() {
|
||||
key={cap.label}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors duration-200"
|
||||
style={{
|
||||
backgroundColor: idx === 0 ? 'var(--color-brand-primary-bg)' : idx === 1 ? 'rgba(var(--color-accent-blue-rgb), 0.06)' : idx === 2 ? 'rgba(var(--color-accent-purple-rgb), 0.06)' : 'rgba(var(--color-accent-cyan-rgb), 0.06)',
|
||||
borderColor: idx === 0 ? 'rgba(var(--color-brand-primary-rgb), 0.15)' : 'var(--color-border-primary)',
|
||||
backgroundColor: idx === 0 ? 'var(--color-brand-bg)' : idx === 1 ? 'rgba(var(--color-accent-blue-rgb), 0.06)' : idx === 2 ? 'rgba(var(--color-accent-purple-rgb), 0.06)' : 'rgba(var(--color-accent-cyan-rgb), 0.06)',
|
||||
borderColor: idx === 0 ? 'rgba(var(--color-brand-rgb), 0.15)' : 'var(--color-border-primary)',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
className="w-4 h-4"
|
||||
style={{ color: idx === 0 ? 'var(--color-brand-primary)' : idx === 1 ? 'var(--color-accent-blue)' : idx === 2 ? 'var(--color-accent-purple)' : 'var(--color-accent-cyan)' }}
|
||||
style={{ color: idx === 0 ? 'var(--color-brand)' : idx === 1 ? 'var(--color-accent-blue)' : idx === 2 ? 'var(--color-accent-purple)' : 'var(--color-accent-cyan)' }}
|
||||
strokeWidth={2.2}
|
||||
/>
|
||||
<span className="text-xs font-medium text-[var(--color-text-primary)]">{cap.label}</span>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
export { SectionHeader } from './section-header';
|
||||
|
||||
export { ServiceCard } from './service-card';
|
||||
export { ServiceGrid } from './service-grid';
|
||||
|
||||
export { ProductCard as SectionProductCard } from './product-card';
|
||||
export { ProductMatrixSection } from './product-matrix-section';
|
||||
|
||||
export { CaseCard } from './case-card';
|
||||
export { default as CaseDetailPage } from './case-detail-page';
|
||||
|
||||
export { InsightCard } from './insight-card';
|
||||
export { IndustryGrid } from './industry-grid';
|
||||
|
||||
export { StatsBar } from './stats-bar';
|
||||
export { SocialProofSection } from './social-proof-section';
|
||||
export { WhyUsSection } from './why-us-section';
|
||||
export { ChallengeSection } from './challenge-section';
|
||||
export { MethodologySection } from './methodology-section';
|
||||
|
||||
export { CTASection } from './cta-section';
|
||||
export { HeroSectionV2 } from './hero-section-v2';
|
||||
|
||||
export { QuestionCard } from './question-card';
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { type ElementType } from 'react';
|
||||
|
||||
interface IndustryItem {
|
||||
icon: ElementType;
|
||||
name: string;
|
||||
count: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
interface IndustryGridProps {
|
||||
items: IndustryItem[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function IndustryGrid({ items, className = '' }: IndustryGridProps) {
|
||||
return (
|
||||
<div
|
||||
className={`grid grid-cols-2 sm:grid-cols-4 gap-px rounded-sm overflow-hidden ${className}`}
|
||||
style={{ background: 'var(--color-border-secondary)' }}
|
||||
>
|
||||
{items.map((item, i) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="group relative overflow-hidden py-8 sm:py-10 px-4 sm:px-6 text-center cursor-pointer transition-all duration-400 bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-secondary)]"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<Icon className="w-7 h-7 sm:w-8 sm:h-8 mx-auto mb-2 sm:mb-3 transition-transform duration-400 group-hover:scale-110 text-[var(--color-text-primary)] group-hover:text-[var(--color-brand)]" />
|
||||
<div className="text-[13px] sm:text-[14px] font-medium transition-colors duration-400 text-[var(--color-text-primary)] group-hover:text-[var(--color-brand)]">
|
||||
{item.name}
|
||||
</div>
|
||||
<div className="text-[10px] sm:text-[11px] mt-1 sm:mt-1.5 transition-colors duration-400 text-[var(--color-text-subtle)] group-hover:text-[var(--color-text-muted)]">
|
||||
{item.count}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
'use client';
|
||||
|
||||
import { type ReactNode } from 'react';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
|
||||
interface InsightCardProps {
|
||||
/** Category tag (e.g. "白皮书", "观点") */
|
||||
tag: string;
|
||||
/** Title */
|
||||
title: string;
|
||||
/** Description */
|
||||
desc: string;
|
||||
/** Optional date string */
|
||||
date?: string;
|
||||
/** Whether this is a featured (large) card with image */
|
||||
featured?: boolean;
|
||||
/** Image URL for featured card */
|
||||
image?: string;
|
||||
/** Optional link element (avoid nesting <a> in <a>) */
|
||||
link?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InsightCard({
|
||||
tag,
|
||||
title,
|
||||
desc,
|
||||
date,
|
||||
featured = false,
|
||||
image,
|
||||
link,
|
||||
className = '',
|
||||
}: InsightCardProps) {
|
||||
if (featured) {
|
||||
return (
|
||||
<div
|
||||
className={`group relative overflow-hidden flex flex-col justify-end min-h-[260px] sm:min-h-[300px] md:min-h-[360px] p-8 sm:p-10 md:p-12 lg:p-14 rounded-sm cursor-pointer bg-[var(--color-bg-secondary)] border border-[var(--color-border-primary)] hover:bg-[var(--color-bg-tertiary)] ${className}`}
|
||||
>
|
||||
{/* Background image */}
|
||||
{image && (
|
||||
<img
|
||||
src={image}
|
||||
alt=""
|
||||
className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-10"
|
||||
loading="lazy"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="text-[10px] tracking-[3px] uppercase font-medium mb-4 md:mb-5"
|
||||
style={{ color: 'var(--color-brand)' }}>
|
||||
{tag}
|
||||
</div>
|
||||
<h3 className="font-sans text-[20px] sm:text-[24px] md:text-[26px] font-bold leading-[1.3] text-[var(--color-text-primary)] mb-2 md:mb-3">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-[13px] sm:text-[14px] leading-relaxed max-w-[400px] mb-5 md:mb-6 text-[var(--color-text-secondary)]">
|
||||
{desc}
|
||||
</p>
|
||||
<span className="text-[12px] inline-flex items-center gap-1.5 transition-colors duration-300 text-[var(--color-text-muted)] group-hover:text-[var(--color-brand)]">
|
||||
阅读全文
|
||||
<ArrowUpRight className="w-3 h-3" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group p-6 sm:p-8 md:p-10 transition-all duration-400 cursor-pointer flex flex-col bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-secondary)] ${className}`}
|
||||
>
|
||||
<div className="text-[10px] tracking-[2px] uppercase font-medium mb-3 md:mb-4"
|
||||
style={{ color: 'var(--color-brand)' }}>
|
||||
{tag}
|
||||
</div>
|
||||
<h4 className="font-sans text-[16px] sm:text-[17px] font-semibold leading-[1.5] mb-2 text-[var(--color-text-primary)]">
|
||||
{title}
|
||||
</h4>
|
||||
<p className="text-[13px] leading-relaxed flex-1 mb-4 md:mb-5 text-[var(--color-text-muted)]">
|
||||
{desc}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
{date && (
|
||||
<span className="text-[11px] text-[var(--color-text-subtle)]">{date}</span>
|
||||
)}
|
||||
{link && <span className="text-[12px] text-[var(--color-text-subtle)]">{link}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -23,7 +23,7 @@ export function MethodologySection() {
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 id="methodology-heading" className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
实施<span className="text-[var(--color-brand-primary)]">方法论</span>
|
||||
实施<span className="text-[var(--color-brand)]">方法论</span>
|
||||
</h2>
|
||||
<p className="text-base text-[var(--color-text-muted)]">
|
||||
经过多年实践验证的四阶段模型，确保每个项目都能科学推进、高效落地
|
||||
@@ -45,13 +45,13 @@ export function MethodologySection() {
|
||||
<div className="p-6 md:p-8">
|
||||
<div
|
||||
className="w-10 h-10 rounded-full flex items-center justify-center mb-5 text-sm font-bold"
|
||||
style={{ backgroundColor: `rgba(var(--color-brand-primary-rgb), ${bgOpacity})`, color: 'var(--color-brand-primary)' }}
|
||||
style={{ backgroundColor: `rgba(var(--color-brand-rgb), ${bgOpacity})`, color: 'var(--color-brand)' }}
|
||||
>
|
||||
{phase.number}
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-1">{phase.title}</h3>
|
||||
<p className="text-xs text-[var(--color-brand-primary)] font-medium mb-3">{phase.subtitle}</p>
|
||||
<p className="text-xs text-[var(--color-brand)] font-medium mb-3">{phase.subtitle}</p>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5">{phase.description}</p>
|
||||
|
||||
<div className="mb-4">
|
||||
@@ -59,7 +59,7 @@ export function MethodologySection() {
|
||||
<ul className="space-y-1.5">
|
||||
{phase.activities.map((activity, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-xs text-[var(--color-text-muted)]">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-[var(--color-brand)] mt-0.5 shrink-0" />
|
||||
{activity}
|
||||
</li>
|
||||
))}
|
||||
@@ -71,7 +71,7 @@ export function MethodologySection() {
|
||||
<ul className="space-y-1.5">
|
||||
{phase.deliverables.map((deliverable, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-xs text-[var(--color-text-subtle)]">
|
||||
<span className="w-1.5 h-1.5 bg-[var(--color-brand-primary)]/40 rounded-full mt-1.5 shrink-0" />
|
||||
<span className="w-1.5 h-1.5 bg-[var(--color-brand)]/40 rounded-full mt-1.5 shrink-0" />
|
||||
{deliverable}
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
'use client';
|
||||
|
||||
import { type ReactNode } from 'react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
|
||||
interface ProductCardProps {
|
||||
/** Icon component to render */
|
||||
icon: ReactNode;
|
||||
/** Product name */
|
||||
title: string;
|
||||
/** One-line description */
|
||||
description: string;
|
||||
/** Link href */
|
||||
href: string;
|
||||
/** Optional badge label */
|
||||
badge?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ProductCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
href,
|
||||
badge,
|
||||
className = '',
|
||||
}: ProductCardProps) {
|
||||
return (
|
||||
<StaticLink
|
||||
href={href}
|
||||
className={`group relative block p-6 sm:p-8 lg:p-10 bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-sm transition-all duration-500 overflow-hidden ${className}`}
|
||||
style={{ minHeight: '44px', minWidth: '44px' }}
|
||||
>
|
||||
{/* Left accent bar — visible on hover */}
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-[3px] bg-[var(--color-brand)] transition-transform duration-500 origin-top"
|
||||
style={{ transform: 'scaleY(0)' }}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'scaleY(1)';
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10">
|
||||
{/* Icon */}
|
||||
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg bg-[var(--color-brand-bg)] flex items-center justify-center mb-4 sm:mb-5 transition-transform duration-500 group-hover:scale-110">
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
{/* Badge + Title */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-sans text-[17px] sm:text-[19px] font-semibold text-[var(--color-text-primary)]">
|
||||
{title}
|
||||
</h3>
|
||||
{badge && (
|
||||
<span className="text-[10px] tracking-[2px] uppercase px-2 py-0.5 rounded-full bg-[var(--color-brand-bg)] text-[var(--color-brand)] font-medium">
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-[13px] sm:text-[14px] text-[var(--color-text-muted)] leading-relaxed mb-4 sm:mb-5">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
{/* CTA link */}
|
||||
<span className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[var(--color-text-primary)] transition-all duration-300 group-hover:text-[var(--color-brand)] group-hover:gap-2.5">
|
||||
了解更多
|
||||
<ArrowRight className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Hover background lift */}
|
||||
<div className="absolute inset-0 bg-[var(--color-bg-hover)] opacity-0 transition-opacity duration-500 pointer-events-none" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 transition-opacity duration-500 pointer-events-none"
|
||||
onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
|
||||
/>
|
||||
</StaticLink>
|
||||
);
|
||||
}
|
||||
@@ -25,12 +25,12 @@ export function ProductMatrixSection() {
|
||||
产品矩阵
|
||||
</h2>
|
||||
<p className="text-base text-[var(--color-text-muted)] max-w-lg">
|
||||
6 款自研产品覆盖企业数字化全场景，目前全部<span className="text-[var(--color-brand-primary)] font-medium">研发中</span>，欢迎提前了解规划
|
||||
6 款自研产品覆盖企业数字化全场景，目前全部<span className="text-[var(--color-brand)] font-medium">研发中</span>，欢迎提前了解规划
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)] animate-pulse" />
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--color-brand-bg)] text-[var(--color-brand)] text-xs font-medium border border-[var(--color-brand)]/10">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)] animate-pulse" />
|
||||
研发中 · 即将上线
|
||||
</span>
|
||||
<span className="text-sm text-[var(--color-text-subtle)] font-mono tracking-wider hidden md:block">
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
'use client';
|
||||
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
|
||||
interface QuestionCardProps {
|
||||
/** The strategic question */
|
||||
question: string;
|
||||
/** The answer/description */
|
||||
description: string;
|
||||
/** Link href */
|
||||
href: string;
|
||||
/** Link text (default "了解详情") */
|
||||
linkText?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function QuestionCard({
|
||||
question,
|
||||
description,
|
||||
href,
|
||||
linkText = '了解详情',
|
||||
className = '',
|
||||
}: QuestionCardProps) {
|
||||
return (
|
||||
<div
|
||||
className={`group md:grid md:grid-cols-2 border-b border-[var(--color-border-primary)] relative overflow-hidden ${className}`}
|
||||
>
|
||||
{/* Left accent bar — visible on hover */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-[3px] hidden md:block transition-transform duration-500 origin-top bg-[var(--color-brand)]"
|
||||
style={{ transform: 'scaleY(0)' }}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.transform = 'scaleY(1)'; }}
|
||||
/>
|
||||
|
||||
{/* Question — left column */}
|
||||
<div className="py-6 md:py-12 lg:py-16 md:pr-12 lg:pr-16 flex flex-col justify-center">
|
||||
<h3 className="font-sans text-[18px] sm:text-[20px] md:text-[clamp(20px,3vw,28px)] font-bold leading-[1.35] tracking-[-0.3px] md:tracking-[-0.5px] text-[var(--color-text-primary)]">
|
||||
{question}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Answer — right column */}
|
||||
<div className="pb-6 md:py-12 lg:py-16 md:pl-12 lg:pl-16 md:border-l border-[var(--color-border-primary)] flex flex-col justify-center">
|
||||
<p className="text-[14px] sm:text-[15px] leading-relaxed mb-5 md:mb-7 text-[var(--color-text-muted)]">
|
||||
{description}
|
||||
</p>
|
||||
<StaticLink
|
||||
href={href}
|
||||
className="inline-flex items-center gap-2 text-[13px] font-medium text-[var(--color-text-primary)] transition-all duration-300 hover:text-[var(--color-brand)] group/link"
|
||||
style={{ minHeight: '44px', minWidth: '44px' }}
|
||||
>
|
||||
{linkText}
|
||||
<ChevronRight className="w-3.5 h-3.5 transition-transform duration-300 group-hover/link:translate-x-1" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
interface SectionHeaderProps {
|
||||
/** English label shown above title (e.g. "What We Do") */
|
||||
label: string;
|
||||
/** Main title text */
|
||||
title: string;
|
||||
/** Optional highlighted part of the title (rendered in brand red) */
|
||||
highlight?: string;
|
||||
/** Optional description below the title */
|
||||
desc?: string;
|
||||
/** Whether this header is on a dark background */
|
||||
light?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
export function SectionHeader({
|
||||
label,
|
||||
title,
|
||||
highlight,
|
||||
desc,
|
||||
light = false,
|
||||
className = '',
|
||||
}: SectionHeaderProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={`mb-12 md:mb-16 lg:mb-20 ${className}`}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
>
|
||||
{/* Eyebrow label with brand accent bar */}
|
||||
<div className="flex items-center gap-3 mb-4 md:mb-5">
|
||||
{/* Brand accent bar — grows from bottom on entry */}
|
||||
<motion.div
|
||||
className="w-1 rounded-full origin-bottom"
|
||||
style={{
|
||||
height: '1rem',
|
||||
backgroundColor: light
|
||||
? 'rgba(255,255,255,0.5)'
|
||||
: 'var(--color-brand)',
|
||||
}}
|
||||
initial={shouldReduceMotion ? {} : { scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.4, delay: 0.1, ease: EASE }}
|
||||
/>
|
||||
<motion.div
|
||||
className="text-[10px] tracking-[4px] uppercase font-medium"
|
||||
style={{
|
||||
color: light
|
||||
? 'rgba(255,255,255,0.5)'
|
||||
: 'var(--color-brand)',
|
||||
}}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, x: -8 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.4, delay: 0.2, ease: EASE }}
|
||||
>
|
||||
{label}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2
|
||||
className="font-sans text-[clamp(28px,6vw,52px)] font-bold leading-[1.1] tracking-[-1px] mb-4 md:mb-5"
|
||||
style={{ color: light ? '#FFFFFF' : 'var(--color-text-primary)' }}
|
||||
>
|
||||
{title}
|
||||
{highlight && (
|
||||
<span style={{ color: 'var(--color-brand)' }}>
|
||||
{highlight}
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
|
||||
{/* Description */}
|
||||
{desc && (
|
||||
<p
|
||||
className="text-[15px] leading-relaxed max-w-[480px]"
|
||||
style={{
|
||||
color: light
|
||||
? 'rgba(255,255,255,0.5)'
|
||||
: 'var(--color-text-muted)',
|
||||
}}
|
||||
>
|
||||
{desc}
|
||||
</p>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import Link from 'next/link';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
|
||||
export type ServiceColor = 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
|
||||
|
||||
interface ServiceCardProps {
|
||||
number: string;
|
||||
title: string;
|
||||
description: string;
|
||||
color?: ServiceColor;
|
||||
href: string;
|
||||
className?: string;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
const colorMap: Record<ServiceColor, string> = {
|
||||
brand: 'var(--color-brand)',
|
||||
blue: 'var(--color-accent-blue)',
|
||||
teal: 'var(--color-accent-teal)',
|
||||
amber: 'var(--color-accent-amber)',
|
||||
purple: 'var(--color-accent-purple)',
|
||||
};
|
||||
|
||||
export function ServiceCard({
|
||||
number,
|
||||
title,
|
||||
description,
|
||||
color = 'brand',
|
||||
href,
|
||||
className = '',
|
||||
delay = 0,
|
||||
}: ServiceCardProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const accentColor = colorMap[color];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={`group relative bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] rounded-[var(--radius-lg)] overflow-hidden transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:-translate-y-1 hover:shadow-[var(--shadow-lg)] hover:border-[var(--color-brand)]/30 ${className}`}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.6, delay, ease: [0.22, 1, 0.36, 1] }}
|
||||
>
|
||||
{/* Left accent bar — grows from bottom on entry */}
|
||||
<motion.div
|
||||
className="absolute left-0 top-0 bottom-0 w-[3px] origin-bottom transition-all duration-[var(--transition-normal)] group-hover:w-1.5"
|
||||
style={{ backgroundColor: accentColor }}
|
||||
initial={shouldReduceMotion ? {} : { scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.4, delay: delay - 0.1 > 0 ? delay - 0.1 : 0, ease: [0.22, 1, 0.36, 1] }}
|
||||
/>
|
||||
|
||||
<div className="p-6 md:p-8 pl-6 md:pl-8">
|
||||
{/* Large background number */}
|
||||
<div
|
||||
className="absolute top-4 right-6 text-[5rem] font-black leading-none select-none pointer-events-none transition-opacity duration-[var(--transition-normal)] group-hover:opacity-10"
|
||||
style={{ color: 'var(--color-border-light)', opacity: 0.06 }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{number}
|
||||
</div>
|
||||
|
||||
{/* Number label */}
|
||||
<div
|
||||
className="text-xs font-bold tracking-[0.18em] uppercase mb-4"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
Service {number}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-xl md:text-2xl font-bold mb-3 leading-tight text-[var(--color-text-primary)]">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm md:text-base leading-relaxed mb-6 text-[var(--color-text-secondary)]">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
{/* Link */}
|
||||
<Link
|
||||
href={href}
|
||||
className="inline-flex items-center text-sm font-medium transition-all duration-[var(--transition-fast)] group-hover:gap-2.5 text-[var(--color-brand)]"
|
||||
style={{ minHeight: '44px', minWidth: '44px' }}
|
||||
>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4 transform transition-transform duration-[var(--transition-fast)] group-hover:translate-x-1" />
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
'use client';
|
||||
|
||||
import { ServiceCard, type ServiceColor } from './service-card';
|
||||
import { SectionHeader } from './section-header';
|
||||
|
||||
interface ServiceItem {
|
||||
number: string;
|
||||
title: string;
|
||||
description: string;
|
||||
color?: ServiceColor;
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface ServiceGridProps {
|
||||
label?: string;
|
||||
title: string;
|
||||
highlight?: string;
|
||||
desc?: string;
|
||||
items: ServiceItem[];
|
||||
className?: string;
|
||||
columns?: 2 | 3 | 4;
|
||||
}
|
||||
|
||||
export function ServiceGrid({
|
||||
label = '我们的服务',
|
||||
title,
|
||||
highlight,
|
||||
desc,
|
||||
items,
|
||||
className = '',
|
||||
columns = 3,
|
||||
}: ServiceGridProps) {
|
||||
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',
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={`section-padding ${className}`}>
|
||||
<div className="container-x">
|
||||
<SectionHeader label={label} title={title} highlight={highlight} desc={desc} />
|
||||
|
||||
<div className={`grid grid-cols-1 ${gridCols[columns]} gap-6 md:gap-8`}>
|
||||
{items.map((item, index) => (
|
||||
<ServiceCard
|
||||
key={item.number}
|
||||
number={item.number}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
color={item.color}
|
||||
href={item.href}
|
||||
delay={index * 0.1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -13,7 +13,7 @@ const METRICS = [
|
||||
|
||||
const TESTIMONIALS = [
|
||||
{
|
||||
quote: 'Novalon 团队不仅技术扎实，更重要的是真正理解我们的业务痛点，方案落地性很强。',
|
||||
quote: '睿新致远团队不仅技术扎实，更重要的是真正理解我们的业务痛点，方案落地性很强。',
|
||||
author: '某金融机构 数字化负责人',
|
||||
role: '数字化转型项目',
|
||||
},
|
||||
@@ -31,7 +31,7 @@ export function SocialProofSection() {
|
||||
<section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-16 md:py-24 lg:py-28 relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute inset-0 bg-[var(--color-bg-primary)]" aria-hidden="true" />
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--color-brand-primary)]/10 to-transparent" aria-hidden="true" />
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--color-brand)]/10 to-transparent" aria-hidden="true" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" aria-hidden="true" />
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
@@ -70,8 +70,8 @@ export function SocialProofSection() {
|
||||
transition={{ duration: 0.5, delay: idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center group"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-full bg-[var(--color-brand-primary)]/5 flex items-center justify-center mx-auto mb-4 group-hover:bg-[var(--color-brand-primary)]/10 transition-colors duration-300">
|
||||
<Icon className="w-5 h-5 text-[var(--color-brand-primary)]" strokeWidth={1.5} />
|
||||
<div className="w-12 h-12 rounded-full bg-[var(--color-brand)]/5 flex items-center justify-center mx-auto mb-4 group-hover:bg-[var(--color-brand)]/10 transition-colors duration-300">
|
||||
<Icon className="w-5 h-5 text-[var(--color-brand)]" strokeWidth={1.5} />
|
||||
</div>
|
||||
<div className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] tracking-tight mb-1">
|
||||
{metric.value}
|
||||
@@ -96,15 +96,15 @@ export function SocialProofSection() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.5, delay: 0.2 + idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="relative p-6 md:p-8 rounded-2xl bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.2)] transition-all duration-300"
|
||||
className="relative p-6 md:p-8 rounded-2xl bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-rgb),0.2)] transition-all duration-300"
|
||||
>
|
||||
<Quote className="w-8 h-8 text-[var(--color-brand-primary)]/15 mb-4" strokeWidth={1.5} />
|
||||
<Quote className="w-8 h-8 text-[var(--color-brand)]/15 mb-4" strokeWidth={1.5} />
|
||||
<blockquote className="text-[var(--color-text-secondary)] text-base leading-relaxed mb-6">
|
||||
“{t.quote}”
|
||||
</blockquote>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-brand-primary)]/10 to-[var(--color-brand-primary)]/5 flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-[var(--color-brand-primary)]">{t.author[0]}</span>
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-brand)]/10 to-[var(--color-brand)]/5 flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-[var(--color-brand)]">{t.author[0]}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[var(--color-text-primary)]">{t.author}</div>
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
|
||||
interface StatItem {
|
||||
number: string;
|
||||
unit: string;
|
||||
label: string;
|
||||
desc?: string;
|
||||
}
|
||||
|
||||
interface StatsBarProps {
|
||||
items: StatItem[];
|
||||
/** Whether to show on dark background */
|
||||
dark?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function CountUpNumber({ end, startCounting }: { end: number; startCounting: boolean }) {
|
||||
const [count, setCount] = useState(0);
|
||||
const frameRef = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!startCounting) return;
|
||||
const duration = 1800;
|
||||
const startTime = performance.now();
|
||||
const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
|
||||
const animate = (now: number) => {
|
||||
const progress = Math.min((now - startTime) / duration, 1);
|
||||
const eased = easeOutCubic(progress);
|
||||
setCount(Math.floor(end * eased));
|
||||
if (progress < 1) {
|
||||
frameRef.current = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(end);
|
||||
}
|
||||
};
|
||||
frameRef.current = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(frameRef.current);
|
||||
}, [end, startCounting]);
|
||||
|
||||
return <>{count}</>;
|
||||
}
|
||||
|
||||
export function StatsBar({ items, dark = false, className = '' }: StatsBarProps) {
|
||||
const [inView, setInView] = useState(false);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = sectionRef.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setInView(true);
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 },
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={sectionRef}
|
||||
className={`grid grid-cols-2 md:grid-cols-3 lg:grid-cols-${items.length} gap-px rounded-sm overflow-hidden ${className}`}
|
||||
style={{
|
||||
background: dark ? 'rgba(255,255,255,0.04)' : 'var(--color-border-primary)',
|
||||
}}
|
||||
>
|
||||
{items.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="py-10 sm:py-12 md:py-14 px-4 sm:px-6 md:px-8 text-center transition-all duration-[var(--transition-normal)] ease-[var(--ease-ink)] hover:bg-[var(--color-bg-hover)] group"
|
||||
style={{ background: dark ? 'var(--color-brand)' : 'var(--color-bg-primary)' }}
|
||||
>
|
||||
<div
|
||||
className="font-sans tabular-nums text-[clamp(36px,8vw,64px)] font-bold leading-none mb-1 md:mb-2 tracking-[-0.02em] transition-all duration-[var(--transition-slow)] ease-[var(--ease-ink)] group-hover:scale-105"
|
||||
style={{
|
||||
color: dark ? '#FFFFFF' : 'var(--color-text-primary)',
|
||||
transform: inView ? 'scale(1)' : 'scale(0.9)',
|
||||
opacity: inView ? 1 : 0,
|
||||
transitionDelay: `${i * 80}ms`,
|
||||
}}
|
||||
>
|
||||
{inView ? (
|
||||
<CountUpNumber end={parseInt(item.number)} startCounting={true} />
|
||||
) : (
|
||||
item.number
|
||||
)}
|
||||
<span
|
||||
style={{
|
||||
color: dark ? 'rgba(255,255,255,0.6)' : 'var(--color-brand)',
|
||||
fontSize: '0.4em',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{item.unit}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="text-[12px] sm:text-[13px] font-medium mb-3 md:mb-4 tracking-[0.08em] uppercase transition-all duration-[var(--transition-normal)]"
|
||||
style={{
|
||||
color: dark ? 'rgba(255,255,255,0.5)' : 'var(--color-text-muted)',
|
||||
opacity: inView ? 1 : 0,
|
||||
transform: inView ? 'translateY(0)' : 'translateY(8px)',
|
||||
transitionDelay: `${i * 80 + 150}ms`,
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</div>
|
||||
{item.desc && (
|
||||
<div
|
||||
className="text-[12px] sm:text-[13px] leading-relaxed transition-all duration-[var(--transition-normal)]"
|
||||
style={{
|
||||
color: dark ? 'rgba(255,255,255,0.35)' : 'var(--color-text-subtle)',
|
||||
opacity: inView ? 1 : 0,
|
||||
transform: inView ? 'translateY(0)' : 'translateY(6px)',
|
||||
transitionDelay: `${i * 80 + 250}ms`,
|
||||
}}
|
||||
>
|
||||
{item.desc}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -51,8 +51,8 @@ export function WhyUsSection() {
|
||||
<section id="why-us" className="relative py-20 md:py-28 bg-[var(--color-bg-section)] bg-texture-dots overflow-hidden">
|
||||
{/* Decorative large numbers background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
|
||||
<span className="absolute -top-24 -left-12 text-[20rem] font-bold text-[var(--color-brand-primary)]/[0.02] leading-none select-none font-calligraphy">睿</span>
|
||||
<span className="absolute -bottom-32 -right-8 text-[16rem] font-bold text-[var(--color-primary)]/[0.02] leading-none select-none">新</span>
|
||||
<span className="absolute -top-24 -left-12 text-[20rem] font-bold text-[var(--color-brand)]/[0.02] leading-none select-none font-calligraphy">睿</span>
|
||||
<span className="absolute -bottom-32 -right-8 text-[16rem] font-bold text-[var(--color-brand)]/[0.02] leading-none select-none">新</span>
|
||||
</div>
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
@@ -62,12 +62,12 @@ export function WhyUsSection() {
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
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)]">
|
||||
我们不是一家“做完就跑”的外包公司，而是愿意与您一起成长的数字化转型同行者
|
||||
@@ -84,27 +84,27 @@ export function WhyUsSection() {
|
||||
whileInView={{ opacity: 1, y: 0, scale: 1 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.08, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="relative group p-6 md:p-8 rounded-2xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.25)] transition-all duration-300"
|
||||
className="relative group p-6 md:p-8 rounded-2xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-rgb),0.25)] transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div
|
||||
className="w-11 h-11 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
backgroundColor: idx === 0 ? 'var(--color-brand-primary-bg)' :
|
||||
backgroundColor: idx === 0 ? 'var(--color-brand-bg)' :
|
||||
idx === 1 ? 'rgba(var(--color-accent-blue-rgb), 0.08)' :
|
||||
idx === 2 ? 'rgba(var(--color-accent-purple-rgb), 0.08)' :
|
||||
idx === 3 ? 'rgba(var(--color-accent-cyan-rgb), 0.08)' :
|
||||
'var(--color-brand-primary-bg)',
|
||||
'var(--color-brand-bg)',
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
className="w-5 h-5"
|
||||
style={{
|
||||
color: idx === 0 ? 'var(--color-brand-primary)' :
|
||||
color: idx === 0 ? 'var(--color-brand)' :
|
||||
idx === 1 ? 'var(--color-accent-blue)' :
|
||||
idx === 2 ? 'var(--color-accent-purple)' :
|
||||
idx === 3 ? 'var(--color-accent-cyan)' :
|
||||
'var(--color-brand-primary)',
|
||||
'var(--color-brand)',
|
||||
}}
|
||||
strokeWidth={1.8}
|
||||
/>
|
||||
@@ -113,11 +113,11 @@ export function WhyUsSection() {
|
||||
<div
|
||||
className="text-2xl font-bold leading-none"
|
||||
style={{
|
||||
color: idx === 0 ? 'var(--color-brand-primary)' :
|
||||
color: idx === 0 ? 'var(--color-brand)' :
|
||||
idx === 1 ? 'var(--color-accent-blue)' :
|
||||
idx === 2 ? 'var(--color-accent-purple)' :
|
||||
idx === 3 ? 'var(--color-accent-cyan)' :
|
||||
'var(--color-brand-primary)',
|
||||
'var(--color-brand)',
|
||||
}}
|
||||
>{pillar.stat}</div>
|
||||
<div className="text-[10px] text-[var(--color-text-subtle)] mt-0.5">{pillar.statLabel}</div>
|
||||
@@ -169,8 +169,8 @@ export function WhyUsSection() {
|
||||
key={tech.name}
|
||||
className="group flex flex-col items-center gap-1.5"
|
||||
>
|
||||
<div className="px-4 py-2 rounded-lg bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] group-hover:border-[rgba(var(--color-brand-primary-rgb),0.2)] group-hover:bg-[var(--color-brand-primary-bg)]/30 transition-all duration-300">
|
||||
<span className="text-sm font-mono font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand-primary)] transition-colors duration-300 tracking-wider">
|
||||
<div className="px-4 py-2 rounded-lg bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] group-hover:border-[rgba(var(--color-brand-rgb),0.2)] group-hover:bg-[var(--color-brand-bg)]/30 transition-all duration-300">
|
||||
<span className="text-sm font-mono font-medium text-[var(--color-text-subtle)] group-hover:text-[var(--color-brand)] transition-colors duration-300 tracking-wider">
|
||||
{tech.abbr}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user