--- // Import necessary modules and utilities import { Image } from "astro:assets"; import Icon from "../icons/Icon.astro"; import type { CollectionEntry } from "astro:content"; const { insightEntry } = Astro.props; interface Props { insightEntry: CollectionEntry<"insights">; } --- <!-- The anchor tag is the root container for the "Insight" card. It links to the insight detail page. --> <a class="group outline-none rounded-xl ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none" href={`/insights/${insightEntry.slug}/`} > <!-- This is the container for the insight's cover image. --> <div class="relative overflow-hidden rounded-xl pt-[50%] sm:pt-[70%]"> <Image class="absolute start-0 top-0 size-full rounded-xl object-cover transition duration-500 ease-in-out group-hover:scale-105" src={insightEntry.data.cardImage} alt={insightEntry.data.cardImageAlt} draggable={"false"} format={"avif"} /> </div> <!-- This is the container for the insight's title and description. --> <div class="mt-7"> <!-- The title of the insight --> <h3 class="text-xl font-bold text-neutral-800 group-hover:text-neutral-600 dark:text-neutral-200 dark:group-hover:text-neutral-400" > {insightEntry.data.title} </h3> <!-- The description of the insight --> <p class="mt-3 text-neutral-600 dark:text-neutral-400"> {insightEntry.data.description} </p> <!-- The "Read More" hyperlink going to the full insight. With an arrow icon --> <p class="mt-5 inline-flex items-center gap-x-1 font-medium text-[#fa5a15] decoration-2 group-hover:underline dark:text-[#fb713b]" > Read more <Icon name="arrowRightStatic" /> </p> </div> </a>