Merge pull request #27 from tclxshunquan-wang/feat/docs

refactor: update highlighting card styles and improve icon usage in H…

Author: tianyingchun

website/src/app/(home)/widgets/HomeView.tsx

@@ -46,7 +46,7 @@ const features = [
   },
   {
     title: 'Async Support',
-    icon: 'carbon:async',
+    icon: 'logos:async-api-icon',
     description: 'Built-in support for asynchronous operations',
   },
 ];
@@ -72,9 +72,9 @@ export const HomeView: FC = () => {
         <div
           className={`${styles.right_layout} order-first hidden md:order-none md:col-span-2 md:block`}
         >
-          <div className={styles.image_bg} />
+          <div className={`${styles.image_bg} hidden dark:block`} />
           <DotLottieReact
-            src="/logger/assets/lottie/niu1.lottie"
+            src="/logger/assets/lottie/niu.lottie"
             loop
             autoplay
           />
@@ -89,7 +89,7 @@ export const HomeView: FC = () => {
               id="highlighting-card"
               className="space-y-4"
             >
-              <div className="flex size-10 items-center justify-center rounded-sm bg-slate-500/40">
+              <div className="flex size-10 items-center justify-center rounded-sm bg-transparent dark:bg-slate-500/10">
                 <Icon icon={feature.icon} className="size-6 text-white" />
               </div>
               <h4 className="flex items-center gap-2 text-xl font-bold">

website/src/app/(home)/widgets/page.css

@@ -68,18 +68,10 @@
 }
 #highlighting-card {
   min-height: 200px;
-  background-image:
-    linear-gradient(to top, transparent, #fff 50%),
-    url(/assets/syntax-highlighting.svg);
   background-size: 634px;
   background-position: -6px calc(100% + 4px);
   background-repeat: no-repeat;
 }
-.dark #highlighting-card {
-  background-image:
-    linear-gradient(to top, transparent, #202020 50%),
-    url(/assets/syntax-highlighting.svg);
-}
 .feat-darkmode {
   min-height: 300px;
 }

website/src/app/page.css

@@ -68,18 +68,10 @@
 }
 #highlighting-card {
   min-height: 300px;
-  background-image:
-    linear-gradient(to top, transparent, #fff 50%),
-    url(/assets/syntax-highlighting.svg);
   background-size: 634px;
   background-position: -6px calc(100% + 4px);
   background-repeat: no-repeat;
 }
-.dark #highlighting-card {
-  background-image:
-    linear-gradient(to top, transparent, #202020 50%),
-    url(/assets/syntax-highlighting.svg);
-}
 .feat-darkmode {
   min-height: 300px;
 }