33 lines
1.9 KiB
TypeScript
33 lines
1.9 KiB
TypeScript
import Image from "next/image";
|
||
import { websites } from "../data/urls";
|
||
import Header from "@/components/header";
|
||
import Footer from "@/components/footer";
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div className="min-h-screen flex flex-col bg-gray-100">
|
||
<Header />
|
||
<main className="container mx-auto p-4 flex-grow">
|
||
<section className="text-center mb-12 max-md: max-w-2xl mx-auto">
|
||
<h2 className="text-4xl font-extrabold text-gray-900">智能计算实验室简介</h2>
|
||
<p className="text-xl text-gray-600 mt-4 text-left"> 在物理的世界里，粒子有形形色色的活法，有的粒子很轻，终生不为人所注意；有的粒子会一鸣惊人，在湮灭时释放出大量的光；有的粒子狡黠善变，一辈子不停地改变身份，时时刻刻要成为别的粒子；但有的粒子一生稳定，怀揣着出发时得到的巨大能量，一生孤独而平静地飞行，只活在自己的轨道里。</p>
|
||
</section>
|
||
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{websites.map((website, index) => (
|
||
<a key={index} href={website.link} rel="noopener noreferrer" target="_blank">
|
||
<div className="list-item bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
|
||
<Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden flex-shrink-0" />
|
||
<div className="list-info flex-shrink pl-3 pt-2 my-1 truncate">
|
||
<h3 className="list-name text-xl font-bold my-1 truncate">{website.title}</h3>
|
||
<div className="text-sm text-gray-500 truncate">{website.description}</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
))}
|
||
</section>
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|