feat(brand): refonte favicon + og-image, reskin /soutenir
All checks were successful
Deploy info-canicule / deploy (push) Successful in 1m31s
All checks were successful
Deploy info-canicule / deploy (push) Successful in 1m31s
- favicon.svg : nouveau logo (sun + brand + droplet) cohérent avec le header - favicon-32 / favicon-192 / apple-touch-icon générés par scripts/build-favicon.mjs (sharp) - og-image refait avec la nouvelle identité (paper, Manrope-like, pills vigilance avec glyphes) - Base.astro : link rel icon + apple-touch-icon ajoutés - /soutenir : reskin (kicker + h1 accentué + barre d'objectif en brand-tint, blocs ic-card), fonctionnalité Ko-fi conservée Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Florian
parent
0723ee10e3
commit
d5c0b0968d
9 changed files with 153 additions and 81 deletions
|
|
@ -77,6 +77,8 @@ const jsonLd = {
|
|||
{noindex ? <meta name="robots" content="noindex, nofollow" /> : <meta name="robots" content="index, follow, max-image-preview:large" />}
|
||||
<link rel="canonical" href={canonicalUrl} />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="alternate" type="application/rss+xml" title="Info Canicule" href={`${SITE}/sitemap-index.xml`} />
|
||||
<title>{title}</title>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,105 +8,115 @@ const goalTarget = 10;
|
|||
const goalRaised = 0;
|
||||
const goalCurrency = '€';
|
||||
const goalPercent = Math.min(100, Math.round((goalRaised / goalTarget) * 100));
|
||||
|
||||
const usages = [
|
||||
{ title: "Hébergement", text: "VPS mutualisé chez OVH : ~30 € / mois pour faire tourner le site, le cache Valkey et le pipeline de données." },
|
||||
{ title: "Nom de domaine", text: "Renouvellement annuel du domaine dédié (objectif en cours)." },
|
||||
{ title: "Surprise café", text: "De quoi tenir les soirées de maintenance et les rotations d'API key 🥲." },
|
||||
];
|
||||
|
||||
const otherWays = [
|
||||
{ title: "Signaler un bug ou une typo", text: "Par mail à florian@nocleus.com. Toute remontée d'erreur dans un conseil ou une donnée incohérente est précieuse." },
|
||||
{ title: "Partager le site", text: "Surtout autour des personnes fragiles (proches âgés, isolés), pour qui les conseils canicule peuvent faire une vraie différence." },
|
||||
{ title: "Diffuser un kit", text: "Imprimer un kit phénomène et l'afficher dans un lieu collectif (mairie, médiathèque, hall d'immeuble)." },
|
||||
];
|
||||
---
|
||||
|
||||
<Base
|
||||
title="Soutenir le projet — Info Canicule"
|
||||
description="Info Canicule est un service gratuit, sans publicité, à but non lucratif. Si le site vous est utile, vous pouvez soutenir son hébergement via Ko-fi."
|
||||
>
|
||||
<section class="bg-gradient-to-b from-canicule-50 to-white">
|
||||
<div class="container-tight py-10">
|
||||
<h1 class="text-3xl font-bold sm:text-4xl">Soutenir Info Canicule</h1>
|
||||
<p class="mt-2 max-w-2xl text-slate-600">
|
||||
Le site est gratuit, sans publicité et sans traceurs commerciaux. Si vous le trouvez utile,
|
||||
vous pouvez contribuer aux frais d'infrastructure (~30 €/mois).
|
||||
<section class="container-tight" style="padding-block: clamp(28px, 5vw, 56px) 32px;">
|
||||
<div class="flex flex-col gap-3" style="margin-bottom: 28px; max-width: 720px;">
|
||||
<div class="kicker">Soutenir</div>
|
||||
<h1>Si le site vous est utile, <span style="color: var(--brand-deep);">un café suffit</span>.</h1>
|
||||
<p style="font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem); color: var(--ink-2); line-height: 1.55;">
|
||||
Info Canicule est gratuit, sans publicité, sans traceur commercial. Si vous le trouvez utile,
|
||||
vous pouvez contribuer aux frais d'infrastructure (~30 €/mois).
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-tight pt-6">
|
||||
<div class="rounded-xl border border-canicule-200 bg-white p-5 shadow-sm">
|
||||
<div class="flex items-baseline justify-between gap-3">
|
||||
{/* Objectif de don */}
|
||||
<div class="ic-card" style="padding: 22px; margin-bottom: 24px; border-color: var(--brand); background: var(--brand-tint);">
|
||||
<div class="flex items-baseline justify-between gap-3" style="flex-wrap: wrap;">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-canicule-700">
|
||||
Objectif de don en cours
|
||||
</p>
|
||||
<p class="mt-1 text-base font-semibold text-slate-900">{goalLabel}</p>
|
||||
<div class="kicker" style="color: var(--brand-deep);">Objectif de don en cours</div>
|
||||
<p style="margin-top: 6px; font-weight: 600; color: var(--brand-ink); font-size: 1.05rem;">{goalLabel}</p>
|
||||
</div>
|
||||
<p class="shrink-0 text-sm tabular-nums text-slate-600">
|
||||
<span class="font-bold text-slate-900">{goalRaised} {goalCurrency}</span>
|
||||
<span class="text-slate-400"> / {goalTarget} {goalCurrency}</span>
|
||||
<p style="flex-shrink: 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--ink-2);">
|
||||
<span style="font-weight: 700; color: var(--brand-ink); font-family: var(--font-display); font-size: 1.15rem;">{goalRaised} {goalCurrency}</span>
|
||||
<span style="color: var(--ink-mute);"> / {goalTarget} {goalCurrency}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 h-3 w-full overflow-hidden rounded-full bg-slate-100">
|
||||
<div
|
||||
class="h-full rounded-full bg-canicule-500 transition-all"
|
||||
style={`width: ${goalPercent}%`}
|
||||
role="progressbar"
|
||||
aria-valuenow={goalPercent}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label={`${goalPercent}% de l'objectif atteint`}
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
style="margin-top: 14px; height: 10px; width: 100%; overflow: hidden; border-radius: 999px; background: rgba(180, 90, 58, 0.15);"
|
||||
role="progressbar"
|
||||
aria-valuenow={goalPercent}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label={`${goalPercent}% de l'objectif atteint`}
|
||||
>
|
||||
<div style={`height: 100%; width: ${goalPercent}%; background: var(--brand); transition: width .3s;`}></div>
|
||||
</div>
|
||||
|
||||
<p class="mt-2 text-xs text-slate-500">
|
||||
{goalPercent}% atteint — une fois l'objectif rempli, le nom de domaine dédié sera réservé
|
||||
pour un an.
|
||||
<p style="margin-top: 10px; font-size: 0.85rem; color: var(--brand-ink);">
|
||||
{goalPercent}% atteint — une fois l'objectif rempli, le nom de domaine dédié sera réservé pour un an.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-tight py-8">
|
||||
<div class="prose prose-slate max-w-none">
|
||||
<h2>Don libre via Ko-fi</h2>
|
||||
<p>
|
||||
Le moyen le plus simple : un don libre, sans inscription, par carte bancaire ou PayPal, via
|
||||
<a href="https://ko-fi.com/daelwizhit" rel="noopener" class="font-semibold">ko-fi.com/daelwizhit</a>.
|
||||
Les dons sont anonymes par défaut et entièrement optionnels.
|
||||
</p>
|
||||
|
||||
<div class="not-prose my-6">
|
||||
{/* CTA principal */}
|
||||
<div class="ic-card flex flex-wrap items-center justify-between gap-4" style="padding: 28px; margin-bottom: 32px;">
|
||||
<div style="max-width: 540px;">
|
||||
<h2 style="margin-bottom: 8px;">Don libre via Ko-fi</h2>
|
||||
<p style="color: var(--ink-soft);">
|
||||
Sans inscription, par carte bancaire ou PayPal. Anonyme par défaut et entièrement optionnel.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="https://ko-fi.com/daelwizhit"
|
||||
rel="noopener"
|
||||
class="inline-flex items-center gap-2 rounded-lg bg-canicule-600 px-6 py-3 text-base font-semibold text-white no-underline hover:bg-canicule-700"
|
||||
class="ic-btn ic-btn-brand ic-btn-lg"
|
||||
style="text-decoration: none;"
|
||||
>
|
||||
☕ Soutenir sur Ko-fi
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Ce que les dons financent</h2>
|
||||
<ul>
|
||||
<li>Frais d'infrastructure mensuels (~30 €/mois).</li>
|
||||
<li>Nom de domaine annuel.</li>
|
||||
<li>Café pour les soirées de maintenance 🥲.</li>
|
||||
</ul>
|
||||
<p>
|
||||
<strong>Ce site n'a aucune vocation commerciale.</strong> Aucun chiffre d'affaires, aucun salaire
|
||||
versé. Les dons couvrent les frais techniques ou, en cas d'excédent, financent d'autres petits
|
||||
projets d'utilité publique du même développeur.
|
||||
</p>
|
||||
{/* Ce que ça finance */}
|
||||
<section style="margin-bottom: 48px;">
|
||||
<h2 style="margin-bottom: 16px;">Ce que les dons financent</h2>
|
||||
<div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
|
||||
{usages.map((u) => (
|
||||
<div class="ic-card-soft">
|
||||
<h3>{u.title}</h3>
|
||||
<p style="margin-top: 8px; line-height: 1.5; color: var(--ink-soft);">{u.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p style="margin-top: 16px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5;">
|
||||
<strong>Ce site n'a aucune vocation commerciale.</strong> Aucun chiffre d'affaires, aucun salaire versé.
|
||||
Les dons couvrent les frais techniques ou, en cas d'excédent, financent d'autres petits projets d'utilité publique du même développeur.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<h2>Autres manières d'aider</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Signaler un bug ou une typo</strong> : par mail à
|
||||
<a href="mailto:florian@nocleus.com">florian@nocleus.com</a>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Partager le site</strong> autour de vous, en particulier auprès de personnes fragiles
|
||||
(proches âgés, personnes isolées) pour qui les conseils canicule peuvent faire une vraie
|
||||
différence.
|
||||
</li>
|
||||
</ul>
|
||||
{/* Autres manières d'aider */}
|
||||
<section style="margin-bottom: 32px;">
|
||||
<h2 style="margin-bottom: 16px;">Autres manières d'aider</h2>
|
||||
<div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
|
||||
{otherWays.map((w) => (
|
||||
<div class="ic-card flex items-start gap-3" style="padding: 18px;">
|
||||
<span style="color: var(--v-vert); flex-shrink: 0; font-weight: 700; font-size: 1.1rem;" aria-hidden="true">✓</span>
|
||||
<div>
|
||||
<strong>{w.title}</strong>
|
||||
<p style="margin-top: 6px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft);">{w.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="text-sm text-slate-500">
|
||||
<p style="color: var(--ink-soft); font-size: 0.88rem;">
|
||||
Pour les questions juridiques (mention de l'éditeur, statut), voir les
|
||||
<a href="/mentions-legales">mentions légales</a>.
|
||||
<a href="/mentions-legales" style="color: var(--brand-deep);">mentions légales</a>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Base>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue