feat: 统一全站设计风格、导航组件与文案逻辑自洽性修复
- 新增 InkGlowCard 墨韵流光卡片组件，统一全站卡片交互风格 - 新增 PageNav 面包屑组件，统一全站页面导航 - 统一色彩体系、排版层级、间距节奏和动画风格 - 修复 CTA 区品牌名称错误（诺瓦隆→睿新致遠） - 修复 ERP 产品卖点与年费制定价矛盾 - 导航下拉补充 SDS 和 OA 产品 - 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员 - 移除不可靠的 100%客户满意度和 30+行业专家指标 - 修复新闻时间线不合理问题，调整里程碑节奏 - 统一响应承诺为工作日快速响应 - 服务第4项重命名为行业方案实施，厘清概念 - 服务详情页效果数据改为定性描述 - 删除 cases 模块，精简代码库
This commit is contained in:
张翔
@@ -3,76 +3,80 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
import { Target, Heart, Zap } from 'lucide-react';
|
||||
|
||||
const VALUES = [
|
||||
{
|
||||
icon: Target,
|
||||
title: '务实',
|
||||
description: '不画大饼，只做能落地的方案。每个建议都经过实践验证，每个承诺都有交付支撑。',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: '共情',
|
||||
description: '先理解您的困境，再提供解决方案。我们相信，好的技术伙伴首先是好的倾听者。',
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: '敏捷',
|
||||
description: '快速响应，持续迭代。在不确定的市场中，速度本身就是竞争力。',
|
||||
},
|
||||
];
|
||||
|
||||
const valueAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
|
||||
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||
{ rgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||
];
|
||||
|
||||
export function AboutSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-size-[40px_40px]" />
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
<section id="about" role="region" aria-labelledby="about-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6 }}
|
||||
className="max-w-4xl mx-auto"
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<div className="text-center mb-12">
|
||||
<h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
关于 <span className="tracking-tight font-brand text-[#C41E3A]" style={{ fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C] mb-8">
|
||||
{COMPANY_INFO.slogan}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]">
|
||||
<p className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6">
|
||||
“企业需要的，不是一个高高在上的‘专家’，也不是一个做完就跑的‘卖家’，而是一个能坐下来、一起想办法的同行者。”
|
||||
</p>
|
||||
<p className="text-[#1C1C1C] font-medium text-center">
|
||||
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.2 }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12"
|
||||
>
|
||||
{STATS.map((stat, idx) => (
|
||||
<Card key={idx} className="text-center border-[#E5E5E5]">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
|
||||
<div className="text-sm text-[#5C5C5C]">{stat.label}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.6, delay: 0.3 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Button size="lg" variant="outline" className="group" asChild>
|
||||
<StaticLink href="/about">
|
||||
了解更多关于我们
|
||||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</motion.div>
|
||||
<h2 id="about-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
关于<span className="text-[#C41E3A] font-calligraphy">诺瓦隆</span>
|
||||
</h2>
|
||||
<p className="text-base text-[#595959]">
|
||||
我们相信，数字化转型不是一场冒险，而是一次有准备的远行
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||
{VALUES.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
const accent = valueAccents[idx % valueAccents.length]!;
|
||||
return (
|
||||
<InkGlowCard
|
||||
key={item.title}
|
||||
index={idx}
|
||||
accentColorRgb={accent.rgb}
|
||||
glowStart={accent.glowStart}
|
||||
glowEnd={accent.glowEnd}
|
||||
>
|
||||
<div className="p-6 md:p-8">
|
||||
<div
|
||||
className="w-11 h-11 rounded-xl flex items-center justify-center mb-5"
|
||||
style={{ backgroundColor: `rgba(${accent.rgb}, 0.06)` }}
|
||||
>
|
||||
<Icon className="w-5 h-5" style={{ color: accent.glowStart }} strokeWidth={1.8} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2">{item.title}</h3>
|
||||
<p className="text-sm text-[#595959] leading-relaxed">{item.description}</p>
|
||||
</div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { TouchSwipe } from '@/components/ui/touch-swipe';
|
||||
import { CASES } from '@/lib/constants';
|
||||
import { ArrowRight, Building2 } from 'lucide-react';
|
||||
|
||||
export function CasesSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="cases" role="region" aria-labelledby="cases-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<h2 id="cases-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
与谁同行，<span className="text-[#C41E3A] font-calligraphy">决定能走多远</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
||||
我们与优秀的企业同行，共同成长，共创未来
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<TouchSwipe
|
||||
onSwipeLeft={() => {
|
||||
}}
|
||||
onSwipeRight={() => {
|
||||
}}
|
||||
className="md:hidden"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{CASES.map((caseItem, index) => (
|
||||
<motion.div
|
||||
key={caseItem.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + index * 0.1 }}
|
||||
>
|
||||
<StaticLink href={`/cases/${caseItem.id}`}>
|
||||
<Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors overflow-hidden">
|
||||
<div className="relative h-40 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] flex items-center justify-center">
|
||||
<Building2 className="w-16 h-16 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Building2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
<span className="text-sm text-[#5C5C5C]">{caseItem.client}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
<p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</TouchSwipe>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="text-center mt-12"
|
||||
>
|
||||
<Button variant="outline" size="lg" className="group" asChild>
|
||||
<StaticLink href="/cases">
|
||||
查看更多案例
|
||||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -11,21 +11,21 @@ const CHALLENGES = [
|
||||
title: '数据孤岛',
|
||||
description: '各部门系统独立运行，数据无法互通共享，导致决策信息碎片化，影响整体运营效率。',
|
||||
scenario: 'isolation' as const,
|
||||
href: '/solutions/data-integration',
|
||||
href: '/solutions#consulting',
|
||||
},
|
||||
{
|
||||
id: 'growth-bottleneck',
|
||||
title: '增长瓶颈',
|
||||
description: '业务规模扩大但管理手段滞后，流程效率低下，难以支撑持续增长的业务需求。',
|
||||
scenario: 'growth' as const,
|
||||
href: '/solutions/growth-enablement',
|
||||
href: '/solutions#tech',
|
||||
},
|
||||
{
|
||||
id: 'compliance-risk',
|
||||
title: '合规风险',
|
||||
description: '行业监管日趋严格，传统手工操作难以满足合规要求，数据安全和审计面临挑战。',
|
||||
scenario: 'compliance' as const,
|
||||
href: '/solutions/compliance-management',
|
||||
href: '/solutions#accompany',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -55,24 +55,24 @@ export function ChallengeSection() {
|
||||
<section
|
||||
id="challenges"
|
||||
ref={sectionRef}
|
||||
className="bg-white py-16 md:py-24"
|
||||
className="py-20 md:py-28 bg-[#FAFAFA]"
|
||||
>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mb-12"
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
您的挑战，我们的使命
|
||||
您的挑战，我们的<span className="text-[#C41E3A] font-calligraphy">使命</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#595959] max-w-2xl">
|
||||
<p className="text-base text-[#595959]">
|
||||
深入理解企业数字化进程中的核心痛点，提供针对性解决方案
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||
{CHALLENGES.map((challenge, index) => (
|
||||
<ChallengeCard
|
||||
key={challenge.id}
|
||||
|
||||
@@ -36,7 +36,6 @@ export function ContactSection() {
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
// 使用表单自动保存功能
|
||||
const {
|
||||
data: formData,
|
||||
updateData,
|
||||
@@ -136,7 +135,7 @@ export function ContactSection() {
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" role="region" aria-labelledby="contact-heading" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
|
||||
<section id="contact" role="region" aria-labelledby="contact-heading" className="py-20 md:py-28 bg-white" ref={sectionRef}>
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
@@ -145,46 +144,32 @@ export function ContactSection() {
|
||||
data-testid="toast-notification"
|
||||
/>
|
||||
)}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute inset-0 bg-gradient-radial from-[rgba(79,70,229,0.03)] via-transparent to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
<div className="container-wide">
|
||||
<div
|
||||
className={`
|
||||
mb-16 opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up' : ''}
|
||||
`}
|
||||
className={`mb-14 opacity-0 translate-y-4 ${isVisible ? 'animate-fade-in-up' : ''}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-8 h-px bg-linear-to-r from-[#1C1C1C] to-[#C41E3A]" />
|
||||
<span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
|
||||
</div>
|
||||
<h2 id="contact-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
开启 <span className="text-[#C41E3A]">合作</span>
|
||||
<h2 id="contact-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4 text-center">
|
||||
开启 <span className="text-[#C41E3A] font-calligraphy">合作</span>
|
||||
</h2>
|
||||
<p className="mt-4 text-[#5C5C5C] max-w-2xl">
|
||||
<p className="text-base text-[#595959] max-w-2xl mx-auto text-center">
|
||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
|
||||
<div
|
||||
className={`
|
||||
lg:col-span-2 space-y-8 flex flex-col
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up stagger-1' : ''}
|
||||
`}
|
||||
className={`lg:col-span-2 space-y-8 flex flex-col opacity-0 translate-y-4 ${isVisible ? 'animate-fade-in-up stagger-1' : ''}`}
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 group">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||||
<Mail className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
|
||||
<p className="text-sm text-[#A3A3A3] mb-1">邮箱</p>
|
||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
|
||||
{COMPANY_INFO.email}
|
||||
</a>
|
||||
@@ -192,31 +177,31 @@ export function ContactSection() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 group">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
|
||||
<MapPin className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-[#5C5C5C] mb-1">地址</p>
|
||||
<p className="text-sm text-[#A3A3A3] mb-1">地址</p>
|
||||
<p className="text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]" aria-label="工作时间" data-testid="work-hours-card">
|
||||
<div className="bg-[#FAFAFA] p-5 rounded-xl border border-[#F0F0F0]" aria-label="工作时间" data-testid="work-hours-card">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
||||
<span className="text-[#595959]">周一至周五</span>
|
||||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
||||
<div className="bg-[#FAFAFA] p-5 rounded-xl border border-[#F0F0F0]">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h4 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</h4>
|
||||
@@ -224,32 +209,27 @@ export function ContactSection() {
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[#5C5C5C]">工作日 2 小时内快速响应您的咨询</p>
|
||||
<p className="text-sm text-[#595959]">工作日 2 小时内快速响应您的咨询</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[#5C5C5C]">提供免费的业务咨询和方案评估服务</p>
|
||||
<p className="text-sm text-[#595959]">提供免费的业务咨询和方案评估服务</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[#5C5C5C]">根据您的需求量身定制最优解决方案</p>
|
||||
<p className="text-sm text-[#595959]">根据您的需求量身定制最优解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`
|
||||
lg:col-span-3 flex flex-col
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
|
||||
`}
|
||||
className={`lg:col-span-3 flex flex-col opacity-0 translate-y-4 ${isVisible ? 'animate-fade-in-up stagger-2' : ''}`}
|
||||
>
|
||||
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0] flex-1 flex flex-col">
|
||||
<div className="bg-[#FAFAFA] p-6 sm:p-8 rounded-xl border border-[#F0F0F0] flex-1 flex flex-col">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-lg font-semibold text-[#1A1A2E]">发送消息</h3>
|
||||
{/* 自动保存状态指示器 */}
|
||||
<div className="flex items-center gap-2 text-sm text-[#595959]">
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C]">发送消息</h3>
|
||||
<div className="flex items-center gap-2 text-sm text-[#A3A3A3]">
|
||||
{lastSaved && (
|
||||
<>
|
||||
<Save className="w-4 h-4" />
|
||||
@@ -259,7 +239,6 @@ export function ContactSection() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 数据恢复提示 */}
|
||||
{isRestored && (
|
||||
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-center justify-between">
|
||||
<span className="text-sm text-blue-700">
|
||||
@@ -280,8 +259,8 @@ export function ContactSection() {
|
||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
|
||||
<CheckCircle2 className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-xl font-semibold text-[#1A1A2E] mb-2">消息已发送</h4>
|
||||
<p className="text-[#718096]">感谢您的留言，我们会尽快与您联系！</p>
|
||||
<h4 className="text-xl font-semibold text-[#1C1C1C] mb-2">消息已发送</h4>
|
||||
<p className="text-[#A3A3A3]">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-5 flex-1 flex flex-col">
|
||||
|
||||
@@ -16,14 +16,14 @@ interface CTASectionProps {
|
||||
|
||||
export function CTASection({
|
||||
title = '开启您的数字化转型之旅',
|
||||
description = '与诺瓦隆一起，让技术成为您业务增长的核心引擎',
|
||||
description = '与睿新致遠一起，让技术成为您业务增长的核心引擎',
|
||||
primaryLabel = '立即咨询',
|
||||
primaryHref = '/contact',
|
||||
secondaryLabel = '查看案例',
|
||||
secondaryHref = '/cases',
|
||||
secondaryLabel = '了解方案',
|
||||
secondaryHref = '/solutions',
|
||||
}: CTASectionProps) {
|
||||
return (
|
||||
<section id="cta" className="bg-[#1C1C1C] py-16 md:py-24">
|
||||
<section id="cta" className="py-20 md:py-28 bg-[#1C1C1C]">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -35,7 +35,7 @@ export function CTASection({
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-white mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="text-lg text-[#A0A0A0] mb-10">
|
||||
<p className="text-lg text-[#A3A3A3] mb-10">
|
||||
{description}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
@@ -45,7 +45,7 @@ export function CTASection({
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10" asChild>
|
||||
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10" asChild>
|
||||
<StaticLink href={secondaryHref}>
|
||||
{secondaryLabel}
|
||||
</StaticLink>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
@@ -40,7 +40,7 @@ export function HeroSectionV2() {
|
||||
id="home"
|
||||
ref={sectionRef}
|
||||
aria-labelledby="hero-heading"
|
||||
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-[#FAFAFA]"
|
||||
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-white"
|
||||
>
|
||||
<div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
@@ -67,7 +67,7 @@ export function HeroSectionV2() {
|
||||
<motion.p
|
||||
{...fadeUp}
|
||||
transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-xl sm:text-2xl text-[#3D3D3D] mb-4"
|
||||
className="text-xl sm:text-2xl text-[#1C1C1C] mb-4"
|
||||
>
|
||||
<span className="font-semibold text-[#C41E3A]">企业数字化转型服务商</span>
|
||||
</motion.p>
|
||||
@@ -99,27 +99,6 @@ export function HeroSectionV2() {
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUp}
|
||||
transition={{ duration: 0.5, delay: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="border-t border-[#E5E5E5] bg-white"
|
||||
>
|
||||
<div className="container-wide py-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||||
{STATS.map((stat) => (
|
||||
<div key={stat.label} className="text-center">
|
||||
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-1">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-sm text-[#595959]">
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useRef } from 'react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Lightbulb, Cpu, Users } from 'lucide-react';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
|
||||
const SOLUTIONS_OVERVIEW = [
|
||||
{
|
||||
@@ -31,55 +32,65 @@ const SOLUTIONS_OVERVIEW = [
|
||||
},
|
||||
];
|
||||
|
||||
const solutionAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
|
||||
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||
{ rgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||
];
|
||||
|
||||
export function HomeSolutionsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="solutions" role="region" aria-labelledby="solutions-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/2 right-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
<div className="container-wide relative z-10">
|
||||
<section id="solutions" role="region" aria-labelledby="solutions-heading" className="py-20 md:py-28 bg-white" ref={ref}>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 id="solutions-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
<h2 id="solutions-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
三种角色，一种<span className="text-[#C41E3A] font-calligraphy">身份</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
<p className="text-base text-[#595959]">
|
||||
您的数字化转型成长伙伴——从战略咨询到技术落地，再到长期陪跑
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||
{SOLUTIONS_OVERVIEW.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
const accent = solutionAccents[idx % solutionAccents.length]!;
|
||||
return (
|
||||
<motion.div
|
||||
<InkGlowCard
|
||||
key={item.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.15 }}
|
||||
index={idx}
|
||||
accentColorRgb={accent.rgb}
|
||||
glowStart={accent.glowStart}
|
||||
glowEnd={accent.glowEnd}
|
||||
>
|
||||
<div className="bg-white rounded-2xl p-8 border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-lg transition-all duration-300 h-full flex flex-col">
|
||||
<div className="w-14 h-14 bg-[#C41E3A] rounded-2xl flex items-center justify-center mb-6">
|
||||
<Icon className="w-7 h-7 text-white" />
|
||||
<div className="p-6 md:p-8">
|
||||
<div
|
||||
className="w-11 h-11 rounded-xl flex items-center justify-center mb-5"
|
||||
style={{ backgroundColor: `rgba(${accent.rgb}, 0.06)` }}
|
||||
>
|
||||
<Icon className="w-5 h-5" style={{ color: accent.glowStart }} strokeWidth={1.8} />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[#1C1C1C] mb-1">{item.title}</h3>
|
||||
<p className="text-sm text-[#C41E3A] font-medium mb-3">{item.subtitle}</p>
|
||||
<p className="text-sm text-[#5C5C5C] leading-relaxed mb-6 flex-1">{item.description}</p>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-1">{item.title}</h3>
|
||||
<p className="text-xs text-[#C41E3A] font-medium mb-3">{item.subtitle}</p>
|
||||
<p className="text-sm text-[#595959] leading-relaxed mb-5">{item.description}</p>
|
||||
<ul className="space-y-2">
|
||||
{item.points.map((point, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-sm text-[#1C1C1C]">
|
||||
<li key={i} className="flex items-start gap-2 text-sm text-[#595959]">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-1.5 shrink-0" />
|
||||
{point}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@@ -87,13 +98,10 @@ export function HomeSolutionsSection() {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mt-12 text-center"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
asChild
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<StaticLink href="/solutions">
|
||||
了解完整解决方案
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
|
||||
@@ -5,76 +5,89 @@ import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { METHODOLOGY } from '@/lib/constants/methodology';
|
||||
import { CheckCircle2 } from 'lucide-react';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
|
||||
const phaseAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
|
||||
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||
{ rgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||
{ rgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||
];
|
||||
|
||||
export function MethodologySection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="methodology" role="region" aria-labelledby="methodology-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<div className="container-wide relative z-10">
|
||||
<section id="methodology" role="region" aria-labelledby="methodology-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 id="methodology-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
<h2 id="methodology-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
实施<span className="text-[#C41E3A] font-calligraphy">方法论</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
<p className="text-base text-[#595959]">
|
||||
经过多年实践验证的四阶段模型，确保每个项目都能科学推进、高效落地
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="relative">
|
||||
{/* 连接线 */}
|
||||
<div className="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-0.5 bg-gradient-to-r from-[#C41E3A]/20 via-[#C41E3A]/40 to-[#C41E3A]/20" />
|
||||
<div className="hidden lg:block absolute top-16 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{METHODOLOGY.map((phase, idx) => (
|
||||
<motion.div
|
||||
key={phase.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.2 + idx * 0.15 }}
|
||||
>
|
||||
<div className="relative bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-lg transition-all duration-300 h-full">
|
||||
{/* 阶段编号 */}
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-full flex items-center justify-center mb-6 text-white font-bold text-xl">
|
||||
{phase.number}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
{METHODOLOGY.map((phase, idx) => {
|
||||
const accent = phaseAccents[idx % phaseAccents.length]!;
|
||||
return (
|
||||
<InkGlowCard
|
||||
key={phase.id}
|
||||
index={idx}
|
||||
accentColorRgb={accent.rgb}
|
||||
glowStart={accent.glowStart}
|
||||
glowEnd={accent.glowEnd}
|
||||
>
|
||||
<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: accent.glowStart, color: '#FFFFFF' }}
|
||||
>
|
||||
{phase.number}
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-1">{phase.title}</h3>
|
||||
<p className="text-xs text-[#C41E3A] font-medium mb-3">{phase.subtitle}</p>
|
||||
<p className="text-sm text-[#595959] leading-relaxed mb-5">{phase.description}</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 tracking-wide">核心活动</p>
|
||||
<ul className="space-y-1.5">
|
||||
{phase.activities.map((activity, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-xs text-[#595959]">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||
{activity}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 tracking-wide">交付物</p>
|
||||
<ul className="space-y-1.5">
|
||||
{phase.deliverables.map((deliverable, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-xs text-[#A3A3A3]">
|
||||
<span className="w-1.5 h-1.5 bg-[#C41E3A]/40 rounded-full mt-1.5 shrink-0" />
|
||||
{deliverable}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-[#1C1C1C] mb-1">{phase.title}</h3>
|
||||
<p className="text-sm text-[#C41E3A] font-medium mb-3">{phase.subtitle}</p>
|
||||
<p className="text-sm text-[#5C5C5C] leading-relaxed mb-6">{phase.description}</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 uppercase tracking-wide">核心活动</p>
|
||||
<ul className="space-y-1.5">
|
||||
{phase.activities.map((activity, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-xs text-[#3D3D3D]">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||
{activity}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 uppercase tracking-wide">交付物</p>
|
||||
<ul className="space-y-1.5">
|
||||
{phase.deliverables.map((deliverable, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-xs text-[#5C5C5C]">
|
||||
<span className="w-1.5 h-1.5 bg-[#C41E3A]/60 rounded-full mt-1.5 shrink-0" />
|
||||
{deliverable}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</InkGlowCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,92 +4,60 @@ import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { ArrowRight, Calendar } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { InsightCard } from '@/components/ui/insight-card';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
|
||||
export function NewsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
const displayedNews = [...NEWS]
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
.slice(0, 4);
|
||||
|
||||
return (
|
||||
<section id="news" role="region" aria-labelledby="news-heading" className="py-24 bg-[#F5F5F5]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
<section id="news" role="region" aria-labelledby="news-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 id="news-heading" className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
最新<span className="text-[#C41E3A] font-calligraphy">资讯</span>
|
||||
<h2 id="news-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
最新<span className="text-[#C41E3A] font-calligraphy">动态</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
了解公司最新动态、行业资讯和技术分享
|
||||
<p className="text-base text-[#595959]">
|
||||
洞察行业趋势，分享实践经验
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{displayedNews.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
{displayedNews.map((newsItem, idx) => (
|
||||
<motion.div
|
||||
key={newsItem.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.4, delay: idx * 0.08 }}
|
||||
>
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
|
||||
{newsItem.category}
|
||||
</span>
|
||||
<span className="text-sm text-[#5C5C5C] flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{newsItem.date}
|
||||
</span>
|
||||
</div>
|
||||
<CardTitle className="text-xl leading-tight">{newsItem.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
|
||||
{newsItem.excerpt}
|
||||
</CardDescription>
|
||||
<StaticLink
|
||||
href={`/news/${newsItem.id}`}
|
||||
className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
|
||||
>
|
||||
阅读更多
|
||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
|
||||
</StaticLink>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-lg text-[#5C5C5C]">暂无新闻信息</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{NEWS.slice(0, 3).map((item, idx) => (
|
||||
<InsightCard
|
||||
key={item.id}
|
||||
title={item.title}
|
||||
excerpt={item.excerpt}
|
||||
category={item.category}
|
||||
readTime="5 分钟"
|
||||
publishedAt={item.date}
|
||||
imageUrl={item.image}
|
||||
href={`/news/${item.id}`}
|
||||
featured={idx === 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mt-12 text-center"
|
||||
>
|
||||
<StaticLink
|
||||
href="/news"
|
||||
className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors bg-transparent border-none cursor-pointer group"
|
||||
>
|
||||
查看全部新闻
|
||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
<Button variant="outline" size="lg" className="group" asChild>
|
||||
<StaticLink href="/news">
|
||||
查看全部动态
|
||||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -32,24 +32,24 @@ export function ProductMatrixSection() {
|
||||
<section
|
||||
id="products"
|
||||
ref={sectionRef}
|
||||
className="bg-[#FFFBF5] py-16 md:py-24"
|
||||
className="py-20 md:py-28 bg-white"
|
||||
>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mb-12"
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
产品矩阵
|
||||
产品<span className="text-[#C41E3A] font-calligraphy">矩阵</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#595959] max-w-2xl">
|
||||
<p className="text-base text-[#595959]">
|
||||
覆盖企业数字化全场景，从管理到决策，一站式解决方案
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{PRODUCTS.map((product, index) => (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
|
||||
@@ -5,82 +5,87 @@ import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Code, BarChart3, Lightbulb, Puzzle, ArrowRight } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
import { SERVICES } from '@/lib/constants';
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string; strokeWidth?: number }>> = {
|
||||
Code,
|
||||
BarChart3,
|
||||
Lightbulb,
|
||||
Puzzle,
|
||||
};
|
||||
|
||||
const serviceAccents: { rgb: string; glowStart: string; glowEnd: string }[] = [
|
||||
{ rgb: '196, 30, 58', glowStart: '#C41E3A', glowEnd: '#D97706' },
|
||||
{ rgb: '217, 119, 6', glowStart: '#D97706', glowEnd: '#16A34A' },
|
||||
{ rgb: '37, 99, 235', glowStart: '#2563EB', glowEnd: '#7C3AED' },
|
||||
{ rgb: '22, 163, 74', glowStart: '#16A34A', glowEnd: '#0891B2' },
|
||||
];
|
||||
|
||||
export function ServicesSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
<section id="services" aria-labelledby="services-heading" className="py-20 md:py-28 bg-white" ref={ref}>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 id="services-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
我们的 <span className="text-[#C41E3A] font-calligraphy">核心业务</span>
|
||||
<h2 id="services-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
我们的 <span className="text-[#C41E3A] font-calligraphy">专业服务</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
||||
<p className="text-base text-[#595959] max-w-2xl mx-auto">
|
||||
专业技术团队，为您提供全方位的数字化解决方案
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{SERVICES.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
{SERVICES.map((service, index) => {
|
||||
const Icon = iconMap[service.icon];
|
||||
const accent = serviceAccents[index % serviceAccents.length]!;
|
||||
return (
|
||||
<motion.div
|
||||
<InkGlowCard
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
index={index}
|
||||
href={`/services/${service.id}`}
|
||||
accentColorRgb={accent.rgb}
|
||||
glowStart={accent.glowStart}
|
||||
glowEnd={accent.glowEnd}
|
||||
>
|
||||
<StaticLink href={`/services/${service.id}`}>
|
||||
<Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
|
||||
<CardContent className="p-0">
|
||||
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
|
||||
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">{service.title}</h3>
|
||||
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
|
||||
<div className="mt-4 flex items-center text-[#C41E3A] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
了解详情
|
||||
<ArrowRight className="ml-1 w-4 h-4" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
<div className="p-6 md:p-8">
|
||||
<div
|
||||
className="w-11 h-11 rounded-xl flex items-center justify-center mb-5"
|
||||
style={{ backgroundColor: `rgba(${accent.rgb}, 0.06)` }}
|
||||
>
|
||||
{Icon && <Icon className="w-5 h-5 text-[#C41E3A]" strokeWidth={1.8} />}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2">{service.title}</h3>
|
||||
<p className="text-sm text-[#595959] leading-relaxed mb-4">{service.description}</p>
|
||||
<div className="flex items-center text-sm font-medium text-[#C41E3A]">
|
||||
了解详情
|
||||
<ArrowRight className="ml-1 w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-lg text-[#5C5C5C]">暂无服务信息</p>
|
||||
<p className="text-base text-[#595959]">暂无服务信息</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center mt-12"
|
||||
>
|
||||
<Button variant="outline" size="lg" className="group" asChild>
|
||||
|
||||
@@ -1,73 +1,58 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { STATS } from '@/lib/constants';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Building2, Users, Award, TrendingUp } from 'lucide-react';
|
||||
|
||||
const STATS = [
|
||||
{ icon: Building2, value: '10+', label: '服务企业' },
|
||||
{ icon: Users, value: '10+', label: '团队成员' },
|
||||
{ icon: Award, value: '6', label: '自研产品' },
|
||||
{ icon: TrendingUp, value: '12+', label: '年核心团队经验' },
|
||||
];
|
||||
|
||||
export function SocialProofSection() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section
|
||||
id="social-proof"
|
||||
ref={sectionRef}
|
||||
className="bg-white py-16 md:py-24"
|
||||
>
|
||||
<section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center mb-12"
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
值得信赖的数字化伙伴
|
||||
<h2 id="social-proof-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
值得<span className="text-[#C41E3A] font-calligraphy">信赖</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#595959] max-w-2xl mx-auto">
|
||||
深耕企业数字化领域，以专业实力赢得客户信赖
|
||||
<p className="text-base text-[#595959]">
|
||||
数字来自实践，口碑源于交付
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12"
|
||||
>
|
||||
{STATS.map((stat) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
className="text-center p-6 rounded-xl bg-[#FFFBF5] border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-md transition-all duration-300"
|
||||
>
|
||||
<div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-2">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-sm text-[#595959] font-medium">
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
|
||||
{STATS.map((stat, idx) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center p-6 md:p-8"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-[#C41E3A]/5 flex items-center justify-center mx-auto mb-4">
|
||||
<Icon className="w-5 h-5 text-[#C41E3A]" strokeWidth={1.8} />
|
||||
</div>
|
||||
<div className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-1">{stat.value}</div>
|
||||
<div className="text-sm text-[#A3A3A3]">{stat.label}</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -3,88 +3,52 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Shield, Building2, Users } from 'lucide-react';
|
||||
|
||||
const TEAM_HIGHLIGHTS = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: '12年+ 行业深耕',
|
||||
description: '核心团队长期从事技术咨询、企业数字化等领域，积累了丰富的行业经验和最佳实践。',
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: '大型 IT 企业背景',
|
||||
description: '开发团队成员来自多个大型传统 IT 企业，具备扎实的工程能力和规范化交付经验。',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '复合型技术团队',
|
||||
description: '既懂技术又懂业务，能深入理解客户场景，提供真正落地的解决方案。',
|
||||
},
|
||||
];
|
||||
import { TEAM_MEMBERS } from '@/lib/constants';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
|
||||
export function TeamSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="team" role="region" aria-labelledby="team-heading" className="py-24 bg-[#FAFAFA] relative overflow-hidden" ref={ref}>
|
||||
<div className="container-wide relative z-10">
|
||||
<section id="team" role="region" aria-labelledby="team-heading" className="py-20 md:py-28 bg-white" ref={ref}>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 id="team-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
<h2 id="team-heading" className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
核心<span className="text-[#C41E3A] font-calligraphy">团队</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C] leading-relaxed">
|
||||
核心团队从事技术咨询、企业数字化等行业 12 年+，开发团队成员来自于多个大型传统 IT 企业，具备扎实的工程能力和丰富的行业经验。
|
||||
<p className="text-base text-[#595959]">
|
||||
来自行业领先企业的资深专家，用实战经验为您护航
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-12">
|
||||
{TEAM_HIGHLIGHTS.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={item.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.15 }}
|
||||
>
|
||||
<div className="bg-white rounded-2xl p-8 border border-[#E5E5E5] hover:border-[#C41E3A]/30 hover:shadow-lg transition-all duration-300 h-full text-center">
|
||||
<div className="w-14 h-14 bg-[#C41E3A] rounded-2xl flex items-center justify-center mb-6 mx-auto">
|
||||
<Icon className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-[#1C1C1C] mb-3">{item.title}</h3>
|
||||
<p className="text-sm text-[#5C5C5C] leading-relaxed">{item.description}</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
{TEAM_MEMBERS.map((member, idx) => (
|
||||
<InkGlowCard
|
||||
key={member.name}
|
||||
index={idx}
|
||||
accentColorRgb="196, 30, 58"
|
||||
glowStart="#C41E3A"
|
||||
glowEnd="#D97706"
|
||||
>
|
||||
<div className="p-6 md:p-8 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-[#FAFAFA] mx-auto mb-4 flex items-center justify-center">
|
||||
<span className="text-xl font-semibold text-[#C41E3A]">
|
||||
{member.name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
<h3 className="text-base font-semibold text-[#1C1C1C] mb-1">{member.name}</h3>
|
||||
<p className="text-xs text-[#C41E3A] font-medium mb-2">{member.title}</p>
|
||||
<p className="text-sm text-[#595959] leading-relaxed">{member.bio}</p>
|
||||
</div>
|
||||
</InkGlowCard>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href="/team">
|
||||
了解更多
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { TestimonialBlock } from '@/components/ui/testimonial-block';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const TESTIMONIALS = [
|
||||
{
|
||||
@@ -29,7 +28,6 @@ const TESTIMONIALS = [
|
||||
export function TestimonialSection() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
@@ -52,24 +50,24 @@ export function TestimonialSection() {
|
||||
<section
|
||||
id="testimonials"
|
||||
ref={sectionRef}
|
||||
className="bg-[#FFFBF5] py-16 md:py-24"
|
||||
className="py-20 md:py-28 bg-[#FAFAFA]"
|
||||
>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mb-12"
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
客户成果
|
||||
客户<span className="text-[#C41E3A] font-calligraphy">成果</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#595959] max-w-2xl">
|
||||
<p className="text-base text-[#595959]">
|
||||
听听我们的客户怎么说——真实案例，真实成果
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||
{TESTIMONIALS.map((testimonial, index) => (
|
||||
<TestimonialBlock
|
||||
key={testimonial.author}
|
||||
|
||||
Reference in New Issue
Block a user