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.

This commit is contained in:
2026-01-08 11:45:20 -03:00
parent 91925a9dea
commit 4d0b4d6ead
2 changed files with 85 additions and 2 deletions

View File

@@ -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>

View File

@@ -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>