mirror of
https://github.com/bytedance/deer-flow.git
synced 2026-05-22 07:56:48 +00:00
johnny0120
e1187d7d02
* feat: add i18n support and add Chinese * fix: resolve conflicts * Update en.json with cancle settings * Update zh.json with settngs cancle --------- Co-authored-by: johnny0120 <15564476+johnny0120@users.noreply.github.com> Co-authored-by: Willem Jiang <willem.jiang@gmail.com> Co-authored-by: Willem Jiang <143703838+willem-bd@users.noreply.github.com>
87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import { GithubFilled } from "@ant-design/icons";
|
|
import { ChevronRight } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
import { AuroraText } from "~/components/magicui/aurora-text";
|
|
import { FlickeringGrid } from "~/components/magicui/flickering-grid";
|
|
import { Button } from "~/components/ui/button";
|
|
import { env } from "~/env";
|
|
|
|
export function Jumbotron() {
|
|
const t = useTranslations('hero');
|
|
const tCommon = useTranslations('common');
|
|
|
|
return (
|
|
<section className="flex h-[95vh] w-full flex-col items-center justify-center pb-15">
|
|
<FlickeringGrid
|
|
id="deer-hero-bg"
|
|
className={`absolute inset-0 z-0 [mask-image:radial-gradient(800px_circle_at_center,white,transparent)]`}
|
|
squareSize={4}
|
|
gridGap={4}
|
|
color="#60A5FA"
|
|
maxOpacity={0.133}
|
|
flickerChance={0.1}
|
|
/>
|
|
<FlickeringGrid
|
|
id="deer-hero"
|
|
className="absolute inset-0 z-0 translate-y-[2vh] mask-[url(/images/deer-hero.svg)] mask-size-[100vw] mask-center mask-no-repeat md:mask-size-[72vh]"
|
|
squareSize={3}
|
|
gridGap={6}
|
|
color="#60A5FA"
|
|
maxOpacity={0.64}
|
|
flickerChance={0.12}
|
|
/>
|
|
<div className="relative z-10 flex flex-col items-center justify-center gap-12">
|
|
<h1 className="text-center text-4xl font-bold md:text-6xl">
|
|
<span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
|
|
{t('title')}{" "}
|
|
</span>
|
|
<AuroraText>{t('subtitle')}</AuroraText>
|
|
</h1>
|
|
<p className="max-w-4xl p-2 text-center text-sm opacity-85 md:text-2xl">
|
|
{t('description')}
|
|
</p>
|
|
<div className="flex gap-6">
|
|
<Button className="hidden text-lg md:flex md:w-42" size="lg" asChild>
|
|
<Link
|
|
target={
|
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY ? "_blank" : undefined
|
|
}
|
|
href={
|
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY
|
|
? "https://github.com/bytedance/deer-flow"
|
|
: "/chat"
|
|
}
|
|
>
|
|
{tCommon('getStarted')} <ChevronRight />
|
|
</Link>
|
|
</Button>
|
|
{!env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY && (
|
|
<Button
|
|
className="w-42 text-lg"
|
|
size="lg"
|
|
variant="outline"
|
|
asChild
|
|
>
|
|
<Link
|
|
href="https://github.com/bytedance/deer-flow"
|
|
target="_blank"
|
|
>
|
|
<GithubFilled />
|
|
{tCommon('learnMore')}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="absolute bottom-8 flex text-xs opacity-50">
|
|
<p>{t('footnote')}</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|