wanwu/deer-flow
1
0
Fork 0
mirror of https://gitee.com/wanwujie/deer-flow synced 2026-04-17 11:44:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement basic layout of landing page

Browse Source
This commit is contained in:
Li Xin
2025-04-28 10:07:36 +08:00
parent 899438eca0
commit 08de9e0cab
14 changed files with 737 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/app/_components/logo.tsx
View File

@@ -1,25 +1,14 @@
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
import { useState } from "react";
import { Markdown } from "./markdown";
export function Logo() {
const [text, setText] = useState("🦌 DeerFlow");
return (
<a
className="opacity-70 transition-opacity duration-300 hover:opacity-100"
target="_blank"
href="https://github.com/bytedance/deer-flow"
onMouseEnter={() =>
setText(
"🦌 **D**eep **E**xploration and **E**fficient **R**esearch Flow",
)
}
onMouseLeave={() => setText("🦌 DeerFlow")}
>
<Markdown animate>{text}</Markdown>
🦌 DeerFlow
</a>
);
}

2
web/src/app/_components/theme-toggle.tsx
View File

@@ -1,6 +1,8 @@
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
"use client";
import { Monitor, Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";

9
web/src/app/chat/main.tsx
View File

@@ -3,24 +3,15 @@
"use client";
import { GithubOutlined } from "@ant-design/icons";
import Link from "next/link";
import { useMemo } from "react";
import { Button } from "~/components/ui/button";
import { useReplay } from "~/core/replay";
import { useStore } from "~/core/store";
import { cn } from "~/lib/utils";
import { Logo } from "../_components/logo";
import { MessagesBlock } from "../_components/messages-block";
import { ResearchBlock } from "../_components/research-block";
import { ThemeToggle } from "../_components/theme-toggle";
import { Tooltip } from "../_components/tooltip";
import { SettingsDialog } from "../_settings/dialogs/settings-dialog";
export default function Main() {
const { isReplay } = useReplay();
const openResearchId = useStore((state) => state.openResearchId);
const doubleColumnMode = useMemo(
() => openResearchId !== null,

6
web/src/app/chat/page.tsx
View File

@@ -25,9 +25,7 @@ export default function HomePage() {
<header className="fixed top-0 left-0 flex h-12 w-full w-screen items-center justify-between px-4">
<Logo />
<div className="flex items-center">
<ThemeToggle />
{!isReplay && <SettingsDialog />}
<Tooltip title="Visit DeerFlow on GitHub">
<Tooltip title="Star DeerFlow on GitHub">
<Button variant="ghost" size="icon" asChild>
<Link
href="https://github.com/bytedance/deer-flow"
@@ -37,6 +35,8 @@ export default function HomePage() {
</Link>
</Button>
</Tooltip>
<ThemeToggle />
{!isReplay && <SettingsDialog />}
</div>
</header>
<Suspense fallback={<div>Loading DeerFlow...</div>}>

2
web/src/app/layout.tsx
View File

@@ -26,7 +26,7 @@ export default function RootLayout({
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${geist.variable}`} suppressHydrationWarning>
<body className="bg-app h-screen w-screen overflow-hidden overscroll-none">
<body className="bg-app h-screen w-screen overscroll-none">
<ThemeProvider
attribute="class"
defaultTheme="system"

354
web/src/app/page.tsx
View File

@@ -1,10 +1,358 @@
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// SPDX-License-Identifier: MIT
"use client";
import { GithubFilled, GithubOutlined } from "@ant-design/icons";
import {
Bird,
Book,
Camera,
ChevronRight,
Code,
Globe,
Home,
Lightbulb,
Microscope,
Network,
Paintbrush,
Podcast,
ShoppingCart,
Usb,
User,
} from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { AuroraText } from "~/components/magicui/aurora-text";
import { BentoCard } from "~/components/magicui/bento-grid";
import { BentoGrid } from "~/components/magicui/bento-grid";
import { FlickeringGrid } from "~/components/magicui/flickering-grid";
import { Button } from "~/components/ui/button";
import { ThemeToggle } from "./_components/theme-toggle";
export default function HomePage() {
redirect("/chat");
return (
<div className="flex w-screen flex-col items-center">
<Header />
<main className="container flex w-screen flex-col items-center justify-center gap-56">
<Jumbotron />
<CaseStudySection />
<CoreFeatureSection />
<JoinCommunitySection />
</main>
<Footer />
</div>
);
}
function Header() {
return (
<header className="supports-backdrop-blur:bg-background/80 bg-background/40 sticky top-0 left-0 z-40 flex h-15 w-screen flex-col items-center backdrop-blur-lg">
<div className="container flex h-15 items-center justify-between">
<div className="text-xl font-medium">
<span className="mr-1">🦌</span>
<span>DeerFlow</span>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" asChild>
<Link href="https://github.com/bytedance/deer-flow" target="_blank">
<GithubOutlined />
Star on GitHub
</Link>
</Button>
<ThemeToggle />
</div>
</div>
<hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
</header>
);
}
function Footer() {
return (
<footer className="container mt-32 flex w-screen flex-col items-center justify-center">
<hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
<div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm">
<p className="font-serif text-xl">
&quot;Originated from Open Source, give back to Open Source.&quot;
</p>
</div>
<div className="text-muted-foreground container mb-8 flex flex-col items-center justify-center text-xs">
<p>Licensed under MIT License</p>
<p>&copy; 2025 DeepFlow</p>
</div>
</footer>
);
}
function SectionHeader({
title,
description,
}: {
title: React.ReactNode;
description: React.ReactNode;
}) {
return (
<div className="mb-12 flex flex-col items-center justify-center gap-2">
<h2 className="mb-4 bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-5xl font-bold text-transparent">
{title}
</h2>
<p className="text-muted-foreground text-center text-xl">{description}</p>
</div>
);
}
function Jumbotron() {
return (
<section className="relative flex h-[95vh] w-screen 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.16}
flickerChance={0.1}
/>
<FlickeringGrid
id="deer-hero"
className={`absolute inset-0 z-0 mask-[url(/images/deer-hero.svg)] mask-size-[38%] mask-center mask-no-repeat`}
squareSize={3}
gridGap={6}
color="#60A5FA"
maxOpacity={0.5}
flickerChance={0.12}
/>
<div className="relative z-10 flex flex-col items-center justify-center gap-12">
<h1 className="text-5xl font-bold">
<span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
Deep Research{" "}
</span>
<AuroraText>at Your Fingertips</AuroraText>
</h1>
<p className="text-muted-foreground text-center text-xl">
Discover the revolutionary Multi-Agent Research Assistant that
empowers you to dive
<br />
deeper and wider into any subject. Equipped with the powerful tools
like search
<br />
engines, crawlers, Python, and MCP services, DeerFlow provides instant
<br />
insights, in-depth reports and even captivating podcasts.
</p>
<div className="flex gap-6">
<Button className="w-42 text-lg" size="lg" asChild>
<Link href="/chat">
Get Started <ChevronRight />
</Link>
</Button>
<Button className="w-42 text-lg" size="lg" variant="outline" asChild>
<Link href="https://github.com/bytedance/deer-flow" target="_blank">
<GithubFilled />
Learn More
</Link>
</Button>
</div>
</div>
<div className="absolute bottom-8 flex text-sm opacity-40">
<p>* DEER stands for Deep Exploration and Efficient Research.</p>
</div>
</section>
);
}
const caseStudies = [
{
icon: Home,
title: "Design a futuristic smart home for a family of 4",
description:
"DeepFlow generates innovative concepts and detailed blueprints for a cutting-edge smart home, incorporating AI-driven automation and sustainable energy solutions.",
},
{
icon: Book,
title: "Write a historical fiction novel set in ancient Rome",
description:
"DeepFlow assists in crafting compelling characters, intricate plots, and historically accurate settings to bring your ancient Roman story to life.",
},
{
icon: ShoppingCart,
title: "Create a marketing campaign for a new eco-friendly product",
description:
"DeepFlow develops a strategic marketing plan, including social media content, ad designs, and audience targeting strategies to promote your sustainable product effectively.",
},
{
icon: Lightbulb,
title: "Invent a groundbreaking renewable energy solution",
description:
"DeepFlow helps brainstorm innovative ideas and provides technical schematics for a renewable energy solution that addresses global energy challenges.",
},
{
icon: Camera,
title: "Direct a short film about climate change",
description:
"DeepFlow assists in developing a compelling script, visual storyboards, and production plans to create an impactful short film on environmental issues.",
},
{
icon: Globe,
title: "Plan a sustainable travel itinerary for eco-conscious tourists",
description:
"DeepFlow designs a detailed travel plan featuring eco-friendly accommodations, activities, and transportation options for environmentally aware travelers.",
},
{
icon: Code,
title: "Develop an AI-powered app for mental health support",
description:
"DeepFlow provides guidance on app design, user experience, and AI integration to create a tool that offers personalized mental health resources and support.",
},
{
icon: Paintbrush,
title: "Create an immersive art installation on human connection",
description:
"DeepFlow assists in conceptualizing and designing an interactive art installation that explores themes of empathy, relationships, and the power of human connection.",
},
];
function CaseStudySection() {
return (
<section className="relative container flex flex-col items-center justify-center">
<SectionHeader
title="Case Studies"
description="See DeerFlow in action through replays."
/>
<div className="container flex flex-wrap">
{caseStudies.map((caseStudy) => (
<div key={caseStudy.title} className="w-[25%] p-2">
<BentoCard
{...{
Icon: caseStudy.icon,
name: caseStudy.title,
description: caseStudy.description,
href: "/",
cta: "Learn more",
className: "w-full h-[320px]",
background: (
<img
alt="background"
className="absolute -top-20 -right-20 opacity-60"
/>
),
}}
/>
</div>
))}
</div>
</section>
);
}
const features = [
{
Icon: Microscope,
name: "Dive Deeper and Reach Wider",
description:
"Unlock deeper insights with advanced tools. Our powerful search and web crawling technology gathers comprehensive data, delivering in-depth reports to enhance your study.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3",
},
{
Icon: User,
name: "Human-in-the-loop",
description:
"Refine your research plan, or adjust focus areas all through simple natural language.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4",
},
{
Icon: Network,
name: "Multi-Agent Architecture",
description:
"Experience agent teamwork with our Supervisor + Handoffs architecture. From initial communication to deep research and polished report generation, each step is seamlessly coordinated for maximum efficiency and accuracy.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
},
{
Icon: Bird,
name: "Lang Stack",
description:
"Build with confidence using the <a href='https://www.langchain.com/langchain'>LangChain</a> and <a href='https://www.langchain.com/langgraph'>LangGraph</a> frameworks.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-2",
},
{
Icon: Usb,
name: "MCP Integrations",
description:
"Supercharge your research workflow and expand your toolkit with seamless MCP integrations.",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-3 lg:col-end-3 lg:row-start-2 lg:row-end-3",
},
{
Icon: Podcast,
name: "Podcast Generation",
description:
"Listen to insights anytime—perfect for on-the-go learning or sharing findings effortlessly. ",
href: "/",
cta: "Learn more",
background: (
<img alt="background" className="absolute -top-20 -right-20 opacity-60" />
),
className: "lg:col-start-3 lg:col-end-3 lg:row-start-3 lg:row-end-4",
},
];
function CoreFeatureSection() {
return (
<section className="relative container flex flex-col content-around items-center justify-center">
<SectionHeader
title="Core Features"
description="Find out what makes DeerFlow effective."
/>
<BentoGrid className="h-[75vh] lg:grid-rows-3">
{features.map((feature) => (
<BentoCard key={feature.name} {...feature} />
))}
</BentoGrid>
</section>
);
}
function JoinCommunitySection() {
return (
<section className="container flex flex-col items-center justify-center pb-12">
<SectionHeader
title={
<AuroraText colors={["#60A5FA", "#A5FA60", "#A560FA"]}>
Join the DeerFlow Community
</AuroraText>
}
description="Contribute brilliant ideas to shape the future of DeerFlow. Collaborate, innovate, and make impacts."
/>
<Button className="text-xl" size="lg" asChild>
<Link href="https://github.com/bytedance/deer-flow" target="_blank">
<GithubFilled />
Contribute Now
</Link>
</Button>
</section>
);
}