From 867a158c6b574ba2f74aaa5fece2aee071cff4f7 Mon Sep 17 00:00:00 2001
From: Li Xin <lixin.henry@bytedance.com>
Date: Thu, 8 May 2025 08:53:47 +0800
Subject: [PATCH] refactor: move to `sections` folder

---
 .../app/landing/components/section-header.tsx | 19 +++++++++++++------
 .../case-study-section.tsx                    |  3 ++-
 .../core-features-section.tsx                 |  3 ++-
 .../join-community-section.tsx                |  3 ++-
 .../multi-agent-section.tsx                   |  5 +++--
 web/src/app/page.tsx                          |  8 ++++----
 6 files changed, 26 insertions(+), 15 deletions(-)
 rename web/src/app/landing/{components => sections}/case-study-section.tsx (97%)
 rename web/src/app/landing/{components => sections}/core-features-section.tsx (97%)
 rename web/src/app/landing/{components => sections}/join-community-section.tsx (91%)
 rename web/src/app/landing/{components => sections}/multi-agent-section.tsx (76%)

diff --git a/web/src/app/landing/components/section-header.tsx b/web/src/app/landing/components/section-header.tsx
index 7fad0c5..01a5c63 100644
--- a/web/src/app/landing/components/section-header.tsx
+++ b/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">
-        {title}
-      </h2>
-      <p className="text-muted-foreground text-center text-xl">{description}</p>
-    </div>
+    <>
+      {anchor && <a id={anchor} className="absolute -top-20" />}
+      <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>
+    </>
   );
 }
diff --git a/web/src/app/landing/components/case-study-section.tsx b/web/src/app/landing/sections/case-study-section.tsx
similarity index 97%
rename from web/src/app/landing/components/case-study-section.tsx
rename to web/src/app/landing/sections/case-study-section.tsx
index 5efb41a..3b1151e 100644
--- a/web/src/app/landing/components/case-study-section.tsx
+++ b/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."
       />
diff --git a/web/src/app/landing/components/core-features-section.tsx b/web/src/app/landing/sections/core-features-section.tsx
similarity index 97%
rename from web/src/app/landing/components/core-features-section.tsx
rename to web/src/app/landing/sections/core-features-section.tsx
index 0493f69..3f10377 100644
--- a/web/src/app/landing/components/core-features-section.tsx
+++ b/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."
       />
diff --git a/web/src/app/landing/components/join-community-section.tsx b/web/src/app/landing/sections/join-community-section.tsx
similarity index 91%
rename from web/src/app/landing/components/join-community-section.tsx
rename to web/src/app/landing/sections/join-community-section.tsx
index 664c38d..81faa2f 100644
--- a/web/src/app/landing/components/join-community-section.tsx
+++ b/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
diff --git a/web/src/app/landing/components/multi-agent-section.tsx b/web/src/app/landing/sections/multi-agent-section.tsx
similarity index 76%
rename from web/src/app/landing/components/multi-agent-section.tsx
rename to web/src/app/landing/sections/multi-agent-section.tsx
index 0ab3ca3..519db44 100644
--- a/web/src/app/landing/components/multi-agent-section.tsx
+++ b/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 { SectionHeader } from "./section-header";
+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."
       />
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 9d9c656..13591a0 100644
--- a/web/src/app/page.tsx
+++ b/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 (