Revamp main page layout: Integrate NewsCarousel and ProgramMiniCard components, update content to include news and program access, and enhance visual elements for the Secretaria de Esportes de Pernambuco.
This commit is contained in:
@@ -1,29 +1,37 @@
|
||||
<script lang="ts">
|
||||
import ProgramCard from '$lib/components/ProgramCard.svelte';
|
||||
import { enrollment2026, programs, programs2026Dek, programs2026Headline, results2025Summary } from '$lib/data/programs';
|
||||
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 acesso aos programas Bolsa Atleta, Bolsa Técnico e Time Pernambuco."
|
||||
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="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>
|
||||
<p class="mt-1 text-sm text-(--text)">
|
||||
Informações e acesso rápido aos programas institucionais.
|
||||
</p>
|
||||
<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="hidden items-center gap-3 sm:flex">
|
||||
@@ -37,106 +45,78 @@
|
||||
</header>
|
||||
|
||||
<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
|
||||
<section class="overflow-hidden rounded-3xl bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-10">
|
||||
<div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
|
||||
<div class="max-w-3xl">
|
||||
<h2 class="text-2xl font-bold tracking-tight text-(--text-strong) sm:text-3xl">
|
||||
Programas da Secretaria
|
||||
</h2>
|
||||
<p class="mt-2 text-base leading-relaxed text-(--text)">
|
||||
Selecione um programa para acessar a página com os links oficiais de <strong>inscrição</strong> e
|
||||
<strong>edital</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="pill">Links oficiais</span>
|
||||
<span class="pill">Inscrição e edital</span>
|
||||
<span class="pill">Nova aba</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-8 lg:grid-cols-[1fr_360px]">
|
||||
<section class="space-y-8">
|
||||
<NewsCarousel items={featuredNews} title="Notícias em destaque" />
|
||||
|
||||
<div class="mt-7 rounded-2xl bg-white/70 p-5 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Comunicado</p>
|
||||
<h3 class="mt-1 text-lg font-extrabold tracking-tight text-(--text-strong)">
|
||||
{programs2026Headline}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-(--text)">{programs2026Dek}</p>
|
||||
|
||||
<div class="mt-4 grid gap-3 sm:grid-cols-2">
|
||||
<div class="rounded-xl bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<p class="text-sm font-bold text-(--text-strong)">Período</p>
|
||||
<p class="mt-1 text-sm text-(--text)">
|
||||
De <strong>{enrollment2026.start}</strong> até <strong>{enrollment2026.end}</strong>.
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-(--text-muted)">
|
||||
Processo de inscrição exclusivamente online, conforme orientações disponíveis nos editais.
|
||||
</p>
|
||||
<section class="rounded-3xl 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="rounded-xl bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<p class="text-sm font-bold text-(--text-strong)">Documentação</p>
|
||||
<p class="mt-1 text-sm text-(--text)">
|
||||
Após o preenchimento do formulário eletrônico, atletas e técnicos devem anexar a documentação
|
||||
exigida na própria plataforma.
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-(--text-muted)">
|
||||
No Time PE, além do cadastro online, o envio da documentação segue procedimento específico
|
||||
descrito no edital.
|
||||
</p>
|
||||
<div class="mt-6 space-y-3">
|
||||
{#each news as item (item.slug)}
|
||||
<a
|
||||
href={`/noticias/${item.slug}`}
|
||||
class="group block rounded-2xl 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-full 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-full 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>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<blockquote class="mt-4 rounded-xl bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<p class="text-sm italic text-(--text)">
|
||||
“Os programas de incentivo ao esporte são ferramentas essenciais para garantir que atletas, paratletas
|
||||
e técnicos tenham condições de se dedicar aos treinamentos e às competições.”
|
||||
<aside class="space-y-6">
|
||||
<section class="rounded-3xl 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>
|
||||
<p class="mt-2 text-xs font-semibold text-(--text-muted)">
|
||||
Ivete Lacerda — Secretária de Esportes
|
||||
|
||||
<div class="mt-5 space-y-3">
|
||||
{#each programs as program (program.id)}
|
||||
<ProgramMiniCard {program} />
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="rounded-3xl bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8">
|
||||
<h3 class="text-base font-extrabold tracking-tight text-(--text-strong)">Sobre esta página</h3>
|
||||
<p class="mt-2 text-sm leading-relaxed text-(--text)">
|
||||
Conteúdo de notícias estático por enquanto. Depois você poderá ligar ao banco/CMS sem mudar o layout.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<div class="mt-4 space-y-2 text-sm text-(--text)">
|
||||
{#each results2025Summary as line (line)}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each programs as program (program.id)}
|
||||
<ProgramCard {program} />
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-10 grid gap-4 md:grid-cols-2">
|
||||
<div class="rounded-2xl bg-white/80 p-6 ring-1 ring-black/5">
|
||||
<h3 class="text-base font-bold text-(--text-strong)">Como participar</h3>
|
||||
<ul class="mt-3 space-y-2 text-sm text-(--text)">
|
||||
<li class="flex gap-2">
|
||||
<span aria-hidden="true" class="mt-0.5 text-(--text-muted)">1.</span>
|
||||
<span>Escolha o programa e leia o edital.</span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span aria-hidden="true" class="mt-0.5 text-(--text-muted)">2.</span>
|
||||
<span>Realize a inscrição no formulário oficial.</span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span aria-hidden="true" class="mt-0.5 text-(--text-muted)">3.</span>
|
||||
<span>Acompanhe comunicados e prazos conforme o edital.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl bg-white/80 p-6 ring-1 ring-black/5">
|
||||
<h3 class="text-base font-bold text-(--text-strong)">Atendimento e transparência</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-(--text)">
|
||||
Esta página reúne acessos para facilitar a participação. Para regras, documentos exigidos e
|
||||
cronogramas, consulte sempre o <strong>edital</strong> do programa.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="border-t border-black/5 bg-white/70 backdrop-blur">
|
||||
@@ -153,13 +133,11 @@
|
||||
/>
|
||||
<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 • Programas oficiais</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>
|
||||
<p class="text-xs text-(--text-muted)">© {new Date().getFullYear()} Governo de Pernambuco — SESP-PE.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user