From 24b42ab466fe0c5e17fb3f2ba6431cbc387ea2b2 Mon Sep 17 00:00:00 2001
From: Hui Xuejie <huixuejie@bytedance.com>
Date: Tue, 29 Apr 2025 14:00:37 +0800
Subject: [PATCH] style(page): adjust the footer text style and layout of the
 case study section

---
 web/src/app/page.tsx                      | 17 ++++-------------
 web/src/components/magicui/bento-grid.tsx |  9 +++------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 6d4c4e5..bfc652e 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -72,7 +72,7 @@ function Footer() {
     <footer className="container mt-32 flex flex-col items-center justify-center">
       <hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
       <div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm">
-        <p className="font-serif text-xl">
+        <p className="text-center font-serif text-lg md:text-xl">
           &quot;Originated from Open Source, give back to Open Source.&quot;
         </p>
       </div>
@@ -215,12 +215,9 @@ function CaseStudySection() {
         title="Case Studies"
         description="See DeerFlow in action through replays."
       />
-      <div className="flex w-full flex-wrap">
+      <div className="grid w-3/4 grid-cols-1 gap-2 sm:w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {caseStudies.map((caseStudy) => (
-          <div
-            key={caseStudy.title}
-            className="w-full p-2 sm:w-1/2 md:w-1/3 lg:w-[25%]"
-          >
+          <div key={caseStudy.title} className="w-full p-2">
             <BentoCard
               {...{
                 Icon: caseStudy.icon,
@@ -228,13 +225,7 @@ function CaseStudySection() {
                 description: caseStudy.description,
                 href: "/",
                 cta: "Learn more",
-                className: "w-full h-[320px]",
-                background: (
-                  <img
-                    alt="background"
-                    className="absolute -top-20 -right-20 opacity-60"
-                  />
-                ),
+                className: "w-full h-full",
               }}
             />
           </div>
diff --git a/web/src/components/magicui/bento-grid.tsx b/web/src/components/magicui/bento-grid.tsx
index 8d2374d..08b7c81 100644
--- a/web/src/components/magicui/bento-grid.tsx
+++ b/web/src/components/magicui/bento-grid.tsx
@@ -12,7 +12,7 @@ interface BentoGridProps extends ComponentPropsWithoutRef<"div"> {
 interface BentoCardProps extends ComponentPropsWithoutRef<"div"> {
   name: string;
   className: string;
-  background: ReactNode;
+  background?: ReactNode;
   Icon: React.ElementType;
   description: string;
   href: string;
@@ -22,10 +22,7 @@ interface BentoCardProps extends ComponentPropsWithoutRef<"div"> {
 const BentoGrid = ({ children, className, ...props }: BentoGridProps) => {
   return (
     <div
-      className={cn(
-        "grid w-full auto-rows-[22rem] grid-cols-2 gap-4",
-        className,
-      )}
+      className={cn("grid w-full auto-rows-auto grid-cols-2 gap-4", className)}
       {...props}
     >
       {children}
@@ -55,7 +52,7 @@ const BentoCard = ({
     )}
     {...props}
   >
-    <div>{background}</div>
+    {background && <div>{background}</div>}
     <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-5">
       <Icon className="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-60" />
       <h3 className="text-xl font-semibold text-neutral-700 dark:text-neutral-300">