refactor: move to sections folder

web/src/app/landing/components/section-header.tsx

@@ -2,18 +2,25 @@
 // SPDX-License-Identifier: MIT
 
 export function SectionHeader({
+  anchor,
   title,
   description,
 }: {
+  anchor?: string;
   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">
+      {anchor && <a id={anchor} className="absolute -top-20" />}
-        {title}
+      <div className="mb-12 flex flex-col items-center justify-center gap-2">
-      </h2>
+        <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">
-      <p className="text-muted-foreground text-center text-xl">{description}</p>
+          {title}
-    </div>
+        </h2>
+        <p className="text-muted-foreground text-center text-xl">
+          {description}
+        </p>
+      </div>
+    </>
   );
 }

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

@@ -6,7 +6,7 @@ import { Bot } from "lucide-react";
 
 import { BentoCard } from "~/components/magicui/bento-grid";
 
-import { SectionHeader } from "./section-header";
+import { SectionHeader } from "../components/section-header";
 
 const caseStudies = [
   {
@@ -71,6 +71,7 @@ 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."
       />

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

@@ -5,7 +5,7 @@ import { Bird, Microscope, Podcast, Usb, User } from "lucide-react";
 
 import { BentoCard, BentoGrid } from "~/components/magicui/bento-grid";
 
-import { SectionHeader } from "./section-header";
+import { SectionHeader } from "../components/section-header";
 
 const features = [
   {
@@ -74,6 +74,7 @@ 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."
       />

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

@@ -7,12 +7,13 @@ import Link from "next/link";
 import { AuroraText } from "~/components/magicui/aurora-text";
 import { Button } from "~/components/ui/button";
 
-import { SectionHeader } from "./section-header";
+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

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

@@ -1,13 +1,14 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
-import { MultiAgentVisualization } from "./multi-agent-visualization";
+import { MultiAgentVisualization } from "../components/multi-agent-visualization";
-import { SectionHeader } from "./section-header";
+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."
       />

web/src/app/page.tsx

@@ -7,12 +7,12 @@ import { useMemo } from "react";
 
 import { Button } from "~/components/ui/button";
 
-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";
 import { Ray } from "./landing/components/ray";
+import { CaseStudySection } from "./landing/sections/case-study-section";
+import { CoreFeatureSection } from "./landing/sections/core-features-section";
+import { JoinCommunitySection } from "./landing/sections/join-community-section";
+import { MultiAgentSection } from "./landing/sections/multi-agent-section";
 
 export default function HomePage() {
   return (