feat: redo how images, icons, and logos are handled

src/components/sections/EducationSection.astro

@@ -55,7 +55,8 @@ const certificates = ((await directus.request(
         area={certificate.issuer}
         date={certificate.issuerDate}
         url={certificate.url}
-        logoIcon={certificate.logoName}
+        logoUrlLight={certificate.logo}
+        logoUrlDark={certificate.logoDark}
       />
       ))}
     </div>

src/components/sections/FeatureSection.astro

@@ -15,25 +15,25 @@ const global = await directus.request(readSingleton('site_global'));
           title="Cloud Engineer"
           description="Full stack and cloud engineer."
           url="/about"
-          icon="mdi:cloud-outline"
+          logoUrlLight="https://img.icons8.com/cotton/64/cloud-development--v2.png"
         />
         <FeaturesCard
           title="Homelab"
           description="Tinkering, testing, deploying, etc, etc ..."
           url="/categories/homelab/"
-          icon="mdi:home-variant-outline"
+          logoUrlLight="https://img.icons8.com/cotton/64/smart-home-connection.png"
         />
         <FeaturesCard
           title="Documentation"
           description="Reference and guides for my homelab."
           url="https://docs.alexlebens.dev"
-          icon="mdi:file-document-multiple"
+          logoUrlLight="https://img.icons8.com/cotton/64/bookmarked-document--v1.png"
         />
         <FeaturesCard
           title="Email"
           description={`Send me a message.`}
           url=`mailto:${global.email}`
-          icon="mdi:email-fast"
+          logoUrlLight="https://img.icons8.com/cotton/64/secured-letter--v3.png"
         />
       </div>
     </div>

src/components/sections/HeroSection.astro

@@ -1,7 +1,8 @@
 ---
+import { Image } from 'astro:assets';
+
 import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
 import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
-import Image from '@components/ui/images/Image.astro';
 
 interface Props {
   title: string;
@@ -48,7 +49,7 @@ const roundedClasses = Astro.props.rounded ? "rounded-2xl" : null;
         format="webp"
         quality="low"
         widths={[840]}
-        disableBlur={true}
+        inferSize={true}
       />
       )}
     </div>