feat: create product detail page with dynamic routing
This commit is contained in:
张翔
@@ -0,0 +1,232 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { PRODUCTS } from '@/lib/constants';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowLeft, CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return PRODUCTS.map((product) => ({
|
||||
id: product.id,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: { id: string } }) {
|
||||
const product = PRODUCTS.find((p) => p.id === params.id);
|
||||
|
||||
if (!product) {
|
||||
return {
|
||||
title: '产品未找到',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${product.title} - 睿新致远`,
|
||||
description: product.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default function ProductDetailPage({ params }: { params: { id: string } }) {
|
||||
const product = PRODUCTS.find((p) => p.id === params.id);
|
||||
|
||||
if (!product) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
|
||||
<div className="container-wide">
|
||||
<Link
|
||||
href="/#products"
|
||||
className="inline-flex items-center text-white/80 hover:text-white transition-colors mb-8"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回产品列表
|
||||
</Link>
|
||||
<div className="max-w-4xl">
|
||||
<div className="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm mb-6">
|
||||
{product.category}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
{product.title}
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-wide py-16">
|
||||
<div className="max-w-4xl">
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">产品概述</h2>
|
||||
<p className="text-lg text-[#5C5C5C] leading-relaxed">
|
||||
{product.overview}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Zap className="w-8 h-8 text-[#C41E3A]" />
|
||||
核心功能
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{product.features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-4 bg-[#F5F7FA] rounded-lg hover:bg-[#FFFBF5] transition-colors"
|
||||
>
|
||||
<div className="w-6 h-6 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<CheckCircle2 className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-[#1C1C1C]">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Target className="w-8 h-8 text-[#C41E3A]" />
|
||||
产品优势
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{product.benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-4 bg-gradient-to-r from-[#FFFBF5] to-transparent rounded-lg border-l-4 border-[#C41E3A]"
|
||||
>
|
||||
<div className="w-8 h-8 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Target className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-[#1C1C1C] font-medium">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Layers className="w-8 h-8 text-[#C41E3A]" />
|
||||
实施流程
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{product.process.map((step, index) => (
|
||||
<div key={index} className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1 pb-4">
|
||||
<p className="text-[#1C1C1C] font-medium">{step}</p>
|
||||
{index < product.process.length - 1 && (
|
||||
<div className="absolute left-5 top-10 w-0.5 h-8 bg-[#C41E3A]/20" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Layers className="w-8 h-8 text-[#C41E3A]" />
|
||||
技术规格
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{product.specs.map((spec, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 p-4 bg-[#F5F7FA] rounded-lg"
|
||||
>
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full" />
|
||||
<span className="text-[#1C1C1C]">{spec}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<CreditCard className="w-8 h-8 text-[#C41E3A]" />
|
||||
价格方案
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="p-6 bg-[#F5F7FA] rounded-lg border-2 border-transparent hover:border-[#C41E3A] transition-colors">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">基础版</h3>
|
||||
<p className="text-3xl font-bold text-[#C41E3A] mb-4">{product.pricing.base}</p>
|
||||
<ul className="space-y-2 text-sm text-[#5C5C5C]">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
基础功能模块
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
邮件支持
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
标准报表
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-6 bg-gradient-to-br from-[#C41E3A] to-[#A01830] rounded-lg text-white relative overflow-hidden">
|
||||
<div className="absolute top-4 right-4 bg-white/20 px-3 py-1 rounded-full text-xs">
|
||||
推荐
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">标准版</h3>
|
||||
<p className="text-3xl font-bold mb-4">{product.pricing.standard}</p>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
全部功能模块
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
电话支持
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
自定义报表
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-6 bg-[#F5F7FA] rounded-lg border-2 border-transparent hover:border-[#C41E3A] transition-colors">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">企业版</h3>
|
||||
<p className="text-3xl font-bold text-[#C41E3A] mb-4">{product.pricing.enterprise}</p>
|
||||
<ul className="space-y-2 text-sm text-[#5C5C5C]">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
全部功能模块
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
专属客服
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
定制开发
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-gray-200">
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="/#contact">
|
||||
联系我们
|
||||
</Link>
|
||||
</Button>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<Link href="/#contact">
|
||||
立即咨询
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user