Feat: Modify the style of the home page in bright mode #3221 (#3832)

### What problem does this PR solve?

Feat: Modify the style of the home page in bright mode #3221

### Type of change


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

web/src/pages/home/applications.tsx

@@ -65,19 +65,22 @@ 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>
+        <h2 className="text-2xl font-bold ">Applications</h2>
         <Segmented
           options={options}
           value={val}
           onChange={handleChange}
-          className="bg-colors-background-inverse-standard"
+          className="bg-colors-background-inverse-standard text-colors-text-neutral-standard"
         ></Segmented>
       </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">
+            <Card
+              key={i}
+              className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard"
+            >
               <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}
@@ -87,7 +90,7 @@ export function Applications() {
                   <p className="text-sm opacity-80">{app.type}</p>
                   <p className="text-sm opacity-80">{app.date}</p>
                 </div>
-                <Button variant="secondary" size="icon">
+                <Button variant="icon" size="icon">
                   <ChevronRight className="h-6 w-6" />
                 </Button>
               </CardContent>