110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
import { Navbar } from "@/components/Navbar";
|
||
import Link from "next/link";
|
||
|
||
function TopArea() {
|
||
return (
|
||
<div className="bg-[#35786f] text-white w-full min-h-[75dvh] flex justify-center items-center">
|
||
<div className="mb-16 mx-16 md:mx-0 md:max-w-[60dvw]">
|
||
<h1 className="text-6xl md:text-9xl mb-8">Learn Languages</h1>
|
||
<p className="text-2xl md:text-5xl">
|
||
Here is a very useful website to help you learn almost every language
|
||
in the world, including constructed ones.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface LinkAreaProps {
|
||
href: string;
|
||
name: string;
|
||
description: string;
|
||
color: string;
|
||
}
|
||
function LinkArea({ href, name, description, color }: LinkAreaProps) {
|
||
return (
|
||
<Link
|
||
href={href}
|
||
style={{ backgroundColor: color }}
|
||
className={`h-32 md:h-64 flex justify-center items-center`}
|
||
>
|
||
<div className="text-white m-8">
|
||
<h1 className="text-4xl">{name}</h1>
|
||
<p className="text-xl">{description}</p>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
function LinkGrid() {
|
||
return (
|
||
<div className="w-full grid grid-cols-1 grid-rows-6 md:grid-cols-3">
|
||
<LinkArea
|
||
href="/translator"
|
||
name="翻译器"
|
||
description="翻译到任何语言，并标注国际音标（IPA）"
|
||
color="#a56068"
|
||
></LinkArea>
|
||
<LinkArea
|
||
href="/text-speaker"
|
||
name="朗读器"
|
||
description="识别并朗读文本，支持循环朗读、朗读速度调节"
|
||
color="#578aad"
|
||
></LinkArea>
|
||
{/* <LinkArea
|
||
href="/word-board"
|
||
name="词墙"
|
||
description="将单词固定到一片区域，高效便捷地记忆单词"
|
||
color="#e9b353"></LinkArea> */}
|
||
<LinkArea
|
||
href="/srt-player"
|
||
name="逐句视频播放器"
|
||
description="基于SRT字幕文件，逐句播放视频以模仿母语者的发音"
|
||
color="#3c988d"
|
||
></LinkArea>
|
||
<LinkArea
|
||
href="/alphabet"
|
||
name="记忆字母表"
|
||
description="从字母表开始新语言的学习"
|
||
color="#dd7486"
|
||
></LinkArea>
|
||
<LinkArea
|
||
href="#"
|
||
name="更多功能"
|
||
description="开发中，敬请期待"
|
||
color="#cab48a"
|
||
></LinkArea>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Fortune() {
|
||
return (
|
||
<div className="w-full flex justify-center font-serif items-center flex-col min-h-64 h-[25vdh]">
|
||
<p className="text-3xl">Stay hungry, stay foolish.</p>
|
||
<cite className="text-[#e9b353] text-xl">—— Steve Jobs</cite>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Explore() {
|
||
return (
|
||
<div className="bg-[#bbbbbb] w-full flex justify-center items-center flex-col h-52">
|
||
<span className="text-[100px] text-white">探索网站</span>
|
||
<div className="w-0 h-0 border-l-[40px] border-r-[40px] border-t-[30px] border-l-transparent border-r-transparent border-t-white"></div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function Home() {
|
||
return (
|
||
<>
|
||
<Navbar></Navbar>
|
||
<TopArea></TopArea>
|
||
<Fortune></Fortune>
|
||
<Explore></Explore>
|
||
<LinkGrid></LinkGrid>
|
||
</>
|
||
);
|
||
}
|