From 4d0b4d6ead1a34aee8de3666ba2702d4ffd8931b Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Thu, 8 Jan 2026 11:45:20 -0300
Subject: [PATCH] Update layout and styling in +page.svelte: Replace hidden div
 with a flex container for improved visibility of the OUVIDORIA link, and
 adjust the SESP-PE span to be conditionally displayed on larger screens.

---
 src/routes/+page.svelte           | 11 ++++-
 src/routes/ouvidoria/+page.svelte | 76 +++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/ouvidoria/+page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f2348b3..dad1264 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -34,9 +34,16 @@
 				</div>
 			</div>
 
-			<div class="hidden items-center gap-3 sm:flex">
+			<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="rounded-lg bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
+					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>
diff --git a/src/routes/ouvidoria/+page.svelte b/src/routes/ouvidoria/+page.svelte
new file mode 100644
index 0000000..f934949
--- /dev/null
+++ b/src/routes/ouvidoria/+page.svelte
@@ -0,0 +1,76 @@
+<svelte:head>
+	<title>Ouvidoria | Secretaria de Esportes de Pernambuco</title>
+	<meta
+		name="description"
+		content="Canal de atendimento da Ouvidoria da Secretaria Estadual de Esportes (SESP-PE)."
+	/>
+</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-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)"
+	>
+		<span aria-hidden="true">←</span>
+		Voltar para a página inicial
+	</a>
+
+	<section class="mt-6 overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
+		<div class="bg-linear-to-b from-(--accent-blue)/12 to-transparent px-6 py-10 sm:px-10">
+			<h1 class="text-2xl font-extrabold tracking-tight text-(--text-strong) sm:text-3xl">
+				Ouvidoria
+			</h1>
+			<p class="mt-3 max-w-4xl text-base leading-relaxed text-(--text)">
+				A Ouvidoria da Secretaria Estadual de Esportes - SESP é o setor responsável por acolher
+				manifestações, tais como solicitações, sugestões, elogios, reclamações e denúncias
+				construindo e mantendo um canal de transparência e comunicação entre o usuário e a gestão
+				pública.
+			</p>
+		</div>
+
+		<div class="px-6 py-8 sm:px-10">
+			<div class="grid gap-4 sm:grid-cols-2">
+				<section class="rounded-lg bg-white/80 p-5 ring-1 ring-black/5">
+					<h2 class="text-sm font-extrabold tracking-tight text-(--text-strong)">Ouvidor</h2>
+					<p class="mt-2 text-sm text-(--text)">Francisco de Assis Vidal</p>
+				</section>
+
+				<section class="rounded-lg bg-white/80 p-5 ring-1 ring-black/5">
+					<h2 class="text-sm font-extrabold tracking-tight text-(--text-strong)">E-mail</h2>
+					<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"
+						>
+							ouvidoria.esportes@esportes.pe.gov.br
+						</a>
+					</p>
+				</section>
+			</div>
+
+			<section class="mt-4 rounded-lg bg-white/80 p-5 ring-1 ring-black/5">
+				<h2 class="text-sm font-extrabold tracking-tight text-(--text-strong)">
+					Atendimento presencial
+				</h2>
+
+				<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="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)
+						</p>
+					</div>
+
+					<div>
+						<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Horário</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>
+