40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { AutoplayVideo } from "../AutoplayVideo";
|
||
import { NewFile } from "../NewFile";
|
||
import { ExtraLargeTitle } from "../Primitives/ExtraLargeTitle";
|
||
import { SmallSubtitle } from "../Primitives/SmallSubtitle";
|
||
|
||
import heroVideo from "~/assets/home/JsonHero2.mp4";
|
||
|
||
const jsonHeroTitle = "JSON 很糟糕。";
|
||
const jsonHeroSlogan = "但我们正在让它变得更好。";
|
||
|
||
export function HomeHeroSection() {
|
||
return (
|
||
<div
|
||
className={`flex items-stretch flex-col md:flex-row bg-[rgb(56,52,139)] lg:p-6 lg:pb-16 pt-20 lg:pt-32`}
|
||
>
|
||
<div className="self-center md:w-1/2 md:pr-10 flex justify-end">
|
||
<div className=" max-w-3xl">
|
||
<AutoplayVideo src={heroVideo} />
|
||
</div>
|
||
</div>
|
||
<div className="self-center flex align-center md:w-1/2 px-6 pb-8 mt-8 lg:mt-0">
|
||
<div className="max-w-lg">
|
||
<ExtraLargeTitle className="text-lime-300">
|
||
{jsonHeroTitle}
|
||
</ExtraLargeTitle>
|
||
<ExtraLargeTitle className="text-white mb-4">
|
||
{jsonHeroSlogan}
|
||
</ExtraLargeTitle>
|
||
<SmallSubtitle className="text-slate-200 mb-8">
|
||
别再在编辑器里盯着几千行的 JSON 文件看了，
|
||
开始使用世界上最好的 JSON 查看器来查看几千行的 JSON 文件吧。
|
||
它有一些不错的功能，让 JSON 不再那么 <em>糟糕</em>。
|
||
</SmallSubtitle>
|
||
<NewFile />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|