feat: add table of content element

src/components/Max.astro

@@ -10,7 +10,7 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
 >
   <div
     class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
@@ -55,6 +55,21 @@ const t = useTranslations(Astro.url);
     bottom: 0;
     background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
   }
+  .image {
+    filter: brightness(1.1) contrast(0.9);
+  }
+
+  :global(.dark) .image {
+    filter: brightness(0.9);
+  }
+
+  :global(.dark) .image::before {
+    background: linear-gradient(
+      -12deg,
+      var(--background-dark) 0%,
+      transparent 50%
+    );
+  }
 
   .image > :global(img) {
     height: 100%;