feat: redo layout, smaller and with logo

src/components/cards/LargeLinkCard.astro

@@ -0,0 +1,55 @@
+---
+import { Icon } from 'astro-icon/components';
+
+import Logo from '@components/images/Logo.astro';
+import { getDirectusImageURL } from '@/support/url';
+
+interface Props {
+  title: string;
+  subTitle: string;
+  url: string;
+  logoLight: string;
+  logoDark?: string;
+}
+
+const { title, subTitle, url, logoLight, logoDark} = Astro.props;
+---
+
+<div class="smooth-reveal w-full mx-auto">
+  <a
+    class="card-base group flex flex-row items-center justify-between w-full p-8 gap-6 md:gap-8"
+    href={url}
+    data-astro-prefetch
+  >
+    <div class="flex flex-row items-center ml-4">
+      <div class="card-hover-icon-scale shrink-0 mr-3">
+        <Logo
+          srcLight={getDirectusImageURL(logoLight)}
+          srcDark={getDirectusImageURL(logoDark!)}
+          alt={`Logo of ${title}`}
+        />
+      </div>
+      <div class="flex flex-col gap-3 text-left ml-4">
+        <h2 class="card-text-header text-2xl md:text-3xl">
+          {title}
+        </h2>
+        <p class="card-text-title font-light text-pretty text-lg max-w-3xl">
+          {subTitle}
+        </p>
+      </div>
+    </div>
+    <div class="shrink-0 mr-4">
+      <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
+        <div class="button-text-title flex relative items-center text-center">
+          <span class="mr-2">
+            Read More
+          </span>
+          <Icon
+            name="mdi:keyboard-arrow-right"
+            class="button-hover-arrow"
+          />
+        </div>
+      </div>
+    </div>
+  </a>
+</div>

src/components/sections/AllPostsSection.astro

@@ -1,20 +1,20 @@
 ---
 import { readSingleton } from '@directus/sdk';
 
-import LargeInvisibleCard from '@components/cards/LargeInvisibleCard.astro';
+import LargeLinkCard from '@components/cards/LargeLinkCard.astro';
 import directus from '@lib/directus';
 
 const global = await directus.request(readSingleton('site_global'));
 ---
 
-<section class:list={['mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full', Astro.props.className]}>
+<section class:list={['mx-auto px-4 pb-10 sm:px-6 lg:px-8 lg:pb-14 2xl:max-w-full', Astro.props.className]}>
   <div class="grid grid-cols-1">
-    <LargeInvisibleCard
-      title="Read More"
+    <LargeLinkCard
+      title="All Posts"
       subTitle="Catch up on everything I've written so far here"
       url="/all"
-      img={global.all_image}
-      imgAlt={global.all_image_alt}
+      logoLight={global.all_logoLight}
+      logoDark={global.all_logoDark}
     />
   </div>
 </section>