Feat: Modify background color of Card #3221 (#7421)

### What problem does this PR solve?

Feat: Modify background color of Card #3221

### Type of change


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

web/src/pages/home/applications.tsx

@@ -1,10 +1,11 @@
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import { Routes } from '@/routes';
 import { Cpu, MessageSquare, Search } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'umi';
 import { Agents } from './agent-list';
-import { ApplicationCard } from './application-card';
+import { ApplicationCard, SeeAllAppCard } from './application-card';
 import { ChatList } from './chat-list';
 
 const applications = [
@@ -38,15 +39,22 @@ const applications = [
   },
 ];
 
+const All = 'all';
+
 export function Applications() {
   const [val, setVal] = useState('all');
   const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const handleNavigate = useCallback(() => {
+    navigate(val);
+  }, [navigate, val]);
 
   const options = useMemo(
     () => [
       {
         label: 'All',
-        value: 'all',
+        value: All,
       },
       { value: Routes.Chats, label: t('header.chat') },
       { value: Routes.Searches, label: t('header.search') },
@@ -61,7 +69,7 @@ export function Applications() {
 
   return (
     <section className="mt-12">
-      <div className="flex justify-between items-center mb-6">
+      <div className="flex justify-between items-center mb-5">
         <h2 className="text-2xl font-bold ">Applications</h2>
         <Segmented
           options={options}
@@ -71,13 +79,14 @@ export function Applications() {
         ></Segmented>
       </div>
       <div className="flex flex-wrap gap-4">
-        {(val === 'all' || val === Routes.Searches) &&
+        {(val === All || val === Routes.Searches) &&
           [...Array(12)].map((_, i) => {
             const app = applications[i % 4];
             return <ApplicationCard key={i} app={app}></ApplicationCard>;
           })}
         {val === Routes.Agents && <Agents></Agents>}
         {val === Routes.Chats && <ChatList></ChatList>}
+        {val === All || <SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
       </div>
     </section>
   );