feat: organize to consistency pass on sections

src/components/cards/EducationCard.astro

@@ -2,6 +2,7 @@
 import { Icon } from 'astro-icon/components';
 
 import Logo from '@components/ui/logos/Logo.astro';
+import { getDirectusImageURL } from '@lib/directusFunctions';
 
 interface Props {
   topic: string;
@@ -13,7 +14,8 @@ interface Props {
   logoIcon?: string;
 }
 
-const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.props;
+const { topic, area, date, url, logoUrlLight, logoIcon } = Astro.props;
+const logoUrlDark = Astro.props.logoUrlDark || logoUrlLight;
 ---
 
 <div class="smooth-reveal group flex flex-col">
@@ -26,8 +28,8 @@ const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.pr
         {logoUrlLight ? (
         <div class="card-hover-icon-scale mr-5">
           <Logo
-            srcLight={logoUrlLight}
-            srcDark={logoUrlDark}
+            srcLight={getDirectusImageURL(logoUrlLight)}
+            srcDark={getDirectusImageURL(logoUrlDark!)}
             alt={`Logo of ${topic}`}
           />
         </div>

src/components/cards/LargeBlogLeftCard.astro

@@ -2,13 +2,14 @@
 import { Icon } from 'astro-icon/components';
 
 import Image from '@components/ui/images/Image.astro';
+import { getDirectusImageURL } from '@lib/directusFunctions';
 
 interface Props {
   title: string;
   subTitle: string;
-  url?: string;
-  img: any;
-  imgAlt: any;
+  url: string;
+  img: string;
+  imgAlt: string;
 }
 
 const { title, subTitle, url, img, imgAlt } = Astro.props;
@@ -23,7 +24,7 @@ const { title, subTitle, url, img, imgAlt } = Astro.props;
     <div>
       <Image
         class="rounded-xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
-        src={img}
+        src={getDirectusImageURL(img)}
         alt={imgAlt}
         draggable="false"
         loading="lazy"

src/components/cards/LargeBlogRightCard.astro

@@ -2,14 +2,15 @@
 import { Icon } from 'astro-icon/components';
 
 import Image from '@components/ui/images/Image.astro';
+import { getDirectusImageURL } from '@lib/directusFunctions';
 
 interface Props {
   title: string;
   subTitle: string;
-  url?: string;
+  url: string;
   single?: boolean;
-  imgOne?: any;
-  imgOneAlt?: any;
+  imgOne: any;
+  imgOneAlt: any;
   imgTwo?: any;
   imgTwoAlt?: any;
 }
@@ -46,7 +47,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
     <div>
       <Image
         class="rounded-xl w-full"
-        src={imgOne}
+        src={getDirectusImageURL(imgOne)}
         alt={imgOneAlt}
         format="webp"
         loading="lazy"
@@ -58,7 +59,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
     <div class="grid grid-cols-2 gap-4">
       <Image
         class="rounded-xl w-full"
-        src={imgOne}
+        src={getDirectusImageURL(imgOne)}
         alt={imgOneAlt}
         draggable="false"
         format="webp"
@@ -68,7 +69,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
       />
       <Image
         class="rounded-xl w-full mt-4 lg:mt-10"
-        src={imgTwo}
+        src={getDirectusImageURL(imgTwo)}
         alt={imgTwoAlt}
         draggable="false"
         format="webp"