feat(logo): lockup navbar avec baseline
This commit is contained in:
parent
cd6a641d72
commit
fdf0756810
@ -1,8 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#06B6D4"/>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
<stop offset="0%" stop-color="#34D399"/>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="7" fill="url(#g)"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 460 B After Width: | Height: | Size: 460 B |
@ -1,14 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 48" role="img" aria-label="IA qu'à">
|
||||
<svg viewBox="0 0 500 220" role="img" aria-label="IA qu'à — L'IA pour les PME" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="iaGrad" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#06B6D4"/>
|
||||
<stop offset="100%" stop-color="#3B82F6"/>
|
||||
<linearGradient id="logoAccentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#34D399"/>
|
||||
<stop offset="100%" stop-color="#2563EB"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<text x="0" y="37" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="38" letter-spacing="-0.5">
|
||||
<tspan fill="url(#iaGrad)" font-weight="800">IA</tspan>
|
||||
<tspan fill="#334155" font-weight="700" dx="6">qu</tspan>
|
||||
<tspan fill="url(#iaGrad)" font-weight="600">’</tspan>
|
||||
<tspan fill="#334155" font-weight="700">à</tspan>
|
||||
</text>
|
||||
<g transform="translate(250, 110)">
|
||||
<text x="-5" y="16" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="700" font-size="68" text-anchor="end" letter-spacing="0.01em">
|
||||
<tspan fill="url(#logoAccentGradient)">IA</tspan>
|
||||
</text>
|
||||
<text x="5" y="16" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="300" font-size="66" text-anchor="start" fill="#334155" letter-spacing="-0.01em">
|
||||
<tspan>qu</tspan><tspan fill="url(#logoAccentGradient)" dx="1">’</tspan><tspan dx="1">à</tspan>
|
||||
</text>
|
||||
<text x="127" y="56" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="600" font-size="18" text-anchor="end" fill="url(#logoAccentGradient)" letter-spacing="3px" opacity="0.9">L'IA POUR LES PME</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 669 B After Width: | Height: | Size: 1.2 KiB |
@ -1,44 +1,56 @@
|
||||
---
|
||||
/**
|
||||
* BrandLogo — wordmark "IA qu'à" (color package §1, palette Classic Electric Teal).
|
||||
* "IA" + apostrophe en dégradé cyan→bleu, "qu'à" en slate adaptatif (clair/sombre).
|
||||
* Double sens assumé : "IA qu'à" ↔ "Y'a qu'à". Rendu en Inter (police du site).
|
||||
* BrandLogo — lockup "IA qu'à" + baseline "L'IA POUR LES PME"
|
||||
* (palette Mint & Ocean Blue, color package §1 ; preset "Pure Swiss Typography" de Paul).
|
||||
* Space Grotesk : "IA" 700 + "qu'à" 300. "IA"/apostrophe/baseline en dégradé mint→ocean,
|
||||
* "qu'à" en slate adaptatif clair/sombre. Double sens assumé : "IA qu'à" ↔ "Y'a qu'à".
|
||||
*/
|
||||
interface Props {
|
||||
class?: string;
|
||||
}
|
||||
const { class: className = "h-7 w-auto" } = Astro.props;
|
||||
// id unique pour éviter les collisions de gradient si plusieurs instances
|
||||
const { class: className = "h-10 w-auto" } = Astro.props;
|
||||
const gid = "iaGrad-" + Math.random().toString(36).slice(2, 8);
|
||||
---
|
||||
|
||||
<svg
|
||||
viewBox="0 0 196 48"
|
||||
viewBox="0 0 188 62"
|
||||
role="img"
|
||||
aria-label="IA qu'à"
|
||||
aria-label="IA qu'à — L'IA pour les PME"
|
||||
class={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#06B6D4"></stop>
|
||||
<stop offset="100%" stop-color="#3B82F6"></stop>
|
||||
<stop offset="0%" stop-color="#34D399"></stop>
|
||||
<stop offset="100%" stop-color="#2563EB"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Wordmark -->
|
||||
<text
|
||||
x="0"
|
||||
y="37"
|
||||
font-family="Inter, system-ui, -apple-system, sans-serif"
|
||||
x="2"
|
||||
y="38"
|
||||
font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif"
|
||||
font-size="38"
|
||||
letter-spacing="-0.5"
|
||||
letter-spacing="-0.01em"
|
||||
>
|
||||
<tspan fill={`url(#${gid})`} font-weight="800">IA</tspan>
|
||||
<tspan
|
||||
class="fill-slate-700 dark:fill-slate-100"
|
||||
font-weight="700"
|
||||
dx="6">qu</tspan
|
||||
<tspan fill={`url(#${gid})`} font-weight="700">IA</tspan>
|
||||
<tspan class="fill-slate-700 dark:fill-slate-100" font-weight="300" dx="6"
|
||||
>qu</tspan
|
||||
>
|
||||
<tspan fill={`url(#${gid})`} font-weight="600">’</tspan>
|
||||
<tspan class="fill-slate-700 dark:fill-slate-100" font-weight="700">à</tspan>
|
||||
<tspan fill={`url(#${gid})`} font-weight="300">’</tspan>
|
||||
<tspan class="fill-slate-700 dark:fill-slate-100" font-weight="300">à</tspan>
|
||||
</text>
|
||||
|
||||
<!-- Baseline -->
|
||||
<text
|
||||
x="3"
|
||||
y="55"
|
||||
font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif"
|
||||
font-size="9.2"
|
||||
font-weight="600"
|
||||
letter-spacing="1.6"
|
||||
fill={`url(#${gid})`}
|
||||
opacity="0.9">L'IA POUR LES PME</text
|
||||
>
|
||||
</svg>
|
||||
|
||||
@ -18,7 +18,7 @@ const links = [
|
||||
>
|
||||
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<a href="/" class="no-underline shrink-0" aria-label="Accueil — IA qu'à">
|
||||
<BrandLogo class="h-7 w-auto" />
|
||||
<BrandLogo class="h-10 w-auto" />
|
||||
</a>
|
||||
|
||||
<div class="flex items-center gap-6">
|
||||
|
||||
@ -37,7 +37,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<meta name="theme-color" content="#06B6D4" />
|
||||
<meta name="theme-color" content="#2563EB" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
|
||||
@ -64,7 +64,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,800;1,9..144,400&family=Inter:wght@400;500;600&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,800;1,9..144,400&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@300;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
||||
@ -5,12 +5,13 @@ export default {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// ─── Brand "Electric Teal" ───
|
||||
// ─── Brand "Mint & Ocean Blue" (color package §1) ───
|
||||
// NB : noms de tokens conservés ; valeurs = palette Mint & Ocean.
|
||||
brand: {
|
||||
cyan: "#06B6D4", // accent primary
|
||||
blue: "#3B82F6", // accent secondary
|
||||
teal: "#22D3EE", // deep marine highlight
|
||||
deep: "#0891B2", // deep teal (hover / prestige)
|
||||
cyan: "#34D399", // mint — accent primary (accents, bordures, points, dark-text)
|
||||
blue: "#2563EB", // ocean blue — accent secondary (fin de dégradé)
|
||||
teal: "#6EE7B7", // mint clair — code inline sur fond sombre
|
||||
deep: "#2563EB", // ocean blue — accent texte en mode clair (lisible sur blanc)
|
||||
indigo: "#4F46E5",
|
||||
},
|
||||
// ─── Canvas (Slate) ───
|
||||
@ -35,13 +36,13 @@ export default {
|
||||
body: ["Inter", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
|
||||
},
|
||||
backgroundImage: {
|
||||
// 135° brand gradient (logo ligatures, CTAs, highlights)
|
||||
"brand-gradient": "linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%)",
|
||||
// 135° brand gradient — Mint → Ocean Blue (logo, CTAs, highlights)
|
||||
"brand-gradient": "linear-gradient(135deg, #34D399 0%, #2563EB 100%)",
|
||||
"brand-gradient-soft":
|
||||
"linear-gradient(135deg, rgba(6,182,212,0.12) 0%, rgba(59,130,246,0.12) 100%)",
|
||||
"linear-gradient(135deg, rgba(52,211,153,0.12) 0%, rgba(37,99,235,0.12) 100%)",
|
||||
},
|
||||
boxShadow: {
|
||||
glow: "0 8px 30px -8px rgba(6,182,212,0.35)",
|
||||
glow: "0 8px 30px -8px rgba(52,211,153,0.35)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user