website/src/components/HeroCard.astro

---
import markdownToText from "@helpers/markdownToText";
import { Card } from "./card";
import { useTranslatedPath, useTranslations } from "@i18n/utils";
import Image from "@components/Image.astro";
import type { ImageMetadata } from "astro";

interface Props {
  post: {
    data: {
      title: string;
      icon?: string;
      cover?: ImageMetadata;
    };
    collection: string;
    slug: string;
    body: string;
  };
}

const {
  data: { title, cover, icon },
  collection,
  body,
  slug,
} = Astro.props.post;

const translatePath = useTranslatedPath(Astro.url);
const t = useTranslations(Astro.url);

const link = translatePath(`/${collection}/${slug.split("/")[0]}`);
---

<Card
  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "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} text={t("read-more")} />
  </Card.Content>
  {
    cover && (
      <a href={link}>
        <Image
          src={cover}
          alt={"cover for " + title}
          class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"
        />
      </a>
    )
  }
</Card>