Update project structure and styles: Refactor TypeScript configuration, enhance app type definitions, and redesign main page layout with new styles and components for Secretaria de Esportes de Pernambuco.
This commit is contained in:
3
src/app.d.ts
vendored
3
src/app.d.ts
vendored
@@ -1,3 +1,6 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
|
||||
49
src/lib/components/ProgramCard.svelte
Normal file
49
src/lib/components/ProgramCard.svelte
Normal file
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import type { Program } from '$lib/data/programs';
|
||||
|
||||
type Props = {
|
||||
program: Program;
|
||||
};
|
||||
|
||||
const { program }: Props = $props();
|
||||
|
||||
const accentClassByAccent = {
|
||||
blue: 'ring-[color:var(--accent-blue)]/25 hover:ring-[color:var(--accent-blue)]/45',
|
||||
yellow: 'ring-[color:var(--accent-yellow)]/25 hover:ring-[color:var(--accent-yellow)]/45',
|
||||
green: 'ring-[color:var(--accent-green)]/25 hover:ring-[color:var(--accent-green)]/45',
|
||||
red: 'ring-[color:var(--accent-red)]/25 hover:ring-[color:var(--accent-red)]/45'
|
||||
} as const;
|
||||
</script>
|
||||
|
||||
<a
|
||||
href={`/${program.id}`}
|
||||
class={`group relative block overflow-hidden rounded-2xl 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]}`}
|
||||
aria-label={`Acessar página do programa ${program.name}`}
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
class="grid h-16 w-16 shrink-0 place-items-center rounded-xl bg-(--surface-muted) ring-1 ring-black/5"
|
||||
>
|
||||
<img
|
||||
src={program.brandImageSrc}
|
||||
alt={`Logomarca ${program.name}`}
|
||||
class="h-11 w-11 object-contain"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0">
|
||||
<p class="text-base font-semibold tracking-tight text-(--text-strong)">
|
||||
{program.name}
|
||||
</p>
|
||||
<p class="mt-1 text-sm leading-relaxed text-(--text)">{program.shortDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
100
src/lib/components/ProgramPage.svelte
Normal file
100
src/lib/components/ProgramPage.svelte
Normal file
@@ -0,0 +1,100 @@
|
||||
<script lang="ts">
|
||||
import type { Program } from '$lib/data/programs';
|
||||
|
||||
type Props = {
|
||||
program: Program;
|
||||
};
|
||||
|
||||
const { program }: Props = $props();
|
||||
|
||||
const accentBgByAccent = {
|
||||
blue: 'from-[color:var(--accent-blue)]/12',
|
||||
yellow: 'from-[color:var(--accent-yellow)]/14',
|
||||
green: 'from-[color:var(--accent-green)]/12',
|
||||
red: 'from-[color:var(--accent-red)]/12'
|
||||
} as const;
|
||||
|
||||
const accentButtonByAccent = {
|
||||
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)]',
|
||||
red: 'bg-[color:var(--accent-red)] hover:bg-[color:var(--accent-red)]/90 focus-visible:ring-[color:var(--accent-red)]'
|
||||
} as const;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{program.name} | Secretaria de Esportes de Pernambuco</title>
|
||||
<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">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center gap-2 rounded-lg 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-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
|
||||
<div
|
||||
class={`bg-linear-to-b ${accentBgByAccent[program.accent]} to-transparent px-6 py-10 sm:px-10`}
|
||||
>
|
||||
<div class="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
class="grid h-16 w-16 place-items-center rounded-2xl bg-white/90 ring-1 ring-black/5"
|
||||
>
|
||||
<img
|
||||
src={program.brandImageSrc}
|
||||
alt={`Logomarca ${program.name}`}
|
||||
class="h-11 w-11 object-contain"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-(--text-strong) sm:text-3xl">
|
||||
{program.name}
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-(--text)">{program.shortDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 max-w-3xl text-base leading-relaxed text-(--text)">
|
||||
{program.longDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full flex-col gap-3 md:w-auto md:min-w-[240px]">
|
||||
<a
|
||||
href={program.signupUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={`inline-flex items-center justify-center gap-2 rounded-xl 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]}`}
|
||||
>
|
||||
Inscrição
|
||||
<span aria-hidden="true">↗</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={program.editalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center justify-center gap-2 rounded-xl 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"
|
||||
>
|
||||
Edital
|
||||
<span aria-hidden="true">↗</span>
|
||||
</a>
|
||||
|
||||
<p class="text-center text-xs text-(--text-muted)">
|
||||
Os links serão abertos em nova aba.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
58
src/lib/data/programs.ts
Normal file
58
src/lib/data/programs.ts
Normal file
@@ -0,0 +1,58 @@
|
||||
export type ProgramId = 'bolsa-atleta' | 'bolsa-tecnico' | 'time-pe';
|
||||
|
||||
export type Program = {
|
||||
id: ProgramId;
|
||||
name: string;
|
||||
shortDescription: string;
|
||||
longDescription: string;
|
||||
brandImageSrc: string;
|
||||
accent: 'blue' | 'yellow' | 'green' | 'red';
|
||||
signupUrl: string;
|
||||
editalUrl: string;
|
||||
};
|
||||
|
||||
export const programs: Program[] = [
|
||||
{
|
||||
id: 'bolsa-atleta',
|
||||
name: 'Bolsa Atleta',
|
||||
shortDescription: 'Incentivo para atletas e paratletas em Pernambuco.',
|
||||
longDescription:
|
||||
'O Bolsa Atleta Pernambuco é um programa de incentivo ao esporte, voltado a atletas e paratletas, com foco na valorização do desempenho, na permanência esportiva e no fortalecimento do esporte no estado.',
|
||||
brandImageSrc: '/brand/bolsa-atleta.png',
|
||||
accent: 'yellow',
|
||||
signupUrl: 'https://forms.gle/2iJw8vtLsCrjvrmD6',
|
||||
editalUrl:
|
||||
'https://drive.google.com/file/d/14zc13QfHC1mw6d6GFZJIJNNc-JgadsfA/view?usp=sharing'
|
||||
},
|
||||
{
|
||||
id: 'bolsa-tecnico',
|
||||
name: 'Bolsa Técnico',
|
||||
shortDescription: 'Apoio a treinadores(as) e equipes técnicas.',
|
||||
longDescription:
|
||||
'O Bolsa Técnico Pernambuco é um programa de apoio a treinadores(as) e equipes técnicas, fortalecendo a preparação esportiva e contribuindo para a formação e o desenvolvimento de atletas e paratletas no estado.',
|
||||
brandImageSrc: '/brand/bolsa-tecnico.png',
|
||||
accent: 'blue',
|
||||
signupUrl: 'https://forms.gle/r9qC32yNEAFsyg4s7',
|
||||
editalUrl:
|
||||
'https://drive.google.com/file/d/1mWQUPvsjmzp_glTcbJAY3F6k46VUJZiL/view?usp=sharing'
|
||||
},
|
||||
{
|
||||
id: 'time-pe',
|
||||
name: 'Time Pernambuco',
|
||||
shortDescription: 'Programa para impulsionar talentos e resultados.',
|
||||
longDescription:
|
||||
'O Time Pernambuco é uma iniciativa para apoiar talentos e impulsionar resultados, ampliando oportunidades, visibilidade e suporte ao esporte, em alinhamento com as políticas públicas da SESP-PE.',
|
||||
brandImageSrc: '/brand/time-pe.png',
|
||||
accent: 'green',
|
||||
signupUrl: 'https://forms.gle/BDp5ZD8QkhVL1CDu5',
|
||||
editalUrl:
|
||||
'https://drive.google.com/file/d/1XHvoUL92IGzItG-4WaF_Ih-whgPpdoEO/view?usp=sharing'
|
||||
}
|
||||
];
|
||||
|
||||
export function getProgram(id: ProgramId): Program {
|
||||
const program = programs.find((p) => p.id === id);
|
||||
if (!program) throw new Error(`Programa não encontrado: ${id}`);
|
||||
return program;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,117 @@
|
||||
<h1>Welcome to your library project</h1>
|
||||
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<script lang="ts">
|
||||
import ProgramCard from '$lib/components/ProgramCard.svelte';
|
||||
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."
|
||||
/>
|
||||
</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>
|
||||
|
||||
<div class="hidden items-center gap-3 sm:flex">
|
||||
<span
|
||||
class="rounded-full bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
|
||||
>
|
||||
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">
|
||||
<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="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>
|
||||
</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 • Programas oficiais</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-(--text-muted)">
|
||||
© {new Date().getFullYear()} Governo de Pernambuco — SESP-PE.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
9
src/routes/bolsa-atleta/+page.svelte
Normal file
9
src/routes/bolsa-atleta/+page.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import ProgramPage from '$lib/components/ProgramPage.svelte';
|
||||
import { getProgram } from '$lib/data/programs';
|
||||
|
||||
const program = getProgram('bolsa-atleta');
|
||||
</script>
|
||||
|
||||
<ProgramPage {program} />
|
||||
|
||||
9
src/routes/bolsa-tecnico/+page.svelte
Normal file
9
src/routes/bolsa-tecnico/+page.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import ProgramPage from '$lib/components/ProgramPage.svelte';
|
||||
import { getProgram } from '$lib/data/programs';
|
||||
|
||||
const program = getProgram('bolsa-tecnico');
|
||||
</script>
|
||||
|
||||
<ProgramPage {program} />
|
||||
|
||||
@@ -1 +1,59 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
:root {
|
||||
/* Base */
|
||||
--page-bg: #eef3ff;
|
||||
--surface-muted: #f2f5fb;
|
||||
|
||||
/* Text */
|
||||
--text-strong: #0f1f3a;
|
||||
--text: #2b3a55;
|
||||
--text-muted: #60708a;
|
||||
|
||||
/* Brand accents (inspirado nas logomarcas anexadas) */
|
||||
--accent-blue: #1f4a86;
|
||||
--accent-yellow: #f4d01d;
|
||||
--accent-green: #2bb34a;
|
||||
--accent-red: #e0382f;
|
||||
|
||||
/* UI */
|
||||
--link: #1f4a86;
|
||||
--focus-ring: #1f4a86;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(1000px 500px at 10% 0%, rgba(31, 74, 134, 0.14), transparent 60%),
|
||||
radial-gradient(900px 480px at 90% 10%, rgba(244, 208, 29, 0.16), transparent 55%),
|
||||
radial-gradient(800px 420px at 30% 100%, rgba(43, 179, 74, 0.12), transparent 55%),
|
||||
var(--page-bg);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Pequenos utilitários locais (sem depender de plugins do Tailwind) */
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
border-radius: 9999px;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
box-shadow: 0 1px 0 rgba(15, 31, 58, 0.04);
|
||||
border: 1px solid rgba(15, 31, 58, 0.06);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(31, 74, 134, 0.2);
|
||||
}
|
||||
|
||||
9
src/routes/time-pe/+page.svelte
Normal file
9
src/routes/time-pe/+page.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import ProgramPage from '$lib/components/ProgramPage.svelte';
|
||||
import { getProgram } from '$lib/data/programs';
|
||||
|
||||
const program = getProgram('time-pe');
|
||||
</script>
|
||||
|
||||
<ProgramPage {program} />
|
||||
|
||||
BIN
static/brand/bolsa-atleta.png
Normal file
BIN
static/brand/bolsa-atleta.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
static/brand/bolsa-tecnico.png
Normal file
BIN
static/brand/bolsa-tecnico.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
static/brand/gov-pe.png
Normal file
BIN
static/brand/gov-pe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
static/brand/time-pe.png
Normal file
BIN
static/brand/time-pe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -8,8 +8,6 @@
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext"
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user