feat(website): 三轮视觉改造与页面过渡动画
改造概要（30项）： - 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构 - 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复 - 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema - P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态 - 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
This commit is contained in:
张翔
@@ -1,109 +0,0 @@
|
||||
import { describe, it, expect, beforeEach } from '@jest/globals';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import { AboutSection } from './about-section';
|
||||
|
||||
jest.mock('framer-motion', () => ({
|
||||
motion: {
|
||||
div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
|
||||
},
|
||||
useInView: () => true,
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
const MockLink = ({ children, href }: any) => <a href={href}>{children}</a>;
|
||||
MockLink.displayName = 'MockLink';
|
||||
return MockLink;
|
||||
});
|
||||
|
||||
describe('AboutSection', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render about section', () => {
|
||||
render(<AboutSection />);
|
||||
const section = document.querySelector('section#about');
|
||||
expect(section).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render section heading', () => {
|
||||
render(<AboutSection />);
|
||||
expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render company slogan', () => {
|
||||
render(<AboutSection />);
|
||||
expect(screen.getByText(/数字化转型不是一场冒险/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render company mission', () => {
|
||||
render(<AboutSection />);
|
||||
expect(screen.getByText(/务实/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Statistics', () => {
|
||||
it('should render statistics cards', () => {
|
||||
render(<AboutSection />);
|
||||
const cards = document.querySelectorAll('.text-3xl');
|
||||
expect(cards.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should display statistics in grid layout', () => {
|
||||
const { container } = render(<AboutSection />);
|
||||
const grid = container.querySelector('.grid-cols-1');
|
||||
expect(grid).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Call to Action', () => {
|
||||
it('should render value cards with titles', () => {
|
||||
render(<AboutSection />);
|
||||
expect(screen.getByText('务实')).toBeInTheDocument();
|
||||
expect(screen.getByText('共情')).toBeInTheDocument();
|
||||
expect(screen.getByText('敏捷')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have region role', () => {
|
||||
render(<AboutSection />);
|
||||
const section = screen.getByRole('region');
|
||||
expect(section).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have aria-labelledby attribute', () => {
|
||||
render(<AboutSection />);
|
||||
const section = document.querySelector('section#about');
|
||||
expect(section).toHaveAttribute('aria-labelledby', 'about-heading');
|
||||
});
|
||||
|
||||
it('should have accessible heading', () => {
|
||||
render(<AboutSection />);
|
||||
const heading = screen.getByRole('heading', { level: 2 });
|
||||
expect(heading).toHaveAttribute('id', 'about-heading');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should have background color', () => {
|
||||
render(<AboutSection />);
|
||||
const section = document.querySelector('section#about');
|
||||
expect(section).toHaveClass('bg-[#FAFAFA]');
|
||||
});
|
||||
|
||||
it('should have proper padding', () => {
|
||||
render(<AboutSection />);
|
||||
const section = document.querySelector('section#about');
|
||||
expect(section).toHaveClass('py-20');
|
||||
});
|
||||
|
||||
it('should have decorative background pattern', () => {
|
||||
const { container } = render(<AboutSection />);
|
||||
const pattern = container.querySelector('.absolute.inset-0');
|
||||
expect(pattern).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,83 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
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' });
|
||||
|
||||
return (
|
||||
<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={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<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,6 +1,5 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ChallengeCard } from '@/components/ui/challenge-card';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
@@ -30,44 +29,27 @@ const CHALLENGES = [
|
||||
];
|
||||
|
||||
export function ChallengeSection() {
|
||||
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.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="challenges"
|
||||
ref={sectionRef}
|
||||
className="py-20 md:py-28 bg-[#FAFAFA]"
|
||||
>
|
||||
<section id="challenges" className="py-20 md:py-28 bg-[var(--color-bg-primary)]">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
className="mb-14"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
您的挑战，我们的<span className="text-[#C41E3A] font-calligraphy">使命</span>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="h-px flex-1 bg-[var(--color-border-primary)]" />
|
||||
<span className="text-xs font-mono tracking-widest text-[var(--color-text-subtle)]">CHALLENGES</span>
|
||||
<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>
|
||||
</h2>
|
||||
<p className="text-base text-[#595959]">
|
||||
<p className="text-base text-[var(--color-text-muted)] text-center mt-4 max-w-xl mx-auto">
|
||||
深入理解企业数字化进程中的核心痛点，提供针对性解决方案
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -1,343 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { z } from 'zod';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Toast } from '@/components/ui/toast';
|
||||
import { useFormAutosave } from '@/hooks/use-form-autosave';
|
||||
import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2, Save } from 'lucide-react';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
|
||||
const contactFormSchema = z.object({
|
||||
name: z.string().min(2, '姓名至少需要2个字符'),
|
||||
phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
|
||||
email: z.string().email('请输入有效的邮箱地址'),
|
||||
message: z.string().min(10, '留言内容至少需要10个字符'),
|
||||
});
|
||||
|
||||
type ContactFormData = z.infer<typeof contactFormSchema>;
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export function ContactSection() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
const [toastMessage, setToastMessage] = useState('');
|
||||
const [toastType, setToastType] = useState<'success' | 'error'>('success');
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
const {
|
||||
data: formData,
|
||||
updateData,
|
||||
lastSaved,
|
||||
isRestored,
|
||||
clearSavedData,
|
||||
} = useFormAutosave<ContactFormData>({
|
||||
key: 'contact_form',
|
||||
initialData: {
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
message: '',
|
||||
},
|
||||
debounceMs: 1000,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const validateField = (field: keyof ContactFormData, value: string) => {
|
||||
try {
|
||||
contactFormSchema.shape[field].parse(value);
|
||||
setErrors((prev) => ({ ...prev, [field]: undefined }));
|
||||
} catch (error) {
|
||||
if (error instanceof z.ZodError) {
|
||||
const fieldError = error.issues[0];
|
||||
if (fieldError) {
|
||||
setErrors((prev) => ({ ...prev, [field]: fieldError.message }));
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (field: keyof ContactFormData, value: string) => {
|
||||
updateData({ [field]: value });
|
||||
if (errors[field]) {
|
||||
validateField(field, value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBlur = (field: keyof ContactFormData, value: string) => {
|
||||
validateField(field, value);
|
||||
};
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
const result = contactFormSchema.safeParse(formData);
|
||||
if (!result.success) {
|
||||
const fieldErrors: FormErrors = {};
|
||||
result.error.issues.forEach((issue) => {
|
||||
const field = issue.path[0] as keyof ContactFormData;
|
||||
fieldErrors[field] = issue.message;
|
||||
});
|
||||
setErrors(fieldErrors);
|
||||
return;
|
||||
}
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const response = await fetch('https://formspree.io/f/' + process.env.NEXT_PUBLIC_FORMSPREE_ID, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
if (response.ok) {
|
||||
setIsSubmitted(true);
|
||||
clearSavedData();
|
||||
setToastMessage('表单提交成功！我们会尽快与您联系。');
|
||||
setToastType('success');
|
||||
setShowToast(true);
|
||||
} else {
|
||||
setToastMessage('提交失败，请稍后重试。');
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
}
|
||||
} catch {
|
||||
setToastMessage('网络错误，请稍后重试。');
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" role="region" aria-labelledby="contact-heading" className="py-20 md:py-28 bg-white" ref={sectionRef}>
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
type={toastType}
|
||||
onClose={() => setShowToast(false)}
|
||||
data-testid="toast-notification"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="container-wide">
|
||||
<div
|
||||
className={`mb-14 opacity-0 translate-y-4 ${isVisible ? 'animate-fade-in-up' : ''}`}
|
||||
>
|
||||
<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="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' : ''}`}
|
||||
>
|
||||
<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-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-[#A3A3A3] mb-1">邮箱</p>
|
||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200">
|
||||
{COMPANY_INFO.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 group">
|
||||
<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-[#A3A3A3] mb-1">地址</p>
|
||||
<p className="text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-[#595959]">周一至周五</span>
|
||||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<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-[#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-[#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-[#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' : ''}`}
|
||||
>
|
||||
<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-[#1C1C1C]">发送消息</h3>
|
||||
<div className="flex items-center gap-2 text-sm text-[#A3A3A3]">
|
||||
{lastSaved && (
|
||||
<>
|
||||
<Save className="w-4 h-4" />
|
||||
<span>已保存 {lastSaved.toLocaleTimeString()}</span>
|
||||
</>
|
||||
)}
|
||||
</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">
|
||||
已恢复您上次未提交的表单内容
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearSavedData}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 underline"
|
||||
>
|
||||
清除
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-12 flex-1 flex items-center justify-center" data-testid="success-message">
|
||||
<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-[#1C1C1C] mb-2">消息已发送</h4>
|
||||
<p className="text-[#A3A3A3]">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-5 flex-1 flex flex-col">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="姓名"
|
||||
id="name"
|
||||
placeholder="请输入您的姓名"
|
||||
required
|
||||
data-testid="name-input"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
onBlur={(e) => handleBlur('name', e.target.value)}
|
||||
error={errors.name}
|
||||
/>
|
||||
<Input
|
||||
label="电话"
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="请输入您的电话"
|
||||
required
|
||||
data-testid="phone-input"
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleChange('phone', e.target.value)}
|
||||
onBlur={(e) => handleBlur('phone', e.target.value)}
|
||||
error={errors.phone}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label="邮箱"
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="请输入您的邮箱"
|
||||
required
|
||||
data-testid="email-input"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
onBlur={(e) => handleBlur('email', e.target.value)}
|
||||
error={errors.email}
|
||||
/>
|
||||
<Textarea
|
||||
label="留言内容"
|
||||
id="message"
|
||||
placeholder="请输入您想咨询的内容"
|
||||
rows={5}
|
||||
required
|
||||
data-testid="message-input"
|
||||
value={formData.message}
|
||||
onChange={(e) => handleChange('message', e.target.value)}
|
||||
onBlur={(e) => handleBlur('message', e.target.value)}
|
||||
error={errors.message}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="w-full group mt-auto min-h-13 md:min-h-0"
|
||||
disabled={isSubmitting}
|
||||
data-testid="submit-button"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
发送中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
|
||||
发送消息
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
interface CTASectionProps {
|
||||
title?: string;
|
||||
@@ -23,20 +24,28 @@ export function CTASection({
|
||||
secondaryLabel = '了解方案',
|
||||
secondaryHref = '/solutions',
|
||||
}: CTASectionProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<section id="cta" className="py-20 md:py-28 bg-[#1C1C1C]">
|
||||
<div className="container-wide">
|
||||
<section id="cta" className="relative py-20 md:py-28 bg-[var(--color-primary)] overflow-hidden">
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0"
|
||||
style={{
|
||||
background: 'linear-gradient(to top, rgba(var(--color-brand-primary-rgb), 0.04) 0%, transparent 60%)',
|
||||
}}
|
||||
/>
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-white mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="text-lg text-[#A3A3A3] mb-10">
|
||||
<p className="text-lg text-white/70 mb-10">
|
||||
{description}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
@@ -46,7 +55,7 @@ export function CTASection({
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10" asChild>
|
||||
<Button size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10 hover:border-white/50" asChild>
|
||||
<StaticLink href={secondaryHref}>
|
||||
{secondaryLabel}
|
||||
</StaticLink>
|
||||
|
||||
@@ -1,101 +1,198 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, 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 } from '@/lib/constants';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { ArrowRight, MessageSquare, Search, Rocket, Handshake } from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const EASE = [0.16, 1, 0.3, 1] as const;
|
||||
|
||||
const CAPABILITIES = [
|
||||
{ icon: MessageSquare, label: '需求沟通' },
|
||||
{ icon: Search, label: '方案诊断' },
|
||||
{ icon: Rocket, label: '敏捷交付' },
|
||||
{ icon: Handshake, label: '长期陪跑' },
|
||||
];
|
||||
|
||||
const JOURNEY_STEPS = [
|
||||
{ icon: MessageSquare, label: '需求沟通', desc: '深入理解您的业务痛点' },
|
||||
{ icon: Search, label: '方案诊断', desc: '量身定制技术路径' },
|
||||
{ icon: Rocket, label: '敏捷交付', desc: '快速迭代持续验证' },
|
||||
{ icon: Handshake, label: '长期陪跑', desc: '持续优化保障落地' },
|
||||
];
|
||||
|
||||
export function HeroSectionV2() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||
const [isCardHovered, setIsCardHovered] = useState(false);
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
const handleCardMouseMove = useCallback((e: React.MouseEvent) => {
|
||||
if (!cardRef.current) { return; }
|
||||
const rect = cardRef.current.getBoundingClientRect();
|
||||
setMousePos({
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const fadeUp = {
|
||||
const fadeUp = (delay: number) => ({
|
||||
initial: shouldReduceMotion ? {} : { opacity: 0, y: 24 },
|
||||
animate: isVisible ? { opacity: 1, y: 0 } : {},
|
||||
};
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: { duration: 0.5, delay, ease: EASE },
|
||||
});
|
||||
|
||||
return (
|
||||
<section
|
||||
id="home"
|
||||
ref={sectionRef}
|
||||
aria-labelledby="hero-heading"
|
||||
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-white"
|
||||
className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-[var(--color-bg-primary)]"
|
||||
>
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(ellipse at 15% 40%, rgba(var(--color-brand-primary-rgb), 0.05) 0%, transparent 55%), radial-gradient(ellipse at 85% 25%, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(var(--color-brand-primary-rgb), 0.03) 0%, transparent 40%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<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">
|
||||
<motion.div
|
||||
{...fadeUp}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mb-6"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium border border-[#C41E3A]/10">
|
||||
智连未来，成长伙伴
|
||||
</span>
|
||||
</motion.div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center w-full">
|
||||
<div>
|
||||
<motion.div
|
||||
{...fadeUp(0)}
|
||||
className="mb-8"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-sm font-medium border border-[var(--color-brand-primary)]/10">
|
||||
{COMPANY_INFO.slogan}
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
id="hero-heading"
|
||||
{...fadeUp}
|
||||
transition={{ duration: 0.5, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-6 font-brand"
|
||||
style={{ fontWeight: 'normal' }}
|
||||
>
|
||||
{COMPANY_INFO.shortName}
|
||||
</motion.h1>
|
||||
<motion.h1
|
||||
id="hero-heading"
|
||||
{...fadeUp(0.1)}
|
||||
className="text-6xl sm:text-7xl lg:text-8xl tracking-tight mb-6 font-brand"
|
||||
style={{ fontWeight: 'normal' }}
|
||||
>
|
||||
{COMPANY_INFO.shortName}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
{...fadeUp}
|
||||
transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-xl sm:text-2xl text-[#1C1C1C] mb-4"
|
||||
>
|
||||
<span className="font-semibold text-[#C41E3A]">企业数字化转型服务商</span>
|
||||
</motion.p>
|
||||
<motion.p
|
||||
{...fadeUp(0.2)}
|
||||
className="text-xl sm:text-2xl text-[var(--color-text-primary)] mb-4"
|
||||
>
|
||||
<span className="font-semibold text-[var(--color-brand-primary)] font-calligraphy">
|
||||
企业数字化转型服务商
|
||||
</span>
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
{...fadeUp}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-lg text-[#595959] max-w-2xl leading-relaxed mb-10"
|
||||
>
|
||||
以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
|
||||
</motion.p>
|
||||
<motion.p
|
||||
{...fadeUp(0.3)}
|
||||
className="text-lg text-[var(--color-text-muted)] max-w-xl leading-relaxed mb-10"
|
||||
>
|
||||
{COMPANY_INFO.description}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
{...fadeUp(0.4)}
|
||||
className="flex flex-col sm:flex-row items-start gap-4"
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<StaticLink href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<StaticLink href="/products">探索产品</StaticLink>
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUp(0.5)}
|
||||
className="flex flex-wrap gap-3 mt-10 lg:hidden"
|
||||
>
|
||||
{CAPABILITIES.map((cap) => {
|
||||
const Icon = cap.icon;
|
||||
return (
|
||||
<div
|
||||
key={cap.label}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-bg-section)] border border-[var(--color-border-primary)]"
|
||||
>
|
||||
<Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
<span className="text-xs font-medium text-[var(--color-text-primary)]">{cap.label}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
{...fadeUp}
|
||||
transition={{ duration: 0.5, delay: 0.4, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="flex flex-col sm:flex-row items-start gap-4"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 32 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.5, ease: EASE }}
|
||||
className="hidden lg:block"
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<StaticLink href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<StaticLink href="/products">
|
||||
探索产品
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<div
|
||||
ref={cardRef}
|
||||
className="relative ink-glow-border rounded-2xl"
|
||||
style={
|
||||
{
|
||||
'--glow-start': 'var(--color-brand-primary)',
|
||||
'--glow-end': 'var(--color-warning)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
onMouseMove={handleCardMouseMove}
|
||||
onMouseEnter={() => setIsCardHovered(true)}
|
||||
onMouseLeave={() => setIsCardHovered(false)}
|
||||
>
|
||||
<div
|
||||
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%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-8 lg:p-10">
|
||||
<div className="w-14 h-14 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-6">
|
||||
<Handshake className="w-6 h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2">
|
||||
从沟通到落地，全程陪伴
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-8">
|
||||
四步合作流程，确保每个项目科学推进、高效交付
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{JOURNEY_STEPS.map((step, idx) => {
|
||||
const Icon = step.icon;
|
||||
return (
|
||||
<div
|
||||
key={step.label}
|
||||
className="flex items-center gap-4 p-3 rounded-lg bg-[var(--color-bg-section)]/60"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
|
||||
<Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-bold text-[var(--color-brand-primary)]">0{idx + 1}</span>
|
||||
<span className="text-sm font-medium text-[var(--color-text-primary)]">{step.label}</span>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--color-text-muted)] mt-0.5">{step.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,114 +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 { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Lightbulb, Cpu, Users } from 'lucide-react';
|
||||
import { InkGlowCard } from '@/components/ui/ink-glow-card';
|
||||
|
||||
const SOLUTIONS_OVERVIEW = [
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: '参谋伙伴',
|
||||
subtitle: '数字化转型咨询',
|
||||
description: '帮您看清前路，迈对第一步。用行业智慧洞察趋势，用理性分析避开陷阱。',
|
||||
points: ['行业趋势洞察报告', '成熟度评估', '实施路径规划'],
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
title: '技术伙伴',
|
||||
subtitle: '信息技术解决方案',
|
||||
description: '让技术真正为业务服务。不追逐"最火"的技术，只选择"最对"的技术。',
|
||||
points: ['业务场景调研', '技术方案定制', '敏捷交付迭代'],
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '同行伙伴',
|
||||
subtitle: '长期陪跑服务',
|
||||
description: '从需求理解到产品落地，陪伴才是常态。当产品真正为您所用那天，才是我们成为伙伴的开始。',
|
||||
points: ['专属客户成功经理', '季度业务复盘', '7×24小时响应'],
|
||||
},
|
||||
];
|
||||
|
||||
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-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.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<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-base text-[#595959]">
|
||||
您的数字化转型成长伙伴——从战略咨询到技术落地，再到长期陪跑
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<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 (
|
||||
<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-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-[#595959]">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-1.5 shrink-0" />
|
||||
{point}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</InkGlowCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mt-12 text-center"
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<StaticLink href="/solutions">
|
||||
了解完整解决方案
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -8,10 +8,10 @@ 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' },
|
||||
{ rgb: '196, 30, 58', glowStart: 'var(--color-brand-primary)', glowEnd: 'var(--color-warning)' },
|
||||
{ rgb: '217, 119, 6', glowStart: 'var(--color-warning)', glowEnd: 'var(--color-success)' },
|
||||
{ rgb: '22, 163, 74', glowStart: 'var(--color-success)', glowEnd: 'var(--color-accent-cyan)' },
|
||||
{ rgb: '37, 99, 235', glowStart: 'var(--color-accent-blue)', glowEnd: 'var(--color-accent-purple)' },
|
||||
];
|
||||
|
||||
export function MethodologySection() {
|
||||
@@ -19,7 +19,7 @@ export function MethodologySection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="methodology" role="region" aria-labelledby="methodology-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||
<section id="methodology" role="region" aria-labelledby="methodology-heading" className="py-20 md:py-28 bg-[var(--color-bg-section)]" ref={ref}>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -27,16 +27,17 @@ export function MethodologySection() {
|
||||
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-3xl sm:text-4xl font-semibold text-[#1C1C1C] mb-4">
|
||||
实施<span className="text-[#C41E3A] font-calligraphy">方法论</span>
|
||||
<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>
|
||||
</h2>
|
||||
<p className="text-base text-[#595959]">
|
||||
<p className="text-base text-[var(--color-text-muted)]">
|
||||
经过多年实践验证的四阶段模型，确保每个项目都能科学推进、高效落地
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="relative">
|
||||
<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="hidden lg:block absolute top-16 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" />
|
||||
<div className="hidden md:block lg:hidden absolute left-[calc(50%+0.375rem)] top-0 bottom-0 w-px bg-[var(--color-border-primary)]" />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
{METHODOLOGY.map((phase, idx) => {
|
||||
@@ -52,21 +53,21 @@ 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: accent.glowStart, color: '#FFFFFF' }}
|
||||
style={{ backgroundColor: accent.glowStart, color: 'var(--color-bg-primary)' }}
|
||||
>
|
||||
{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>
|
||||
<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-sm text-[var(--color-text-muted)] leading-relaxed mb-5">{phase.description}</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 tracking-wide">核心活动</p>
|
||||
<p className="text-xs font-semibold text-[var(--color-text-primary)] 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" />
|
||||
<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" />
|
||||
{activity}
|
||||
</li>
|
||||
))}
|
||||
@@ -74,11 +75,11 @@ export function MethodologySection() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-[#1C1C1C] mb-2 tracking-wide">交付物</p>
|
||||
<p className="text-xs font-semibold text-[var(--color-text-primary)] 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" />
|
||||
<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" />
|
||||
{deliverable}
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -1,65 +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 { 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' });
|
||||
|
||||
return (
|
||||
<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, 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 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-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
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mt-12 text-center"
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -1,52 +1,34 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ProductCard } from '@/components/ui/product-card';
|
||||
import { PRODUCTS } from '@/lib/constants';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
export function ProductMatrixSection() {
|
||||
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.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="products"
|
||||
ref={sectionRef}
|
||||
className="py-20 md:py-28 bg-white"
|
||||
>
|
||||
<section id="products" className="py-20 md:py-28 bg-[var(--color-bg-section)]">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 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-base text-[#595959]">
|
||||
覆盖企业数字化全场景，从管理到决策，一站式解决方案规划
|
||||
</p>
|
||||
<div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-3">
|
||||
产品矩阵
|
||||
</h2>
|
||||
<p className="text-base text-[var(--color-text-muted)] max-w-lg">
|
||||
覆盖企业数字化全场景，从管理到决策，一站式解决方案规划
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-sm text-[var(--color-text-subtle)] font-mono tracking-wider hidden md:block">
|
||||
{PRODUCTS.length} PRODUCTS
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
|
||||
@@ -1,137 +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, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
|
||||
import { PRODUCTS } from '@/lib/constants';
|
||||
|
||||
export function ProductsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="products" role="region" aria-labelledby="products-heading" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-[rgba(79,70,229,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="products-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
我们正在打造的<span className="text-[#C41E3A] font-calligraphy">产品</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
我们正在打造的企业级产品，致力于助力企业高效运营，实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{PRODUCTS.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{PRODUCTS.map((product, idx) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
|
||||
>
|
||||
<StaticLink href={`/products/${product.id}`}>
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C] transition-colors">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="w-fit mb-3">
|
||||
{product.category}
|
||||
</Badge>
|
||||
<CardTitle>{product.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-4 flex-1">
|
||||
{product.description}
|
||||
</CardDescription>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] mb-2">规划功能</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{product.features.slice(0, 4).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] mb-2 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
|
||||
核心价值
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{product.benefits.map((benefit, idx) => (
|
||||
<li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
|
||||
<span className="text-[#C41E3A] mr-1.5">•</span>
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#A01830] group-hover:text-white group-hover:border-[#A01830] transition-colors">
|
||||
了解规划
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-lg text-[#5C5C5C]">暂无产品信息</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="mt-20 text-center"
|
||||
>
|
||||
<div className="bg-white rounded-2xl p-12 border border-[#E2E8F0] relative overflow-hidden">
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[rgba(79,70,229,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-48 h-48 bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A2E] mb-4">
|
||||
期待与您共同打磨产品
|
||||
</h3>
|
||||
<p className="text-[#718096] mb-8 max-w-2xl mx-auto">
|
||||
我们的产品正在研发中，如果您对产品方向有建议或希望参与早期体验，欢迎联系我们
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href="/contact">
|
||||
预约体验
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,101 +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 { Code, BarChart3, Lightbulb, Puzzle, ArrowRight } from 'lucide-react';
|
||||
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; 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-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.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<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-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 md:gap-8">
|
||||
{SERVICES.map((service, index) => {
|
||||
const Icon = iconMap[service.icon];
|
||||
const accent = serviceAccents[index % serviceAccents.length]!;
|
||||
return (
|
||||
<InkGlowCard
|
||||
key={service.id}
|
||||
index={index}
|
||||
href={`/services/${service.id}`}
|
||||
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 && <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-base text-[#595959]">暂无服务信息</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
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>
|
||||
<StaticLink href="/services">
|
||||
查看全部服务
|
||||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Building2, Users, Award, TrendingUp } from 'lucide-react';
|
||||
import { Shield, Users, Cpu, Handshake } from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const STATS = [
|
||||
{ icon: Building2, value: '6', label: '研发产品' },
|
||||
{ icon: Users, value: '10+', label: '团队成员' },
|
||||
{ icon: Award, value: '5+', label: '行业覆盖' },
|
||||
{ icon: TrendingUp, value: '12+', label: '年核心团队经验' },
|
||||
const TRUST_PILLARS = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: '私有化部署',
|
||||
description: '数据不出企业，满足安全合规与数据主权要求',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '资深团队',
|
||||
description: '核心成员来自大型 IT 企业，具备扎实的工程能力与规范化交付经验',
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
title: '全栈自研',
|
||||
description: '6 款产品自主研发中，覆盖 ERP、CRM、BI 等企业核心场景',
|
||||
},
|
||||
{
|
||||
icon: Handshake,
|
||||
title: '长期陪跑',
|
||||
description: '不做完就跑，从需求理解到产品打磨，持续陪伴客户成长',
|
||||
},
|
||||
];
|
||||
|
||||
export function SocialProofSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-20 md:py-28 bg-[#FAFAFA]" ref={ref}>
|
||||
<section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-20 md:py-28 bg-[var(--color-bg-section)]">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<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 id="social-proof-heading" className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
值得信赖
|
||||
</h2>
|
||||
<p className="text-base text-[#595959]">
|
||||
<p className="text-base text-[var(--color-text-muted)]">
|
||||
用心打磨产品，以专业赢得信赖
|
||||
</p>
|
||||
</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;
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
{TRUST_PILLARS.map((pillar, idx) => {
|
||||
const Icon = pillar.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
key={pillar.title}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center p-6 md:p-8"
|
||||
className="text-center p-6 md:p-8 rounded-xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.3)] transition-colors duration-300"
|
||||
>
|
||||
<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 className="w-12 h-12 rounded-xl bg-[var(--color-brand-primary)]/5 flex items-center justify-center mx-auto mb-4">
|
||||
<Icon className="w-5 h-5 text-[var(--color-brand-primary)]" 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>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{pillar.title}</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{pillar.description}</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
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-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.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-center max-w-3xl mx-auto mb-14"
|
||||
>
|
||||
<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-base text-[#595959]">
|
||||
来自行业领先企业的资深专家，用实战经验为您护航
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { TestimonialBlock } from '@/components/ui/testimonial-block';
|
||||
|
||||
const TESTIMONIALS = [
|
||||
{
|
||||
quote: '我们相信，好的企业管理软件应该像水一样自然——融入业务流程，而不是让业务流程去适应软件。',
|
||||
author: '产品理念',
|
||||
title: '产品设计原则',
|
||||
company: '睿新致远',
|
||||
},
|
||||
{
|
||||
quote: '数据不应被锁在孤岛里。打通信息壁垒，让每一个决策都有数据支撑，这是我们打造BI平台的初心。',
|
||||
author: '技术愿景',
|
||||
title: '技术方向',
|
||||
company: '睿新致远',
|
||||
},
|
||||
{
|
||||
quote: '我们不做"做完就跑"的供应商。从需求理解到产品打磨，我们希望成为企业数字化转型路上真正的同行者。',
|
||||
author: '服务承诺',
|
||||
title: '核心价值观',
|
||||
company: '睿新致远',
|
||||
},
|
||||
];
|
||||
|
||||
export function TestimonialSection() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="testimonials"
|
||||
ref={sectionRef}
|
||||
className="py-20 md:py-28 bg-[#FAFAFA]"
|
||||
>
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||
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-base text-[#595959]">
|
||||
产品未动，理念先行——我们如何思考，决定了我们打造怎样的产品
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
|
||||
{TESTIMONIALS.map((testimonial, index) => (
|
||||
<TestimonialBlock
|
||||
key={testimonial.author}
|
||||
quote={testimonial.quote}
|
||||
author={testimonial.author}
|
||||
title={testimonial.title}
|
||||
company={testimonial.company}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user