feat: some shit

src/pages/blog/index.astro

@@ -2,6 +2,8 @@
 import { getCollection } from "astro:content";
 const pages = await getCollection("blog");
 import Layout from "@layouts/Layout.astro";
+import HeroCard from "@components/HeroCard.astro";
+import SmallCard from "@components/SmallCard.astro";
 
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection } from "@i18n/utils";
@@ -9,17 +11,29 @@ import { filterCollection } from "@i18n/utils";
 const locale = getLocale(Astro.url);
 
 const posts = filterCollection(pages, locale);
+
+const featuredPosts = await Promise.all(
+  posts.slice(0, 3).map(async (post) => {
+    if (!post.data.headerImg) {
+      return post;
+    }
+    const { default: image } = await import(
+      `../../content/blog/${post.slug.split("/")[0]}/${post.data.headerImg}`
+    );
+    return {
+      ...post,
+      image,
+    };
+  }),
+);
+
+const otherPosts = posts.slice(3);
 ---
 
 <Layout title="Dude">
-  <hr />
-  {
-    posts.map((post) => (
-      <>
-        <a href={"blog/" + post.slug.split("/")[0]}>{post.data.title}</a>
-        <br />
-      </>
-    ))
-  }
-  <hr />
+  {featuredPosts.map((post) => <HeroCard post={post} />)}
+
+  <div class="grid grid-cols-2 gap-4 mt-4">
+    {otherPosts.map((post) => <SmallCard post={post} />)}
+  </div>
 </Layout>