feat: implement the first version of landing page

frontend/src/components/landing/sections/case-study-section.tsx

@@ -0,0 +1,67 @@
+import { SparklesIcon } from "lucide-react";
+
+import SpotlightCard from "@/components/ui/spotlight-card";
+
+import { Section } from "../section";
+
+export function CaseStudySection({ className }: { className?: string }) {
+  const caseStudies = [
+    {
+      title: "2025 Survey",
+      description:
+        "A 12,000-word research report analyzing 47 papers on brain-inspired chips, covering Intel Loihi 2, IBM NorthPole, and SynSense's edge AI solutions.",
+    },
+    {
+      title: "Indie Hacker's SaaS Landing Page",
+      description:
+        "A fully responsive landing page with hero section, pricing table, testimonials, and Stripe integration — shipped in one conversation.",
+    },
+    {
+      title: "Transformer Architecture Explained",
+      description:
+        "A 25-slide presentation breaking down self-attention, positional encoding, and KV-cache with hand-drawn style diagrams for a university lecture.",
+    },
+    {
+      title: "DeerDeer Explains RAG",
+      description:
+        "A series of 12 illustrations featuring a curious deer mascot explaining Retrieval-Augmented Generation through a library adventure story.",
+    },
+    {
+      title: "AI Weekly: Your Tech Podcast",
+      description:
+        "A 20-minute podcast episode where two AI hosts debate whether AI agents will replace traditional SaaS, based on 5 articles you provided.",
+    },
+    {
+      title: "How Diffusion Models Work",
+      description:
+        "A 3-minute animated explainer video visualizing the denoising process, from pure noise to a generated image, with voiceover narration.",
+    },
+  ];
+  return (
+    <Section
+      className={className}
+      title="Case Studies"
+      subtitle="See how DeerFlow is used in the wild"
+    >
+      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {caseStudies.map((caseStudy) => (
+          <SpotlightCard className="h-64" key={caseStudy.title}>
+            <div className="flex h-full w-full flex-col items-center justify-center">
+              <div className="flex w-75 flex-col gap-4">
+                <div>
+                  <SparklesIcon className="text-primary size-8" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <h3 className="text-2xl font-bold">{caseStudy.title}</h3>
+                  <p className="text-muted-foreground text-sm">
+                    {caseStudy.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </SpotlightCard>
+        ))}
+      </div>
+    </Section>
+  );
+}

frontend/src/components/landing/sections/community-section.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+
+import { AuroraText } from "@/components/ui/aurora-text";
+import { Button } from "@/components/ui/button";
+
+import { Section } from "../section";
+
+export function CommunitySection() {
+  return (
+    <Section
+      title={
+        <AuroraText colors={["#60A5FA", "#A5FA60", "#A560FA"]}>
+          Join the Community
+        </AuroraText>
+      }
+      subtitle="Contribute brilliant ideas to shape the future of DeerFlow. Collaborate, innovate, and make impacts."
+    >
+      <div className="flex justify-center">
+        <Button className="text-xl" size="lg" asChild>
+          <Link href="https://github.com/bytedance/deer-flow" target="_blank">
+            <GitHubLogoIcon />
+            Contribute Now
+          </Link>
+        </Button>
+      </div>
+    </Section>
+  );
+}

frontend/src/components/landing/sections/sandbox-section.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import {
+  AnimatedSpan,
+  Terminal,
+  TypingAnimation,
+} from "@/components/ui/terminal";
+
+import { Section } from "../section";
+
+export function SandboxSection({ className }: { className?: string }) {
+  return (
+    <Section
+      className={className}
+      title="Sandbox"
+      subtitle={
+        <p>
+          We gave DeerFlow a computer. It can execute code, manage files, and
+          run long tasks — all in a secure Docker sandbox
+        </p>
+      }
+    >
+      <div className="mt-8 flex w-full max-w-6xl flex-col items-center gap-12 lg:flex-row lg:gap-16">
+        {/* Left: Terminal */}
+        <div className="w-full flex-1">
+          <Terminal className="h-[360px] w-full">
+            {/* Scene 1: Build a Game */}
+            <TypingAnimation>$ cat requirements.txt</TypingAnimation>
+            <AnimatedSpan delay={800} className="text-zinc-400">
+              pygame==2.5.0
+            </AnimatedSpan>
+
+            <TypingAnimation delay={1200}>
+              $ pip install -r requirements.txt
+            </TypingAnimation>
+            <AnimatedSpan delay={2000} className="text-green-500">
+              ✔ Installed pygame
+            </AnimatedSpan>
+
+            <TypingAnimation delay={2400}>
+              $ write game.py --lines 156
+            </TypingAnimation>
+            <AnimatedSpan delay={3200} className="text-blue-500">
+              ✔ Written 156 lines
+            </AnimatedSpan>
+
+            <TypingAnimation delay={3600}>
+              $ python game.py --test
+            </TypingAnimation>
+            <AnimatedSpan delay={4200} className="text-green-500">
+              ✔ All sprites loaded
+            </AnimatedSpan>
+            <AnimatedSpan delay={4500} className="text-green-500">
+              ✔ Physics engine OK
+            </AnimatedSpan>
+            <AnimatedSpan delay={4800} className="text-green-500">
+              ✔ 60 FPS stable
+            </AnimatedSpan>
+
+            {/* Scene 2: Data Analysis */}
+            <TypingAnimation delay={5400}>
+              $ curl -O sales-2024.csv
+            </TypingAnimation>
+            <AnimatedSpan delay={6200} className="text-zinc-400">
+              Downloaded 12.4 MB
+            </AnimatedSpan>
+          </Terminal>
+        </div>
+
+        {/* Right: Description */}
+        <div className="w-full flex-1 space-y-6">
+          <div className="space-y-4">
+            <p className="text-sm font-medium tracking-wider text-purple-400 uppercase">
+              Open-source
+            </p>
+            <h2 className="text-4xl font-bold tracking-tight lg:text-5xl">
+              <a
+                href="https://github.com/agent-infra/sandbox"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                AIO Sandbox
+              </a>
+            </h2>
+          </div>
+
+          <div className="space-y-4 text-lg text-zinc-400">
+            <p>
+              We recommend using{" "}
+              <a
+                href="https://github.com/agent-infra/sandbox"
+                className="underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                All-in-One Sandbox
+              </a>{" "}
+              that combines Browser, Shell, File, MCP and VSCode Server in a
+              single Docker container.
+            </p>
+          </div>
+
+          {/* Feature Tags */}
+          <div className="flex flex-wrap gap-3 pt-4">
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Isolated
+            </span>
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Safe
+            </span>
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Persistent
+            </span>
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Mountable FS
+            </span>
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Long-running
+            </span>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}

frontend/src/components/landing/sections/skills-section.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+import ProgressiveSkillsAnimation from "../components/progressive-skills-animation";
+import { Section } from "../section";
+
+export function SkillsSection({ className }: { className?: string }) {
+  return (
+    <Section
+      className={cn("h-[calc(100vh-64px)] w-full bg-white/7", className)}
+      title="Skill-based Architecture"
+      subtitle={
+        <div>
+          Skills are loaded progressively — only what&apos;s needed, when
+          it&apos;s needed.
+          <br />
+          Extend DeerFlow with your own skill files, or use our built-in
+          library.
+        </div>
+      }
+    >
+      <div className="relative overflow-hidden">
+        <ProgressiveSkillsAnimation />
+      </div>
+    </Section>
+  );
+}

frontend/src/components/landing/sections/whats-new-section.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import MagicBento from "@/components/ui/magic-bento";
+import { cn } from "@/lib/utils";
+
+import { Section } from "../section";
+
+export function WhatsNewSection({ className }: { className?: string }) {
+  return (
+    <Section
+      className={cn("", className)}
+      title="Whats New in DeerFlow 2.0"
+      subtitle="DeerFlow is now evolving from a Deep Research agent into a full-stack Super Agent"
+    >
+      <div className="flex w-full items-center justify-center">
+        <MagicBento />
+      </div>
+    </Section>
+  );
+}