refactor: move to sections folder

web/src/app/landing/sections/case-study-section.tsx

@@ -0,0 +1,96 @@
+// 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 "../components/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-dishes",
+    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 (
+    <section className="relative container hidden flex-col items-center justify-center md:flex">
+      <SectionHeader
+        anchor="case-studies"
+        title="Case Studies"
+        description="See DeerFlow in action through replays."
+      />
+      <div className="grid w-3/4 grid-cols-1 gap-2 sm:w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {caseStudies.map((caseStudy) => (
+          <div key={caseStudy.title} className="w-full p-2">
+            <BentoCard
+              {...{
+                Icon: caseStudy.icon,
+                name: caseStudy.title,
+                description: caseStudy.description,
+                href: `/chat?replay=${caseStudy.id}`,
+                cta: "Click to watch replay",
+                className: "w-full h-full",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

web/src/app/landing/sections/core-features-section.tsx

@@ -0,0 +1,88 @@
+// 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 "../components/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: "https://github.com/bytedance/deer-flow/blob/main/src/tools",
+    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: "https://github.com/bytedance/deer-flow/blob/main/src/graph/nodes.py",
+    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: Bird,
+    name: "Lang Stack",
+    description:
+      "Build with confidence using the LangChain and LangGraph frameworks.",
+    href: "https://www.langchain.com/",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    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: "https://github.com/bytedance/deer-flow/blob/main/src/graph/nodes.py",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    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: "https://github.com/bytedance/deer-flow/blob/main/src/podcast",
+    cta: "Learn more",
+    background: (
+      <img alt="background" className="absolute -top-20 -right-20 opacity-60" />
+    ),
+    className: "lg:col-start-2 lg:col-end-3 lg:row-start-3 lg:row-end-4",
+  },
+];
+
+export function CoreFeatureSection() {
+  return (
+    <section className="relative flex w-full flex-col content-around items-center justify-center">
+      <SectionHeader
+        anchor="core-features"
+        title="Core Features"
+        description="Find out what makes DeerFlow effective."
+      />
+      <BentoGrid className="w-3/4 lg:grid-cols-2 lg:grid-rows-3">
+        {features.map((feature) => (
+          <BentoCard key={feature.name} {...feature} />
+        ))}
+      </BentoGrid>
+    </section>
+  );
+}

web/src/app/landing/sections/join-community-section.tsx

@@ -0,0 +1,32 @@
+// 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 "../components/section-header";
+
+export function JoinCommunitySection() {
+  return (
+    <section className="flex w-full flex-col items-center justify-center pb-12">
+      <SectionHeader
+        anchor="join-community"
+        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>
+  );
+}

web/src/app/landing/sections/multi-agent-section.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import { MultiAgentVisualization } from "../components/multi-agent-visualization";
+import { SectionHeader } from "../components/section-header";
+
+export function MultiAgentSection() {
+  return (
+    <section className="relative flex w-full flex-col items-center justify-center">
+      <SectionHeader
+        anchor="multi-agent-architecture"
+        title="Multi-Agent Architecture"
+        description="Experience the agent teamwork with our Supervisor + Handoffs design pattern."
+      />
+      <div className="flex h-[70vh] w-full flex-col items-center justify-center">
+        <div className="h-full w-full">
+          <MultiAgentVisualization />
+        </div>
+      </div>
+    </section>
+  );
+}