feat: add homepage and contacts(to-do)

2024-12-17 01:48:47 +08:00
parent 35611e2d34
commit 987b8f04f3
7 changed files with 143 additions and 93 deletions
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { contacts } from "../../data/contacts";
+
+export default function Contacts() {
+  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) => (
+            <div key={index} className="bg-white shadow rounded-lg p-6 text-center">
+              <h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
+              <p className="text-gray-600 mt-2">
+                <a href={`mailto:${contact.email}`} className="text-blue-600 hover:underline">{contact.email}</a>
+              </p>
+            </div>
+          ))}
+        </section>
+      </main>
+    </div>
+  );
+}