refactor: extract components folder

web/src/app/landing/components/jumbotron.tsx

@@ -0,0 +1,65 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import { GithubFilled } from "@ant-design/icons";
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+
+import { AuroraText } from "~/components/magicui/aurora-text";
+import { FlickeringGrid } from "~/components/magicui/flickering-grid";
+import { Button } from "~/components/ui/button";
+
+export function Jumbotron() {
+  return (
+    <section className="relative flex h-[95vh] w-full flex-col items-center justify-center pb-15">
+      <FlickeringGrid
+        id="deer-hero-bg"
+        className={`absolute inset-0 z-0 [mask-image:radial-gradient(800px_circle_at_center,white,transparent)]`}
+        squareSize={4}
+        gridGap={4}
+        color="#60A5FA"
+        maxOpacity={0.133}
+        flickerChance={0.1}
+      />
+      <FlickeringGrid
+        id="deer-hero"
+        className={`absolute inset-0 z-0 mask-[url(/images/deer-hero.svg)] mask-size-[100vw] mask-center mask-no-repeat md:mask-size-[72vh]`}
+        squareSize={3}
+        gridGap={6}
+        color="#60A5FA"
+        maxOpacity={0.66}
+        flickerChance={0.12}
+      />
+      <div className="relative z-10 flex flex-col items-center justify-center gap-12">
+        <h1 className="text-center text-4xl font-bold md:text-6xl">
+          <span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
+            Deep Research{" "}
+          </span>
+          <AuroraText>at Your Fingertips</AuroraText>
+        </h1>
+        <p className="max-w-4xl p-2 text-center text-sm font-light opacity-80 md:text-2xl">
+          Meet <span className="font-medium">DeerFlow</span>, your ultimate Deep
+          Research assistant. With powerful tools like search engines, web
+          crawlers, Python and MCP services, it provides instant insights,
+          comprehensive reports, or even captivating podcasts.
+        </p>
+        <div className="flex gap-6">
+          <Button className="hidden text-lg md:flex md:w-42" size="lg" asChild>
+            <Link href="/chat">
+              Get Started <ChevronRight />
+            </Link>
+          </Button>
+          <Button className="w-42 text-lg" size="lg" variant="outline" asChild>
+            <Link href="https://github.com/bytedance/deer-flow" target="_blank">
+              <GithubFilled />
+              Learn More
+            </Link>
+          </Button>
+        </div>
+      </div>
+      <div className="absolute bottom-8 flex text-xs opacity-50">
+        <p>* DEER stands for Deep Exploration and Efficient Research.</p>
+      </div>
+    </section>
+  );
+}