feat: support static website

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

@@ -12,11 +12,12 @@ export function SandboxSection({ className }: { className?: string }) {
   return (
     <Section
       className={className}
-      title="Sandbox"
+      title="Agent Runtime Environment"
       subtitle={
         <p>
-          We gave DeerFlow a computer. It can execute code, manage files, and
-          run long tasks — all in a secure Docker sandbox
+          We give DeerFlow a &quot;computer&quot;, which can execute commands,
+          manage files, and run long tasks — all in a secure Docker-based
+          sandbox
         </p>
       }
     >

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

@@ -2,13 +2,13 @@
 
 import { cn } from "@/lib/utils";
 
-import ProgressiveSkillsAnimation from "../components/progressive-skills-animation";
+import ProgressiveSkillsAnimation from "../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)}
+      className={cn("h-[calc(100vh-64px)] w-full bg-white/2", className)}
       title="Skill-based Architecture"
       subtitle={
         <div>

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

@@ -1,10 +1,57 @@
 "use client";
 
-import MagicBento from "@/components/ui/magic-bento";
+import MagicBento, { type BentoCardProps } from "@/components/ui/magic-bento";
 import { cn } from "@/lib/utils";
 
 import { Section } from "../section";
 
+const COLOR = "#0a0a0a";
+const features: BentoCardProps[] = [
+  {
+    color: COLOR,
+    label: "Context Engineering",
+    title: "Long/Short-term Memory",
+    description: (
+      <div>
+        <div>Now the agent can better understand you</div>
+        <div className="text-muted-foreground">Coming soon</div>
+      </div>
+    ),
+  },
+  {
+    color: COLOR,
+    label: "Long Task Running",
+    title: "Planning and Reasoning",
+    description: "Plans ahead, reasons through complexity, then acts",
+  },
+  {
+    color: COLOR,
+    label: "Extensible",
+    title: "Skills and Tools",
+    description:
+      "Plug, play, or even swap built-in tools. Build the agent you want.",
+  },
+
+  {
+    color: COLOR,
+    label: "Persistent",
+    title: "Sandbox with File System",
+    description: "Read, write, run — like a real computer",
+  },
+  {
+    color: COLOR,
+    label: "Flexible",
+    title: "Multi-Model Support",
+    description: "Doubao, DeepSeek, OpenAI, Gemini, etc.",
+  },
+  {
+    color: COLOR,
+    label: "Free",
+    title: "Open Source",
+    description: "MIT License, self-hosted, full control",
+  },
+];
+
 export function WhatsNewSection({ className }: { className?: string }) {
   return (
     <Section
@@ -13,7 +60,7 @@ export function WhatsNewSection({ className }: { className?: string }) {
       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 />
+        <MagicBento data={features} />
       </div>
     </Section>
   );