feat: refactor blog components

src/components/sections/FeatureSection.astro

@@ -0,0 +1,41 @@
+---
+import { readSingleton } from '@directus/sdk';
+
+import directus from '@lib/directus';
+import FeaturesCard from '@components/cards/FeaturesCard.astro';
+
+const global = await directus.request(readSingleton('site_global'));
+---
+
+<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
+  <div class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24">
+    <div class="max-w-5xl sm:px-6 lg:px-8">
+      <div class="flex flex-wrap gap-6 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 justify-center">
+        <FeaturesCard
+          title="Cloud Engineer"
+          description="Full stack and cloud engineer."
+          url="/about"
+          icon="mdi:cloud-outline"
+        />
+        <FeaturesCard
+          title="Homelab"
+          description="Tinkering, testing, deploying, etc, etc ..."
+          url="/categories/homelab/"
+          icon="mdi:home-variant-outline"
+        />
+        <FeaturesCard
+          title="Documentation"
+          description="Reference and guides for my homelab."
+          url="https://docs.alexlebens.dev"
+          icon="mdi:file-document-multiple"
+        />
+        <FeaturesCard
+          title="Email"
+          description={`Send me a message.`}
+          url=`mailto:${global.email}`
+          icon="mdi:email-fast"
+        />
+      </div>
+    </div>
+  </div>
+</section>