34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import Link from "next/link";
|
|
import { contacts } from "@/data/contacts";
|
|
|
|
export default function Page() {
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-gray-50">
|
|
<header className="w-full bg-white shadow p-4 flex justify-between items-center">
|
|
<h1 className="text-2xl font-bold text-gray-900">联系人信息</h1>
|
|
<nav>
|
|
<Link href="/" className="text-blue-600 hover:underline">
|
|
返回主页
|
|
</Link>
|
|
</nav>
|
|
</header>
|
|
<main className="container mx-auto p-4 flex-grow">
|
|
<section className="text-center mb-12">
|
|
<h2 className="text-4xl font-extrabold text-gray-900">我们的联系人</h2>
|
|
<p className="text-xl text-gray-600 mt-4">以下是我们的联系人的信息，您可以通过点击邮箱链接发送邮件。</p>
|
|
</section>
|
|
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{contacts.map((contact, index) => (
|
|
<a key={index} href={`mailto:${contact.email}`}>
|
|
<div className="bg-white shadow rounded-lg p-6 text-center hover:shadow-lg transition-shadow duration-300">
|
|
<h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
|
|
<p className="text-gray-600 mt-2">{contact.email}</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|