From 8775060846a1c05cd867656097cb5ea514bb792d Mon Sep 17 00:00:00 2001
From: rxyhn <rxyhn.dev@gmail.com>
Date: Mon, 9 Sep 2024 03:59:31 +0700
Subject: [PATCH] fix: inconsistent colors

---
 src/components/Card.astro | 60 ++++++++++++++-------------------------
 src/pages/index.astro     |  4 +--
 2 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/src/components/Card.astro b/src/components/Card.astro
index bd50b77..c9a9608 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -16,63 +16,47 @@ const { url, description, highlights, name } = Astro.props as CardProps;
   class="group relative flex h-full flex-col items-stretch rounded-2xl p-7 duration-300 ease-out sm:p-5"
 >
   <span
-    class="absolute inset-0 z-20 block h-full w-full rounded-2xl border border-dashed border-transparent bg-transparent duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:border group-hover:border-dashed group-hover:border-neutral-600 group-hover:bg-black"
-    aria-hidden="true"></span>
+    class="absolute inset-0 z-20 rounded-2xl border border-dashed border-neutral-600 bg-black duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
+  ></span>
   <span
-    class="absolute inset-0 z-10 block h-full w-full rounded-2xl border border-dashed border-neutral-600 duration-300 ease-out group-hover:translate-x-1 group-hover:translate-y-1"
-    aria-hidden="true"></span>
+    class="absolute inset-0 z-10 rounded-2xl border border-dashed border-neutral-600 duration-300 ease-out group-hover:translate-x-1 group-hover:translate-y-1"
+  ></span>
   <span
-    class="relative z-30 block duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
+    class="relative z-30 duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
   >
-    <span class="mb-1 mt-5 block w-full px-1 sm:mt-3">
-      <span
+    <div class="mb-1 mt-5 w-full px-1 sm:mt-3">
+      <h3
         class="mb-0 flex items-center text-base font-semibold tracking-tight text-neutral-100"
       >
-        <h3 class="font-medium leading-snug text-neutral-200">
-          <span>{name}</span>
-        </h3>
+        <span class="font-medium leading-snug text-neutral-200">{name}</span>
         <svg
           class="ml-1 h-2.5 w-2.5 -translate-x-1 translate-y-1 -rotate-45 transform stroke-current transition-all duration-200 ease-in-out group-hover:translate-x-0 group-hover:translate-y-0"
           viewBox="0 0 13 15"
-          version="1.1"
           xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
         >
           <g
-            stroke="none"
-            stroke-width="1"
             fill="none"
-            fill-rule="evenodd"
+            stroke="currentColor"
+            stroke-width="2.4"
             stroke-linecap="round"
             stroke-linejoin="round"
           >
-            <g
-              id="svg"
-              transform="translate(0.666667, 2.333333)"
-              stroke="currentColor"
-              stroke-width="2.4"
-            >
-              <g>
-                <polyline
-                  class="opacity-0 transition-all delay-0 duration-200 ease-out group-hover:opacity-100"
-                  points="5.33333333 0 10.8333333 5.5 5.33333333 11"></polyline>
-                <line
-                  class="-translate-x-1 transform opacity-0 transition-all duration-200 ease-out group-hover:ml-0 group-hover:translate-x-0 group-hover:opacity-100"
-                  x1="10.8333333"
-                  y1="5.5"
-                  x2="0.833333333"
-                  y2="5.16666667"></line>
-              </g>
-            </g>
+            <polyline
+              class="opacity-0 transition-all duration-200 ease-out group-hover:opacity-100"
+              points="5.33 0 10.83 5.5 5.33 11"></polyline>
+            <line
+              class="-translate-x-1 transform opacity-0 transition-all duration-200 ease-out group-hover:translate-x-0 group-hover:opacity-100"
+              x1="10.83"
+              y1="5.5"
+              x2="0.83"
+              y2="5.17"></line>
           </g>
         </svg>
-      </span>
-      <p class="mt-2 text-sm leading-normal text-neutral-300">
-        {description}
-      </p>
+      </h3>
+      <p class="mt-2 text-sm leading-normal text-neutral-300">{description}</p>
       <p class="mt-2 text-sm leading-normal text-neutral-400">
         {highlights.join(" ")}
       </p>
-    </span>
+    </div>
   </span>
 </a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 527cdb8..7085c04 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -42,13 +42,13 @@ const { name, label, summary } = basics;
         </div>
       </div>
       <div
-        class="mx-auto w-full max-w-xs rounded-2xl border border-dashed border-neutral-700 p-4 md:w-1/2 md:max-w-full md:p-8"
+        class="mx-auto w-full max-w-xs rounded-2xl border border-dashed border-neutral-700 bg-black p-4 md:w-1/2 md:max-w-full md:p-8"
       >
         <Image
           src={PFP}
           alt="Rayhan Kafi Pratama"
           loading="eager"
-          class="h-auto w-full rounded-2xl bg-transparent object-cover"
+          class="h-auto w-full rounded-2xl object-cover"
         />
       </div>
     </div>