à la carte

content/services/_index.md

@@ -45,7 +45,62 @@ Librezo vous installe à domicile et configure votre serveur.
 
 * Prix de l'installation selon devis, matériel non inclus.
 
-## À la carte
+<h2 style="margin-top: 64px;margin-bottom: 64px;">À la carte</h2>
+
+<div class="alacarte nn1200">
+{{ alacarte_item(
+	title = "Assistance &amp; Maintenance"
+	text1 = "à partir de 300€/an (3 premiers mois offerts)"
+	text2 = "(3 premiers mois offerts)<br/>Debian / Nextcloud / Dolibarr"
+) }}
+{{ alacarte_item(
+	title = "Création d'un site de sauvegardes"
+	text1 = "à partir de 500€"
+) }}
+{{ alacarte_item(
+	title = "Création de logos"
+	text1 = "à partir de 250€"
+) }}
+{{ alacarte_item(
+	title = "Création intégrale de site"
+	text1 = "à partir de 1&#8239;000€"
+	text2 = "(variable selon le devis)"
+) }}
+{{ alacarte_item(
+	title = "Création d'un site miroir"
+	text1 = "à partir de 1&#8239;500€"
+) }}
+{{ alacarte_item(
+	title = "Instance de visioconférence"
+	text1 = "à partir de 500€"
+	text2 = "BigBlueButton, Jitsi ou Galène"
+) }}
+{{ alacarte_item(
+	title = "Yunohost"
+	text1 = "à partir de 500€"
+	text2 = "Interface simplifiée d'administration du serveur"
+) }}
+{{ alacarte_item(
+	title = "Partage de fichiers sécurisé"
+	text1 = "à partir de 300€"
+	text2 = "Jirafeau ou Lufi"
+) }}
+{{ alacarte_item(
+	title = "Installation GNU/Linux"
+	text1 = "à partir de 70€"
+	text2 = "Votre OS libre sur votre ordinateur personnel<br/>(variable selon la configuration souhaitée)"
+) }}
+{{ alacarte_item(
+	title = "Accompagnement sur les outils"
+	text1 = "à partir de 40€/h"
+	text2 = "Nextcloud, YunoHost, Jirafeau, BBB, Jitsi"
+) }}
+{{ alacarte_item(
+	title = "Accompagnement AdminSys"
+	text1 = "à partir de 40€/h"
+	text2 = "sur Debian exclusivement"
+) }}
+</div>
 
 ## Hébergement en ligne
 

content/services/site-miroir.md

@@ -0,0 +1,9 @@
++++
+title = "Création d'un site miroir"
++++
+
+Nous pouvons créer sur un deuxième serveur (auto-hébergé ou en ligne) un site-miroir, clone du site original et maintenu à jour toutes les heures, capable de prendre le relai automatiquement en cas de panne du serveur principal.
+
+Néanmoins, nous sommes obligés pour cette solution d'utiliser l'infrastructure P2PLEGAL pour assurer une haute disponibilité 24h/24.  
+
+Cette solution ne peut donc vous convenir que si vous nous faites confiance, et ne vous rend donc pas 100% autonomes.

sass/css/prices.scss

@@ -1,5 +1,7 @@
 @import "defs";
 
+// TABLEAU DES PRIX
+
 .prices {
 	width: 100%;
 	table-layout: fixed;
@@ -30,3 +32,27 @@
 .prices tr td:first-of-type + td + td {
 	background-color: $grad3_3tr;
 }
+
+// À LA CARTE
+
+.alacarte {
+	display: flex;
+	gap: 32px;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+}
+
+.alacarte-item {
+	text-align: center;
+	min-height: 150px;
+}
+
+.alacarte-title {
+	font-family: Neucha;
+	font-size: 22px;
+	background: linear-gradient(0.125turn, $blue, $violet);
+	color: #fff;
+	padding: 8px;
+	border-radius: 8px;
+}

sass/css/timeline.scss

@@ -1,8 +1,5 @@
 @import "defs";
 
-.timeline {
-}
-
 .timeline-item {
 	width: 50%;
 	box-sizing: border-box;

templates/base.html

@@ -29,11 +29,11 @@
 			</a>
 			<nav id="header-menu">
 				<ul class="phone-hidden">
-					<li><a href="/fonctionnement">Fonctionnement</a></li>
+					<li><a href="/fonctionnement/">Fonctionnement</a></li>
-					<li><a href="/tarifs">Services et tarifs</a></li>
+					<li><a href="/services/">Services et tarifs</a></li>
-					<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
+					<li><a href="/qui-sommes-nous/">Qui sommes-nous</a></li>
-					<li><a href="/charte">Charte</a></li>
+					<li><a href="/charte/">Charte</a></li>
-					<li><a href="/contact">Contact</a></li>
+					<li><a href="/contact/">Contact</a></li>
 				</ul>
 				
 				<details class="phone-only hamburger-menu">
@@ -46,11 +46,11 @@
 								<img decoding="async" src="/img/librezo-little-black.png" alt="Librezo"/>
 							</picture>
 						</li>
-						<li><a href="/fonctionnement">Fonctionnement</a></li>
+						<li><a href="/fonctionnement/">Fonctionnement</a></li>
-						<li><a href="/tarifs">Services et tarifs</a></li>
+						<li><a href="/services/">Services et tarifs</a></li>
-						<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
+						<li><a href="/qui-sommes-nous/">Qui sommes-nous</a></li>
-						<li><a href="/charte">Charte</a></li>
+						<li><a href="/charte/">Charte</a></li>
-						<li><a href="/contact">Contact</a></li>
+						<li><a href="/contact/">Contact</a></li>
 					</ul>
 				</details>
 			</nav>

templates/page.html

@@ -8,6 +8,6 @@
 {% block body %}
 <main class="narrower">
 	{% if page.title %}<h1>{{ page.title }}</h1>{% endif %}
-	{{page.content | safe}}
+	{{ page.content | safe }}
 </main>
 {% endblock body %}

templates/section.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block title %}{% if section.title %}{{ section.title }} | {% endif %}{{ config.extra.sitename|safe }}{% endblock title %}
+
+{% block head %}
+{% endblock head %}
+
+{% block body %}
+<main class="narrower">
+	{% if section.title %}<h1>{{ section.title }}</h1>{% endif %}
+	{{ section.content | safe }}
+</main>
+{% endblock body %}

templates/shortcodes/alacarte_item.html

@@ -0,0 +1,5 @@
+<div class="alacarte-item">
+	<span class="alacarte-title">{{ title | safe }}</span>
+	<p class="alacarte-text1">{{ text1 | safe }}</p>
+	{% if text2 %}<p class="alacarte-text2">{{ text2 | safe }}</p>{% endif %}
+</div>