feat: some shit

src/components/HeroCard.astro

@@ -0,0 +1,60 @@
+---
+import markdownToText from "@helpers/markdownToText";
+import { Card } from "./card";
+import { useTranslatedPath } from "@i18n/utils";
+import Image from "@components/Image.astro";
+
+interface Props {
+  post: {
+    data: {
+      title: string;
+      icon?: string;
+      headerImg?: string;
+    };
+    collection: string;
+    slug: string;
+    body: string;
+  };
+}
+
+const {
+  data: { title, headerImg, icon },
+  collection,
+  body,
+  slug,
+} = Astro.props.post;
+
+const translatePath = useTranslatedPath(Astro);
+
+const imagePath = `../content/${collection}/${slug.split("/")[0]}/${headerImg}`;
+
+const image = headerImg && (await import(imagePath)).default;
+
+const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
+---
+
+<Card
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${image ? "grid-rows-[200px_1fr] sm:grid-rows-none sm:grid-cols-[1fr_200px]" : ""}`}
+>
+  <Card.Content classes="px-8 py-7 order-last sm:order-first">
+    <Card.Title classes="text-4xl flex items-center gap-2">
+      {icon && <img src={icon} class="h-6" />}
+      {title}
+    </Card.Title>
+    <Card.Description>
+      {markdownToText(body).slice(0, 200)}
+    </Card.Description>
+    <Card.ReadMoreButton link={link} />
+  </Card.Content>
+  {
+    image?.format && (
+      <a href={link}>
+        <Image
+          src={image}
+          alt={"cover for " + title}
+          class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
+        />
+      </a>
+    )
+  }
+</Card>