tobias/librezo-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

index example with tailwind

Browse Source
This commit is contained in:
oiseauroch
2023-05-24 12:47:04 +02:00
parent ebedc206ff
commit 1c973fb5af
11 changed files with 1650 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
content/_index.md
View File

@@ -2,31 +2,24 @@
title = "Librezo"
+++
<picture>
<picture class="mx-auto container flex flex-col max-w-3xl my-10 justify-center">
<source srcset="/img/logo-color-dark.png" media="(prefers-color-scheme: dark)" />
<source srcset="/img/logo-color-light.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
<img decoding="async" class="big-logo" src="/img/logo-color-light.png" alt="Logo Librezo" aria-hidden/>
<img decoding="async" class="" src="/img/logo-color-light.png" alt="Logo Librezo" aria-hidden/>
</picture>
<span class="slogan3">Collectif d'artisans numériques</span>
<div class="cities nn">
<p><span class="city">Aix</span> <span class="city">Bastia</span> <span class="city">Cajarc</span> <span class="city">Grasse</span> <span class="city">Le&nbsp;Havre</span> <span class="city">Limoux</span> <span class="city">Marseille</p>
<div class="madein-wrapper">
<img class="madein" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
<span class=" my-10 text-center text-6xl font-librezo">Collectif d'artisans numériques</span>
<div class=" my-20 flex flex-row justify-center items-center font-librezo text-xl md:text-3xl gap-x-2 md:gap-x-7 text-opacity-70 ">
<p class="gap-x-8 place-content-center flex flex-row max-w-[30%] flex-wrap"><span class="city">Aix</span> <span class="city">Bastia</span> <span class="city">Cajarc</span> <span class="city">Grasse</span> <span class="city">Le&nbsp;Havre</span> <span class="city">Limoux</span> <span class="city">Marseille</p>
<div class="">
<img class="-rotate-45" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
</div>
<p><span class="city">Montreuil</span> <span class="city">Nantes</span> <span class="city">Paris</span> <span class="city">Pau</span> <span class="city">Rennes</span> <span class="city">Rohanne</span> <span class="city">Toulouse</span></p>
<p class="gap-x-5 place-content-center flex flex-row max-w-[30%] flex-wrap"><span class="city">Montreuil</span> <span class="city">Nantes</span> <span class="city">Paris</span> <span class="city">Pau</span> <span class="city">Rennes</span> <span class="city">Rohanne</span> <span class="city">Toulouse</span></p>
</div>
<div style="text-align: center; margin: 32px 0;">
<a href="https://www.francenum.gouv.fr/activateurs/librezo" target="_blank">
<a class="mx-auto my-10" href="https://www.francenum.gouv.fr/activateurs/librezo" target="_blank">
<img alt="Activateur France Num" src="/img/francenum-activateur.jpg" style="width: 128px;"/>
</a>
</div>
<a href="/logiciel-libre" class="slogan1">Reprenez le contrôle</a>
<div class="square_boxes">
</a>
<a href="/logiciel-libre" class="hover:underline text-center font-librezo text-4xl md:text-8xl text-lib-blue">Reprenez le contrôle</a>
<div class="container mx-auto flex flex-row gap-x-5 my-10 flex-wrap gap-y-5 justify-center">
{{ square_box(title="Confidentialité", text="Vos données personnelles le restent") }}
{{ square_box(title="Résilience", text="Récupérez rapidement d'une panne avec des sauvegardes") }}
{{ square_box(title="Souveraineté", text="Reprenez le contrôle de votre infrastructure informatique") }}
@@ -38,33 +31,31 @@ title = "Librezo"
{{ square_box(title="Savoir-faire", text="Vous êtes au contact des experts") }}
{{ square_box(title="Solidarité", text="15% de nos bénéfices sont reversés au développement des logiciels utilisés") }}
</div>
<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo" style="margin-top: 96px;">Pour qui&#8239;?</h2>
<p class="text-center my-5">PME, Associations, Tout type de structure, Collectifs<p>
<h2 class="title-bar" style="margin-top: 96px;">Pour qui&#8239;?</h2>
<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo">Comment ça se passe&#8239;?</h2>
PME, Associations, Tout type de structure, Collectifs
<h3 class="text-4xl text-center w-full font-librezo my-5">Autonomisation de l'infrastructure réseau</h3>
<h2 class="title-bar">Comment ça se passe&#8239;?</h2>
<h3 class="title-bar2">Autonomisation de l'infrastructure réseau</h3>
<div class="process_boxes">
<div class="flex flex-row flex-wrap gap-x-1 container mx-auto justify-center">
{{ process_box(number="1", title="Étude", description="Définition du besoin et propositions de solutions adaptées.") }}
{{ process_box(number="2", title="Installation", description="Montage du serveur à domicile et installation du système et des composants logiciels.") }}
{{ process_box(number="3", title="Configuration", description="Réglages sur mesure et configurations de sécurité.") }}
{{ process_box(number="4", title="Acquisition", description="Votre serveur GNU/Linux est prêt et 100% entre vos mains. Tests.") }}
</div>
<h3 class="title-bar2">Accompagnements optionnels</h3>
<h3 class="text-4xl text-center w-full font-librezo my-5">Accompagnements optionnels</h3>
<div class="process_boxes">
<div class="flex flex-row flex-wrap gap-x-5 container mx-auto justify-center">
{{ process_box(number="5", title="Accompagnement utilisateur", description="Apprenez en quelques heures à utiliser vos outils.") }}
{{ process_box(number="6", title="Accompagnement administrateur", description="Devenez administrateur-système de votre propre infrastructure (plusieurs semaines).") }}
{{ process_box(number="7", title="Autonomie", description="Vous êtes capable de gérer votre système et vos applications : vous êtes autonome et n'avez plus besoin de tiers de confiance.") }}
</div>
<h2 class="title-bar" style="margin-top: 96px;">Ils nous font confiance</h2>
<h2 class="text-5xl text-center w-full bg-gradient-to-r from-lib-blue to-lib-purple text-white py-3 font-librezo" style="margin-top: 96px;">Ils nous font confiance</h2>
<div class="client_boxes">
<div class="flex flex-col container mx-auto">
{% client_box(
title = "Novelcast"
href = "https://novelcast.com"
@@ -103,6 +94,6 @@ PME, Associations, Tout type de structure, Collectifs
</div>
<div style="text-align:center">
<img style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
<div class="container mx-auto" style="text-align:center">
<img class="inline mb-5" style="max-width: 100%" alt="Librezo : Parce que oui !" src="/img/drawings/rejoignez-nous-affiche.webp" loading="lazy"/>
</div>