diff --git a/web/src/app/landing/_components/case-study-section.tsx b/web/src/app/landing/_components/case-study-section.tsx new file mode 100644 index 0000000..e0c01ed --- /dev/null +++ b/web/src/app/landing/_components/case-study-section.tsx @@ -0,0 +1,95 @@ +// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates +// SPDX-License-Identifier: MIT + +import { Bike, Building, Film, Github, Ham, Home, Pizza } from "lucide-react"; +import { Bot } from "lucide-react"; + +import { BentoCard } from "~/components/magicui/bento-grid"; + +import { SectionHeader } from "./section-header"; + +const caseStudies = [ + { + id: "eiffel-tower-vs-tallest-building", + icon: Building, + title: "How tall is Eiffel Tower compared to tallest building?", + description: + "The research compares the heights and global significance of the Eiffel Tower and Burj Khalifa, and uses Python code to calculate the multiples.", + }, + { + id: "github-top-trending-repo", + icon: Github, + title: "What are the top trending repositories on GitHub?", + description: + "The research utilized MCP services to identify the most popular GitHub repositories and documented them in detail using search engines.", + }, + { + id: "nanjing-traditional-food", + icon: Ham, + title: "Write an article about Nanjing's traditional dishes", + description: + "The study vividly showcases Nanjing's famous dishes through rich content and imagery, uncovering their hidden histories and cultural significance.", + }, + { + id: "rental-apartment-decoration", + icon: Home, + title: "How to decorate a small rental apartment?", + description: + "The study provides readers with practical and straightforward methods for decorating apartments, accompanied by inspiring images.", + }, + { + id: "review-of-the-professional", + icon: Film, + title: "Introduce the movie 'Léon: The Professional'", + description: + "The research provides a comprehensive introduction to the movie 'Léon: The Professional', including its plot, characters, and themes.", + }, + { + id: "china-food-delivery", + icon: Bike, + title: "How do you view the takeaway war in China? (in Chinese)", + description: + "The research analyzes the intensifying competition between JD and Meituan, highlighting their strategies, technological innovations, and challenges.", + }, + { + id: "ultra-processed-foods", + icon: Pizza, + title: "Are ultra-processed foods linked to health?", + description: + "The research examines the health risks of rising ultra-processed food consumption, urging more research on long-term effects and individual differences.", + }, + { + id: "ai-twin-insurance", + icon: Bot, + title: 'Write an article on "Would you insure your AI twin?"', + description: + "The research explores the concept of insuring AI twins, highlighting their benefits, risks, ethical considerations, and the evolving regulatory.", + }, +]; + +export function CaseStudySection() { + return ( +
+ +
+ {caseStudies.map((caseStudy) => ( +
+ +
+ ))} +
+
+ ); +} diff --git a/web/src/app/landing/_components/core-features-section.tsx b/web/src/app/landing/_components/core-features-section.tsx new file mode 100644 index 0000000..633056c --- /dev/null +++ b/web/src/app/landing/_components/core-features-section.tsx @@ -0,0 +1,87 @@ +// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates +// SPDX-License-Identifier: MIT + +import { Bird, Microscope, Podcast, Usb, User } from "lucide-react"; + +import { BentoCard, BentoGrid } from "~/components/magicui/bento-grid"; + +import { SectionHeader } from "./section-header"; + +const features = [ + { + Icon: Microscope, + name: "Dive Deeper and Reach Wider", + description: + "Unlock deeper insights with advanced tools. Our powerful search + crawling and Python tools gathers comprehensive data, delivering in-depth reports to enhance your study.", + href: "/", + cta: "Learn more", + background: ( + background + ), + 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: ( + background + ), + className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4", + }, + { + Icon: Bird, + name: "Lang Stack", + description: + "Build with confidence using the LangChain and LangGraph frameworks.", + href: "/", + cta: "Learn more", + background: ( + background + ), + className: "lg:col-start-2 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: ( + background + ), + className: "lg:col-start-2 lg:col-end-3 lg:row-start-2 lg:row-end-3", + }, + { + Icon: Podcast, + name: "Podcast Generation", + description: + "Instantly generate podcasts from reports. Perfect for on-the-go learning or sharing findings effortlessly. ", + href: "/", + cta: "Learn more", + background: ( + background + ), + className: "lg:col-start-2 lg:col-end-3 lg:row-start-3 lg:row-end-4", + }, +]; + +export function CoreFeatureSection() { + return ( +
+ + + {features.map((feature) => ( + + ))} + +
+ ); +} diff --git a/web/src/app/landing/_components/join-community-section.tsx b/web/src/app/landing/_components/join-community-section.tsx new file mode 100644 index 0000000..664c38d --- /dev/null +++ b/web/src/app/landing/_components/join-community-section.tsx @@ -0,0 +1,31 @@ +// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates +// SPDX-License-Identifier: MIT + +import { GithubFilled } from "@ant-design/icons"; +import Link from "next/link"; + +import { AuroraText } from "~/components/magicui/aurora-text"; +import { Button } from "~/components/ui/button"; + +import { SectionHeader } from "./section-header"; + +export function JoinCommunitySection() { + return ( +
+ + Join the DeerFlow Community + + } + description="Contribute brilliant ideas to shape the future of DeerFlow. Collaborate, innovate, and make impacts." + /> + +
+ ); +} diff --git a/web/src/app/landing/_components/jumbotron.tsx b/web/src/app/landing/_components/jumbotron.tsx new file mode 100644 index 0000000..5ce9f10 --- /dev/null +++ b/web/src/app/landing/_components/jumbotron.tsx @@ -0,0 +1,65 @@ +// 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 { AuroraText } from "~/components/magicui/aurora-text"; +import { FlickeringGrid } from "~/components/magicui/flickering-grid"; +import { Button } from "~/components/ui/button"; + +export function Jumbotron() { + return ( +
+ + +
+

