feat: Add Datasets component to home page #3221 (#3508)

### What problem does this PR solve?

feat: Add Datasets component to home page #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/home/applications.tsx

@@ -0,0 +1,80 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { ChevronRight, Cpu, MessageSquare, Search } from 'lucide-react';
+
+const applications = [
+  {
+    id: 1,
+    title: 'Jarvis chatbot',
+    type: 'Chat app',
+    date: '11/24/2024',
+    icon: <MessageSquare className="h-6 w-6" />,
+  },
+  {
+    id: 2,
+    title: 'Search app 01',
+    type: 'Search app',
+    date: '11/24/2024',
+    icon: <Search className="h-6 w-6" />,
+  },
+  {
+    id: 3,
+    title: 'Chatbot 01',
+    type: 'Chat app',
+    date: '11/24/2024',
+    icon: <MessageSquare className="h-6 w-6" />,
+  },
+  {
+    id: 4,
+    title: 'Workflow 01',
+    type: 'Agent',
+    date: '11/24/2024',
+    icon: <Cpu className="h-6 w-6" />,
+  },
+];
+
+export function Applications() {
+  return (
+    <section className="mt-12">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-2xl font-bold">Applications</h2>
+        <div className="flex bg-colors-background-inverse-standard rounded-lg p-1">
+          <Button variant="default" size="sm">
+            All
+          </Button>
+          <Button variant="ghost" size="sm">
+            Chat
+          </Button>
+          <Button variant="ghost" size="sm">
+            Search
+          </Button>
+          <Button variant="ghost" size="sm">
+            Agents
+          </Button>
+        </div>
+      </div>
+      <div className="grid grid-cols-4 gap-6">
+        {[...Array(12)].map((_, i) => {
+          const app = applications[i % 4];
+          return (
+            <Card key={i} className="bg-colors-background-inverse-weak">
+              <CardContent className="p-4 flex items-center gap-6">
+                <div className="w-[70px] h-[70px] rounded-xl flex items-center justify-center bg-gradient-to-br from-[#45A7FA] via-[#AE63E3] to-[#4433FF]">
+                  {app.icon}
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold">{app.title}</h3>
+                  <p className="text-sm opacity-80">{app.type}</p>
+                  <p className="text-sm opacity-80">{app.date}</p>
+                </div>
+                <Button variant="secondary" size="icon">
+                  <ChevronRight className="h-6 w-6" />
+                </Button>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

web/src/pages/home/banner.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent } from '@/components/ui/card';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, X } from 'lucide-react';
 
 function BannerCard() {
   return (
@@ -17,34 +17,22 @@ function BannerCard() {
   );
 }
 
-function MyCard() {
-  return (
-    <div className="w-[265px] h-[87px] pl-[17px] pr-[13px] py-[15px] bg-[#b8b5cb]/20 rounded-xl border border-[#e6e3f6]/10 backdrop-blur-md justify-between items-end inline-flex">
-      <div className="grow shrink basis-0 flex-col justify-start items-start gap-[9px] inline-flex">
-        <div className="px-1 py-0.5 bg-[#644bf7] rounded justify-center items-center gap-2 inline-flex">
-          <div className="text-white text-xs font-medium font-['IBM Plex Mono'] leading-none">
-            System
-          </div>
-        </div>
-        <div className="self-stretch text-white text-lg font-normal font-['Inter'] leading-7">
-          Setting up your LLM
-        </div>
-      </div>
-      <div className="w-6 h-6 relative" />
-    </div>
-  );
-}
-
 export function Banner() {
   return (
-    <section className="bg-[url('@/assets/banner.png')] bg-cover h-28 rounded-2xl mx-14 my-8 flex gap-8 justify-between">
+    <section className="bg-[url('@/assets/banner.png')] bg-cover h-28 rounded-2xl  my-8 flex gap-8 justify-between">
       <div className="h-full text-3xl font-bold items-center inline-flex ml-6">
         Welcome to RAGFlow
       </div>
-      <div className="flex justify-between items-center gap-10 mr-5">
+      <div className="flex justify-between items-center gap-4 mr-5">
         <BannerCard></BannerCard>
         <BannerCard></BannerCard>
-        <MyCard></MyCard>
+        <BannerCard></BannerCard>
+        <button
+          type="button"
+          className="relative p-1 hover:bg-white/10 rounded-full transition-colors"
+        >
+          <X className="w-6 h-6 text-white" />
+        </button>
       </div>
     </section>
   );

web/src/pages/home/card.tsx

@@ -1,39 +0,0 @@
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-export function CardWithForm() {
-  return (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Deploy your new project in one-click.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <div className="grid w-full items-center gap-4">
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="Name of your project" />
-            </div>
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="framework">Framework</Label>
-            </div>
-          </div>
-        </form>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Deploy</Button>
-      </CardFooter>
-    </Card>
-  );
-}

web/src/pages/home/datasets.tsx

@@ -0,0 +1,85 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+const datasets = [
+  {
+    id: 1,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: '/image-3.png',
+  },
+  {
+    id: 2,
+    title: 'HR knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: '/image.png',
+  },
+  {
+    id: 3,
+    title: 'IT knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: '/rectangle-86.png',
+  },
+  {
+    id: 4,
+    title: 'Legal knowledge base',
+    files: '1,242 files',
+    size: '152 MB',
+    created: '12.02.2024',
+    image: '/image-2.png',
+  },
+];
+
+export function Datasets() {
+  return (
+    <section>
+      <h2 className="text-2xl font-bold mb-6">Datasets</h2>
+      <div className="flex gap-6">
+        {datasets.map((dataset) => (
+          <Card
+            key={dataset.id}
+            className="bg-colors-background-inverse-weak flex-1"
+          >
+            <CardContent className="p-4">
+              <div className="flex justify-between mb-4">
+                <div
+                  className="w-[70px] h-[70px] rounded-xl bg-cover"
+                  style={{ backgroundImage: `url(${dataset.image})` }}
+                />
+                <Button variant="ghost" size="icon">
+                  <MoreHorizontal className="h-6 w-6" />
+                </Button>
+              </div>
+              <div className="flex justify-between items-end">
+                <div>
+                  <h3 className="text-lg font-semibold mb-2">
+                    {dataset.title}
+                  </h3>
+                  <p className="text-sm opacity-80">
+                    {dataset.files} | {dataset.size}
+                  </p>
+                  <p className="text-sm opacity-80">
+                    Created {dataset.created}
+                  </p>
+                </div>
+                <Button variant="secondary" size="icon">
+                  <ChevronRight className="h-6 w-6" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+        <Button className="bg-[#9276ff] h-auto" variant={'secondary'}>
+          See all
+        </Button>
+      </div>
+    </section>
+  );
+}

web/src/pages/home/header.tsx

@@ -64,7 +64,7 @@ export function HomeHeader() {
   }, [navigate]);
 
   return (
-    <section className="px-[60px] py-[12px] flex justify-between items-center">
+    <section className="py-[12px] flex justify-between items-center">
       <div className="flex items-center gap-4">
         <img
           src={'/logo.svg'}

web/src/pages/home/index.tsx

@@ -1,14 +1,16 @@
+import { Applications } from './applications';
 import { Banner } from './banner';
+import { Datasets } from './datasets';
 import { HomeHeader } from './header';
-import NextBanner from './next-banner';
 
 const Home = () => {
   return (
-    <div>
+    <div className="text-white mx-8">
       <HomeHeader></HomeHeader>
       <section>
         <Banner></Banner>
-        <NextBanner></NextBanner>
+        <Datasets></Datasets>
+        <Applications></Applications>
       </section>
     </div>
   );

web/src/pages/home/next-banner.tsx

@@ -1,64 +0,0 @@
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent } from '@/components/ui/card';
-import { ArrowRight, X } from 'lucide-react';
-
-const guideCards = [
-  {
-    badge: 'System',
-    title: 'Setting up your LLM',
-  },
-  {
-    badge: 'Chat app',
-    title: 'Configuration guides',
-  },
-  {
-    badge: 'Search app',
-    title: 'Prompt setting guides',
-  },
-];
-
-export default function WelcomeGuide(): JSX.Element {
-  return (
-    <div className="flex w-full max-w-[1800px] items-center gap-4 px-[60px] py-6 relative bg-[#223d8e0d] rounded-3xl overflow-hidden">
-      <div
-        className="absolute inset-0 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 opacity-75"
-        style={{
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      />
-
-      <h1 className="relative flex-1 text-4xl font-bold text-white">
-        Welcome to RAGFlow
-      </h1>
-
-      <div className="inline-flex items-center gap-[22px] relative">
-        {guideCards.map((card, index) => (
-          <Card
-            key={index}
-            className="w-[265px]  backdrop-blur-md border-colors-outline-neutral-standard"
-          >
-            <CardContent className="flex items-end justify-between p-[15px]">
-              <div className="flex flex-col items-start gap-[9px] flex-1">
-                <Badge
-                  variant="secondary"
-                  className="bg-colors-background-core-weak text-colors-text-neutral-strong"
-                >
-                  {card.badge}
-                </Badge>
-                <p className="text-lg text-colors-text-neutral-strong">
-                  {card.title}
-                </p>
-              </div>
-              <ArrowRight className="w-6 h-6" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <button className="relative p-1 hover:bg-white/10 rounded-full transition-colors">
-        <X className="w-6 h-6 text-white" />
-      </button>
-    </div>
-  );
-}