127 lines
4.8 KiB
TypeScript
127 lines
4.8 KiB
TypeScript
import Link from 'next/link'
|
||
import { prisma } from '@/lib/prisma'
|
||
import { ComponentCard } from '@/components/ComponentCard'
|
||
|
||
export default async function Home() {
|
||
// 获取每种配件类型的前几个商品
|
||
const componentTypes = await prisma.componentType.findMany({
|
||
include: {
|
||
components: {
|
||
take: 6,
|
||
orderBy: {
|
||
createdAt: 'desc'
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
{/* Hero Section */}
|
||
<section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-6">
|
||
欢迎来到PC DIY商城
|
||
</h1>
|
||
<p className="text-xl md:text-2xl mb-8">
|
||
专业的电脑配件在线选购平台，让您轻松打造梦想主机
|
||
</p>
|
||
<div className="space-x-4">
|
||
<Link
|
||
href="/components"
|
||
className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
|
||
>
|
||
立即选购
|
||
</Link>
|
||
<Link
|
||
href="/build"
|
||
className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors"
|
||
>
|
||
在线装机
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<section className="py-16">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 className="text-3xl font-bold text-center mb-12">为什么选择我们</h2>
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
<div className="text-center">
|
||
<div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">🔧</span>
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-2">专业配件</h3>
|
||
<p className="text-gray-600">
|
||
提供CPU、内存、硬盘、主板、显卡、机箱等全系列配件
|
||
</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">💰</span>
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-2">价格优势</h3>
|
||
<p className="text-gray-600">
|
||
多品牌选择，不同价位满足各种预算需求
|
||
</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">🚀</span>
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-2">在线装机</h3>
|
||
<p className="text-gray-600">
|
||
智能配置推荐，一站式完成整机搭配
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Product Categories */}
|
||
<section className="py-16 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 className="text-3xl font-bold text-center mb-12">热门配件</h2>
|
||
|
||
{componentTypes.map((type) => (
|
||
<div key={type.id} className="mb-12">
|
||
<div className="flex justify-between items-center mb-6">
|
||
<h3 className="text-2xl font-semibold">{type.name}</h3>
|
||
<Link
|
||
href={`/components?type=${type.id}`}
|
||
className="text-blue-600 hover:text-blue-800"
|
||
>
|
||
查看更多 →
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{type.components.map((component) => (
|
||
<ComponentCard key={component.id} component={component} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-16 bg-gray-800 text-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h2 className="text-3xl font-bold mb-4">准备开始装机了吗？</h2>
|
||
<p className="text-xl mb-8">
|
||
注册账号，享受更多服务和优惠
|
||
</p>
|
||
<Link
|
||
href="/register"
|
||
className="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
|
||
>
|
||
立即注册
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)
|
||
}
|