HomeSection.astro

---
import CoverImage from "@/components/CoverImage.astro";
import type { ContentListItem } from "@/lib/content";
import { resolveHref } from "@/lib/sanity/resolve-href";

interface Props {
	title: string;
	description: string;
	items: ContentListItem[];
	/** Alternating band colour, matching the Next home page. */
	muted?: boolean;
}

const { title, description, items, muted = false } = Astro.props;
---

{
	items.length > 0 && (
		<section
			class:list={[
				"w-full py-12 md:py-24 lg:py-32 flex flex-col items-center justify-center",
				muted && "bg-muted",
			]}
		>
			<div class="container px-4 md:px-6">
				<div class="flex flex-col items-center justify-center space-y-4 text-center">
					<div class="space-y-2">
						<h2 class="text-3xl font-bold tracking-tighter sm:text-5xl">{title}</h2>
						<p class="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
							{description}
						</p>
					</div>
				</div>
				<div class="mx-auto grid max-w-5xl items-stretch gap-6 py-12 lg:grid-cols-2 lg:gap-12">
					{items.map((item) => {
						const href = resolveHref(item._type, item.slug ?? undefined);
						return (
							<a
								href={href}
								class="flex flex-col shadow-sm hover:scale-105 transform transition duration-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
							>
								{item.coverImage && (
									<CoverImage
										image={item.coverImage}
										fallbackAlt={item.title || "CodingCat.dev tutorial cover image"}
										width={960}
										height={540}
										sizes="(max-width: 1024px) 100vw, 512px"
										class="aspect-video w-full object-cover object-center"
									/>
								)}
								<div class="flex flex-col gap-2 p-2 sm:p-6">
									<h3 class="text-xl sm:text-3xl font-semibold">{item.title}</h3>
									<p class="text-sm text-muted-foreground line-clamp-2">
										{item.excerpt}
									</p>
								</div>
							</a>
						);
					})}
				</div>
			</div>
		</section>
	)
}