feat: support static website

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>
   );