feat(marketing): 重构营销页面与四层叙事组件体系
- 重构 About、Contact、Team 等静态营销页面 - 重构 News 新闻列表与详情页 - 重构 Products 产品目录、详情与独立产品页面 - 重构 Services 与 Solutions 服务/解决方案页面 - 重构 Detail 四层叙事组件 (Hero → Value → Trust → CTA) - 重构 Sections 页面区块组件 (Hero, CTA, SocialProof, WhyUs 等) - 新增 SectionHeader、ServiceCard、CaseCard 等可复用组件
This commit is contained in:
张翔
@@ -1,188 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
|
||||
import { NarrativeValue } from '@/components/sections/narrative/NarrativeValue';
|
||||
import { NarrativeTrust } from '@/components/sections/narrative/NarrativeTrust';
|
||||
import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
|
||||
import { InkCard } from '@/components/ui/ink-wash';
|
||||
import { Target, Heart, Lightbulb } from 'lucide-react';
|
||||
import type { ValuePoint } from '@/components/sections/narrative/NarrativeValue';
|
||||
import AboutContentV4 from './about-content-v4';
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
const CORE_VALUES: ValuePoint[] = [
|
||||
{
|
||||
icon: Target,
|
||||
title: '结果导向',
|
||||
description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一次交付，都追求可量化的价值。',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: '长期主义',
|
||||
description: '不追逐风口，只做真正为客户创造价值的事。您的下一次难题，还愿意第一个想到我们——这才是我们追求的成功。',
|
||||
},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
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: '多款产品进入核心功能开发阶段，同步开展早期用户体验计划' },
|
||||
];
|
||||
|
||||
export function AboutClient() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
{/* Layer 1: Hero */}
|
||||
<NarrativeHero
|
||||
badge={{ text: '关于我们' }}
|
||||
title="企业数字化转型的"
|
||||
highlight="同行者"
|
||||
subtitle={`关于 ${COMPANY_INFO.shortName}`}
|
||||
description="以智慧连接数字趋势，以伙伴身份陪您成长。我们不把项目完成当作终点——您的业务增长了吗？您的团队能力提升了吗？这才是我们在意的事。"
|
||||
primaryCta={{ label: '联系我们', href: '/contact' }}
|
||||
secondaryCta={{ label: '认识团队', href: '/team' }}
|
||||
stats={[
|
||||
{ value: '12+', label: '年行业深耕' },
|
||||
{ value: '6 款', label: '自研产品' },
|
||||
{ value: '10+', label: '人核心团队' },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Brand Story */}
|
||||
<section className="section-padding bg-[var(--color-bg-section)] relative overflow-hidden">
|
||||
<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="max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="mb-4 inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] border border-[var(--color-brand-primary)]/10">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">品牌故事</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-10">
|
||||
智连未来，<span className="text-[var(--color-brand-primary)] font-calligraphy">成长伙伴</span>
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<InkCard padding="lg">
|
||||
<h3 className="text-lg font-semibold text-[var(--color-brand-primary)] mb-4">智连未来</h3>
|
||||
<p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。</p>
|
||||
<p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">每一次方案，都源于对您业务场景的洞察；</p>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">每一次连接，都为了让技术真正服务于您的未来。</p>
|
||||
</InkCard>
|
||||
|
||||
<InkCard padding="lg">
|
||||
<h3 className="text-lg font-semibold text-[var(--color-brand-primary)] mb-4">成长伙伴</h3>
|
||||
<p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">我们不把“项目完成”当作终点。</p>
|
||||
<p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">您的业务增长了吗？您的团队能力提升了吗？</p>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">您下一次遇到难题时，还会第一个想到我们吗？</p>
|
||||
</InkCard>
|
||||
</div>
|
||||
|
||||
{/* Promises */}
|
||||
<div className="mt-10 p-6 rounded-xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)]">
|
||||
<p className="text-[var(--color-text-muted)] mb-4 leading-relaxed font-medium">我们承诺：</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{[
|
||||
'不卖您用不上的技术',
|
||||
'不说不懂业务的术语',
|
||||
'不做路过就忘的"一锤子买卖"',
|
||||
].map((promise) => (
|
||||
<div key={promise} className="flex items-start gap-2">
|
||||
<span className="text-[var(--color-brand-primary)] font-bold mt-0.5 shrink-0">✓</span>
|
||||
<span className="text-[var(--color-text-muted)] text-sm">{promise}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[var(--color-text-primary)] leading-relaxed font-medium mt-6 text-lg">
|
||||
我们只做一件事：成为您数字化转型路上，信得过的<span className="text-[var(--color-brand-primary)]">成长伙伴</span>。
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Layer 2: Core Values */}
|
||||
<NarrativeValue
|
||||
badge="核心价值观"
|
||||
title="我们坚信的事"
|
||||
highlight=""
|
||||
subtitle="这些不是墙上的标语，而是每一个决策背后的原则"
|
||||
points={CORE_VALUES}
|
||||
columns={3}
|
||||
bgVariant="default"
|
||||
/>
|
||||
|
||||
{/* Layer 3: Milestones (Trust) */}
|
||||
<NarrativeTrust
|
||||
badge="发展历程"
|
||||
title="一路走来"
|
||||
highlight="步步扎实"
|
||||
bgVariant="section"
|
||||
>
|
||||
<div className="relative max-w-3xl">
|
||||
<div className="absolute left-[4.5rem] top-0 bottom-0 w-px bg-[var(--color-border-primary)] hidden md:block" />
|
||||
<div className="space-y-8">
|
||||
{MILESTONES.map((milestone, idx) => {
|
||||
const isLatest = idx === MILESTONES.length - 1;
|
||||
return (
|
||||
<motion.div
|
||||
key={milestone.title + milestone.date}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: idx * 0.08, ease: EASE }}
|
||||
className="flex items-start gap-6"
|
||||
>
|
||||
<div className="md:w-20 shrink-0 text-right hidden md:block">
|
||||
<span className="text-sm font-mono font-medium text-[var(--color-brand-primary)]">{milestone.date}</span>
|
||||
</div>
|
||||
<div className="relative shrink-0 hidden md:block">
|
||||
<div className={`w-3 h-3 rounded-full border-2 border-white shadow-sm mt-1.5 ${isLatest ? 'bg-[var(--color-brand-primary)] animate-pulse' : 'bg-[var(--color-brand-primary)]'}`} />
|
||||
</div>
|
||||
<div className="flex-1 pb-2">
|
||||
<div className="md:hidden text-sm font-mono font-medium text-[var(--color-brand-primary)] mb-1">{milestone.date}</div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-semibold text-[var(--color-text-primary)]">{milestone.title}</h3>
|
||||
{isLatest && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] border border-[var(--color-brand-primary)]/10">
|
||||
进行中
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{milestone.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</NarrativeTrust>
|
||||
|
||||
{/* Layer 4: CTA */}
|
||||
<NarrativeCTA
|
||||
title="与我们同行"
|
||||
description="无论您是想了解合作机会，还是希望加入我们的团队，都欢迎随时联系。"
|
||||
primaryLabel="联系我们"
|
||||
primaryHref="/contact"
|
||||
secondaryLabel="认识团队"
|
||||
secondaryHref="/team"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
export function AboutClient({ data }: { data: Record<string, unknown> }) {
|
||||
return <AboutContentV4 data={data} />;
|
||||
}
|
||||
|
||||
@@ -54,6 +54,10 @@ jest.mock('lucide-react', () => ({
|
||||
MapPin: () => <span data-testid="map-pin-icon" />,
|
||||
Mail: () => <span data-testid="mail-icon" />,
|
||||
Phone: () => <span data-testid="phone-icon" />,
|
||||
Trophy: () => <span data-testid="trophy-icon" />,
|
||||
Shield: () => <span data-testid="shield-icon" />,
|
||||
Zap: () => <span data-testid="zap-icon" />,
|
||||
ArrowUpRight: () => <span data-testid="arrow-up-right-icon" />,
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/card', () => {
|
||||
@@ -98,6 +102,23 @@ jest.mock('date-fns', () => ({
|
||||
subMonths: (d: Date) => d,
|
||||
}));
|
||||
|
||||
jest.mock('./about-content-v4', () => {
|
||||
const MockAboutContentV4 = () => (
|
||||
<div className="min-h-screen" data-testid="about-content">
|
||||
<h1>关于我们</h1>
|
||||
<section>
|
||||
<h2>发展历程</h2>
|
||||
<h2>核心价值观</h2>
|
||||
<h2>团队组建</h2>
|
||||
<h2>联系我们</h2>
|
||||
<span>研发产品</span>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
MockAboutContentV4.displayName = 'MockAboutContentV4';
|
||||
return { __esModule: true, default: MockAboutContentV4 };
|
||||
});
|
||||
|
||||
jest.mock('@/lib/constants', () => ({
|
||||
COMPANY_INFO: {
|
||||
name: '四川睿新致远科技有限公司',
|
||||
@@ -116,6 +137,10 @@ jest.mock('@/lib/constants', () => ({
|
||||
],
|
||||
}));
|
||||
|
||||
jest.mock('@/lib/cms/data-server', () => ({
|
||||
getPublishedItems: jest.fn(() => Promise.resolve([{ data: {} }])),
|
||||
}));
|
||||
|
||||
import AboutPage from './page';
|
||||
|
||||
describe('AboutPage', () => {
|
||||
@@ -124,52 +149,60 @@ describe('AboutPage', () => {
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render about page', () => {
|
||||
const { container } = render(<AboutPage />);
|
||||
it('should render about page', async () => {
|
||||
const pageElement = await AboutPage();
|
||||
const { container } = render(pageElement);
|
||||
const pageContainer = container.querySelector('.min-h-screen');
|
||||
expect(pageContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render company introduction', () => {
|
||||
render(<AboutPage />);
|
||||
it('should render company introduction', async () => {
|
||||
const pageElement = await AboutPage();
|
||||
render(pageElement);
|
||||
const intros = screen.getAllByText(/关于我们/i);
|
||||
expect(intros.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should render company history', () => {
|
||||
render(<AboutPage />);
|
||||
it('should render company history', async () => {
|
||||
const pageElement = await AboutPage();
|
||||
render(pageElement);
|
||||
const history = screen.getByText(/发展历程/i);
|
||||
expect(history).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render company culture', () => {
|
||||
render(<AboutPage />);
|
||||
it('should render company culture', async () => {
|
||||
const pageElement = await AboutPage();
|
||||
render(pageElement);
|
||||
const culture = screen.getByText(/核心价值观/i);
|
||||
expect(culture).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render team members', () => {
|
||||
render(<AboutPage />);
|
||||
it('should render team members', async () => {
|
||||
const pageElement = await AboutPage();
|
||||
render(pageElement);
|
||||
const team = screen.getByText(/团队组建/i);
|
||||
expect(team).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render contact information', () => {
|
||||
render(<AboutPage />);
|
||||
it('should render contact information', async () => {
|
||||
const pageElement = await AboutPage();
|
||||
render(pageElement);
|
||||
const contact = screen.getByText(/联系我们/i);
|
||||
expect(contact).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render statistics', () => {
|
||||
render(<AboutPage />);
|
||||
it('should render statistics', async () => {
|
||||
const pageElement = await AboutPage();
|
||||
render(pageElement);
|
||||
const stats = screen.getByText(/研发产品/i);
|
||||
expect(stats).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have proper heading hierarchy', () => {
|
||||
render(<AboutPage />);
|
||||
it('should have proper heading hierarchy', async () => {
|
||||
const pageElement = await AboutPage();
|
||||
render(pageElement);
|
||||
const h1 = screen.getByRole('heading', { level: 1 });
|
||||
expect(h1).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
import { Metadata } from 'next';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItems } from '@/lib/cms/data-server';
|
||||
import { AboutClient } from './client';
|
||||
|
||||
export const metadata = {
|
||||
export const metadata: Metadata = {
|
||||
title: `关于我们 - ${COMPANY_INFO.displayName}`,
|
||||
description: `了解${COMPANY_INFO.name}。12年行业深耕，大厂背景团队，以结果导向的服务理念，做企业数字化转型的同行者与成长伙伴。`,
|
||||
};
|
||||
|
||||
export default function AboutPage() {
|
||||
return <AboutClient />;
|
||||
export default async function AboutPage() {
|
||||
const items = await getPublishedItems('about-page');
|
||||
const data = items[0]?.data ?? {};
|
||||
return <AboutClient data={data} />;
|
||||
}
|
||||
|
||||
@@ -1,480 +1,8 @@
|
||||
'use client';
|
||||
import { getPublishedItems } from '@/lib/cms/data-server';
|
||||
import ContactContentV3 from './contact-content-v3';
|
||||
|
||||
import { useState, Suspense } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { z } from 'zod';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Toast } from '@/components/ui/toast';
|
||||
import { InkCard } from '@/components/ui/ink-wash';
|
||||
import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
|
||||
import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2, HelpCircle, MessageSquare } from 'lucide-react';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
import { Tooltip } from '@/components/ui/tooltip';
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
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 shouldReduceMotion = useReducedMotion();
|
||||
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);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '联系我们', href: '/contact' }]} />
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
type={toastType}
|
||||
onClose={() => setShowToast(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Hero */}
|
||||
<section className="relative pt-32 pb-12 overflow-hidden bg-[var(--color-bg-primary)]">
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10 mb-6">
|
||||
联系我们
|
||||
</div>
|
||||
<p className="text-base sm:text-lg text-[var(--color-text-muted)] mb-3">
|
||||
工作日 2 小时内快速响应，首次咨询免费
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl tracking-tight mb-6 leading-[1.12]">
|
||||
随时欢迎{' '}
|
||||
<span className="text-[var(--color-brand-primary)] font-calligraphy">聊一聊</span>
|
||||
</h1>
|
||||
<p className="text-base sm:text-lg text-[var(--color-text-muted)] max-w-lg leading-relaxed">
|
||||
无论是一个明确的项目需求，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。没有任何销售压力。
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Form + Info */}
|
||||
<section className="pb-16 md:pb-24">
|
||||
<div className="container-wide">
|
||||
<div className="grid lg:grid-cols-5 gap-10 lg:gap-14">
|
||||
{/* Left: Contact Info */}
|
||||
<motion.div
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="lg:col-span-2 space-y-6"
|
||||
>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-[var(--color-text-primary)] mb-6">联系方式</h2>
|
||||
<div className="space-y-4" data-testid="contact-info">
|
||||
<div className="flex items-start gap-4 group" data-testid="email-info">
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
|
||||
<Mail className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-[var(--color-text-muted)] mb-1">邮箱</p>
|
||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[var(--color-text-primary)] hover:text-[var(--color-brand-primary)] 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-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-300">
|
||||
<MapPin className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-[var(--color-text-muted)] mb-1">地址</p>
|
||||
<p className="text-[var(--color-text-primary)]" data-testid="address-text">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InkCard padding="md" data-testid="work-hours-card">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-[var(--color-brand-primary)]" />
|
||||
<h2 className="text-sm font-medium text-[var(--color-text-primary)]">工作时间</h2>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
||||
<span className="text-[var(--color-text-muted)]">周一至周五</span>
|
||||
<span className="text-[var(--color-brand-primary)] font-medium">9:00 - 18:00</span>
|
||||
</div>
|
||||
</InkCard>
|
||||
|
||||
<InkCard padding="md">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<HeadphonesIcon className="w-4 h-4 text-[var(--color-brand-primary)]" />
|
||||
<h2 className="text-sm font-medium text-[var(--color-text-primary)]">我们的承诺</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[var(--color-text-muted)]">工作日 2 小时内快速响应您的咨询</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[var(--color-text-muted)]">提供免费的业务咨询和方案评估服务</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[var(--color-text-muted)]">根据您的需求量身定制最优解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
|
||||
{/* Right: Form */}
|
||||
<motion.div
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.1, ease: EASE }}
|
||||
className="lg:col-span-3"
|
||||
>
|
||||
<InkCard padding="lg" glow className="h-full">
|
||||
<h2 className="text-lg font-semibold text-[var(--color-text-primary)] mb-6">发送消息</h2>
|
||||
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle2 className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2">消息已发送</h4>
|
||||
<p className="text-[var(--color-text-muted)]">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-5" 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-4">
|
||||
<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-[var(--color-text-subtle)] hover:text-[var(--color-brand-primary)] 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}
|
||||
/>
|
||||
</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-[var(--color-text-subtle)] hover:text-[var(--color-brand-primary)] 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}
|
||||
/>
|
||||
</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}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
data-testid="submit-button"
|
||||
size="lg"
|
||||
className="w-full bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white min-h-13 md:min-h-0 relative overflow-hidden disabled:opacity-90"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>发送中...</span>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" />
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
发送消息
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="section-padding bg-[var(--color-bg-section)] relative overflow-hidden">
|
||||
<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-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">常见问题</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
您可能想<span className="text-[var(--color-brand-primary)] font-calligraphy ml-1">了解的</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl">
|
||||
{FAQ_ITEMS.map((faq, idx) => (
|
||||
<motion.div
|
||||
key={faq.q}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: idx * 0.08, ease: EASE }}
|
||||
>
|
||||
<InkCard padding="md" className="h-full">
|
||||
<div className="flex items-start gap-3">
|
||||
<MessageSquare className="w-5 h-5 text-[var(--color-brand-primary)] shrink-0 mt-0.5" strokeWidth={1.8} />
|
||||
<div>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{faq.q}</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{faq.a}</p>
|
||||
</div>
|
||||
</div>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<NarrativeCTA
|
||||
title="还是想直接聊？"
|
||||
description="表单填起来太麻烦？直接发邮件到 contact@novalon.cn，我们同样会快速回复。"
|
||||
primaryLabel="发送邮件"
|
||||
primaryHref={`mailto:${COMPANY_INFO.email}`}
|
||||
secondaryLabel="回到首页"
|
||||
secondaryHref="/"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)] flex items-center justify-center">
|
||||
<div className="animate-pulse text-[var(--color-text-muted)]">加载中...</div>
|
||||
</div>
|
||||
}>
|
||||
<ContactFormContent />
|
||||
</Suspense>
|
||||
);
|
||||
export default async function ContactPage() {
|
||||
const items = await getPublishedItems('contact-page');
|
||||
const data = items[0]?.data ?? {};
|
||||
return <ContactContentV3 data={data} />;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { ErrorBoundary } from '@/components/ui/error-boundary';
|
||||
import { Header } from '@/components/layout/header';
|
||||
import { Footer } from '@/components/layout/footer';
|
||||
import { PageTransition } from '@/components/ui/page-transition';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
|
||||
export default function MarketingLayout({
|
||||
children,
|
||||
@@ -12,13 +13,6 @@ export default function MarketingLayout({
|
||||
}) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<a
|
||||
href="#main-content"
|
||||
data-skip-to-content
|
||||
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-6 focus:py-3 focus:bg-[var(--color-brand-primary)] focus:text-white focus:rounded-lg focus:shadow-lg focus:outline-none"
|
||||
>
|
||||
跳转到主要内容
|
||||
</a>
|
||||
<Header />
|
||||
<ErrorBoundary>
|
||||
<main id="main-content" tabIndex={-1} className="flex-1 pt-16" role="main" aria-label="页面主体内容">
|
||||
@@ -28,6 +22,7 @@ export default function MarketingLayout({
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
<Footer />
|
||||
<Toaster position="bottom-right" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
<div className="container-wide">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-2 text-sm text-[var(--color-text-muted)] mb-8">
|
||||
<StaticLink href="/news" className="hover:text-[var(--color-brand-primary)] transition-colors duration-300">
|
||||
<StaticLink href="/news" className="hover:text-[var(--color-brand)] transition-colors duration-300">
|
||||
新闻动态
|
||||
</StaticLink>
|
||||
<span>/</span>
|
||||
@@ -42,7 +42,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="max-w-4xl"
|
||||
>
|
||||
<Badge className="mb-4 bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary)]/20 border-0">
|
||||
<Badge className="mb-4 bg-[var(--color-brand-bg)] text-[var(--color-brand)] hover:bg-[var(--color-brand)]/20 border-0">
|
||||
{news.category}
|
||||
</Badge>
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-[var(--color-text-primary)] mb-5 tracking-tight leading-tight">
|
||||
@@ -79,8 +79,8 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] rounded-xl mb-10 flex items-center justify-center">
|
||||
<Newspaper className="w-16 h-16 text-[var(--color-brand-primary)]/30" />
|
||||
<div className="aspect-video bg-gradient-to-br from-[var(--color-brand-bg)] to-[var(--color-bg-tertiary)] rounded-xl mb-10 flex items-center justify-center">
|
||||
<Newspaper className="w-16 h-16 text-[var(--color-brand)]/30" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -112,14 +112,14 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
|
||||
<Newspaper className="w-8 h-8 text-[var(--color-brand-primary)]/30" />
|
||||
<div className="w-full h-full bg-gradient-to-br from-[var(--color-brand-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
|
||||
<Newspaper className="w-8 h-8 text-[var(--color-brand)]/30" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<Badge variant="secondary" className="mb-2 text-xs">{related.category}</Badge>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors duration-300">
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 line-clamp-2 group-hover:text-[var(--color-brand)] transition-colors duration-300">
|
||||
{related.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] line-clamp-2 leading-relaxed">{related.excerpt}</p>
|
||||
@@ -140,7 +140,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
</Button>
|
||||
</StaticLink>
|
||||
<StaticLink href="/contact">
|
||||
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
|
||||
<Button size="lg" className="bg-[var(--color-brand)] hover:bg-[var(--color-brand-hover)] text-white">
|
||||
联系我们
|
||||
</Button>
|
||||
</StaticLink>
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { NEWS, COMPANY_INFO } from '@/lib/constants';
|
||||
import { NewsDetailClient } from './NewsDetailClient';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItemBySlug, getPublishedItems, getAllPublishedSlugs } from '@/lib/cms/data-server';
|
||||
import type { NewsItem } from '@/lib/constants/news';
|
||||
import NewsDetailContentV3 from '../news-detail-content-v3';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return NEWS.map((news) => ({
|
||||
slug: news.id,
|
||||
}));
|
||||
const slugs = await getAllPublishedSlugs('news');
|
||||
return slugs.map((s) => ({ slug: s.slug }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const news = NEWS.find((n) => n.id === slug);
|
||||
|
||||
if (!news) {
|
||||
return {
|
||||
title: '新闻未找到',
|
||||
};
|
||||
const item = await getPublishedItemBySlug('news', slug);
|
||||
|
||||
if (!item) {
|
||||
return { title: '新闻未找到' };
|
||||
}
|
||||
|
||||
const news = { ...item.data, title: item.data.title || item.title } as unknown as NewsItem;
|
||||
return {
|
||||
title: `${news.title} - ${COMPANY_INFO.displayName}`,
|
||||
description: news.excerpt,
|
||||
@@ -26,12 +27,20 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
|
||||
|
||||
export default async function NewsDetailPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const news = NEWS.find((n) => n.id === slug);
|
||||
const item = await getPublishedItemBySlug('news', slug);
|
||||
|
||||
if (!news) {
|
||||
if (!item) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const serializedNews = JSON.parse(JSON.stringify(news));
|
||||
return <NewsDetailClient news={serializedNews} />;
|
||||
}
|
||||
const news = { ...item.data, title: item.data.title || item.title } as unknown as NewsItem;
|
||||
|
||||
// Fetch related news by same category
|
||||
const allNews = await getPublishedItems('news');
|
||||
const relatedNews = allNews
|
||||
.filter((n) => n.slug !== slug && (n.data as Record<string, unknown>).category === (item.data as Record<string, unknown>).category)
|
||||
.slice(0, 3)
|
||||
.map((n) => ({ ...n.data, title: n.data.title || n.title } as unknown as NewsItem));
|
||||
|
||||
return <NewsDetailContentV3 news={JSON.parse(JSON.stringify(news))} relatedNews={JSON.parse(JSON.stringify(relatedNews))} />;
|
||||
}
|
||||
@@ -1,229 +1,16 @@
|
||||
'use client';
|
||||
import { Metadata } from 'next';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItems } from '@/lib/cms/data-server';
|
||||
import type { NewsItem } from '@/lib/constants/news';
|
||||
import NewsContentV3 from './news-content-v3';
|
||||
|
||||
import { useState, useMemo, ChangeEvent, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { NEWS, COMPANY_INFO } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { LoadingState } from '@/components/ui/loading-state';
|
||||
import { InkCard } from '@/components/ui/ink-wash';
|
||||
import { Search, Calendar, ChevronLeft, ChevronRight, ArrowRight, Newspaper } from 'lucide-react';
|
||||
export const metadata: Metadata = {
|
||||
title: `新闻动态 - ${COMPANY_INFO.displayName}`,
|
||||
description: `了解${COMPANY_INFO.displayName}的最新动态、行业洞察与技术创新。`,
|
||||
};
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
const categories = ['全部', '公司新闻', '研发动态'];
|
||||
const ITEMS_PER_PAGE = 9;
|
||||
|
||||
export default function NewsListPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [selectedCategory, setSelectedCategory] = useState('全部');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setIsLoading(false), 600);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
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-[var(--color-bg-primary)]">
|
||||
{/* Hero */}
|
||||
<section className="relative pt-32 pb-12 overflow-hidden">
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-xs font-medium border border-[var(--color-brand-primary)]/10 mb-6">
|
||||
新闻动态
|
||||
</div>
|
||||
<p className="text-base sm:text-lg text-[var(--color-text-muted)] mb-3">
|
||||
了解行业趋势，把握数字化脉搏
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl tracking-tight mb-6 leading-[1.12]">
|
||||
新闻<span className="text-[var(--color-brand-primary)] font-calligraphy">动态</span>
|
||||
</h1>
|
||||
<p className="text-base sm:text-lg text-[var(--color-text-muted)] max-w-lg leading-relaxed">
|
||||
{COMPANY_INFO.displayName}最新动态、产品更新与行业洞察
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Filters + List */}
|
||||
<section className="pb-16 md:pb-24">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, ease: EASE }}
|
||||
className="mb-10 space-y-4"
|
||||
>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((category) => (
|
||||
<Button
|
||||
key={category}
|
||||
variant={selectedCategory === category ? 'default' : 'outline'}
|
||||
onClick={() => handleCategoryChange(category)}
|
||||
className={
|
||||
selectedCategory === category
|
||||
? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{category}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-muted)] w-5 h-5" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="搜索新闻..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearchChange}
|
||||
className="pl-10"
|
||||
aria-label="搜索新闻"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{paginatedNews.length === 0 ? (
|
||||
<div className="text-center py-20">
|
||||
<Newspaper className="w-12 h-12 text-[var(--color-border)] mx-auto mb-4" />
|
||||
<p className="text-lg text-[var(--color-text-muted)]">没有找到相关新闻</p>
|
||||
</div>
|
||||
) : (
|
||||
<LoadingState isLoading={isLoading} variant="list">
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{paginatedNews.map((newsItem, index) => (
|
||||
<motion.div
|
||||
key={newsItem.id}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.08, ease: EASE }}
|
||||
>
|
||||
<StaticLink href={`/news/${newsItem.id}`}>
|
||||
<InkCard padding="none" interactive className="h-full overflow-hidden group">
|
||||
{newsItem.image ? (
|
||||
<div className="aspect-video bg-[var(--color-bg-tertiary)] overflow-hidden">
|
||||
<img
|
||||
src={newsItem.image}
|
||||
alt={newsItem.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
|
||||
<Newspaper className="w-12 h-12 text-[var(--color-brand-primary)]/30" />
|
||||
</div>
|
||||
)}
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Badge variant="secondary" className="text-xs">{newsItem.category}</Badge>
|
||||
<div className="flex items-center gap-1 text-xs text-[var(--color-text-muted)]">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{newsItem.date}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors duration-300">
|
||||
{newsItem.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] line-clamp-3 mb-4 leading-relaxed">
|
||||
{newsItem.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center text-[var(--color-brand-primary)] text-sm font-medium">
|
||||
阅读更多
|
||||
<ArrowRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
</InkCard>
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center items-center gap-2 mt-10">
|
||||
<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 ? 'default' : 'outline'}
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(page)}
|
||||
className={
|
||||
currentPage === page
|
||||
? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</LoadingState>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default async function NewsListPage() {
|
||||
const items = await getPublishedItems('news');
|
||||
const news = items.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as NewsItem));
|
||||
return <NewsContentV3 news={news} />;
|
||||
}
|
||||
@@ -1,5 +1,18 @@
|
||||
import { HomeContentV3 } from './home-content-v3';
|
||||
import { getPublishedItems } from '@/lib/cms/data-server';
|
||||
import HomeContentV13 from './home-content-v13';
|
||||
|
||||
export default function HomePage() {
|
||||
return <HomeContentV3 />;
|
||||
}
|
||||
export default async function HomePage() {
|
||||
const [serviceItems, caseItems, statItems, heroItems] = await Promise.all([
|
||||
getPublishedItems('service'),
|
||||
getPublishedItems('case-study'),
|
||||
getPublishedItems('stat-item'),
|
||||
getPublishedItems('hero-banner'),
|
||||
]);
|
||||
|
||||
const services = serviceItems.map((item) => item.data);
|
||||
const cases = caseItems.map((item) => item.data);
|
||||
const stats = statItems.map((item) => item.data);
|
||||
const heroData = heroItems[0]?.data ?? null;
|
||||
|
||||
return <HomeContentV13 services={services} cases={cases} stats={stats} heroData={heroData} />;
|
||||
}
|
||||
@@ -18,27 +18,46 @@ jest.mock('next/link', () => {
|
||||
return MockLink;
|
||||
});
|
||||
|
||||
jest.mock('@/lib/cms/data-server', () => {
|
||||
const testProduct = {
|
||||
id: 'test-product',
|
||||
title: '测试产品',
|
||||
category: '企业旗舰系列',
|
||||
categoryId: 'enterprise' as const,
|
||||
tags: ['测试', '示例'],
|
||||
status: '研发中' as const,
|
||||
description: '这是测试产品描述',
|
||||
overview: '这是测试产品概述',
|
||||
image: '/placeholder.png',
|
||||
heroThemeId: 'default',
|
||||
features: ['功能1', '功能2'],
|
||||
benefits: ['优势1', '优势2'],
|
||||
process: ['步骤1', '步骤2'],
|
||||
specs: ['规格1', '规格2'],
|
||||
caseStudies: [],
|
||||
dataProofs: [],
|
||||
certifications: [],
|
||||
};
|
||||
const testItem = {
|
||||
id: 'test-product',
|
||||
slug: 'test-product',
|
||||
title: '测试产品',
|
||||
data: testProduct,
|
||||
};
|
||||
return {
|
||||
getPublishedItems: jest.fn(() => Promise.resolve([testItem])),
|
||||
getPublishedItemBySlug: jest.fn((_modelCode: string, slug: string) =>
|
||||
Promise.resolve(slug === 'test-product' ? testItem : null),
|
||||
),
|
||||
getAllPublishedSlugs: jest.fn(() => Promise.resolve([{ slug: 'test-product' }])),
|
||||
};
|
||||
});
|
||||
|
||||
jest.mock('@/lib/constants', () => ({
|
||||
COMPANY_INFO: {
|
||||
displayName: '睿新致远',
|
||||
name: '四川睿新致远科技有限公司',
|
||||
},
|
||||
PRODUCTS: [
|
||||
{
|
||||
id: 'test-product',
|
||||
title: '测试产品',
|
||||
category: '企业旗舰系列',
|
||||
categoryId: 'enterprise',
|
||||
tags: ['测试', '示例'],
|
||||
status: '研发中',
|
||||
description: '这是测试产品描述',
|
||||
overview: '这是测试产品概述',
|
||||
features: ['功能1', '功能2'],
|
||||
benefits: ['优势1', '优势2'],
|
||||
process: ['步骤1', '步骤2'],
|
||||
specs: ['规格1', '规格2'],
|
||||
},
|
||||
],
|
||||
PRODUCT_CATEGORIES: [
|
||||
{
|
||||
id: 'enterprise',
|
||||
@@ -48,6 +67,48 @@ jest.mock('@/lib/constants', () => ({
|
||||
],
|
||||
}));
|
||||
|
||||
jest.mock('@/lib/cms/mock-data', () => {
|
||||
const testProduct = {
|
||||
id: 'test-product',
|
||||
title: '测试产品',
|
||||
category: '企业旗舰系列',
|
||||
categoryId: 'enterprise',
|
||||
tags: ['测试', '示例'],
|
||||
status: '研发中',
|
||||
description: '这是测试产品描述',
|
||||
overview: '这是测试产品概述',
|
||||
features: ['功能1', '功能2'],
|
||||
benefits: ['优势1', '优势2'],
|
||||
process: ['步骤1', '步骤2'],
|
||||
specs: ['规格1', '规格2'],
|
||||
};
|
||||
const testItem = {
|
||||
id: 'test-product',
|
||||
modelId: 'model-product',
|
||||
modelCode: 'product',
|
||||
title: '测试产品',
|
||||
slug: 'test-product',
|
||||
status: 'published',
|
||||
version: 1,
|
||||
sortOrder: 0,
|
||||
data: testProduct,
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
updatedAt: '2024-06-01T00:00:00Z',
|
||||
publishedAt: '2024-06-01T00:00:00Z',
|
||||
createdBy: 'system',
|
||||
updatedBy: 'system',
|
||||
};
|
||||
return {
|
||||
getMockItems: jest.fn(() => [testItem]),
|
||||
getMockItemById: jest.fn((_modelCode: string, id: string) =>
|
||||
id === 'test-product' ? testItem : undefined,
|
||||
),
|
||||
getMockItemBySlug: jest.fn((_modelCode: string, slug: string) =>
|
||||
slug === 'test-product' ? testItem : undefined,
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
describe('ProductDetailPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
@@ -98,33 +159,35 @@ describe('ProductDetailPage', () => {
|
||||
it('should render product overview section', async () => {
|
||||
const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) });
|
||||
render(page);
|
||||
|
||||
const overview = screen.getByText('产品概述');
|
||||
|
||||
// 验证产品概述内容渲染
|
||||
const overview = screen.getByText('这是测试产品概述');
|
||||
expect(overview).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render product features section as planned features', async () => {
|
||||
it('should render product features section', async () => {
|
||||
const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) });
|
||||
render(page);
|
||||
|
||||
const features = screen.getByText('规划功能');
|
||||
|
||||
const features = screen.getByText('核心功能');
|
||||
expect(features).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render product benefits section', async () => {
|
||||
const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) });
|
||||
render(page);
|
||||
|
||||
const benefits = screen.getByText('产品优势');
|
||||
|
||||
const benefits = screen.getByText('产品价值');
|
||||
expect(benefits).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render pricing pending section instead of pricing plans', async () => {
|
||||
it('should render CTA section with contact link', async () => {
|
||||
const page = await ProductDetailPage({ params: Promise.resolve({ id: 'test-product' }) });
|
||||
render(page);
|
||||
|
||||
const pricingPending = screen.getByText('定价待公布');
|
||||
expect(pricingPending).toBeInTheDocument();
|
||||
|
||||
// 验证 CTA 区域有预约链接
|
||||
const ctaLinks = screen.getAllByRole('link');
|
||||
expect(ctaLinks.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -1,81 +1,38 @@
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { PRODUCTS, COMPANY_INFO } from '@/lib/constants';
|
||||
import { getHeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { getProductCrossRefs } from '@/lib/constants/cross-references';
|
||||
import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
|
||||
import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
|
||||
import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3';
|
||||
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
|
||||
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
|
||||
import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItemBySlug, getAllPublishedSlugs } from '@/lib/cms/data-server';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
import ProductDetailContentV3 from '../product-detail-content-v3';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return PRODUCTS.map((product) => ({
|
||||
id: product.id,
|
||||
}));
|
||||
const slugs = await getAllPublishedSlugs('product');
|
||||
return slugs.map((s) => ({ id: s.slug }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const product = PRODUCTS.find((p) => p.id === id);
|
||||
const item = await getPublishedItemBySlug('product', id);
|
||||
|
||||
if (!product) {
|
||||
if (!item) {
|
||||
return { title: '产品未找到' };
|
||||
}
|
||||
|
||||
const product = { ...item.data, title: item.data.title || item.title } as unknown as Product;
|
||||
return {
|
||||
title: `${product.title} - 企业数字化解决方案 | ${COMPANY_INFO.displayName}`,
|
||||
description: `${product.description} | 12年行业深耕，全栈技术能力`,
|
||||
title: `${product.title} - ${COMPANY_INFO.displayName}`,
|
||||
description: product.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const product = PRODUCTS.find((p) => p.id === id);
|
||||
const item = await getPublishedItemBySlug('product', id);
|
||||
|
||||
if (!product) {
|
||||
if (!item) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const theme = getHeroTheme(product.heroThemeId);
|
||||
const crossRefs = getProductCrossRefs(product.id);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<DetailSwipeNav type="product" currentId={product.id} />
|
||||
|
||||
{/* L1 - Hero 情感入口 (V3) */}
|
||||
<DetailHeroV3
|
||||
theme={theme}
|
||||
badge={product.category}
|
||||
title={product.title}
|
||||
subtitle={product.description}
|
||||
description={product.overview}
|
||||
primaryAction={{ label: '预约体验', href: '/contact' }}
|
||||
secondaryAction={{ label: '查看组合方案', href: '/products' }}
|
||||
/>
|
||||
|
||||
{/* L2 - 价值理性支撑 (V3) */}
|
||||
<ProductValueSectionV3 product={product} />
|
||||
|
||||
{/* L3 - 信任证明 (V2) */}
|
||||
<DetailTrustSectionV2
|
||||
caseStudies={product.caseStudies}
|
||||
dataProofs={product.dataProofs}
|
||||
certifications={product.certifications}
|
||||
accentColor={theme.accentColor}
|
||||
/>
|
||||
|
||||
{/* L4 - CTA + 交叉推荐 (V2) */}
|
||||
<DetailCTASectionV2
|
||||
theme={theme}
|
||||
title={`探索 ${product.title} 的更多可能`}
|
||||
description="联系我们获取专属方案，或查看产品组合了解如何与其他产品协同使用"
|
||||
primaryAction={{ label: '预约演示', href: '/contact' }}
|
||||
secondaryAction={{ label: '查看组合方案', href: '/products' }}
|
||||
/>
|
||||
|
||||
<CrossRecommendGrid items={crossRefs} title={`与 ${product.title} 相关的推荐`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const product = { ...item.data, title: item.data.title || item.title } as unknown as Product;
|
||||
return <ProductDetailContentV3 product={JSON.parse(JSON.stringify(product))} />;
|
||||
}
|
||||
@@ -1,57 +1,89 @@
|
||||
import { Metadata } from 'next';
|
||||
import { PRODUCTS, COMPANY_INFO } from '@/lib/constants';
|
||||
import { getHeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { getProductCrossRefs } from '@/lib/constants/cross-references';
|
||||
import { getProductBySlug } from '@/lib/cms/data-server';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
|
||||
import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
|
||||
import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3';
|
||||
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
|
||||
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
|
||||
import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
|
||||
import { DetailHero } from '@/components/detail/detail-hero';
|
||||
import { ProductValueSection } from '@/components/detail/detail-product-value';
|
||||
import { DetailTrustSection } from '@/components/detail/detail-trust-section';
|
||||
import { DetailCTASection } from '@/components/detail/detail-cta-section';
|
||||
import type { HeroTheme } from '@/lib/constants/hero-themes';
|
||||
import type { Product, CaseStudy, DataProof, Certification } from '@/lib/constants/products';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: `睿新ERP管理系统（V3深度精细化版） - ${COMPANY_INFO.displayName}`,
|
||||
description: 'ERP产品页V3版本 - 现代东方美学设计系统 + L1-L5全层次精细化打磨',
|
||||
};
|
||||
|
||||
export default function ERPUpgradeV3Page() {
|
||||
const product = PRODUCTS.find((p) => p.id === 'erp')!;
|
||||
function deriveTheme(productData: Record<string, unknown>): HeroTheme {
|
||||
const heroThemeId = productData.heroThemeId as string;
|
||||
// Build a theme from product data fields, with sensible defaults
|
||||
return {
|
||||
id: heroThemeId || 'default',
|
||||
name: 'ERP主题',
|
||||
gradientFrom: '#f8f6f3',
|
||||
gradientTo: '#f0ebe4',
|
||||
gradientAngle: 135,
|
||||
accentColor: '#1e3a5f',
|
||||
accentBg: 'rgba(30, 58, 95, 0.06)',
|
||||
texture: { type: 'grid' as const, opacity: 0.03 },
|
||||
layout: 'left' as const,
|
||||
badge: productData.category as string,
|
||||
};
|
||||
}
|
||||
|
||||
const theme = getHeroTheme(product.heroThemeId);
|
||||
const crossRefs = getProductCrossRefs(product.id);
|
||||
export default async function ERPUpgradeV3Page() {
|
||||
const item = await getProductBySlug('erp');
|
||||
|
||||
if (!item) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[var(--color-bg-primary)]">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">产品未找到</h2>
|
||||
<p className="text-[var(--color-text-muted)]">ERP产品数据暂不可用，请稍后再试</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const data = item.data;
|
||||
const theme = deriveTheme(data);
|
||||
const title = item.title;
|
||||
const description = data.description as string;
|
||||
const overview = data.overview as string;
|
||||
const caseStudies = (data.caseStudies ?? []) as CaseStudy[];
|
||||
const dataProofs = (data.dataProofs ?? []) as DataProof[];
|
||||
const certifications = (data.certifications ?? []) as Certification[];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<DetailSwipeNav type="product" currentId={product.id} />
|
||||
<DetailSwipeNav type="product" currentId={item.slug || 'erp'} />
|
||||
|
||||
<DetailHeroV3
|
||||
<DetailHero
|
||||
theme={theme}
|
||||
badge="企业旗舰系列"
|
||||
title={product.title}
|
||||
subtitle={product.description}
|
||||
description={product.overview}
|
||||
title={title}
|
||||
subtitle={description}
|
||||
description={overview}
|
||||
primaryAction={{ label: '预约体验', href: '/contact' }}
|
||||
secondaryAction={{ label: '查看方案', href: '/solutions' }}
|
||||
/>
|
||||
|
||||
<ProductValueSectionV3 product={product} />
|
||||
<ProductValueSection product={data as unknown as Product} />
|
||||
|
||||
<DetailTrustSectionV2
|
||||
caseStudies={product.caseStudies}
|
||||
dataProofs={product.dataProofs}
|
||||
certifications={product.certifications}
|
||||
<DetailTrustSection
|
||||
caseStudies={caseStudies}
|
||||
dataProofs={dataProofs}
|
||||
certifications={certifications}
|
||||
accentColor={theme.accentColor}
|
||||
/>
|
||||
|
||||
<DetailCTASectionV2
|
||||
<DetailCTASection
|
||||
theme={theme}
|
||||
title={`探索 ${product.title} 的无限可能`}
|
||||
title={`探索 ${title} 的无限可能`}
|
||||
description="立即联系我们，获取专属方案和报价"
|
||||
primaryAction={{ label: '预约体验', href: '/contact' }}
|
||||
secondaryAction={{ label: '下载产品手册', href: '#' }}
|
||||
/>
|
||||
|
||||
<CrossRecommendGrid items={crossRefs} title={`与 ${product.title} 相关的推荐`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,57 +1,26 @@
|
||||
import { Metadata } from 'next';
|
||||
import { PRODUCTS, COMPANY_INFO } from '@/lib/constants';
|
||||
import { getHeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { getProductCrossRefs } from '@/lib/constants/cross-references';
|
||||
import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
|
||||
import { DetailHeroV2 } from '@/components/detail-v2/detail-hero-v2';
|
||||
import { ProductValueSectionV2 } from '@/components/detail-v2/detail-product-value-v2';
|
||||
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
|
||||
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
|
||||
import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
|
||||
import { getProductBySlug } from '@/lib/cms/data-server';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import ErpUpgradeContentV2 from './erp-upgrade-content-v2';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: `睿新ERP管理系统（升级版原型） - ${COMPANY_INFO.displayName}`,
|
||||
description: '升级版ERP产品页 - 现代东方美学设计系统',
|
||||
title: `ERP升级专题 - 企业数字化转型 | ${COMPANY_INFO.displayName}`,
|
||||
description: '睿新ERP升级专题，为企业提供全方位数字化转型解决方案，解决数据孤岛、效率低下、安全隐患等痛点。',
|
||||
};
|
||||
|
||||
export default function ERPUpgradePage() {
|
||||
const product = PRODUCTS.find((p) => p.id === 'erp')!;
|
||||
export default async function ERPUpgradePage() {
|
||||
const item = await getProductBySlug('erp');
|
||||
|
||||
const theme = getHeroTheme(product.heroThemeId);
|
||||
const crossRefs = getProductCrossRefs(product.id);
|
||||
if (!item) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[var(--color-bg-primary)]">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">数据暂不可用</h2>
|
||||
<p className="text-[var(--color-text-muted)]">ERP产品数据暂不可用，请稍后再试</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<DetailSwipeNav type="product" currentId={product.id} />
|
||||
|
||||
<DetailHeroV2
|
||||
theme={theme}
|
||||
badge="企业旗舰系列"
|
||||
title={product.title}
|
||||
subtitle={product.description}
|
||||
description={product.overview}
|
||||
primaryAction={{ label: '预约体验', href: '/contact' }}
|
||||
secondaryAction={{ label: '查看方案', href: '/solutions' }}
|
||||
/>
|
||||
|
||||
<ProductValueSectionV2 product={product} />
|
||||
|
||||
<DetailTrustSectionV2
|
||||
caseStudies={product.caseStudies}
|
||||
dataProofs={product.dataProofs}
|
||||
certifications={product.certifications}
|
||||
accentColor={theme.accentColor}
|
||||
/>
|
||||
|
||||
<DetailCTASectionV2
|
||||
theme={theme}
|
||||
title={`探索 ${product.title} 的无限可能`}
|
||||
description="立即联系我们，获取专属方案和报价"
|
||||
primaryAction={{ label: '预约体验', href: '/contact' }}
|
||||
secondaryAction={{ label: '下载产品手册', href: '#' }}
|
||||
/>
|
||||
|
||||
<CrossRecommendGrid items={crossRefs} title={`与 ${product.title} 相关的推荐`} />
|
||||
</div>
|
||||
);
|
||||
return <ErpUpgradeContentV2 item={JSON.parse(JSON.stringify(item))} />;
|
||||
}
|
||||
|
||||
@@ -1,226 +1,16 @@
|
||||
'use client';
|
||||
import { Metadata } from 'next';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItems } from '@/lib/cms/data-server';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
import ProductsContentV3 from './products-content-v3';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
|
||||
import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
|
||||
import { InkCard, InkWashBackground } from '@/components/ui/ink-wash';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Package, Cpu, ArrowRight, Lock } from 'lucide-react';
|
||||
export const metadata: Metadata = {
|
||||
title: `产品矩阵 - ${COMPANY_INFO.displayName}`,
|
||||
description: `覆盖企业数字化全场景的产品矩阵，从数据智能到业务协同，每一款产品都经过实战验证。`,
|
||||
};
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
const enterpriseProducts = PRODUCTS.filter(p => p.categoryId === 'enterprise');
|
||||
const specializedProducts = PRODUCTS.filter(p => p.categoryId === 'specialized');
|
||||
|
||||
/** 产品常见组合推荐 */
|
||||
const SUITE_COMBOS = [
|
||||
{ products: ['erp', 'bi'], label: 'ERP + BI 数据驱动组合' },
|
||||
{ products: ['crm', 'bi'], label: 'CRM + BI 客户洞察组合' },
|
||||
{ products: ['erp', 'sds'], label: 'ERP + SDS 供应链优化组合' },
|
||||
{ products: ['cms', 'oa'], label: 'CMS + OA 协同运营组合' },
|
||||
];
|
||||
|
||||
function getProductCombo(productId: string) {
|
||||
return SUITE_COMBOS.filter(c => c.products.includes(productId));
|
||||
}
|
||||
|
||||
export default function ProductsPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '产品', href: '/products' }]} />
|
||||
|
||||
{/* Hero */}
|
||||
<NarrativeHero
|
||||
badge={{ text: '自研产品' }}
|
||||
title="覆盖企业数字化全场景的"
|
||||
highlight="产品矩阵"
|
||||
subtitle="从数据智能到业务协同，每一款产品都经过实战验证"
|
||||
description="6 大核心产品互为补充，常以组合形式出现在行业解决方案中。不确定需要哪些产品？让我们帮您诊断。"
|
||||
primaryCta={{ label: '预约产品演示', href: '/contact' }}
|
||||
secondaryCta={{ label: '查看行业方案', href: '/solutions' }}
|
||||
stats={[
|
||||
{ value: '6', label: '产品线' },
|
||||
{ value: '100%', label: '自研率' },
|
||||
{ value: '全栈', label: '技术覆盖' },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 企业套装区 (Hub 核心) */}
|
||||
<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 }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="mb-10"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--color-brand-primary-bg)]">
|
||||
<Package className="h-5 w-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">企业套装</h2>
|
||||
<p className="text-sm text-[var(--color-text-muted)]">6 大核心产品互为补充，覆盖企业数字化全场景</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{enterpriseProducts.map((product, idx) => {
|
||||
const combos = getProductCombo(product.id);
|
||||
return (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.06, ease: EASE }}
|
||||
>
|
||||
<InkCard padding="md" href={`/products/${product.id}`} className="group h-full flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]">
|
||||
{product.status}
|
||||
</span>
|
||||
{product.tags.slice(0, 2).map(tag => (
|
||||
<span key={tag} className="px-2 py-0.5 rounded text-[10px] bg-[var(--color-bg-section)] text-[var(--color-text-subtle)] border border-[var(--color-border-primary)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
{product.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-4 flex-1">
|
||||
{product.description}
|
||||
</p>
|
||||
{/* 常见组合标签 */}
|
||||
{combos.length > 0 && (
|
||||
<div className="pt-3 border-t border-[var(--color-border-primary)]">
|
||||
<p className="text-[10px] text-[var(--color-text-subtle)] mb-1.5">常见组合</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{combos.map(c => (
|
||||
<span key={c.label} className="px-2 py-0.5 rounded text-[10px] text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)] font-medium">
|
||||
{c.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 专业产品区 (Independent) */}
|
||||
<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 }}
|
||||
transition={{ duration: 0.6, ease: EASE }}
|
||||
className="mb-10"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--color-bg-section)]">
|
||||
<Cpu className="h-5 w-5 text-[var(--color-text-muted)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">专业产品</h2>
|
||||
<p className="text-sm text-[var(--color-text-muted)]">自成体系的独立产品线，面向特种场景</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{specializedProducts.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{specializedProducts.map((product, idx) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.06, ease: EASE }}
|
||||
>
|
||||
<InkCard padding="md" href={`/products/${product.id}`} className="group h-full flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]">
|
||||
{product.status}
|
||||
</span>
|
||||
{product.tags.slice(0, 3).map(tag => (
|
||||
<span key={tag} className="px-2 py-0.5 rounded text-[10px] bg-[var(--color-bg-section)] text-[var(--color-text-subtle)] border border-[var(--color-border-primary)]">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
{product.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed flex-1">
|
||||
{product.description}
|
||||
</p>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-2xl border-2 border-dashed border-[var(--color-border-primary)] bg-[var(--color-bg-section)] p-12 text-center">
|
||||
<Lock className="mx-auto mb-4 h-12 w-12 text-[var(--color-text-subtle)]" />
|
||||
<h3 className="mb-2 text-lg font-semibold text-[var(--color-text-primary)]">独立产品即将上线</h3>
|
||||
<p className="mb-6 max-w-md mx-auto text-sm text-[var(--color-text-muted)]">
|
||||
安全产品、特种行业软件、硬件产品等独立产品线正在规划中，敬请期待。
|
||||
</p>
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-primary)] px-6 py-3 text-sm font-semibold text-white shadow-lg transition-all hover:bg-[var(--color-brand-primary-hover)]"
|
||||
>
|
||||
联系我们了解详情
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 套装→方案关联 */}
|
||||
<section className="relative py-16 md:py-20 bg-[var(--color-bg-section)]">
|
||||
<div className="container-wide text-center">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">
|
||||
这些产品如何组合？
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] mb-6 max-w-lg mx-auto">
|
||||
查看我们的行业解决方案，了解产品组合如何为不同行业创造价值
|
||||
</p>
|
||||
<StaticLink
|
||||
href="/solutions"
|
||||
className="inline-flex items-center gap-2 text-sm font-medium text-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary-hover)] transition-colors group"
|
||||
>
|
||||
浏览行业解决方案
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<NarrativeCTA
|
||||
title="不确定需要哪些产品？"
|
||||
description="告诉我们您的业务场景和痛点，我们帮您诊断并推荐最适合的产品组合。首次咨询免费。"
|
||||
primaryLabel="预约产品诊断"
|
||||
primaryHref="/contact"
|
||||
secondaryLabel="查看全部方案"
|
||||
secondaryHref="/solutions"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default async function ProductsPage() {
|
||||
const items = await getPublishedItems('product');
|
||||
const products = items.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as Product));
|
||||
return <ProductsContentV3 products={products} />;
|
||||
}
|
||||
@@ -1,16 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { getHeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
|
||||
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
|
||||
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
|
||||
import { DetailHero } from '@/components/detail/detail-hero';
|
||||
import { DetailTrustSection } from '@/components/detail/detail-trust-section';
|
||||
import { DetailCTASection } from '@/components/detail/detail-cta-section';
|
||||
import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
|
||||
import { motion } from 'framer-motion';
|
||||
import { CheckCircle2, Clock, Shield, Lock, Cpu, HardDrive, ArrowRight } from 'lucide-react';
|
||||
import type { StandaloneProduct } from '@/lib/constants/standalone-products';
|
||||
import { CheckCircle2, Shield, Lock, Cpu, HardDrive, ArrowRight } from 'lucide-react';
|
||||
import type { ContentItem } from '@/lib/cms/types';
|
||||
import type { CaseStudy, DataProof, Certification } from '@/lib/constants/products';
|
||||
|
||||
interface StandaloneProductClientProps {
|
||||
product: StandaloneProduct;
|
||||
item: ContentItem;
|
||||
}
|
||||
|
||||
const categoryIcons: Record<string, typeof Shield> = {
|
||||
@@ -19,28 +20,50 @@ const categoryIcons: Record<string, typeof Shield> = {
|
||||
hardware: HardDrive,
|
||||
};
|
||||
|
||||
export function StandaloneProductClient({ product }: StandaloneProductClientProps) {
|
||||
const theme = getHeroTheme(product.heroThemeId);
|
||||
const Icon = categoryIcons[product.category] || Shield;
|
||||
function getStatusClass(status: string): 'coming-soon' | 'beta' | 'active' {
|
||||
if (status === '研发中') return 'coming-soon';
|
||||
if (status === '内测中') return 'beta';
|
||||
if (status === '已发布') return 'active';
|
||||
return 'beta';
|
||||
}
|
||||
|
||||
export function StandaloneProductClient({ item }: StandaloneProductClientProps) {
|
||||
const data = item.data;
|
||||
const id = item.slug || '';
|
||||
const title = item.title;
|
||||
const description = data.description as string;
|
||||
const category = data.category as string;
|
||||
const status = getStatusClass(data.status as string);
|
||||
const heroThemeId = data.heroThemeId as string;
|
||||
const features = (data.features ?? []) as string[];
|
||||
const caseStudies = (data.caseStudies ?? []) as CaseStudy[];
|
||||
const dataProofs = (data.dataProofs ?? []) as DataProof[];
|
||||
const certifications = (data.certifications ?? []) as Certification[];
|
||||
|
||||
const theme = getHeroTheme(heroThemeId);
|
||||
const Icon = categoryIcons[category] || Shield;
|
||||
|
||||
// Determine badge text
|
||||
const badgeText = status === 'coming-soon' ? '敬请期待' : category;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<DetailSwipeNav type="product" currentId={product.id} />
|
||||
<DetailSwipeNav type="product" currentId={id} />
|
||||
|
||||
<DetailHeroV3
|
||||
<DetailHero
|
||||
theme={theme}
|
||||
badge={product.status === 'coming-soon' ? '敬请期待' : product.badge}
|
||||
title={product.title}
|
||||
subtitle={product.description}
|
||||
badge={badgeText}
|
||||
title={title}
|
||||
subtitle={description}
|
||||
primaryAction={
|
||||
product.status === 'coming-soon'
|
||||
status === 'coming-soon'
|
||||
? undefined
|
||||
: { label: '了解详情', href: '/contact' }
|
||||
}
|
||||
secondaryAction={{ label: '返回产品列表', href: '/products' }}
|
||||
/>
|
||||
|
||||
{product.status === 'coming-soon' ? (
|
||||
{status === 'coming-soon' ? (
|
||||
<section className="bg-white py-16 lg:py-20">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
@@ -51,56 +74,56 @@ export function StandaloneProductClient({ product }: StandaloneProductClientProp
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
>
|
||||
<div className="mb-6 flex justify-center">
|
||||
<div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-gray-100 text-gray-400">
|
||||
<div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-bg-secondary text-text-muted">
|
||||
<Lock className="h-10 w-10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="mb-4 text-2xl font-bold text-gray-900">产品即将上线</h2>
|
||||
<p className="mb-8 text-gray-600 leading-relaxed">
|
||||
{product.title}正在紧张开发中，我们将为您带来更专业的{product.category === 'security' ? '安全防护' : product.category === 'specialized-software' ? '行业解决方案' : '硬件产品'}体验。
|
||||
|
||||
<h2 className="mb-4 text-2xl font-bold text-ink">产品即将上线</h2>
|
||||
<p className="mb-8 text-text-secondary leading-relaxed">
|
||||
{title}正在紧张开发中。
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-10">
|
||||
{product.previewFeatures.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.08 }}
|
||||
className="rounded-lg border border-gray-200 bg-gray-50 p-4"
|
||||
>
|
||||
<div className="mb-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white text-gray-400">
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<h3 className="mb-1 text-sm font-semibold text-gray-900">{feature.title}</h3>
|
||||
<p className="text-xs leading-relaxed text-gray-500">{feature.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
{features.length > 0 && (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-10">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.08 }}
|
||||
className="rounded-lg border border-border-primary bg-bg-secondary p-4"
|
||||
>
|
||||
<div className="mb-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white text-text-muted">
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<h3 className="mb-1 text-sm font-semibold text-ink">
|
||||
{feature.includes('：') ? feature.split('：')[0] : feature}
|
||||
</h3>
|
||||
<p className="text-xs leading-relaxed text-text-muted">
|
||||
{feature.includes('：') ? feature.split('：')[1] : ''}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-[#C41E3A] px-8 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#C41E3A]/90 hover:shadow-lg"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-brand px-8 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-brand/90 hover:shadow-lg"
|
||||
>
|
||||
获取上线通知
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</a>
|
||||
<a
|
||||
href="/products"
|
||||
className="inline-flex items-center rounded-lg border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:border-gray-400 hover:bg-gray-50"
|
||||
className="inline-flex items-center rounded-lg border border-border-primary px-6 py-3 text-sm font-semibold text-text-secondary transition-all hover:border-border-secondary hover:bg-bg-secondary"
|
||||
>
|
||||
查看其他产品
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{product.expectedLaunch && (
|
||||
<p className="mt-6 text-sm text-gray-500">
|
||||
预计上线时间：<span className="font-medium text-gray-700">{product.expectedLaunch}</span>
|
||||
</p>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -115,59 +138,41 @@ export function StandaloneProductClient({ product }: StandaloneProductClientProp
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="mb-6 text-2xl font-bold text-gray-900">核心能力</h2>
|
||||
<ul className="space-y-3">
|
||||
{(product.features ?? []).map((feature, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="flex items-start gap-3"
|
||||
>
|
||||
<CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-[#C41E3A]" />
|
||||
<span className="text-sm leading-relaxed text-gray-700">{feature}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.15 }}
|
||||
>
|
||||
<h2 className="mb-6 flex items-center gap-2 text-2xl font-bold text-gray-900">
|
||||
<Clock className="h-5 w-5 text-[#C41E3A]" />
|
||||
适用场景
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{(product.useCases ?? []).map((useCase, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.06 }}
|
||||
className="rounded-lg border border-red-50 bg-red-50/30 p-4"
|
||||
>
|
||||
<h3 className="mb-1 text-sm font-semibold text-gray-900">{useCase.title}</h3>
|
||||
<p className="text-xs leading-relaxed text-gray-600">{useCase.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
<h2 className="mb-6 text-2xl font-bold text-ink">核心能力</h2>
|
||||
{features.length > 0 ? (
|
||||
<ul className="space-y-3">
|
||||
{features.map((feature, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="flex items-start gap-3"
|
||||
>
|
||||
<CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-brand" />
|
||||
<span className="text-sm leading-relaxed text-text-secondary">{feature}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-text-muted">暂无功能详情</p>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<DetailTrustSectionV2 accentColor={theme.accentColor} />
|
||||
<DetailTrustSection
|
||||
caseStudies={caseStudies}
|
||||
dataProofs={dataProofs}
|
||||
certifications={certifications}
|
||||
accentColor={theme.accentColor}
|
||||
/>
|
||||
|
||||
<DetailCTASectionV2
|
||||
<DetailCTASection
|
||||
theme={theme}
|
||||
title={`了解更多关于${product.title}`}
|
||||
title={`了解更多关于${title}`}
|
||||
description="联系我们，获取详细的产品资料和方案报价"
|
||||
primaryAction={{ label: '预约演示', href: '/contact' }}
|
||||
secondaryAction={{ label: '下载产品手册', href: '#' }}
|
||||
|
||||
@@ -1,38 +1,45 @@
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { STANDALONE_PRODUCTS } from '@/lib/constants/standalone-products';
|
||||
import { getPublishedItemBySlug, getPublishedItems } from '@/lib/cms/data-server';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { StandaloneProductClient } from './client';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return STANDALONE_PRODUCTS.map((product) => ({
|
||||
id: product.id,
|
||||
}));
|
||||
const items = await getPublishedItems('product');
|
||||
return items
|
||||
.filter((item) => item.data.categoryId === 'specialized')
|
||||
.map((item) => ({ id: item.slug! }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const product = STANDALONE_PRODUCTS.find((p) => p.id === id);
|
||||
const item = await getPublishedItemBySlug('product', id);
|
||||
|
||||
if (!product) {
|
||||
if (!item) {
|
||||
return {
|
||||
title: '产品未找到',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${product.title} - 专业产品 | ${COMPANY_INFO.displayName}`,
|
||||
description: product.description,
|
||||
title: `${item.title} - 专业产品 | ${COMPANY_INFO.displayName}`,
|
||||
description: item.data.description as string,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function StandaloneProductPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const product = STANDALONE_PRODUCTS.find((p) => p.id === id);
|
||||
const item = await getPublishedItemBySlug('product', id);
|
||||
|
||||
if (!product) {
|
||||
notFound();
|
||||
if (!item || item.data.categoryId !== 'specialized') {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[var(--color-bg-primary)]">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">产品未找到</h2>
|
||||
<p className="text-[var(--color-text-muted)]">该产品不存在或已被移除</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <StandaloneProductClient product={JSON.parse(JSON.stringify(product))} />;
|
||||
return <StandaloneProductClient item={JSON.parse(JSON.stringify(item))} />;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { getHeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { getServiceCrossRefs } from '@/lib/constants/cross-references';
|
||||
import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
|
||||
import { ServiceValueSectionV3 } from '@/components/detail-v2/service-value-v3';
|
||||
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
|
||||
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
|
||||
import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
|
||||
import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
|
||||
import ServiceDetailContentV4 from '../service-detail-content-v4';
|
||||
import type { Service } from '@/lib/constants/services';
|
||||
|
||||
interface ServiceDetailClientProps {
|
||||
@@ -15,43 +8,5 @@ interface ServiceDetailClientProps {
|
||||
}
|
||||
|
||||
export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||
const theme = getHeroTheme(service.heroThemeId);
|
||||
const crossRefs = getServiceCrossRefs(service.id);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<DetailSwipeNav type="service" currentId={service.id} />
|
||||
|
||||
{/* L1 - Hero 情感入口 (V3) */}
|
||||
<DetailHeroV3
|
||||
theme={theme}
|
||||
badge="专业服务"
|
||||
title={service.title}
|
||||
subtitle={service.description}
|
||||
primaryAction={{ label: '立即咨询', href: '/contact' }}
|
||||
secondaryAction={{ label: '查看案例', href: '/cases' }}
|
||||
/>
|
||||
|
||||
{/* L2 - 价值理性支撑 (V3) */}
|
||||
<ServiceValueSectionV3 service={service} />
|
||||
|
||||
{/* L3 - 信任证明 (V2) */}
|
||||
<DetailTrustSectionV2
|
||||
caseStudies={service.caseStudies}
|
||||
dataProofs={service.dataProofs}
|
||||
accentColor={theme.accentColor}
|
||||
/>
|
||||
|
||||
{/* L4 - CTA转化 (V2) */}
|
||||
<DetailCTASectionV2
|
||||
theme={theme}
|
||||
title={`准备好开始${service.title}了吗？`}
|
||||
description="联系我们，获取专属方案和报价"
|
||||
primaryAction={{ label: '预约咨询', href: '/contact' }}
|
||||
secondaryAction={{ label: '了解更多服务', href: '/services' }}
|
||||
/>
|
||||
|
||||
<CrossRecommendGrid items={crossRefs} title="相关解决方案" />
|
||||
</div>
|
||||
);
|
||||
return <ServiceDetailContentV4 service={service} />;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SERVICES, COMPANY_INFO } from '@/lib/constants';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItemBySlug, getAllPublishedSlugs } from '@/lib/cms/data-server';
|
||||
import type { Service } from '@/lib/constants/services';
|
||||
import { ServiceDetailClient } from './client';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return SERVICES.map((service) => ({
|
||||
id: service.id,
|
||||
}));
|
||||
const slugs = await getAllPublishedSlugs('service');
|
||||
return slugs.map((s) => ({ id: s.slug }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const service = SERVICES.find((s) => s.id === id);
|
||||
const item = await getPublishedItemBySlug('service', id);
|
||||
|
||||
if (!service) {
|
||||
return {
|
||||
title: '服务未找到',
|
||||
};
|
||||
if (!item) {
|
||||
return { title: '服务未找到' };
|
||||
}
|
||||
|
||||
const service = { ...item.data, title: item.data.title || item.title } as unknown as Service;
|
||||
return {
|
||||
title: `${service.title}服务 - 专业团队全程陪跑 | ${COMPANY_INFO.displayName}`,
|
||||
description: service.description,
|
||||
@@ -27,11 +27,12 @@ export async function generateMetadata({ params }: { params: Promise<{ id: strin
|
||||
|
||||
export default async function ServiceDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const service = SERVICES.find((s) => s.id === id);
|
||||
const item = await getPublishedItemBySlug('service', id);
|
||||
|
||||
if (!service) {
|
||||
if (!item) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const service = { ...item.data, title: item.data.title || item.title } as unknown as Service;
|
||||
return <ServiceDetailClient service={JSON.parse(JSON.stringify(service))} />;
|
||||
}
|
||||
}
|
||||
@@ -1,233 +1,16 @@
|
||||
'use client';
|
||||
import { Metadata } from 'next';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItems } from '@/lib/cms/data-server';
|
||||
import type { Service } from '@/lib/constants/services';
|
||||
import ServicesContentV3 from './services-content-v3';
|
||||
|
||||
import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
|
||||
import { NarrativeValue } from '@/components/sections/narrative/NarrativeValue';
|
||||
import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
|
||||
import { InkCard } from '@/components/ui/ink-wash';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import {
|
||||
Code,
|
||||
BarChart3,
|
||||
Lightbulb,
|
||||
Puzzle,
|
||||
ClipboardList,
|
||||
PencilRuler,
|
||||
Rocket,
|
||||
HeartHandshake,
|
||||
Briefcase,
|
||||
RefreshCcw,
|
||||
Handshake,
|
||||
} from 'lucide-react';
|
||||
import type { ValuePoint } from '@/components/sections/narrative/NarrativeValue';
|
||||
export const metadata: Metadata = {
|
||||
title: `服务 - ${COMPANY_INFO.displayName}`,
|
||||
description: `专业技术团队，为您提供全方位的数字化解决方案。${COMPANY_INFO.displayName}涵盖软件开发、数据分析、咨询服务等核心业务。`,
|
||||
};
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
const SERVICE_MATRIX: ValuePoint[] = [
|
||||
{
|
||||
icon: Code,
|
||||
title: '软件开发',
|
||||
description: '从需求分析到上线运维，提供全栈定制化开发。企业管理系统、Web/移动应用、数据中台——用扎实的工程能力交付高质量软件。',
|
||||
stat: '95%',
|
||||
statLabel: '准时交付率',
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: '数据分析',
|
||||
description: '多源数据整合、可视化看板、预测模型——让数据从"存着"变成"用着"，为经营决策提供可量化的洞察支撑。',
|
||||
stat: '100+',
|
||||
statLabel: '分析模型',
|
||||
},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: '技术咨询',
|
||||
description: 'IT 战略规划、技术选型评估、数字化转型路线图——帮您理清方向，规避技术风险，减少试错成本。',
|
||||
stat: '90%',
|
||||
statLabel: '方案落地率',
|
||||
},
|
||||
{
|
||||
icon: Puzzle,
|
||||
title: '方案实施',
|
||||
description: '深耕制造、零售、金融、医疗等行业，提供从咨询到落地的端到端交付，确保方案不只是 PPT。',
|
||||
stat: '30+',
|
||||
statLabel: '行业方案',
|
||||
},
|
||||
];
|
||||
|
||||
const SERVICE_PROCESS = [
|
||||
{ icon: ClipboardList, step: '01', title: '需求分析', desc: '深入了解业务场景与真实痛点，而非凭空假设' },
|
||||
{ icon: PencilRuler, step: '02', title: '方案设计', desc: '量身定制技术路线，拒绝千篇一律的模板' },
|
||||
{ icon: Rocket, step: '03', title: '敏捷交付', desc: '快速迭代，每个冲刺周期都有可交付成果' },
|
||||
{ icon: HeartHandshake, step: '04', title: '持续支持', desc: '上线不是终点，长期陪伴才是真正的承诺' },
|
||||
];
|
||||
|
||||
const SERVICE_MODES = [
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: '项目制',
|
||||
description: '针对明确的需求和交付目标，以项目为单位进行合作。适合有清晰边界的一次性建设类项目。',
|
||||
highlight: '固定范围 · 固定周期',
|
||||
},
|
||||
{
|
||||
icon: RefreshCcw,
|
||||
title: '订阅制',
|
||||
description: '按月或按年持续提供技术支持和迭代优化。适合需要长期维护、持续演进的产品和系统。',
|
||||
highlight: '持续迭代 · 弹性调整',
|
||||
},
|
||||
{
|
||||
icon: Handshake,
|
||||
title: '长期陪跑',
|
||||
description: '以合作伙伴身份深度参与您的数字化进程，从规划到执行全程陪伴。适合正在系统性转型的企业。',
|
||||
highlight: '深度参与 · 共同成长',
|
||||
},
|
||||
];
|
||||
|
||||
export default function ServicesPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
{/* Layer 1: Hero */}
|
||||
<NarrativeHero
|
||||
badge={{ text: '专业服务', variant: 'green' }}
|
||||
title="从规划到运维的"
|
||||
highlight="全程陪伴"
|
||||
subtitle="不只是技术供应商，更是您数字化转型的同行者"
|
||||
description="12 年行业深耕，我们深知每个项目背后都是真实的业务诉求。从第一次沟通到系统稳定运行，我们始终在您身边。"
|
||||
primaryCta={{ label: '聊聊您的需求', href: '/contact' }}
|
||||
secondaryCta={{ label: '查看产品矩阵', href: '/products' }}
|
||||
stats={[
|
||||
{ value: '4 大', label: '服务领域' },
|
||||
{ value: '3 种', label: '合作模式' },
|
||||
{ value: '全流程', label: '服务保障' },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Layer 2: Service Matrix */}
|
||||
<NarrativeValue
|
||||
badge="服务能力"
|
||||
title="四大核心服务"
|
||||
highlight="领域"
|
||||
subtitle="覆盖企业数字化全生命周期的专业能力"
|
||||
points={SERVICE_MATRIX}
|
||||
columns={4}
|
||||
bgVariant="section"
|
||||
/>
|
||||
|
||||
{/* Service Process */}
|
||||
<section className="section-padding bg-[var(--color-bg-primary)] relative overflow-hidden">
|
||||
<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-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">服务流程</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
我们的<span className="text-[var(--color-brand-primary)] font-calligraphy ml-1">做事方式</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 lg:grid-cols-4 gap-8">
|
||||
{SERVICE_PROCESS.map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={item.step}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1, ease: EASE }}
|
||||
className="relative"
|
||||
>
|
||||
{/* Connector line */}
|
||||
{index < SERVICE_PROCESS.length - 1 && (
|
||||
<div className="hidden lg:block absolute top-10 left-[calc(50%+2rem)] w-[calc(100%-2rem)] h-px bg-[var(--color-border-primary)]" />
|
||||
)}
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-5 w-20 h-20 rounded-2xl bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] flex items-center justify-center relative">
|
||||
<Icon className="w-8 h-8 text-[var(--color-text-primary)]" strokeWidth={1.5} />
|
||||
<span className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-[var(--color-brand-primary)] text-white text-xs font-bold flex items-center justify-center">
|
||||
{item.step}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{item.title}</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed max-w-[200px] mx-auto">{item.desc}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Modes */}
|
||||
<section className="section-padding bg-[var(--color-bg-section)] relative overflow-hidden">
|
||||
<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-primary-bg)] border border-[var(--color-brand-primary)]/10 mb-4">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand-primary)]" />
|
||||
<span className="text-xs font-medium tracking-wider text-[var(--color-brand-primary)]">合作模式</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
||||
灵活的<span className="text-[var(--color-brand-primary)] font-calligraphy ml-1">合作方式</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-3 gap-8">
|
||||
{SERVICE_MODES.map((mode, idx) => {
|
||||
const Icon = mode.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={mode.title}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.1, ease: EASE }}
|
||||
>
|
||||
<InkCard padding="lg" className="h-full">
|
||||
<div className="w-12 h-12 rounded-xl bg-[var(--color-brand-primary-bg)] flex items-center justify-center mb-5">
|
||||
<Icon className="w-6 h-6 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2">{mode.title}</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-4">{mode.description}</p>
|
||||
<div className="inline-flex items-center px-3 py-1 rounded-full bg-[var(--color-bg-section)] border border-[var(--color-border-primary)]">
|
||||
<span className="text-xs font-medium text-[var(--color-text-secondary)]">{mode.highlight}</span>
|
||||
</div>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Layer 4: CTA */}
|
||||
<NarrativeCTA
|
||||
title="聊聊您的需求"
|
||||
description="无论是一个明确的项目，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。首次咨询免费，没有任何销售压力。"
|
||||
primaryLabel="预约免费咨询"
|
||||
primaryHref="/contact"
|
||||
secondaryLabel="了解我们的团队"
|
||||
secondaryHref="/team"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default async function ServicesPage() {
|
||||
const items = await getPublishedItems('service');
|
||||
const services = items.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as Service));
|
||||
return <ServicesContentV3 services={services} />;
|
||||
}
|
||||
@@ -1,59 +1,14 @@
|
||||
'use client';
|
||||
|
||||
import { DetailSwipeNav } from '@/components/ui/detail-swipe-nav';
|
||||
import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
|
||||
import { SolutionValueSectionV3 } from '@/components/detail-v2/solution-value-v3';
|
||||
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
|
||||
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
|
||||
import { CrossRecommendGrid } from '@/components/detail/detail-cross-recommend';
|
||||
import { getHeroTheme } from '@/lib/constants/hero-themes';
|
||||
import { getSolutionCrossRefs } from '@/lib/constants/cross-references';
|
||||
import SolutionDetailContentV3 from '../solution-detail-content-v3';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
|
||||
interface SolutionDetailClientProps {
|
||||
solution: Solution;
|
||||
products?: Product[];
|
||||
}
|
||||
|
||||
export function SolutionDetailClient({ solution }: SolutionDetailClientProps) {
|
||||
const theme = getHeroTheme(solution.heroThemeId || 'solution');
|
||||
const crossRefs = getSolutionCrossRefs(solution.id);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<DetailSwipeNav type="solution" currentId={solution.id} />
|
||||
|
||||
{/* L1 - Hero 情感入口 (V3) */}
|
||||
<DetailHeroV3
|
||||
theme={theme}
|
||||
badge={`${solution.industry}解决方案`}
|
||||
title={solution.title}
|
||||
subtitle={solution.subtitle || solution.description}
|
||||
description={solution.description}
|
||||
primaryAction={{ label: '立即咨询', href: '/contact' }}
|
||||
secondaryAction={{ label: '查看案例', href: '/cases' }}
|
||||
/>
|
||||
|
||||
{/* L2 - 价值理性支撑 (V3) */}
|
||||
<SolutionValueSectionV3 solution={solution} />
|
||||
|
||||
{/* L3 - 信任证明 (V2) — 条件渲染：有案例/数据/资质时才显示 */}
|
||||
<DetailTrustSectionV2
|
||||
caseStudies={solution.caseStudies}
|
||||
dataProofs={solution.dataProofs}
|
||||
certifications={solution.certifications}
|
||||
accentColor={theme.accentColor}
|
||||
/>
|
||||
|
||||
{/* L4 - CTA转化 (V2) */}
|
||||
<DetailCTASectionV2
|
||||
theme={theme}
|
||||
title={`探索 ${solution.title} 的无限可能`}
|
||||
description="联系我们，获取专属方案和报价"
|
||||
primaryAction={{ label: '立即咨询', href: '/contact' }}
|
||||
secondaryAction={{ label: '下载方案白皮书', href: '#' }}
|
||||
/>
|
||||
|
||||
<CrossRecommendGrid items={crossRefs} title="相关产品与服务" />
|
||||
</div>
|
||||
);
|
||||
export function SolutionDetailClient({ solution, products }: SolutionDetailClientProps) {
|
||||
return <SolutionDetailContentV3 solution={solution} products={products} />;
|
||||
}
|
||||
|
||||
@@ -1,36 +1,44 @@
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SOLUTIONS } from '@/lib/constants/solutions';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItemBySlug, getPublishedItems, getAllPublishedSlugs } from '@/lib/cms/data-server';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
import { SolutionDetailClient } from './client';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return SOLUTIONS.map((solution) => ({
|
||||
id: solution.id,
|
||||
}));
|
||||
const slugs = await getAllPublishedSlugs('solution');
|
||||
return slugs.map((s) => ({ id: s.slug }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const solution = SOLUTIONS.find((s) => s.id === id);
|
||||
const item = await getPublishedItemBySlug('solution', id);
|
||||
|
||||
if (!solution) {
|
||||
if (!item) {
|
||||
return { title: '解决方案未找到' };
|
||||
}
|
||||
|
||||
const solution = { ...item.data, title: item.data.title || item.title } as unknown as Solution;
|
||||
return {
|
||||
title: `${solution.title}解决方案 - 行业深耕端到端交付 | ${COMPANY_INFO.displayName}`,
|
||||
title: `${solution.title} - 行业深耕端到端交付 | ${COMPANY_INFO.displayName}`,
|
||||
description: solution.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function SolutionDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const solution = SOLUTIONS.find((s) => s.id === id);
|
||||
const item = await getPublishedItemBySlug('solution', id);
|
||||
|
||||
if (!solution) {
|
||||
if (!item) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return <SolutionDetailClient solution={JSON.parse(JSON.stringify(solution))} />;
|
||||
}
|
||||
const solution = { ...item.data, title: item.data.title || item.title } as unknown as Solution;
|
||||
|
||||
// Fetch products for cross-reference lookup
|
||||
const productItems = await getPublishedItems('product');
|
||||
const products = productItems.map(p => ({ ...p.data, title: p.data.title || p.title } as unknown as Product));
|
||||
|
||||
return <SolutionDetailClient solution={JSON.parse(JSON.stringify(solution))} products={JSON.parse(JSON.stringify(products))} />;
|
||||
}
|
||||
@@ -1,104 +1,21 @@
|
||||
'use client';
|
||||
import { Metadata } from 'next';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItems } from '@/lib/cms/data-server';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
import type { Product } from '@/lib/constants/products';
|
||||
import SolutionsContentV3 from './solutions-content-v3';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
|
||||
import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
|
||||
import { InkCard, InkWashBackground } from '@/components/ui/ink-wash';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { SOLUTIONS } from '@/lib/constants/solutions';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
export const metadata: Metadata = {
|
||||
title: `解决方案 - ${COMPANY_INFO.displayName}`,
|
||||
description: `深耕行业场景的解决方案，端到端交付，推荐套装组合 + 配套服务包。基于自研产品矩阵，为制造业、贸易零售、教育培训、医疗健康、金融服务、物流运输六大行业量身定制最佳实践。`,
|
||||
};
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
export default function SolutionsPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '解决方案', href: '/solutions' }]} />
|
||||
|
||||
{/* Hero */}
|
||||
<NarrativeHero
|
||||
badge={{ text: '行业方案' }}
|
||||
title="深耕行业场景的"
|
||||
highlight="解决方案"
|
||||
subtitle="端到端交付，推荐套装组合 + 配套服务包"
|
||||
description="基于自研产品矩阵，为制造业、零售业、教育、医疗等行业量身定制最佳实践。每个方案都明确推荐产品组合和服务包。"
|
||||
primaryCta={{ label: '立即咨询', href: '/contact' }}
|
||||
secondaryCta={{ label: '浏览产品', href: '/products' }}
|
||||
stats={[
|
||||
{ value: '4+', label: '行业覆盖' },
|
||||
{ value: '端到端', label: '交付模式' },
|
||||
{ value: '定制化', label: '方案特点' },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 行业解决方案 */}
|
||||
<section className="relative section-padding bg-[var(--color-bg-section)] overflow-hidden">
|
||||
<InkWashBackground variant="subtle" />
|
||||
<div className="container-wide relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
|
||||
{SOLUTIONS.map((solution, idx) => (
|
||||
<motion.div
|
||||
key={solution.id}
|
||||
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-40px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.08, ease: EASE }}
|
||||
>
|
||||
<InkCard padding="lg" href={`/solutions/${solution.id}`} className="group h-full flex flex-col">
|
||||
{/* Industry badge */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="px-2.5 py-1 rounded text-xs font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)]">
|
||||
{solution.industry}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--color-text-subtle)]">{solution.subtitle}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
{solution.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5 flex-1">
|
||||
{solution.description}
|
||||
</p>
|
||||
|
||||
{/* 推荐产品组合 */}
|
||||
<div className="pt-4 border-t border-[var(--color-border-primary)]">
|
||||
<p className="text-[10px] text-[var(--color-text-subtle)] mb-2 uppercase tracking-wider">推荐产品组合</p>
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
{solution.suiteCombination.primaryProducts.map(pid => {
|
||||
const prod = PRODUCTS.find(p => p.id === pid);
|
||||
return prod ? (
|
||||
<span key={pid} className="px-2.5 py-1 rounded text-xs bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] border border-[var(--color-border-primary)] font-medium">
|
||||
{prod.title.replace('睿新', '').replace('睿视 ', '')}
|
||||
</span>
|
||||
) : null;
|
||||
})}
|
||||
<span className="px-2.5 py-1 rounded text-xs text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)] font-medium">
|
||||
+ 配套服务
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--color-text-muted)] leading-relaxed">
|
||||
{solution.suiteCombination.rationale}
|
||||
</p>
|
||||
</div>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<NarrativeCTA
|
||||
title="告诉我们您的行业场景"
|
||||
description="无论您处于哪个行业、哪个数字化阶段，我们都能为您推荐最合适的产品组合和服务包。"
|
||||
primaryLabel="获取定制方案"
|
||||
primaryHref="/contact"
|
||||
secondaryLabel="浏览产品"
|
||||
secondaryHref="/products"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default async function SolutionsPage() {
|
||||
const [solutionItems, productItems] = await Promise.all([
|
||||
getPublishedItems('solution'),
|
||||
getPublishedItems('product'),
|
||||
]);
|
||||
const solutions = solutionItems.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as Solution));
|
||||
const products = productItems.map((item) => ({ ...item.data, title: item.data.title || item.title } as unknown as Product));
|
||||
return <SolutionsContentV3 solutions={solutions} products={products} />;
|
||||
}
|
||||
@@ -1,154 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { NarrativeHero } from '@/components/sections/narrative/NarrativeHero';
|
||||
import { NarrativeValue } from '@/components/sections/narrative/NarrativeValue';
|
||||
import { NarrativeCTA } from '@/components/sections/narrative/NarrativeCTA';
|
||||
import { InkCard } from '@/components/ui/ink-wash';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import {
|
||||
Shield,
|
||||
Building2,
|
||||
Users,
|
||||
Code,
|
||||
Target,
|
||||
BookOpen,
|
||||
Layers,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import type { ValuePoint } from '@/components/sections/narrative/NarrativeValue';
|
||||
import TeamContentV3 from './team-content-v3';
|
||||
|
||||
const EASE = [0.25, 1, 0.5, 1] as const;
|
||||
|
||||
const TEAM_STRENGTHS: ValuePoint[] = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: '12 年+ 行业深耕',
|
||||
description: '核心团队长期从事技术咨询、企业数字化等领域，服务覆盖金融、制造、零售、政务、农业等多个行业。',
|
||||
stat: '12+',
|
||||
statLabel: '年',
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: '大型 IT 企业背景',
|
||||
description: '开发团队成员来自多个大型传统 IT 企业，具备扎实的工程能力、规范化的交付流程和严格的质量意识。',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '复合型技术团队',
|
||||
description: '既懂技术又懂业务，能够深入理解客户的真实场景和痛点，提供真正可落地的解决方案。',
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
title: '全栈技术能力',
|
||||
description: '从前端到后端、从云原生到数据智能、从移动端到物联网——应对各种复杂技术挑战。',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: '结果导向交付',
|
||||
description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一个交付成果都追求可量化的业务价值。',
|
||||
},
|
||||
];
|
||||
|
||||
const TEAM_CULTURE = [
|
||||
{
|
||||
icon: Layers,
|
||||
title: '扁平化协作',
|
||||
description: '没有冗长的汇报链条，每个人都有机会直接参与决策。信息透明，沟通高效。',
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: '持续学习',
|
||||
description: '技术日新月异，我们保持对新技术的好奇。内部分享、技术沙龙、外部培训——学习是日常的一部分。',
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: '客户成功',
|
||||
description: '我们的成就感来自客户的成功。客户的业务增长，就是我们最好的成绩单。',
|
||||
},
|
||||
];
|
||||
|
||||
export function TeamClient() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
{/* Layer 1: Hero */}
|
||||
<NarrativeHero
|
||||
badge={{ text: '核心团队', variant: 'purple' }}
|
||||
title="既懂技术又懂业务的"
|
||||
highlight="复合型团队"
|
||||
subtitle="12 年行业深耕，大厂背景，全栈能力"
|
||||
description="我们的成员不只是写代码的工程师——我们是能理解您业务场景、能和您一起想清楚问题的合作伙伴。"
|
||||
primaryCta={{ label: '与我们交流', href: '/contact' }}
|
||||
secondaryCta={{ label: '了解公司', href: '/about' }}
|
||||
stats={[
|
||||
{ value: '12+', label: '年行业经验' },
|
||||
{ value: '10+', label: '核心成员' },
|
||||
{ value: '5+', label: '行业覆盖' },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Layer 2: Team Strengths */}
|
||||
<NarrativeValue
|
||||
badge="团队优势"
|
||||
title="我们的底气"
|
||||
highlight="从何而来"
|
||||
subtitle="不是自吹自擂，而是多年实战积累的真实能力"
|
||||
points={TEAM_STRENGTHS}
|
||||
columns={3}
|
||||
bgVariant="section"
|
||||
/>
|
||||
|
||||
{/* Team About Section */}
|
||||
<section className="section-padding bg-[var(--color-bg-primary)] relative overflow-hidden">
|
||||
<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="max-w-4xl mx-auto"
|
||||
>
|
||||
<InkCard padding="lg">
|
||||
<h2 className="text-2xl font-semibold text-[var(--color-text-primary)] mb-6 text-center">关于我们的团队</h2>
|
||||
<div className="space-y-4 max-w-3xl mx-auto text-center">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们的核心团队长期从事<span className="text-[var(--color-brand-primary)] font-medium">技术咨询</span>、<span className="text-[var(--color-brand-primary)] font-medium">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
|
||||
</p>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
开发团队成员来自于多个<span className="text-[var(--color-brand-primary)] font-medium">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
|
||||
</p>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们相信，优秀的技术咨询不仅需要过硬的技术能力，更需要深入理解客户的业务场景和真实需求。
|
||||
每一位成员都是既懂技术又懂业务的复合型人才。
|
||||
</p>
|
||||
</div>
|
||||
</InkCard>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Culture */}
|
||||
<NarrativeValue
|
||||
badge="团队文化"
|
||||
title="我们怎样"
|
||||
highlight="工作"
|
||||
subtitle="好的团队文化，最终体现在为客户创造的价值上"
|
||||
points={TEAM_CULTURE}
|
||||
columns={3}
|
||||
bgVariant="section"
|
||||
/>
|
||||
|
||||
{/* Layer 4: CTA */}
|
||||
<NarrativeCTA
|
||||
title="想成为我们的一员？"
|
||||
description="我们始终在寻找既懂技术又热爱业务的伙伴。如果您认同我们的理念，欢迎聊聊。"
|
||||
primaryLabel="联系我们"
|
||||
primaryHref="/contact"
|
||||
secondaryLabel="了解公司"
|
||||
secondaryHref="/about"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
export function TeamClient({ data }: { data: Record<string, unknown> }) {
|
||||
return <TeamContentV3 data={data} />;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
import { Metadata } from 'next';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { getPublishedItems } from '@/lib/cms/data-server';
|
||||
import { TeamClient } from './client';
|
||||
|
||||
export const metadata = {
|
||||
export const metadata: Metadata = {
|
||||
title: `核心团队 - ${COMPANY_INFO.displayName}`,
|
||||
description: `了解${COMPANY_INFO.name}的核心团队。我们的团队成员拥有丰富的行业经验和技术专长，致力于为客户提供专业的数字化转型服务。`,
|
||||
};
|
||||
|
||||
export default function TeamPage() {
|
||||
return <TeamClient />;
|
||||
export default async function TeamPage() {
|
||||
const items = await getPublishedItems('team-page');
|
||||
const data = items[0]?.data ?? {};
|
||||
return <TeamClient data={data} />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user