feat: some shit

src/pages/index.astro

@@ -1,54 +1,71 @@
 ---
 import Layout from "@layouts/Layout.astro";
 import Max from "@components/Max.astro";
-import { Card } from "@components/card";
 import { getCollection } from "astro:content";
-import { filterCollection, useTranslatedPath } from "@i18n/utils";
-import markdownToText from "@helpers/markdownToText";
+import {
+  filterCollection,
+  useTranslatedPath,
+  useTranslations,
+} from "@i18n/utils";
 import { getLocale } from "astro-i18n-aut";
+import HeroCard from "@components/HeroCard.astro";
+import SmallCard from "@components/SmallCard.astro";
+import LinkCard from "@components/LinkCard.astro";
+import ArrowA from "@components/arrows/ArrowA.astro";
+import ArrowB from "@components/arrows/ArrowB.astro";
 
 const projects = filterCollection(
   await getCollection("projects"),
   getLocale(Astro.url),
 );
 
-const translatePath = useTranslatedPath(Astro);
-
-const locale = getLocale(Astro.url);
-
-const projectSlides = await Promise.all(
-  projects.map(async (project) => ({
-    title: project.data.title,
-    description: markdownToText(project.body),
-    image: project.data.headerImg,
-    link: translatePath(project.slug),
-  })),
-);
+const t = useTranslations(Astro);
+const tp = useTranslatedPath(Astro);
 
 const featuredProject = projects.find((project) => project.data?.featured);
+const otherProjects = projects
+  .filter((project) => featuredProject !== project)
+  .sort((a) => (a?.data?.icon ? -1 : 1))
+  .slice(0, 3);
+
+const posts = filterCollection(
+  await getCollection("blog"),
+  getLocale(Astro.url),
+);
+
+const featuredPost = posts.find((post) => post.data?.featured);
+const otherPosts = posts.filter((post) => featuredPost !== post).slice(0, 3);
 ---
 
 <Layout title="Max Richter">
   <Max />
-  {
-    featuredProject && (
-      <Card classes="flex overflow-hidden gradient border-1 border-light">
-        <Card.Content classes="p-8">
-          <Card.Title>{featuredProject.data.title}</Card.Title>
-          <Card.Description>
-            {markdownToText(featuredProject.body).slice(0, 200)}
-          </Card.Description>
-          <Card.ReadMoreButton
-            link={translatePath(
-              `/projects/${featuredProject.slug.split("/")[0]}`,
-            )}
-          />
-        </Card.Content>
-        <Card.Image
-          src={featuredProject.data.headerImg}
-          alt={featuredProject.data.title}
-        />
-      </Card>
-    )
-  }
+  <section class="relative my-8">
+    <span class="i-tabler-circle-arrow-right-thin"></span>
+    <ArrowA />
+    {featuredProject && <HeroCard post={featuredProject} />}
+    <div class="grid grid-cols-2 gap-4 mt-4">
+      {
+        otherProjects.length > 0 &&
+          otherProjects.map((project) => <SmallCard post={project} />)
+      }
+      <LinkCard
+        link={tp("/projects")}
+        title={t("more-projects")}
+        icon="circle-arrow-right"
+      />
+    </div>
+  </section>
+
+  <section class="relative my-8">
+    {featuredPost && <HeroCard post={featuredPost} />}
+
+    <ArrowB />
+    <div class="grid grid-cols-2 gap-4 mt-4">
+      {
+        otherPosts.length > 0 &&
+          otherPosts.map((post) => <SmallCard post={post} />)
+      }
+      <LinkCard link={tp("/blog")} title={t("more-posts")} />
+    </div>
+  </section>
 </Layout>