feat: major refactor of cards to standardize styles

src/components/ui/cards/EducationCard.astro

@@ -0,0 +1,63 @@
+---
+import { Icon } from 'astro-icon/components';
+import Logo from '@components/ui/logos/Logo.astro';
+
+interface Props {
+  topic: string;
+  area: string;
+  date: string;
+  url: string;
+  logoUrlLight?: string;
+  logoUrlDark?: string;
+  logoIcon?: string;
+}
+
+const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.props;
+---
+
+<div class="smooth-reveal group flex flex-col">
+  <a
+    class="card-base flex items-center"
+    href={url}
+  >
+    <div class="p-4 md:p-10">
+      <div class="flex items-center">
+        {logoUrlLight ? (
+        <div class="mr-5">
+          <Logo
+            srcLight={logoUrlLight}
+            srcDark={logoUrlDark}
+            alt={`Logo of ${topic}`}
+          />
+        </div>
+        ) : logoIcon ? (
+        <div class="mr-5 text-neutral-800 dark:text-neutral-200">
+          <Icon name={logoIcon} class="h-12 w-12" />
+        </div>
+        ) : null}
+
+        <div class="grow text-left">
+          <span class="card-text-title block text-lg">
+            {topic}
+          </span>
+          <span class="card-text-description block mt-1 font-medium text-xs uppercase">
+            {area} - {new Date(date).getFullYear()}
+          </span>
+        </div>
+      </div>
+      <div class="ml-6 flex">
+        <div class="relative inline-block">
+          <div class="card-text-title card-hover-text-title flex relative mx-auto min-h-11 items-center font-semibold text-md sm:mx-0 sm:mt-4">
+            <span class="relative inline-block overflow-hidden">
+              Visit Page
+            </span>
+            <Icon
+              name="mdi:keyboard-arrow-right"
+              class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>