Refactor component styles: Update various components to use rounded-lg instead of rounded-2xl for a more consistent design, and adjust button styles for improved visual coherence across the application.
This commit is contained in:
@@ -41,13 +41,13 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<section aria-label={title} class="overflow-hidden rounded-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
|
||||
<section aria-label={title} class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
|
||||
<header class="flex items-center justify-between gap-3 px-6 py-5 sm:px-8">
|
||||
<h2 class="text-lg font-extrabold tracking-tight text-(--text-strong)">{title}</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
|
||||
onclick={prev}
|
||||
aria-label="Notícia anterior"
|
||||
disabled={items.length < 2}
|
||||
@@ -56,7 +56,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-md bg-white/80 text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)"
|
||||
onclick={next}
|
||||
aria-label="Próxima notícia"
|
||||
disabled={items.length < 2}
|
||||
@@ -68,7 +68,7 @@
|
||||
|
||||
{#if items.length === 0}
|
||||
<div class="px-6 pb-7 sm:px-8">
|
||||
<p class="rounded-2xl bg-white/80 p-6 text-sm text-(--text) ring-1 ring-black/5">
|
||||
<p class="rounded-lg bg-white/80 p-6 text-sm text-(--text) ring-1 ring-black/5">
|
||||
Nenhuma notícia disponível.
|
||||
</p>
|
||||
</div>
|
||||
@@ -83,41 +83,56 @@
|
||||
{#each items as item, i (item.slug)}
|
||||
<a
|
||||
href={`/noticias/${item.slug}`}
|
||||
class={`group block overflow-hidden rounded-3xl ring-1 ring-black/10 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${i === index ? '' : 'hidden'}`}
|
||||
class={`group block overflow-hidden rounded-lg ring-1 ring-black/10 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) ${i === index ? '' : 'hidden'}`}
|
||||
aria-label={`Ler notícia: ${item.title}`}
|
||||
>
|
||||
<div class="relative">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="h-56 w-full bg-linear-to-br from-[color:var(--accent-blue)]/15 via-white/40 to-[color:var(--accent-yellow)]/20 sm:h-64"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 bg-linear-to-t from-black/75 via-black/35 to-black/0"
|
||||
></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-7">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
|
||||
{#if item.imageSrc}
|
||||
<img
|
||||
src={item.imageSrc}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="h-72 w-full object-cover sm:h-80 lg:h-96"
|
||||
loading={i === index ? 'eager' : 'lazy'}
|
||||
decoding="async"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none absolute inset-0 bg-black/0 transition group-hover:bg-black/10"
|
||||
></div>
|
||||
{:else}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="h-56 w-full bg-linear-to-br from-[color:var(--accent-blue)]/15 via-white/40 to-[color:var(--accent-yellow)]/20 sm:h-64"
|
||||
></div>
|
||||
<div class="absolute inset-0 bg-linear-to-t from-black/75 via-black/35 to-black/0"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 sm:p-7">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="rounded-lg bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
|
||||
>
|
||||
{item.category}
|
||||
</span>
|
||||
<span
|
||||
class="rounded-lg bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
|
||||
>
|
||||
{new Date(item.date).toLocaleDateString('pt-BR')}
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-extrabold tracking-tight text-white drop-shadow-sm sm:text-2xl">
|
||||
{item.title}
|
||||
</p>
|
||||
<p class="mt-2 max-w-3xl text-sm leading-relaxed text-white/90 drop-shadow-sm">
|
||||
{item.dek}
|
||||
</p>
|
||||
<div
|
||||
class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-white drop-shadow-sm"
|
||||
>
|
||||
{item.category}
|
||||
</span>
|
||||
<span
|
||||
class="rounded-full bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
|
||||
>
|
||||
{new Date(item.date).toLocaleDateString('pt-BR')}
|
||||
</span>
|
||||
<span class="underline-offset-4 group-hover:underline">Ler notícia</span>
|
||||
<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-3 text-xl font-extrabold tracking-tight text-white drop-shadow-sm sm:text-2xl">
|
||||
{item.title}
|
||||
</p>
|
||||
<p class="mt-2 max-w-3xl text-sm leading-relaxed text-white/90 drop-shadow-sm">
|
||||
{item.dek}
|
||||
</p>
|
||||
<div class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-white drop-shadow-sm">
|
||||
<span class="underline-offset-4 group-hover:underline">Ler notícia</span>
|
||||
<span aria-hidden="true" class="transition group-hover:translate-x-0.5">→</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
|
||||
<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]}`}
|
||||
class={`group relative block overflow-hidden rounded-lg 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"
|
||||
class="grid h-16 w-16 shrink-0 place-items-center rounded-md bg-(--surface-muted) ring-1 ring-black/5"
|
||||
>
|
||||
<img
|
||||
src={program.brandImageSrc}
|
||||
|
||||
@@ -17,10 +17,10 @@
|
||||
|
||||
<a
|
||||
href={`/${program.id}`}
|
||||
class="group flex items-start gap-3 rounded-2xl bg-white/80 p-4 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)"
|
||||
class="group flex items-start gap-3 rounded-lg bg-white/80 p-4 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={`Acessar programa ${program.name}`}
|
||||
>
|
||||
<div class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-(--surface-muted) ring-1 ring-black/5">
|
||||
<div class="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-(--surface-muted) ring-1 ring-black/5">
|
||||
<img
|
||||
src={program.brandImageSrc}
|
||||
alt={`Logomarca ${program.name}`}
|
||||
|
||||
@@ -32,13 +32,13 @@
|
||||
<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)"
|
||||
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-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
|
||||
<section class="mt-6 overflow-hidden rounded-lg 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`}
|
||||
>
|
||||
@@ -46,7 +46,7 @@
|
||||
<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"
|
||||
class="grid h-16 w-16 place-items-center rounded-lg bg-white/90 ring-1 ring-black/5"
|
||||
>
|
||||
<img
|
||||
src={program.brandImageSrc}
|
||||
@@ -69,7 +69,7 @@
|
||||
</p>
|
||||
|
||||
<div class="mt-6 grid gap-3 sm:grid-cols-2">
|
||||
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
|
||||
Inscrições 2026
|
||||
</p>
|
||||
@@ -79,21 +79,21 @@
|
||||
<p class="mt-2 text-xs text-(--text-muted)">Exclusivamente online.</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Quem pode</p>
|
||||
<p class="mt-2 text-sm text-(--text)">{program.eligibility}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 grid gap-3 sm:grid-cols-2">
|
||||
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
|
||||
Como funciona
|
||||
</p>
|
||||
<p class="mt-2 text-sm leading-relaxed text-(--text)">{program.signupProcess}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<div class="rounded-lg bg-white/80 p-4 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
|
||||
Benefícios
|
||||
</p>
|
||||
@@ -114,7 +114,7 @@
|
||||
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]}`}
|
||||
class={`inline-flex items-center justify-center gap-2 rounded-md 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>
|
||||
@@ -124,7 +124,7 @@
|
||||
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"
|
||||
class="inline-flex items-center justify-center gap-2 rounded-md 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>
|
||||
|
||||
@@ -5,6 +5,7 @@ export type News = {
|
||||
date: string;
|
||||
category: string;
|
||||
featured?: boolean;
|
||||
imageSrc?: string;
|
||||
body?: string[];
|
||||
};
|
||||
|
||||
@@ -16,9 +17,9 @@ export const news: News[] = [
|
||||
date: '2026-01-02',
|
||||
category: 'Programas',
|
||||
featured: true,
|
||||
imageSrc: '/brand/imageminscricoesabertas.png',
|
||||
body: [
|
||||
'As inscrições para os programas Bolsa Atleta, Bolsa Técnico e Time Pernambuco 2026 estão abertas.',
|
||||
'Este conteúdo é um placeholder — você poderá substituir por dados vindos de banco/CMS futuramente.'
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -27,10 +28,8 @@ export const news: News[] = [
|
||||
dek: 'Mais de 1,2 mil atletas e técnicos contemplados, com investimento aproximado de R$ 13 milhões.',
|
||||
date: '2025-12-18',
|
||||
category: 'Resultados',
|
||||
featured: true,
|
||||
body: [
|
||||
'Em 2025, os programas de incentivo ao esporte alcançaram um número recorde de beneficiados.',
|
||||
'Este conteúdo é um placeholder — você poderá substituir por dados vindos de banco/CMS futuramente.'
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -41,7 +40,6 @@ export const news: News[] = [
|
||||
category: 'Comunicados',
|
||||
body: [
|
||||
'Após preencher o formulário eletrônico, é necessário anexar a documentação exigida na plataforma.',
|
||||
'Este conteúdo é um placeholder — você poderá substituir por dados vindos de banco/CMS futuramente.'
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -52,12 +50,11 @@ export const news: News[] = [
|
||||
category: 'Serviço',
|
||||
body: [
|
||||
'Veja perguntas e respostas sobre inscrição, documentos, prazos e acompanhamento.',
|
||||
'Este conteúdo é um placeholder — você poderá substituir por dados vindos de banco/CMS futuramente.'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const featuredNews = news.filter((item) => item.featured);
|
||||
export const featuredNews = news.filter((item) => item.featured).slice(0, 1);
|
||||
|
||||
export function getNews(slug: string): News {
|
||||
const item = news.find((n) => n.slug === slug);
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
<div class="min-h-dvh bg-(--page-bg)">
|
||||
<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 shadow-sm ring-1 ring-black/5">
|
||||
<section class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
|
||||
<div class="px-6 py-10 sm:px-10 sm:py-12">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
|
||||
Erro {page.status}
|
||||
@@ -45,7 +45,7 @@
|
||||
</p>
|
||||
|
||||
{#if safeDetails}
|
||||
<div class="mt-5 rounded-2xl bg-white/70 p-4 ring-1 ring-black/5">
|
||||
<div class="mt-5 rounded-lg bg-white/70 p-4 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Detalhes</p>
|
||||
<p class="mt-2 text-sm text-(--text)">{safeDetails}</p>
|
||||
</div>
|
||||
@@ -54,7 +54,7 @@
|
||||
<div class="mt-8 flex flex-wrap items-center gap-3">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center justify-center rounded-xl bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
|
||||
class="inline-flex items-center justify-center rounded-md bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
|
||||
>
|
||||
Ir para a página inicial
|
||||
</a>
|
||||
@@ -62,7 +62,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={goBack}
|
||||
class="inline-flex items-center justify-center 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"
|
||||
class="inline-flex items-center justify-center rounded-md 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"
|
||||
>
|
||||
Voltar
|
||||
</button>
|
||||
@@ -71,14 +71,14 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={reload}
|
||||
class="inline-flex items-center justify-center 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"
|
||||
class="inline-flex items-center justify-center rounded-md 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"
|
||||
>
|
||||
Tentar novamente
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mt-8 rounded-2xl bg-white/70 p-5 ring-1 ring-black/5">
|
||||
<div class="mt-8 rounded-lg bg-white/70 p-5 ring-1 ring-black/5">
|
||||
<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Dica</p>
|
||||
<p class="mt-2 text-sm text-(--text)">
|
||||
Se você chegou aqui por um link antigo, volte para a página inicial e escolha o programa no card
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
<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"
|
||||
class="rounded-lg bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
|
||||
>
|
||||
SESP-PE
|
||||
</span>
|
||||
@@ -49,7 +49,7 @@
|
||||
<section class="space-y-8">
|
||||
<NewsCarousel items={featuredNews} title="Notícias em destaque" />
|
||||
|
||||
<section class="rounded-3xl bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8">
|
||||
<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>
|
||||
@@ -64,17 +64,17 @@
|
||||
{#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)"
|
||||
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-full bg-(--surface-muted) px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
|
||||
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-full bg-white/80 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/5"
|
||||
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>
|
||||
@@ -96,7 +96,7 @@
|
||||
</section>
|
||||
|
||||
<aside class="space-y-6">
|
||||
<section class="rounded-3xl bg-white/80 p-6 shadow-sm ring-1 ring-black/5 sm:p-8">
|
||||
<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.
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
--text-muted: #60708a;
|
||||
|
||||
/* Brand accents (inspirado nas logomarcas anexadas) */
|
||||
--accent-blue: #1f4a86;
|
||||
--accent-blue: #2f6fd4;
|
||||
--accent-yellow: #f4d01d;
|
||||
--accent-green: #2bb34a;
|
||||
--accent-red: #e0382f;
|
||||
|
||||
/* UI */
|
||||
--link: #1f4a86;
|
||||
--focus-ring: #1f4a86;
|
||||
--link: #2f6fd4;
|
||||
--focus-ring: #2f6fd4;
|
||||
}
|
||||
|
||||
html,
|
||||
@@ -44,7 +44,7 @@ a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
border-radius: 9999px;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -16,28 +16,28 @@
|
||||
<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)"
|
||||
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-3xl bg-white/80 shadow-sm ring-1 ring-black/5">
|
||||
<section class="mt-6 overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
|
||||
<div class="relative">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="h-56 w-full bg-linear-to-br from-[color:var(--accent-blue)]/15 via-white/40 to-[color:var(--accent-yellow)]/20 sm:h-72"
|
||||
class="h-56 w-full bg-linear-to-br from-(--accent-blue)/15 via-white/40 to-(--accent-yellow)/20 sm:h-72"
|
||||
></div>
|
||||
<div class="absolute inset-0 bg-linear-to-t from-black/30 via-black/0 to-black/0"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 px-6 py-6 sm:px-10 sm:py-10">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
|
||||
class="rounded-lg bg-white/90 px-3 py-1 text-xs font-semibold text-(--text-strong) ring-1 ring-black/10"
|
||||
>
|
||||
{data.item.category}
|
||||
</span>
|
||||
<span
|
||||
class="rounded-full bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
|
||||
class="rounded-lg bg-white/85 px-3 py-1 text-xs font-semibold text-(--text-muted) ring-1 ring-black/10"
|
||||
>
|
||||
{new Date(data.item.date).toLocaleDateString('pt-BR')}
|
||||
</span>
|
||||
|
||||
BIN
static/brand/imageminscricoesabertas.png
Normal file
BIN
static/brand/imageminscricoesabertas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
Reference in New Issue
Block a user