refactor: extract components folder

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 (
+    <section className="relative container hidden flex-col items-center justify-center md:flex">
+      <SectionHeader
+        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/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: (
+      <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: Bird,
+    name: "Lang Stack",
+    description:
+      "Build with confidence using the LangChain and LangGraph frameworks.",
+    href: "/",
+    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: "/",
+    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: "/",
+    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
+        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/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 (
+    <section className="flex w-full 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>
+  );
+}

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 (
+    <section className="relative 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 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.66}
+        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">
+            Deep Research{" "}
+          </span>
+          <AuroraText>at Your Fingertips</AuroraText>
+        </h1>
+        <p className="max-w-4xl p-2 text-center text-sm font-light opacity-80 md:text-2xl">
+          Meet <span className="font-medium">DeerFlow</span>, 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.
+        </p>
+        <div className="flex gap-6">
+          <Button className="hidden text-lg md:flex md:w-42" 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-xs opacity-50">
+        <p>* DEER stands for Deep Exploration and Efficient Research.</p>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,21 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import { MultiAgentVisualization } from "./multi-agent-visualization";
+import { SectionHeader } from "./section-header";
+
+export function MultiAgentSection() {
+  return (
+    <section className="relative flex w-full flex-col items-center justify-center">
+      <SectionHeader
+        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>
+  );
+}

web/src/app/landing/components/multi-agent-visualization.tsx

@@ -0,0 +1,526 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+"use client";
+
+import {
+  ReactFlow,
+  Background,
+  useNodesState,
+  useEdgesState,
+  Handle,
+  Position,
+  type Node,
+  type Edge,
+} from "@xyflow/react";
+import {
+  Brain,
+  FilePen,
+  MessageSquareQuote,
+  Microscope,
+  RotateCcw,
+  SquareTerminal,
+  UserCheck,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+import {
+  useCallback,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+import "@xyflow/react/dist/style.css";
+
+import { Tooltip } from "~/components/deer-flow/tooltip";
+import { ShineBorder } from "~/components/magicui/shine-border";
+import { Button } from "~/components/ui/button";
+import { useIntersectionObserver } from "~/hooks/use-intersection-observer";
+
+const ROW_HEIGHT = 85;
+const ROW_1 = 0;
+const ROW_2 = ROW_HEIGHT;
+const ROW_3 = ROW_HEIGHT * 2;
+const ROW_4 = ROW_HEIGHT * 2;
+const ROW_5 = ROW_HEIGHT * 3;
+const ROW_6 = ROW_HEIGHT * 4;
+
+export type WorkflowNode = Node<{
+  label: string;
+  icon?: LucideIcon;
+  active?: boolean;
+}>;
+
+const initialNodes: WorkflowNode[] = [
+  {
+    id: "Start",
+    type: "circle",
+    data: { label: "Start" },
+    position: { x: -75, y: ROW_1 },
+  },
+  {
+    id: "Coordinator",
+    data: { icon: MessageSquareQuote, label: "Coordinator" },
+    position: { x: 150, y: ROW_1 },
+  },
+  {
+    id: "Planner",
+    data: { icon: Brain, label: "Planner" },
+    position: { x: 150, y: ROW_2 },
+  },
+  {
+    id: "Reporter",
+    data: { icon: FilePen, label: "Reporter" },
+    position: { x: 275, y: ROW_3 },
+  },
+  {
+    id: "HumanFeedback",
+    data: { icon: UserCheck, label: "Human Feedback" },
+    position: { x: 25, y: ROW_4 },
+  },
+  {
+    id: "ResearchTeam",
+    data: { icon: Users, label: "Research Team" },
+    position: { x: 25, y: ROW_5 },
+  },
+  {
+    id: "Researcher",
+    data: { icon: Microscope, label: "Researcher" },
+    position: { x: -75, y: ROW_6 },
+  },
+  {
+    id: "Coder",
+    data: { icon: SquareTerminal, label: "Coder" },
+    position: { x: 125, y: ROW_6 },
+  },
+  {
+    id: "End",
+    type: "circle",
+    data: { label: "End" },
+    position: { x: 330, y: ROW_6 },
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: "Start->Coordinator",
+    source: "Start",
+    target: "Coordinator",
+    sourceHandle: "right",
+    targetHandle: "left",
+    animated: false,
+  },
+  {
+    id: "Coordinator->Planner",
+    source: "Coordinator",
+    target: "Planner",
+    sourceHandle: "bottom",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "Planner->Reporter",
+    source: "Planner",
+    target: "Reporter",
+    sourceHandle: "right",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "Planner->HumanFeedback",
+    source: "Planner",
+    target: "HumanFeedback",
+    sourceHandle: "left",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "HumanFeedback->Planner",
+    source: "HumanFeedback",
+    target: "Planner",
+    sourceHandle: "right",
+    targetHandle: "bottom",
+    animated: false,
+  },
+  {
+    id: "HumanFeedback->ResearchTeam",
+    source: "HumanFeedback",
+    target: "ResearchTeam",
+    sourceHandle: "bottom",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "Reporter->End",
+    source: "Reporter",
+    target: "End",
+    sourceHandle: "bottom",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "ResearchTeam->Researcher",
+    source: "ResearchTeam",
+    target: "Researcher",
+    sourceHandle: "left",
+    targetHandle: "top",
+    animated: false,
+  },
+  {
+    id: "ResearchTeam->Coder",
+    source: "ResearchTeam",
+    target: "Coder",
+    sourceHandle: "bottom",
+    targetHandle: "left",
+    animated: false,
+  },
+  {
+    id: "ResearchTeam->Planner",
+    source: "ResearchTeam",
+    target: "Planner",
+    sourceHandle: "right",
+    targetHandle: "bottom",
+    animated: false,
+  },
+  {
+    id: "Researcher->ResearchTeam",
+    source: "Researcher",
+    target: "ResearchTeam",
+    sourceHandle: "right",
+    targetHandle: "bottom",
+    animated: false,
+  },
+  {
+    id: "Coder->ResearchTeam",
+    source: "Coder",
+    target: "ResearchTeam",
+    sourceHandle: "top",
+    targetHandle: "right",
+    animated: false,
+  },
+];
+
+const nodeTypes = {
+  circle: CircleNode,
+  agent: AgentNode,
+  default: AgentNode,
+};
+
+const WORKFLOW_STEPS = [
+  {
+    description:
+      "The Coordinator is responsible for engaging with the user to understand their problem and requirements.",
+    tooltipPosition: "right",
+    activeNodes: ["Start", "Coordinator"],
+    activeEdges: ["Start->Coordinator"],
+  },
+  {
+    description:
+      "If the user's problem is clearly defined, the Coordinator will hand it over to the Planner.",
+    tooltipPosition: "left",
+    activeNodes: ["Coordinator", "Planner"],
+    activeEdges: ["Coordinator->Planner"],
+  },
+  {
+    description: "Awaiting human feedback to refine the plan.",
+    tooltipPosition: "left",
+    activeNodes: ["Planner", "HumanFeedback"],
+    activeEdges: ["Planner->HumanFeedback"],
+  },
+  {
+    description: "Updating the plan based on human feedback.",
+    tooltipPosition: "left",
+    activeNodes: ["HumanFeedback", "Planner"],
+    activeEdges: ["HumanFeedback->Planner"],
+  },
+  {
+    description:
+      "The Research Team is responsible for conducting the core research tasks.",
+    tooltipPosition: "left",
+    activeNodes: ["HumanFeedback", "ResearchTeam"],
+    activeEdges: ["HumanFeedback->ResearchTeam", "ResearchTeam->HumanFeedback"],
+  },
+  {
+    description:
+      "The Researcher is responsible for gathering information using search and crawling tools.",
+    tooltipPosition: "left",
+    activeNodes: ["ResearchTeam", "Researcher"],
+    activeEdges: ["ResearchTeam->Researcher", "Researcher->ResearchTeam"],
+  },
+  {
+    description:
+      "The Coder is responsible for writing Python code to solve math problems, data analysis, and more.",
+    tooltipPosition: "right",
+    activeNodes: ["ResearchTeam", "Coder"],
+    activeEdges: ["ResearchTeam->Coder", "Coder->ResearchTeam"],
+  },
+  {
+    description:
+      "Once the research tasks are completed, the Researcher will hand over to the Planner.",
+    tooltipPosition: "left",
+    activeNodes: ["ResearchTeam", "Planner"],
+    activeEdges: ["ResearchTeam->Planner"],
+  },
+  {
+    description:
+      "If no additional information is required, the Planner will handoff to the Reporter.",
+    tooltipPosition: "right",
+    activeNodes: ["Reporter", "Planner"],
+    activeEdges: ["Planner->Reporter"],
+  },
+  {
+    description: "The Reporter will prepare a report summarizing the results.",
+    tooltipPosition: "bottom",
+    activeNodes: ["End", "Reporter"],
+    activeEdges: ["Reporter->End"],
+  },
+];
+
+function useWorkflowRun(
+  setNodes: Dispatch<SetStateAction<WorkflowNode[]>>,
+  setEdges: Dispatch<SetStateAction<Edge[]>>,
+) {
+  const [isRunning, setIsRunning] = useState(false);
+
+  const clearAnimation = useCallback(() => {
+    setEdges((edges) => {
+      return edges.map((edge) => ({
+        ...edge,
+        animated: true,
+      }));
+    });
+
+    setNodes((nodes) => {
+      return nodes.map((node) => ({
+        ...node,
+        data: { ...node.data, active: false },
+      }));
+    });
+  }, [setEdges, setNodes]);
+
+  const run = useCallback(async () => {
+    setIsRunning(true);
+    clearAnimation();
+    for (const step of WORKFLOW_STEPS) {
+      setNodes((nodes) => {
+        return nodes.map((node) => ({
+          ...node,
+          data: {
+            ...node.data,
+            active: step.activeNodes.includes(node.id),
+            stepDescription:
+              step.activeNodes.indexOf(node.id) === step.activeNodes.length - 1
+                ? step.description
+                : undefined,
+            stepTooltipPosition: step.tooltipPosition,
+          },
+        }));
+      });
+
+      setEdges((edges) => {
+        return edges.map((edge) => ({
+          ...edge,
+          animated: step.activeEdges.includes(edge.id),
+        }));
+      });
+
+      await sleep(step.description.split(" ").length * 360);
+    }
+    clearAnimation();
+    setIsRunning(false);
+  }, [setNodes, setEdges, clearAnimation]);
+
+  return { run, isRunning };
+}
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function MultiAgentVisualization() {
+  const [nodes, setNodes] = useNodesState(initialNodes);
+  const [edges, setEdges] = useEdgesState(initialEdges);
+
+  const { run, isRunning } = useWorkflowRun(setNodes, setEdges);
+  const [hasAutoRun, setHasAutoRun] = useState(false);
+
+  const { ref } = useIntersectionObserver({
+    rootMargin: "0%",
+    threshold: 0,
+    onChange: (isIntersecting) => {
+      if (isIntersecting && !hasAutoRun) {
+        setHasAutoRun(true);
+        void run();
+      }
+    },
+  });
+
+  return (
+    <ReactFlow
+      style={{
+        ["--xy-background-color-default" as string]: "transparent",
+      }}
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={nodeTypes}
+      fitView
+      proOptions={{ hideAttribution: true }}
+      colorMode="dark"
+      panOnScroll={false}
+      zoomOnScroll={false}
+      preventScrolling={false}
+      panOnDrag={false}
+    >
+      <Background
+        className="[mask-image:radial-gradient(800px_circle_at_center,white,transparent)]"
+        bgColor="var(--background)"
+      />
+      <div
+        id="auto-run-animation-trigger"
+        ref={ref}
+        className="absolute bottom-0 left-[50%] h-px w-px"
+      />
+      <div className="absolute top-0 right-0 left-0 z-200 flex items-center justify-center">
+        {!isRunning && (
+          <Button
+            className="translate-x-[22vw]"
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              void run();
+            }}
+          >
+            <RotateCcw />
+            Replay
+          </Button>
+        )}
+      </div>
+    </ReactFlow>
+  );
+}
+
+function CircleNode({ data }: { data: { label: string; active: boolean } }) {
+  return (
+    <>
+      {data.active && (
+        <ShineBorder
+          className="rounded-full"
+          shineColor={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
+        />
+      )}
+      <div className="flex h-10 w-10 items-center justify-center rounded-full border bg-[var(--xy-node-background-color-default)]">
+        <p className="text-xs">{data.label}</p>
+      </div>
+      {data.label === "Start" && (
+        <Handle
+          className="invisible"
+          type="source"
+          position={Position.Right}
+          id="right"
+        />
+      )}
+      {data.label === "End" && (
+        <Handle
+          className="invisible"
+          type="target"
+          position={Position.Top}
+          id="top"
+        />
+      )}
+    </>
+  );
+}
+
+function AgentNode({
+  data,
+  id,
+}: {
+  data: {
+    icon?: LucideIcon;
+    label: string;
+    active: boolean;
+    stepDescription?: string;
+    stepTooltipPosition?: "left" | "right" | "top" | "bottom";
+  };
+  id: string;
+}) {
+  return (
+    <>
+      {data.active && (
+        <ShineBorder
+          shineColor={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
+          className="rounded-[2px]"
+        />
+      )}
+      <Tooltip
+        className="max-w-50 text-[15px] opacity-70"
+        style={{
+          ["--primary" as string]: "#333",
+          ["--primary-foreground" as string]: "white",
+        }}
+        open={data.active && !!data.stepDescription}
+        title={data.stepDescription}
+        side={data.stepTooltipPosition}
+        sideOffset={20}
+      >
+        <div
+          id={id}
+          className="relative flex w-full items-center justify-center text-xs"
+        >
+          <div className="flex items-center gap-2">
+            {data.icon && <data.icon className="h-[1rem] w-[1rem]" />}
+            <span>{data.label}</span>
+          </div>
+        </div>
+      </Tooltip>
+      <Handle
+        className="invisible"
+        type="source"
+        position={Position.Left}
+        id="left"
+      />
+      <Handle
+        className="invisible"
+        type="source"
+        position={Position.Right}
+        id="right"
+      />
+      <Handle
+        className="invisible"
+        type="source"
+        position={Position.Top}
+        id="top"
+      />
+      <Handle
+        className="invisible"
+        type="source"
+        position={Position.Bottom}
+        id="bottom"
+      />
+      <Handle
+        className="invisible"
+        type="target"
+        position={Position.Left}
+        id="left"
+      />
+      <Handle
+        className="invisible"
+        type="target"
+        position={Position.Right}
+        id="right"
+      />
+      <Handle
+        className="invisible"
+        type="target"
+        position={Position.Top}
+        id="top"
+      />
+      <Handle
+        className="invisible"
+        type="target"
+        position={Position.Bottom}
+        id="bottom"
+      />
+    </>
+  );
+}

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 (
+    <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-center text-5xl font-bold text-transparent">
+        {title}
+      </h2>
+      <p className="text-muted-foreground text-center text-xl">{description}</p>
+    </div>
+  );
+}