1  ---
 2  import ProjectCard from "~/components/card/ProjectCard.astro";
 3  import ViewAllButton from "~/components/ViewAllButton.astro";
 4  import type { Project } from "~/models/project.ts";
 5  
 6  interface Props {
 7  	projects: Project[];
 8  	title: string;
 9  	description: string;
10  	seeMoreUrl?: string | null | undefined;
11  }
12  
13  const { projects, title, description, seeMoreUrl } = Astro.props;
14  ---
15  
16  <section class="pt-6 md:pt-10">
17  	<div>
18  		<h2 id={title.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '') + '-heading'} class="text-2xl md:text-3xl font-bold font-display text-pink-950 tracking-wide pt-2">
19  			{title}
20  		</h2>
21  		<p class="text-xs md:text-base font-body text-pink-950/70 pt-2 pb-4">
22  			{description}
23  		</p>
24  	</div>
25  	<div
26  		class="relative grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-3 pb-4 card-tilt-odd"
27  	>
28  		{
29  			projects.map((project) => (
30  				<ProjectCard
31  					slug={project.slug}
32  					title={project.data.title}
33  					description={project.data.description}
34  					href={`/projects/${project.slug}`}
35  					stack={project.data.stack}
36  					hasImage={project.data.hasImage}
37  				/>
38  			))
39  		}
40  	</div>
41  	{
42  		typeof seeMoreUrl === "string" && (
43  			<ViewAllButton
44  				href={seeMoreUrl}
45  				label="View all projects"
46  				ariaLabel="View all projects"
47  			/>
48  		)
49  	}
50  </section>