feat: 创建详情页面和法律页面
- 创建产品详情页面组件,支持技术架构、应用场景、客户案例展示 - 创建服务详情页面组件,支持服务内容、流程、优势展示 - 创建隐私政策页面,符合中国法律要求 - 创建服务条款页面,规范用户服务协议
This commit is contained in:
张翔
@@ -0,0 +1,165 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SERVICES, COMPANY_INFO } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Check, Target, Users, Award, Briefcase, CheckCircle, FileText, Shield, TrendingUp } from 'lucide-react';
|
||||
|
||||
interface ServiceDetailPageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: ServiceDetailPageProps) {
|
||||
const { id } = await params;
|
||||
const service = SERVICES.find((s) => s.id === id);
|
||||
|
||||
if (!service) {
|
||||
return {
|
||||
title: '服务未找到',
|
||||
description: `未找到ID为${id}的服务`,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${service.title} - ${COMPANY_INFO.name}`,
|
||||
description: service.fullDescription || service.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ServiceDetailPage({ params }: ServiceDetailPageProps) {
|
||||
const { id } = await params;
|
||||
const service = SERVICES.find((s) => s.id === id);
|
||||
|
||||
if (!service) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
{/* 服务详情头部 */}
|
||||
<div className="mb-12">
|
||||
<Badge variant="outline" className="mb-4">
|
||||
服务详情
|
||||
</Badge>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
|
||||
{service.title}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 max-w-3xl">
|
||||
{service.fullDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 服务内容 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<FileText className="w-6 h-6 mr-3 text-blue-600" />
|
||||
服务内容
|
||||
</h2>
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">服务范围</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600">{service.content.scope}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">服务流程</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{service.content.process.map((phase, idx) => (
|
||||
<div key={idx} className="flex items-start">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold mr-3">
|
||||
{idx + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">{phase.phase}</h4>
|
||||
<p className="text-sm text-gray-600">{phase.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">交付成果</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{service.content.deliverables.map((deliverable, idx) => (
|
||||
<div key={idx} className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-3 text-green-600 flex-shrink-0" />
|
||||
<span className="text-gray-700">{deliverable}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 服务优势 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<Award className="w-6 h-6 mr-3 text-blue-600" />
|
||||
服务优势
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{service.advantages.map((advantage, idx) => (
|
||||
<Card key={idx} className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm text-gray-600">{advantage.label}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-blue-600">{advantage.value}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部CTA */}
|
||||
<div className="mt-20 text-center">
|
||||
<div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-12">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-black mb-4">
|
||||
需要了解更多信息？
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
我们的专业团队可以根据您的业务需求，提供量身定制的服务方案和咨询服务
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-black text-white hover:bg-gray-800"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
联系我们
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => window.open('https://wa.me/1234567890', '_blank')}
|
||||
>
|
||||
在线咨询
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user