feat: implement the first version of landing page

This commit is contained in:
Henry Li
2026-01-23 13:24:03 +08:00
parent 307972f93e
commit 3f4bcd9433
25 changed files with 2576 additions and 241 deletions

View File

@@ -1,82 +1,25 @@
import { StarFilledIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { Jumbotron } from "@/components/landing/jumbotron";
import { Button } from "@/components/ui/button";
import { NumberTicker } from "@/components/ui/number-ticker";
import { env } from "@/env";
import { Footer } from "@/components/landing/footer";
import { Header } from "@/components/landing/header";
import { Hero } from "@/components/landing/hero";
import { CaseStudySection } from "@/components/landing/sections/case-study-section";
import { CommunitySection } from "@/components/landing/sections/community-section";
import { SandboxSection } from "@/components/landing/sections/sandbox-section";
import { SkillsSection } from "@/components/landing/sections/skills-section";
import { WhatsNewSection } from "@/components/landing/sections/whats-new-section";
export default function LandingPage() {
return (
<div className="min-h-screen w-full bg-[#0a0a0a]">
<header className="container-md absolute top-0 right-0 left-0 z-10 mx-auto flex h-16 items-center justify-between backdrop-blur-xs">
<div className="font-serif text-xl">
<h1>DeerFlow</h1>
</div>
<div className="relative">
<div
className="pointer-events-none absolute inset-0 z-0 h-full w-full rounded-full opacity-30 blur-2xl"
style={{
background: "linear-gradient(90deg, #ff80b5 0%, #9089fc 100%)",
filter: "blur(16px)",
}}
/>
<Button
variant="outline"
size="sm"
asChild
className="group relative z-10"
>
<Link href="https://github.com/bytedance/deer-flow" target="_blank">
<GitHubLogoIcon className="size-4" />
Star on GitHub
{env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" &&
env.GITHUB_OAUTH_TOKEN && <StarCounter />}
</Link>
</Button>
</div>
<hr className="from-border/0 via-border/70 to-border/0 absolute top-16 right-0 left-0 z-10 m-0 h-px w-full border-none bg-linear-to-r" />
</header>
<main className="w-full">
<Jumbotron />
<Header />
<main className="flex w-full flex-col">
<Hero />
<CaseStudySection />
<SkillsSection />
<SandboxSection />
<WhatsNewSection />
<CommunitySection />
</main>
<footer className="container-md mx-auto"></footer>
<Footer />
</div>
);
}
export async function StarCounter() {
let stars = 10000; // Default value
try {
const response = await fetch(
"https://api.github.com/repos/bytedance/deer-flow",
{
headers: env.GITHUB_OAUTH_TOKEN
? {
Authorization: `Bearer ${env.GITHUB_OAUTH_TOKEN}`,
"Content-Type": "application/json",
}
: {},
next: {
revalidate: 3600,
},
},
);
if (response.ok) {
const data = await response.json();
stars = data.stargazers_count ?? stars; // Update stars if API response is valid
}
} catch (error) {
console.error("Error fetching GitHub stars:", error);
}
return (
<>
<StarFilledIcon className="size-4 transition-colors duration-300 group-hover:text-yellow-500" />
{stars && (
<NumberTicker className="font-mono tabular-nums" value={stars} />
)}
</>
);
}