Dev #21
@@ -149,7 +149,7 @@ export const SERVICES: Service[] = [
|
||||
id: 'data',
|
||||
title: '技术服务',
|
||||
description: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
|
||||
icon: 'BarChart3',
|
||||
icon: 'Server',
|
||||
overview: '让数据从"存着"变成"用着"。多源数据整合、可视化看板、预测模型，为经营决策提供可量化的洞察支撑。',
|
||||
features: [
|
||||
'系统集成与架构：企业级系统集成与架构设计',
|
||||
|
||||
@@ -27,7 +27,7 @@ export const SOLUTIONS: Solution[] = [
|
||||
points: [
|
||||
{ icon: 'Factory', title: '生产透明化', description: '实时掌握生产进度、设备状态和质量数据' },
|
||||
{ icon: 'Package', title: '供应链协同', description: '采购、库存、物流全流程可视可控' },
|
||||
{ icon: 'BarChart3', title: '数据驱动决策', description: '多维度分析报表，支撑精益管理' },
|
||||
{ icon: 'TrendingUp', title: '数据驱动决策', description: '多维度分析报表，支撑精益管理' },
|
||||
],
|
||||
},
|
||||
suiteCombination: {
|
||||
@@ -227,7 +227,7 @@ export const SOLUTIONS: Solution[] = [
|
||||
points: [
|
||||
{ icon: 'Truck', title: '全程可视', description: '订单-运输-签收全链路追踪，提升客户体验' },
|
||||
{ icon: 'Route', title: '智能调度', description: '算法优化配载和路径，降低运输成本' },
|
||||
{ icon: 'BarChart3', title: '数据驱动', description: '多维度运营分析，支撑精细化管理决策' },
|
||||
{ icon: 'TrendingUp', title: '数据驱动', description: '多维度运营分析，支撑精细化管理决策' },
|
||||
],
|
||||
},
|
||||
suiteCombination: {
|
||||
|
||||
+12
-12
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
@@ -1,557 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, Suspense } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { z } from 'zod';
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LabeledInput as Input } from '@/components/ui/labeled-input';
|
||||
import { LabeledTextarea as Textarea } from '@/components/ui/labeled-textarea';
|
||||
import { Toast } from '@/components/ui/toast';
|
||||
import {
|
||||
Mail,
|
||||
MapPin,
|
||||
Send,
|
||||
Loader2,
|
||||
Clock,
|
||||
HeadphonesIcon,
|
||||
CheckCircle2,
|
||||
HelpCircle,
|
||||
MessageSquare,
|
||||
ArrowRight,
|
||||
} from 'lucide-react';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
import { LegacyTooltip as Tooltip } from '@/components/ui/tooltip';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const contactFormSchema = z.object({
|
||||
name: z.string().min(2, '姓名至少需要2个字符'),
|
||||
phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
|
||||
email: z.string().email('请输入有效的邮箱地址'),
|
||||
subject: z.string().min(2, '主题至少需要2个字符'),
|
||||
message: z.string().min(10, '留言内容至少需要10个字符'),
|
||||
});
|
||||
|
||||
type ContactFormData = z.infer<typeof contactFormSchema>;
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
subject?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
const FAQ_ITEMS = [
|
||||
{
|
||||
q: '你们的服务流程是怎样的？',
|
||||
a: '通常分四步：需求沟通 → 方案评估 → 签约启动 → 敏捷交付。首次咨询免费，我们会在 2 个工作日内给出初步方案建议。',
|
||||
},
|
||||
{
|
||||
q: '收费模式是怎样的？',
|
||||
a: '根据项目规模和合作模式灵活定价。项目制按里程碑付款，订阅制按月结算，长期陪跑模式可协商年度合作方案。',
|
||||
},
|
||||
{
|
||||
q: '数据安全如何保障？',
|
||||
a: '我们严格遵守数据保护规范，签署保密协议，采用加密传输和权限隔离。项目结束后，客户数据按要求彻底清除。',
|
||||
},
|
||||
{
|
||||
q: '项目周期一般多长？',
|
||||
a: '小型项目 2-4 周，中型项目 1-3 个月，大型项目按阶段推进。我们会在方案评估阶段给出明确的时间线。',
|
||||
},
|
||||
];
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ContactFormContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const isSuccessFromRedirect = searchParams.get('success') === 'true';
|
||||
const [showToast, setShowToast] = useState(isSuccessFromRedirect);
|
||||
const [toastMessage, setToastMessage] = useState(
|
||||
isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : ''
|
||||
);
|
||||
const [toastType, setToastType] = useState<'success' | 'error'>(
|
||||
isSuccessFromRedirect ? 'success' : 'success'
|
||||
);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(isSuccessFromRedirect);
|
||||
const [formData, setFormData] = useState<ContactFormData>({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
});
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
|
||||
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) => {
|
||||
setFormData((prev) => ({ ...prev, [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);
|
||||
setToastMessage(`请检查表单：${Object.keys(fieldErrors).length} 项内容需要修正`);
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
const firstErrorField = document.querySelector('[data-testid*="-input"][aria-invalid="true"]') as HTMLElement;
|
||||
firstErrorField?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
firstErrorField?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const formBody = new URLSearchParams();
|
||||
formBody.append('name', formData.name);
|
||||
formBody.append('phone', formData.phone);
|
||||
formBody.append('email', formData.email);
|
||||
formBody.append('subject', formData.subject);
|
||||
formBody.append('message', formData.message);
|
||||
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
body: formBody,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && (data.success === 'true' || data.success === true)) {
|
||||
trackContactForm({
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
company: formData.subject,
|
||||
});
|
||||
trackConversion('contact_form_submission');
|
||||
setToastMessage('表单提交成功！我们会尽快与您联系。');
|
||||
setToastType('success');
|
||||
setShowToast(true);
|
||||
setIsSubmitted(true);
|
||||
setFormData({ name: '', phone: '', email: '', subject: '', message: '' });
|
||||
setErrors({});
|
||||
} else {
|
||||
const errorMsg = data.message || '提交失败，请稍后重试或直接发送邮件联系我们。';
|
||||
if (errorMsg.includes('HTML files') || errorMsg.includes('web server')) {
|
||||
setToastMessage('表单服务需要在生产环境激活。部署后首次提交会发送确认邮件到 ' + COMPANY_INFO.email);
|
||||
} else {
|
||||
setToastMessage(errorMsg);
|
||||
}
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
}
|
||||
} catch {
|
||||
setToastMessage('网络错误，请稍后重试。');
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '联系我们', href: '/contact' }]} />
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
type={toastType}
|
||||
duration={toastType === 'error' ? 0 : undefined}
|
||||
onClose={() => setShowToast(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-24 lg:pt-40 lg:pb-32 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/50 to-ink pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>Contact Us</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-lg text-white/60 mb-4">
|
||||
工作日 2 小时内快速响应，首次咨询免费
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1]">
|
||||
随时欢迎
|
||||
<span className="block mt-2 text-brand">聊一聊</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<p className="mt-8 text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed">
|
||||
无论是一个明确的项目需求，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。没有任何销售压力。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Form + Info Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<div className="grid lg:grid-cols-5 gap-10 lg:gap-14">
|
||||
{/* Left: Contact Info */}
|
||||
<ScrollReveal className="lg:col-span-2 space-y-8">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white mb-8">联系方式</h2>
|
||||
<div className="space-y-6" data-testid="contact-info">
|
||||
<div className="flex items-start gap-4 group" data-testid="email-info">
|
||||
<div className="w-12 h-12 bg-brand/10 border border-brand/20 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
|
||||
<Mail className="w-5 h-5 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-white/50 mb-1">邮箱</p>
|
||||
<a
|
||||
href={`mailto:${COMPANY_INFO.email}`}
|
||||
className="text-white hover:text-brand transition-colors duration-300"
|
||||
data-testid="email-link"
|
||||
>
|
||||
{COMPANY_INFO.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 group" data-testid="address-info">
|
||||
<div className="w-12 h-12 bg-brand/10 border border-brand/20 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
|
||||
<MapPin className="w-5 h-5 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-white/50 mb-1">地址</p>
|
||||
<p className="text-white" data-testid="address-text">
|
||||
{COMPANY_INFO.address}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border border-white/10 bg-ink p-8" data-testid="work-hours-card">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Clock className="w-5 h-5 text-brand" />
|
||||
<h2 className="text-base font-semibold text-white">工作时间</h2>
|
||||
</div>
|
||||
<div className="flex justify-between" data-testid="work-hours-row">
|
||||
<span className="text-white/60">周一至周五</span>
|
||||
<span className="text-brand font-medium">9:00 - 18:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border border-white/10 bg-ink p-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<HeadphonesIcon className="w-5 h-5 text-brand" />
|
||||
<h2 className="text-base font-semibold text-white">我们的承诺</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
||||
<p className="text-white/60">工作日 2 小时内快速响应您的咨询</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
||||
<p className="text-white/60">提供免费的业务咨询和方案评估服务</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
||||
<p className="text-white/60">根据您的需求量身定制最优解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Right: Form */}
|
||||
<ScrollReveal delay={0.1} className="lg:col-span-3">
|
||||
<div className="border border-white/10 bg-ink p-8 lg:p-10 h-full relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand" />
|
||||
|
||||
<h2 className="text-xl font-semibold text-white mb-8">发送消息</h2>
|
||||
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="w-20 h-20 bg-brand rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle2 className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<h4 className="text-2xl font-semibold text-white mb-3">消息已发送</h4>
|
||||
<p className="text-white/60">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6" noValidate>
|
||||
<input
|
||||
type="text"
|
||||
name="website"
|
||||
style={{ display: 'none' }}
|
||||
tabIndex={-1}
|
||||
autoComplete="off"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div className="relative">
|
||||
<Input
|
||||
name="name"
|
||||
data-testid="name-input"
|
||||
label={
|
||||
<span className="flex items-center gap-1.5">
|
||||
姓名
|
||||
<Tooltip content="用于正式沟通和方案报价">
|
||||
<HelpCircle className="w-3.5 h-3.5 text-white/40 hover:text-brand cursor-help" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
id="name"
|
||||
placeholder="请输入您的姓名"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
onBlur={(e) => handleBlur('name', e.target.value)}
|
||||
error={errors.name}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Input
|
||||
name="phone"
|
||||
data-testid="phone-input"
|
||||
label={
|
||||
<span className="flex items-center gap-1.5">
|
||||
电话
|
||||
<Tooltip content="接收项目进度通知和验证码，仅用于业务联系">
|
||||
<HelpCircle className="w-3.5 h-3.5 text-white/40 hover:text-brand cursor-help" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="请输入11位手机号"
|
||||
required
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleChange('phone', e.target.value)}
|
||||
onBlur={(e) => handleBlur('phone', e.target.value)}
|
||||
error={errors.phone}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
name="email"
|
||||
data-testid="email-input"
|
||||
label="邮箱"
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="请输入您的邮箱"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
onBlur={(e) => handleBlur('email', e.target.value)}
|
||||
error={errors.email}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
<Input
|
||||
name="subject"
|
||||
data-testid="subject-input"
|
||||
label="主题"
|
||||
id="subject"
|
||||
placeholder="请输入消息主题"
|
||||
required
|
||||
value={formData.subject}
|
||||
onChange={(e) => handleChange('subject', e.target.value)}
|
||||
onBlur={(e) => handleBlur('subject', e.target.value)}
|
||||
error={errors.subject}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
<Textarea
|
||||
name="message"
|
||||
data-testid="message-input"
|
||||
label="留言内容"
|
||||
id="message"
|
||||
placeholder="请输入您想咨询的内容"
|
||||
rows={5}
|
||||
required
|
||||
value={formData.message}
|
||||
onChange={(e) => handleChange('message', e.target.value)}
|
||||
onBlur={(e) => handleBlur('message', e.target.value)}
|
||||
error={errors.message}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
data-testid="submit-button"
|
||||
size="xl"
|
||||
className="w-full h-14 disabled:opacity-70"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
<span>发送中...</span>
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<Send className="mr-2 h-5 w-5" />
|
||||
发送消息
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="mb-16">
|
||||
<SectionLabel>FAQ</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
您可能想
|
||||
<span className="text-brand">了解的</span>
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl">
|
||||
{FAQ_ITEMS.map((faq, idx) => (
|
||||
<ScrollReveal key={faq.q} delay={idx * 0.08}>
|
||||
<div className="border border-white/10 bg-ink-light p-8 h-full hover:border-brand/30 transition-colors duration-300">
|
||||
<div className="flex items-start gap-4">
|
||||
<MessageSquare className="w-6 h-6 text-brand shrink-0 mt-0.5" strokeWidth={1.8} />
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-3">{faq.q}</h3>
|
||||
<p className="text-sm text-white/60 leading-relaxed">{faq.a}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get in Touch
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
还是想直接聊？
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-white/60 leading-relaxed mb-12">
|
||||
表单填起来太麻烦？直接发邮件到 {COMPANY_INFO.email}，我们同样会快速回复。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href={`mailto:${COMPANY_INFO.email}`}>
|
||||
发送邮件
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/">回到首页</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ContactContentV1() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="min-h-screen bg-ink flex items-center justify-center">
|
||||
<div className="animate-pulse text-white/50">加载中...</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ContactFormContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -1,527 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, Suspense } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { z } from 'zod';
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LabeledInput as Input } from '@/components/ui/labeled-input';
|
||||
import { LabeledTextarea as Textarea } from '@/components/ui/labeled-textarea';
|
||||
import { Toast } from '@/components/ui/toast';
|
||||
import {
|
||||
Mail,
|
||||
MapPin,
|
||||
Send,
|
||||
Loader2,
|
||||
Clock,
|
||||
HeadphonesIcon,
|
||||
CheckCircle2,
|
||||
HelpCircle,
|
||||
MessageSquare,
|
||||
ArrowRight,
|
||||
} from 'lucide-react';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
import { LegacyTooltip as Tooltip } from '@/components/ui/tooltip';
|
||||
import { GrainOverlay, SectionLabel } from '@/components/ui/page-decoration';
|
||||
|
||||
const contactFormSchema = z.object({
|
||||
name: z.string().min(2, '姓名至少需要2个字符'),
|
||||
phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
|
||||
email: z.string().email('请输入有效的邮箱地址'),
|
||||
subject: z.string().min(2, '主题至少需要2个字符'),
|
||||
message: z.string().min(10, '留言内容至少需要10个字符'),
|
||||
});
|
||||
|
||||
type ContactFormData = z.infer<typeof contactFormSchema>;
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
subject?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
const FAQ_ITEMS = [
|
||||
{
|
||||
q: '你们的服务流程是怎样的？',
|
||||
a: '通常分四步：需求沟通 → 方案评估 → 签约启动 → 敏捷交付。首次咨询免费，我们会在 2 个工作日内给出初步方案建议。',
|
||||
},
|
||||
{
|
||||
q: '收费模式是怎样的？',
|
||||
a: '根据项目规模和合作模式灵活定价。项目制按里程碑付款，订阅制按月结算，长期陪跑模式可协商年度合作方案。',
|
||||
},
|
||||
{
|
||||
q: '数据安全如何保障？',
|
||||
a: '我们严格遵守数据保护规范，签署保密协议，采用加密传输和权限隔离。项目结束后，客户数据按要求彻底清除。',
|
||||
},
|
||||
{
|
||||
q: '项目周期一般多长？',
|
||||
a: '小型项目 2-4 周，中型项目 1-3 个月，大型项目按阶段推进。我们会在方案评估阶段给出明确的时间线。',
|
||||
},
|
||||
];
|
||||
|
||||
function ContactFormContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const isSuccessFromRedirect = searchParams.get('success') === 'true';
|
||||
const [showToast, setShowToast] = useState(isSuccessFromRedirect);
|
||||
const [toastMessage, setToastMessage] = useState(
|
||||
isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : ''
|
||||
);
|
||||
const [toastType, setToastType] = useState<'success' | 'error'>(
|
||||
isSuccessFromRedirect ? 'success' : 'success'
|
||||
);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(isSuccessFromRedirect);
|
||||
const [formData, setFormData] = useState<ContactFormData>({
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
});
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
|
||||
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) => {
|
||||
setFormData((prev) => ({ ...prev, [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);
|
||||
setToastMessage(`请检查表单：${Object.keys(fieldErrors).length} 项内容需要修正`);
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
const firstErrorField = document.querySelector('[data-testid*="-input"][aria-invalid="true"]') as HTMLElement;
|
||||
firstErrorField?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
firstErrorField?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const formBody = new URLSearchParams();
|
||||
formBody.append('name', formData.name);
|
||||
formBody.append('phone', formData.phone);
|
||||
formBody.append('email', formData.email);
|
||||
formBody.append('subject', formData.subject);
|
||||
formBody.append('message', formData.message);
|
||||
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
body: formBody,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && (data.success === 'true' || data.success === true)) {
|
||||
trackContactForm({
|
||||
name: formData.name,
|
||||
email: formData.email,
|
||||
company: formData.subject,
|
||||
});
|
||||
trackConversion('contact_form_submission');
|
||||
setToastMessage('表单提交成功！我们会尽快与您联系。');
|
||||
setToastType('success');
|
||||
setShowToast(true);
|
||||
setIsSubmitted(true);
|
||||
setFormData({ name: '', phone: '', email: '', subject: '', message: '' });
|
||||
setErrors({});
|
||||
} else {
|
||||
const errorMsg = data.message || '提交失败，请稍后重试或直接发送邮件联系我们。';
|
||||
if (errorMsg.includes('HTML files') || errorMsg.includes('web server')) {
|
||||
setToastMessage('表单服务需要在生产环境激活。部署后首次提交会发送确认邮件到 ' + COMPANY_INFO.email);
|
||||
} else {
|
||||
setToastMessage(errorMsg);
|
||||
}
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
}
|
||||
} catch {
|
||||
setToastMessage('网络错误，请稍后重试。');
|
||||
setToastType('error');
|
||||
setShowToast(true);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '联系我们', href: '/contact' }]} />
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
type={toastType}
|
||||
duration={toastType === 'error' ? 0 : undefined}
|
||||
onClose={() => setShowToast(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[75vh] flex items-center overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/30 via-transparent to-ink pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>Contact Us</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-lg text-white/60 mb-4">
|
||||
工作日 2 小时内快速响应，首次咨询免费
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-[0.92] tracking-tighter mb-10 sm:mb-12 md:mb-16">
|
||||
随时欢迎
|
||||
<span className="block mt-4 text-brand">聊一聊</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<p className="text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed">
|
||||
无论是一个明确的项目需求，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。没有任何销售压力。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Form + Info Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<div className="grid lg:grid-cols-5 gap-10 lg:gap-14">
|
||||
{/* Left: Contact Info */}
|
||||
<ScrollReveal className="lg:col-span-2 space-y-8">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white mb-8">联系方式</h2>
|
||||
<div className="space-y-6" data-testid="contact-info">
|
||||
<div className="flex items-start gap-4 group" data-testid="email-info">
|
||||
<div className="w-12 h-12 bg-brand/[0.08] border border-brand/30 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
|
||||
<Mail className="w-5 h-5 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-white/50 mb-1">邮箱</p>
|
||||
<a
|
||||
href={`mailto:${COMPANY_INFO.email}`}
|
||||
className="text-white hover:text-brand transition-colors duration-300"
|
||||
data-testid="email-link"
|
||||
>
|
||||
{COMPANY_INFO.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 group" data-testid="address-info">
|
||||
<div className="w-12 h-12 bg-brand/[0.08] border border-brand/30 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
|
||||
<MapPin className="w-5 h-5 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-white/50 mb-1">地址</p>
|
||||
<p className="text-white" data-testid="address-text">
|
||||
{COMPANY_INFO.address}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative border border-white/[0.08] bg-ink p-8 overflow-hidden">
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand/60" />
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Clock className="w-5 h-5 text-brand" />
|
||||
<h2 className="text-base font-semibold text-white">工作时间</h2>
|
||||
</div>
|
||||
<div className="flex justify-between" data-testid="work-hours-row">
|
||||
<span className="text-white/60">周一至周五</span>
|
||||
<span className="text-brand font-medium">9:00 - 18:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative border border-white/[0.08] bg-ink p-8 overflow-hidden">
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand/60" />
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<HeadphonesIcon className="w-5 h-5 text-brand" />
|
||||
<h2 className="text-base font-semibold text-white">我们的承诺</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
||||
<p className="text-white/60">工作日 2 小时内快速响应您的咨询</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
||||
<p className="text-white/60">提供免费的业务咨询和方案评估服务</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-brand rounded-full mt-2.5 shrink-0" />
|
||||
<p className="text-white/60">根据您的需求量身定制最优解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Right: Form */}
|
||||
<ScrollReveal delay={0.1} className="lg:col-span-3">
|
||||
<div className="relative border border-white/[0.08] bg-ink p-6 sm:p-8 lg:p-10 h-full overflow-hidden">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand" />
|
||||
|
||||
<h2 className="text-xl font-semibold text-white mb-8">发送消息</h2>
|
||||
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="w-20 h-20 bg-brand rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle2 className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<h4 className="text-2xl font-semibold text-white mb-3">消息已发送</h4>
|
||||
<p className="text-white/60">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6" noValidate>
|
||||
<input
|
||||
type="text"
|
||||
name="website"
|
||||
style={{ display: 'none' }}
|
||||
tabIndex={-1}
|
||||
autoComplete="off"
|
||||
aria-hidden="true"
|
||||
aria-label="honeypot"
|
||||
/>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div className="relative">
|
||||
<Input
|
||||
name="name"
|
||||
data-testid="name-input"
|
||||
label={
|
||||
<span className="flex items-center gap-1.5">
|
||||
姓名
|
||||
<Tooltip content="用于正式沟通和方案报价">
|
||||
<HelpCircle className="w-3.5 h-3.5 text-white/40 hover:text-brand cursor-help" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
id="name"
|
||||
placeholder="请输入您的姓名"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
onBlur={(e) => handleBlur('name', e.target.value)}
|
||||
error={errors.name}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Input
|
||||
name="phone"
|
||||
data-testid="phone-input"
|
||||
label={
|
||||
<span className="flex items-center gap-1.5">
|
||||
电话
|
||||
<Tooltip content="接收项目进度通知和验证码，仅用于业务联系">
|
||||
<HelpCircle className="w-3.5 h-3.5 text-white/40 hover:text-brand cursor-help" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
id="phone"
|
||||
type="tel"
|
||||
placeholder="请输入11位手机号"
|
||||
required
|
||||
value={formData.phone}
|
||||
onChange={(e) => handleChange('phone', e.target.value)}
|
||||
onBlur={(e) => handleBlur('phone', e.target.value)}
|
||||
error={errors.phone}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Input
|
||||
name="email"
|
||||
data-testid="email-input"
|
||||
label="邮箱"
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="请输入您的邮箱"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => handleChange('email', e.target.value)}
|
||||
onBlur={(e) => handleBlur('email', e.target.value)}
|
||||
error={errors.email}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
<Input
|
||||
name="subject"
|
||||
data-testid="subject-input"
|
||||
label="主题"
|
||||
id="subject"
|
||||
placeholder="请输入消息主题"
|
||||
required
|
||||
value={formData.subject}
|
||||
onChange={(e) => handleChange('subject', e.target.value)}
|
||||
onBlur={(e) => handleBlur('subject', e.target.value)}
|
||||
error={errors.subject}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
<Textarea
|
||||
name="message"
|
||||
data-testid="message-input"
|
||||
label="留言内容"
|
||||
id="message"
|
||||
placeholder="请输入您想咨询的内容"
|
||||
rows={5}
|
||||
required
|
||||
value={formData.message}
|
||||
onChange={(e) => handleChange('message', e.target.value)}
|
||||
onBlur={(e) => handleBlur('message', e.target.value)}
|
||||
error={errors.message}
|
||||
className="bg-ink-light border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
data-testid="submit-button"
|
||||
size="xl"
|
||||
className="w-full h-14 disabled:opacity-70"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
<span>发送中...</span>
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<Send className="mr-2 h-5 w-5" />
|
||||
发送消息
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="mb-16">
|
||||
<SectionLabel>FAQ</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
您可能想
|
||||
<span className="text-brand">了解的</span>
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl">
|
||||
{FAQ_ITEMS.map((faq, idx) => (
|
||||
<ScrollReveal key={faq.q} delay={idx * 0.08}>
|
||||
<div className="relative border border-white/[0.08] bg-ink-light p-8 h-full overflow-hidden group hover:border-brand/30 transition-colors duration-300">
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand/40 scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />
|
||||
<div className="flex items-start gap-4">
|
||||
<MessageSquare className="w-6 h-6 text-brand shrink-0 mt-0.5" strokeWidth={1.8} />
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-white mb-3">{faq.q}</h3>
|
||||
<p className="text-sm text-white/60 leading-relaxed">{faq.a}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">Get in Touch</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight mb-8">
|
||||
还是想直接聊？
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-white/60 leading-relaxed mb-12">
|
||||
表单填起来太麻烦？直接发邮件到 {COMPANY_INFO.email}，我们同样会快速回复。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
|
||||
<a
|
||||
href={`mailto:${COMPANY_INFO.email}`}
|
||||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
|
||||
>
|
||||
发送邮件
|
||||
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-white border border-white/20 hover:border-white/40 hover:bg-white/[0.03] transition-all duration-300"
|
||||
>
|
||||
回到首页
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ContactContentV2() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="min-h-screen bg-ink flex items-center justify-center">
|
||||
<div className="animate-pulse text-white/50">加载中...</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ContactFormContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,628 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion, useMotionValue, useTransform } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
ArrowRight,
|
||||
Quote, CheckCircle2,
|
||||
Zap, Award,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
|
||||
|
||||
function MagneticButton({ children, href, variant = 'primary', className }: { children: React.ReactNode; href: string; variant?: 'primary' | 'secondary'; className?: string }) {
|
||||
const ref = useRef<HTMLAnchorElement>(null);
|
||||
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent) => {
|
||||
if (!ref.current) return;
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left - rect.width / 2) * 0.15;
|
||||
const y = (e.clientY - rect.top - rect.height / 2) * 0.15;
|
||||
setPosition({ x, y });
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setPosition({ x: 0, y: 0 });
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.a
|
||||
ref={ref}
|
||||
href={href}
|
||||
animate={{ x: position.x, y: position.y }}
|
||||
transition={{ duration: 0.3, ease: EASE_OUT }}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className={cn(
|
||||
'group relative inline-flex items-center gap-3 px-12 py-6 font-semibold text-base overflow-hidden transition-transform duration-200',
|
||||
variant === 'primary'
|
||||
? 'bg-brand text-white'
|
||||
: 'text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{variant === 'primary' && (
|
||||
<div className="absolute inset-0 bg-black/20 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out" />
|
||||
)}
|
||||
<span className="relative z-10">{children}</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 transition-transform duration-500 group-hover:translate-x-2" />
|
||||
</motion.a>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection({ heroData, stats }: { heroData?: Record<string, any> | null; stats?: Record<string, any>[] }) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const scrollProgress = useMotionValue(0);
|
||||
|
||||
useEffect(() => {
|
||||
const element = containerRef.current;
|
||||
if (!element) return;
|
||||
|
||||
const updateProgress = () => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const raw = rect.height > 0 ? -rect.top / rect.height : 0;
|
||||
scrollProgress.set(Math.max(0, Math.min(1, raw)));
|
||||
};
|
||||
|
||||
updateProgress();
|
||||
window.addEventListener('scroll', updateProgress, { passive: true });
|
||||
window.addEventListener('resize', updateProgress);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', updateProgress);
|
||||
window.removeEventListener('resize', updateProgress);
|
||||
};
|
||||
}, [scrollProgress]);
|
||||
|
||||
const y = useTransform(scrollProgress, [0, 1], [0, 160]);
|
||||
const opacity = useTransform(scrollProgress, [0, 0.7], [1, 0.15]);
|
||||
|
||||
// 兼容新旧数据字段
|
||||
const eyebrow = heroData?.eyebrow || '';
|
||||
const heading = heroData?.heading || heroData?.headingBottom || '';
|
||||
const subheading = heroData?.subheading || heroData?.description || '';
|
||||
const ctaLabel = heroData?.ctaLabel || '预约咨询';
|
||||
const ctaHref = heroData?.ctaHref || '/contact';
|
||||
const secondaryCtaLabel = heroData?.secondaryCtaLabel || '';
|
||||
const secondaryCtaHref = heroData?.secondaryCtaHref || '#';
|
||||
|
||||
const hasValidStats = stats?.length && stats[0]?.value;
|
||||
const displayStats = hasValidStats ? stats!.slice(0, 4) : [];
|
||||
|
||||
if (!heroData) {
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 text-center">
|
||||
<p className="text-text-muted text-lg">首页 Hero 内容未配置</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-screen flex items-center overflow-hidden bg-white"
|
||||
>
|
||||
<motion.div
|
||||
style={{ y, opacity }}
|
||||
className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-32 sm:py-40 md:py-48 lg:py-56"
|
||||
>
|
||||
<div className="max-w-4xl">
|
||||
{/* 眉标 Badge */}
|
||||
{eyebrow && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1, ease: EASE_OUT }}
|
||||
className="mb-8 sm:mb-10"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-3 py-1.5 bg-brand/[0.08] border border-brand/20 rounded-full">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand" />
|
||||
<span className="text-[13px] font-semibold text-brand tracking-[0.08em] uppercase">
|
||||
{eyebrow}
|
||||
</span>
|
||||
</span>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 主标题 — Bain 风格：大号加粗 + 品牌红关键词 */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12"
|
||||
>
|
||||
<span className="relative">
|
||||
{heading}
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* 数据指标条 — Bain 风格：答案优先，数据先行 */}
|
||||
{displayStats.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6 sm:gap-10 md:gap-14 mb-10 sm:mb-12"
|
||||
>
|
||||
{displayStats.map((stat, i) => (
|
||||
<div key={i} className="flex items-baseline gap-2">
|
||||
<span className="text-3xl sm:text-4xl md:text-5xl font-black text-brand tabular-nums leading-none">
|
||||
{stat.value}
|
||||
</span>
|
||||
<span className="text-sm text-text-muted whitespace-nowrap">
|
||||
{stat.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 副标题 */}
|
||||
{subheading && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.5, ease: EASE_OUT }}
|
||||
className="text-lg sm:text-xl text-text-secondary/70 max-w-2xl leading-relaxed mb-12 sm:mb-14"
|
||||
>
|
||||
{subheading}
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
{/* CTA 按钮组 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6"
|
||||
>
|
||||
<MagneticButton href={ctaHref}>{ctaLabel}</MagneticButton>
|
||||
{secondaryCtaLabel && (
|
||||
<a
|
||||
href={secondaryCtaHref}
|
||||
className="group inline-flex items-center gap-2 text-sm font-medium text-text-secondary hover:text-ink transition-colors duration-200 py-4"
|
||||
>
|
||||
{secondaryCtaLabel}
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection({ services }: { services?: Record<string, any>[] }) {
|
||||
const hasValidData = services?.length && services[0]?.highlights;
|
||||
const SERVICES = hasValidData ? services : [];
|
||||
if (SERVICES.length === 0) {
|
||||
return (
|
||||
<section className="relative py-28 overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 text-center">
|
||||
<p className="text-text-muted text-lg">暂无服务数据</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<section className="relative py-28 sm:py-36 md:py-44 lg:py-56 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-border-primary to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<div className="max-w-3xl mb-20 sm:mb-28 md:mb-36">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>核心服务</SectionLabel>
|
||||
<h2 className="font-sans text-2xl sm:text-3xl md:text-4xl lg:text-6xl font-black text-ink tracking-tight leading-[0.95] mt-6">
|
||||
从战略到落地，
|
||||
<br />
|
||||
可量化的一站式服务
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-px bg-border-primary">
|
||||
{/* 首张卡片：战略咨询 — 全宽突出 */}
|
||||
{(() => {
|
||||
const first = SERVICES[0];
|
||||
if (!first) return null;
|
||||
return (
|
||||
<StaggerReveal className="md:col-span-3" staggerDelay={0.05}>
|
||||
<a
|
||||
href={first.href}
|
||||
className="group relative block p-8 sm:p-10 md:p-12 lg:p-14 transition-all duration-500 hover:bg-bg-secondary overflow-hidden bg-white"
|
||||
>
|
||||
<div className="relative z-10 flex flex-col md:flex-row md:items-start gap-8 md:gap-16">
|
||||
<div className="w-14 h-14 flex items-center justify-center bg-bg-secondary text-text-secondary group-hover:text-ink transition-colors duration-300 shrink-0">
|
||||
{first.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm text-text-muted mb-3 font-medium">
|
||||
{first.subtitle}
|
||||
</h3>
|
||||
<h3 className="text-xl lg:text-2xl font-bold text-ink transition-colors duration-300">
|
||||
{first.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-text-secondary leading-relaxed mb-8 text-sm max-w-2xl">
|
||||
{first.desc}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mb-10">
|
||||
{first.highlights.map((h: string, j: number) => (
|
||||
<span
|
||||
key={j}
|
||||
className="px-3 py-1.5 text-xs text-text-muted border border-border-primary group-hover:border-border-secondary group-hover:text-text-secondary transition-all duration-300 font-medium"
|
||||
>
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{(first as any).metrics && (
|
||||
<div className="flex flex-wrap gap-10 mb-10 pb-10 border-b border-border-primary">
|
||||
{(first as any).metrics.map((m: any, j: number) => (
|
||||
<div key={j}>
|
||||
<div className="text-3xl sm:text-4xl font-black text-brand tracking-tightest mb-1">
|
||||
{m.value}
|
||||
</div>
|
||||
<div className="text-xs text-text-muted font-medium">
|
||||
{m.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</StaggerReveal>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* 其余三张卡片：并排 */}
|
||||
{SERVICES.slice(1).map((service, i) => (
|
||||
<StaggerReveal key={i} staggerDelay={0.05}>
|
||||
<a
|
||||
href={service.href}
|
||||
className="group relative block p-8 sm:p-10 md:p-12 lg:p-14 transition-all duration-500 hover:bg-bg-secondary overflow-hidden bg-white h-full flex flex-col"
|
||||
>
|
||||
<div className="relative z-10 flex flex-col flex-1">
|
||||
<div className="flex items-start justify-between mb-10">
|
||||
<div className="w-12 h-12 flex items-center justify-center bg-bg-secondary text-text-secondary group-hover:text-ink transition-colors duration-300">
|
||||
{service.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm text-text-muted mb-3 font-medium">
|
||||
{service.subtitle}
|
||||
</h3>
|
||||
<h3 className="text-xl lg:text-2xl font-bold text-ink transition-colors duration-300">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-text-secondary leading-relaxed mb-8 text-sm">
|
||||
{service.desc}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{service.highlights.map((h: string, j: number) => (
|
||||
<span
|
||||
key={j}
|
||||
className="px-3 py-1.5 text-xs text-text-muted border border-border-primary group-hover:border-border-secondary group-hover:text-text-secondary transition-all duration-300 font-medium"
|
||||
>
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{(service as any).metrics && (
|
||||
<div className="flex gap-6 mb-8 pb-8 border-b border-border-primary">
|
||||
{(service as any).metrics.map((m: any, j: number) => (
|
||||
<div key={j}>
|
||||
<div className="text-2xl sm:text-3xl font-black text-brand tracking-tightest mb-1">
|
||||
{m.value}
|
||||
</div>
|
||||
<div className="text-[11px] text-text-muted font-medium">
|
||||
{m.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-auto pt-2">
|
||||
<div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</StaggerReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function TrustSection() {
|
||||
const items = [
|
||||
{ title: '私有化部署', desc: '核心数据不出境，满足金融、医疗、政务合规要求' },
|
||||
{ title: '资深团队', desc: '平均 10 年以上企业级系统交付经验' },
|
||||
{ title: '全栈自研', desc: '从底层架构到前端交互，核心技术自主可控' },
|
||||
{ title: '长期陪跑', desc: '上线不是终点，持续迭代陪伴业务成长' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-24 md:py-28 lg:py-32 overflow-hidden bg-bg-secondary">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="mb-12 sm:mb-16 md:mb-20">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-px bg-brand" />
|
||||
<span className="text-[13px] tracking-[0.15em] font-medium text-brand">
|
||||
值得信赖
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="font-sans text-xl sm:text-2xl md:text-3xl lg:text-4xl font-black text-ink tracking-tight leading-tight">
|
||||
12年深耕，500+项目验证的交付能力
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary">
|
||||
{items.map((item, i) => (
|
||||
<StaggerReveal key={item.title} staggerDelay={0.05}>
|
||||
<div className="bg-bg-secondary p-8 sm:p-10 h-full transition-all duration-300 hover:bg-white group">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-8 h-8 flex items-center justify-center bg-brand/10 text-brand font-bold text-sm shrink-0 transition-colors duration-300 group-hover:bg-brand group-hover:text-white">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-ink mb-2">{item.title}</h3>
|
||||
<p className="text-sm text-text-secondary leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</StaggerReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CasesSection({ cases }: { cases?: Record<string, any>[] }) {
|
||||
const hasValidData = cases?.length && cases[0]?.metrics;
|
||||
const CASES = hasValidData ? cases : [];
|
||||
if (CASES.length === 0) {
|
||||
return (
|
||||
<section className="relative py-28 overflow-hidden bg-dark-bg">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 text-center">
|
||||
<p className="text-dark-text-muted text-lg">暂无案例数据</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<section className="relative py-28 sm:py-36 md:py-44 lg:py-56 overflow-hidden bg-dark-bg">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-dark-border to-transparent" />
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] bg-brand/[0.03] rounded-full blur-[120px]" />
|
||||
<div className="absolute bottom-1/3 right-1/4 w-[500px] h-[500px] bg-accent-blue/[0.02] rounded-full blur-[140px]" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 sm:gap-10 mb-20 sm:mb-28 md:mb-36">
|
||||
<ScrollReveal className="md:max-w-3xl">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-px bg-brand" />
|
||||
<span className="text-[13px] tracking-[0.15em] font-medium text-brand">
|
||||
客户案例
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="font-sans text-2xl sm:text-3xl md:text-4xl lg:text-6xl font-black text-dark-text-primary tracking-tight leading-[0.95] mt-6">
|
||||
每一个项目，
|
||||
<br />
|
||||
都以业务改善为衡量标准
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<a
|
||||
href="/cases"
|
||||
className="group inline-flex items-center gap-3 text-dark-text-primary font-semibold text-sm"
|
||||
>
|
||||
查看全部案例
|
||||
<ArrowRight className="w-4 h-5 transition-transform duration-300 group-hover:translate-x-2 text-dark-text-muted group-hover:text-brand" />
|
||||
</a>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="space-y-16">
|
||||
{CASES.map((caseItem, i) => (
|
||||
<ScrollReveal key={i} delay={i * 0.15}>
|
||||
<article className="group relative overflow-hidden border border-dark-border hover:border-dark-border/80 transition-all duration-500 bg-dark-bg-secondary">
|
||||
<div className="relative z-10">
|
||||
<div className="p-10 sm:p-12 lg:p-16 pb-0">
|
||||
<div className="flex items-center gap-4 mb-10">
|
||||
<Badge className="bg-dark-bg-tertiary text-dark-text-primary border-transparent">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-10 pb-12 border-b border-dark-border">
|
||||
{caseItem.metrics.map((metric: Record<string, any>, j: number) => (
|
||||
<div key={j}>
|
||||
<motion.div
|
||||
className={cn(
|
||||
'text-5xl sm:text-6xl lg:text-7xl font-black mb-4 leading-none tracking-tightest',
|
||||
j === 0 ? 'text-brand' : 'text-dark-text-primary'
|
||||
)}
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: 0.1 * j }}
|
||||
>
|
||||
{metric.value}
|
||||
</motion.div>
|
||||
<div className="mb-4">
|
||||
<div className="h-1 bg-dark-border rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
className={cn(
|
||||
'h-full rounded-full',
|
||||
j === 0 ? 'bg-brand' : 'bg-dark-text-primary/60'
|
||||
)}
|
||||
initial={{ width: 0 }}
|
||||
whileInView={{ width: `${(metric as any).progress || 50}%` }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1, delay: 0.3 + 0.1 * j, ease: 'easeOut' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={cn('w-8 h-px', j === 0 ? 'bg-brand' : 'bg-dark-border')} />
|
||||
<div className="text-dark-text-secondary font-medium text-sm">{metric.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-10 sm:px-12 lg:px-16 pt-12">
|
||||
<h3 className="text-xl lg:text-2xl font-bold mb-10 leading-tight text-dark-text-primary">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="px-10 sm:px-12 lg:px-16 pb-12">
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<Award className="w-4 h-4 text-dark-text-muted" />
|
||||
<span className="text-xs font-semibold text-dark-text-muted tracking-wide">
|
||||
挑战
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-sm">
|
||||
{caseItem.challenge}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{(caseItem as any).insight && (
|
||||
<div className="border-t-2 border-brand bg-brand/[0.04] p-5 pr-6">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className="text-xs font-bold text-brand tracking-wide">
|
||||
关键洞察
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-dark-text-primary leading-relaxed text-sm font-medium">
|
||||
{(caseItem as any).insight}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<Zap className="w-4 h-4 text-dark-text-muted" />
|
||||
<span className="text-xs font-semibold text-dark-text-muted tracking-wide">
|
||||
解决方案
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-sm">
|
||||
{caseItem.solution}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-10 sm:px-12 lg:px-16 pb-12">
|
||||
<div className="p-6 sm:p-8 bg-dark-bg-tertiary/50 border border-dark-border">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<CheckCircle2 className="w-4 h-4 text-brand" />
|
||||
<span className="text-xs font-bold text-brand tracking-wide">
|
||||
业务成果
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-dark-text-primary leading-relaxed text-sm font-medium">
|
||||
{caseItem.result}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{caseItem.testimonial?.quote && (
|
||||
<div className="px-10 sm:px-12 lg:px-16 pb-12 lg:pb-16 pt-10 border-t border-dark-border">
|
||||
<div className="flex items-start gap-4">
|
||||
<Quote className="w-8 h-8 shrink-0 mt-0.5 text-dark-text-muted" />
|
||||
<div>
|
||||
<p className="text-dark-text-secondary italic leading-relaxed mb-4 text-sm">
|
||||
“{caseItem.testimonial.quote}”
|
||||
</p>
|
||||
<p className="text-xs text-dark-text-muted">
|
||||
— {caseItem.testimonial.author}
|
||||
{caseItem.testimonial.role && `，${caseItem.testimonial.role}`}
|
||||
{caseItem.testimonial.company && ` · ${caseItem.testimonial.company}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection({ heroData }: { heroData?: Record<string, any> | null }) {
|
||||
const ctaTitleLine1 = heroData?.ctaTitleLine1 || '';
|
||||
const ctaTitleLine2 = heroData?.ctaTitleLine2 || '';
|
||||
const ctaLabel = heroData?.ctaLabel || '';
|
||||
const ctaHref = heroData?.ctaHref || '#';
|
||||
|
||||
return (
|
||||
<section
|
||||
className="relative py-32 sm:py-40 md:py-52 lg:py-60 overflow-hidden bg-dark-bg"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-dark-border to-transparent" />
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/3 right-1/4 w-[500px] h-[500px] bg-brand/[0.04] rounded-full blur-[140px]" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl">
|
||||
<h2 className="font-sans text-2xl sm:text-3xl md:text-4xl lg:text-6xl xl:text-7xl font-black text-dark-text-primary tracking-tightest leading-[0.9] mb-12 sm:mb-16 md:mb-20">
|
||||
{ctaTitleLine1 && <>{ctaTitleLine1}<br /></>}
|
||||
<span className="text-brand">{ctaTitleLine2 || '真正转化为业务增长'}</span>
|
||||
</h2>
|
||||
<MagneticButton href={ctaHref}>{ctaLabel || '预约咨询'}</MagneticButton>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV13({ services, cases, stats, heroData }: {
|
||||
services?: Record<string, any>[];
|
||||
cases?: Record<string, any>[];
|
||||
stats?: Record<string, any>[];
|
||||
heroData?: Record<string, any> | null;
|
||||
}) {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection heroData={heroData} stats={stats} />
|
||||
<ServicesSection services={services} />
|
||||
<TrustSection />
|
||||
<CasesSection cases={cases} />
|
||||
<CTASection heroData={heroData} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import { HeroSectionV2 } from '@/components/sections/hero-section-v2';
|
||||
import { SectionSkeleton } from '@/components/ui/loading-skeleton';
|
||||
|
||||
const ProductMatrixSection = dynamic(
|
||||
() => import('@/components/sections/product-matrix-section').then(mod => ({ default: mod.ProductMatrixSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const ChallengeSection = dynamic(
|
||||
() => import('@/components/sections/challenge-section').then(mod => ({ default: mod.ChallengeSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const SocialProofSection = dynamic(
|
||||
() => import('@/components/sections/social-proof-section').then(mod => ({ default: mod.SocialProofSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const WhyUsSection = dynamic(
|
||||
() => import('@/components/sections/why-us-section').then(mod => ({ default: mod.WhyUsSection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
const CTASection = dynamic(
|
||||
() => import('@/components/sections/cta-section').then(mod => ({ default: mod.CTASection })),
|
||||
{ loading: () => <SectionSkeleton />, ssr: false }
|
||||
);
|
||||
|
||||
function HomeContentV2() {
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<HeroSectionV2 />
|
||||
<ProductMatrixSection />
|
||||
<ChallengeSection />
|
||||
<SocialProofSection />
|
||||
<WhyUsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export { HomeContentV2 };
|
||||
@@ -1,300 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { InkCard, InkWashBackground } from '@/components/ui/ink-wash';
|
||||
import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
|
||||
import { NarrativeValue, type ValuePoint } from '@/components/sections/narrative/NarrativeValue';
|
||||
import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
import { SOLUTIONS } from '@/lib/constants/solutions';
|
||||
import {
|
||||
Shield, Building2, Users, Code, Target,
|
||||
ArrowRight, Package, Briefcase,
|
||||
} from 'lucide-react';
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
const CORE_STRENGTHS: ValuePoint[] = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: '12年+ 行业深耕',
|
||||
description: '核心团队长期从事技术咨询与企业数字化，服务覆盖金融、制造、零售、政务等多个行业',
|
||||
stat: '12+',
|
||||
statLabel: '年行业经验',
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: '大型 IT 企业背景',
|
||||
description: '团队来自多个大型传统 IT 企业，具备扎实的工程能力和规范化交付经验',
|
||||
stat: '10+',
|
||||
statLabel: '人核心团队',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '复合型技术团队',
|
||||
description: '既懂技术又懂业务，深入理解客户真实场景，提供真正可落地的解决方案',
|
||||
stat: '6',
|
||||
statLabel: '款自研产品',
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
title: '全栈技术能力',
|
||||
description: '从前端到后端、云原生到数据智能、移动端到物联网的全栈技术覆盖',
|
||||
stat: '5+',
|
||||
statLabel: '个覆盖行业',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: '结果导向交付',
|
||||
description: '不以项目上线为终点，以客户业务是否真正改善为衡量标准',
|
||||
stat: '100%',
|
||||
statLabel: '项目交付率',
|
||||
},
|
||||
];
|
||||
|
||||
const enterpriseProducts = PRODUCTS.filter(p => p.categoryId === 'enterprise');
|
||||
|
||||
function HomeHeroRight() {
|
||||
return (
|
||||
<InkCard padding="lg" className="lg:opacity-95">
|
||||
<div className="w-12 h-12 rounded-xl bg-[var(--color-brand-bg)] flex items-center justify-center mb-5">
|
||||
<Briefcase className="w-5 h-5 text-[var(--color-brand)]" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2">
|
||||
从沟通到落地，全程陪伴
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-6">
|
||||
四步合作流程，确保每个项目科学推进、高效交付
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
{ step: '01', label: '需求沟通', desc: '深入理解您的业务痛点' },
|
||||
{ step: '02', label: '方案诊断', desc: '量身定制技术路径' },
|
||||
{ step: '03', label: '敏捷交付', desc: '快速迭代持续验证' },
|
||||
{ step: '04', label: '长期陪跑', desc: '持续优化保障落地' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.step}
|
||||
className="flex items-center gap-4 p-3 rounded-lg bg-[var(--color-bg-section)]/60"
|
||||
>
|
||||
<div className="w-9 h-9 rounded-lg bg-[var(--color-brand-bg)] flex items-center justify-center shrink-0">
|
||||
<span className="text-xs font-bold text-[var(--color-brand)]">{item.step}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-[var(--color-text-primary)]">{item.label}</span>
|
||||
<p className="text-xs text-[var(--color-text-muted)] mt-0.5">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</InkCard>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductMatrixPreview() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<section className="relative section-padding bg-[var(--color-bg-primary)] overflow-hidden">
|
||||
<InkWashBackground variant="subtle" />
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="mb-14"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-bg)] border border-[var(--color-brand)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand)]">产品矩阵</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
覆盖企业数字化<span className="text-[var(--color-brand)] font-calligraphy">全场景</span>
|
||||
</h2>
|
||||
<p className="text-base text-[var(--color-text-muted)] max-w-2xl">
|
||||
6 大自研产品互为补充，从数据智能到业务协同，每一款都经过实战验证
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6 mb-10">
|
||||
{enterpriseProducts.map((product, idx) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.06, ease: EASE }}
|
||||
>
|
||||
<InkCard padding="sm" href={`/products/${product.id}`} className="group">
|
||||
<Package className="w-5 h-5 text-[var(--color-brand)] mb-3" strokeWidth={1.8} />
|
||||
<h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-1 group-hover:text-[var(--color-brand)] transition-colors">
|
||||
{product.title}
|
||||
</h3>
|
||||
<p className="text-xs text-[var(--color-text-muted)] leading-relaxed line-clamp-2">
|
||||
{product.description}
|
||||
</p>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: EASE }}
|
||||
className="text-center"
|
||||
>
|
||||
<StaticLink
|
||||
href="/products"
|
||||
className="inline-flex items-center gap-2 text-sm font-medium text-[var(--color-brand)] hover:text-[var(--color-brand-hover)] transition-colors group"
|
||||
>
|
||||
浏览完整产品矩阵
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SolutionsPreview() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<section className="relative section-padding bg-[var(--color-bg-section)] overflow-hidden">
|
||||
<InkWashBackground variant="subtle" />
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="mb-14"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-bg)] border border-[var(--color-brand)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand)]">行业方案</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
深耕行业<span className="text-[var(--color-brand)] font-calligraphy">场景</span>
|
||||
</h2>
|
||||
<p className="text-base text-[var(--color-text-muted)] max-w-2xl">
|
||||
基于自研产品矩阵，为不同行业量身定制端到端的数字化解决方案
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
|
||||
{SOLUTIONS.map((solution, idx) => (
|
||||
<motion.div
|
||||
key={solution.id}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.08, ease: EASE }}
|
||||
>
|
||||
<InkCard padding="md" href={`/solutions/${solution.id}`} className="group">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-bg)] text-[var(--color-brand)]">
|
||||
{solution.industry}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 group-hover:text-[var(--color-brand)] transition-colors">
|
||||
{solution.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-3 line-clamp-2">
|
||||
{solution.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{solution.suiteCombination.primaryProducts.map(pid => {
|
||||
const prod = PRODUCTS.find(p => p.id === pid);
|
||||
return prod ? (
|
||||
<span key={pid} className="px-2 py-0.5 rounded text-[10px] bg-[var(--color-bg-section)] text-[var(--color-text-muted)] border border-[var(--color-border-primary)]">
|
||||
{prod.title.replace('睿新', '').replace('睿视 ', '')}
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
<span className="px-2 py-0.5 rounded text-[10px] text-[var(--color-brand)] font-medium">
|
||||
+ 配套服务
|
||||
</span>
|
||||
</div>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3, ease: EASE }}
|
||||
className="text-center"
|
||||
>
|
||||
<StaticLink
|
||||
href="/solutions"
|
||||
className="inline-flex items-center gap-2 text-sm font-medium text-[var(--color-brand)] hover:text-[var(--color-brand-hover)] transition-colors group"
|
||||
>
|
||||
查看全部行业方案
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function HomeContentV3() {
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
{/* Layer 1: Hero */}
|
||||
<NarrativeHero
|
||||
badge={{ text: '智连未来，成长伙伴' }}
|
||||
title="企业数字化转型的"
|
||||
highlight="同行者"
|
||||
subtitle="12 年深耕 · 全栈能力 · 结果导向"
|
||||
description={'我们不是一家“做完就跑”的外包公司，而是愿意与您一起成长的数字化转型同行者。从需求沟通到系统落地，全程陪伴、结果导向。'}
|
||||
primaryCta={{ label: '预约免费咨询', href: '/contact' }}
|
||||
secondaryCta={{ label: '浏览产品', href: '/products' }}
|
||||
rightContent={<HomeHeroRight />}
|
||||
stats={[
|
||||
{ value: '12+', label: '年行业经验' },
|
||||
{ value: '6', label: '款自研产品' },
|
||||
{ value: '10+', label: '人核心团队' },
|
||||
{ value: '5+', label: '个覆盖行业' },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Layer 2: Value - Core Strengths */}
|
||||
<NarrativeValue
|
||||
badge="核心优势"
|
||||
title="为什么选择"
|
||||
highlight="我们"
|
||||
subtitle={'我们不是一家“做完就跑”的外包公司，而是愿意与您一起成长的数字化转型同行者'}
|
||||
points={CORE_STRENGTHS}
|
||||
columns={3}
|
||||
bgVariant="section"
|
||||
/>
|
||||
|
||||
{/* Layer 3: Trust - Products + Solutions */}
|
||||
<ProductMatrixPreview />
|
||||
<SolutionsPreview />
|
||||
|
||||
{/* Layer 4: CTA */}
|
||||
<NarrativeCTA
|
||||
title="让我们一起，把想法落地"
|
||||
description="无论您处于数字化转型的哪个阶段，我们都愿意坐下来一起想办法。首次咨询免费，无任何销售压力。"
|
||||
primaryLabel="预约免费咨询"
|
||||
primaryHref="/contact"
|
||||
secondaryLabel="了解我们的方法"
|
||||
secondaryHref="/team"
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export { HomeContentV3 };
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,599 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { motion, useScroll, useTransform, useInView } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import {
|
||||
ArrowRight, Cpu, Globe, Factory, ShoppingCart, Stethoscope,
|
||||
GraduationCap, Building, Shield, Users, Brain,
|
||||
ChevronRight, TrendingUp, Target, Briefcase,
|
||||
} from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const INK = '#0A0E14';
|
||||
const CINNABAR = '#C41E3A';
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const CONTAINER = 'max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16';
|
||||
|
||||
const SERVICES = [
|
||||
{ icon: <Target className="w-6 h-6" />, title: '战略咨询', desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长', href: '/services/consulting' },
|
||||
{ icon: <Briefcase className="w-6 h-6" />, title: '企业软件', desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发', href: '/products' },
|
||||
{ icon: <Cpu className="w-6 h-6" />, title: '技术服务', desc: '系统集成、数据中台、云原生架构设计与技术外包服务', href: '/services' },
|
||||
{ icon: <Brain className="w-6 h-6" />, title: 'AI 赋能', desc: 'AI 成熟度评估、场景落地与大模型应用开发', href: '/services/ai' },
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: <Factory className="w-5 h-5" />, name: '智能制造' },
|
||||
{ icon: <ShoppingCart className="w-5 h-5" />, name: '贸易零售' },
|
||||
{ icon: <Stethoscope className="w-5 h-5" />, name: '医疗健康' },
|
||||
{ icon: <GraduationCap className="w-5 h-5" />, name: '教育科技' },
|
||||
{ icon: <Building className="w-5 h-5" />, name: '金融服务' },
|
||||
{ icon: <Shield className="w-5 h-5" />, name: '政务合规' },
|
||||
{ icon: <Globe className="w-5 h-5" />, name: '跨境电商' },
|
||||
{ icon: <Users className="w-5 h-5" />, name: '专业服务' },
|
||||
];
|
||||
|
||||
const CASES = [
|
||||
{
|
||||
industry: '智能制造',
|
||||
title: '大型制造企业 ERP 全面升级',
|
||||
impact: [{ value: 40, suffix: '%', label: '生产效率提升' }, { value: 30, suffix: '天', label: '核心系统上线' }],
|
||||
quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系。',
|
||||
author: 'CTO，某上市制造企业',
|
||||
},
|
||||
{
|
||||
industry: '贸易零售',
|
||||
title: '连锁零售全渠道数字化升级',
|
||||
impact: [{ value: 25, suffix: '%', label: '营收增长' }, { value: 50, suffix: '%', label: '库存周转优化' }],
|
||||
quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心。',
|
||||
author: 'CEO，某区域零售龙头',
|
||||
},
|
||||
{
|
||||
industry: '医疗健康',
|
||||
title: '三甲医院数据合规与患者服务',
|
||||
impact: [{ value: 100, suffix: '%', label: '合规达标' }, { value: 60, suffix: '%', label: '患者满意度提升' }],
|
||||
quote: '在医疗数据合规领域，睿新的专业度在行业中非常难得。',
|
||||
author: '信息科主任，某三甲医院',
|
||||
},
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 500, suffix: '+', label: '服务企业客户' },
|
||||
{ value: 12, suffix: '年', label: '行业深耕经验' },
|
||||
{ value: 98, suffix: '%', label: '客户满意度' },
|
||||
{ value: 200, suffix: '+', label: '专业技术团队' },
|
||||
];
|
||||
|
||||
const INSIGHTS = [
|
||||
{ tag: '白皮书', title: '2026 中国企业数字化转型趋势报告', desc: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。' },
|
||||
{ tag: '行业洞察', title: 'AI 浪潮下的企业数字化升级路径', desc: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风。' },
|
||||
{ tag: '实践指南', title: 'ERP 选型避坑指南：从需求到落地全流程', desc: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。' },
|
||||
];
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
const [count, setCount] = useState(0);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!start || prefersReducedMotion) {
|
||||
setCount(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
let animationId: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setCount(Math.floor(target * easeOutQuart));
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(target);
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(animationId);
|
||||
}, [target, start, duration, prefersReducedMotion]);
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
function StatCard({ value, suffix, label, delay = 0 }: { value: number; suffix: string; label: string; delay?: number }) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-50px' });
|
||||
const count = useCountUp(value, isInView);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.6, delay, ease: EASE }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="text-4xl md:text-5xl font-bold text-white mb-2 tracking-tight">
|
||||
{count}{suffix}
|
||||
</div>
|
||||
<div className="text-gray-400 text-sm">{label}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, 100]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0.2]);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-screen flex items-center overflow-hidden"
|
||||
style={{ backgroundColor: INK }}
|
||||
>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div
|
||||
className="absolute top-1/4 -right-1/4 w-[800px] h-[800px] rounded-full opacity-20"
|
||||
style={{
|
||||
background: `radial-gradient(circle, ${CINNABAR} 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-0 -left-1/4 w-[600px] h-[600px] rounded-full opacity-10"
|
||||
style={{
|
||||
background: `radial-gradient(circle, ${CINNABAR} 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
||||
backgroundSize: '60px 60px',
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<motion.div style={{ y, opacity }} className={`${CONTAINER} relative z-10 pt-24 pb-20`}>
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 bg-white/5 text-sm text-gray-300 mb-8"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: CINNABAR }} />
|
||||
专注企业数字化转型 12 年
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.1, ease: EASE }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.1] tracking-tight mb-8"
|
||||
>
|
||||
以战略远见，
|
||||
<br />
|
||||
<span style={{ color: CINNABAR }}>驱动</span> 数字化未来
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.25, ease: EASE }}
|
||||
className="text-lg md:text-xl text-gray-400 max-w-2xl mb-12 leading-relaxed"
|
||||
>
|
||||
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
|
||||
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: EASE }}
|
||||
className="flex flex-wrap gap-4 mb-20"
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group inline-flex items-center gap-2 px-8 py-4 text-white font-medium rounded-sm transition-all duration-300 hover:shadow-lg hover:shadow-[#C41E3A]/20"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
预约咨询
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="inline-flex items-center gap-2 px-8 py-4 text-white font-medium rounded-sm border border-white/20 hover:bg-white/5 transition-all duration-300"
|
||||
>
|
||||
了解服务
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.6 }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-8"
|
||||
>
|
||||
{STATS.map((stat, i) => (
|
||||
<StatCard key={i} {...stat} delay={i * 0.1} />
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.2 }}
|
||||
className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-gray-500"
|
||||
>
|
||||
<span className="text-xs">向下滚动</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
|
||||
>
|
||||
<ChevronRight className="w-5 h-5 rotate-90" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function QuestionsSection() {
|
||||
const questions = [
|
||||
{
|
||||
question: '我们的数字化投入，是否真正带来了业务增长？',
|
||||
description: '许多企业在数字化上投入巨大，却难以量化 ROI。我们帮助您建立可衡量的数字化价值评估体系，让每一分投入都可见、可追踪、可优化。',
|
||||
href: '/services/consulting',
|
||||
},
|
||||
{
|
||||
question: '核心系统如何选型、落地与集成，才能支撑业务持续增长？',
|
||||
description: 'ERP、BI、CRM 等核心系统的评估、实施与无缝集成，确保技术架构稳健可扩展，避免「上线即落后」的困境。',
|
||||
href: '/products',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-24 md:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, ease: EASE }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<div className="inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
核心命题
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
企业数字化的<span style={{ color: CINNABAR }}>关键问题</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{questions.map((q, i) => (
|
||||
<motion.a
|
||||
key={i}
|
||||
href={q.href}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.7, delay: i * 0.15, ease: EASE }}
|
||||
className="group relative p-8 md:p-10 rounded-sm border border-white/10 bg-white/[0.02] hover:bg-white/[0.04] transition-all duration-500 hover:border-white/20"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-0.5 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
<div className="text-5xl font-bold mb-6 opacity-20" style={{ color: CINNABAR }}>0{i + 1}</div>
|
||||
<h3 className="text-xl md:text-2xl font-semibold text-white mb-4 leading-snug">
|
||||
{q.question}
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed mb-6">
|
||||
{q.description}
|
||||
</p>
|
||||
<div className="inline-flex items-center gap-2 text-sm font-medium" style={{ color: CINNABAR }}>
|
||||
深入了解
|
||||
<ChevronRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32" style={{ backgroundColor: '#0D1218' }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, ease: EASE }}
|
||||
>
|
||||
<div className="inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
核心服务
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
四大服务板块
|
||||
</h2>
|
||||
</motion.div>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: EASE }}
|
||||
className="text-gray-400 max-w-md"
|
||||
>
|
||||
从战略规划到技术落地，为企业数字化转型提供全链路专业服务
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}>
|
||||
{SERVICES.map((service, i) => (
|
||||
<motion.a
|
||||
key={i}
|
||||
href={service.href}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.5, delay: i * 0.1, ease: EASE }}
|
||||
className="group relative p-8 md:p-10 transition-all duration-500 hover:bg-white/[0.03]"
|
||||
style={{ backgroundColor: '#0D1218' }}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-12 rounded-sm flex items-center justify-center mb-6 transition-colors duration-300"
|
||||
style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}
|
||||
>
|
||||
{service.icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-3">{service.title}</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-6">{service.desc}</p>
|
||||
<div className="inline-flex items-center gap-1 text-sm font-medium text-gray-400 group-hover:text-white transition-colors duration-300">
|
||||
了解更多
|
||||
<ArrowRight className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.7, delay: 0.4, ease: EASE }}
|
||||
className="mt-16 pt-16 border-t border-white/5"
|
||||
>
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-lg font-medium text-white mb-2">覆盖八大行业</h3>
|
||||
<p className="text-gray-500 text-sm">深耕垂直领域，提供行业专属解决方案</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{INDUSTRIES.map((ind, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 px-5 py-2.5 rounded-full border border-white/10 text-gray-400 hover:border-white/20 hover:text-white transition-all duration-300"
|
||||
>
|
||||
{ind.icon}
|
||||
<span className="text-sm">{ind.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CasesSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, ease: EASE }}
|
||||
>
|
||||
<div className="inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
客户案例
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
可衡量的<span style={{ color: CINNABAR }}>业务成果</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
<motion.a
|
||||
href="/solutions"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: EASE }}
|
||||
className="group inline-flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
查看全部案例
|
||||
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{CASES.map((caseItem, i) => (
|
||||
<motion.article
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.7, delay: i * 0.15, ease: EASE }}
|
||||
className="group relative flex flex-col rounded-sm border border-white/10 bg-white/[0.02] overflow-hidden hover:border-white/20 transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-0.5 scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
|
||||
<div className="p-6 md:p-8 flex-1">
|
||||
<div className="inline-block px-3 py-1 rounded text-xs font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
{caseItem.industry}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-6 leading-snug">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
{caseItem.impact.map((imp, j) => (
|
||||
<div key={j} className="border-l-2 pl-3" style={{ borderColor: CINNABAR }}>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{imp.value}{imp.suffix}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">{imp.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<blockquote className="text-gray-400 text-sm italic leading-relaxed border-l-2 border-white/10 pl-4">
|
||||
「{caseItem.quote}」
|
||||
</blockquote>
|
||||
<p className="text-xs text-gray-600 mt-3">— {caseItem.author}</p>
|
||||
</div>
|
||||
</motion.article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32" style={{ backgroundColor: '#0D1218' }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, ease: EASE }}
|
||||
>
|
||||
<div className="inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-4" style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}>
|
||||
行业洞察
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
思想领导力
|
||||
</h2>
|
||||
</motion.div>
|
||||
<motion.a
|
||||
href="/news"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: EASE }}
|
||||
className="group inline-flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
查看全部洞察
|
||||
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{INSIGHTS.map((insight, i) => (
|
||||
<motion.article
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.6, delay: i * 0.1, ease: EASE }}
|
||||
className="group cursor-pointer"
|
||||
>
|
||||
<div className="aspect-[16/9] rounded-sm mb-5 relative overflow-hidden border border-white/10" style={{ backgroundColor: '#151B23' }}>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<TrendingUp className="w-12 h-12 text-white/10" />
|
||||
</div>
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="px-3 py-1 rounded text-xs font-medium" style={{ backgroundColor: CINNABAR, color: 'white' }}>
|
||||
{insight.tag}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||
{insight.title}
|
||||
</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">
|
||||
{insight.desc}
|
||||
</p>
|
||||
</motion.article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 relative overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<div className="absolute inset-0">
|
||||
<div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] rounded-full opacity-20"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse, ${CINNABAR} 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${CONTAINER} relative z-10`}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight mb-6">
|
||||
准备好开启您的
|
||||
<span style={{ color: CINNABAR }}> 数字化转型 </span>
|
||||
之旅了吗？
|
||||
</h2>
|
||||
<p className="text-gray-400 text-lg mb-10 max-w-xl mx-auto">
|
||||
与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group inline-flex items-center gap-2 px-8 py-4 text-white font-medium rounded-sm transition-all duration-300 hover:shadow-lg hover:shadow-[#C41E3A]/20"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
立即咨询
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="inline-flex items-center gap-2 px-8 py-4 text-white font-medium rounded-sm border border-white/20 hover:bg-white/5 transition-all duration-300"
|
||||
>
|
||||
关于我们
|
||||
</StaticLink>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV5() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<QuestionsSection />
|
||||
<ServicesSection />
|
||||
<CasesSection />
|
||||
<InsightsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,497 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import {
|
||||
ArrowUpRight, ChevronDown,
|
||||
Target, Briefcase, Cpu, Brain,
|
||||
BarChart2,
|
||||
Building, Factory, ShoppingCart, Stethoscope,
|
||||
GraduationCap, Globe,
|
||||
} from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const INK = '#0A0E14';
|
||||
const INK_LIGHT = '#0F1419';
|
||||
const CINNABAR = '#C41E3A';
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const CONTAINER = 'max-w-[1200px] mx-auto px-6 lg:px-8';
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '战略咨询',
|
||||
desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。',
|
||||
href: '/services/consulting',
|
||||
icon: <Target className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '企业软件',
|
||||
desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。',
|
||||
href: '/products',
|
||||
icon: <Briefcase className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '技术服务',
|
||||
desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
|
||||
href: '/services',
|
||||
icon: <Cpu className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'AI 赋能',
|
||||
desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。',
|
||||
href: '/services/ai',
|
||||
icon: <Brain className="w-5 h-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: <Factory className="w-5 h-5" />, name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化' },
|
||||
{ icon: <ShoppingCart className="w-5 h-5" />, name: '贸易零售', desc: '全渠道零售、会员体系、数字营销' },
|
||||
{ icon: <Stethoscope className="w-5 h-5" />, name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗' },
|
||||
{ icon: <GraduationCap className="w-5 h-5" />, name: '教育科技', desc: '在线教育、学习管理、教育数字化' },
|
||||
{ icon: <Building className="w-5 h-5" />, name: '金融服务', desc: '金融科技、风控合规、数据中台' },
|
||||
{ icon: <Globe className="w-5 h-5" />, name: '跨境电商', desc: '独立站、跨境支付、全球化运营' },
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 500, suffix: '+', label: '企业客户服务' },
|
||||
{ value: 12, suffix: '年', label: '行业深耕经验' },
|
||||
{ value: 98, suffix: '%', label: '客户满意度' },
|
||||
{ value: 200, suffix: '+', label: '专业技术顾问' },
|
||||
];
|
||||
|
||||
const INSIGHTS = [
|
||||
{
|
||||
tag: '研究报告',
|
||||
date: '2026.06',
|
||||
title: '2026 中国企业数字化转型趋势报告',
|
||||
desc: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。',
|
||||
readTime: '12 分钟阅读',
|
||||
},
|
||||
{
|
||||
tag: '行业洞察',
|
||||
date: '2026.05',
|
||||
title: 'AI 浪潮下的企业数字化升级路径',
|
||||
desc: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。',
|
||||
readTime: '8 分钟阅读',
|
||||
},
|
||||
{
|
||||
tag: '实践指南',
|
||||
date: '2026.04',
|
||||
title: 'ERP 选型避坑指南：从需求到落地全流程',
|
||||
desc: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。',
|
||||
readTime: '15 分钟阅读',
|
||||
},
|
||||
];
|
||||
|
||||
const APPROACH_STEPS = [
|
||||
{
|
||||
step: '01',
|
||||
title: '诊断评估',
|
||||
desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。',
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: '方案设计',
|
||||
desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。',
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '交付落地',
|
||||
desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。',
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: '持续运营',
|
||||
desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。',
|
||||
},
|
||||
];
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
const [count, setCount] = useState(0);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!start || prefersReducedMotion) {
|
||||
setCount(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
let animationId: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setCount(Math.floor(target * easeOutQuart));
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(target);
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(animationId);
|
||||
}, [target, start, duration, prefersReducedMotion]);
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
function FadeIn({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.7, delay, ease: EASE }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center" style={{ backgroundColor: INK }}>
|
||||
<div className={`${CONTAINER} w-full py-32 lg:py-40`}>
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="text-sm tracking-[0.2em] uppercase mb-8"
|
||||
style={{ color: CINNABAR }}
|
||||
>
|
||||
数字化转型伙伴
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.1, ease: EASE }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-light text-white leading-[1.15] tracking-tight mb-10"
|
||||
>
|
||||
以战略远见，
|
||||
<br />
|
||||
驱动<span style={{ color: CINNABAR, fontWeight: 400 }}>数字化</span>未来
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.25, ease: EASE }}
|
||||
className="text-lg text-gray-400 max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
|
||||
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: EASE }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group inline-flex items-center gap-2 text-white text-sm font-medium tracking-wide pb-1 border-b border-white/20 hover:border-white transition-colors duration-300"
|
||||
>
|
||||
预约咨询
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="group inline-flex items-center gap-2 text-gray-400 text-sm font-medium tracking-wide pb-1 border-b border-transparent hover:border-gray-500 hover:text-white transition-colors duration-300"
|
||||
>
|
||||
了解我们的服务
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, delay: 1 }}
|
||||
className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3"
|
||||
>
|
||||
<span className="text-xs text-gray-600 tracking-widest uppercase">Scroll</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 6, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
|
||||
>
|
||||
<ChevronDown className="w-4 h-4 text-gray-600" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, start, delay }: { value: number; suffix: string; label: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start);
|
||||
return (
|
||||
<FadeIn delay={delay} className="text-center lg:text-left">
|
||||
<div className="text-4xl lg:text-5xl font-light text-white mb-3 tracking-tight">
|
||||
{count}{suffix}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 tracking-wide">{label}</div>
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section ref={ref} className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
|
||||
{STATS.map((stat, i) => (
|
||||
<StatItem key={i} {...stat} start={isInView} delay={i * 0.1} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-20">
|
||||
<div className="text-sm tracking-[0.2em] uppercase mb-4" style={{ color: CINNABAR }}>
|
||||
核心服务
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-light text-white tracking-tight leading-tight max-w-2xl">
|
||||
四位一体的数字化服务体系
|
||||
</h2>
|
||||
</FadeIn>
|
||||
|
||||
<div className="space-y-px" style={{ backgroundColor: 'rgba(255,255,255,0.06)' }}>
|
||||
{SERVICES.map((service, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<a
|
||||
href={service.href}
|
||||
className="group relative block py-10 lg:py-12 transition-colors duration-500 hover:bg-white/[0.02]"
|
||||
style={{ backgroundColor: INK }}
|
||||
>
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-6 lg:gap-12">
|
||||
<div className="text-sm text-gray-600 font-mono tracking-wider pt-1">
|
||||
{service.number}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-10 h-10 rounded-sm flex items-center justify-center text-gray-400 group-hover:text-white transition-colors duration-300" style={{ backgroundColor: 'rgba(255,255,255,0.04)' }}>
|
||||
{service.icon}
|
||||
</div>
|
||||
<h3 className="text-xl md:text-2xl font-light text-white group-hover:translate-x-2 transition-transform duration-500">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-500 leading-relaxed max-w-2xl pl-14">
|
||||
{service.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="hidden lg:flex items-center justify-center w-10 h-10">
|
||||
<ArrowUpRight className="w-5 h-5 text-gray-600 group-hover:text-white group-hover:translate-x-1 group-hover:-translate-y-1 transition-all duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 h-px w-0 group-hover:w-full transition-all duration-700"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
/>
|
||||
</a>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function IndustriesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-16 mb-16">
|
||||
<FadeIn className="lg:w-1/3">
|
||||
<div className="text-sm tracking-[0.2em] uppercase mb-4" style={{ color: CINNABAR }}>
|
||||
行业覆盖
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-light text-white tracking-tight leading-tight">
|
||||
深耕六大行业
|
||||
</h2>
|
||||
<p className="text-gray-500 mt-6 leading-relaxed">
|
||||
专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="lg:w-2/3">
|
||||
<div className="grid sm:grid-cols-2 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.06)' }}>
|
||||
{INDUSTRIES.map((ind, i) => (
|
||||
<FadeIn key={i} delay={i * 0.08}>
|
||||
<div
|
||||
className="p-8 transition-colors duration-300 hover:bg-white/[0.02]"
|
||||
style={{ backgroundColor: INK_LIGHT }}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-sm flex items-center justify-center mb-5 text-gray-400" style={{ backgroundColor: 'rgba(255,255,255,0.04)' }}>
|
||||
{ind.icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-2">{ind.name}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{ind.desc}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ApproachSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-20 max-w-2xl">
|
||||
<div className="text-sm tracking-[0.2em] uppercase mb-4" style={{ color: CINNABAR }}>
|
||||
方法论
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-light text-white tracking-tight leading-tight">
|
||||
四步交付法，确保每一个项目成功落地
|
||||
</h2>
|
||||
</FadeIn>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.06)' }}>
|
||||
{APPROACH_STEPS.map((step, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<div className="p-8 lg:p-10 h-full" style={{ backgroundColor: INK }}>
|
||||
<div className="text-5xl font-light mb-6" style={{ color: CINNABAR }}>
|
||||
{step.step}
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-3">{step.title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{step.desc}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-16">
|
||||
<FadeIn>
|
||||
<div className="text-sm tracking-[0.2em] uppercase mb-4" style={{ color: CINNABAR }}>
|
||||
思想领导力
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-light text-white tracking-tight">
|
||||
最新洞察
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/news"
|
||||
className="group inline-flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-colors duration-300"
|
||||
>
|
||||
查看全部
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 lg:gap-10">
|
||||
{INSIGHTS.map((insight, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<article className="group cursor-pointer">
|
||||
<div className="aspect-[4/3] mb-6 overflow-hidden" style={{ backgroundColor: '#151B23' }}>
|
||||
<div className="w-full h-full flex items-center justify-center transition-transform duration-700 group-hover:scale-105">
|
||||
<BarChart2 className="w-16 h-16 text-white/5" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<span className="text-xs tracking-wider uppercase" style={{ color: CINNABAR }}>
|
||||
{insight.tag}
|
||||
</span>
|
||||
<span className="text-xs text-gray-600">{insight.date}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-3 leading-snug group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||
{insight.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed mb-4">
|
||||
{insight.desc}
|
||||
</p>
|
||||
<span className="text-xs text-gray-600">{insight.readTime}</span>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="max-w-3xl text-center mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-light text-white tracking-tight leading-tight mb-8">
|
||||
准备好开启您的数字化转型之旅了吗？
|
||||
</h2>
|
||||
<p className="text-gray-400 mb-12 leading-relaxed max-w-xl mx-auto">
|
||||
与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-8">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group inline-flex items-center gap-2 text-white text-sm font-medium tracking-wide pb-1 border-b border-white/20 hover:border-white transition-colors duration-300"
|
||||
>
|
||||
预约咨询
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="group inline-flex items-center gap-2 text-gray-400 text-sm font-medium tracking-wide pb-1 border-b border-transparent hover:border-gray-500 hover:text-white transition-colors duration-300"
|
||||
>
|
||||
关于我们
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV6() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<ServicesSection />
|
||||
<IndustriesSection />
|
||||
<ApproachSection />
|
||||
<InsightsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,767 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useScroll, useTransform, useInView } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import {
|
||||
ArrowRight, ArrowUpRight, ChevronDown,
|
||||
Target, Briefcase, Cpu, Brain,
|
||||
BarChart2,
|
||||
Building, Factory, ShoppingCart, Stethoscope,
|
||||
GraduationCap, Globe,
|
||||
Quote,
|
||||
} from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const INK = '#0A0E14';
|
||||
const INK_LIGHT = '#0F1419';
|
||||
const INK_LIGHTER = '#151B23';
|
||||
const CINNABAR = '#C41E3A';
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const CONTAINER = 'max-w-[1280px] mx-auto px-6 lg:px-8';
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '战略咨询',
|
||||
desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。',
|
||||
href: '/services/consulting',
|
||||
icon: <Target className="w-6 h-6" />,
|
||||
highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理'],
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '企业软件',
|
||||
desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。',
|
||||
href: '/products',
|
||||
icon: <Briefcase className="w-6 h-6" />,
|
||||
highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能'],
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '技术服务',
|
||||
desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
|
||||
href: '/services',
|
||||
icon: <Cpu className="w-6 h-6" />,
|
||||
highlights: ['系统集成与架构', '数据中台建设', '云原生迁移'],
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'AI 赋能',
|
||||
desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。',
|
||||
href: '/services/ai',
|
||||
icon: <Brain className="w-6 h-6" />,
|
||||
highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化'],
|
||||
},
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: <Factory className="w-6 h-6" />, name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+' },
|
||||
{ icon: <ShoppingCart className="w-6 h-6" />, name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+' },
|
||||
{ icon: <Stethoscope className="w-6 h-6" />, name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+' },
|
||||
{ icon: <GraduationCap className="w-6 h-6" />, name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+' },
|
||||
{ icon: <Building className="w-6 h-6" />, name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+' },
|
||||
{ icon: <Globe className="w-6 h-6" />, name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+' },
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 500, suffix: '+', label: '企业客户', sub: '累计服务' },
|
||||
{ value: 12, suffix: '年', label: '行业经验', sub: '深耕积累' },
|
||||
{ value: 98, suffix: '%', label: '客户满意度', sub: '持续服务' },
|
||||
{ value: 200, suffix: '+', label: '专业顾问', sub: '技术专家' },
|
||||
];
|
||||
|
||||
const CASES = [
|
||||
{
|
||||
industry: '智能制造',
|
||||
title: '大型制造企业 ERP 全面升级项目',
|
||||
description: '为某上市制造企业实施 ERP 系统升级，覆盖生产、供应链、财务等核心模块，实现业务流程全面数字化。',
|
||||
metrics: [
|
||||
{ value: '40%', label: '生产效率提升' },
|
||||
{ value: '30天', label: '核心系统上线' },
|
||||
{ value: '99.5%', label: '数据准确率' },
|
||||
],
|
||||
quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。',
|
||||
author: 'CTO',
|
||||
company: '某上市制造企业',
|
||||
},
|
||||
{
|
||||
industry: '贸易零售',
|
||||
title: '连锁零售全渠道数字化升级',
|
||||
description: '助力区域零售龙头构建全渠道零售体系，打通线上线下会员、库存、营销体系，实现营收快速增长。',
|
||||
metrics: [
|
||||
{ value: '25%', label: '营收增长' },
|
||||
{ value: '50%', label: '库存周转优化' },
|
||||
{ value: '3x', label: '会员复购率' },
|
||||
],
|
||||
quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。',
|
||||
author: 'CEO',
|
||||
company: '某区域零售龙头',
|
||||
},
|
||||
];
|
||||
|
||||
const INSIGHTS = [
|
||||
{
|
||||
category: '研究报告',
|
||||
date: '2026.06',
|
||||
title: '2026 中国企业数字化转型趋势报告',
|
||||
excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。',
|
||||
readTime: '12 分钟',
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
category: '行业洞察',
|
||||
date: '2026.05',
|
||||
title: 'AI 浪潮下的企业数字化升级路径',
|
||||
excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。',
|
||||
readTime: '8 分钟',
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
category: '实践指南',
|
||||
date: '2026.04',
|
||||
title: 'ERP 选型避坑指南：从需求到落地全流程',
|
||||
excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。',
|
||||
readTime: '15 分钟',
|
||||
featured: false,
|
||||
},
|
||||
];
|
||||
|
||||
const APPROACH = [
|
||||
{
|
||||
step: '01',
|
||||
title: '诊断评估',
|
||||
desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。',
|
||||
duration: '2-4 周',
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: '方案设计',
|
||||
desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。',
|
||||
duration: '4-6 周',
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '交付落地',
|
||||
desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。',
|
||||
duration: '3-9 月',
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: '持续运营',
|
||||
desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。',
|
||||
duration: '长期陪伴',
|
||||
},
|
||||
];
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
const [count, setCount] = useState(0);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!start || prefersReducedMotion) {
|
||||
setCount(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
let animationId: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setCount(Math.floor(target * easeOutQuart));
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(target);
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(animationId);
|
||||
}, [target, start, duration, prefersReducedMotion]);
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
function FadeIn({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.8, delay, ease: EASE }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, sub, start, delay }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start);
|
||||
return (
|
||||
<FadeIn delay={delay}>
|
||||
<div className="relative">
|
||||
<div className="text-5xl lg:text-6xl font-bold text-white tracking-tight mb-2">
|
||||
{count}<span style={{ color: CINNABAR }}>{suffix}</span>
|
||||
</div>
|
||||
<div className="text-white font-medium">{label}</div>
|
||||
<div className="text-sm text-gray-500 mt-1">{sub}</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, 120]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0.3]);
|
||||
|
||||
return (
|
||||
<section ref={containerRef} className="relative min-h-screen flex items-center overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-1/2 h-full opacity-20"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, transparent 40%, ${CINNABAR}30 100%)`,
|
||||
clipPath: 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 w-full h-1/3"
|
||||
style={{
|
||||
background: `linear-gradient(to top, ${INK_LIGHT} 0%, transparent 100%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 opacity-[0.03]" style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
||||
backgroundSize: '80px 80px',
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<motion.div style={{ y, opacity }} className={`${CONTAINER} relative z-10 w-full py-32 lg:py-40`}>
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="flex items-center gap-4 mb-8"
|
||||
>
|
||||
<div className="w-12 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase text-gray-400">
|
||||
Digital Transformation Partner
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.1, ease: EASE }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.95] tracking-tight mb-10"
|
||||
>
|
||||
以战略远见
|
||||
<br />
|
||||
<span className="relative inline-block">
|
||||
驱动
|
||||
<span style={{ color: CINNABAR }}>数字化</span>
|
||||
<svg className="absolute -bottom-2 left-0 w-full" height="8" viewBox="0 0 200 8" fill="none" preserveAspectRatio="none">
|
||||
<path d="M0 4 Q 50 0, 100 4 T 200 4" stroke={CINNABAR} strokeWidth="2" fill="none" />
|
||||
</svg>
|
||||
</span>
|
||||
<br />
|
||||
未来
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3, ease: EASE }}
|
||||
className="text-xl text-gray-400 max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
|
||||
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.45, ease: EASE }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group relative inline-flex items-center gap-3 px-8 py-4 text-white font-medium overflow-hidden"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
<span className="relative z-10">预约咨询</span>
|
||||
<ArrowRight className="w-4 h-4 relative z-10 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
<div className="absolute inset-0 bg-black/20 translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="group inline-flex items-center gap-2 px-8 py-4 text-white font-medium border border-white/20 hover:border-white/50 hover:bg-white/5 transition-all duration-300"
|
||||
>
|
||||
了解服务
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, delay: 1.2 }}
|
||||
className="absolute bottom-12 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3"
|
||||
>
|
||||
<span className="text-xs text-gray-600 tracking-[0.3em] uppercase">探索更多</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
|
||||
>
|
||||
<ChevronDown className="w-5 h-5 text-gray-500" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section ref={ref} className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-16">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
实力验证
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
数据印证专业
|
||||
</h2>
|
||||
</FadeIn>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
|
||||
{STATS.map((stat, i) => (
|
||||
<StatItem key={i} {...stat} start={isInView} delay={i * 0.12} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
|
||||
<FadeIn className="lg:max-w-xl">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
核心服务
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四位一体的<br />数字化服务体系
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-gray-400 max-w-md leading-relaxed">
|
||||
从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有专家陪伴。
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.08)' }}>
|
||||
{SERVICES.map((service, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<a
|
||||
href={service.href}
|
||||
className="group relative block p-8 lg:p-10 transition-all duration-500 hover:bg-white/[0.02]"
|
||||
style={{ backgroundColor: INK }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-0.5 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
|
||||
<div className="flex items-start gap-5 mb-6">
|
||||
<div
|
||||
className="w-14 h-14 flex items-center justify-center shrink-0 transition-all duration-500 group-hover:scale-110"
|
||||
style={{ backgroundColor: 'rgba(196, 30, 58, 0.1)', color: CINNABAR }}
|
||||
>
|
||||
{service.icon}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 font-mono tracking-wider mb-1">{service.number}</div>
|
||||
<h3 className="text-2xl font-bold text-white group-hover:translate-x-1 transition-transform duration-500">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-400 leading-relaxed mb-6">
|
||||
{service.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{service.highlights.map((h, j) => (
|
||||
<span key={j} className="px-3 py-1 text-xs text-gray-500 border border-white/10 rounded-sm">
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 text-sm font-medium" style={{ color: CINNABAR }}>
|
||||
了解详情
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</div>
|
||||
</a>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function IndustriesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col lg:flex-row lg:items-start gap-16 mb-16">
|
||||
<FadeIn className="lg:w-1/3">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
行业覆盖
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
深耕六大行业
|
||||
</h2>
|
||||
<p className="text-gray-400 leading-relaxed">
|
||||
专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。
|
||||
每一个行业都有专属的专家团队与成熟的方法论。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="lg:w-2/3">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.08)' }}>
|
||||
{INDUSTRIES.map((ind, i) => (
|
||||
<FadeIn key={i} delay={i * 0.08}>
|
||||
<div
|
||||
className="group p-8 transition-all duration-500 hover:bg-white/[0.03] cursor-pointer"
|
||||
style={{ backgroundColor: INK_LIGHT }}
|
||||
>
|
||||
<div
|
||||
className="w-12 h-12 flex items-center justify-center mb-5 text-gray-400 group-hover:text-white transition-colors duration-300"
|
||||
style={{ backgroundColor: 'rgba(255,255,255,0.04)' }}
|
||||
>
|
||||
{ind.icon}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-lg font-bold text-white">{ind.name}</h3>
|
||||
<span className="text-xs px-2 py-0.5 rounded-sm" style={{ backgroundColor: 'rgba(196, 30, 58, 0.15)', color: CINNABAR }}>
|
||||
{ind.count}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{ind.desc}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CasesSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<FadeIn>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
客户案例
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
可衡量的业务成果
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/solutions"
|
||||
className="group inline-flex items-center gap-2 text-white font-medium"
|
||||
>
|
||||
查看全部案例
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{CASES.map((caseItem, i) => (
|
||||
<FadeIn key={i} delay={i * 0.15}>
|
||||
<article className="group relative overflow-hidden border border-white/10 hover:border-white/20 transition-all duration-500">
|
||||
<div className="grid lg:grid-cols-5 gap-0">
|
||||
<div className="lg:col-span-3 p-8 lg:p-10" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<span className="px-4 py-1.5 text-xs font-medium tracking-wide" style={{ backgroundColor: CINNABAR, color: 'white' }}>
|
||||
{caseItem.industry}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed mb-8">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
<div className="flex items-start gap-4 pt-6 border-t border-white/10">
|
||||
<Quote className="w-8 h-8 shrink-0 mt-1" style={{ color: CINNABAR, opacity: 0.5 }} />
|
||||
<div>
|
||||
<p className="text-gray-300 italic leading-relaxed mb-3">
|
||||
"{caseItem.quote}"
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
— {caseItem.author}，{caseItem.company}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 p-8 lg:p-10 flex flex-col justify-center" style={{ backgroundColor: INK_LIGHTER }}>
|
||||
<div className="text-sm text-gray-500 mb-6 tracking-wide">核心成果</div>
|
||||
<div className="space-y-6">
|
||||
{caseItem.metrics.map((metric, j) => (
|
||||
<div key={j} className="flex items-baseline gap-4">
|
||||
<div className="text-4xl font-bold text-white">
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-gray-400">{metric.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-1 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ApproachSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-20 max-w-2xl">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
方法论
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四步交付法
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-6 leading-relaxed">
|
||||
确保每一个项目成功落地的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute top-16 left-0 right-0 h-px hidden lg:block" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }} />
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{APPROACH.map((step, i) => (
|
||||
<FadeIn key={i} delay={i * 0.12}>
|
||||
<div className="relative h-full p-8 border border-white/10 hover:border-white/20 transition-all duration-500 group" style={{ backgroundColor: INK }}>
|
||||
<div className="absolute -top-3 left-8 px-4" style={{ backgroundColor: INK }}>
|
||||
<span className="text-6xl font-bold" style={{ color: CINNABAR }}>
|
||||
{step.step}
|
||||
</span>
|
||||
</div>
|
||||
<div className="pt-12">
|
||||
<h3 className="text-xl font-bold text-white mb-3">{step.title}</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-4">{step.desc}</p>
|
||||
<div className="inline-block px-3 py-1 text-xs text-gray-400 border border-white/10">
|
||||
周期：{step.duration}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className="py-24 lg:py-32" style={{ backgroundColor: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-16">
|
||||
<FadeIn>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
思想领导力
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
最新洞察
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/news"
|
||||
className="group inline-flex items-center gap-2 text-white font-medium"
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.08)' }}>
|
||||
{INSIGHTS.map((insight, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<article className="group cursor-pointer h-full flex flex-col" style={{ backgroundColor: INK }}>
|
||||
<div className={`relative overflow-hidden ${insight.featured ? 'aspect-[16/10]' : 'aspect-[16/9]'}`} style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-700 group-hover:scale-110">
|
||||
<BarChart2 className="w-20 h-20 text-white/5" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
|
||||
<div className="absolute top-6 left-6">
|
||||
<span className="px-3 py-1 text-xs font-medium tracking-wide" style={{ backgroundColor: CINNABAR, color: 'white' }}>
|
||||
{insight.category}
|
||||
</span>
|
||||
</div>
|
||||
{insight.featured && (
|
||||
<div className="absolute bottom-6 right-6">
|
||||
<span className="px-3 py-1 text-xs bg-white/10 backdrop-blur-sm text-white border border-white/20">
|
||||
精选推荐
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-6 lg:p-8 flex-1 flex flex-col">
|
||||
<div className="flex items-center gap-4 mb-4 text-sm text-gray-600">
|
||||
<span>{insight.date}</span>
|
||||
<span>·</span>
|
||||
<span>{insight.readTime}</span>
|
||||
</div>
|
||||
<h3 className={`font-bold text-white mb-4 leading-snug group-hover:text-[#C41E3A] transition-colors duration-300 ${insight.featured ? 'text-xl' : 'text-lg'}`}>
|
||||
{insight.title}
|
||||
</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed flex-1">
|
||||
{insight.excerpt}
|
||||
</p>
|
||||
<div className="mt-6 pt-6 border-t border-white/5">
|
||||
<span className="inline-flex items-center gap-2 text-sm font-medium" style={{ color: CINNABAR }}>
|
||||
阅读全文
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute -top-1/2 -right-1/4 w-3/4 h-full opacity-30"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at center, ${CINNABAR}40 0%, transparent 70%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${CONTAINER} relative z-10`}>
|
||||
<FadeIn className="max-w-4xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.2em] uppercase" style={{ color: CINNABAR }}>
|
||||
开启合作
|
||||
</span>
|
||||
<div className="w-8 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
准备好开启您的
|
||||
<br />
|
||||
<span style={{ color: CINNABAR }}>数字化转型</span>之旅了吗？
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group relative inline-flex items-center gap-3 px-10 py-5 text-white font-medium text-lg overflow-hidden"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
<span className="relative z-10">立即咨询</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
<div className="absolute inset-0 bg-black/20 translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="group inline-flex items-center gap-2 px-10 py-5 text-white font-medium text-lg border border-white/20 hover:border-white/50 hover:bg-white/5 transition-all duration-300"
|
||||
>
|
||||
关于我们
|
||||
<ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV7() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<ServicesSection />
|
||||
<IndustriesSection />
|
||||
<CasesSection />
|
||||
<ApproachSection />
|
||||
<InsightsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,964 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useScroll, useTransform, useInView } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import {
|
||||
ArrowRight, ArrowUpRight, ChevronDown,
|
||||
Target, Briefcase, Cpu, Brain,
|
||||
BarChart3,
|
||||
Building2, Factory, ShoppingBag, Heart,
|
||||
GraduationCap, Globe2,
|
||||
Quote, ArrowDownRight,
|
||||
} from 'lucide-react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const INK = '#0A0E14';
|
||||
const INK_LIGHT = '#0F1419';
|
||||
const INK_LIGHTER = '#151B23';
|
||||
const CINNABAR = '#C41E3A';
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const CONTAINER = 'max-w-[1320px] mx-auto px-6 lg:px-10';
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
number: '01',
|
||||
title: '战略咨询',
|
||||
subtitle: 'Strategy Consulting',
|
||||
desc: '数字化转型战略规划与落地路径设计，让技术投资真正驱动业务增长。从愿景制定到执行落地，陪伴企业穿越转型周期。',
|
||||
href: '/services/consulting',
|
||||
icon: <Target className="w-7 h-7" />,
|
||||
highlights: ['数字化成熟度评估', '转型路线图设计', '组织变革管理', '技术选型顾问'],
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '企业软件',
|
||||
subtitle: 'Enterprise Software',
|
||||
desc: 'ERP、CRM、BI 等核心系统的评估、实施与定制化开发。基于行业最佳实践，打造适配企业实际的数字化底座。',
|
||||
href: '/products',
|
||||
icon: <Briefcase className="w-7 h-7" />,
|
||||
highlights: ['ERP 实施与优化', 'CRM 客户关系管理', 'BI 商业智能', '低代码平台'],
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: '技术服务',
|
||||
subtitle: 'Technology Services',
|
||||
desc: '系统集成、数据中台、云原生架构设计与技术外包服务。以工程化能力保障系统的稳定性、可扩展性与持续迭代。',
|
||||
href: '/services',
|
||||
icon: <Cpu className="w-7 h-7" />,
|
||||
highlights: ['系统集成与架构', '数据中台建设', '云原生迁移', '研发效能提升'],
|
||||
},
|
||||
{
|
||||
number: '04',
|
||||
title: 'AI 赋能',
|
||||
subtitle: 'AI Empowerment',
|
||||
desc: 'AI 成熟度评估、场景落地与大模型应用开发。帮助企业找到 AI 与业务的最佳结合点，实现智能化升级。',
|
||||
href: '/services/ai',
|
||||
icon: <Brain className="w-7 h-7" />,
|
||||
highlights: ['AI 战略规划', '大模型应用开发', '智能流程自动化', '数据治理'],
|
||||
},
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: <Factory className="w-6 h-6" />, name: '智能制造', desc: '工业4.0、智能工厂、供应链数字化', count: '120+' },
|
||||
{ icon: <ShoppingBag className="w-6 h-6" />, name: '贸易零售', desc: '全渠道零售、会员体系、数字营销', count: '80+' },
|
||||
{ icon: <Heart className="w-6 h-6" />, name: '医疗健康', desc: '医院信息化、医疗数据合规、智慧医疗', count: '60+' },
|
||||
{ icon: <GraduationCap className="w-6 h-6" />, name: '教育科技', desc: '在线教育、学习管理、教育数字化', count: '50+' },
|
||||
{ icon: <Building2 className="w-6 h-6" />, name: '金融服务', desc: '金融科技、风控合规、数据中台', count: '40+' },
|
||||
{ icon: <Globe2 className="w-6 h-6" />, name: '跨境电商', desc: '独立站、跨境支付、全球化运营', count: '30+' },
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 500, suffix: '+', label: '企业客户', sub: '累计服务' },
|
||||
{ value: 12, suffix: '年', label: '行业经验', sub: '深耕积累' },
|
||||
{ value: 98, suffix: '%', label: '客户满意度', sub: '持续服务' },
|
||||
{ value: 200, suffix: '+', label: '专业顾问', sub: '技术专家' },
|
||||
];
|
||||
|
||||
const CASES = [
|
||||
{
|
||||
industry: '智能制造',
|
||||
title: '大型制造企业 ERP 全面升级项目',
|
||||
description: '为某上市制造企业实施 ERP 系统升级，覆盖生产、供应链、财务等核心模块，实现业务流程全面数字化。项目周期 9 个月，核心系统一次性上线成功。',
|
||||
metrics: [
|
||||
{ value: '40%', label: '生产效率提升' },
|
||||
{ value: '25%', label: '库存成本下降' },
|
||||
{ value: '99.5%', label: '数据准确率' },
|
||||
],
|
||||
quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系，这是超出预期的价值。',
|
||||
author: 'CTO',
|
||||
company: '某上市制造企业',
|
||||
},
|
||||
{
|
||||
industry: '贸易零售',
|
||||
title: '连锁零售全渠道数字化升级',
|
||||
description: '助力区域零售龙头构建全渠道零售体系，打通线上线下会员、库存、营销体系，实现营收快速增长。项目覆盖 200+ 门店。',
|
||||
metrics: [
|
||||
{ value: '25%', label: '营收增长' },
|
||||
{ value: '50%', label: '库存周转优化' },
|
||||
{ value: '3x', label: '会员复购率' },
|
||||
],
|
||||
quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心，是值得信赖的合作伙伴。',
|
||||
author: 'CEO',
|
||||
company: '某区域零售龙头',
|
||||
},
|
||||
];
|
||||
|
||||
const INSIGHTS = [
|
||||
{
|
||||
category: '研究报告',
|
||||
date: '2026.06.15',
|
||||
title: '2026 中国企业数字化转型趋势报告',
|
||||
excerpt: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。报告共 120 页，包含 23 个行业标杆案例。',
|
||||
readTime: '12 分钟',
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
category: '行业洞察',
|
||||
date: '2026.05.28',
|
||||
title: 'AI 浪潮下的企业数字化升级路径',
|
||||
excerpt: '探讨企业如何在 AI 时代找到最适合的技术投入方向，避免盲目跟风，实现务实落地。',
|
||||
readTime: '8 分钟',
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
category: '实践指南',
|
||||
date: '2026.04.20',
|
||||
title: 'ERP 选型避坑指南：从需求到落地全流程',
|
||||
excerpt: '总结 200+ ERP 实施项目经验，给出完整的选型方法论与风险控制框架。',
|
||||
readTime: '15 分钟',
|
||||
featured: false,
|
||||
},
|
||||
];
|
||||
|
||||
const APPROACH = [
|
||||
{
|
||||
step: '01',
|
||||
title: '诊断评估',
|
||||
desc: '全面调研企业现状，识别数字化痛点与机会点，输出可执行的转型路线图。',
|
||||
duration: '2-4 周',
|
||||
deliverables: ['现状评估报告', '转型路线图', '优先级排序'],
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: '方案设计',
|
||||
desc: '基于行业最佳实践与企业实际，定制技术架构与实施计划，确保方案可落地、可演进。',
|
||||
duration: '4-6 周',
|
||||
deliverables: ['技术架构设计', '实施计划', '成本收益分析'],
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '交付落地',
|
||||
desc: '以敏捷迭代方式推进项目实施，全程透明沟通，确保质量、进度与成本可控。',
|
||||
duration: '3-9 月',
|
||||
deliverables: ['系统上线', '知识转移', '运维手册'],
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: '持续运营',
|
||||
desc: '项目交付后提供持续的技术支持与优化建议，陪伴企业数字化能力持续成长。',
|
||||
duration: '长期陪伴',
|
||||
deliverables: ['运维支持', '持续优化', '定期复盘'],
|
||||
},
|
||||
];
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
const [count, setCount] = useState(0);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!start || prefersReducedMotion) {
|
||||
setCount(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
let animationId: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setCount(Math.floor(target * easeOutQuart));
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(target);
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(animationId);
|
||||
}, [target, start, duration, prefersReducedMotion]);
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
function NoiseOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '180px 180px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DiagonalLine({ className = '', color = 'rgba(255,255,255,0.06)' }: { className?: string; color?: string }) {
|
||||
return (
|
||||
<div className={`absolute ${className}`}>
|
||||
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<line x1="0" y1="100" x2="100" y2="0" stroke={color} strokeWidth="0.5" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FadeIn({ children, delay = 0, className = '', y = 30 }: { children: React.ReactNode; delay?: number; className?: string; y?: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.9, delay, ease: EASE_OUT }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, sub, start, delay }: { value: number; suffix: string; label: string; sub: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start);
|
||||
return (
|
||||
<FadeIn delay={delay}>
|
||||
<div className="relative group">
|
||||
<div className="text-6xl lg:text-7xl font-bold tracking-tight mb-3">
|
||||
<span className="text-white">{count}</span>
|
||||
<span style={{ color: CINNABAR }}>{suffix}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-px" style={{ backgroundColor: CINNABAR }} />
|
||||
<div>
|
||||
<div className="text-white font-medium text-base">{label}</div>
|
||||
<div className="text-sm text-gray-500">{sub}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
const y = useTransform(scrollYProgress, [0, 1], [0, 180]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0.2]);
|
||||
const gridY = useTransform(scrollYProgress, [0, 1], [0, -80]);
|
||||
|
||||
return (
|
||||
<section ref={containerRef} className="relative min-h-screen flex items-center overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<motion.div style={{ y: gridY }} className="absolute inset-0 opacity-[0.04]">
|
||||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '120px 120px',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 right-0 w-1/2 h-full"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, transparent 30%, ${CINNABAR}15 100%)`,
|
||||
clipPath: 'polygon(40% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute bottom-0 left-0 w-full h-2/3"
|
||||
style={{
|
||||
background: `linear-gradient(to top, ${INK} 0%, transparent 100%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<DiagonalLine className="top-0 right-[20%] w-[400px] h-[400px]" color="rgba(196,30,58,0.2)" />
|
||||
</div>
|
||||
|
||||
<motion.div style={{ y, opacity }} className={`${CONTAINER} relative z-10 w-full py-36 lg:py-44`}>
|
||||
<div className="grid lg:grid-cols-12 gap-8 items-center">
|
||||
<div className="lg:col-span-9">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.9, ease: EASE_OUT }}
|
||||
className="flex items-center gap-5 mb-10"
|
||||
>
|
||||
<div className="w-16 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.4em] uppercase text-gray-400 font-medium">
|
||||
Digital Transformation Partner
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold text-white leading-[0.9] tracking-tight mb-12"
|
||||
>
|
||||
<div className="flex items-baseline gap-4">
|
||||
<span>以战略远见</span>
|
||||
</div>
|
||||
<div className="flex items-baseline gap-4 mt-2">
|
||||
<span>驱动</span>
|
||||
<span className="relative inline-block">
|
||||
<span style={{ color: CINNABAR }}>数字化</span>
|
||||
<svg
|
||||
className="absolute -bottom-3 left-0 w-full"
|
||||
height="12"
|
||||
viewBox="0 0 300 12"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0 6 Q 75 0, 150 6 T 300 6"
|
||||
stroke={CINNABAR}
|
||||
strokeWidth="2.5"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>未来</span>
|
||||
</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.35, ease: EASE_OUT }}
|
||||
className="text-xl text-gray-400 max-w-2xl leading-relaxed mb-14"
|
||||
>
|
||||
睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。
|
||||
我们以务实的方法和深度的行业洞见，帮助您构建面向未来的数字竞争力。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.5, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group relative inline-flex items-center gap-3 px-10 py-5 text-white font-medium text-base overflow-hidden"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
<span className="relative z-10">预约咨询</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 transition-transform duration-500 group-hover:translate-x-2" />
|
||||
<div className="absolute inset-0 bg-black/30 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="group inline-flex items-center gap-3 px-10 py-5 text-white font-medium text-base border border-white/20 hover:border-white/40 hover:bg-white/5 transition-all duration-400"
|
||||
>
|
||||
了解我们的服务
|
||||
<ArrowUpRight className="w-5 h-5 transition-all duration-400 group-hover:translate-x-1 group-hover:-translate-y-1" />
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1, delay: 0.65, ease: EASE_OUT }}
|
||||
className="hidden lg:block lg:col-span-3"
|
||||
>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute -top-10 -left-10 w-24 h-24 border-l-2 border-t-2"
|
||||
style={{ borderColor: CINNABAR }}
|
||||
/>
|
||||
<div className="border border-white/10 p-8" style={{ backgroundColor: 'rgba(15, 20, 25, 0.6)' }}>
|
||||
<div className="text-xs tracking-[0.3em] uppercase text-gray-500 mb-4">Est. 2014</div>
|
||||
<div className="text-4xl font-bold text-white mb-2">12<span style={{ color: CINNABAR }}>年</span></div>
|
||||
<div className="text-sm text-gray-400 mb-6">深耕企业数字化服务</div>
|
||||
<div className="space-y-3 pt-6 border-t border-white/10">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-500">服务企业</span>
|
||||
<span className="text-white font-medium">500+</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-500">专业团队</span>
|
||||
<span className="text-white font-medium">200+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, delay: 1.3 }}
|
||||
className="absolute bottom-14 left-1/2 -translate-x-1/2 flex flex-col items-center gap-4"
|
||||
>
|
||||
<span className="text-xs text-gray-600 tracking-[0.4em] uppercase">Scroll to explore</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 10, 0] }}
|
||||
transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
|
||||
>
|
||||
<ChevronDown className="w-6 h-6 text-gray-500" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function StatsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-120px' });
|
||||
|
||||
return (
|
||||
<section ref={ref} className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)' }} />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px" style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)' }} />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="grid lg:grid-cols-12 gap-12 items-start">
|
||||
<FadeIn className="lg:col-span-4">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Proven Results
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
用数据说话<br />的专业实力
|
||||
</h2>
|
||||
<p className="text-gray-400 leading-relaxed">
|
||||
十二年深耕，五百余家企业的共同选择。我们用实实在在的业务成果，赢得客户的长期信赖。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="lg:col-span-8">
|
||||
<div className="grid grid-cols-2 gap-12 lg:gap-16">
|
||||
{STATS.map((stat, i) => (
|
||||
<StatItem key={i} {...stat} start={isInView} delay={0.15 + i * 0.12} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-10 mb-20">
|
||||
<FadeIn className="lg:max-w-2xl">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Our Services
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四位一体的数字化服务体系
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<p className="text-gray-400 max-w-md leading-relaxed">
|
||||
从战略规划到技术落地，为企业数字化转型提供全链路专业服务，每一步都有资深专家陪伴。
|
||||
</p>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
|
||||
{SERVICES.map((service, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<a
|
||||
href={service.href}
|
||||
className="group relative block p-10 lg:p-14 transition-all duration-600 hover:bg-white/[0.02]"
|
||||
style={{ backgroundColor: INK }}
|
||||
>
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full w-0.5 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
/>
|
||||
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div
|
||||
className="w-16 h-16 flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:-translate-y-1"
|
||||
style={{ backgroundColor: 'rgba(196, 30, 58, 0.12)', color: CINNABAR }}
|
||||
>
|
||||
{service.icon}
|
||||
</div>
|
||||
<span className="text-5xl font-bold text-white/5 group-hover:text-white/10 transition-colors duration-500">
|
||||
{service.number}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="text-xs tracking-[0.3em] uppercase text-gray-600 mb-2">{service.subtitle}</div>
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white group-hover:translate-x-2 transition-transform duration-500">
|
||||
{service.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-400 leading-relaxed mb-8">
|
||||
{service.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-10">
|
||||
{service.highlights.map((h, j) => (
|
||||
<span
|
||||
key={j}
|
||||
className="px-3 py-1.5 text-xs text-gray-500 border border-white/10 group-hover:border-white/20 group-hover:text-gray-400 transition-all duration-300"
|
||||
>
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-3 text-sm font-semibold" style={{ color: CINNABAR }}>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4 transition-all duration-400 group-hover:translate-x-2" />
|
||||
</div>
|
||||
</a>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function IndustriesSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="grid lg:grid-cols-12 gap-16 mb-16">
|
||||
<FadeIn className="lg:col-span-4">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Industries
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight leading-tight mb-6">
|
||||
深耕六大<br />核心行业
|
||||
</h2>
|
||||
<p className="text-gray-400 leading-relaxed mb-8">
|
||||
专注垂直领域，积累丰富的行业 Know-How，提供更贴合业务实际的解决方案。
|
||||
每一个行业都有专属的专家团队与成熟的方法论。
|
||||
</p>
|
||||
<a
|
||||
href="/solutions"
|
||||
className="group inline-flex items-center gap-2 text-white font-medium text-sm"
|
||||
>
|
||||
查看全部行业方案
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" style={{ color: CINNABAR }} />
|
||||
</a>
|
||||
</FadeIn>
|
||||
|
||||
<div className="lg:col-span-8">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
|
||||
{INDUSTRIES.map((ind, i) => (
|
||||
<FadeIn key={i} delay={i * 0.08}>
|
||||
<div
|
||||
className="group p-8 lg:p-10 transition-all duration-500 hover:bg-white/[0.03] cursor-pointer relative overflow-hidden"
|
||||
style={{ backgroundColor: INK_LIGHT }}
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
<div className="absolute top-0 right-0 w-full h-full" style={{ background: `linear-gradient(135deg, ${CINNABAR}20 0%, transparent 70%)` }} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="w-14 h-14 flex items-center justify-center mb-6 text-gray-400 group-hover:text-white transition-all duration-400 group-hover:scale-110"
|
||||
style={{ backgroundColor: 'rgba(255,255,255,0.04)' }}
|
||||
>
|
||||
{ind.icon}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<h3 className="text-lg font-bold text-white">{ind.name}</h3>
|
||||
<span
|
||||
className="text-xs px-2.5 py-1 font-medium"
|
||||
style={{ backgroundColor: 'rgba(196, 30, 58, 0.15)', color: CINNABAR }}
|
||||
>
|
||||
{ind.count} 案例
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{ind.desc}</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CasesSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-20">
|
||||
<FadeIn className="md:max-w-2xl">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Case Studies
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
可衡量的业务成果
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/solutions"
|
||||
className="group inline-flex items-center gap-3 text-white font-medium"
|
||||
>
|
||||
查看全部案例
|
||||
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-2" style={{ color: CINNABAR }} />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="space-y-10">
|
||||
{CASES.map((caseItem, i) => (
|
||||
<FadeIn key={i} delay={i * 0.15}>
|
||||
<article className="group relative overflow-hidden border border-white/10 hover:border-white/20 transition-all duration-600">
|
||||
<div className="grid lg:grid-cols-5 gap-0">
|
||||
<div className="lg:col-span-3 p-10 lg:p-14 relative" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute top-0 left-0 w-full h-1 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" style={{ backgroundColor: CINNABAR }} />
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<span className="px-5 py-2 text-xs font-bold tracking-wider" style={{ backgroundColor: CINNABAR, color: 'white' }}>
|
||||
{caseItem.industry}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 tracking-wide">CASE #{String(i + 1).padStart(2, '0')}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white mb-6 leading-tight group-hover:text-[#C41E3A] transition-colors duration-400">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed mb-10">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-start gap-5 pt-8 border-t border-white/10">
|
||||
<Quote className="w-10 h-10 shrink-0 mt-0.5" style={{ color: CINNABAR, opacity: 0.4 }} />
|
||||
<div>
|
||||
<p className="text-gray-300 italic leading-relaxed mb-4 text-base">
|
||||
"{caseItem.quote}"
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
— {caseItem.author}，{caseItem.company}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 p-10 lg:p-14 flex flex-col justify-center relative" style={{ backgroundColor: INK_LIGHTER }}>
|
||||
<div className="text-sm text-gray-500 mb-8 tracking-[0.2em] uppercase">Key Results</div>
|
||||
<div className="space-y-8">
|
||||
{caseItem.metrics.map((metric, j) => (
|
||||
<div key={j} className="group/metric">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2 group-hover/metric:translate-x-2 transition-transform duration-400">
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-px" style={{ backgroundColor: CINNABAR }} />
|
||||
<div className="text-gray-400">{metric.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ApproachSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<FadeIn className="mb-20 max-w-3xl">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Our Approach
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
四步交付法，<br />确保每一个项目成功落地
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-8 leading-relaxed text-lg">
|
||||
基于 500+ 项目经验沉淀的方法论体系。从诊断评估到持续运营，每一步都有清晰的目标和交付物，让数字化转型可见、可控、可衡量。
|
||||
</p>
|
||||
</FadeIn>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute top-[88px] left-0 right-0 h-px hidden lg:block" style={{ background: 'linear-gradient(90deg, rgba(196,30,58,0.3), rgba(196,30,58,0.3))' }} />
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
|
||||
{APPROACH.map((step, i) => (
|
||||
<FadeIn key={i} delay={i * 0.12}>
|
||||
<div className="relative h-full p-8 lg:p-10 border-t-2 border-transparent hover:border-[#C41E3A] transition-all duration-500 group" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute -top-[2px] left-0 w-full flex justify-center hidden lg:flex">
|
||||
<div
|
||||
className="w-4 h-4 rounded-full -mt-[7px] border-2 transition-all duration-400 group-hover:scale-125"
|
||||
style={{ borderColor: CINNABAR, backgroundColor: INK_LIGHT }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<span className="text-6xl font-bold" style={{ color: CINNABAR }}>
|
||||
{step.step}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">{step.title}</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-6">{step.desc}</p>
|
||||
|
||||
<div className="pt-5 border-t border-white/5">
|
||||
<div className="text-xs text-gray-600 mb-3 uppercase tracking-wider">交付物</div>
|
||||
<ul className="space-y-2">
|
||||
{step.deliverables.map((d, j) => (
|
||||
<li key={j} className="flex items-center gap-2 text-xs text-gray-400">
|
||||
<ArrowDownRight className="w-3 h-3" style={{ color: CINNABAR }} />
|
||||
{d}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 inline-block px-3 py-1.5 text-xs text-gray-500 border border-white/10">
|
||||
周期：{step.duration}
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: INK }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className={CONTAINER}>
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8 mb-20">
|
||||
<FadeIn>
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-10 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.3em] uppercase" style={{ color: CINNABAR }}>
|
||||
Insights
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight">
|
||||
思想领导力
|
||||
</h2>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<a
|
||||
href="/news"
|
||||
className="group inline-flex items-center gap-3 text-white font-medium"
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-2" style={{ color: CINNABAR }} />
|
||||
</a>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}>
|
||||
{INSIGHTS.map((insight, i) => (
|
||||
<FadeIn key={i} delay={i * 0.1}>
|
||||
<article className="group cursor-pointer h-full flex flex-col" style={{ backgroundColor: INK }}>
|
||||
<div className={`relative overflow-hidden ${insight.featured ? 'aspect-[16/9]' : 'aspect-[16/10]'}`} style={{ backgroundColor: INK_LIGHT }}>
|
||||
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-700 group-hover:scale-110">
|
||||
<BarChart3 className="w-24 h-24 text-white/[0.04]" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
|
||||
<div className="absolute top-6 left-6">
|
||||
<span
|
||||
className="px-4 py-1.5 text-xs font-bold tracking-wider"
|
||||
style={{ backgroundColor: insight.featured ? CINNABAR : 'rgba(255,255,255,0.1)', color: 'white' }}
|
||||
>
|
||||
{insight.category}
|
||||
</span>
|
||||
</div>
|
||||
{insight.featured && (
|
||||
<div className="absolute top-6 right-6">
|
||||
<span className="px-4 py-1.5 text-xs font-medium bg-white/10 backdrop-blur-sm text-white border border-white/20">
|
||||
精选推荐
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-8 lg:p-10 flex-1 flex flex-col">
|
||||
<div className="flex items-center gap-4 mb-5 text-sm text-gray-600">
|
||||
<span>{insight.date}</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-700" />
|
||||
<span>{insight.readTime}阅读</span>
|
||||
</div>
|
||||
<h3 className={`font-bold text-white mb-5 leading-snug group-hover:text-[#C41E3A] transition-colors duration-400 ${insight.featured ? 'text-2xl' : 'text-xl'}`}>
|
||||
{insight.title}
|
||||
</h3>
|
||||
<p className="text-gray-500 leading-relaxed flex-1">
|
||||
{insight.excerpt}
|
||||
</p>
|
||||
<div className="mt-8 pt-6 border-t border-white/5">
|
||||
<span className="inline-flex items-center gap-2 text-sm font-semibold" style={{ color: CINNABAR }}>
|
||||
阅读全文
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-400 group-hover:translate-x-2" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-32 lg:py-44 overflow-hidden" style={{ backgroundColor: INK_LIGHT }}>
|
||||
<NoiseOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute -top-1/3 -right-1/4 w-3/4 h-full"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at center, ${CINNABAR}25 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute -bottom-1/3 -left-1/4 w-3/4 h-full"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at center, ${CINNABAR}10 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${CONTAINER} relative z-10`}>
|
||||
<FadeIn className="max-w-4xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center gap-5 mb-8">
|
||||
<div className="w-12 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
<span className="text-sm tracking-[0.4em] uppercase" style={{ color: CINNABAR }}>
|
||||
Let's Talk
|
||||
</span>
|
||||
<div className="w-12 h-0.5" style={{ backgroundColor: CINNABAR }} />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-10">
|
||||
准备好开启您的
|
||||
<br />
|
||||
<span className="relative inline-block">
|
||||
<span style={{ color: CINNABAR }}>数字化转型</span>
|
||||
<svg
|
||||
className="absolute -bottom-3 left-0 w-full"
|
||||
height="14"
|
||||
viewBox="0 0 400 14"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0 7 Q 100 0, 200 7 T 400 7"
|
||||
stroke={CINNABAR}
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
之旅了吗？
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 mb-14 max-w-2xl mx-auto leading-relaxed">
|
||||
与我们的专家团队交流，获取针对您业务的专属数字化建议与实施路径。
|
||||
首次咨询完全免费，无任何商业承诺。
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="group relative inline-flex items-center gap-4 px-12 py-6 text-white font-semibold text-lg overflow-hidden"
|
||||
style={{ backgroundColor: CINNABAR }}
|
||||
>
|
||||
<span className="relative z-10">立即预约咨询</span>
|
||||
<ArrowRight className="w-5 h-5 relative z-10 transition-transform duration-500 group-hover:translate-x-2" />
|
||||
<div className="absolute inset-0 bg-black/30 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="group inline-flex items-center gap-4 px-12 py-6 text-white font-medium text-lg border border-white/20 hover:border-white/40 hover:bg-white/5 transition-all duration-400"
|
||||
>
|
||||
了解更多
|
||||
<ArrowUpRight className="w-5 h-5 transition-all duration-400 group-hover:translate-x-1 group-hover:-translate-y-1" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomeContentV8() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<StatsSection />
|
||||
<ServicesSection />
|
||||
<IndustriesSection />
|
||||
<CasesSection />
|
||||
<ApproachSection />
|
||||
<InsightsSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,510 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef } from 'react';
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { SectionHeader } from '@/components/sections/section-header';
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
||||
import { ProductCard } from '@/components/sections/product-card';
|
||||
import { QuestionCard } from '@/components/sections/question-card';
|
||||
import { CaseCard } from '@/components/sections/case-card';
|
||||
import { InsightCard } from '@/components/sections/insight-card';
|
||||
import { StatsBar } from '@/components/sections/stats-bar';
|
||||
import { IndustryGrid } from '@/components/sections/industry-grid';
|
||||
import { CTASection } from '@/components/sections/cta-section';
|
||||
import { ScrollProgress } from '@/components/ui/scroll-progress';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import {
|
||||
ArrowRight,
|
||||
BarChart3, Cpu, Globe, Factory, ShoppingCart, Stethoscope,
|
||||
GraduationCap, Building, Shield, Users,
|
||||
Database, LineChart, Cloud, Brain,
|
||||
} from 'lucide-react';
|
||||
|
||||
// ============================================================
|
||||
// Design Tokens
|
||||
// ============================================================
|
||||
const INK = '#0F1419';
|
||||
const CREAM = '#F3F0EB';
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const SECTION = 'py-20 md:py-36 lg:py-44';
|
||||
const CONTAINER = 'max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16';
|
||||
|
||||
// ============================================================
|
||||
// Data
|
||||
// ============================================================
|
||||
|
||||
const PRODUCTS = [
|
||||
{ icon: <Database className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'ERP 管理系统', description: '覆盖财务、采购、销售、库存、生产全链路，支撑企业核心运营', href: '/products/erp', badge: '旗舰' },
|
||||
{ icon: <Users className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'CRM 客户管理', description: '从线索到回款的全生命周期客户关系管理', href: '/products/crm', badge: '旗舰' },
|
||||
{ icon: <LineChart className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'BI 数据平台', description: '让数据说话，从报表到预测辅助决策', href: '/products/bi' },
|
||||
{ icon: <Globe className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'CMS 内容平台', description: '建站、运营、分发一体化内容管理', href: '/products/cms' },
|
||||
{ icon: <Brain className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'AI 智能平台', description: '大模型驱动的企业级 AI 应用与自动化', href: '/products/ai', badge: '新品' },
|
||||
{ icon: <Cloud className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: '协同办公', description: '审批、公文、协作、知识管理一站式平台', href: '/products/oa' },
|
||||
];
|
||||
|
||||
const STRATEGIC_QUESTIONS = [
|
||||
{
|
||||
question: '我们的数字化投入，是否真正带来了业务增长？',
|
||||
description: '许多企业在数字化上投入巨大，却难以量化 ROI。我们帮助您建立可衡量的数字化价值评估体系，让每一分投入都可见、可追踪、可优化。',
|
||||
href: '/services/consulting',
|
||||
},
|
||||
{
|
||||
question: '核心系统如何选型、落地与集成，才能支撑业务持续增长？',
|
||||
description: 'ERP、BI、CRM 等核心系统的评估、实施与无缝集成，确保技术架构稳健可扩展，避免"上线即落后"的困境。',
|
||||
href: '/products',
|
||||
},
|
||||
{
|
||||
question: '数据如何从成本中心转变为真正的企业资产？',
|
||||
description: '数据治理、商业智能分析与信息安全体系，让数据驱动决策而非成为风险。',
|
||||
href: '/solutions',
|
||||
},
|
||||
{
|
||||
question: '面对 AI 浪潮，我们的企业准备好了吗？',
|
||||
description: 'AI 不是选择题，而是必答题。我们从 AI 成熟度评估到场景落地，帮助您找到最适合的 AI 应用路径，避免盲目跟风。',
|
||||
href: '/services/ai',
|
||||
},
|
||||
];
|
||||
|
||||
const CASE_STUDIES = [
|
||||
{
|
||||
industry: '智能制造',
|
||||
title: '某大型制造企业 ERP 全面升级',
|
||||
challenge: '原有系统无法支撑业务增长，数据孤岛严重，生产排程效率低下。',
|
||||
solution: '从选型到全模块上线仅 30 天，打通财务、生产、供应链全链路数据。',
|
||||
context: '原有系统无法支撑业务增长，数据孤岛严重，生产排程效率低下。从选型到全模块上线仅 30 天。',
|
||||
impact: [{ value: '40%', label: '生产效率提升' }, { value: '30天', label: '核心系统上线' }],
|
||||
quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系。',
|
||||
author: 'CTO，某上市制造企业',
|
||||
},
|
||||
{
|
||||
industry: '贸易零售',
|
||||
title: '连锁零售全渠道数字化升级',
|
||||
challenge: '线上线下数据割裂，库存管理混乱，会员体系无法统一。',
|
||||
solution: '打通全渠道数据，重构供应链与库存管理，统一会员运营体系。',
|
||||
context: '线上线下数据割裂，库存管理混乱，会员体系无法统一。打通全渠道数据，重构供应链与库存管理。',
|
||||
impact: [{ value: '25%', label: '营收增长' }, { value: '50%', label: '库存周转优化' }],
|
||||
quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心。',
|
||||
author: 'CEO，某区域零售龙头',
|
||||
},
|
||||
{
|
||||
industry: '医疗健康',
|
||||
title: '三甲医院数据合规与患者服务',
|
||||
challenge: '在满足严格合规要求的同时优化患者服务体验，临床数据与运营数据割裂。',
|
||||
solution: '建立统一数据中台，打通临床与运营数据，构建合规数据治理体系。',
|
||||
context: '在满足严格合规要求的同时优化患者服务体验，打通临床数据与运营数据。',
|
||||
impact: [{ value: '100%', label: '合规达标' }, { value: '60%', label: '患者满意度提升' }],
|
||||
quote: '在医疗数据合规领域，睿新的专业度在行业中非常难得。',
|
||||
author: '信息科主任，某三甲医院',
|
||||
},
|
||||
];
|
||||
|
||||
const INSIGHTS_FEATURED = [
|
||||
{
|
||||
tag: '白皮书',
|
||||
title: '2026 中国企业数字化转型趋势报告',
|
||||
desc: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。',
|
||||
image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80',
|
||||
},
|
||||
{
|
||||
tag: '案例研究',
|
||||
title: '从数据孤岛到智能决策：一家制造企业的三年数字化之路',
|
||||
desc: '深度复盘某上市制造企业如何通过分阶段数字化实现 40% 效率提升。',
|
||||
image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
|
||||
},
|
||||
];
|
||||
|
||||
const INSIGHTS_LIST = [
|
||||
{ tag: '观点', title: 'AI 时代，中小企业如何避免"为了数字化而数字化"', desc: '从投入产出比出发，讨论中小企业在 AI 浪潮中的务实策略。', date: '2026-06-15' },
|
||||
{ tag: '方法论', title: '数字化转型的四个阶段：评估、规划、实施、优化', desc: '我们总结的经过 500+ 项目验证的数字化转型方法论。', date: '2026-06-08' },
|
||||
{ tag: '行业洞察', title: '制造业数字化转型的五大误区', desc: '避开常见陷阱，让数字化投入真正转化为业务价值。', date: '2026-05-28' },
|
||||
];
|
||||
|
||||
const INDUSTRIES = [
|
||||
{ icon: Factory, name: '智能制造', count: '120+ 案例' },
|
||||
{ icon: ShoppingCart, name: '贸易零售', count: '80+ 案例' },
|
||||
{ icon: Building, name: '金融业', count: '60+ 案例' },
|
||||
{ icon: Stethoscope, name: '医疗健康', count: '40+ 案例' },
|
||||
{ icon: Cpu, name: '汽车零部件', count: '45+ 案例' },
|
||||
{ icon: BarChart3, name: '能源化工', count: '35+ 案例' },
|
||||
{ icon: Shield, name: '物流供应链', count: '40+ 案例' },
|
||||
{ icon: GraduationCap, name: '教育', count: '30+ 案例' },
|
||||
];
|
||||
|
||||
const TRUST_STATS = [
|
||||
{ number: '12', unit: '年', label: '行业深耕', desc: '核心团队平均从业经验 12 年以上' },
|
||||
{ number: '500', unit: '+', label: '企业客户', desc: '覆盖制造、零售、医疗等多个行业' },
|
||||
{ number: '98', unit: '%', label: '客户续约率', desc: '年度客户续约率行业领先' },
|
||||
{ number: '150', unit: '+', label: '专业顾问', desc: '技术+业务复合型团队' },
|
||||
{ number: '6', unit: '款', label: '自研产品', desc: '覆盖数据、协同、AI 等核心领域' },
|
||||
{ number: '30', unit: '天', label: '平均交付周期', desc: '敏捷迭代，快速验证业务价值' },
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// Section 1: Hero — Deep Ink Background
|
||||
// ============================================================
|
||||
function HeroSection() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const heroRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: heroRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
|
||||
const scale = useTransform(scrollYProgress, [0, 0.6], [1, 0.95]);
|
||||
const y = useTransform(scrollYProgress, [0, 0.6], [0, 30]);
|
||||
|
||||
const bgOrbY = useTransform(scrollYProgress, [0, 1], [0, 80]);
|
||||
const gridY = useTransform(scrollYProgress, [0, 1], [0, -40]);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={heroRef}
|
||||
className="relative min-h-[100svh] flex items-center overflow-hidden"
|
||||
style={{ background: INK }}
|
||||
>
|
||||
{/* Atmosphere — subtle gradient orbs (parallax: slowest, moves down) */}
|
||||
<motion.div
|
||||
className="absolute inset-0 z-0 pointer-events-none"
|
||||
style={{ y: shouldReduceMotion ? 0 : bgOrbY }}
|
||||
>
|
||||
<div className="absolute w-[600px] md:w-[900px] h-[600px] md:h-[900px] rounded-full blur-[120px] md:blur-[140px] opacity-[0.12]"
|
||||
style={{
|
||||
background: 'radial-gradient(circle, rgba(196,30,58,0.4), transparent 70%)',
|
||||
top: '-30%', right: '-15%',
|
||||
}}
|
||||
/>
|
||||
<div className="absolute w-[400px] md:w-[600px] h-[400px] md:h-[600px] rounded-full blur-[100px] md:blur-[120px] opacity-[0.06]"
|
||||
style={{
|
||||
background: 'radial-gradient(circle, rgba(10,14,20,0.3), transparent 70%)',
|
||||
bottom: '-20%', left: '-10%',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Grid texture (parallax: medium speed, moves up) */}
|
||||
<motion.div
|
||||
className="absolute inset-0 z-[1] pointer-events-none opacity-[0.025]"
|
||||
style={{
|
||||
y: shouldReduceMotion ? 0 : gridY,
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)`,
|
||||
backgroundSize: '60px 60px',
|
||||
maskImage: 'radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 70%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
className="relative z-10 w-full max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 py-32 md:py-40 lg:py-48"
|
||||
style={{ opacity, scale, y }}
|
||||
>
|
||||
<div className="max-w-[720px]">
|
||||
{/* Eyebrow */}
|
||||
<motion.div
|
||||
className="text-[10px] sm:text-[11px] tracking-[4px] sm:tracking-[5px] uppercase font-medium mb-6 md:mb-8"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1, ease: EASE }}
|
||||
>
|
||||
企业数字化转型
|
||||
</motion.div>
|
||||
|
||||
{/* Title */}
|
||||
<motion.h1
|
||||
className="font-sans text-[clamp(36px,10vw,88px)] font-black leading-[1.04] tracking-[-1.5px] sm:tracking-[-2.5px] text-white mb-6 md:mb-8"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.2, ease: EASE }}
|
||||
>
|
||||
数字化转型<br />
|
||||
<span style={{ color: 'var(--color-brand)' }}>成功率提升 3 倍</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* Subtitle — answer-first: quantified results */}
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-x-6 gap-y-2 mb-8 md:mb-10"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.35, ease: EASE }}
|
||||
>
|
||||
<span className="text-[14px] sm:text-base font-medium" style={{ color: 'rgba(255,255,255,0.6)' }}>
|
||||
<span style={{ color: 'var(--color-brand)', fontWeight: 700 }}>500+</span> 企业验证
|
||||
</span>
|
||||
<span className="text-[14px] sm:text-base font-medium" style={{ color: 'rgba(255,255,255,0.6)' }}>
|
||||
<span style={{ color: 'var(--color-brand)', fontWeight: 700 }}>2.8x</span> 平均 ROI 提升
|
||||
</span>
|
||||
<span className="text-[14px] sm:text-base font-medium" style={{ color: 'rgba(255,255,255,0.6)' }}>
|
||||
<span style={{ color: 'var(--color-brand)', fontWeight: 700 }}>40%</span> 交付周期缩短
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Strategic question */}
|
||||
<motion.p
|
||||
className="font-sans text-[14px] sm:text-base italic mb-10 md:mb-12"
|
||||
style={{ color: 'rgba(255,255,255,0.4)' }}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.45, ease: EASE }}
|
||||
>
|
||||
您的企业，准备好迎接下一阶段的增长了吗？
|
||||
</motion.p>
|
||||
|
||||
{/* CTAs */}
|
||||
<motion.div
|
||||
className="flex flex-col sm:flex-row gap-3 sm:gap-5 items-start sm:items-center mb-12 md:mb-20"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.55, ease: EASE }}
|
||||
>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="min-h-[44px] min-w-[44px] active:scale-[0.98] transition-transform duration-150 inline-flex items-center justify-center gap-2.5 px-6 sm:px-8 py-3.5 text-sm font-medium text-white rounded-sm transition-all duration-300 hover:-translate-y-0.5"
|
||||
style={{ background: 'var(--color-brand)' }}
|
||||
>
|
||||
预约咨询
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</StaticLink>
|
||||
<StaticLink
|
||||
href="/products"
|
||||
className="min-h-[44px] inline-flex items-center gap-2 text-sm font-normal transition-all duration-300 border-b hover:border-white/25"
|
||||
style={{ color: 'rgba(255,255,255,0.45)', borderColor: 'rgba(255,255,255,0.1)', padding: '12px 0' }}
|
||||
>
|
||||
探索产品矩阵
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
|
||||
{/* Metrics row */}
|
||||
<motion.div
|
||||
className="flex gap-8 md:gap-16 flex-wrap"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.7, ease: EASE }}
|
||||
>
|
||||
{[
|
||||
{ value: '12', unit: '', label: '年行业深耕' },
|
||||
{ value: '500', unit: '+', label: '企业客户信任' },
|
||||
{ value: '98', unit: '%', label: '客户年度续约率' },
|
||||
].map(item => (
|
||||
<div key={item.label} className="flex flex-col">
|
||||
<div className="font-sans tabular-nums text-[28px] sm:text-[32px] md:text-[36px] font-bold text-white leading-none mb-1 tracking-[-1px]">
|
||||
{item.value}
|
||||
<span style={{ color: 'var(--color-brand)', fontSize: '0.5em' }}>{item.unit}</span>
|
||||
</div>
|
||||
<div className="text-[10px] sm:text-[11px] tracking-[1px] text-white/25">
|
||||
{item.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Scroll indicator — desktop only */}
|
||||
<div className="absolute bottom-8 md:bottom-10 left-1/2 -translate-x-1/2 z-10 hidden md:flex flex-col items-center gap-2.5">
|
||||
<div className="w-px h-10 relative overflow-hidden bg-white/[0.06]">
|
||||
<motion.div
|
||||
className="absolute top-0 left-0 w-full h-[20%] bg-white/20"
|
||||
animate={{ y: [0, 30, 0] }}
|
||||
transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[9px] tracking-[4px] text-white/10">SCROLL</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Section 2: Product Matrix — Paper White Background
|
||||
// ============================================================
|
||||
function ProductMatrixSection() {
|
||||
return (
|
||||
<section className={SECTION} style={{ background: 'var(--color-bg-primary)' }}>
|
||||
<div className={CONTAINER}>
|
||||
<SectionHeader
|
||||
label="Products"
|
||||
title="覆盖数字化"
|
||||
highlight="全生命周期"
|
||||
desc="6 款自研产品，支撑企业核心业务场景"
|
||||
/>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
{PRODUCTS.map((product, i) => (
|
||||
<ScrollReveal key={i} delay={i * 0.06}>
|
||||
<ProductCard {...product} />
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Section 3: Strategic Questions — Cream Background [Porsche-style]
|
||||
// ============================================================
|
||||
function StrategicQuestionsSection() {
|
||||
return (
|
||||
<section className={SECTION} style={{ background: CREAM }}>
|
||||
<div className={CONTAINER}>
|
||||
<SectionHeader
|
||||
label="Strategic Questions"
|
||||
title="先问对问题"
|
||||
highlight="再做对事"
|
||||
desc="在启动任何数字化项目之前，先找到正确的方向"
|
||||
/>
|
||||
<div>
|
||||
{STRATEGIC_QUESTIONS.map((item, i) => (
|
||||
<ScrollReveal key={i} delay={i * 0.08}>
|
||||
<QuestionCard
|
||||
question={item.question}
|
||||
description={item.description}
|
||||
href={item.href}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Section 4: Client Results — Deep Ink Background [Bain-style]
|
||||
// ============================================================
|
||||
function CaseStudiesSection() {
|
||||
return (
|
||||
<section className={SECTION} style={{ background: INK }}>
|
||||
<div className={CONTAINER}>
|
||||
<SectionHeader
|
||||
label="Client Results"
|
||||
title="500+ 企业的"
|
||||
highlight="增长实践"
|
||||
desc="不以项目上线为终点，以客户业务改善为衡量标准"
|
||||
light
|
||||
/>
|
||||
<div className="grid lg:grid-cols-3 gap-px rounded-sm overflow-hidden"
|
||||
style={{ background: 'rgba(255,255,255,0.03)' }}>
|
||||
{CASE_STUDIES.map((cs, i) => (
|
||||
<ScrollReveal key={i} delay={i * 0.1}>
|
||||
<CaseCard {...cs} />
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="text-center mt-8 md:mt-12">
|
||||
<StaticLink
|
||||
href="/solutions"
|
||||
className="min-h-[44px] inline-flex items-center gap-2 text-[13px] font-medium transition-colors duration-300 text-white/50 hover:text-white group"
|
||||
>
|
||||
查看全部案例
|
||||
<ArrowRight className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Section 5: Insights — Paper White Background [Accenture-style]
|
||||
// ============================================================
|
||||
function InsightsSection() {
|
||||
return (
|
||||
<section className={SECTION} style={{ background: 'var(--color-bg-primary)' }}>
|
||||
<div className={CONTAINER}>
|
||||
<SectionHeader
|
||||
label="Insights"
|
||||
title="把握数字化"
|
||||
highlight="前沿趋势"
|
||||
desc="基于 500+ 项目实践的研究成果与行业观点"
|
||||
/>
|
||||
|
||||
{/* Featured insights — 2 large cards */}
|
||||
<div className="grid md:grid-cols-2 gap-4 sm:gap-6 mb-6 md:mb-8">
|
||||
{INSIGHTS_FEATURED.map((insight, i) => (
|
||||
<ScrollReveal key={i} delay={i * 0.1}>
|
||||
<InsightCard featured {...insight} />
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Secondary insights — 3 small cards */}
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-px rounded-sm overflow-hidden"
|
||||
style={{ background: 'var(--color-border-primary)' }}>
|
||||
{INSIGHTS_LIST.map((insight, i) => (
|
||||
<ScrollReveal key={i} delay={i * 0.06}>
|
||||
<InsightCard {...insight} />
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Section 6: Industry Selector — Paper White Background
|
||||
// ============================================================
|
||||
function IndustrySelectorSection() {
|
||||
return (
|
||||
<section className={SECTION} style={{ background: CREAM }}>
|
||||
<div className={CONTAINER}>
|
||||
<SectionHeader
|
||||
label="Industries"
|
||||
title="8 大行业"
|
||||
highlight="深度实践"
|
||||
desc="深入行业场景，理解业务逻辑，提供真正落地的解决方案"
|
||||
/>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="font-sans text-[18px] sm:text-[20px] md:text-[22px] font-semibold mb-8 md:mb-10 leading-relaxed text-[var(--color-text-primary)]">
|
||||
选择您的行业，<span style={{ color: 'var(--color-brand)' }}>查看相关案例与解决方案</span>
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.15}>
|
||||
<IndustryGrid items={INDUSTRIES} />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Section 7: Trust Proof — Paper White Background
|
||||
// ============================================================
|
||||
function TrustSection() {
|
||||
return (
|
||||
<section className={SECTION} style={{ background: 'var(--color-bg-primary)' }}>
|
||||
<div className={CONTAINER}>
|
||||
<SectionHeader
|
||||
label="Trust"
|
||||
title="98% 客户"
|
||||
highlight="续约率"
|
||||
desc="数字会说话，信任是合作的基础"
|
||||
/>
|
||||
<StatsBar items={TRUST_STATS} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Main Export
|
||||
// ============================================================
|
||||
export default function HomeContent() {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<ScrollProgress />
|
||||
<HeroSection />
|
||||
<ProductMatrixSection />
|
||||
<StrategicQuestionsSection />
|
||||
<CaseStudiesSection />
|
||||
<InsightsSection />
|
||||
<IndustrySelectorSection />
|
||||
<TrustSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,297 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo, ChangeEvent } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Search, Calendar, ArrowRight, Newspaper, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { NEWS, COMPANY_INFO } from '@/lib/constants';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
const categories = ['全部', '公司新闻', '研发动态'];
|
||||
const ITEMS_PER_PAGE = 9;
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NewsCard({ newsItem, index }: { newsItem: typeof NEWS[0]; index: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.08, ease: EASE_OUT }}
|
||||
>
|
||||
<a
|
||||
href={`/news/${newsItem.id}`}
|
||||
className="group relative block border border-white/10 hover:border-brand/40 bg-ink transition-all duration-600 hover:-translate-y-2 overflow-hidden h-full"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
{newsItem.image ? (
|
||||
<div className="aspect-video bg-ink-light overflow-hidden">
|
||||
<img
|
||||
src={newsItem.image}
|
||||
alt={newsItem.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-gradient-to-br from-brand/10 to-ink-light flex items-center justify-center">
|
||||
<Newspaper className="w-12 h-12 text-brand/30" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-6 lg:p-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Badge variant="outline" className="text-xs border-brand/30 text-brand">
|
||||
{newsItem.category}
|
||||
</Badge>
|
||||
<div className="flex items-center gap-1.5 text-xs text-white/50">
|
||||
<Calendar className="w-3.5 h-3.5" />
|
||||
{newsItem.date}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-semibold text-white mb-3 line-clamp-2 group-hover:text-brand transition-colors duration-300 leading-snug">
|
||||
{newsItem.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-white/50 line-clamp-3 mb-5 leading-relaxed">
|
||||
{newsItem.excerpt}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-brand text-sm font-medium">
|
||||
阅读全文
|
||||
<ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NewsContentV1() {
|
||||
const [selectedCategory, setSelectedCategory] = useState('全部');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const filteredNews = useMemo(() => {
|
||||
return NEWS.filter((newsItem) => {
|
||||
const matchesCategory = selectedCategory === '全部' || newsItem.category === selectedCategory;
|
||||
const matchesSearch =
|
||||
newsItem.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
newsItem.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
}, [selectedCategory, searchQuery]);
|
||||
|
||||
const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
|
||||
const paginatedNews = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
return filteredNews.slice(startIndex, startIndex + ITEMS_PER_PAGE);
|
||||
}, [filteredNews, currentPage]);
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const handleCategoryChange = (category: string) => {
|
||||
setSelectedCategory(category);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-24 lg:pt-40 lg:pb-32 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/50 to-ink pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>News & Insights</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<h1 className="mt-8 text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1]">
|
||||
新闻与
|
||||
<span className="block mt-2 text-brand">洞察</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<p className="mt-8 text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed">
|
||||
{COMPANY_INFO.displayName}最新动态、产品更新与行业洞察。了解数字化趋势，把握技术脉搏。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Filter + News List Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
{/* Filters */}
|
||||
<ScrollReveal className="mb-16 space-y-6">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{categories.map((category) => (
|
||||
<Button
|
||||
key={category}
|
||||
variant={selectedCategory === category ? 'primary' : 'outline'}
|
||||
onClick={() => handleCategoryChange(category)}
|
||||
>
|
||||
{category}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-md">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-white/40 w-5 h-5 pointer-events-none" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="搜索新闻..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearchChange}
|
||||
className="pl-12 h-12 bg-ink border-white/10 text-white placeholder:text-white/30 focus:border-brand/50"
|
||||
/>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* News Grid */}
|
||||
{paginatedNews.length === 0 ? (
|
||||
<ScrollReveal>
|
||||
<div className="text-center py-24">
|
||||
<Newspaper className="w-16 h-16 text-white/20 mx-auto mb-6" />
|
||||
<p className="text-xl text-white/50">没有找到相关新闻</p>
|
||||
<p className="mt-2 text-white/30">试试其他关键词或分类</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
) : (
|
||||
<>
|
||||
<StaggerReveal
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{paginatedNews.map((newsItem, index) => (
|
||||
<NewsCard key={newsItem.id} newsItem={newsItem} index={index} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<ScrollReveal>
|
||||
<div className="flex justify-center items-center gap-2 mt-16">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
variant={currentPage === page ? 'primary' : 'outline'}
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(page)}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get in Touch
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
想了解更多？
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-white/60 leading-relaxed mb-12">
|
||||
无论您有合作意向还是想探讨技术趋势，我们都欢迎与您交流。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
联系我们
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/about">了解公司</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Calendar, ArrowLeft, Newspaper, ArrowRight } from 'lucide-react';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RelatedNewsCard({ news }: { news: typeof NEWS[0] }) {
|
||||
return (
|
||||
<a
|
||||
href={`/news/${news.id}`}
|
||||
className="group relative block border border-white/10 hover:border-brand/40 bg-ink transition-all duration-600 hover:-translate-y-2 overflow-hidden h-full"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="aspect-video bg-ink-light overflow-hidden">
|
||||
{news.image ? (
|
||||
<img
|
||||
src={news.image}
|
||||
alt={news.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-brand/10 to-ink-light flex items-center justify-center">
|
||||
<Newspaper className="w-10 h-10 text-brand/30" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-5">
|
||||
<Badge variant="outline" className="mb-3 text-xs border-brand/30 text-brand">
|
||||
{news.category}
|
||||
</Badge>
|
||||
<h3 className="text-base font-semibold text-white mb-2 line-clamp-2 group-hover:text-brand transition-colors duration-300 leading-snug">
|
||||
{news.title}
|
||||
</h3>
|
||||
<p className="text-sm text-white/50 line-clamp-2 leading-relaxed">{news.excerpt}</p>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
interface NewsDetailContentV1Props {
|
||||
news: typeof NEWS[0];
|
||||
}
|
||||
|
||||
export default function NewsDetailContentV1({ news }: NewsDetailContentV1Props) {
|
||||
const relatedNews = NEWS
|
||||
.filter((n) => n.id !== news.id && n.category === news.category)
|
||||
.slice(0, 3);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-16 lg:pt-40 lg:pb-20 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/50 to-ink pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<nav className="flex items-center gap-2 text-sm text-white/50 mb-10">
|
||||
<a href="/news" className="hover:text-brand transition-colors duration-300">
|
||||
新闻动态
|
||||
</a>
|
||||
<span>/</span>
|
||||
<span className="text-white/80 line-clamp-1">{news.title}</span>
|
||||
</nav>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} className="max-w-4xl">
|
||||
<Badge variant="outline" className="mb-6 border-brand/30 text-brand text-sm">
|
||||
{news.category}
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
|
||||
{news.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center gap-6 mt-8 text-white/50 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{news.date}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 h-px bg-gradient-to-r from-brand/50 via-white/10 to-transparent" />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Article Body Section */}
|
||||
<section className="relative pb-24 lg:pb-32 overflow-hidden bg-ink">
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="max-w-4xl mx-auto">
|
||||
{/* Featured Image */}
|
||||
{news.image ? (
|
||||
<div className="aspect-video overflow-hidden mb-12 border border-white/10">
|
||||
<img
|
||||
src={news.image}
|
||||
alt={news.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-gradient-to-br from-brand/10 to-ink-light mb-12 flex items-center justify-center border border-white/10">
|
||||
<Newspaper className="w-20 h-20 text-brand/20" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Excerpt */}
|
||||
<div className="mb-12 p-8 border-t-2 border-brand bg-brand/[0.04]">
|
||||
<p className="text-lg text-white/80 leading-relaxed italic">
|
||||
{news.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Article Content */}
|
||||
<div className="prose prose-invert max-w-none">
|
||||
<div className="text-white/80 text-base sm:text-lg leading-[1.9] whitespace-pre-line">
|
||||
{news.content}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Related News */}
|
||||
{relatedNews.length > 0 && (
|
||||
<div className="mt-24 pt-20 border-t border-white/10">
|
||||
<ScrollReveal className="mb-16">
|
||||
<SectionLabel>Related News</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight leading-tight">
|
||||
相关新闻
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<div className="grid md:grid-cols-3 gap-6 md:gap-8">
|
||||
{relatedNews.map((related) => (
|
||||
<RelatedNewsCard key={related.id} news={related} />
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<ScrollReveal>
|
||||
<div className="mt-20 flex flex-wrap justify-center gap-4">
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="/news">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回新闻列表
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Calendar, ArrowLeft, Newspaper, ArrowRight } from 'lucide-react';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
function RelatedNewsCard({ news, index }: { news: typeof NEWS[0]; index: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1, ease: EASE_OUT }}
|
||||
>
|
||||
<a
|
||||
href={`/news/${news.id}`}
|
||||
className="group relative block border border-border-primary hover:border-brand/30 bg-white transition-all duration-500 hover:-translate-y-2 overflow-hidden h-full"
|
||||
>
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />
|
||||
|
||||
<div className="aspect-video bg-bg-secondary overflow-hidden">
|
||||
{news.image ? (
|
||||
<img
|
||||
src={news.image}
|
||||
alt={news.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-brand/[0.08] to-bg-secondary flex items-center justify-center">
|
||||
<Newspaper className="w-10 h-10 text-brand/30" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-5 sm:p-6">
|
||||
<Badge variant="outline" className="mb-3 text-xs border-brand/30 text-brand">
|
||||
{news.category}
|
||||
</Badge>
|
||||
<h3 className="text-base font-semibold text-ink mb-2 line-clamp-2 group-hover:text-brand transition-colors duration-300 leading-snug">
|
||||
{news.title}
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary line-clamp-2 leading-relaxed">{news.excerpt}</p>
|
||||
</div>
|
||||
</a>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface NewsDetailContentV2Props {
|
||||
news: typeof NEWS[0];
|
||||
}
|
||||
|
||||
export default function NewsDetailContentV2({ news }: NewsDetailContentV2Props) {
|
||||
const relatedNews = NEWS
|
||||
.filter((n) => n.id !== news.id && n.category === news.category)
|
||||
.slice(0, 3);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-ink overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-28 sm:pt-32 md:pt-40 pb-16 sm:pb-20 md:pb-24 overflow-hidden">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<nav className="flex items-center gap-2 text-sm text-text-muted mb-8 sm:mb-10">
|
||||
<a href="/news" className="hover:text-brand transition-colors duration-300">
|
||||
新闻动态
|
||||
</a>
|
||||
<span>/</span>
|
||||
<span className="text-text-secondary line-clamp-1">{news.title}</span>
|
||||
</nav>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} className="max-w-4xl">
|
||||
<Badge variant="outline" className="mb-6 border-brand/30 text-brand text-sm">
|
||||
{news.category}
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
|
||||
{news.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center gap-6 mt-8 text-text-muted text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{news.date}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 h-px bg-gradient-to-r from-brand/50 via-border-primary to-transparent" />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Article Body Section */}
|
||||
<section className="relative pb-20 sm:pb-28 md:pb-36 overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="max-w-4xl mx-auto">
|
||||
{/* Featured Image */}
|
||||
{news.image ? (
|
||||
<div className="aspect-video overflow-hidden mb-10 sm:mb-12 border border-border-primary">
|
||||
<img
|
||||
src={news.image}
|
||||
alt={news.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-gradient-to-br from-brand/[0.08] to-bg-secondary mb-10 sm:mb-12 flex items-center justify-center border border-border-primary">
|
||||
<Newspaper className="w-20 h-20 text-brand/20" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Excerpt */}
|
||||
<div className="mb-10 sm:mb-12 p-6 sm:p-8 border-t-2 border-brand bg-brand/[0.04]">
|
||||
<p className="text-base sm:text-lg text-text-secondary leading-relaxed italic">
|
||||
{news.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Article Content */}
|
||||
<div className="text-text-secondary text-base sm:text-lg leading-[1.9] whitespace-pre-line">
|
||||
{news.content}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Related News */}
|
||||
{relatedNews.length > 0 && (
|
||||
<div className="mt-20 sm:mt-24 pt-16 sm:pt-20 border-t border-border-primary">
|
||||
<ScrollReveal className="mb-12 sm:mb-16">
|
||||
<SectionLabel>Related News</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight leading-tight">
|
||||
相关新闻
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 sm:gap-8">
|
||||
{relatedNews.map((related, idx) => (
|
||||
<RelatedNewsCard key={related.id} news={related} index={idx} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<ScrollReveal>
|
||||
<div className="mt-16 sm:mt-20 flex flex-col sm:flex-row justify-center gap-4">
|
||||
<a
|
||||
href="/news"
|
||||
className="inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
返回新闻列表
|
||||
</a>
|
||||
<a
|
||||
href="/contact"
|
||||
className="group inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
|
||||
>
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,547 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Package, Check, Settings, BarChart3, Users, FileText, Cpu, Shield, TrendingUp } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const PRODUCT_ICONS: Record<string, React.ReactNode> = {
|
||||
'睿新ERP管理系统': <Package className="w-8 h-8" />,
|
||||
'睿视商业智能分析平台': <BarChart3 className="w-8 h-8" />,
|
||||
'睿新客户关系管理系统': <Users className="w-8 h-8" />,
|
||||
'睿新协同办公平台': <Settings className="w-8 h-8" />,
|
||||
'睿新内容管理系统': <FileText className="w-8 h-8" />,
|
||||
'睿新供应链数字化平台': <Cpu className="w-8 h-8" />,
|
||||
};
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '300px 300px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface DetailHeroProps {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
function DetailHero({ product }: DetailHeroProps) {
|
||||
const productIcon = PRODUCT_ICONS[product.title] || <Package className="w-8 h-8" />;
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[80vh] flex items-center overflow-hidden bg-ink pt-24">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[50%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 20%, rgba(196, 30, 58, 0.08) 100%)',
|
||||
clipPath: 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-32 right-[15%] w-[400px] h-[400px] rounded-full opacity-10 blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10 w-full py-24 lg:py-32">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="flex items-center gap-4 mb-8"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
{productIcon}
|
||||
</div>
|
||||
<div>
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/50">
|
||||
{product.category}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<span className="px-2.5 py-1 text-xs text-dark-text-muted border border-white/10">
|
||||
{product.status}
|
||||
</span>
|
||||
<div className="flex gap-1.5">
|
||||
{product.tags.slice(0, 2).map(tag => (
|
||||
<span key={tag} className="px-2.5 py-1 text-xs text-dark-text-muted border border-white/10">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-tight tracking-tighter mb-8 max-w-4xl"
|
||||
>
|
||||
{product.title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.3, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-3xl leading-relaxed mb-8"
|
||||
>
|
||||
{product.description}
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.4, ease: EASE_OUT }}
|
||||
className="text-lg text-dark-text-muted max-w-3xl leading-relaxed mb-12"
|
||||
>
|
||||
{product.overview}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.55, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约体验
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">查看更多产品</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface FeaturesSectionProps {
|
||||
features: string[];
|
||||
}
|
||||
|
||||
function FeaturesSection({ features }: FeaturesSectionProps) {
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Core Features
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
核心功能
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{features.map((feature, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group relative p-8 border border-white/10 bg-ink hover:border-brand/40 transition-all duration-500 hover:-translate-y-1"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="w-10 h-10 rounded-xl bg-brand-soft flex items-center justify-center text-brand shrink-0 mt-0.5">
|
||||
<Check className="w-5 h-5" />
|
||||
</div>
|
||||
<p className="text-lg text-white font-medium leading-relaxed">{feature}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface BenefitsSectionProps {
|
||||
benefits: string[];
|
||||
}
|
||||
|
||||
function BenefitsSection({ benefits }: BenefitsSectionProps) {
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-start">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>Benefits</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
产品价值
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary text-lg leading-relaxed">
|
||||
每一项功能都经过精心设计，为您的业务创造实实在在的价值
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="space-y-5">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{benefits.map((benefit, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group relative p-8 border border-white/10 bg-ink-light hover:border-brand/30 transition-all duration-500"
|
||||
whileHover={{ x: 12 }}
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-brand-soft/50 flex items-center justify-center text-brand shrink-0">
|
||||
<TrendingUp className="w-6 h-6" />
|
||||
</div>
|
||||
<p className="text-xl text-white font-semibold leading-relaxed">{benefit}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProcessSectionProps {
|
||||
process: string[];
|
||||
}
|
||||
|
||||
function ProcessSection({ process }: ProcessSectionProps) {
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Implementation
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
实施流程
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary text-lg mt-6 leading-relaxed">
|
||||
标准化的实施流程，确保项目按时高质量交付
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent hidden lg:block" />
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<StaggerReveal staggerDelay={0.12} delayChildren={0.05}>
|
||||
{process.map((step, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group relative text-center"
|
||||
whileHover={{ y: -8 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
>
|
||||
<div className="relative z-10 w-20 h-20 rounded-3xl bg-ink border border-white/10 group-hover:border-brand/50 flex items-center justify-center mx-auto mb-8 transition-all duration-500">
|
||||
<span className="text-3xl font-bold text-brand">{idx + 1}</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border border-white/10 bg-ink group-hover:border-brand/30 transition-all duration-500">
|
||||
<p className="text-lg text-white font-medium leading-relaxed">{step}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface DataProofsSectionProps {
|
||||
dataProofs: Product['dataProofs'];
|
||||
}
|
||||
|
||||
function DataProofsSection({ dataProofs }: DataProofsSectionProps) {
|
||||
if (!dataProofs || dataProofs.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Proven Results
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
数据证明
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<StaggerReveal staggerDelay={0.12} delayChildren={0.05}>
|
||||
{dataProofs.map((proof, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group relative p-10 text-center border border-white/10 bg-ink-light hover:border-brand/40 transition-all duration-500 hover:-translate-y-2"
|
||||
>
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-center" />
|
||||
|
||||
<div className="text-6xl lg:text-7xl font-bold text-brand mb-4 tracking-tighter">
|
||||
{proof.value}
|
||||
</div>
|
||||
<div className="text-xl font-bold text-white mb-3">{proof.metric}</div>
|
||||
<p className="text-dark-text-muted leading-relaxed">{proof.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CaseStudiesSectionProps {
|
||||
caseStudies: Product['caseStudies'];
|
||||
}
|
||||
|
||||
function CaseStudiesSection({ caseStudies }: CaseStudiesSectionProps) {
|
||||
if (!caseStudies || caseStudies.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Case Studies
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
客户案例
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{caseStudies.map((study) => (
|
||||
<div
|
||||
key={study.client}
|
||||
className="group relative block overflow-hidden border border-white/10 hover:border-brand/40 bg-ink transition-all duration-500 hover:-translate-y-2"
|
||||
>
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-ink to-ink-light relative overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-6xl font-bold text-white/[0.08]">
|
||||
{study.client.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute top-5 left-5">
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/80 backdrop-blur-sm">
|
||||
{study.industry}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<h3 className="text-xl font-bold text-white mb-3 group-hover:translate-x-2 transition-transform duration-500">
|
||||
{study.client}
|
||||
</h3>
|
||||
<p className="text-dark-text-secondary text-sm leading-relaxed mb-6">
|
||||
{study.challenge}
|
||||
</p>
|
||||
<div className="pt-6 border-t border-white/10">
|
||||
<div className="text-2xl font-bold text-brand mb-1">{study.result}</div>
|
||||
<div className="text-xs text-dark-text-muted">核心成果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CertificationsSectionProps {
|
||||
certifications: Product['certifications'];
|
||||
}
|
||||
|
||||
function CertificationsSection({ certifications }: CertificationsSectionProps) {
|
||||
if (!certifications || certifications.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Certifications
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white tracking-tight">
|
||||
资质认证
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-8">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{certifications.map((cert, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group flex items-center gap-4 px-8 py-5 border border-white/10 bg-ink-light hover:border-brand/30 transition-all duration-500"
|
||||
whileHover={{ y: -4 }}
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Shield className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-bold">{cert.name}</div>
|
||||
<div className="text-sm text-dark-text-muted">{cert.issuer}</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CTASectionProps {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
function CTASection({ product }: CTASectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
探索 {product.title} 的更多可能
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary leading-relaxed mb-12 max-w-2xl mx-auto">
|
||||
联系我们获取专属方案，了解如何与其他产品协同使用
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约演示
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">查看更多产品</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProductDetailContentV1Props {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
export default function ProductDetailContentV1({ product }: ProductDetailContentV1Props) {
|
||||
return (
|
||||
<main>
|
||||
<DetailHero product={product} />
|
||||
<FeaturesSection features={product.features} />
|
||||
<BenefitsSection benefits={product.benefits} />
|
||||
<ProcessSection process={product.process} />
|
||||
<DataProofsSection dataProofs={product.dataProofs} />
|
||||
<CaseStudiesSection caseStudies={product.caseStudies} />
|
||||
<CertificationsSection certifications={product.certifications} />
|
||||
<CTASection product={product} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,468 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Package, Check, Settings, BarChart3, Users, FileText, Cpu, Shield, TrendingUp } from 'lucide-react';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
import { MethodologyFramework, TechStackShowcase, FAQSection, DataProofSection } from '@/components/content/sections';
|
||||
|
||||
const PRODUCT_ICONS: Record<string, React.ReactNode> = {
|
||||
'睿新ERP管理系统': <Package className="w-8 h-8" />,
|
||||
'睿视商业智能分析平台': <BarChart3 className="w-8 h-8" />,
|
||||
'睿新客户关系管理系统': <Users className="w-8 h-8" />,
|
||||
'睿新协同办公平台': <Settings className="w-8 h-8" />,
|
||||
'睿新内容管理系统': <FileText className="w-8 h-8" />,
|
||||
'睿新供应链数字化平台': <Cpu className="w-8 h-8" />,
|
||||
};
|
||||
|
||||
interface DetailHeroProps {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
function DetailHero({ product }: DetailHeroProps) {
|
||||
const productIcon = PRODUCT_ICONS[product.title] || <Package className="w-8 h-8" />;
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[80vh] flex items-center overflow-hidden bg-white pt-24">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-20 sm:py-24 md:py-28 lg:py-32">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="flex items-center gap-4 mb-8"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
{productIcon}
|
||||
</div>
|
||||
<div>
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/50">
|
||||
{product.category}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<span className="px-2.5 py-1 text-xs text-text-muted border border-border-primary">
|
||||
{product.status}
|
||||
</span>
|
||||
<div className="flex gap-1.5">
|
||||
{product.tags.slice(0, 2).map(tag => (
|
||||
<span key={tag} className="px-2.5 py-1 text-xs text-text-muted border border-border-primary">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-ink leading-tight tracking-tighter mb-6 sm:mb-8 max-w-4xl"
|
||||
>
|
||||
{product.title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.3, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-text-secondary max-w-3xl leading-relaxed mb-8"
|
||||
>
|
||||
{product.description}
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.4, ease: EASE_OUT }}
|
||||
className="text-lg text-text-muted max-w-3xl leading-relaxed mb-12"
|
||||
>
|
||||
{product.overview}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.55, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约体验
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">查看更多产品</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface FeaturesSectionProps {
|
||||
features: string[];
|
||||
}
|
||||
|
||||
function FeaturesSection({ features }: FeaturesSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Core Features
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
核心功能
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{features.map((feature, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group relative p-8 bg-white hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top bg-brand" />
|
||||
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="w-10 h-10 rounded-xl bg-brand-soft flex items-center justify-center text-brand shrink-0 mt-0.5">
|
||||
<Check className="w-5 h-5" />
|
||||
</div>
|
||||
<p className="text-lg text-ink font-medium leading-relaxed">{feature}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface BenefitsSectionProps {
|
||||
benefits: string[];
|
||||
}
|
||||
|
||||
function BenefitsSection({ benefits }: BenefitsSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-start">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>Benefits</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-8">
|
||||
产品价值
|
||||
</h2>
|
||||
<p className="text-text-secondary text-lg leading-relaxed">
|
||||
每一项功能都经过精心设计，为您的业务创造实实在在的价值
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="space-y-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{benefits.map((benefit, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group relative p-8 bg-white hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-brand-soft/50 flex items-center justify-center text-brand shrink-0">
|
||||
<TrendingUp className="w-6 h-6" />
|
||||
</div>
|
||||
<p className="text-xl text-ink font-semibold leading-relaxed">{benefit}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProcessSectionProps {
|
||||
process: string[];
|
||||
}
|
||||
|
||||
function ProcessSection({ process }: ProcessSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Implementation
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
实施流程
|
||||
</h2>
|
||||
<p className="text-text-secondary text-lg mt-6 leading-relaxed">
|
||||
标准化的实施流程，确保项目按时高质量交付
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.12} delayChildren={0.05}>
|
||||
{process.map((step, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group relative text-center p-8 bg-white hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="relative z-10 w-20 h-20 rounded-3xl bg-bg-secondary border border-border-primary group-hover:border-brand/50 flex items-center justify-center mx-auto mb-8 transition-all duration-500">
|
||||
<span className="text-3xl font-bold text-brand">{idx + 1}</span>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-ink font-medium leading-relaxed">{step}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CaseStudiesSectionProps {
|
||||
caseStudies: Product['caseStudies'];
|
||||
}
|
||||
|
||||
function CaseStudiesSection({ caseStudies }: CaseStudiesSectionProps) {
|
||||
if (!caseStudies || caseStudies.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Case Studies
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
客户案例
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{caseStudies.map((study) => (
|
||||
<div
|
||||
key={study.client}
|
||||
className="group relative block overflow-hidden bg-white transition-all duration-500 hover:bg-bg-secondary"
|
||||
>
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-bg-secondary to-bg-tertiary relative overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-6xl font-bold text-text-muted/10">
|
||||
{study.client.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute top-5 left-5">
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/80 backdrop-blur-sm">
|
||||
{study.industry}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<h3 className="text-xl font-bold text-ink mb-3 group-hover:translate-x-2 transition-transform duration-500">
|
||||
{study.client}
|
||||
</h3>
|
||||
<p className="text-text-secondary text-sm leading-relaxed mb-6">
|
||||
{study.challenge}
|
||||
</p>
|
||||
<div className="pt-6 border-t border-border-primary">
|
||||
<div className="text-2xl font-bold text-brand mb-1">{study.result}</div>
|
||||
<div className="text-xs text-text-muted">核心成果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CertificationsSectionProps {
|
||||
certifications: Product['certifications'];
|
||||
}
|
||||
|
||||
function CertificationsSection({ certifications }: CertificationsSectionProps) {
|
||||
if (!certifications || certifications.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-16 sm:py-20 md:py-24 lg:py-32 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Certifications
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-ink tracking-tight">
|
||||
资质认证
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{certifications.map((cert, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group flex items-center gap-4 px-8 py-5 bg-white hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Shield className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-ink font-bold">{cert.name}</div>
|
||||
<div className="text-sm text-text-muted">{cert.issuer}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CTASectionProps {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
function CTASection({ product }: CTASectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-ink tracking-tight leading-tight mb-8">
|
||||
探索 {product.title} 的<br />
|
||||
<span className="text-brand">更多可能</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
联系我们获取专属方案，了解如何与其他产品协同使用
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约演示
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">查看更多产品</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProductDetailContentV2Props {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
export default function ProductDetailContentV2({ product }: ProductDetailContentV2Props) {
|
||||
return (
|
||||
<main>
|
||||
<DetailHero product={product} />
|
||||
<FeaturesSection features={product.features} />
|
||||
{product.methodology && product.methodology.length > 0 && (
|
||||
<MethodologyFramework
|
||||
title="产品方法论"
|
||||
subtitle="经过实战验证的产品设计理念与实施框架"
|
||||
layers={product.methodology}
|
||||
/>
|
||||
)}
|
||||
<BenefitsSection benefits={product.benefits} />
|
||||
<ProcessSection process={product.process} />
|
||||
{product.techStack && product.techStack.length > 0 && (
|
||||
<TechStackShowcase
|
||||
title="技术架构与集成"
|
||||
subtitle="开放、标准、可扩展的技术架构"
|
||||
categories={product.techStack}
|
||||
/>
|
||||
)}
|
||||
<DataProofSection
|
||||
title="可衡量的成果"
|
||||
subtitle="用数据说话，每一项指标都源自真实客户案例"
|
||||
metrics={product.dataProofs.map((dp) => ({
|
||||
value: dp.value,
|
||||
label: dp.metric,
|
||||
description: dp.description,
|
||||
}))}
|
||||
/>
|
||||
<CaseStudiesSection caseStudies={product.caseStudies} />
|
||||
<CertificationsSection certifications={product.certifications} />
|
||||
{product.faqs && product.faqs.length > 0 && (
|
||||
<FAQSection
|
||||
title="常见问题"
|
||||
subtitle="关于这款产品，客户最常问的问题"
|
||||
items={product.faqs}
|
||||
/>
|
||||
)}
|
||||
<CTASection product={product} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,428 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Package, Cpu, BarChart3, Users, Settings, FileText } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { PRODUCTS, PRODUCT_CATEGORIES, type Product } from '@/lib/constants/products';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const PRODUCT_ICONS: Record<string, React.ReactNode> = {
|
||||
'睿新ERP管理系统': <Package className="w-7 h-7" />,
|
||||
'睿视商业智能分析平台': <BarChart3 className="w-7 h-7" />,
|
||||
'睿新客户关系管理系统': <Users className="w-7 h-7" />,
|
||||
'睿新协同办公平台': <Settings className="w-7 h-7" />,
|
||||
'睿新内容管理系统': <FileText className="w-7 h-7" />,
|
||||
'睿新供应链数字化平台': <Cpu className="w-7 h-7" />,
|
||||
};
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '300px 300px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
return (
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[45%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 20%, rgba(196, 30, 58, 0.09) 100%)',
|
||||
clipPath: 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-2/5 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-24 right-[20%] w-[400px] h-[400px] rounded-full opacity-15 blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10 w-full py-32 lg:py-40">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.1, ease: EASE_OUT }}
|
||||
className="mb-10"
|
||||
>
|
||||
<SectionLabel>Product Matrix</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 70 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.85] tracking-tighter mb-12"
|
||||
>
|
||||
<div className="block">覆盖企业数字化</div>
|
||||
<div className="block mt-4">
|
||||
<span className="relative">
|
||||
<span className="text-brand">全场景的</span>
|
||||
<motion.span
|
||||
className="absolute -bottom-2 left-0 w-full h-1 bg-brand"
|
||||
style={{ transformOrigin: 'left' }}
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="block mt-4">产品矩阵</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
从数据智能到业务协同，每一款产品都经过实战验证。
|
||||
6 大核心产品互为补充，常以组合形式出现在行业解决方案中。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约产品演示
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/solutions">查看行业方案</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.9, ease: EASE_OUT }}
|
||||
className="grid grid-cols-3 gap-12 mt-24 pt-16 border-t border-white/10 max-w-2xl"
|
||||
>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">6<span className="text-brand">+</span></div>
|
||||
<div className="text-sm text-dark-text-muted">产品线</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">100<span className="text-brand">%</span></div>
|
||||
<div className="text-sm text-dark-text-muted">自研率</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">全<span className="text-brand">栈</span></div>
|
||||
<div className="text-sm text-dark-text-muted">技术覆盖</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function EnterpriseProductsSection() {
|
||||
const enterpriseProducts = PRODUCTS.filter(p => p.categoryId === 'enterprise');
|
||||
const category = PRODUCT_CATEGORIES.find(c => c.id === 'enterprise');
|
||||
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<div className="flex items-center gap-5 mb-8">
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Package className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<SectionLabel>Enterprise Suite</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
企业套装
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-dark-text-secondary text-lg leading-relaxed max-w-2xl">
|
||||
{category?.description}
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
staggerDelay={0.08}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{enterpriseProducts.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SpecializedProductsSection() {
|
||||
const specializedProducts = PRODUCTS.filter(p => p.categoryId === 'specialized');
|
||||
const category = PRODUCT_CATEGORIES.find(c => c.id === 'specialized');
|
||||
|
||||
if (specializedProducts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<div className="flex items-center gap-5 mb-8">
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Cpu className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<SectionLabel>Specialized Products</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
专业产品
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-dark-text-secondary text-lg leading-relaxed max-w-2xl">
|
||||
{category?.description}
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
staggerDelay={0.08}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{specializedProducts.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ProductCard({ product }: { product: Product }) {
|
||||
const productIcon = PRODUCT_ICONS[product.title] || <Package className="w-7 h-7" />;
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/products/${product.id}`}
|
||||
className="group relative block border border-white/10 hover:border-brand/40 bg-ink transition-all duration-600 hover:-translate-y-2 overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="p-8 lg:p-10 relative z-10">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-soft flex items-center justify-center text-brand group-hover:scale-110 transition-transform duration-500">
|
||||
{productIcon}
|
||||
</div>
|
||||
<span className="px-3 py-1 text-[11px] font-bold text-brand bg-brand-soft/50">
|
||||
{product.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{product.tags.slice(0, 2).map(tag => (
|
||||
<span key={tag} className="px-2.5 py-1 text-xs text-dark-text-muted border border-white/10">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl lg:text-2xl font-bold text-white mb-4 group-hover:translate-x-2 transition-transform duration-500">
|
||||
{product.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed mb-8">
|
||||
{product.description}
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
className="inline-flex items-center gap-3 text-sm font-bold text-brand"
|
||||
whileHover={{ x: 8 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function SuiteCombosSection() {
|
||||
const SUITE_COMBOS = [
|
||||
{ products: ['erp', 'bi'], label: 'ERP + BI 数据驱动组合', description: '打通业务数据，实现数据驱动决策' },
|
||||
{ products: ['crm', 'bi'], label: 'CRM + BI 客户洞察组合', description: '深度客户洞察，提升销售转化' },
|
||||
{ products: ['erp', 'sds'], label: 'ERP + SDS 供应链优化组合', description: '供应链全链路数字化，降本增效' },
|
||||
{ products: ['cms', 'oa'], label: 'CMS + OA 协同运营组合', description: '内容管理与办公协同一体化' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Recommended Combos
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
推荐产品组合
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary text-lg mt-6 leading-relaxed">
|
||||
经过实战验证的产品组合，发挥 1+1 ＞ 2 的协同效应
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{SUITE_COMBOS.map((combo, idx) => {
|
||||
const products = combo.products
|
||||
.map(pid => PRODUCTS.find(p => p.id === pid))
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group relative p-10 border border-white/10 bg-ink hover:border-brand/40 transition-all duration-500 hover:-translate-y-2"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="flex -space-x-3">
|
||||
{products.map((p, pIdx) => p && (
|
||||
<div
|
||||
key={p.id}
|
||||
className="w-12 h-12 rounded-xl bg-brand-soft border-2 border-ink flex items-center justify-center text-brand"
|
||||
style={{ zIndex: products.length - pIdx }}
|
||||
>
|
||||
{PRODUCT_ICONS[p.title] || <Package className="w-5 h-5" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-xs font-bold text-brand tracking-widest uppercase">
|
||||
组合 {idx + 1}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-3">{combo.label}</h3>
|
||||
<p className="text-dark-text-secondary leading-relaxed mb-6">{combo.description}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{products.map(p => p && (
|
||||
<span key={p.id} className="px-3 py-1.5 text-xs font-medium text-white bg-ink-light border border-white/10">
|
||||
{p.title.replace('睿新', '').replace('睿视 ', '')}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
不确定需要哪些产品？
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary leading-relaxed mb-12 max-w-2xl mx-auto">
|
||||
让我们帮您诊断，推荐最适合的产品组合和解决方案
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/solutions">查看解决方案</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ProductsContentV1() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<EnterpriseProductsSection />
|
||||
<SpecializedProductsSection />
|
||||
<SuiteCombosSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,548 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, CheckCircle2, Zap, Clock, Users, Award, TrendingUp, BarChart3, Code, Lightbulb, Puzzle } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Service, CaseStudy, DataProof } from '@/lib/constants/services';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const ICON_MAP: Record<string, React.ReactNode> = {
|
||||
Code: <Code className="w-7 h-7" />,
|
||||
BarChart3: <BarChart3 className="w-7 h-7" />,
|
||||
Lightbulb: <Lightbulb className="w-7 h-7" />,
|
||||
Puzzle: <Puzzle className="w-7 h-7" />,
|
||||
};
|
||||
|
||||
const FEATURE_ICONS = [Zap, Clock, Users, Award, TrendingUp];
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '300px 300px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface DetailHeroProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function DetailHero({ service }: DetailHeroProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-[75vh] flex items-center overflow-hidden bg-ink"
|
||||
>
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[45%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 20%, rgba(196, 30, 58, 0.09) 100%)',
|
||||
clipPath: 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-2/5 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-32 right-[25%] w-[400px] h-[400px] rounded-full opacity-12 blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10 w-full py-32 lg:py-40">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.1, ease: EASE_OUT }}
|
||||
className="mb-10"
|
||||
>
|
||||
<SectionLabel>Professional Service</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 60 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.15, ease: EASE_OUT }}
|
||||
className="flex items-center gap-6 mb-10"
|
||||
>
|
||||
<div className="w-20 h-20 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
{ICON_MAP[service.icon] || <Code className="w-10 h-10" />}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-dark-text-muted text-sm tracking-widest uppercase">
|
||||
Service
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 70 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.25, ease: EASE_OUT }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.85] tracking-tighter mb-12"
|
||||
>
|
||||
{service.title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-3xl leading-relaxed mb-12"
|
||||
>
|
||||
{service.description}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/cases">查看案例</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface OverviewSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function OverviewSection({ service }: OverviewSectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="grid lg:grid-cols-12 gap-16">
|
||||
<ScrollReveal className="lg:col-span-4">
|
||||
<SectionLabel>Overview</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
服务概览
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} className="lg:col-span-8">
|
||||
<p className="text-xl text-dark-text-secondary leading-relaxed">
|
||||
{service.overview}
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface FeaturesSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function FeaturesSection({ service }: FeaturesSectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-20 max-w-3xl">
|
||||
<SectionLabel>Core Capabilities</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
核心能力
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
我们提供的服务特色，每一项都经过多年实战打磨
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/10"
|
||||
staggerDelay={0.08}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{service.features.map((feature, index) => {
|
||||
const Icon = FEATURE_ICONS[index % FEATURE_ICONS.length]!;
|
||||
const [title, desc] = feature.split('：');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-10 lg:p-12 transition-all duration-500 hover:bg-white/[0.02] bg-ink"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-full w-[3px] scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top bg-brand" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="w-14 h-14 rounded-xl bg-brand-soft flex items-center justify-center text-brand mb-8 group-hover:scale-110 transition-transform duration-500">
|
||||
<Icon className="w-7 h-7" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-white mb-4 group-hover:translate-x-2 transition-transform duration-500">
|
||||
{desc ? title : feature.slice(0, 10)}
|
||||
</h3>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed">
|
||||
{desc || feature}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface BenefitsSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function BenefitsSection({ service }: BenefitsSectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Why Choose Us</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
服务优势
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
选择我们的理由，每一点都源自客户的真实反馈
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 gap-6"
|
||||
staggerDelay={0.08}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{service.benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group flex items-start gap-5 p-8 lg:p-10 border border-white/10 hover:border-brand/40 bg-ink/50 transition-all duration-500 hover:-translate-y-1"
|
||||
>
|
||||
<CheckCircle2 className="w-7 h-7 text-brand shrink-0 mt-0.5 group-hover:scale-110 transition-transform duration-300" />
|
||||
<p className="text-lg text-white leading-relaxed font-medium">
|
||||
{benefit}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProcessSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function ProcessSection({ service }: ProcessSectionProps) {
|
||||
if (!service.process || service.process.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-24 max-w-3xl text-center mx-auto">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Service Process
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
服务流程
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
标准化流程保障服务质量，每一步都清晰透明
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<StaggerReveal
|
||||
className="space-y-6"
|
||||
staggerDelay={0.12}
|
||||
delayChildren={0.1}
|
||||
>
|
||||
{service.process.map((step, index) => {
|
||||
const [title, desc] = step.split('：');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="relative flex gap-8 group"
|
||||
>
|
||||
<div className="relative z-10 shrink-0">
|
||||
<div className="w-20 h-20 rounded-2xl bg-ink-light border-2 border-white/10 flex items-center justify-center group-hover:border-brand group-hover:scale-110 transition-all duration-500">
|
||||
<span className="text-2xl font-bold text-white group-hover:text-brand transition-colors">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
{index < service.process!.length - 1 && (
|
||||
<div className="absolute top-20 left-1/2 -translate-x-1/2 w-px h-6 bg-white/10" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 py-5">
|
||||
<h4 className="text-2xl font-bold text-white mb-3 group-hover:translate-x-2 transition-transform duration-500">
|
||||
{desc ? title : step.slice(0, 15)}
|
||||
</h4>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
{desc || step}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface DataProofsSectionProps {
|
||||
dataProofs?: DataProof[];
|
||||
}
|
||||
|
||||
function DataProofsSection({ dataProofs = [] }: DataProofsSectionProps) {
|
||||
if (dataProofs.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-20 text-center max-w-3xl mx-auto">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Data Speaks
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
用真实效果证明价值
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
来自真实客户的使用数据，让效果可衡量、可验证
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{dataProofs.map((proof, index) => (
|
||||
<div
|
||||
key={proof.metric}
|
||||
className="group relative p-10 lg:p-12 border border-white/10 hover:border-brand/40 bg-ink transition-all duration-500 hover:-translate-y-2"
|
||||
>
|
||||
{index === 0 && (
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand" />
|
||||
)}
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="text-5xl lg:text-6xl font-bold text-white mb-5 group-hover:text-brand transition-colors duration-500">
|
||||
{proof.value}
|
||||
</div>
|
||||
<p className="text-xl font-bold text-white mb-3">{proof.metric}</p>
|
||||
<p className="text-dark-text-muted leading-relaxed">{proof.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CaseStudiesSectionProps {
|
||||
caseStudies?: CaseStudy[];
|
||||
}
|
||||
|
||||
function CaseStudiesSection({ caseStudies = [] }: CaseStudiesSectionProps) {
|
||||
if (caseStudies.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Case Studies</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
客户案例
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
他们已经实现了转型突破，下一个就是您
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{caseStudies.map((study) => (
|
||||
<div
|
||||
key={study.client}
|
||||
className="group relative block overflow-hidden border border-white/10 hover:border-brand/40 bg-ink-light transition-all duration-500 hover:-translate-y-2"
|
||||
>
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-ink to-ink-light relative overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-6xl font-bold text-white/[0.08]">
|
||||
{study.client.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute top-5 left-5">
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft backdrop-blur-sm">
|
||||
{study.industry}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<h3 className="text-xl font-bold text-white mb-3 group-hover:translate-x-2 transition-transform duration-500">
|
||||
{study.client}
|
||||
</h3>
|
||||
<p className="text-dark-text-secondary text-sm leading-relaxed mb-6">
|
||||
{study.challenge}
|
||||
</p>
|
||||
<div className="pt-6 border-t border-white/10">
|
||||
<div className="text-2xl font-bold text-brand mb-1">{study.result}</div>
|
||||
<div className="text-xs text-dark-text-muted">核心成果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CTASectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function CTASection({ service }: CTASectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
准备好开始{service.title}了吗？
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary leading-relaxed mb-12 max-w-2xl mx-auto">
|
||||
联系我们，获取专属方案和报价。首次咨询免费，没有任何销售压力。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/services">了解更多服务</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ServiceDetailContentV1Props {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
export default function ServiceDetailContentV1({ service }: ServiceDetailContentV1Props) {
|
||||
return (
|
||||
<main>
|
||||
<DetailHero service={service} />
|
||||
<OverviewSection service={service} />
|
||||
<FeaturesSection service={service} />
|
||||
<BenefitsSection service={service} />
|
||||
<ProcessSection service={service} />
|
||||
<DataProofsSection dataProofs={service.dataProofs} />
|
||||
<CaseStudiesSection caseStudies={service.caseStudies} />
|
||||
<CTASection service={service} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,544 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, CheckCircle2, Zap, Clock, Users, Award, TrendingUp, BarChart3, Code, Lightbulb, Puzzle, Shield } from 'lucide-react';
|
||||
import { GrainOverlay, SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import type { Service, CaseStudy } from '@/lib/constants/services';
|
||||
import { MethodologyFramework, TechStackShowcase, FAQSection, DataProofSection } from '@/components/content/sections';
|
||||
|
||||
const ICON_MAP: Record<string, React.ReactNode> = {
|
||||
Code: <Code className="w-7 h-7" />,
|
||||
BarChart3: <BarChart3 className="w-7 h-7" />,
|
||||
Lightbulb: <Lightbulb className="w-7 h-7" />,
|
||||
Puzzle: <Puzzle className="w-7 h-7" />,
|
||||
};
|
||||
|
||||
const FEATURE_ICONS = [Zap, Clock, Users, Award, TrendingUp];
|
||||
|
||||
interface DetailHeroProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function DetailHero({ service }: DetailHeroProps) {
|
||||
return (
|
||||
<section className="relative min-h-[80vh] flex items-center overflow-hidden bg-ink pt-24">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[50%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 20%, rgba(196, 30, 58, 0.03) 100%)',
|
||||
clipPath: 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-32 right-[15%] w-[400px] h-[400px] rounded-full opacity-[0.03] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-20 sm:py-24 md:py-28 lg:py-32">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="mb-8"
|
||||
>
|
||||
<SectionLabel>Professional Service</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.15, ease: EASE_OUT }}
|
||||
className="flex items-center gap-6 mb-10"
|
||||
>
|
||||
<div className="w-20 h-20 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
{ICON_MAP[service.icon] || <Code className="w-10 h-10" />}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-dark-text-muted text-sm tracking-widest uppercase">
|
||||
Service
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 60 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.25, ease: EASE_OUT }}
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight tracking-tighter mb-8 sm:mb-10 max-w-4xl"
|
||||
>
|
||||
{service.title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-3xl leading-relaxed mb-12"
|
||||
>
|
||||
{service.description}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/cases">查看案例</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface OverviewSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function OverviewSection({ service }: OverviewSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="grid lg:grid-cols-12 gap-16">
|
||||
<ScrollReveal className="lg:col-span-4">
|
||||
<SectionLabel>Overview</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
服务概览
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} className="lg:col-span-8">
|
||||
<p className="text-xl text-dark-text-secondary leading-relaxed">
|
||||
{service.overview}
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface FeaturesSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function FeaturesSection({ service }: FeaturesSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
|
||||
<SectionLabel>Core Capabilities</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
核心能力
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
我们提供的服务特色，每一项都经过多年实战打磨
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/10">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{service.features.map((feature, index) => {
|
||||
const Icon = FEATURE_ICONS[index % FEATURE_ICONS.length]!;
|
||||
const [title, desc] = feature.split('：');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-10 lg:p-12 transition-all duration-500 hover:bg-white/[0.02] bg-ink-light"
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-full w-1 scale-y-0 group-hover:scale-y-100 transition-transform duration-700 origin-top bg-brand" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="w-14 h-14 rounded-xl bg-brand-soft flex items-center justify-center text-brand mb-8">
|
||||
<Icon className="w-7 h-7" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-white mb-4">
|
||||
{desc ? title : feature.slice(0, 10)}
|
||||
</h3>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed">
|
||||
{desc || feature}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface BenefitsSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function BenefitsSection({ service }: BenefitsSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Why Choose Us</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
服务优势
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
选择我们的理由，每一点都源自客户的真实反馈
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px bg-white/10">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{service.benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group flex items-start gap-5 p-8 lg:p-10 bg-ink hover:bg-white/[0.02] transition-all duration-500"
|
||||
>
|
||||
<CheckCircle2 className="w-7 h-7 text-brand shrink-0 mt-0.5" />
|
||||
<p className="text-lg text-white leading-relaxed font-medium">
|
||||
{benefit}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProcessSectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function ProcessSection({ service }: ProcessSectionProps) {
|
||||
if (!service.process || service.process.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-3xl text-center mx-auto">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Service Process
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
服务流程
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
标准化流程保障服务质量，每一步都清晰透明
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<StaggerReveal
|
||||
className="space-y-px bg-white/10"
|
||||
staggerDelay={0.12}
|
||||
delayChildren={0.1}
|
||||
>
|
||||
{service.process.map((step, index) => {
|
||||
const [title, desc] = step.split('：');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="relative flex gap-8 group p-8 bg-ink hover:bg-white/[0.02] transition-all duration-500"
|
||||
>
|
||||
<div className="relative z-10 shrink-0">
|
||||
<div className="w-20 h-20 rounded-2xl bg-ink-light border border-white/10 flex items-center justify-center group-hover:border-brand/50 transition-all duration-500">
|
||||
<span className="text-2xl font-bold text-white group-hover:text-brand transition-colors">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 py-5">
|
||||
<h4 className="text-2xl font-bold text-white mb-3">
|
||||
{desc ? title : step.slice(0, 15)}
|
||||
</h4>
|
||||
<p className="text-dark-text-secondary leading-relaxed text-lg">
|
||||
{desc || step}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CaseStudiesSectionProps {
|
||||
caseStudies?: CaseStudy[];
|
||||
}
|
||||
|
||||
function CaseStudiesSection({ caseStudies = [] }: CaseStudiesSectionProps) {
|
||||
if (caseStudies.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-20">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Case Studies</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
客户案例
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
他们已经实现了转型突破，下一个就是您
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/10">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{caseStudies.map((study) => (
|
||||
<div
|
||||
key={study.client}
|
||||
className="group relative block overflow-hidden bg-ink-light hover:bg-white/[0.02] transition-all duration-500"
|
||||
>
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-ink to-ink-light relative overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-6xl font-bold text-white/[0.08]">
|
||||
{study.client.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute top-5 left-5">
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/80 backdrop-blur-sm">
|
||||
{study.industry}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<h3 className="text-xl font-bold text-white mb-3 group-hover:translate-x-2 transition-transform duration-500">
|
||||
{study.client}
|
||||
</h3>
|
||||
<p className="text-dark-text-secondary text-sm leading-relaxed mb-6">
|
||||
{study.challenge}
|
||||
</p>
|
||||
<div className="pt-6 border-t border-white/10">
|
||||
<div className="text-2xl font-bold text-brand mb-1">{study.result}</div>
|
||||
<div className="text-xs text-dark-text-muted">核心成果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CertificationsSectionProps {
|
||||
certifications?: { name: string; issuer: string }[];
|
||||
}
|
||||
|
||||
function CertificationsSection({ certifications = [] }: CertificationsSectionProps) {
|
||||
if (certifications.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Certifications
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white tracking-tight">
|
||||
资质认证
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-px bg-white/10">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{certifications.map((cert, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group flex items-center gap-4 px-8 py-5 bg-ink hover:bg-white/[0.02] transition-all duration-500"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
<Shield className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-white font-bold">{cert.name}</div>
|
||||
<div className="text-sm text-dark-text-muted">{cert.issuer}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CTASectionProps {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
function CTASection({ service }: CTASectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand/30 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand/30 to-transparent" />
|
||||
|
||||
<div className="absolute top-1/4 right-[10%] w-[380px] h-[380px] rounded-full opacity-[0.03] blur-3xl bg-brand" />
|
||||
<div className="absolute bottom-1/4 left-[10%] w-[320px] h-[320px] rounded-full opacity-[0.02] blur-3xl bg-teal-500" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
准备好开始<br />
|
||||
<span className="text-brand">{service.title}</span>了吗？
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
联系我们，获取专属方案和报价。首次咨询免费，没有任何销售压力。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/services">了解更多服务</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ServiceDetailContentV2Props {
|
||||
service: Service;
|
||||
}
|
||||
|
||||
export default function ServiceDetailContentV2({ service }: ServiceDetailContentV2Props) {
|
||||
return (
|
||||
<main>
|
||||
<DetailHero service={service} />
|
||||
<OverviewSection service={service} />
|
||||
<FeaturesSection service={service} />
|
||||
{service.methodology && service.methodology.length > 0 && (
|
||||
<MethodologyFramework
|
||||
title="我们的方法论"
|
||||
subtitle="经过多年实战打磨的系统化方法，确保每个项目都有章可循、有据可依"
|
||||
layers={service.methodology}
|
||||
/>
|
||||
)}
|
||||
<BenefitsSection service={service} />
|
||||
<ProcessSection service={service} />
|
||||
{service.techStack && service.techStack.length > 0 && (
|
||||
<TechStackShowcase
|
||||
title="技术栈与工具"
|
||||
subtitle="我们擅长的技术和工具，确保用最适合的方案解决问题"
|
||||
categories={service.techStack}
|
||||
/>
|
||||
)}
|
||||
<DataProofSection
|
||||
title="可衡量的成果"
|
||||
subtitle="用数据说话，每一项指标都源自真实项目积累"
|
||||
metrics={service.dataProofs.map((dp) => ({
|
||||
value: dp.value,
|
||||
label: dp.metric,
|
||||
description: dp.description,
|
||||
}))}
|
||||
/>
|
||||
<CaseStudiesSection caseStudies={service.caseStudies} />
|
||||
<CertificationsSection certifications={service.certifications} />
|
||||
{service.faqs && service.faqs.length > 0 && (
|
||||
<FAQSection
|
||||
title="常见问题"
|
||||
subtitle="关于这项服务，客户最常问的问题"
|
||||
items={service.faqs}
|
||||
/>
|
||||
)}
|
||||
<CTASection service={service} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,500 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SectionHeader } from '@/components/sections/section-header';
|
||||
import { ServiceCard } from '@/components/sections/service-card';
|
||||
import { ScrollProgress } from '@/components/ui/scroll-progress';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { ArrowRight, CheckCircle2, Zap, Clock, Users, Award, TrendingUp, BarChart3, Code, Lightbulb, Puzzle, Shield } from 'lucide-react';
|
||||
import type { Service, CaseStudy } from '@/lib/constants/services';
|
||||
|
||||
const ICON_MAP: Record<string, React.ReactNode> = {
|
||||
Code: <Code className="w-7 h-7" />,
|
||||
BarChart3: <BarChart3 className="w-7 h-7" />,
|
||||
Lightbulb: <Lightbulb className="w-7 h-7" />,
|
||||
Puzzle: <Puzzle className="w-7 h-7" />,
|
||||
};
|
||||
|
||||
const FEATURE_ICONS = [Zap, Clock, Users, Award, TrendingUp, Shield];
|
||||
|
||||
const EASE = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
function DetailHero({ service }: { service: Service }) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const heroRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: heroRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
|
||||
const contentY = useTransform(scrollYProgress, [0, 1], [0, 60]);
|
||||
const bgY = useTransform(scrollYProgress, [0, 1], [0, 100]);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={heroRef}
|
||||
className="relative min-h-[90svh] flex items-center overflow-hidden pt-20"
|
||||
style={{ background: 'var(--color-ink)' }}
|
||||
>
|
||||
{/* Background layers — parallax */}
|
||||
<motion.div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{ y: shouldReduceMotion ? 0 : bgY }}
|
||||
>
|
||||
{/* Brand glow */}
|
||||
<div
|
||||
className="absolute w-[600px] md:w-[800px] h-[600px] md:h-[800px] rounded-full blur-[120px] opacity-[0.08]"
|
||||
style={{
|
||||
background: 'radial-gradient(circle, var(--color-brand), transparent 70%)',
|
||||
top: '-20%',
|
||||
right: '-10%',
|
||||
}}
|
||||
/>
|
||||
{/* Grid texture */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.02]"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)`,
|
||||
backgroundSize: '50px 50px',
|
||||
maskImage: 'radial-gradient(ellipse 60% 50% at 50% 40%, black 20%, transparent 70%)',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
className="relative z-10 w-full max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 py-24 md:py-32"
|
||||
style={{ opacity, y: shouldReduceMotion ? 0 : contentY }}
|
||||
>
|
||||
<motion.div
|
||||
className="flex items-center gap-3 mb-8"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
>
|
||||
<div
|
||||
className="w-1 h-4 rounded-full"
|
||||
style={{ backgroundColor: 'var(--color-brand)' }}
|
||||
/>
|
||||
<span
|
||||
className="text-[10px] tracking-[4px] uppercase font-medium"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
专业服务
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex items-center gap-5 mb-8"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: EASE }}
|
||||
>
|
||||
<div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
}}
|
||||
>
|
||||
{ICON_MAP[service.icon] || <Code className="w-8 h-8" />}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Bain-style: conclusion-first title */}
|
||||
<motion.h1
|
||||
className="font-sans text-[clamp(36px,7vw,72px)] font-black leading-[1.05] tracking-[-1.5px] text-white mb-6 md:mb-8"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.2, ease: EASE }}
|
||||
>
|
||||
{service.title}<br />
|
||||
<span style={{ color: 'var(--color-brand)' }}>
|
||||
{service.benefits?.[0]?.slice(0, 12) || '效率提升 40%'}
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-base sm:text-lg md:text-xl max-w-2xl leading-relaxed mb-8 md:mb-10 font-light"
|
||||
style={{ color: 'rgba(255,255,255,0.5)' }}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.35, ease: EASE }}
|
||||
>
|
||||
{service.description}
|
||||
</motion.p>
|
||||
|
||||
{/* Quick stats — answer-first */}
|
||||
<motion.div
|
||||
className="grid grid-cols-3 gap-4 sm:gap-8 mb-10 md:mb-12 max-w-xl"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5, ease: EASE }}
|
||||
>
|
||||
{[
|
||||
{ value: '12年', label: '行业深耕' },
|
||||
{ value: '95%+', label: '准时交付' },
|
||||
{ value: '98%', label: '客户续约' },
|
||||
].map((stat, i) => (
|
||||
<div key={i}>
|
||||
<div
|
||||
className="font-sans tabular-nums text-[28px] sm:text-[36px] font-bold leading-none mb-1.5"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
{stat.value}
|
||||
</div>
|
||||
<div
|
||||
className="text-[11px] sm:text-[12px]"
|
||||
style={{ color: 'rgba(255,255,255,0.35)' }}
|
||||
>
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-wrap gap-4"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.65, ease: EASE }}
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
免费咨询
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="#cases">查看案例</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function OverviewSection({ service }: { service: Service }) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-start">
|
||||
<ScrollReveal className="lg:col-span-5">
|
||||
<SectionHeader
|
||||
label="Overview"
|
||||
title="解决什么"
|
||||
highlight="问题"
|
||||
desc="每一项服务，都从一个具体的业务痛点出发"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} className="lg:col-span-7">
|
||||
<p
|
||||
className="text-lg md:text-xl leading-relaxed mb-8"
|
||||
style={{ color: 'var(--color-text-secondary)' }}
|
||||
>
|
||||
{service.overview}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{service.benefits?.slice(0, 4).map((benefit, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
}}
|
||||
>
|
||||
<CheckCircle2 className="w-4 h-4 shrink-0" />
|
||||
<span className="font-medium">{benefit.slice(0, 10)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function FeaturesSection({ service }: { service: Service }) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden" style={{ background: 'var(--color-ink-light)' }}>
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
|
||||
<SectionHeader
|
||||
label="Capabilities"
|
||||
title="核心"
|
||||
highlight="能力"
|
||||
desc="每一项都经过 500+ 项目实战打磨"
|
||||
light
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px" style={{ backgroundColor: 'rgba(255,255,255,0.06)' }}>
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{service.features.map((feature, index) => {
|
||||
const Icon = FEATURE_ICONS[index % FEATURE_ICONS.length]!;
|
||||
const [title, desc] = feature.split('：');
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-white/[0.03]"
|
||||
style={{ backgroundColor: 'var(--color-ink)' }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-full w-[3px] origin-bottom scale-y-0 group-hover:scale-y-100 transition-transform duration-500" style={{ backgroundColor: 'var(--color-brand)' }} />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center mb-6"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
}}
|
||||
>
|
||||
<Icon className="w-6 h-6" strokeWidth={1.8} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-bold mb-3 text-white">
|
||||
{desc ? title : feature.slice(0, 10)}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm leading-relaxed" style={{ color: 'rgba(255,255,255,0.4)' }}>
|
||||
{desc || feature}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ProcessSection({ service }: { service: Service }) {
|
||||
if (!service.process || service.process.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-2xl text-center mx-auto">
|
||||
<SectionHeader
|
||||
label="Process"
|
||||
title="服务"
|
||||
highlight="流程"
|
||||
desc="标准化流程，确保每个项目可控、可预期"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-5 gap-0">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{service.process.slice(0, 5).map((step, index) => {
|
||||
const [title, desc] = step.split('：');
|
||||
return (
|
||||
<div key={index} className="relative group p-6 sm:p-8">
|
||||
<div
|
||||
className="font-sans text-[56px] font-bold leading-none mb-4"
|
||||
style={{
|
||||
color: 'var(--color-brand)',
|
||||
opacity: 0.15,
|
||||
transition: 'opacity 0.4s',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.opacity = '0.4')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.opacity = '0.15')}
|
||||
>
|
||||
0{index + 1}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-2" style={{ color: 'var(--color-text-primary)' }}>
|
||||
{desc ? title : step.slice(0, 6)}
|
||||
</h3>
|
||||
<p className="text-sm leading-relaxed" style={{ color: 'var(--color-text-muted)' }}>
|
||||
{desc || step}
|
||||
</p>
|
||||
|
||||
{index < service.process.length - 1 && index < 4 && (
|
||||
<div
|
||||
className="hidden lg:block absolute top-16 right-0 w-full h-px"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, var(--color-brand), transparent)`,
|
||||
opacity: 0.2,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] }) {
|
||||
if (caseStudies.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section id="cases" className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden" style={{ background: 'var(--color-ink-light)' }}>
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
|
||||
<SectionHeader
|
||||
label="Case Studies"
|
||||
title="500+ 企业的"
|
||||
highlight="增长实践"
|
||||
desc="用真实案例说话，每一个都是我们能力的证明"
|
||||
light
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 lg:gap-8">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{caseStudies.slice(0, 4).map((cs, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:-translate-y-1"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-ink)',
|
||||
border: '1px solid rgba(255,255,255,0.06)',
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-[2px] scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"
|
||||
style={{
|
||||
background: 'linear-gradient(90deg, var(--color-brand), transparent)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span
|
||||
className="text-[10px] tracking-[3px] uppercase font-medium"
|
||||
style={{ color: 'var(--color-brand)' }}
|
||||
>
|
||||
{cs.industry}
|
||||
</span>
|
||||
<span style={{ color: 'rgba(255,255,255,0.1)' }}>•</span>
|
||||
<span className="text-sm" style={{ color: 'rgba(255,255,255,0.5)' }}>
|
||||
{cs.client}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl sm:text-2xl font-bold mb-6 text-white leading-tight">
|
||||
{cs.challenge.slice(0, 30)}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm leading-relaxed mb-6" style={{ color: 'rgba(255,255,255,0.45)' }}>
|
||||
{cs.solution}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm font-medium transition-all duration-300 group-hover:gap-3" style={{ color: 'var(--color-brand)' }}>
|
||||
<span>查看详情</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function FAQSection({ service }: { service: Service }) {
|
||||
if (!service.faqs || service.faqs.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44" style={{ background: 'var(--color-bg-primary)' }}>
|
||||
<div className="max-w-[900px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 text-center">
|
||||
<SectionHeader
|
||||
label="FAQ"
|
||||
title="常见"
|
||||
highlight="问题"
|
||||
desc="在开始之前，这些可能是您想知道的"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="space-y-4">
|
||||
<StaggerReveal staggerDelay={0.06} delayChildren={0.05}>
|
||||
{service.faqs.map((faq, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="group p-6 sm:p-8 transition-all duration-300 cursor-pointer"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-secondary)',
|
||||
borderBottom: '1px solid var(--color-border)',
|
||||
}}
|
||||
>
|
||||
<h4 className="text-base sm:text-lg font-semibold mb-3" style={{ color: 'var(--color-text-primary)' }}>
|
||||
{faq.question}
|
||||
</h4>
|
||||
<p className="text-sm leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{faq.answer}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function RelatedServicesSection({ currentId }: { currentId: string }) {
|
||||
const related = [
|
||||
{ id: 'software', title: '软件开发', desc: '定制化全栈开发服务', icon: 'Code' },
|
||||
{ id: 'data', title: '数据分析', desc: '数据驱动业务决策', icon: 'BarChart3' },
|
||||
{ id: 'consulting', title: '咨询服务', desc: '数字化战略规划', icon: 'Lightbulb' },
|
||||
].filter(s => s.id !== currentId);
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden" style={{ background: 'var(--color-ink-light)' }}>
|
||||
<div className="max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16">
|
||||
<ScrollReveal className="mb-16 sm:mb-20 max-w-2xl">
|
||||
<SectionHeader
|
||||
label="Related"
|
||||
title="相关"
|
||||
highlight="服务"
|
||||
desc="您可能还需要这些服务"
|
||||
light
|
||||
/>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<StaggerReveal staggerDelay={0.1}>
|
||||
{related.map((s) => (
|
||||
<ServiceCard
|
||||
key={s.id}
|
||||
title={s.title}
|
||||
description={s.desc}
|
||||
href={`/services/${s.id}`}
|
||||
/>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ServiceDetailContentV3({ service }: { service: Service }) {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<ScrollProgress />
|
||||
<DetailHero service={service} />
|
||||
<OverviewSection service={service} />
|
||||
<FeaturesSection service={service} />
|
||||
<ProcessSection service={service} />
|
||||
<CaseStudiesSection caseStudies={service.caseStudies} />
|
||||
<FAQSection service={service} />
|
||||
<RelatedServicesSection currentId={service.id} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,455 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Lightbulb, Settings, Users, TrendingUp, BookOpen, MessageSquare, Calendar, Smartphone, Package, BarChart3 } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const INDUSTRY_ICONS: Record<string, React.ReactNode> = {
|
||||
制造业: <Factory className="w-8 h-8" />,
|
||||
零售业: <ShoppingCart className="w-8 h-8" />,
|
||||
医疗: <Heart className="w-8 h-8" />,
|
||||
教育: <GraduationCap className="w-8 h-8" />,
|
||||
};
|
||||
|
||||
const VALUE_ICONS: Record<string, React.ReactNode> = {
|
||||
Factory: <Factory className="w-6 h-6" />,
|
||||
Package: <Package className="w-6 h-6" />,
|
||||
BarChart3: <BarChart3 className="w-6 h-6" />,
|
||||
Users: <Users className="w-6 h-6" />,
|
||||
TrendingUp: <TrendingUp className="w-6 h-6" />,
|
||||
ShoppingCart: <ShoppingCart className="w-6 h-6" />,
|
||||
GraduationCap: <GraduationCap className="w-6 h-6" />,
|
||||
BookOpen: <BookOpen className="w-6 h-6" />,
|
||||
MessageSquare: <MessageSquare className="w-6 h-6" />,
|
||||
Heart: <Heart className="w-6 h-6" />,
|
||||
Calendar: <Calendar className="w-6 h-6" />,
|
||||
Smartphone: <Smartphone className="w-6 h-6" />,
|
||||
};
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '300px 300px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface DetailHeroProps {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
function DetailHero({ solution }: DetailHeroProps) {
|
||||
const industryIcon = INDUSTRY_ICONS[solution.industry] || <Factory className="w-8 h-8" />;
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[80vh] flex items-center overflow-hidden bg-ink pt-24">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[50%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 20%, rgba(196, 30, 58, 0.08) 100%)',
|
||||
clipPath: 'polygon(30% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-32 right-[15%] w-[400px] h-[400px] rounded-full opacity-10 blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10 w-full py-24 lg:py-32">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="flex items-center gap-4 mb-8"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
{industryIcon}
|
||||
</div>
|
||||
<div>
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/50">
|
||||
{solution.industry}
|
||||
</span>
|
||||
<div className="text-dark-text-muted text-sm mt-2">{solution.subtitle}</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white leading-tight tracking-tighter mb-8 max-w-4xl"
|
||||
>
|
||||
{solution.title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.3, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-3xl leading-relaxed mb-12"
|
||||
>
|
||||
{solution.description}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.45, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
获取方案详情
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">查看产品</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ChallengesSectionProps {
|
||||
challenges: string[];
|
||||
}
|
||||
|
||||
function ChallengesSection({ challenges }: ChallengesSectionProps) {
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-start">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>Challenges</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
行业痛点
|
||||
</h2>
|
||||
<p className="text-dark-text-secondary text-lg leading-relaxed">
|
||||
我们深入理解行业面临的核心挑战，提供针对性的解决方案
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="space-y-5">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{challenges.map((challenge, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group relative p-8 border border-white/10 bg-ink hover:border-brand/30 transition-all duration-500"
|
||||
whileHover={{ x: 12 }}
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-brand-soft/50 flex items-center justify-center text-brand shrink-0 mt-0.5">
|
||||
<span className="text-lg font-bold">{idx + 1}</span>
|
||||
</div>
|
||||
<p className="text-lg text-white leading-relaxed">{challenge}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface SolutionsSectionProps {
|
||||
solutions: string[];
|
||||
}
|
||||
|
||||
function SolutionsSection({ solutions }: SolutionsSectionProps) {
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-24">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Solutions
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
解决方案
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{solutions.map((solution, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group relative p-10 border border-white/10 bg-ink-light hover:border-brand/40 transition-all duration-500 hover:-translate-y-2"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-soft flex items-center justify-center text-brand shrink-0">
|
||||
<Lightbulb className="w-7 h-7" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-bold text-brand mb-3 tracking-widest uppercase">
|
||||
方案 {idx + 1}
|
||||
</div>
|
||||
<p className="text-xl text-white font-semibold leading-relaxed">{solution}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ValuePropositionProps {
|
||||
valueProposition: Solution['valueProposition'];
|
||||
}
|
||||
|
||||
function ValuePropositionSection({ valueProposition }: ValuePropositionProps) {
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-24">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Value Proposition
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
{valueProposition.headline}
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<StaggerReveal staggerDelay={0.12} delayChildren={0.05}>
|
||||
{valueProposition.points.map((point, idx) => {
|
||||
const icon = VALUE_ICONS[point.icon] || <Settings className="w-6 h-6" />;
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
className="group relative p-10 text-center border border-white/10 bg-ink hover:border-brand/40 transition-all duration-500 hover:-translate-y-2"
|
||||
>
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-center" />
|
||||
|
||||
<div className="w-20 h-20 rounded-3xl bg-brand-soft flex items-center justify-center text-brand mx-auto mb-8 group-hover:scale-110 transition-transform duration-500">
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-4">{point.title}</h3>
|
||||
<p className="text-dark-text-secondary leading-relaxed">{point.description}</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface SuiteCombinationProps {
|
||||
suiteCombination: Solution['suiteCombination'];
|
||||
}
|
||||
|
||||
function SuiteCombinationSection({ suiteCombination }: SuiteCombinationProps) {
|
||||
const primaryProducts = suiteCombination.primaryProducts
|
||||
.map(pid => PRODUCTS.find(p => p.id === pid))
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<section className="relative py-32 lg:py-40 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-24">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Suite Combination
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
推荐产品组合
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid lg:grid-cols-5 gap-8 mb-16">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{primaryProducts.map((product) => product && (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
className="group relative p-8 border border-white/10 bg-ink-light hover:border-brand/40 transition-all duration-500 hover:-translate-y-2 text-center lg:col-span-2"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand mx-auto mb-6 group-hover:scale-110 transition-transform duration-500">
|
||||
<Package className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<div className="text-xs font-bold text-brand mb-2 tracking-widest uppercase">
|
||||
核心产品
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">{product.title}</h3>
|
||||
<p className="text-sm text-dark-text-muted leading-relaxed">{product.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
|
||||
<ScrollReveal delay={0.2} className="flex items-center justify-center lg:col-span-1">
|
||||
<div className="w-20 h-20 rounded-full bg-brand-soft/30 border-2 border-brand/30 flex items-center justify-center text-brand font-bold text-xl">
|
||||
+
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3} className="lg:col-span-2">
|
||||
<div className="group relative p-8 border border-brand/20 bg-brand-soft/10 hover:border-brand/40 transition-all duration-500 text-center h-full flex flex-col justify-center">
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand mx-auto mb-6">
|
||||
<Users className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<div className="text-xs font-bold text-brand mb-2 tracking-widest uppercase">
|
||||
配套服务
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">专业实施服务</h3>
|
||||
<p className="text-sm text-dark-text-secondary leading-relaxed">
|
||||
{suiteCombination.complementaryServices.length}项服务配套，确保方案落地见效
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<ScrollReveal>
|
||||
<div className="p-10 border border-white/10 bg-ink-light text-center">
|
||||
<div className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand mb-4">
|
||||
方案价值
|
||||
</div>
|
||||
<p className="text-xl lg:text-2xl text-white leading-relaxed max-w-4xl mx-auto font-medium">
|
||||
{suiteCombination.rationale}
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CTASectionProps {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
function CTASection({ solution }: CTASectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
开启您的数字化转型之旅
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary leading-relaxed mb-12 max-w-2xl mx-auto">
|
||||
联系我们，获取{solution.title}的详细方案和专属报价
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/solutions">查看更多方案</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface SolutionDetailContentV1Props {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
export default function SolutionDetailContentV1({ solution }: SolutionDetailContentV1Props) {
|
||||
return (
|
||||
<main>
|
||||
<DetailHero solution={solution} />
|
||||
<ChallengesSection challenges={solution.challenges} />
|
||||
<SolutionsSection solutions={solution.solutions} />
|
||||
<ValuePropositionSection valueProposition={solution.valueProposition} />
|
||||
<SuiteCombinationSection suiteCombination={solution.suiteCombination} />
|
||||
<CTASection solution={solution} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,400 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Lightbulb, Settings, Users, TrendingUp, Package, BarChart3, BookOpen, MessageSquare, Calendar, Smartphone } from 'lucide-react';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
|
||||
const INDUSTRY_ICONS: Record<string, React.ReactNode> = {
|
||||
制造业: <Factory className="w-8 h-8" />,
|
||||
零售业: <ShoppingCart className="w-8 h-8" />,
|
||||
医疗: <Heart className="w-8 h-8" />,
|
||||
教育: <GraduationCap className="w-8 h-8" />,
|
||||
};
|
||||
|
||||
const VALUE_ICONS: Record<string, React.ReactNode> = {
|
||||
Factory: <Factory className="w-6 h-6" />,
|
||||
Package: <Package className="w-6 h-6" />,
|
||||
BarChart3: <BarChart3 className="w-6 h-6" />,
|
||||
Users: <Users className="w-6 h-6" />,
|
||||
TrendingUp: <TrendingUp className="w-6 h-6" />,
|
||||
ShoppingCart: <ShoppingCart className="w-6 h-6" />,
|
||||
GraduationCap: <GraduationCap className="w-6 h-6" />,
|
||||
BookOpen: <BookOpen className="w-6 h-6" />,
|
||||
MessageSquare: <MessageSquare className="w-6 h-6" />,
|
||||
Heart: <Heart className="w-6 h-6" />,
|
||||
Calendar: <Calendar className="w-6 h-6" />,
|
||||
Smartphone: <Smartphone className="w-6 h-6" />,
|
||||
};
|
||||
|
||||
interface DetailHeroProps {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
function DetailHero({ solution }: DetailHeroProps) {
|
||||
const industryIcon = INDUSTRY_ICONS[solution.industry] || <Factory className="w-8 h-8" />;
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[80vh] flex items-center overflow-hidden bg-white pt-24">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-20 sm:py-24 md:py-28 lg:py-32">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: EASE_OUT }}
|
||||
className="flex items-center gap-4 mb-8"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand">
|
||||
{industryIcon}
|
||||
</div>
|
||||
<div>
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft/50">
|
||||
{solution.industry}
|
||||
</span>
|
||||
<div className="text-text-muted text-sm mt-2">{solution.subtitle}</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-ink leading-tight tracking-tighter mb-6 sm:mb-8 max-w-4xl"
|
||||
>
|
||||
{solution.title}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.3, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-text-secondary max-w-3xl leading-relaxed mb-12"
|
||||
>
|
||||
{solution.description}
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.45, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
获取方案详情
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">查看产品</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ChallengesSectionProps {
|
||||
challenges: string[];
|
||||
}
|
||||
|
||||
function ChallengesSection({ challenges }: ChallengesSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-start">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>Challenges</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-8">
|
||||
行业痛点
|
||||
</h2>
|
||||
<p className="text-text-secondary text-lg leading-relaxed">
|
||||
我们深入理解行业面临的核心挑战，提供针对性的解决方案
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="space-y-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{challenges.map((challenge, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group relative p-8 bg-white hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-brand-soft/50 flex items-center justify-center text-brand shrink-0 mt-0.5">
|
||||
<span className="text-lg font-bold">{idx + 1}</span>
|
||||
</div>
|
||||
<p className="text-lg text-ink leading-relaxed">{challenge}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface SolutionsSectionProps {
|
||||
solutions: string[];
|
||||
}
|
||||
|
||||
function SolutionsSection({ solutions }: SolutionsSectionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Solutions
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
解决方案
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{solutions.map((solution, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="group relative p-10 bg-white hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-soft flex items-center justify-center text-brand shrink-0">
|
||||
<Lightbulb className="w-7 h-7" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs font-bold text-brand mb-3 tracking-widest uppercase">
|
||||
方案 {idx + 1}
|
||||
</div>
|
||||
<p className="text-xl text-ink font-semibold leading-relaxed">{solution}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface ValuePropositionProps {
|
||||
valueProposition: Solution['valueProposition'];
|
||||
}
|
||||
|
||||
function ValuePropositionSection({ valueProposition }: ValuePropositionProps) {
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Value Proposition
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
{valueProposition.headline}
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-px bg-border-primary">
|
||||
<StaggerReveal staggerDelay={0.12} delayChildren={0.05}>
|
||||
{valueProposition.points.map((point, idx) => {
|
||||
const icon = VALUE_ICONS[point.icon] || <Settings className="w-6 h-6" />;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="group relative p-10 text-center bg-white hover:bg-bg-secondary transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-center" />
|
||||
|
||||
<div className="w-20 h-20 rounded-3xl bg-brand-soft flex items-center justify-center text-brand mx-auto mb-8">
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-ink mb-4">{point.title}</h3>
|
||||
<p className="text-text-secondary leading-relaxed">{point.description}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface SuiteCombinationProps {
|
||||
suiteCombination: Solution['suiteCombination'];
|
||||
}
|
||||
|
||||
function SuiteCombinationSection({ suiteCombination }: SuiteCombinationProps) {
|
||||
const primaryProducts = suiteCombination.primaryProducts
|
||||
.map(pid => PRODUCTS.find(p => p.id === pid))
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20 md:mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Suite Combination
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight">
|
||||
推荐产品组合
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid lg:grid-cols-5 gap-px bg-border-primary mb-px">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{primaryProducts.map((product) => product && (
|
||||
<div
|
||||
key={product.id}
|
||||
className="group relative p-8 bg-white hover:bg-bg-secondary transition-all duration-500 text-center lg:col-span-2"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand mx-auto mb-6">
|
||||
<Package className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<div className="text-xs font-bold text-brand mb-2 tracking-widest uppercase">
|
||||
核心产品
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-ink mb-3">{product.title}</h3>
|
||||
<p className="text-sm text-text-muted leading-relaxed">{product.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
|
||||
<ScrollReveal delay={0.2} className="flex items-center justify-center lg:col-span-1 bg-white">
|
||||
<div className="w-20 h-20 rounded-full bg-brand-soft/30 border-2 border-brand/30 flex items-center justify-center text-brand font-bold text-xl">
|
||||
+
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3} className="lg:col-span-2">
|
||||
<div className="group relative p-8 bg-brand-soft/10 hover:bg-bg-secondary transition-all duration-500 text-center h-full flex flex-col justify-center">
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand mx-auto mb-6">
|
||||
<Users className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<div className="text-xs font-bold text-brand mb-2 tracking-widest uppercase">
|
||||
配套服务
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-ink mb-3">专业实施服务</h3>
|
||||
<p className="text-sm text-text-secondary leading-relaxed">
|
||||
{suiteCombination.complementaryServices.length}项服务配套，确保方案落地见效
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<ScrollReveal>
|
||||
<div className="p-10 bg-bg-secondary text-center border border-border-primary">
|
||||
<div className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand mb-4">
|
||||
方案价值
|
||||
</div>
|
||||
<p className="text-xl lg:text-2xl text-ink leading-relaxed max-w-4xl mx-auto font-medium">
|
||||
{suiteCombination.rationale}
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface CTASectionProps {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
function CTASection({ solution }: CTASectionProps) {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<div className="flex justify-center mb-7">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-ink tracking-tight leading-tight mb-8">
|
||||
开启您的<br />
|
||||
<span className="text-brand">数字化转型之旅</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-text-secondary mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
联系我们，获取{solution.title}的详细方案和专属报价
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/solutions">查看更多方案</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
interface SolutionDetailContentV2Props {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
export default function SolutionDetailContentV2({ solution }: SolutionDetailContentV2Props) {
|
||||
return (
|
||||
<main>
|
||||
<DetailHero solution={solution} />
|
||||
<ChallengesSection challenges={solution.challenges} />
|
||||
<SolutionsSection solutions={solution.solutions} />
|
||||
<ValuePropositionSection valueProposition={solution.valueProposition} />
|
||||
<SuiteCombinationSection suiteCombination={solution.suiteCombination} />
|
||||
<CTASection solution={solution} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,314 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SOLUTIONS, type Solution } from '@/lib/constants/solutions';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const INDUSTRY_ICONS: Record<string, React.ReactNode> = {
|
||||
制造业: <Factory className="w-7 h-7" />,
|
||||
零售业: <ShoppingCart className="w-7 h-7" />,
|
||||
医疗: <Heart className="w-7 h-7" />,
|
||||
教育: <GraduationCap className="w-7 h-7" />,
|
||||
};
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: '300px 300px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-[85vh] flex items-center overflow-hidden bg-ink"
|
||||
>
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[42%] h-full"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 25%, rgba(196, 30, 58, 0.094) 100%)',
|
||||
clipPath: 'polygon(35% 0, 100% 0, 100% 100%, 0% 100%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full h-2/5 bg-gradient-to-t from-ink to-transparent" />
|
||||
|
||||
<div className="absolute top-24 right-[22%] w-[350px] h-[350px] rounded-full opacity-15 blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10 w-full py-32 lg:py-40">
|
||||
<div className="max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.1, ease: EASE_OUT }}
|
||||
className="mb-10"
|
||||
>
|
||||
<SectionLabel>Industry Solutions</SectionLabel>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 70 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.15, ease: EASE_OUT }}
|
||||
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white leading-[0.85] tracking-tighter mb-12"
|
||||
>
|
||||
<div className="block">深耕行业场景的</div>
|
||||
<div className="block mt-4">
|
||||
<span className="relative">
|
||||
<span className="text-brand">解决方案</span>
|
||||
<motion.span
|
||||
className="absolute -bottom-2 left-0 w-full h-1 bg-brand"
|
||||
style={{ transformOrigin: 'left' }}
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.45, ease: EASE_OUT }}
|
||||
className="text-xl lg:text-2xl text-dark-text-secondary max-w-2xl leading-relaxed mb-12"
|
||||
>
|
||||
端到端交付，推荐套装组合 + 配套服务包。
|
||||
基于自研产品矩阵，为制造业、零售业、教育、医疗等行业量身定制最佳实践。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, delay: 0.6, ease: EASE_OUT }}
|
||||
className="flex flex-wrap gap-6"
|
||||
>
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">浏览产品</a>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.9, ease: EASE_OUT }}
|
||||
className="grid grid-cols-3 gap-12 mt-24 pt-16 border-t border-white/10 max-w-2xl"
|
||||
>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">4<span className="text-brand">+</span></div>
|
||||
<div className="text-sm text-dark-text-muted">行业覆盖</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">端到<span className="text-brand">端</span></div>
|
||||
<div className="text-sm text-dark-text-muted">交付模式</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-5xl font-bold text-white mb-3">定制<span className="text-brand">化</span></div>
|
||||
<div className="text-sm text-dark-text-muted">方案特点</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SolutionsGridSection() {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/12 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12 mb-28">
|
||||
<ScrollReveal className="lg:max-w-3xl">
|
||||
<SectionLabel>Industry Expertise</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white tracking-tight leading-tight">
|
||||
行业解决方案
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1}>
|
||||
<p className="text-dark-text-secondary max-w-md leading-relaxed text-lg">
|
||||
每个方案都明确推荐产品组合和服务包，确保落地效果
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid md:grid-cols-2 gap-8"
|
||||
staggerDelay={0.1}
|
||||
delayChildren={0.05}
|
||||
>
|
||||
{SOLUTIONS.map((solution) => (
|
||||
<SolutionCard key={solution.id} solution={solution} />
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SolutionCard({ solution }: { solution: Solution }) {
|
||||
const industryIcon = INDUSTRY_ICONS[solution.industry] || <Factory className="w-7 h-7" />;
|
||||
|
||||
return (
|
||||
<a
|
||||
href={`/solutions/${solution.id}`}
|
||||
className="group relative block border border-white/10 hover:border-brand/40 bg-ink transition-all duration-600 hover:-translate-y-2 overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="p-10 lg:p-12 relative z-10">
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-soft flex items-center justify-center text-brand group-hover:scale-110 transition-transform duration-500">
|
||||
{industryIcon}
|
||||
</div>
|
||||
<span className="px-4 py-2 text-xs font-bold text-brand bg-brand-soft/50 backdrop-blur-sm">
|
||||
{solution.industry}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="text-dark-text-muted text-sm tracking-widest uppercase mb-2">
|
||||
{solution.subtitle}
|
||||
</div>
|
||||
<h3 className="text-2xl lg:text-3xl font-bold text-white group-hover:translate-x-2 transition-transform duration-500">
|
||||
{solution.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-dark-text-secondary leading-relaxed mb-10">
|
||||
{solution.description}
|
||||
</p>
|
||||
|
||||
<div className="pt-8 border-t border-white/10">
|
||||
<p className="text-[11px] text-dark-text-muted mb-4 uppercase tracking-widest font-bold">
|
||||
推荐产品组合
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{solution.suiteCombination.primaryProducts.map(pid => {
|
||||
const prod = PRODUCTS.find(p => p.id === pid);
|
||||
return prod ? (
|
||||
<span
|
||||
key={pid}
|
||||
className="px-3 py-1.5 text-xs font-medium text-white bg-ink-light border border-white/10 group-hover:border-white/20 transition-colors"
|
||||
>
|
||||
{prod.title.replace('睿新', '').replace('睿视 ', '')}
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
<span className="px-3 py-1.5 text-xs font-bold text-brand bg-brand-soft">
|
||||
+ 配套服务
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-dark-text-muted leading-relaxed">
|
||||
{solution.suiteCombination.rationale}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="inline-flex items-center gap-3 text-sm font-bold text-brand mt-10"
|
||||
whileHover={{ x: 8 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
>
|
||||
<span>了解详情</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function CTASection() {
|
||||
return (
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-[0.08] blur-3xl bg-brand" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white tracking-tight leading-tight mb-8">
|
||||
告诉我们您的行业场景
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-dark-text-secondary leading-relaxed mb-12 max-w-2xl mx-auto">
|
||||
无论您处于哪个行业、哪个数字化阶段，我们都能为您推荐最合适的产品组合和服务包。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
获取定制方案
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products">浏览产品</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SolutionsContentV1() {
|
||||
return (
|
||||
<main>
|
||||
<HeroSection />
|
||||
<SolutionsGridSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,317 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Shield, Building2, Users, Code, Target, Layers, BookOpen, Sparkles } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TEAM_STRENGTHS = [
|
||||
{
|
||||
icon: Shield,
|
||||
number: '01',
|
||||
title: '12 年+ 行业深耕',
|
||||
description: '核心团队长期从事技术咨询、企业数字化等领域，服务覆盖金融、制造、零售、政务、农业等多个行业。',
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
number: '02',
|
||||
title: '大型 IT 企业背景',
|
||||
description: '开发团队成员来自多个大型传统 IT 企业，具备扎实的工程能力、规范化的交付流程和严格的质量意识。',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
number: '03',
|
||||
title: '复合型技术团队',
|
||||
description: '既懂技术又懂业务，能够深入理解客户的真实场景和痛点，提供真正可落地的解决方案。',
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
number: '04',
|
||||
title: '全栈技术能力',
|
||||
description: '从前端到后端、从云原生到数据智能、从移动端到物联网——应对各种复杂技术挑战。',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
number: '05',
|
||||
title: '结果导向交付',
|
||||
description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一个交付成果都追求可量化的业务价值。',
|
||||
},
|
||||
];
|
||||
|
||||
const TEAM_CULTURE = [
|
||||
{
|
||||
icon: Layers,
|
||||
number: '01',
|
||||
title: '扁平化协作',
|
||||
description: '没有冗长的汇报链条，每个人都有机会直接参与决策。信息透明，沟通高效。',
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
number: '02',
|
||||
title: '持续学习',
|
||||
description: '技术日新月异，我们保持对新技术的好奇。内部分享、技术沙龙、外部培训——学习是日常的一部分。',
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
number: '03',
|
||||
title: '客户成功',
|
||||
description: '我们的成就感来自客户的成功。客户的业务增长，就是我们最好的成绩单。',
|
||||
},
|
||||
];
|
||||
|
||||
export default function TeamContentV1() {
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-24 lg:pt-40 lg:pb-32 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/50 to-ink pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Our Team
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<h1 className="mt-8 text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1]">
|
||||
既懂技术又懂业务的
|
||||
<span className="block mt-2 text-brand">复合型团队</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<p className="mt-8 text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed">
|
||||
我们的成员不只是写代码的工程师——我们是能理解您业务场景、能和您一起想清楚问题的合作伙伴。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="mt-12 flex flex-wrap gap-4">
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
与我们交流
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="/about">了解公司</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.4}>
|
||||
<div className="mt-20 grid grid-cols-3 gap-8 md:gap-12 max-w-2xl">
|
||||
<div className="text-center md:text-left">
|
||||
<div className="text-4xl md:text-5xl font-bold text-brand">12+</div>
|
||||
<div className="mt-2 text-sm text-white/50 tracking-wide">年行业经验</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl md:text-5xl font-bold text-white">10+</div>
|
||||
<div className="mt-2 text-sm text-white/50 tracking-wide">核心成员</div>
|
||||
</div>
|
||||
<div className="text-center md:text-right">
|
||||
<div className="text-4xl md:text-5xl font-bold text-white">5+</div>
|
||||
<div className="mt-2 text-sm text-white/50 tracking-wide">行业覆盖</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Strengths Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Team Strengths
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="mt-6 text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
|
||||
我们的底气，从何而来
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
不是自吹自擂，而是多年实战积累的真实能力
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
|
||||
{TEAM_STRENGTHS.map((strength) => {
|
||||
const Icon = strength.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={strength.title}
|
||||
className="group relative p-8 lg:p-10 border border-white/10 hover:border-brand/30 bg-ink/50 transition-all duration-500"
|
||||
whileHover={{ y: -6 }}
|
||||
transition={{ duration: 0.4, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-12 h-12 flex items-center justify-center border border-brand/30 bg-brand/10 text-brand">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-4xl font-bold text-white/10 font-mono">{strength.number}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold mb-3">{strength.title}</h3>
|
||||
<p className="text-white/60 text-sm leading-relaxed">{strength.description}</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team About Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<div className="max-w-4xl mx-auto p-10 lg:p-16 border border-white/10 bg-ink-light/50">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">关于我们的团队</h2>
|
||||
<div className="space-y-6 max-w-3xl mx-auto text-center">
|
||||
<p className="text-white/70 leading-relaxed text-lg">
|
||||
我们的核心团队长期从事<span className="text-brand font-semibold">技术咨询</span>、<span className="text-brand font-semibold">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
|
||||
</p>
|
||||
<p className="text-white/70 leading-relaxed text-lg">
|
||||
开发团队成员来自于多个<span className="text-brand font-semibold">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
|
||||
</p>
|
||||
<p className="text-white/70 leading-relaxed text-lg">
|
||||
我们相信，优秀的技术咨询不仅需要过硬的技术能力，更需要深入理解客户的业务场景和真实需求。
|
||||
每一位成员都是既懂技术又懂业务的复合型人才。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Culture Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Team Culture
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="mt-6 text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
|
||||
我们怎样工作
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
好的团队文化，最终体现在为客户创造的价值上
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{TEAM_CULTURE.map((culture) => {
|
||||
const Icon = culture.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={culture.title}
|
||||
className="group relative p-10 lg:p-12 border border-white/10 hover:border-brand/30 bg-ink/50 transition-all duration-500 text-center"
|
||||
whileHover={{ y: -8 }}
|
||||
transition={{ duration: 0.4, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="w-16 h-16 mx-auto mb-6 flex items-center justify-center border border-brand/30 bg-brand/10 text-brand">
|
||||
<Icon className="w-7 h-7" />
|
||||
</div>
|
||||
|
||||
<span className="block text-6xl font-bold text-white/10 font-mono mb-4">{culture.number}</span>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-4">{culture.title}</h3>
|
||||
<p className="text-white/60 leading-relaxed">{culture.description}</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink to-ink-light pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
|
||||
想成为我们的一员？
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
我们始终在寻找既懂技术又热爱业务的伙伴。如果您认同我们的理念，欢迎聊聊。
|
||||
</p>
|
||||
<div className="mt-12 flex flex-wrap justify-center gap-4">
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="/about">了解公司</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,352 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal';
|
||||
import { ArrowRight, Shield, Building2, Users, Code, Target, Layers, BookOpen, Sparkles } from 'lucide-react';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const TEAM_STRENGTHS = [
|
||||
{
|
||||
icon: Shield,
|
||||
number: '01',
|
||||
title: '12 年+ 行业深耕',
|
||||
description: '核心团队长期从事技术咨询、企业数字化等领域，服务覆盖金融、制造、零售、政务、农业等多个行业。',
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
number: '02',
|
||||
title: '大型 IT 企业背景',
|
||||
description: '开发团队成员来自多个大型传统 IT 企业，具备扎实的工程能力、规范化的交付流程和严格的质量意识。',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
number: '03',
|
||||
title: '复合型技术团队',
|
||||
description: '既懂技术又懂业务，能够深入理解客户的真实场景和痛点，提供真正可落地的解决方案。',
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
number: '04',
|
||||
title: '全栈技术能力',
|
||||
description: '从前端到后端、从云原生到数据智能、从移动端到物联网——应对各种复杂技术挑战。',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
number: '05',
|
||||
title: '结果导向交付',
|
||||
description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一个交付成果都追求可量化的业务价值。',
|
||||
},
|
||||
];
|
||||
|
||||
const TEAM_CULTURE = [
|
||||
{
|
||||
icon: Layers,
|
||||
number: '01',
|
||||
title: '扁平化协作',
|
||||
description: '没有冗长的汇报链条，每个人都有机会直接参与决策。信息透明，沟通高效。',
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
number: '02',
|
||||
title: '持续学习',
|
||||
description: '技术日新月异，我们保持对新技术的好奇。内部分享、技术沙龙、外部培训——学习是日常的一部分。',
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
number: '03',
|
||||
title: '客户成功',
|
||||
description: '我们的成就感来自客户的成功。客户的业务增长，就是我们最好的成绩单。',
|
||||
},
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 12, suffix: '+', label: '年行业经验' },
|
||||
{ value: 10, suffix: '+', label: '核心成员' },
|
||||
{ value: 5, suffix: '+', label: '行业覆盖' },
|
||||
];
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
const [count, setCount] = useState(0);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!start || prefersReducedMotion) {
|
||||
setCount(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
let animationId: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setCount(Math.floor(target * easeOutQuart));
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(target);
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(animationId);
|
||||
}, [target, start, duration, prefersReducedMotion]);
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, start, delay }: { value: number; suffix: string; label: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start, 2000);
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={start ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay, duration: 0.6, ease: EASE_OUT }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="text-4xl sm:text-5xl font-bold text-ink tracking-tight leading-none mb-2">
|
||||
{count}<span className="text-brand">{suffix}</span>
|
||||
</div>
|
||||
<div className="text-sm text-text-muted tracking-wide">{label}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function StrengthCard({ strength, index }: { strength: typeof TEAM_STRENGTHS[0]; index: number }) {
|
||||
const Icon = strength.icon;
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={strength.title}
|
||||
className="group relative border border-border-primary hover:border-brand/30 bg-white transition-all duration-500 overflow-hidden"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
|
||||
whileHover={{ y: -6 }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />
|
||||
|
||||
<div className="p-8 sm:p-10">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-12 h-12 flex items-center justify-center border border-brand/30 bg-brand/[0.08] text-brand">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-4xl font-bold text-text-muted/10 font-mono">{strength.number}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-ink mb-3">{strength.title}</h3>
|
||||
<p className="text-text-secondary text-sm leading-relaxed">{strength.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-brand/40 via-brand/10 to-transparent scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function CultureCard({ culture, index }: { culture: typeof TEAM_CULTURE[0]; index: number }) {
|
||||
const Icon = culture.icon;
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={culture.title}
|
||||
className="group relative border border-border-primary hover:border-brand/30 bg-white transition-all duration-500 text-center overflow-hidden"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1, ease: EASE_OUT }}
|
||||
whileHover={{ y: -8 }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="p-8 sm:p-10 lg:p-12">
|
||||
<div className="w-16 h-16 mx-auto mb-6 flex items-center justify-center border border-brand/30 bg-brand/[0.08] text-brand">
|
||||
<Icon className="w-7 h-7" />
|
||||
</div>
|
||||
|
||||
<span className="block text-6xl font-bold text-text-muted/10 font-mono mb-4">{culture.number}</span>
|
||||
|
||||
<h3 className="text-2xl font-bold text-ink mb-4">{culture.title}</h3>
|
||||
<p className="text-text-secondary leading-relaxed">{culture.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand/20 to-transparent scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-center" />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TeamContentV2() {
|
||||
const statsRef = useRef(null);
|
||||
const isInView = useInView(statsRef, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-ink overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>Our Team</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-[0.92] tracking-tighter mb-10 sm:mb-12 md:mb-16">
|
||||
既懂技术又懂业务的
|
||||
<span className="block mt-4 text-brand">复合型团队</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<p className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12">
|
||||
我们的成员不只是写代码的工程师——我们是能理解您业务场景、能和您一起想清楚问题的合作伙伴。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6 mb-16">
|
||||
<a
|
||||
href="/contact"
|
||||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
|
||||
>
|
||||
与我们交流
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
<a
|
||||
href="/about"
|
||||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
|
||||
>
|
||||
了解公司
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div ref={statsRef} className="grid grid-cols-3 gap-6 sm:gap-8 md:gap-12 max-w-2xl">
|
||||
{STATS.map((stat, idx) => (
|
||||
<StatItem
|
||||
key={stat.label}
|
||||
value={stat.value}
|
||||
suffix={stat.suffix}
|
||||
label={stat.label}
|
||||
start={isInView}
|
||||
delay={idx * 0.15}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Strengths Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
|
||||
<SectionLabel className="justify-center">Team Strengths</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
我们的底气，从何而来
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-text-secondary leading-relaxed">
|
||||
不是自吹自擂，而是多年实战积累的真实能力
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
|
||||
{TEAM_STRENGTHS.map((strength, idx) => (
|
||||
<StrengthCard key={strength.title} strength={strength} index={idx} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team About Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<div className="max-w-4xl mx-auto p-8 sm:p-10 lg:p-16 border border-border-primary bg-bg-secondary/50">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold mb-8 text-center text-ink">关于我们的团队</h2>
|
||||
<div className="space-y-6 max-w-3xl mx-auto text-center">
|
||||
<p className="text-text-secondary leading-relaxed text-base sm:text-lg">
|
||||
我们的核心团队长期从事<span className="text-brand font-semibold">技术咨询</span>、<span className="text-brand font-semibold">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
|
||||
</p>
|
||||
<p className="text-text-secondary leading-relaxed text-base sm:text-lg">
|
||||
开发团队成员来自于多个<span className="text-brand font-semibold">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
|
||||
</p>
|
||||
<p className="text-text-secondary leading-relaxed text-base sm:text-lg">
|
||||
我们相信，优秀的技术咨询不仅需要过硬的技术能力，更需要深入理解客户的业务场景和真实需求。
|
||||
每一位成员都是既懂技术又懂业务的复合型人才。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Culture Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
|
||||
<SectionLabel className="justify-center">Team Culture</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
我们怎样工作
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-text-secondary leading-relaxed">
|
||||
好的团队文化，最终体现在为客户创造的价值上
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{TEAM_CULTURE.map((culture, idx) => (
|
||||
<CultureCard key={culture.title} culture={culture} index={idx} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
想成为我们的一员？
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-text-secondary leading-relaxed">
|
||||
我们始终在寻找既懂技术又热爱业务的伙伴。如果您认同我们的理念，欢迎聊聊。
|
||||
</p>
|
||||
<div className="mt-12 flex flex-col sm:flex-row justify-center gap-4 sm:gap-6">
|
||||
<a
|
||||
href="/contact"
|
||||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
|
||||
>
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
<a
|
||||
href="/about"
|
||||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
|
||||
>
|
||||
了解公司
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,359 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Target, Heart, Lightbulb, CheckCircle2 } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
function GrainOverlay() {
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const CORE_VALUES = [
|
||||
{
|
||||
icon: Target,
|
||||
number: '01',
|
||||
title: '结果导向',
|
||||
description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一次交付，都追求可量化的价值。',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
number: '02',
|
||||
title: '长期主义',
|
||||
description: '不追逐风口，只做真正为客户创造价值的事。您的下一次难题，还愿意第一个想到我们——这才是我们追求的成功。',
|
||||
},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
number: '03',
|
||||
title: '技术驱动',
|
||||
description: '用扎实的工程能力和行业经验赢得信任。技术不是炫技的工具，而是解决真实问题的手段。',
|
||||
},
|
||||
];
|
||||
|
||||
const MILESTONES = [
|
||||
{ date: '2026.01', title: '公司成立', description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立' },
|
||||
{ date: '2026.01', title: '团队组建', description: '核心团队到位，成员来自多个大型 IT 企业，具备扎实的工程能力和规范化交付经验' },
|
||||
{ date: '2026.02', title: '业务启动', description: '推出企业数字化转型咨询与解决方案服务，开始接触首批客户' },
|
||||
{ date: '2026.03', title: '产品研发', description: '自主研发 ERP、CRM 等核心产品，逐步构建产品矩阵' },
|
||||
{ date: '2026.05', title: '研发推进', description: '多款产品进入核心功能开发阶段，同步开展早期用户体验计划' },
|
||||
];
|
||||
|
||||
const PROMISES = [
|
||||
'不卖您用不上的技术',
|
||||
'不说不懂业务的术语',
|
||||
'不做路过就忘的"一锤子买卖"',
|
||||
];
|
||||
|
||||
export default function AboutContentV1() {
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-24 lg:pt-40 lg:pb-32 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/50 to-ink pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
About Us
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<h1 className="mt-8 text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1]">
|
||||
企业数字化转型的
|
||||
<span className="block mt-2 text-brand">同行者</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<p className="mt-8 text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed">
|
||||
以智慧连接数字趋势，以伙伴身份陪您成长。我们不把项目完成当作终点——您的业务增长了吗？您的团队能力提升了吗？这才是我们在意的事。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="mt-12 flex flex-wrap gap-4">
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="/team">认识团队</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.4}>
|
||||
<div className="mt-20 grid grid-cols-3 gap-8 md:gap-12 max-w-2xl">
|
||||
<div className="text-center md:text-left">
|
||||
<div className="text-4xl md:text-5xl font-bold text-brand">12+</div>
|
||||
<div className="mt-2 text-sm text-white/50 tracking-wide">年行业深耕</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl md:text-5xl font-bold text-white">6 款</div>
|
||||
<div className="mt-2 text-sm text-white/50 tracking-wide">自研产品</div>
|
||||
</div>
|
||||
<div className="text-center md:text-right">
|
||||
<div className="text-4xl md:text-5xl font-bold text-white">10+</div>
|
||||
<div className="mt-2 text-sm text-white/50 tracking-wide">人核心团队</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Brand Story Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl">
|
||||
<SectionLabel>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Brand Story
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="mt-6 text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
|
||||
智连未来，成长伙伴
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="mt-16 grid md:grid-cols-2 gap-8">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
<motion.div
|
||||
className="p-10 lg:p-12 border border-white/10 bg-ink/50 backdrop-blur-sm hover:border-brand/30 transition-all duration-500"
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ duration: 0.4, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="text-brand font-mono text-sm tracking-widest mb-6">01 / 智连未来</div>
|
||||
<h3 className="text-2xl font-bold mb-6">智连未来</h3>
|
||||
<div className="space-y-4 text-white/60 leading-relaxed">
|
||||
<p>我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。</p>
|
||||
<p>每一次方案，都源于对您业务场景的洞察；</p>
|
||||
<p>每一次连接，都为了让技术真正服务于您的未来。</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="p-10 lg:p-12 border border-white/10 bg-ink/50 backdrop-blur-sm hover:border-brand/30 transition-all duration-500"
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ duration: 0.4, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="text-brand font-mono text-sm tracking-widest mb-6">02 / 成长伙伴</div>
|
||||
<h3 className="text-2xl font-bold mb-6">成长伙伴</h3>
|
||||
<div className="space-y-4 text-white/60 leading-relaxed">
|
||||
<p>我们不把“项目完成”当作终点。</p>
|
||||
<p>您的业务增长了吗？您的团队能力提升了吗？</p>
|
||||
<p>您下一次遇到难题时，还会第一个想到我们吗？</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="mt-16 p-10 lg:p-12 border border-brand/20 bg-brand/5">
|
||||
<p className="text-lg font-medium mb-8">我们承诺：</p>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{PROMISES.map((promise) => (
|
||||
<div key={promise} className="flex items-start gap-4">
|
||||
<CheckCircle2 className="w-5 h-5 text-brand shrink-0 mt-0.5" />
|
||||
<span className="text-white/70 leading-relaxed">{promise}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-10 text-xl md:text-2xl font-bold leading-relaxed">
|
||||
我们只做一件事：成为您数字化转型路上，信得过的<span className="text-brand">成长伙伴</span>。
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Values Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Core Values
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="mt-6 text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
|
||||
我们坚信的事
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
这些不是墙上的标语，而是每一个决策背后的原则
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
{CORE_VALUES.map((value) => {
|
||||
const Icon = value.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={value.title}
|
||||
className="group relative p-10 lg:p-12 border border-white/10 hover:border-brand/30 bg-ink-light/50 transition-all duration-500"
|
||||
whileHover={{ y: -8 }}
|
||||
transition={{ duration: 0.4, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-14 h-14 flex items-center justify-center border border-brand/30 bg-brand/10 text-brand">
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<span className="text-5xl font-bold text-white/10 font-mono">{value.number}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-4">{value.title}</h3>
|
||||
<p className="text-white/60 leading-relaxed">{value.description}</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Milestones Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Milestones
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="mt-6 text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
|
||||
一路走来，步步扎实
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<div className="relative max-w-3xl mx-auto">
|
||||
<div className="absolute left-6 md:left-[7rem] top-0 bottom-0 w-px bg-white/10" />
|
||||
|
||||
<div className="space-y-10">
|
||||
{MILESTONES.map((milestone, idx) => {
|
||||
const isLatest = idx === MILESTONES.length - 1;
|
||||
return (
|
||||
<motion.div
|
||||
key={milestone.title + milestone.date}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.08, ease: EASE_OUT }}
|
||||
className="relative flex items-start gap-6 md:gap-10"
|
||||
>
|
||||
<div className="w-12 md:w-24 shrink-0 text-right">
|
||||
<span className="text-sm font-mono font-medium text-brand">{milestone.date}</span>
|
||||
</div>
|
||||
|
||||
<div className="relative shrink-0">
|
||||
<div className={`w-4 h-4 rounded-full border-2 border-ink-light mt-1.5 ${isLatest ? 'bg-brand' : 'bg-brand'}`} />
|
||||
{isLatest && (
|
||||
<div className="absolute inset-0 w-4 h-4 rounded-full bg-brand animate-ping opacity-30" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pb-2">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-xl font-bold">{milestone.title}</h3>
|
||||
{isLatest && (
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 text-[10px] font-bold bg-brand/10 text-brand border border-brand/30 tracking-wide">
|
||||
进行中
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-white/60 leading-relaxed">{milestone.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink to-ink-light pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
|
||||
与我们同行
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
无论您是想了解合作机会，还是希望加入我们的团队，都欢迎随时联系。
|
||||
</p>
|
||||
<div className="mt-12 flex flex-wrap justify-center gap-4">
|
||||
<Button size="lg" asChild>
|
||||
<a href="/contact">
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<a href="/team">认识团队</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,380 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { ArrowRight, Target, Heart, Lightbulb, CheckCircle2 } from 'lucide-react';
|
||||
import { GrainOverlay, SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const CORE_VALUES = [
|
||||
{
|
||||
icon: Target,
|
||||
number: '01',
|
||||
title: '结果导向',
|
||||
description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一次交付，都追求可量化的价值。',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
number: '02',
|
||||
title: '长期主义',
|
||||
description: '不追逐风口，只做真正为客户创造价值的事。您的下一次难题，还愿意第一个想到我们——这才是我们追求的成功。',
|
||||
},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
number: '03',
|
||||
title: '技术驱动',
|
||||
description: '用扎实的工程能力和行业经验赢得信任。技术不是炫技的工具，而是解决真实问题的手段。',
|
||||
},
|
||||
];
|
||||
|
||||
const MILESTONES = [
|
||||
{ date: '2026.01', title: '公司成立', description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立' },
|
||||
{ date: '2026.01', title: '团队组建', description: '核心团队到位，成员来自多个大型 IT 企业，具备扎实的工程能力和规范化交付经验' },
|
||||
{ date: '2026.02', title: '业务启动', description: '推出企业数字化转型咨询与解决方案服务，开始接触首批客户' },
|
||||
{ date: '2026.03', title: '产品研发', description: '自主研发 ERP、CRM 等核心产品，逐步构建产品矩阵' },
|
||||
{ date: '2026.05', title: '研发推进', description: '多款产品进入核心功能开发阶段，同步开展早期用户体验计划' },
|
||||
];
|
||||
|
||||
const PROMISES = [
|
||||
'不卖您用不上的技术',
|
||||
'不说不懂业务的术语',
|
||||
'不做路过就忘的"一锤子买卖"',
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: 12, suffix: '+', label: '年行业深耕' },
|
||||
{ value: 6, suffix: '款', label: '自研产品' },
|
||||
{ value: 10, suffix: '+', label: '人核心团队' },
|
||||
];
|
||||
|
||||
function useCountUp(target: number, start: boolean, duration: number = 2000) {
|
||||
const [count, setCount] = useState(0);
|
||||
const prefersReducedMotion = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!start || prefersReducedMotion) {
|
||||
setCount(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
let animationId: number;
|
||||
|
||||
const animate = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
setCount(Math.floor(target * easeOutQuart));
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
setCount(target);
|
||||
}
|
||||
};
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return () => cancelAnimationFrame(animationId);
|
||||
}, [target, start, duration, prefersReducedMotion]);
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
function StatItem({ value, suffix, label, start, delay }: { value: number; suffix: string; label: string; start: boolean; delay: number }) {
|
||||
const count = useCountUp(value, start, 2000);
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={start ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ delay, duration: 0.6, ease: EASE_OUT }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="text-4xl sm:text-5xl font-bold text-white tracking-tight leading-none mb-2">
|
||||
{count}<span className="text-brand">{suffix}</span>
|
||||
</div>
|
||||
<div className="text-sm text-white/50 tracking-wide">{label}</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function ValueCard({ value, index }: { value: typeof CORE_VALUES[0]; index: number }) {
|
||||
const Icon = value.icon;
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="group relative block overflow-hidden bg-ink-light/50 border border-white/[0.06]"
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand" />
|
||||
|
||||
<div className="p-8 sm:p-10 md:p-12">
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div className="w-14 h-14 flex items-center justify-center border border-brand/30 bg-brand/[0.08] text-brand">
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<span className="text-5xl font-bold text-white/[0.06] font-mono">{value.number}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-4">{value.title}</h3>
|
||||
<p className="text-white/60 leading-relaxed">{value.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-brand/40 via-brand/10 to-transparent scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AboutContentV2() {
|
||||
const statsRef = useRef(null);
|
||||
const isInView = useInView(statsRef, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/30 via-transparent to-ink pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>About Us</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-[0.92] tracking-tighter mb-10 sm:mb-12 md:mb-16">
|
||||
企业数字化转型的
|
||||
<span className="block mt-4 text-brand">同行者</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<p className="text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed mb-12">
|
||||
以智慧连接数字趋势，以伙伴身份陪您成长。我们不把项目完成当作终点——您的业务增长了吗？您的团队能力提升了吗？这才是我们在意的事。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
|
||||
<a
|
||||
href="/contact"
|
||||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
|
||||
>
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
<a
|
||||
href="/team"
|
||||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-white border border-white/20 hover:border-white/40 hover:bg-white/[0.03] transition-all duration-300"
|
||||
>
|
||||
认识团队
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div ref={statsRef} className="mt-20 grid grid-cols-3 gap-6 sm:gap-8 md:gap-12 max-w-2xl">
|
||||
{STATS.map((stat, idx) => (
|
||||
<StatItem
|
||||
key={stat.label}
|
||||
value={stat.value}
|
||||
suffix={stat.suffix}
|
||||
label={stat.label}
|
||||
start={isInView}
|
||||
delay={idx * 0.15}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Brand Story Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mb-16 sm:mb-20">
|
||||
<SectionLabel>Brand Story</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
智连未来，成长伙伴
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
<motion.div
|
||||
className="relative p-8 sm:p-10 lg:p-12 border border-white/[0.08] bg-ink/50 overflow-hidden group"
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ duration: 0.4, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand/60" />
|
||||
<div className="text-brand font-mono text-sm tracking-widest mb-6">01 / 智连未来</div>
|
||||
<h3 className="text-2xl font-bold mb-6">智连未来</h3>
|
||||
<div className="space-y-4 text-white/60 leading-relaxed">
|
||||
<p>我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。</p>
|
||||
<p>每一次方案，都源于对您业务场景的洞察；</p>
|
||||
<p>每一次连接，都为了让技术真正服务于您的未来。</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative p-8 sm:p-10 lg:p-12 border border-white/[0.08] bg-ink/50 overflow-hidden group"
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ duration: 0.4, ease: EASE_OUT }}
|
||||
>
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand/60" />
|
||||
<div className="text-brand font-mono text-sm tracking-widest mb-6">02 / 成长伙伴</div>
|
||||
<h3 className="text-2xl font-bold mb-6">成长伙伴</h3>
|
||||
<div className="space-y-4 text-white/60 leading-relaxed">
|
||||
<p>我们不把「项目完成」当作终点。</p>
|
||||
<p>您的业务增长了吗？您的团队能力提升了吗？</p>
|
||||
<p>您下一次遇到难题时，还会第一个想到我们吗？</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="mt-16 p-8 sm:p-10 lg:p-12 border border-brand/20 bg-brand/[0.03]">
|
||||
<p className="text-lg font-medium mb-8">我们承诺：</p>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{PROMISES.map((promise) => (
|
||||
<div key={promise} className="flex items-start gap-4">
|
||||
<CheckCircle2 className="w-5 h-5 text-brand shrink-0 mt-0.5" />
|
||||
<span className="text-white/70 leading-relaxed">{promise}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-10 text-xl md:text-2xl font-bold leading-relaxed">
|
||||
我们只做一件事：成为您数字化转型路上，信得过的<span className="text-brand">成长伙伴</span>。
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Values Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
|
||||
<SectionLabel className="justify-center">Core Values</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
我们坚信的事
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
这些不是墙上的标语，而是每一个决策背后的原则
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{CORE_VALUES.map((value, idx) => (
|
||||
<ValueCard key={value.title} value={value} index={idx} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Milestones Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
|
||||
<SectionLabel className="justify-center">Milestones</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
一路走来，步步扎实
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<div className="relative max-w-3xl mx-auto">
|
||||
<div className="absolute left-6 sm:left-8 md:left-[7rem] top-0 bottom-0 w-px bg-white/10" />
|
||||
|
||||
<div className="space-y-10">
|
||||
{MILESTONES.map((milestone, idx) => {
|
||||
const isLatest = idx === MILESTONES.length - 1;
|
||||
return (
|
||||
<motion.div
|
||||
key={milestone.title + milestone.date}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.08, ease: EASE_OUT }}
|
||||
className="relative flex items-start gap-6 md:gap-10"
|
||||
>
|
||||
<div className="w-12 sm:w-16 md:w-24 shrink-0 text-right">
|
||||
<span className="text-sm font-mono font-medium text-brand">{milestone.date}</span>
|
||||
</div>
|
||||
|
||||
<div className="relative shrink-0">
|
||||
<div className={`w-4 h-4 rounded-full border-2 border-ink-light mt-1.5 ${isLatest ? 'bg-brand' : 'bg-brand'}`} />
|
||||
{isLatest && (
|
||||
<div className="absolute inset-0 w-4 h-4 rounded-full bg-brand animate-ping opacity-30" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pb-2">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-xl font-bold">{milestone.title}</h3>
|
||||
{isLatest && (
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 text-[10px] font-bold bg-brand/10 text-brand border border-brand/30 tracking-wide">
|
||||
进行中
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-white/60 leading-relaxed">{milestone.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink to-ink-light/50 pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
与我们同行
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
无论您是想了解合作机会，还是希望加入我们的团队，都欢迎随时联系。
|
||||
</p>
|
||||
<div className="mt-12 flex flex-col sm:flex-row justify-center gap-4 sm:gap-6">
|
||||
<a
|
||||
href="/contact"
|
||||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
|
||||
>
|
||||
联系我们
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
||||
</a>
|
||||
<a
|
||||
href="/team"
|
||||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-white border border-white/20 hover:border-white/40 hover:bg-white/[0.03] transition-all duration-300"
|
||||
>
|
||||
认识团队
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,441 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Trophy, Users, Briefcase, Award,
|
||||
Target, Heart, Lightbulb, CheckCircle2,
|
||||
Building2, Shield, Zap, TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { MetricCard } from '@/components/ui/metric-card';
|
||||
import { MilestoneTimeline } from '@/components/ui/milestone-timeline';
|
||||
import { GrainOverlay, SectionLabel } from '@/components/ui/page-decoration';
|
||||
|
||||
const CORE_VALUES = [
|
||||
{
|
||||
icon: Target,
|
||||
number: '01',
|
||||
title: '结果导向',
|
||||
description: '不以「项目上线」为终点，以「客户业务是否真正改善」为衡量标准。每一次交付，都追求可量化的价值。',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
number: '02',
|
||||
title: '长期主义',
|
||||
description: '不追逐风口，只做真正为客户创造价值的事。您的下一次难题，还愿意第一个想到我们——这才是我们追求的成功。',
|
||||
},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
number: '03',
|
||||
title: '技术驱动',
|
||||
description: '用扎实的工程能力和行业经验赢得信任。技术不是炫技的工具，而是解决真实问题的手段。',
|
||||
},
|
||||
];
|
||||
|
||||
const MILESTONES = [
|
||||
{
|
||||
year: '2014',
|
||||
title: '团队启航',
|
||||
description: '核心团队始于大型企业数字化转型项目，深耕 ERP、CRM 实施与定制开发，积累了扎实的工程交付能力。',
|
||||
highlight: '服务首批 20+ 企业客户',
|
||||
},
|
||||
{
|
||||
year: '2018',
|
||||
title: '业务扩展',
|
||||
description: '从单一实施服务向全链路咨询转型，建立战略咨询 + 技术落地的双轮驱动模式。',
|
||||
highlight: '客户突破 100 家',
|
||||
},
|
||||
{
|
||||
year: '2021',
|
||||
title: '产品化起步',
|
||||
description: '开始自研产品矩阵，从项目制向「产品+服务」双模式升级，覆盖更多成长型企业需求。',
|
||||
highlight: '3 款自研产品上线',
|
||||
},
|
||||
{
|
||||
year: '2023',
|
||||
title: '行业深耕',
|
||||
description: '聚焦制造、零售、医疗三大核心行业，建立行业解决方案库与最佳实践沉淀。',
|
||||
highlight: '客户续约率 95%+',
|
||||
},
|
||||
{
|
||||
year: '2026',
|
||||
title: '睿新致远成立',
|
||||
description: '四川睿新致远科技有限公司在成都正式成立，以全新品牌开启下一段征程。',
|
||||
highlight: '全新启航，步履不停',
|
||||
},
|
||||
];
|
||||
|
||||
const PROMISES = [
|
||||
'不卖您用不上的技术',
|
||||
'不说不懂业务的术语',
|
||||
'不做路过就忘的「一锤子买卖」',
|
||||
];
|
||||
|
||||
const KEY_METRICS = [
|
||||
{
|
||||
icon: <Building2 className="w-5 h-5" />,
|
||||
label: '服务企业',
|
||||
value: 500,
|
||||
suffix: '+',
|
||||
description: '覆盖制造、零售、医疗、教育等六大行业',
|
||||
trend: { value: '23% YoY', direction: 'up' as const, label: '增长' },
|
||||
accentColor: 'brand' as const,
|
||||
},
|
||||
{
|
||||
icon: <Users className="w-5 h-5" />,
|
||||
label: '专业顾问',
|
||||
value: 200,
|
||||
suffix: '+',
|
||||
description: '10年以上资深顾问占比 40%，平均行业经验 8 年',
|
||||
trend: { value: '年均 30+', direction: 'up' as const, label: '增长' },
|
||||
accentColor: 'blue' as const,
|
||||
},
|
||||
{
|
||||
icon: <Trophy className="w-5 h-5" />,
|
||||
label: '客户满意度',
|
||||
value: 98,
|
||||
suffix: '%',
|
||||
description: '80% 客户合作超过 3 年，续约率 97%',
|
||||
trend: { value: '97% 续约率', direction: 'up' as const, label: '' },
|
||||
accentColor: 'teal' as const,
|
||||
},
|
||||
{
|
||||
icon: <Briefcase className="w-5 h-5" />,
|
||||
label: '行业经验',
|
||||
value: 12,
|
||||
suffix: '年',
|
||||
description: '跨越四轮技术变革周期，持续进化',
|
||||
trend: { value: 'since 2014', direction: 'neutral' as const, label: '' },
|
||||
accentColor: 'amber' as const,
|
||||
},
|
||||
];
|
||||
|
||||
const CERTIFICATIONS = [
|
||||
{ name: 'ISO 27001', desc: '信息安全管理体系认证', icon: Shield },
|
||||
{ name: 'ISO 9001', desc: '质量管理体系认证', icon: Award },
|
||||
{ name: 'CMMI 3级', desc: '软件能力成熟度认证', icon: Zap },
|
||||
{ name: '高新技术企业', desc: '国家高新技术企业认定', icon: Trophy },
|
||||
];
|
||||
|
||||
const PARTNERS = [
|
||||
'SAP', 'Oracle', 'Salesforce', 'Microsoft',
|
||||
'阿里云', '腾讯云', '华为云', '金蝶',
|
||||
];
|
||||
|
||||
function ValueCard({ value, index: _index }: { value: typeof CORE_VALUES[0]; index: number }) {
|
||||
const Icon = value.icon;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group relative block overflow-hidden bg-ink-light/50 border border-white/[0.06]"
|
||||
>
|
||||
<div className="absolute top-0 left-0 bottom-0 w-1 bg-brand" />
|
||||
|
||||
<div className="p-8 sm:p-10 md:p-12">
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div className="w-14 h-14 flex items-center justify-center border border-brand/30 bg-brand/[0.08] text-brand">
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<span className="text-5xl font-bold text-white/[0.06] font-mono">{value.number}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-4">{value.title}</h3>
|
||||
<p className="text-white/60 leading-relaxed">{value.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-brand/40 via-brand/10 to-transparent scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AboutContentV3() {
|
||||
return (
|
||||
<div className="min-h-screen bg-ink text-white overflow-x-hidden" data-theme="dark">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[85vh] flex items-center overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink-light/30 via-transparent to-ink pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
|
||||
<div className="max-w-4xl">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>About Us</SectionLabel>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold leading-[0.92] tracking-tighter mb-10 sm:mb-12 md:mb-16">
|
||||
企业数字化转型的
|
||||
<span className="block mt-4 text-brand">同行者</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<p className="text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed mb-12">
|
||||
十二年深耕，五百余家企业的共同选择。我们不把项目完成当作终点——您的业务增长了吗？您的团队能力提升了吗？这才是我们在意的事。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
|
||||
<a
|
||||
href="/contact"
|
||||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
|
||||
>
|
||||
联系我们
|
||||
<TrendingUp className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</a>
|
||||
<a
|
||||
href="/services"
|
||||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-white border border-white/20 hover:border-white/40 hover:bg-white/[0.03] transition-all duration-300 min-h-[52px] touch-manipulation"
|
||||
>
|
||||
了解服务
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Metrics Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-12 sm:mb-16">
|
||||
<SectionLabel className="justify-center">By The Numbers</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
用数据说话的专业实力
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
十二年积累，每一个数字背后都是真实的客户价值与扎实的交付承诺
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||||
{KEY_METRICS.map((metric, i) => (
|
||||
<ScrollReveal key={metric.label} delay={i * 0.08}>
|
||||
<div className="h-full">
|
||||
<MetricCard
|
||||
icon={metric.icon}
|
||||
label={metric.label}
|
||||
value={metric.value}
|
||||
suffix={metric.suffix}
|
||||
description={metric.description}
|
||||
trend={metric.trend}
|
||||
accentColor={metric.accentColor}
|
||||
theme="dark"
|
||||
className="h-full"
|
||||
/>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Brand Story Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<div className="grid lg:grid-cols-12 gap-10 sm:gap-12 md:gap-16 items-start">
|
||||
<ScrollReveal className="lg:col-span-5">
|
||||
<SectionLabel>Brand Story</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight mb-8">
|
||||
智连未来，<br />成长伙伴
|
||||
</h2>
|
||||
<p className="text-white/60 leading-relaxed text-lg mb-8">
|
||||
我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。每一次方案，都源于对您业务场景的洞察；每一次连接，都为了让技术真正服务于您的未来。
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-brand/10 border border-brand/30 flex items-center justify-center">
|
||||
<Heart className="w-5 h-5 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold">三不原则</div>
|
||||
<div className="text-sm text-white/50">我们对客户的承诺</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="lg:col-span-7">
|
||||
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
|
||||
<div className="grid sm:grid-cols-2 gap-4 md:gap-6">
|
||||
{PROMISES.map((promise, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="relative p-6 sm:p-8 border border-white/[0.08] bg-ink-light/50 group hover:border-brand/30 hover:bg-ink-light transition-all duration-500"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-1 h-0 bg-brand group-hover:h-full transition-all duration-500" />
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-8 h-8 rounded-full bg-brand/10 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<CheckCircle2 className="w-4 h-4 text-brand" />
|
||||
</div>
|
||||
<p className="text-white/80 leading-relaxed font-medium">{promise}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="sm:col-span-2 p-6 sm:p-8 border border-brand/20 bg-brand/[0.03]">
|
||||
<p className="text-xl md:text-2xl font-bold leading-relaxed">
|
||||
我们只做一件事：成为您数字化转型路上，
|
||||
<span className="text-brand">信得过的成长伙伴</span>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Values Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
|
||||
<SectionLabel className="justify-center">Core Values</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
我们坚信的事
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
这些不是墙上的标语，而是每一个决策背后的原则
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 md:gap-8">
|
||||
{CORE_VALUES.map((value, idx) => (
|
||||
<ScrollReveal key={value.title} delay={idx * 0.1}>
|
||||
<ValueCard value={value} index={idx} />
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Milestones Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-ink">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
|
||||
<SectionLabel className="justify-center">Our Journey</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
一路走来，步步扎实
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
从 2014 到 2026，十二年只是起点
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<MilestoneTimeline
|
||||
items={MILESTONES.map((m) => ({
|
||||
year: m.year,
|
||||
title: m.title,
|
||||
description: m.description,
|
||||
highlight: m.highlight,
|
||||
}))}
|
||||
variant="vertical"
|
||||
theme="dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Certifications & Partners Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-ink-light">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<div className="grid lg:grid-cols-2 gap-12 md:gap-16">
|
||||
<ScrollReveal>
|
||||
<SectionLabel>Certifications</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight leading-tight mb-8">
|
||||
资质与认证
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{CERTIFICATIONS.map((cert) => {
|
||||
const Icon = cert.icon;
|
||||
return (
|
||||
<div
|
||||
key={cert.name}
|
||||
className="p-5 sm:p-6 border border-white/[0.08] bg-ink/50 hover:border-brand/30 transition-all duration-300 group"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-brand/10 flex items-center justify-center mb-4 text-brand group-hover:scale-110 transition-transform duration-300">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="font-semibold mb-1">{cert.name}</div>
|
||||
<div className="text-sm text-white/50">{cert.desc}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<SectionLabel>Partners</SectionLabel>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight leading-tight mb-8">
|
||||
生态合作伙伴
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{PARTNERS.map((partner) => (
|
||||
<div
|
||||
key={partner}
|
||||
className="aspect-[3/2] flex items-center justify-center border border-white/[0.08] bg-ink/30 hover:border-white/20 hover:bg-ink/50 transition-all duration-300 group"
|
||||
>
|
||||
<span className="text-sm font-bold text-white/40 group-hover:text-white/70 transition-colors duration-300">
|
||||
{partner}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-6 text-sm text-white/40 leading-relaxed">
|
||||
与全球顶尖的软件厂商和云服务提供商建立深度合作，确保为客户提供最优质的技术方案与服务保障。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden">
|
||||
<GrainOverlay />
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-ink to-ink-light/50 pointer-events-none" />
|
||||
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="text-center max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-tight">
|
||||
与我们同行
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-white/60 leading-relaxed">
|
||||
无论您是想了解合作机会，还是希望加入我们的团队，都欢迎随时联系。
|
||||
</p>
|
||||
<div className="mt-12 flex flex-col sm:flex-row justify-center gap-4 sm:gap-6">
|
||||
<a
|
||||
href="/contact"
|
||||
className="group inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90 min-h-[52px] touch-manipulation"
|
||||
>
|
||||
联系我们
|
||||
<TrendingUp className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||
</a>
|
||||
<a
|
||||
href="/services"
|
||||
className="inline-flex items-center justify-center gap-3 px-12 py-6 font-semibold text-base text-white border border-white/20 hover:border-white/40 hover:bg-white/[0.03] transition-all duration-300 min-h-[52px] touch-manipulation"
|
||||
>
|
||||
了解服务
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,11 +5,19 @@ import Image from 'next/image';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ArrowRight, Lightbulb, Database, Layers } from 'lucide-react';
|
||||
import { ArrowRight, Lightbulb, Database, Layers, Code, Puzzle, Server } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
|
||||
// ===== 服务图标映射：将字符串键名映射为 Lucide 组件 =====
|
||||
const SERVICE_ICON_MAP: Record<string, React.ReactNode> = {
|
||||
Lightbulb: <Lightbulb className="w-7 h-7" />,
|
||||
Code: <Code className="w-7 h-7" />,
|
||||
Server: <Server className="w-7 h-7" />,
|
||||
Puzzle: <Puzzle className="w-7 h-7" />,
|
||||
};
|
||||
|
||||
// ===== 服务数据降级兜底 =====
|
||||
const FALLBACK_SERVICES = [
|
||||
{
|
||||
@@ -236,8 +244,13 @@ function TrustSection() {
|
||||
|
||||
// ===== 服务区：等宽三列卡片 + 兜底数据 =====
|
||||
function ServicesSection({ services }: { services?: Record<string, any>[] }) {
|
||||
const hasValidData = services?.length && services[0]?.title;
|
||||
const SERVICE_ITEMS = hasValidData ? services! : FALLBACK_SERVICES;
|
||||
const hasValidData = services?.length && (services![0] as any)?.subtitle;
|
||||
const SERVICE_ITEMS = hasValidData
|
||||
? services!.map((s: Record<string, any>) => ({
|
||||
...s,
|
||||
icon: SERVICE_ICON_MAP[s.icon as string] || <Server className="w-7 h-7" />,
|
||||
})) as Record<string, any>[]
|
||||
: FALLBACK_SERVICES;
|
||||
|
||||
return (
|
||||
<section className="relative py-20 sm:py-28 md:py-36 overflow-hidden bg-bg-secondary">
|
||||
|
||||
@@ -28,7 +28,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
<section className="pt-32 pb-12">
|
||||
<div className="container-wide">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-2 text-sm text-[var(--color-text-muted)] mb-8">
|
||||
<nav aria-label="breadcrumb" className="flex items-center gap-2 text-sm text-[var(--color-text-muted)] mb-8">
|
||||
<StaticLink href="/news" className="hover:text-[var(--color-brand)] transition-colors duration-300">
|
||||
新闻动态
|
||||
</StaticLink>
|
||||
|
||||
@@ -62,7 +62,7 @@ export default function NewsDetailContentV3({ news, relatedNews = [] }: NewsDeta
|
||||
<section className="relative pt-28 sm:pt-32 md:pt-40 pb-16 sm:pb-20 md:pb-24 overflow-hidden">
|
||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<nav className="flex items-center gap-2 text-sm text-text-muted mb-8 sm:mb-10">
|
||||
<nav aria-label="breadcrumb" className="flex items-center gap-2 text-sm text-text-muted mb-8 sm:mb-10">
|
||||
<a href="/news" className="hover:text-brand transition-colors duration-300">
|
||||
新闻动态
|
||||
</a>
|
||||
|
||||
@@ -1,451 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
ArrowRight,
|
||||
CheckCircle2,
|
||||
Zap,
|
||||
Shield,
|
||||
TrendingUp,
|
||||
Clock,
|
||||
Database,
|
||||
Users,
|
||||
BarChart3,
|
||||
Target,
|
||||
Layers,
|
||||
Settings,
|
||||
} from 'lucide-react';
|
||||
import { PRODUCTS } from '@/lib/constants';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
|
||||
|
||||
function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-5 mb-7', className)}>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
{children}
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const PAIN_POINTS = [
|
||||
{
|
||||
icon: Database,
|
||||
title: '数据孤岛',
|
||||
desc: '财务、采购、销售、库存各有系统，数据分散，对账耗时耗力',
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: '效率低下',
|
||||
desc: '大量人工重复操作，流程不透明，审批周期长，决策缺乏数据支撑',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: '安全隐患',
|
||||
desc: '老旧系统维护困难，数据安全缺乏保障，合规风险日益严峻',
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: '增长瓶颈',
|
||||
desc: '系统跟不上业务发展，新需求响应慢，成为企业数字化转型的绊脚石',
|
||||
},
|
||||
];
|
||||
|
||||
const UPGRADE_BENEFITS = [
|
||||
{
|
||||
icon: Zap,
|
||||
value: '40%+',
|
||||
title: '运营效率提升',
|
||||
desc: '流程自动化，减少人工重复操作，让团队聚焦高价值工作',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
value: '99.2%',
|
||||
title: '数据准确性',
|
||||
desc: '实时数据同步，消除信息孤岛，决策基于真实数据',
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
value: '70%',
|
||||
title: '月结时间缩短',
|
||||
desc: '从5天到1天，财务结账效率大幅提升',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
value: '100%',
|
||||
title: '合规安全保障',
|
||||
desc: '等保三级+ISO27001+信创认证，数据安全无忧',
|
||||
},
|
||||
];
|
||||
|
||||
const UPGRADE_PROCESS = [
|
||||
{
|
||||
step: '01',
|
||||
title: '现状诊断',
|
||||
desc: '全面评估现有系统与业务流程，识别核心痛点与优化空间',
|
||||
duration: '1-2 周',
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: '方案设计',
|
||||
desc: '定制化升级方案，明确功能模块、数据迁移策略与实施路径',
|
||||
duration: '2-3 周',
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: '系统部署',
|
||||
desc: '私有化部署实施，数据安全迁移，系统配置与集成对接',
|
||||
duration: '1-3 个月',
|
||||
},
|
||||
{
|
||||
step: '04',
|
||||
title: '培训上线',
|
||||
desc: '分层用户培训，试运行验证，正式上线与持续优化',
|
||||
duration: '2-4 周',
|
||||
},
|
||||
];
|
||||
|
||||
const FEATURE_MODULES = [
|
||||
{ icon: BarChart3, title: '财务管理', desc: '总账、应收应付、成本核算、固定资产' },
|
||||
{ icon: Users, title: '采购管理', desc: '供应商、采购订单、入库验收、采购分析' },
|
||||
{ icon: Target, title: '销售管理', desc: '客户管理、销售订单、发货管理、销售分析' },
|
||||
{ icon: Database, title: '库存管理', desc: '库存查询、出入库、库存预警、盘点管理' },
|
||||
{ icon: Layers, title: '生产管理', desc: '生产计划、物料需求、生产订单、成本核算' },
|
||||
{ icon: Settings, title: '报表分析', desc: '丰富报表模板，支持自定义报表与数据分析' },
|
||||
];
|
||||
|
||||
export default function ErpUpgradeContentV1() {
|
||||
const product = PRODUCTS.find((p) => p.id === 'erp')!;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-ink overflow-x-hidden">
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-32 pb-32 lg:pt-40 lg:pb-40 overflow-hidden">
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal>
|
||||
<Badge variant="outline" className="mb-8 border-brand/30 text-brand text-sm px-4 py-2">
|
||||
企业数字化升级专题
|
||||
</Badge>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1] max-w-4xl text-ink">
|
||||
您的ERP系统
|
||||
<br />
|
||||
<span className="text-brand">还能跟上业务吗？</span>
|
||||
</h1>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2}>
|
||||
<p className="mt-8 text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed">
|
||||
数据孤岛、效率低下、安全隐患——当老旧系统成为业务增长的瓶颈，是时候进行一次真正的升级了。
|
||||
睿新ERP，为企业数字化转型而生。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3}>
|
||||
<div className="mt-12 flex flex-wrap gap-4">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
免费诊断咨询
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="#features">了解功能模块</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pain Points Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mb-16">
|
||||
<SectionLabel>Pain Points</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
这些痛点，您的企业
|
||||
<span className="text-brand">中了几个？</span>
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8"
|
||||
delayChildren={0.08}
|
||||
>
|
||||
{PAIN_POINTS.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative border border-border-primary hover:border-brand/30 bg-white p-8 lg:p-10 transition-all duration-500 hover:-translate-y-1 overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="w-14 h-14 bg-brand/10 border border-brand/20 flex items-center justify-center mb-6">
|
||||
<item.icon className="w-7 h-7 text-brand" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold mb-3 text-ink">{item.title}</h3>
|
||||
<p className="text-text-secondary leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mb-16">
|
||||
<SectionLabel>Upgrade Benefits</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
升级之后，
|
||||
<span className="text-brand">不止是换个系统</span>
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-text-secondary leading-relaxed">
|
||||
这是一次全面的业务流程再造，让数据驱动决策，让效率产生价值。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
|
||||
delayChildren={0.08}
|
||||
>
|
||||
{UPGRADE_BENEFITS.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="text-center p-8 border border-border-primary bg-white hover:border-brand/30 hover:bg-bg-secondary transition-all duration-500 group"
|
||||
>
|
||||
<div className="w-12 h-12 mx-auto mb-6 bg-brand/10 border border-brand/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<item.icon className="w-6 h-6 text-brand" />
|
||||
</div>
|
||||
<div className="text-4xl md:text-5xl font-bold text-brand mb-3">{item.value}</div>
|
||||
<h4 className="text-base font-semibold mb-2 text-ink">{item.title}</h4>
|
||||
<p className="text-sm text-text-muted leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="relative py-24 lg:py-32 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mb-16">
|
||||
<SectionLabel>Core Modules</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
六大核心模块，
|
||||
<span className="text-brand">覆盖企业全链路</span>
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerReveal
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"
|
||||
delayChildren={0.06}
|
||||
>
|
||||
{FEATURE_MODULES.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative border border-border-primary hover:border-brand/30 bg-white p-8 transition-all duration-500 hover:-translate-y-1 overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-brand/10 border border-brand/20 flex items-center justify-center shrink-0">
|
||||
<item.icon className="w-6 h-6 text-brand" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2 text-ink">{item.title}</h3>
|
||||
<p className="text-text-secondary text-sm leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Process Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mb-16">
|
||||
<SectionLabel>Upgrade Process</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
四步升级法，
|
||||
<span className="text-brand">平稳过渡零风险</span>
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-text-secondary leading-relaxed">
|
||||
成熟的实施方法论，确保升级过程业务不中断、数据零丢失。
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
<div className="hidden lg:block absolute top-20 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<StaggerReveal
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
|
||||
delayChildren={0.1}
|
||||
>
|
||||
{UPGRADE_PROCESS.map((item, index) => (
|
||||
<div key={index} className="relative">
|
||||
<div className="text-6xl font-bold text-brand/10 mb-4">{item.step}</div>
|
||||
<h3 className="text-xl font-semibold mb-3 text-ink">{item.title}</h3>
|
||||
<p className="text-text-secondary mb-4 leading-relaxed">{item.desc}</p>
|
||||
<div className="inline-flex items-center gap-2 text-sm text-brand">
|
||||
<Clock className="w-4 h-4" />
|
||||
{item.duration}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Case Study Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mb-16">
|
||||
<SectionLabel>Case Study</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
真实案例：
|
||||
<span className="text-brand">某大型制造集团</span>
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1}>
|
||||
<div className="border border-border-primary bg-white p-8 lg:p-12 relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-brand" />
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8 lg:gap-12">
|
||||
<div>
|
||||
<Badge variant="outline" className="mb-4 border-brand/30 text-brand">
|
||||
制造业
|
||||
</Badge>
|
||||
<h3 className="text-xl font-semibold mb-4 text-ink">客户背景</h3>
|
||||
<p className="text-text-secondary leading-relaxed">
|
||||
某大型制造集团，拥有5个生产基地，员工5000+人。原有ERP系统已使用10年，无法满足业务快速发展需求。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-4 text-ink">核心挑战</h3>
|
||||
<ul className="space-y-3">
|
||||
{['财务、采购、销售、库存数据分散', '月结耗时5天以上，数据准确性差', '多工厂协同困难，库存周转率低', '系统扩展性差，新需求响应慢'].map((item, i) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-brand shrink-0 mt-0.5" />
|
||||
<span className="text-text-secondary">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-4 text-ink">升级成果</h3>
|
||||
<ul className="space-y-3">
|
||||
{['月结时间从5天缩短至1天', '库存准确率提升至99.2%', '库存周转率提升35%', '运营效率整体提升40%+'].map((item, i) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
<TrendingUp className="w-5 h-5 text-brand shrink-0 mt-0.5" />
|
||||
<span className="text-text-secondary">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Certifications Section */}
|
||||
<section className="relative py-24 lg:py-32 overflow-hidden bg-white">
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mb-16 text-center mx-auto">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Security & Compliance
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight text-ink">
|
||||
企业级安全认证，
|
||||
<span className="text-brand">数据安全无忧</span>
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerReveal
|
||||
className="flex flex-wrap justify-center gap-6 md:gap-10"
|
||||
delayChildren={0.1}
|
||||
>
|
||||
{product.certifications.map((cert, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group text-center p-8 border border-border-primary bg-white hover:border-brand/30 hover:bg-bg-secondary transition-all duration-500 min-w-[200px]"
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-4 bg-brand/10 border border-brand/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<Shield className="w-8 h-8 text-brand" />
|
||||
</div>
|
||||
<h4 className="text-base font-semibold mb-1 text-ink">{cert.name}</h4>
|
||||
<p className="text-sm text-text-muted">{cert.issuer}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="relative py-36 lg:py-44 overflow-hidden bg-bg-secondary">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
|
||||
|
||||
<div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
|
||||
<ScrollReveal className="max-w-3xl mx-auto text-center">
|
||||
<SectionLabel className="justify-center">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
<span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
|
||||
Get Started
|
||||
</span>
|
||||
<div className="w-14 h-px bg-brand" />
|
||||
</div>
|
||||
</SectionLabel>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl lg:text-6xl font-bold text-ink tracking-tight leading-tight mb-8">
|
||||
准备好升级了吗？
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-text-secondary leading-relaxed mb-12">
|
||||
免费现状诊断 + 定制化升级方案。让我们聊聊您的需求，看看睿新ERP能为您带来什么。
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<Button size="xl" asChild>
|
||||
<a href="/contact">
|
||||
预约免费诊断
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button size="xl" variant="outline" asChild>
|
||||
<a href="/products/erp">查看产品详情</a>
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,7 +12,6 @@ import {
|
||||
Clock,
|
||||
Database,
|
||||
Users,
|
||||
BarChart3,
|
||||
Target,
|
||||
Layers,
|
||||
Settings,
|
||||
@@ -114,7 +113,7 @@ const UPGRADE_PROCESS = [
|
||||
];
|
||||
|
||||
const FEATURE_MODULES = [
|
||||
{ icon: BarChart3, title: '财务管理', desc: '总账、应收应付、成本核算、固定资产' },
|
||||
{ icon: TrendingUp, title: '财务管理', desc: '总账、应收应付、成本核算、固定资产' },
|
||||
{ icon: Users, title: '采购管理', desc: '供应商、采购订单、入库验收、采购分析' },
|
||||
{ icon: Target, title: '销售管理', desc: '客户管理、销售订单、发货管理、销售分析' },
|
||||
{ icon: Database, title: '库存管理', desc: '库存查询、出入库、库存预警、盘点管理' },
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Package, Check, Settings, BarChart3, Users, FileText, Cpu, Shield, TrendingUp } from 'lucide-react';
|
||||
import { ArrowRight, Package, Check, Settings, Users, FileText, Cpu, Shield, TrendingUp } from 'lucide-react';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
import { MethodologyFramework, TechStackShowcase, FAQSection, DataProofSection } from '@/components/content/sections';
|
||||
|
||||
const PRODUCT_ICONS: Record<string, React.ReactNode> = {
|
||||
'睿新ERP管理系统': <Package className="w-8 h-8" />,
|
||||
'睿视商业智能分析平台': <BarChart3 className="w-8 h-8" />,
|
||||
'睿视商业智能分析平台': <TrendingUp className="w-8 h-8" />,
|
||||
'睿新客户关系管理系统': <Users className="w-8 h-8" />,
|
||||
'睿新协同办公平台': <Settings className="w-8 h-8" />,
|
||||
'睿新内容管理系统': <FileText className="w-8 h-8" />,
|
||||
|
||||
@@ -79,7 +79,7 @@ jest.mock('lucide-react', () => {
|
||||
ArrowRight: mockIcon('arrow-right'),
|
||||
Package: mockIcon('package'),
|
||||
Cpu: mockIcon('cpu'),
|
||||
BarChart3: mockIcon('barchart3'),
|
||||
TrendingUp: mockIcon('trendingup'),
|
||||
Users: mockIcon('users'),
|
||||
Settings: mockIcon('settings'),
|
||||
FileText: mockIcon('file-text'),
|
||||
|
||||
@@ -6,7 +6,7 @@ import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { ArrowRight, Package, Cpu, BarChart3, Users, Settings, FileText } from 'lucide-react';
|
||||
import { ArrowRight, Package, Cpu, TrendingUp, Users, Settings, FileText } from 'lucide-react';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
@@ -14,7 +14,7 @@ const EASE_SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const;
|
||||
|
||||
const PRODUCT_ICONS: Record<string, React.ReactNode> = {
|
||||
'睿新ERP管理系统': <Package className="w-5 h-5" />,
|
||||
'睿新商业智能分析平台': <BarChart3 className="w-5 h-5" />,
|
||||
'睿新商业智能分析平台': <TrendingUp className="w-5 h-5" />,
|
||||
'睿新客户关系管理系统': <Users className="w-5 h-5" />,
|
||||
'睿新协同办公平台': <Settings className="w-5 h-5" />,
|
||||
'睿新内容管理系统': <FileText className="w-5 h-5" />,
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowUpRight, CheckCircle2 } from 'lucide-react';
|
||||
import { ArrowUpRight, CheckCircle2, Zap, Clock, Users, Award, TrendingUp, Shield } from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import type { Service, CaseStudy } from '@/lib/constants/services';
|
||||
|
||||
const EASE_OUT = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
const FEATURE_ICONS = ['⚡', '⏱', '👥', '🏆', '📈', '🛡'];
|
||||
const FEATURE_ICONS: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp, Shield];
|
||||
|
||||
function DetailHero({ service }: { service: Service }) {
|
||||
const firstBenefit = service.benefits?.[0] || '效率提升 40%';
|
||||
@@ -169,7 +170,7 @@ function FeaturesSection({ service }: { service: Service }) {
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary">
|
||||
{service.features.map((feature, index) => {
|
||||
const [title, desc] = feature.split('：');
|
||||
const icon = FEATURE_ICONS[index % FEATURE_ICONS.length];
|
||||
const Icon = FEATURE_ICONS[index % FEATURE_ICONS.length]!;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@@ -181,7 +182,7 @@ function FeaturesSection({ service }: { service: Service }) {
|
||||
className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-white"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<div className="text-3xl mb-6">{icon}</div>
|
||||
<Icon className="w-8 h-8 mb-6 text-brand" />
|
||||
<h3 className="text-lg sm:text-xl font-bold mb-3 text-ink group-hover:text-brand transition-colors duration-300">
|
||||
{desc ? title : feature.slice(0, 10)}
|
||||
</h3>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Lightbulb, Settings, Users, TrendingUp, Package, BarChart3, BookOpen, MessageSquare, Calendar, Smartphone } from 'lucide-react';
|
||||
import { ArrowRight, Factory, ShoppingCart, Heart, GraduationCap, Lightbulb, Settings, Users, TrendingUp, Package, BookOpen, MessageSquare, Calendar, Smartphone, Route, Shield, Truck } from 'lucide-react';
|
||||
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
@@ -18,9 +18,8 @@ const INDUSTRY_ICONS: Record<string, React.ReactNode> = {
|
||||
const VALUE_ICONS: Record<string, React.ReactNode> = {
|
||||
Factory: <Factory className="w-6 h-6" />,
|
||||
Package: <Package className="w-6 h-6" />,
|
||||
BarChart3: <BarChart3 className="w-6 h-6" />,
|
||||
Users: <Users className="w-6 h-6" />,
|
||||
TrendingUp: <TrendingUp className="w-6 h-6" />,
|
||||
Users: <Users className="w-6 h-6" />,
|
||||
ShoppingCart: <ShoppingCart className="w-6 h-6" />,
|
||||
GraduationCap: <GraduationCap className="w-6 h-6" />,
|
||||
BookOpen: <BookOpen className="w-6 h-6" />,
|
||||
@@ -28,6 +27,9 @@ const VALUE_ICONS: Record<string, React.ReactNode> = {
|
||||
Heart: <Heart className="w-6 h-6" />,
|
||||
Calendar: <Calendar className="w-6 h-6" />,
|
||||
Smartphone: <Smartphone className="w-6 h-6" />,
|
||||
Route: <Route className="w-6 h-6" />,
|
||||
Shield: <Shield className="w-6 h-6" />,
|
||||
Truck: <Truck className="w-6 h-6" />,
|
||||
};
|
||||
|
||||
interface DetailHeroProps {
|
||||
|
||||
@@ -7,7 +7,6 @@ import {
|
||||
ArrowRight,
|
||||
Zap,
|
||||
Shield,
|
||||
BarChart3,
|
||||
Cpu,
|
||||
TrendingUp,
|
||||
Clock,
|
||||
@@ -21,7 +20,7 @@ interface ProductValueSectionProps {
|
||||
product: Product;
|
||||
}
|
||||
|
||||
const featureIcons: LucideIcon[] = [Zap, Shield, BarChart3, Cpu];
|
||||
const featureIcons: LucideIcon[] = [Zap, Shield, TrendingUp, Cpu];
|
||||
|
||||
function FeatureTags({ text }: { text: string }) {
|
||||
const [title, ...descParts] = text.split('：');
|
||||
|
||||
@@ -153,7 +153,7 @@ jest.mock('lucide-react', () => {
|
||||
'ArrowRight', 'Sparkles', 'ChevronDown', 'Zap', 'Shield',
|
||||
'CheckCircle2', 'MessageCircle', 'Download', 'Package',
|
||||
'Lightbulb', 'Wrench', 'TrendingUp', 'Clock', 'Award',
|
||||
'Users', 'BarChart3', 'Cpu', 'ExternalLink',
|
||||
'Users', 'Cpu', 'ExternalLink',
|
||||
];
|
||||
for (const name of names) {
|
||||
const Icon = (props: any) => (
|
||||
|
||||
@@ -22,7 +22,7 @@ export function Footer() {
|
||||
<div className="mb-6">
|
||||
<StaticLink href="/" className="inline-block group" aria-label="返回首页">
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
src="/logo-white.svg"
|
||||
alt={config.name}
|
||||
width={180}
|
||||
height={45}
|
||||
|
||||
@@ -15,7 +15,7 @@ jest.mock('lucide-react', () => {
|
||||
ArrowUpRight: mockIcon('arrow-up-right'),
|
||||
Database: mockIcon('database'),
|
||||
Users: mockIcon('users'),
|
||||
BarChart3: mockIcon('bar-chart-3'),
|
||||
TrendingUp: mockIcon('trending-up'),
|
||||
FileText: mockIcon('file-text'),
|
||||
Truck: mockIcon('truck'),
|
||||
Building2: mockIcon('building2'),
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { ArrowUpRight, Database, Users, BarChart3, FileText, Truck, Building2 } from 'lucide-react';
|
||||
import { ArrowUpRight, Database, Users, TrendingUp, FileText, Truck, Building2 } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
@@ -12,7 +12,7 @@ interface ProductCardProps {
|
||||
status?: '研发中' | '内测中' | '已发布';
|
||||
}
|
||||
|
||||
const productIcons: LucideIcon[] = [Database, Users, FileText, BarChart3, Truck, Building2];
|
||||
const productIcons: LucideIcon[] = [Database, Users, FileText, TrendingUp, Truck, Building2];
|
||||
|
||||
const PRODUCT_COLORS = [
|
||||
{ bg: 'rgba(var(--color-brand-rgb), 0.08)', text: 'var(--color-brand)', border: 'rgba(var(--color-brand-rgb), 0.12)' },
|
||||
|
||||
@@ -11,9 +11,7 @@ export {
|
||||
type StatItem,
|
||||
SERVICES,
|
||||
PRODUCTS,
|
||||
PRODUCT_CATEGORIES,
|
||||
type Product,
|
||||
type ProductCategory,
|
||||
NEWS,
|
||||
type NewsItem,
|
||||
type NewsCategory,
|
||||
|
||||
@@ -3,8 +3,8 @@ export { NAVIGATION, NAVIGATION_V2, MEGA_DROPDOWN_DATA } from './navigation';
|
||||
export type { NavigationItem, NavigationItemV2, MegaDropdownItem, MegaDropdownGroup, MegaDropdownData } from './navigation';
|
||||
export { STATS, type StatItem } from './stats';
|
||||
export { SERVICES } from './services';
|
||||
export { PRODUCTS, PRODUCT_CATEGORIES, type Product, type ProductCategory } from './products';
|
||||
export { STANDALONE_PRODUCTS, type StandaloneProduct } from './standalone-products';
|
||||
export { PRODUCTS, type Product } from './products';
|
||||
export type { StandaloneProduct } from './standalone-products';
|
||||
export { NEWS, type NewsItem, type NewsCategory } from './news';
|
||||
export type { TeamMember } from './team';
|
||||
export { METHODOLOGY, type MethodologyPhase } from './methodology';
|
||||
|
||||
@@ -82,39 +82,14 @@ export interface Product {
|
||||
capabilities?: string[];
|
||||
}
|
||||
|
||||
export interface ProductCategory {
|
||||
id: 'enterprise' | 'specialized';
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface StandaloneProduct extends Product {
|
||||
technicalParameters?: TechnicalParameter[];
|
||||
complianceCertifications?: ComplianceCertification[];
|
||||
deploymentCases?: DeploymentCase[];
|
||||
}
|
||||
|
||||
export const PRODUCT_CATEGORIES: ProductCategory[] = [
|
||||
{
|
||||
id: 'enterprise',
|
||||
title: '企业套装',
|
||||
description: '6 大核心产品互为补充，覆盖企业数字化全场景，常以组合形式出现在解决方案中。',
|
||||
},
|
||||
{
|
||||
id: 'specialized',
|
||||
title: '专业产品',
|
||||
description: '自成体系的独立产品线，包括安全产品、行业特种软件、硬件产品等。',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 企业套装产品数据已从硬编码迁移至 CMS 种子文件
|
||||
* @see /prisma/seeds/products.ts
|
||||
*/
|
||||
export { PRODUCTS } from '../../../prisma/seeds/products';
|
||||
|
||||
/**
|
||||
* 独立产品数据已从硬编码迁移至 CMS 种子文件
|
||||
* @see /prisma/seeds/standalone-products.ts
|
||||
*/
|
||||
export { STANDALONE_PRODUCTS } from '../../../prisma/seeds/standalone-products';
|
||||
|
||||
@@ -1,42 +1,3 @@
|
||||
import { Lightbulb, Cpu, Users, type LucideIcon } from 'lucide-react';
|
||||
|
||||
// ============ 首页解决方案概览 ============
|
||||
|
||||
export interface SolutionOverview {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
points: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页解决方案概览数据
|
||||
*/
|
||||
export const SOLUTIONS_OVERVIEW: SolutionOverview[] = [
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: '参谋伙伴',
|
||||
subtitle: '数字化转型咨询',
|
||||
description: '帮您看清前路，迈对第一步。我们用行业智慧洞察趋势，用理性分析避开陷阱，用专业经验规划路径。从现状评估到战略规划，让您的每一步都有据可循。',
|
||||
points: ['行业趋势洞察报告', '成熟度评估', '实施路径规划'],
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
title: '技术伙伴',
|
||||
subtitle: '信息技术解决方案',
|
||||
description: '从设计到交付，提供一站式技术服务。我们深入理解您的业务场景，量身定制技术方案，用敏捷迭代确保快速见效，用工程规范保障交付质量。',
|
||||
points: ['业务场景调研', '技术方案定制', '敏捷交付迭代'],
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '同行伙伴',
|
||||
subtitle: '长期陪跑服务',
|
||||
description: '不是一锤子买卖，而是长期同行。我们陪伴您走过数字化转型的每一段旅程，持续优化迭代，与您共同成长。专属客户成功经理、季度业务复盘、工作日快速响应，让转型之路不再孤单。',
|
||||
points: ['专属客户成功经理', '季度业务复盘', '工作日快速响应'],
|
||||
},
|
||||
];
|
||||
|
||||
// ============ 解决方案详情数据 ============
|
||||
|
||||
export interface Solution {
|
||||
|
||||
@@ -28,48 +28,5 @@ export interface StandaloneProduct {
|
||||
expectedLaunch?: string;
|
||||
}
|
||||
|
||||
export const STANDALONE_PRODUCTS: StandaloneProduct[] = [
|
||||
{
|
||||
id: 'novavis',
|
||||
title: '睿视 NovaVis',
|
||||
description: '面向执法机关的新一代智能数据分析平台，完全离线运行，AI驱动分析，百万级数据秒级响应。',
|
||||
image: '/images/products/novavis.jpg',
|
||||
category: 'security',
|
||||
badge: '专业工具系列',
|
||||
status: 'beta',
|
||||
heroThemeId: 'novavis',
|
||||
features: [
|
||||
'完全离线运行：零网络依赖，断网可用，金融级加密存储，U盘可携带即插即用',
|
||||
'AI 智能分析引擎：异常交易自动识别与预警、智能团伙分群与风险画像、可选配本地大语言模型',
|
||||
'智能关系网络图谱：自动识别人物关系与资金往来，团伙结构自动分析与层级梳理，关键人物智能定位',
|
||||
'全链路资金追踪：支持 20 层以上深度追踪，异常交易模式自动标注，闭环转账与资金归集识别',
|
||||
'一键报告生成：PDF / Word 双格式输出，自定义报告模板，分析过程全留痕，满足执法证据要求',
|
||||
],
|
||||
useCases: [
|
||||
{
|
||||
title: '经济犯罪侦查',
|
||||
description: '快速梳理涉案资金流向，识别异常交易模式，锁定关键嫌疑人',
|
||||
},
|
||||
{
|
||||
title: '反腐败调查',
|
||||
description: '分析公职人员及其关联人员的资金往来，发现利益输送线索',
|
||||
},
|
||||
{
|
||||
title: '涉黑涉恶打击',
|
||||
description: '构建团伙关系网络，识别组织结构和资金链条，支撑精准打击',
|
||||
},
|
||||
{
|
||||
title: '反洗钱分析',
|
||||
description: '追踪跨账户资金转移路径，识别分层、拆分等洗钱手法',
|
||||
},
|
||||
],
|
||||
previewFeatures: [
|
||||
{ title: '完全离线运行', description: '零网络依赖，断网可用，金融级加密存储' },
|
||||
{ title: 'AI 智能分析', description: '异常交易自动识别与预警，智能团伙分群' },
|
||||
{ title: '关系网络图谱', description: '自动识别人物关系与资金往来，关键人物定位' },
|
||||
{ title: '全链路资金追踪', description: '支持 20 层以上深度追踪，异常模式标注' },
|
||||
{ title: '一键报告生成', description: 'PDF/Word 双格式输出，分析过程全留痕' },
|
||||
{ title: '百万级秒级响应', description: '百万级记录秒级处理，效率提升 10 倍以上' },
|
||||
],
|
||||
},
|
||||
] as const;
|
||||
// 独立产品数据已迁移至 CMS 种子文件，常量文件仅保留类型定义。
|
||||
// 运行时使用的数据请从 CMS 读取（src/lib/cms/data-server.ts）。
|
||||
|
||||
Reference in New Issue
Block a user