Update project structure and styles: Refactor TypeScript configuration, enhance app type definitions, and redesign main page layout with new styles and components for Secretaria de Esportes de Pernambuco.

src/lib/components/ProgramCard.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Program } from '$lib/data/programs';
+
+	type Props = {
+		program: Program;
+	};
+
+	const { program }: Props = $props();
+
+	const accentClassByAccent = {
+		blue: 'ring-[color:var(--accent-blue)]/25 hover:ring-[color:var(--accent-blue)]/45',
+		yellow: 'ring-[color:var(--accent-yellow)]/25 hover:ring-[color:var(--accent-yellow)]/45',
+		green: 'ring-[color:var(--accent-green)]/25 hover:ring-[color:var(--accent-green)]/45',
+		red: 'ring-[color:var(--accent-red)]/25 hover:ring-[color:var(--accent-red)]/45'
+	} as const;
+</script>
+
+<a
+	href={`/${program.id}`}
+	class={`group relative block overflow-hidden rounded-2xl bg-white/90 p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:bg-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${accentClassByAccent[program.accent]}`}
+	aria-label={`Acessar página do programa ${program.name}`}
+>
+	<div class="flex items-start gap-4">
+		<div
+			class="grid h-16 w-16 shrink-0 place-items-center rounded-xl bg-(--surface-muted) ring-1 ring-black/5"
+		>
+			<img
+				src={program.brandImageSrc}
+				alt={`Logomarca ${program.name}`}
+				class="h-11 w-11 object-contain"
+				loading="lazy"
+				decoding="async"
+			/>
+		</div>
+
+		<div class="min-w-0">
+			<p class="text-base font-semibold tracking-tight text-(--text-strong)">
+				{program.name}
+			</p>
+			<p class="mt-1 text-sm leading-relaxed text-(--text)">{program.shortDescription}</p>
+		</div>
+	</div>
+
+	<div class="mt-5 flex items-center gap-2 text-sm font-semibold text-(--link)">
+		<span class="underline-offset-4 group-hover:underline">Acessar</span>
+		<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
+	</div>
+</a>
+

src/lib/components/ProgramPage.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { Program } from '$lib/data/programs';
+
+	type Props = {
+		program: Program;
+	};
+
+	const { program }: Props = $props();
+
+	const accentBgByAccent = {
+		blue: 'from-[color:var(--accent-blue)]/12',
+		yellow: 'from-[color:var(--accent-yellow)]/14',
+		green: 'from-[color:var(--accent-green)]/12',
+		red: 'from-[color:var(--accent-red)]/12'
+	} as const;
+
+	const accentButtonByAccent = {
+		blue: 'bg-[color:var(--accent-blue)] hover:bg-[color:var(--accent-blue)]/90 focus-visible:ring-[color:var(--accent-blue)]',
+		yellow:
+			'bg-[color:var(--accent-yellow)] text-slate-900 hover:bg-[color:var(--accent-yellow)]/90 focus-visible:ring-[color:var(--accent-yellow)]',
+		green: 'bg-[color:var(--accent-green)] hover:bg-[color:var(--accent-green)]/90 focus-visible:ring-[color:var(--accent-green)]',
+		red: 'bg-[color:var(--accent-red)] hover:bg-[color:var(--accent-red)]/90 focus-visible:ring-[color:var(--accent-red)]'
+	} as const;
+</script>
+
+<svelte:head>
+	<title>{program.name} | Secretaria de Esportes de Pernambuco</title>
+	<meta name="description" content={program.shortDescription} />
+</svelte:head>
+
+<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
+	<a
+		href="/"
+		class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
+	>
+		<span aria-hidden="true">←</span>
+		Voltar para a página inicial
+	</a>
+
+	<section class="mt-6 overflow-hidden rounded-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
+		<div
+			class={`bg-linear-to-b ${accentBgByAccent[program.accent]} to-transparent px-6 py-10 sm:px-10`}
+		>
+			<div class="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
+				<div class="min-w-0">
+					<div class="flex items-center gap-4">
+						<div
+							class="grid h-16 w-16 place-items-center rounded-2xl bg-white/90 ring-1 ring-black/5"
+						>
+							<img
+								src={program.brandImageSrc}
+								alt={`Logomarca ${program.name}`}
+								class="h-11 w-11 object-contain"
+								loading="eager"
+								decoding="async"
+							/>
+						</div>
+						<div>
+							<h1 class="text-2xl font-bold tracking-tight text-(--text-strong) sm:text-3xl">
+								{program.name}
+							</h1>
+							<p class="mt-1 text-sm text-(--text)">{program.shortDescription}</p>
+						</div>
+					</div>
+
+					<p class="mt-6 max-w-3xl text-base leading-relaxed text-(--text)">
+						{program.longDescription}
+					</p>
+				</div>
+
+				<div class="flex w-full flex-col gap-3 md:w-auto md:min-w-[240px]">
+					<a
+						href={program.signupUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						class={`inline-flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white ${accentButtonByAccent[program.accent]}`}
+					>
+						Inscrição
+						<span aria-hidden="true">↗</span>
+					</a>
+
+					<a
+						href={program.editalUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+					>
+						Edital
+						<span aria-hidden="true">↗</span>
+					</a>
+
+					<p class="text-center text-xs text-(--text-muted)">
+						Os links serão abertos em nova aba.
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</main>
+