feat(vitrine): modernisation UI (nav, home bento, typo, shortcodes)
- Header sticky, menu mobile, lien d’évitement et JS léger (site.js) - Accueil : layouts/index.html, contenu structuré en front matter, grille bento - Motif « parcours » en SVG statique (évite la casse minify sur path inline) - CSS : tokens, clamp, focus-visible, prefers-reduced-motion, formulaire contact - Footer aligné sur la charte (plus de styles inline Bootstrap) - Shortcodes featureblock + card ; fonctionnalités en blocs featureblock - Polices : Merienda + Source Sans 3 (remplace la pile à 5 Google Fonts) Made-with: Cursor
This commit is contained in:
@@ -3,40 +3,32 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
|
||||
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
|
||||
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta name="keywords" content="{{ if .Keywords }}{{ delimit .Keywords ", " }}{{ else }}{{ .Site.Params.keywords }}{{ end }}">
|
||||
<meta name="author" content="{{ .Site.Params.author | default .Site.Title }}">
|
||||
|
||||
<!-- Prevent indexing of staging site -->
|
||||
|
||||
{{ if eq .Site.BaseURL "https://staging.ptits-pas.fr/" }}
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
{{ end }}
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
|
||||
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}">
|
||||
<meta property="og:url" content="{{ .Permalink }}">
|
||||
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta property="og:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
||||
<meta property="og:locale" content="fr_FR">
|
||||
|
||||
<!-- Twitter -->
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:url" content="{{ .Permalink }}">
|
||||
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||
<meta property="twitter:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
||||
<meta property="twitter:image" content="{{ .Site.BaseURL }}images/page_login_4.1.png">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
|
||||
<!-- JSON-LD structured data for Google -->
|
||||
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | relURL }}">
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
@@ -57,16 +49,14 @@
|
||||
{{ end }}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="{{ `/css/style.css` | relURL }}">
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-65J8GVLCRH"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-65J8GVLCRH', {
|
||||
'anonymize_ip': true,
|
||||
'allow_google_signals': false,
|
||||
@@ -76,18 +66,30 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="skip-link" href="#contenu-principal">Aller au contenu</a>
|
||||
<header class="site-header">
|
||||
<div class="site-header__inner">
|
||||
<a class="site-logo" href="{{ "/" | relURL }}">P'titsPas</a>
|
||||
<nav class="site-nav" id="site-nav" aria-label="Navigation principale">
|
||||
<button type="button" class="nav-toggle" aria-expanded="false" aria-controls="site-nav-panel" id="site-nav-toggle" aria-label="Ouvrir le menu">
|
||||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
||||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
||||
<span class="nav-toggle__bar" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="site-nav__panel" id="site-nav-panel">
|
||||
<ul class="site-nav__list">
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<main id="contenu-principal" class="site-main">
|
||||
{{ block "main" . }}{{ .Content }}{{ end }}
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
<script src="{{ `/js/site.js` | relURL }}" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
<div class="page-shell">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
{{ define "main" }}
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ end }}
|
||||
<div class="page-shell">
|
||||
<article class="content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
{{ define "main" }}
|
||||
<div class="home">
|
||||
<section class="home-hero">
|
||||
{{ partial "home-path-motif.html" . }}
|
||||
<div class="home-hero__inner">
|
||||
<div class="home-hero__media">
|
||||
<img src="{{ (.Params.hero_image | default "/images/page_login_4.1.png") | relURL }}" alt="{{ .Params.hero_image_alt | default "Illustration P'titsPas" }}" width="1200" height="630" fetchpriority="high">
|
||||
</div>
|
||||
<div class="home-hero__copy">
|
||||
<h1 class="home-hero__title">{{ .Title }}</h1>
|
||||
{{ with .Params.hero_tagline }}<p class="accroche">{{ . }}</p>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="home-bento">
|
||||
<article class="home-card home-card--intro">
|
||||
{{ with .Params.intro_md }}{{ . | markdownify }}{{ end }}
|
||||
</article>
|
||||
<aside class="home-card home-card--ethics" aria-label="Engagements">
|
||||
<h2 class="visually-hidden">Nos engagements</h2>
|
||||
<ol class="ethics-steps">
|
||||
{{ range .Params.ethics }}
|
||||
<li>
|
||||
<strong>{{ .title }}</strong>
|
||||
{{ .detail }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ol>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section class="home-why">
|
||||
{{ with .Params.why_md }}{{ . | markdownify }}{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="home-cta" aria-labelledby="home-cta-title">
|
||||
<h2 id="home-cta-title" class="visually-hidden">Actions</h2>
|
||||
{{ with .Params.cta_title }}<h3>{{ . }}</h3>{{ end }}
|
||||
<div>
|
||||
<a href="{{ "fonctionnalites" | relURL }}" class="cta-button">Voir les fonctionnalités clés</a>
|
||||
<a href="{{ "contact" | relURL }}" class="cta-button">Demander une démo</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,11 +1,8 @@
|
||||
<footer style="background-color: #f8f9fa; padding: 20px 0; text-align: center; border-top: 1px solid #e7e7e7; margin-top: 40px;">
|
||||
<div class="container">
|
||||
<p>© {{ now.Year }} P'titsPas - Tous droits réservés.</p>
|
||||
<p>
|
||||
<a href="/mentions-legales/" style="margin-right: 15px; text-decoration: none; color: #007bff;">Mentions Légales</a>
|
||||
<a href="/politique-de-confidentialite/" style="margin-right: 15px; text-decoration: none; color: #007bff;">Politique de Confidentialité</a>
|
||||
<a href="/technique/" style="text-decoration: none; color: #007bff;">Données Techniques</a>
|
||||
</p>
|
||||
<!-- Vous pouvez ajouter ici d'autres informations ou liens si nécessaire -->
|
||||
</div>
|
||||
</footer>
|
||||
<footer class="footer-site">
|
||||
<p>© {{ now.Year }} P'titsPas — Tous droits réservés.</p>
|
||||
<nav class="footer-site__links" aria-label="Liens de pied de page">
|
||||
<a href="{{ "mentions-legales" | relURL }}">Mentions légales</a>
|
||||
<a href="{{ "politique-de-confidentialite" | relURL }}">Politique de confidentialité</a>
|
||||
<a href="{{ "technique" | relURL }}">Données techniques</a>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<img class="home-hero__motif home-hero__motif-img" src="{{ "images/motif-trajet.svg" | relURL }}" width="520" height="140" alt="" role="presentation" decoding="async">
|
||||
@@ -0,0 +1,9 @@
|
||||
{{- $title := .Get "title" -}}
|
||||
<div class="feature-card">
|
||||
{{- if $title -}}
|
||||
<h4 class="feature-card__title">{{ $title }}</h4>
|
||||
{{- end -}}
|
||||
<div class="feature-card__body">
|
||||
{{ .Inner | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
{{- $title := .Get "title" -}}
|
||||
<section class="feature-section">
|
||||
{{- if $title -}}
|
||||
<h3 class="feature-section__title">{{ $title }}</h3>
|
||||
{{- end -}}
|
||||
<div class="feature-section__body">
|
||||
{{ .Inner | markdownify }}
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user