Add lucide-svelte dependency and update components: Integrate lucide-svelte icons in various components, enhance layout with improved styling, and streamline navigation links for better user experience.

.vscode/settings.json

@@ -8,11 +8,7 @@
 			"pattern": "packages/*"
 		}
 	],
-	"eslint.validate": [
+	"eslint.validate": ["javascript", "typescript", "svelte"],
-		"javascript",
-		"typescript",
-		"svelte"
-	],
 	"eslint.options": {
 		"cache": true,
 		"cacheLocation": ".eslintcache"

bun.lock

@@ -4,6 +4,9 @@
   "workspaces": {
     "": {
       "name": "sesp-site",
+      "dependencies": {
+        "lucide-svelte": "^0.562.0",
+      },
       "devDependencies": {
         "@eslint/compat": "^1.4.0",
         "@eslint/js": "^9.39.1",
@@ -485,6 +488,8 @@
 
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
+    "lucide-svelte": ["lucide-svelte@0.562.0", "", { "peerDependencies": { "svelte": "^3 || ^4 || ^5.0.0-next.42" } }, "sha512-kSJDH/55lf0mun/o4nqWBXOcq0fWYzPeIjbTD97ywoeumAB9kWxtM06gC7oynqjtK3XhAljWSz5RafIzPEYIQA=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],

package.json

@@ -59,5 +59,8 @@
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"dependencies": {
+		"lucide-svelte": "^0.562.0"
+	}
 }

src/error.html

@@ -21,7 +21,15 @@
 
 			body {
 				margin: 0;
-				font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+				font-family:
+					ui-sans-serif,
+					system-ui,
+					-apple-system,
+					Segoe UI,
+					Roboto,
+					Helvetica,
+					Arial,
+					sans-serif;
 				color: var(--text);
 				background:
 					radial-gradient(1000px 500px at 10% 0%, rgba(31, 74, 134, 0.14), transparent 60%),
@@ -103,9 +111,7 @@
 			<div class="card">
 				<div class="kicker">Erro %sveltekit.status%</div>
 				<h1>%sveltekit.error.message%</h1>
-				<p>
+				<p>Se o problema persistir, volte para a página inicial e tente novamente mais tarde.</p>
-					Se o problema persistir, volte para a página inicial e tente novamente mais tarde.
-				</p>
 				<div class="actions">
 					<a class="primary" href="/">Ir para a página inicial</a>
 					<button class="secondary" type="button" onclick="location.reload()">Recarregar</button>
@@ -114,4 +120,3 @@
 		</div>
 	</body>
 </html>
-

src/lib/components/NewsCarousel.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import type { News } from '$lib/data/news';
+	import { ArrowRight, ChevronLeft, ChevronRight } from 'lucide-svelte';
 
 	type Props = {
 		items: News[];
@@ -41,27 +43,30 @@
 	}
 </script>
 
-<section aria-label={title} class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
+<section
+	aria-label={title}
+	class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5"
+>
 	<header class="flex items-center justify-between gap-3 px-6 py-5 sm:px-8">
 		<h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">{title}</h2>
 		<div class="flex items-center gap-2">
 			<button
 				type="button"
-				class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
+				class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) shadow-sm ring-1 ring-black/10 transition hover:bg-white focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
 				onclick={prev}
 				aria-label="Notícia anterior"
 				disabled={items.length < 2}
 			>
-				<span aria-hidden="true">←</span>
+				<ChevronLeft aria-hidden="true" class="h-4 w-4" />
 			</button>
 			<button
 				type="button"
-				class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
+				class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) shadow-sm ring-1 ring-black/10 transition hover:bg-white focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
 				onclick={next}
 				aria-label="Próxima notícia"
 				disabled={items.length < 2}
 			>
-				<span aria-hidden="true">→</span>
+				<ChevronRight aria-hidden="true" class="h-4 w-4" />
 			</button>
 		</div>
 	</header>
@@ -82,8 +87,8 @@
 		>
 			{#each items as item, i (item.slug)}
 				<a
-					href={`/noticias/${item.slug}`}
+					href={resolve(`/noticias/${item.slug}`)}
-					class={`group block overflow-hidden rounded-lg ring-1 ring-black/10 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${i === index ? '' : 'hidden'}`}
+					class={`group block overflow-hidden rounded-lg shadow-sm ring-1 ring-black/10 transition focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none ${i === index ? '' : 'hidden'}`}
 					aria-label={`Ler notícia: ${item.title}`}
 				>
 					<div class="relative">
@@ -105,8 +110,10 @@
 								aria-hidden="true"
 								class="h-56 w-full bg-linear-to-br from-[color:var(--accent-blue)]/15 via-white/40 to-[color:var(--accent-yellow)]/20 sm:h-64"
 							></div>
-							<div class="absolute inset-0 bg-linear-to-t from-black/75 via-black/35 to-black/0"></div>
+							<div
-							<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-7">
+								class="absolute inset-0 bg-linear-to-t from-black/75 via-black/35 to-black/0"
+							></div>
+							<div class="absolute right-0 bottom-0 left-0 p-6 sm:p-7">
 								<div class="flex flex-wrap items-center gap-2">
 									<span
 										class="rounded-lg bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
@@ -119,7 +126,9 @@
 										{new Date(item.date).toLocaleDateString('pt-BR')}
 									</span>
 								</div>
-								<p class="mt-3 text-xl font-extrabold tracking-tight text-white drop-shadow-sm sm:text-2xl">
+								<p
+									class="mt-3 text-xl font-extrabold tracking-tight text-white drop-shadow-sm sm:text-2xl"
+								>
 									{item.title}
 								</p>
 								<p class="mt-2 max-w-3xl text-sm leading-relaxed text-white/90 drop-shadow-sm">
@@ -129,7 +138,10 @@
 									class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-white drop-shadow-sm"
 								>
 									<span class="underline-offset-4 group-hover:underline">Ler notícia</span>
-									<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
+									<ArrowRight
+										aria-hidden="true"
+										class="h-4 w-4 transition group-hover:translate-x-0.5"
+									/>
 								</div>
 							</div>
 						{/if}
@@ -151,4 +163,3 @@
 		</div>
 	{/if}
 </section>
-

src/lib/components/ProgramCard.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import type { Program } from '$lib/data/programs';
+	import { ArrowRight } from 'lucide-svelte';
 
 	type Props = {
 		program: Program;
@@ -16,8 +18,8 @@
 </script>
 
 <a
-	href={`/${program.id}`}
+	href={resolve(`/${program.id}`)}
-	class={`group relative block overflow-hidden rounded-lg 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]}`}
+	class={`group relative block overflow-hidden rounded-lg 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:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none ${accentClassByAccent[program.accent]}`}
 	aria-label={`Acessar página do programa ${program.name}`}
 >
 	<div class="flex items-start gap-4">
@@ -43,7 +45,6 @@
 
 	<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>
+		<ArrowRight aria-hidden="true" class="h-4 w-4 transition group-hover:translate-x-0.5" />
 	</div>
 </a>
-

src/lib/components/ProgramMiniCard.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import type { Program } from '$lib/data/programs';
+	import { ArrowRight } from 'lucide-svelte';
 
 	type Props = {
 		program: Program;
@@ -15,12 +17,35 @@
 	} as const;
 </script>
 
-<a
+{#if program.cardImageSrc}
-	href={`/${program.id}`}
+	<a
-	class="group flex items-start gap-3 rounded-lg bg-white/80 p-4 shadow-sm ring-1 ring-black/5 transition hover:bg-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
+		href={resolve(`/${program.id}`)}
+		class="group relative block h-32 overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
 		aria-label={`Acessar programa ${program.name}`}
->
+	>
-	<div class="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-(--surface-muted) ring-1 ring-black/5">
+		<img
+			src={program.cardImageSrc}
+			alt=""
+			aria-hidden="true"
+			class="absolute inset-0 h-full w-full object-cover"
+			loading="lazy"
+			decoding="async"
+		/>
+		<div
+			aria-hidden="true"
+			class="pointer-events-none absolute inset-0 bg-black/0 transition group-hover:bg-black/10"
+		></div>
+		<span class="sr-only">{program.name}</span>
+	</a>
+{:else}
+	<a
+		href={resolve(`/${program.id}`)}
+		class="group flex items-start gap-3 rounded-lg bg-white/80 p-6 shadow-sm ring-1 ring-black/5 transition hover:bg-white hover:shadow-md focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
+		aria-label={`Acessar programa ${program.name}`}
+	>
+		<div
+			class="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-(--surface-muted) ring-1 ring-black/5"
+		>
 			<img
 				src={program.brandImageSrc}
 				alt={`Logomarca ${program.name}`}
@@ -32,17 +57,17 @@
 
 		<div class="min-w-0 flex-1">
 			<div class="flex items-center gap-2">
-			<span
+				<span aria-hidden="true" class={`h-2 w-2 rounded-full ${accentDotByAccent[program.accent]}`}
-				aria-hidden="true"
-				class={`h-2 w-2 rounded-full ${accentDotByAccent[program.accent]}`}
 				></span>
 				<p class="truncate text-sm font-bold text-(--text-strong)">{program.name}</p>
 			</div>
-		<p class="mt-1 line-clamp-2 text-xs leading-relaxed text-(--text)">{program.shortDescription}</p>
+			<p class="mt-1 line-clamp-2 text-xs leading-relaxed text-(--text)">
+				{program.shortDescription}
+			</p>
 			<div class="mt-2 inline-flex items-center gap-2 text-xs font-semibold text-(--link)">
 				<span class="underline-offset-4 group-hover:underline">Abrir</span>
-			<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
+				<ArrowRight aria-hidden="true" class="h-4 w-4 transition group-hover:translate-x-0.5" />
 			</div>
 		</div>
-</a>
+	</a>
-
+{/if}

src/lib/components/ProgramPage.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { enrollment2026 } from '$lib/data/programs';
 	import type { Program } from '$lib/data/programs';
+	import { ArrowLeft, ArrowUpRight } from 'lucide-svelte';
 
 	type Props = {
 		program: Program;
@@ -19,7 +21,8 @@
 		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)]',
+		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>
@@ -29,12 +32,12 @@
 	<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">
+<main class="mx-auto w-full max-w-6xl px-4 pt-10 pb-14 sm:px-6 sm:pt-14">
 	<a
-		href="/"
+		href={resolve('/')}
-		class="inline-flex items-center gap-2 rounded-md 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)"
+		class="inline-flex items-center gap-2 rounded-md px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
 	>
-		<span aria-hidden="true">←</span>
+		<ArrowLeft aria-hidden="true" class="h-4 w-4" />
 		Voltar para a página inicial
 	</a>
 
@@ -70,31 +73,34 @@
 
 					<div class="mt-6 grid gap-3 sm:grid-cols-2">
 						<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
-							<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
+							<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
 								Inscrições 2026
 							</p>
 							<p class="mt-2 text-sm text-(--text)">
-								De <strong>{enrollment2026.start}</strong> até <strong>{enrollment2026.end}</strong>.
+								De <strong>{enrollment2026.start}</strong> até
+								<strong>{enrollment2026.end}</strong>.
 							</p>
 							<p class="mt-2 text-xs text-(--text-muted)">Exclusivamente online.</p>
 						</div>
 
 						<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
-							<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Quem pode</p>
+							<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
+								Quem pode
+							</p>
 							<p class="mt-2 text-sm text-(--text)">{program.eligibility}</p>
 						</div>
 					</div>
 
 					<div class="mt-3 grid gap-3 sm:grid-cols-2">
 						<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
-							<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
+							<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
 								Como funciona
 							</p>
 							<p class="mt-2 text-sm leading-relaxed text-(--text)">{program.signupProcess}</p>
 						</div>
 
 						<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
-							<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
+							<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
 								Benefícios
 							</p>
 							<ul class="mt-2 space-y-2 text-sm text-(--text)">
@@ -111,31 +117,27 @@
 
 				<div class="flex w-full flex-col gap-3 md:w-auto md:min-w-[240px]">
 					<a
-						href={program.signupUrl}
+						href={'https:' + program.signupUrl.slice(6)}
 						target="_blank"
 						rel="noopener noreferrer"
-						class={`inline-flex items-center justify-center gap-2 rounded-md 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]}`}
+						class={`inline-flex items-center justify-center gap-2 rounded-md px-4 py-3 text-sm font-bold text-white shadow-sm transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none ${accentButtonByAccent[program.accent]}`}
 					>
 						Inscrição
-						<span aria-hidden="true">↗</span>
+						<ArrowUpRight aria-hidden="true" class="h-4 w-4" />
 					</a>
-
 					<a
-						href={program.editalUrl}
+						href={'https:' + program.editalUrl.slice(6)}
 						target="_blank"
 						rel="noopener noreferrer"
-						class="inline-flex items-center justify-center gap-2 rounded-md 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"
+						class="inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-3 text-sm font-bold text-(--text-strong) shadow-sm ring-1 ring-black/10 transition hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
 					>
 						Edital
-						<span aria-hidden="true">↗</span>
+						<ArrowUpRight aria-hidden="true" class="h-4 w-4" />
 					</a>
 
-					<p class="text-center text-xs text-(--text-muted)">
+					<p class="text-center text-xs text-(--text-muted)">Os links serão abertos em nova aba.</p>
-						Os links serão abertos em nova aba.
-					</p>
 				</div>
 			</div>
 		</div>
 	</section>
 </main>
-

src/lib/data/news.ts

@@ -12,14 +12,15 @@ export type News = {
 export const news: News[] = [
 	{
 		slug: 'inscricoes-programas-2026',
-		title: 'Secretaria de Esportes abre inscrições para Bolsa Atleta, Bolsa Técnico e Time Pernambuco 2026',
+		title:
+			'Secretaria de Esportes abre inscrições para Bolsa Atleta, Bolsa Técnico e Time Pernambuco 2026',
 		dek: 'Processo de inscrição é exclusivamente online e segue até 5 de fevereiro.',
 		date: '2026-01-02',
 		category: 'Programas',
 		featured: true,
 		imageSrc: '/brand/imageminscricoesabertas.png',
 		body: [
-			'As inscrições para os programas Bolsa Atleta, Bolsa Técnico e Time Pernambuco 2026 estão abertas.',
+			'As inscrições para os programas Bolsa Atleta, Bolsa Técnico e Time Pernambuco 2026 estão abertas.'
 		]
 	},
 	{
@@ -29,7 +30,7 @@ export const news: News[] = [
 		date: '2025-12-18',
 		category: 'Resultados',
 		body: [
-			'Em 2025, os programas de incentivo ao esporte alcançaram um número recorde de beneficiados.',
+			'Em 2025, os programas de incentivo ao esporte alcançaram um número recorde de beneficiados.'
 		]
 	},
 	{
@@ -39,7 +40,7 @@ export const news: News[] = [
 		date: '2026-01-03',
 		category: 'Comunicados',
 		body: [
-			'Após preencher o formulário eletrônico, é necessário anexar a documentação exigida na plataforma.',
+			'Após preencher o formulário eletrônico, é necessário anexar a documentação exigida na plataforma.'
 		]
 	},
 	{
@@ -48,9 +49,7 @@ export const news: News[] = [
 		dek: 'Reunimos respostas rápidas para as principais perguntas sobre os programas.',
 		date: '2026-01-05',
 		category: 'Serviço',
-		body: [
+		body: ['Veja perguntas e respostas sobre inscrição, documentos, prazos e acompanhamento.']
-			'Veja perguntas e respostas sobre inscrição, documentos, prazos e acompanhamento.',
-		]
 	}
 ];
 
@@ -61,4 +60,3 @@ export function getNews(slug: string): News {
 	if (!item) throw new Error(`Notícia não encontrada: ${slug}`);
 	return item;
 }
-

src/lib/data/programs.ts

@@ -25,6 +25,7 @@ export type Program = {
 	benefits: string[];
 	signupProcess: string;
 	brandImageSrc: string;
+	cardImageSrc?: string;
 	accent: 'blue' | 'yellow' | 'green' | 'red';
 	signupUrl: string;
 	editalUrl: string;
@@ -47,10 +48,10 @@ export const programs: Program[] = [
 		signupProcess:
 			'Inscrição exclusivamente online. Após preencher o formulário eletrônico, anexe a documentação exigida na própria plataforma, conforme orientações do edital.',
 		brandImageSrc: '/brand/bolsa-atleta.png',
+		cardImageSrc: '/images/bolsa-atleta-card.png',
 		accent: 'yellow',
 		signupUrl: 'https://forms.gle/2iJw8vtLsCrjvrmD6',
-		editalUrl:
+		editalUrl: 'https://drive.google.com/file/d/14zc13QfHC1mw6d6GFZJIJNNc-JgadsfA/view?usp=sharing'
-			'https://drive.google.com/file/d/14zc13QfHC1mw6d6GFZJIJNNc-JgadsfA/view?usp=sharing'
 	},
 	{
 		id: 'bolsa-tecnico',
@@ -68,10 +69,10 @@ export const programs: Program[] = [
 		signupProcess:
 			'Inscrição exclusivamente online. Após preencher o formulário eletrônico, anexe a documentação exigida na própria plataforma, conforme orientações do edital.',
 		brandImageSrc: '/brand/bolsa-tecnico.png',
+		cardImageSrc: '/images/bolsa-tecnico-card.png',
 		accent: 'blue',
 		signupUrl: 'https://forms.gle/r9qC32yNEAFsyg4s7',
-		editalUrl:
+		editalUrl: 'https://drive.google.com/file/d/1mWQUPvsjmzp_glTcbJAY3F6k46VUJZiL/view?usp=sharing'
-			'https://drive.google.com/file/d/1mWQUPvsjmzp_glTcbJAY3F6k46VUJZiL/view?usp=sharing'
 	},
 	{
 		id: 'time-pe',
@@ -89,10 +90,10 @@ export const programs: Program[] = [
 		signupProcess:
 			'No Time PE, além do cadastro online, o envio da documentação segue o procedimento específico descrito no edital.',
 		brandImageSrc: '/brand/time-pe.png',
+		cardImageSrc: '/images/time-pe-card.png',
 		accent: 'green',
 		signupUrl: 'https://forms.gle/BDp5ZD8QkhVL1CDu5',
-		editalUrl:
+		editalUrl: 'https://drive.google.com/file/d/1XHvoUL92IGzItG-4WaF_Ih-whgPpdoEO/view?usp=sharing'
-			'https://drive.google.com/file/d/1XHvoUL92IGzItG-4WaF_Ih-whgPpdoEO/view?usp=sharing'
 	}
 ];
 
@@ -101,4 +102,3 @@ export function getProgram(id: ProgramId): Program {
 	if (!program) throw new Error(`Programa não encontrado: ${id}`);
 	return program;
 }
-

src/routes/+error.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 
 	const isNotFound = $derived(page.status === 404);
 	const isServerError = $derived(page.status >= 500);
 
-	const title = $derived(isNotFound ? 'Página não encontrada' : 'Não foi possível carregar esta página');
+	const title = $derived(
+		isNotFound ? 'Página não encontrada' : 'Não foi possível carregar esta página'
+	);
 	const description = $derived(
 		isNotFound
 			? 'O endereço pode estar incorreto, ou a página foi movida/removida.'
@@ -13,7 +16,9 @@
 
 	// Evita expor detalhes quando o erro é inesperado (SvelteKit usa "Internal Error").
 	const safeDetails = $derived(
-		!isNotFound && page.error?.message && page.error.message !== 'Internal Error' ? page.error.message : null
+		!isNotFound && page.error?.message && page.error.message !== 'Internal Error'
+			? page.error.message
+			: null
 	);
 
 	function goBack() {
@@ -31,10 +36,10 @@
 </svelte:head>
 
 <div class="min-h-dvh bg-(--page-bg)">
-	<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
+	<main class="mx-auto w-full max-w-6xl px-4 pt-10 pb-14 sm:px-6 sm:pt-14">
 		<section class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
 			<div class="px-6 py-10 sm:px-10 sm:py-12">
-				<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
+				<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
 					Erro {page.status}
 				</p>
 				<h1 class="mt-2 text-2xl font-extrabold tracking-tight text-(--text-strong) sm:text-3xl">
@@ -46,15 +51,17 @@
 
 				{#if safeDetails}
 					<div class="mt-5 rounded-lg bg-white/70 p-4 ring-1 ring-black/5">
-						<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Detalhes</p>
+						<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
+							Detalhes
+						</p>
 						<p class="mt-2 text-sm text-(--text)">{safeDetails}</p>
 					</div>
 				{/if}
 
 				<div class="mt-8 flex flex-wrap items-center gap-3">
 					<a
-						href="/"
+						href={resolve('/')}
-						class="inline-flex items-center justify-center rounded-md bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+						class="inline-flex items-center justify-center rounded-md bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
 					>
 						Ir para a página inicial
 					</a>
@@ -62,7 +69,7 @@
 					<button
 						type="button"
 						onclick={goBack}
-						class="inline-flex items-center justify-center rounded-md 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"
+						class="inline-flex items-center justify-center rounded-md bg-white px-4 py-3 text-sm font-bold text-(--text-strong) shadow-sm ring-1 ring-black/10 transition hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
 					>
 						Voltar
 					</button>
@@ -71,7 +78,7 @@
 						<button
 							type="button"
 							onclick={reload}
-							class="inline-flex items-center justify-center rounded-md 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"
+							class="inline-flex items-center justify-center rounded-md bg-white px-4 py-3 text-sm font-bold text-(--text-strong) shadow-sm ring-1 ring-black/10 transition hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
 						>
 							Tentar novamente
 						</button>
@@ -79,14 +86,13 @@
 				</div>
 
 				<div class="mt-8 rounded-lg bg-white/70 p-5 ring-1 ring-black/5">
-					<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Dica</p>
+					<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">Dica</p>
 					<p class="mt-2 text-sm text-(--text)">
-						Se você chegou aqui por um link antigo, volte para a página inicial e escolha o programa no card
+						Se você chegou aqui por um link antigo, volte para a página inicial e escolha o programa
-						correspondente.
+						no card correspondente.
 					</p>
 				</div>
 			</div>
 		</section>
 	</main>
 </div>
-

src/routes/+layout.svelte

@@ -1,7 +1,73 @@
 <script lang="ts">
 	import './layout.css';
+	import { resolve } from '$app/paths';
 
 	const { children } = $props();
 </script>
 
-{@render children()}
+<div class="flex min-h-dvh flex-col bg-(--page-bg)">
+	<header class="border-b border-black/5 bg-white/70 backdrop-blur">
+		<div class="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-5 sm:px-6">
+			<div class="flex min-w-0 items-center gap-4">
+				<img
+					src="/brand/Logo_secretaria_esportes_.png"
+					alt="Secretaria de Esportes de Pernambuco"
+					class="h-28 w-auto object-contain"
+					loading="eager"
+					decoding="async"
+				/>
+				<div class="min-w-0">
+					<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
+						Governo de Pernambuco
+					</p>
+					<h1 class="mt-1 text-xl font-extrabold tracking-tight text-(--text-strong) sm:text-2xl">
+						Secretaria de Esportes de Pernambuco
+					</h1>
+				</div>
+			</div>
+
+			<div class="flex items-center gap-3">
+				<a
+					href={resolve('/ouvidoria')}
+					class="inline-flex items-center rounded-lg bg-white/80 px-3 py-2 text-xs font-extrabold tracking-wide text-(--text-strong) ring-1 ring-black/10 transition hover:bg-white focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
+				>
+					OUVIDORIA
+				</a>
+
+				<span
+					class="hidden rounded-lg bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5 sm:inline-flex"
+				>
+					SESP-PE
+				</span>
+			</div>
+		</div>
+	</header>
+
+	<div class="flex-1">
+		{@render children()}
+	</div>
+
+	<footer class="border-t border-black/5 bg-white/70 backdrop-blur">
+		<div
+			class="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-10 sm:px-6 md:flex-row md:items-center md:justify-between"
+		>
+			<div class="flex items-center gap-4">
+				<img
+					src="/brand/gov-pe.png"
+					alt="Logomarca do Governo de Pernambuco"
+					class="h-12 w-auto object-contain"
+					loading="lazy"
+					decoding="async"
+				/>
+				<div>
+					<p class="text-sm font-bold text-(--text-strong)">Secretaria de Esportes de Pernambuco</p>
+					<p class="text-xs text-(--text-muted)">Página institucional • Notícias e programas</p>
+				</div>
+			</div>
+
+			<p class="text-xs text-(--text-muted)">
+				© {new Date().getFullYear()} Governo de Pernambuco — SESP-PE.
+			</p>
+		</div>
+	</footer>
+</div>

src/routes/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
+	import { ArrowRight } from 'lucide-svelte';
 	import NewsCarousel from '$lib/components/NewsCarousel.svelte';
 	import ProgramMiniCard from '$lib/components/ProgramMiniCard.svelte';
 	import { featuredNews, news } from '$lib/data/news';
@@ -13,45 +15,7 @@
 	/>
 </svelte:head>
 
-<div class="min-h-dvh bg-(--page-bg)">
+<main class="mx-auto w-full max-w-6xl px-4 pt-10 pb-14 sm:px-6 sm:pt-14">
-	<header class="border-b border-black/5 bg-white/70 backdrop-blur">
-		<div class="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-5 sm:px-6">
-			<div class="flex min-w-0 items-center gap-4">
-				<img
-					src="/brand/gov-pe.png"
-					alt="Governo de Pernambuco"
-					class="h-10 w-auto object-contain"
-					loading="eager"
-					decoding="async"
-				/>
-				<div class="min-w-0">
-					<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
-						Governo de Pernambuco
-					</p>
-					<h1 class="mt-1 text-xl font-extrabold tracking-tight text-(--text-strong) sm:text-2xl">
-						Secretaria de Esportes de Pernambuco
-					</h1>
-				</div>
-			</div>
-
-			<div class="flex items-center gap-3">
-				<a
-					href="/ouvidoria"
-					class="inline-flex items-center rounded-lg bg-white/80 px-3 py-2 text-xs font-extrabold tracking-wide text-(--text-strong) ring-1 ring-black/10 transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
-				>
-					OUVIDORIA
-				</a>
-
-				<span
-					class="hidden rounded-lg bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5 sm:inline-flex"
-				>
-					SESP-PE
-				</span>
-			</div>
-		</div>
-	</header>
-
-	<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
 	<div class="grid gap-8 lg:grid-cols-[1fr_360px]">
 		<section class="space-y-8">
 			<NewsCarousel items={featuredNews} title="Notícias em destaque" />
@@ -60,9 +24,7 @@
 				<div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
 					<div>
 						<h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">Notícias</h2>
-							<p class="mt-1 text-sm text-(--text)">
+						<p class="mt-1 text-sm text-(--text)">Acompanhe comunicados, resultados e novidades.</p>
-								Acompanhe comunicados, resultados e novidades.
-							</p>
 					</div>
 					<span class="pill">Atualizado</span>
 				</div>
@@ -70,8 +32,8 @@
 				<div class="mt-6 space-y-3">
 					{#each news as item (item.slug)}
 						<a
-								href={`/noticias/${item.slug}`}
+							href={resolve(`/noticias/${item.slug}`)}
-								class="group block rounded-lg bg-white/80 p-5 shadow-sm ring-1 ring-black/5 transition hover:bg-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
+							class="group block rounded-lg bg-white/80 p-5 shadow-sm ring-1 ring-black/5 transition hover:bg-white hover:shadow-md focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
 							aria-label={`Abrir notícia: ${item.title}`}
 						>
 							<div class="flex flex-wrap items-center gap-2">
@@ -94,7 +56,10 @@
 
 							<div class="mt-3 inline-flex items-center gap-2 text-sm font-semibold text-(--link)">
 								<span class="underline-offset-4 group-hover:underline">Ler</span>
-									<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
+								<ArrowRight
+									aria-hidden="true"
+									class="h-4 w-4 transition group-hover:translate-x-0.5"
+								/>
 							</div>
 						</a>
 					{/each}
@@ -117,27 +82,4 @@
 			</section>
 		</aside>
 	</div>
-	</main>
+</main>
-
-	<footer class="border-t border-black/5 bg-white/70 backdrop-blur">
-		<div
-			class="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-10 sm:px-6 md:flex-row md:items-center md:justify-between"
-		>
-			<div class="flex items-center gap-4">
-				<img
-					src="/brand/gov-pe.png"
-					alt="Logomarca do Governo de Pernambuco"
-					class="h-12 w-auto object-contain"
-					loading="lazy"
-					decoding="async"
-				/>
-				<div>
-					<p class="text-sm font-bold text-(--text-strong)">Secretaria de Esportes de Pernambuco</p>
-					<p class="text-xs text-(--text-muted)">Página institucional • Notícias e programas</p>
-				</div>
-			</div>
-
-			<p class="text-xs text-(--text-muted)">© {new Date().getFullYear()} Governo de Pernambuco — SESP-PE.</p>
-		</div>
-	</footer>
-</div>

src/routes/bolsa-atleta/+page.svelte

@@ -6,4 +6,3 @@
 </script>
 
 <ProgramPage {program} />
-

src/routes/bolsa-tecnico/+page.svelte

@@ -6,4 +6,3 @@
 </script>
 
 <ProgramPage {program} />
-

src/routes/noticias/[slug]/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import type { PageData } from './$types';
+	import { ArrowLeft } from 'lucide-svelte';
 
 	type Props = {
 		data: PageData;
@@ -13,12 +15,12 @@
 	<meta name="description" content={data.item.dek} />
 </svelte:head>
 
-<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
+<main class="mx-auto w-full max-w-6xl px-4 pt-10 pb-14 sm:px-6 sm:pt-14">
 	<a
-		href="/"
+		href={resolve('/')}
-		class="inline-flex items-center gap-2 rounded-md 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)"
+		class="inline-flex items-center gap-2 rounded-md px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
 	>
-		<span aria-hidden="true">←</span>
+		<ArrowLeft aria-hidden="true" class="h-4 w-4" />
 		Voltar para a página inicial
 	</a>
 
@@ -29,7 +31,7 @@
 				class="h-56 w-full bg-linear-to-br from-(--accent-blue)/15 via-white/40 to-(--accent-yellow)/20 sm:h-72"
 			></div>
 			<div class="absolute inset-0 bg-linear-to-t from-black/30 via-black/0 to-black/0"></div>
-			<div class="absolute bottom-0 left-0 right-0 px-6 py-6 sm:px-10 sm:py-10">
+			<div class="absolute right-0 bottom-0 left-0 px-6 py-6 sm:px-10 sm:py-10">
 				<div class="flex flex-wrap items-center gap-2">
 					<span
 						class="rounded-lg bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
@@ -70,4 +72,3 @@
 		</div>
 	</section>
 </main>
-

src/routes/noticias/[slug]/+page.ts

@@ -10,4 +10,3 @@ export const load: PageLoad = ({ params }) => {
 		throw error(404, 'Notícia não encontrada');
 	}
 };
-

src/routes/ouvidoria/+page.svelte

@@ -1,3 +1,8 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { ArrowLeft } from 'lucide-svelte';
+</script>
+
 <svelte:head>
 	<title>Ouvidoria | Secretaria de Esportes de Pernambuco</title>
 	<meta
@@ -6,12 +11,12 @@
 	/>
 </svelte:head>
 
-<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
+<main class="mx-auto w-full max-w-6xl px-4 pt-10 pb-14 sm:px-6 sm:pt-14">
 	<a
-		href="/"
+		href={resolve('/')}
-		class="inline-flex items-center gap-2 rounded-md 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)"
+		class="inline-flex items-center gap-2 rounded-md px-2 py-1 text-sm font-semibold text-(--link) hover:bg-white/70 focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:outline-none"
 	>
-		<span aria-hidden="true">←</span>
+		<ArrowLeft aria-hidden="true" class="h-4 w-4" />
 		Voltar para a página inicial
 	</a>
 
@@ -40,7 +45,7 @@
 					<p class="mt-2 text-sm text-(--text)">
 						<a
 							href="mailto:ouvidoria.esportes@esportes.pe.gov.br"
-							class="font-semibold text-(--link) underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+							class="font-semibold text-(--link) underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
 						>
 							ouvidoria.esportes@esportes.pe.gov.br
 						</a>
@@ -55,7 +60,9 @@
 
 				<div class="mt-3 grid gap-3 sm:grid-cols-2">
 					<div>
-						<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Endereço</p>
+						<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
+							Endereço
+						</p>
 						<p class="mt-2 text-sm text-(--text)">Rua Alm. Nelson Fernandes S/N</p>
 						<p class="mt-1 text-sm text-(--text)">
 							Prédio sede do Parque Esportivo Santos Dumont (térreo)
@@ -63,14 +70,13 @@
 					</div>
 
 					<div>
-						<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Horário</p>
+						<p class="text-xs font-semibold tracking-widest text-(--text-muted) uppercase">
-						<p class="mt-2 text-sm text-(--text)">
+							Horário
-							Dia úteis das 09 às 11:30 e das 14 às 16:30
 						</p>
+						<p class="mt-2 text-sm text-(--text)">Dia úteis das 09 às 11:30 e das 14 às 16:30</p>
 					</div>
 				</div>
 			</section>
 		</div>
 	</section>
 </main>
-

src/routes/time-pe/+page.svelte

@@ -6,4 +6,3 @@
 </script>
 
 <ProgramPage {program} />
-

static/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from "svelte-adapter-bun";
+import adapter from 'svelte-adapter-bun';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */