sesp-site/src/routes/+page.svelte

<script lang="ts">
	import NewsCarousel from '$lib/components/NewsCarousel.svelte';
	import ProgramMiniCard from '$lib/components/ProgramMiniCard.svelte';
	import { featuredNews, news } from '$lib/data/news';
	import { programs } from '$lib/data/programs';
</script>

<svelte:head>
	<title>Secretaria de Esportes de Pernambuco</title>
	<meta
		name="description"
		content="Página institucional da Secretaria de Esportes de Pernambuco (SESP-PE) com notícias e acesso aos programas Bolsa Atleta, Bolsa Técnico e Time Pernambuco."
	/>
</svelte:head>

<div class="min-h-dvh 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/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" />

				<section class="rounded-lg bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8">
					<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)">
								Acompanhe comunicados, resultados e novidades.
							</p>
						</div>
						<span class="pill">Atualizado</span>
					</div>

					<div class="mt-6 space-y-3">
						{#each news as item (item.slug)}
							<a
								href={`/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)"
								aria-label={`Abrir notícia: ${item.title}`}
							>
								<div class="flex flex-wrap items-center gap-2">
									<span
										class="rounded-lg bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
									>
										{item.category}
									</span>
									<span
										class="rounded-lg bg-white/80 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
									>
										{new Date(item.date).toLocaleDateString('pt-BR')}
									</span>
								</div>

								<p class="mt-3 text-base font-extrabold tracking-tight text-(--text-strong)">
									{item.title}
								</p>
								<p class="mt-1 text-sm leading-relaxed text-(--text)">{item.dek}</p>

								<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>
								</div>
							</a>
						{/each}
					</div>
				</section>
			</section>

			<aside class="space-y-6">
				<section class="rounded-lg bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8">
					<h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">Programas</h2>
					<p class="mt-1 text-sm text-(--text)">
						Acesso rápido aos links oficiais de inscrição e edital.
					</p>

					<div class="mt-5 space-y-3">
						{#each programs as program (program.id)}
							<ProgramMiniCard {program} />
						{/each}
					</div>
				</section>
			</aside>
		</div>
	</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>