+ + Deep Research{" "} + + at Your Fingertips +

+

+ Meet DeerFlow, your ultimate Deep + Research assistant. With powerful tools like search engines, web + crawlers, Python and MCP services, it provides instant insights, + comprehensive reports, or even captivating podcasts. +

+
+ + +
+
+
+

* DEER stands for Deep Exploration and Efficient Research.

+
+
+ ); +} diff --git a/web/src/app/landing/_components/multi-agent-section.tsx b/web/src/app/landing/_components/multi-agent-section.tsx new file mode 100644 index 0000000..51f9977 --- /dev/null +++ b/web/src/app/landing/_components/multi-agent-section.tsx @@ -0,0 +1,22 @@ +// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates +// SPDX-License-Identifier: MIT + +import { MultiAgentVisualization } from "~/app/_components/multi-agent-visualization"; + +import { SectionHeader } from "./section-header"; + +export function MultiAgentSection() { + return ( +
+ +
+
+ +
+
+
+ ); +} diff --git a/web/src/app/landing/_components/section-header.tsx b/web/src/app/landing/_components/section-header.tsx new file mode 100644 index 0000000..7fad0c5 --- /dev/null +++ b/web/src/app/landing/_components/section-header.tsx @@ -0,0 +1,19 @@ +// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates +// SPDX-License-Identifier: MIT + +export function SectionHeader({ + title, + description, +}: { + title: React.ReactNode; + description: React.ReactNode; +}) { + return ( +
+

+ {title} +

+

{description}

+
+ ); +} diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx index 154001c..59697ed 100644 --- a/web/src/app/page.tsx +++ b/web/src/app/page.tsx @@ -1,38 +1,18 @@ // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates // SPDX-License-Identifier: MIT -import { GithubFilled, GithubOutlined } from "@ant-design/icons"; -import { - Bike, - Bird, - Book, - Bot, - Building, - Camera, - ChevronRight, - Film, - Github, - Globe, - Ham, - Home, - Lightbulb, - Microscope, - Paintbrush, - Pizza, - Podcast, - Usb, - User, -} from "lucide-react"; +import { GithubOutlined } from "@ant-design/icons"; import Link from "next/link"; +import { useMemo } from "react"; -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 { MultiAgentVisualization } from "./_components/multi-agent-visualization"; import { Ray } from "./_components/ray"; +import { CaseStudySection } from "./landing/_components/case-study-section"; +import { CoreFeatureSection } from "./landing/_components/core-features-section"; +import { JoinCommunitySection } from "./landing/_components/join-community-section"; +import { Jumbotron } from "./landing/_components/jumbotron"; +import { MultiAgentSection } from "./landing/_components/multi-agent-section"; export default function HomePage() { return ( @@ -74,6 +54,7 @@ function Header() { } function Footer() { + const year = useMemo(() => new Date().getFullYear(), []); return ( ); } - -function SectionHeader({ - title, - description, -}: { - title: React.ReactNode; - description: React.ReactNode; -}) { - return ( -
-

