merge in new changes

src/components/blog/BlogFeaturedArticle.astro

@@ -0,0 +1,36 @@
+---
+import type { Post } from '@lib/directusTypes';
+import BlogCard from '@components/blog/BlogCard.astro';
+
+interface Props {
+  posts: Post[];
+}
+
+const { posts } = Astro.props;
+
+const description = 'Here are a few articles that I think are not bad, hope you like too.';
+---
+
+<section class="mx-auto mb-10 max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 2xl:max-w-full">
+  <div class="text-left">
+    <h2
+      id="selected-articel"
+      class="smooth-reveal-2 mb-4 text-5xl font-extrabold tracking-tight text-balance text-neutral-800 dark:text-neutral-200"
+    >
+      Posts
+    </h2>
+    <p
+      class="smooth-reveal-2 mb-8 max-w-prose font-light text-pretty text-neutral-600 sm:text-xl dark:text-neutral-400"
+    >
+      {description}
+    </p>
+  </div>
+
+  <div class="flex flex-col md:flex-row md:space-x-12 lg:space-x-16">
+    <div class="w-full">
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {posts.map((b) => <BlogCard post={b} />)}
+      </div>
+    </div>
+  </div>
+</section>