- {title} -

-

{description}

-
- ); -} - -function Jumbotron() { - return ( -
- - -
-

- - Deep Research{" "} - - at Your Fingertips -

-

- Meet DeerFlow, your ultimate Deep - Research assistant. With powerful tools like search engines, web - crawlers, Python and MCP services, it provides instant insights, - comprehensive reports, or even captivating podcasts. -

-
- - -
-
-
-

* DEER stands for Deep Exploration and Efficient Research.

-
-
- ); -} - -const caseStudies = [ - { - id: "eiffel-tower-vs-tallest-building", - icon: Building, - title: "How tall is Eiffel Tower compared to tallest building?", - description: - "The research compares the heights and global significance of the Eiffel Tower and Burj Khalifa, and uses Python code to calculate the multiples.", - }, - { - id: "github-top-trending-repo", - icon: Github, - title: "What are the top trending repositories on GitHub?", - description: - "The research utilized MCP services to identify the most popular GitHub repositories and documented them in detail using search engines.", - }, - { - id: "nanjing-traditional-food", - icon: Ham, - title: "Write an article about Nanjing's traditional dishes", - description: - "The study vividly showcases Nanjing's famous dishes through rich content and imagery, uncovering their hidden histories and cultural significance.", - }, - { - id: "rental-apartment-decoration", - icon: Home, - title: "How to decorate a small rental apartment?", - description: - "The study provides readers with practical and straightforward methods for decorating apartments, accompanied by inspiring images.", - }, - { - id: "review-of-the-professional", - icon: Film, - title: "Introduce the movie 'Léon: The Professional'", - description: - "The research provides a comprehensive introduction to the movie 'Léon: The Professional', including its plot, characters, and themes.", - }, - { - id: "china-food-delivery", - icon: Bike, - title: "How do you view the takeaway war in China? (in Chinese)", - description: - "The research analyzes the intensifying competition between JD and Meituan, highlighting their strategies, technological innovations, and challenges.", - }, - { - id: "ultra-processed-foods", - icon: Pizza, - title: "Are ultra-processed foods linked to health?", - description: - "The research examines the health risks of rising ultra-processed food consumption, urging more research on long-term effects and individual differences.", - }, - { - id: "ai-twin-insurance", - icon: Bot, - title: 'Write an article on "Would you insure your AI twin?"', - description: - "The research explores the concept of insuring AI twins, highlighting their benefits, risks, ethical considerations, and the evolving regulatory.", - }, -]; - -function CaseStudySection() { - return ( -
- -
- {caseStudies.map((caseStudy) => ( -
- -
- ))} -
-
- ); -} - -function MultiAgentSection() { - return ( -
- -
-
- -
-
-
- ); -} - -const features = [ - { - Icon: Microscope, - name: "Dive Deeper and Reach Wider", - description: - "Unlock deeper insights with advanced tools. Our powerful search + crawling and Python tools gathers comprehensive data, delivering in-depth reports to enhance your study.", - href: "/", - cta: "Learn more", - background: ( - background - ), - 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: ( - background - ), - className: "lg:col-start-1 lg:col-end-2 lg:row-start-3 lg:row-end-4", - }, - { - Icon: Bird, - name: "Lang Stack", - description: - "Build with confidence using the LangChain and LangGraph frameworks.", - href: "/", - cta: "Learn more", - background: ( - background - ), - className: "lg:col-start-2 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: ( - background - ), - className: "lg:col-start-2 lg:col-end-3 lg:row-start-2 lg:row-end-3", - }, - { - Icon: Podcast, - name: "Podcast Generation", - description: - "Instantly generate podcasts from reports. Perfect for on-the-go learning or sharing findings effortlessly. ", - href: "/", - cta: "Learn more", - background: ( - background - ), - className: "lg:col-start-2 lg:col-end-3 lg:row-start-3 lg:row-end-4", - }, -]; - -function CoreFeatureSection() { - return ( -
- - - {features.map((feature) => ( - - ))} - -
- ); -} - -function JoinCommunitySection() { - return ( -
- - Join the DeerFlow Community - - } - description="Contribute brilliant ideas to shape the future of DeerFlow. Collaborate, innovate, and make impacts." - /> - -
- ); -}