Refactor CSS styles and update HTML structure for improved layout and responsiveness
- Updated padding values for sections in custom CSS files to enhance spacing. - Introduced new card styles with hover effects for better user interaction. - Added new gradient card layout in the chill theme for a visually appealing design. - Removed obsolete sector layout and replaced it with a more flexible gradient card layout. - Enhanced feature list layout with improved pagination and sidebar integration. - Created a new shortcode for gradient card sections to streamline feature presentation.
This commit is contained in:
Boris Waaub
@@ -12,6 +12,8 @@ $chill-pink: #D50B51;
|
||||
|
||||
$chill-light-blue: #a0dcff;
|
||||
|
||||
.activity-sector{ --bg-color: #a0dcff; }
|
||||
|
||||
.badge-generation-document { --badge-color: #D50B51; }
|
||||
.badge-rapport-rgpd { --badge-color: #43B09B; }
|
||||
.badge-rapports-statistiques { --badge-color: #C9B99E; }
|
||||
|
||||
@@ -62,7 +62,7 @@ layout: "simple"
|
||||
"description": "Pour les structures qui souhaitent déléguer totalement la configuration.",
|
||||
"featured": true,
|
||||
"features": [
|
||||
"Tout les avantages du pack initial *",
|
||||
"Tous les avantages du pack initial *",
|
||||
"1 journée de paramétrage supplémentaire"
|
||||
],
|
||||
"additional_description": "* A partir du 4ème utilisateur: 40€ supplémentaire/an.",
|
||||
|
||||
@@ -1,32 +1,51 @@
|
||||
---
|
||||
title: Installation
|
||||
layout: "simple-card"
|
||||
developers:
|
||||
title: "Échanger avec les développeurs"
|
||||
description: "Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill."
|
||||
linkDescription: "Pour le rejoindre cliquez sur le lien ci-dessous :"
|
||||
linkLabel: "#chill-social-admin:matrix.org"
|
||||
linkUrl: "https://matrix.to/#/#chill-social-admin:matrix.org"
|
||||
qrLabel: "ou scannez le code QR :"
|
||||
qrImg: "/images/chill-admin.png"
|
||||
description: Installation et hébergement de Chill
|
||||
card: "Chill est un logiciel open-source disponible sous licence libre AGPL. Vous pouvez l'auto-héberger ou faire appel à un prestataire pour son installation et sa maintenance."
|
||||
bgColor: "activity-sector"
|
||||
layout: "gradient-card"
|
||||
---
|
||||
|
||||
<h3 class="content-subtitle bord-1 mb-2 mt-5">Auto-hébergé</h3>
|
||||
{{< gradient-card-section title="Auto-hébergé" description="Installez Chill sur votre propre serveur à partir des images Docker." >}}
|
||||
<div class="space-y-4">
|
||||
<p>Chill est un logiciel open-source disponible sous licence libre AGPL, dont le code source est hébergé sur <a href="https://gitlab.com/Chill-Projet" target="_blank" class="nav-link">son dépôt gitlab</a>.</p>
|
||||
|
||||
<p>Avant de l'installer, n'hésitez pas à tester <a href="http://demo.chill.social/" target="_blank" class="nav-link">la démo</a>.</p>
|
||||
|
||||
<p>Chill est une application web à installer sur un serveur dédié. L'application est alors disponible pour plusieurs utilisateurs sur une adresse internet, par exemple un sous-domaine du site web de votre organisation.</p>
|
||||
|
||||
<p>Chill est installable à partir d'images Docker. Moyennant des ressources internes en informatique, vous pouvez installer vous-même Chill en vous référant à la documentation d'installation.</p>
|
||||
|
||||
<p>La plupart des organisations utilisant Chill passent par un prestataire informatique pour son installation, son hébergement et sa maintenance.</p>
|
||||
|
||||
<a href="https://chill.readthedocs.io/en/latest/installation/index.html" target="_blank" class="btn btn-primary mt-4">
|
||||
Consulter la documentation d'installation
|
||||
</a>
|
||||
</div>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
Chill est un logiciel open-source disponible sous licence libre AGPL, dont le code source est hébergé sur <a href="https://gitlab.com/Chill-Projet" target="_blank" class="nav-link">son dépôt gitlab</a>.
|
||||
{{< gradient-card-section title="Par Champs Libres coopérative" description="Faites appel à Champs Libres pour l'installation, l'hébergement et la maintenance de Chill." >}}
|
||||
<div class="space-y-4">
|
||||
<ul class="list-disc list-inside">
|
||||
<li>Localisé en Belgique, à Namur</li>
|
||||
<li>Hébergement sécurisé et maintenance</li>
|
||||
<li>Support technique professionnel</li>
|
||||
</ul>
|
||||
|
||||
<a href="https://www.champs-libres.coop/page/social/" target="_blank" class="btn btn-primary mt-4">
|
||||
Visiter le site de Champs-Libres
|
||||
</a>
|
||||
</div>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
Avant de l'installer, n'hésitez pas à tester <a href="http://demo.chill.social/" target="_blank" class="nav-link">la démo</a>.
|
||||
<br>
|
||||
<br>
|
||||
Chill est une application web à installer sur un serveur dédié. L'application est alors disponible pour plusieurs utilisateurs sur une adresse internet, par exemple un sous-domaine du site web de votre organisation.
|
||||
<br>
|
||||
<br>
|
||||
Chill est installable à partir d'images Docker. Moyennant des ressources internes en informatique, vous pouvez installer vous-même Chill en vous référant à la <a href="https://chill.readthedocs.io/en/latest/installation/index.html" target="_blank" class="nav-link"><strong>documentation d'installation</strong></a>.
|
||||
|
||||
La plupart des organisations utilisant Chill passent par un prestataire informatique pour son installation, son hébergement et sa maintenance.
|
||||
|
||||
<h3 class="content-subtitle bord-2 mb-2 mt-5">Par Champs Libres coopérative</h3>
|
||||
|
||||
- Localisé en Belgique, à Namur
|
||||
- Site web: <a href="https://www.champs-libres.coop/page/social/" target="_blank" class="nav-link">Champs-Libres</a>
|
||||
{{< gradient-card-section title="Échanger avec les développeurs" description="Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill." >}}
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<p>Pour le rejoindre cliquez sur le lien ci-dessous :</p>
|
||||
<a href="https://matrix.to/#/#chill-social-admin:matrix.org" target="_blank" class="btn btn-primary">
|
||||
#chill-social-admin:matrix.org
|
||||
</a>
|
||||
<p>ou scannez le code QR :</p>
|
||||
<img src="/images/chill-admin.png" alt="QR Code Matrix" class="w-48 h-48">
|
||||
</div>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
|
||||
@@ -1,29 +1,26 @@
|
||||
---
|
||||
title: Manuels
|
||||
layout: "simple-card"
|
||||
description: Manuels d'utilisation de Chill
|
||||
card: "Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs.<br><br>
|
||||
- L'**utilisateur** est le travailleur social qui **utilise Chill dans son quotidien**.<br>
|
||||
- L'**administrateur** est un rôle spécifique, qui peut accéder à une interface d'administration de l'application, lui permettant de régler la **configuration de Chill**"
|
||||
bgColor: "activity-sector"
|
||||
layout: "gradient-card"
|
||||
---
|
||||
|
||||
<h5 class="content-subtitle bord-1 mb-2 mt-5">Manuels d'utilisation de Chill</h5>
|
||||
<div class="mb-4">
|
||||
Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs.
|
||||
|
||||
L'utilisateur est le travailleur social qui utilise Chill dans son quotidien.
|
||||
{{< gradient-card-section title="Téléchargement des manuels" description="Accédez aux manuels d'utilisation de Chill pour les administrateurs et les utilisateurs." >}}
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20administrateur.pdf" target="blank" class="btn btn-primary">
|
||||
Télécharger le manuel administrateur
|
||||
</a>
|
||||
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20utilisateur.pdf" target="blank" class="btn btn-primary">
|
||||
Télécharger le manuel utilisateur
|
||||
</a>
|
||||
</div>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
L'administrateur est un rôle spécifique, qui peut accèder à une interface d'administration de l'application, lui permettant de régler la configuration de Chill.
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20administrateur.pdf" target="blank" class="col text-center px-5 py-3 rounded-lg bg-primary-400 text-white hover:bg-primary-700 font-medium transition duration-300">
|
||||
Télecharger le manuel administrateur
|
||||
</a>
|
||||
<a href="https://gitea.champs-libres.be/Chill-project/manuals/releases/download/latest/Manuel%20utilisateur.pdf" target="blank" class="text-center px-5 py-3 rounded-lg bg-primary-400 text-white hover:bg-primary-700 font-medium transition duration-300">
|
||||
Télecharger le manuel utilisateur
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h5 class="content-subtitle bord-2 mb-2 mt-5">Formation des utilisateurs</h5>
|
||||
<div class="mb-4">
|
||||
Renseignez-vous pour organiser une journée de formation à l'utilisation de Chill depuis la <a href="/contact" class="nav-link">page contact</a>
|
||||
</div>
|
||||
{{< gradient-card-section title="Formation des utilisateurs" description="Organisez une journée de formation à l'utilisation de Chill." >}}
|
||||
<a href="/contact" class="btn btn-primary mt-4">Contactez-nous</a>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
|
||||
@@ -1,32 +1,51 @@
|
||||
---
|
||||
title: Documentation technique
|
||||
layout: "simple"
|
||||
developers:
|
||||
title: "Échanger avec les développeurs"
|
||||
description: "Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill."
|
||||
linkDescription: "Pour le rejoindre cliquez sur le lien ci-dessous :"
|
||||
linkLabel: "#chill-social-admin:matrix.org"
|
||||
linkUrl: "https://matrix.to/#/#chill-social-admin:matrix.org"
|
||||
qrLabel: "ou scannez le code QR :"
|
||||
qrImg: "/images/chill-admin.png"
|
||||
description: Ressources techniques pour développeurs Chill
|
||||
card: "Accédez au code source, à la documentation technique et aux outils de développement de Chill."
|
||||
bgColor: "activity-sector"
|
||||
layout: "gradient-card"
|
||||
---
|
||||
<div class="max-w-xxl mx-auto p-6 bg-white rounded shadow" >
|
||||
<h3 class="content-subtitle bord-1 mb-2 mt-5">Code source de Chill</h3>
|
||||
Le code source de CHILL est hébergé sur GitLab.
|
||||
|
||||
Le dépôt <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles" target="blank">chill-bundles</a> comporte les fonctionnalités principales de Chill. Ce dépôt est un ensemble de bundles Symfony.
|
||||
{{< gradient-card-section title="Code source de Chill" description="Le code source de Chill est hébergé sur GitLab." >}}
|
||||
<div class="space-y-4">
|
||||
<p>Le dépôt <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles" target="_blank">chill-bundles</a> comporte les fonctionnalités principales de Chill. Ce dépôt est un ensemble de bundles Symfony.</p>
|
||||
|
||||
<p>Pour être déployées, il est préférable de les inclure dans une application Symfony en les incluant dans les dépendances Composer. De cette manière, il est aussi possible de personnaliser la configuration et l'exécution de l'application.</p>
|
||||
|
||||
<a href="https://gitlab.com/Chill-Projet/chill-bundles" target="_blank" class="btn btn-primary mt-4">
|
||||
Accéder au dépôt GitLab
|
||||
</a>
|
||||
</div>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
{{< gradient-card-section title="Issues et tickets" description="Signalez des bugs ou proposez des améliorations." >}}
|
||||
<div class="space-y-4">
|
||||
<p>Les tickets concernant le code de Chill se situent dans le dépôt chill-bundles.</p>
|
||||
|
||||
<a href="https://gitlab.com/Chill-Projet/chill-bundles/-/issues" target="_blank" class="btn btn-primary mt-4">
|
||||
Consulter les tickets
|
||||
</a>
|
||||
</div>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
Pour être déployées, il est préférable de les inclure dans une application Symfony en les incluant dans les dépendances Composer. De cette manière, il est aussi possible de personnaliser la configuration et l'exécution de l'application. La procédure est expliquée dans la <a class="nav-link" href="https://docs.chill.social/en/latest" target="blank"> documentation</a>.
|
||||
{{< gradient-card-section title="Documentation technique" description="Consultez la documentation complète pour développeurs." >}}
|
||||
<div class="space-y-4">
|
||||
<p>La documentation technique de Chill explique la procédure d'installation, la configuration et le développement de modules personnalisés.</p>
|
||||
|
||||
<a href="https://docs.chill.social/en/latest/" target="_blank" class="btn btn-primary mt-4">
|
||||
Consulter la documentation
|
||||
</a>
|
||||
</div>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
|
||||
<h5 class="content-subtitle bord-2 mb-2 mt-5">Issues</h5>
|
||||
|
||||
Les tickets concernant le code de Chill se situent par conséquent dans ce dépôt chill-bundles, voir <a class="nav-link" href="https://gitlab.com/Chill-Projet/chill-bundles/-/issues" target="blank"> tickets CHILL</a>.
|
||||
|
||||
|
||||
<h5 class="content-subtitle bord-3 mb-2 mt-5">Documentation technique</h5>
|
||||
|
||||
La documentation technique de Chill se trouve à l'adresse suivante: <a class="nav-link" href="https://docs.chill.social/en/latest/" target="blank">documentation CHILL</a>
|
||||
</div>
|
||||
{{< gradient-card-section title="Échanger avec les développeurs" description="Il existe un salon sur la messagerie Matrix, pour échanger avec les développeurs de Chill." >}}
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<p>Pour le rejoindre cliquez sur le lien ci-dessous :</p>
|
||||
<a href="https://matrix.to/#/#chill-social-admin:matrix.org" target="_blank" class="btn btn-primary">
|
||||
#chill-social-admin:matrix.org
|
||||
</a>
|
||||
<p>ou scannez le code QR :</p>
|
||||
<img src="/images/chill-admin.png" alt="QR Code Matrix" class="w-48 h-48">
|
||||
</div>
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
---
|
||||
title: "Secteur d'activités"
|
||||
layout: "sector"
|
||||
description: "Une solution pensée pour le secteur social, dans toute sa diversité"
|
||||
card: "CHILL est une solution complète conçue pour s'adapter aux réalités nombreuses du secteur social. Grâce à sa grande flexibilité, elle répond aux besoins de structures très différentes, quels que soient leur taille ou le public accompagné."
|
||||
layout: "gradient-card"
|
||||
bgColor: "activity-sector"
|
||||
client_logos:
|
||||
- name: "amli"
|
||||
logo: "/images/logos/amli.png"
|
||||
@@ -50,23 +53,13 @@ client_logos:
|
||||
logo: "/images/logos/vendée.png"
|
||||
---
|
||||
|
||||
{{< section-container class="bg-gradient-to-b from-secondary-50 via-secondary-50 to-white pt-20 pb-32" >}}
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6">Secteur d'activités</h1>
|
||||
<p class="text-xl text-gray-600 mb-16">Une solution pensée pour le secteur social, dans toute sa diversité</p>
|
||||
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm p-8">
|
||||
<p class="text-xl text-gray-600">
|
||||
CHILL est une solution complète conçue pour s’adapter aux réalités nombreuses du secteur social. Grâce à sa grande flexibilité, elle répond aux besoins de structures très différentes, quels que soient leur taille ou le public accompagné.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{< /section-container >}}
|
||||
|
||||
{{< sector-section title="CHILL, un logiciel ancré dans les valeurs du social" description="CHILL est édité par **Champs Libres**, une **coopérative belge à finalité sociale** active depuis plusieurs années dans le développement de solutions numériques orientées vers l’utilité sociale et collective. Champs Libres promeut le **logiciel libre** et travaille régulièrement avec des organisations du secteur non marchand, des pouvoirs publics et des associations, en développant des outils qui répondent aux besoins réels des utilisateurs et favorisent le partage et la réutilisation du code pour le bien commun.">}}
|
||||
|
||||
{{< gradient-card-section title="CHILL, un logiciel ancré dans les valeurs du social" gradient-card="CHILL est édité par **Champs Libres**, une **coopérative belge à finalité sociale** active depuis plusieurs années dans le développement de solutions numériques orientées vers l’utilité sociale et collective. Champs Libres promeut le **logiciel libre** et travaille régulièrement avec des organisations du secteur non marchand, des pouvoirs publics et des associations, en développant des outils qui répondent aux besoins réels des utilisateurs et favorisent le partage et la réutilisation du code pour le bien commun.">}}
|
||||
Cette approche pragmatique et éthique signifie que CHILL n’est pas seulement un outil : c’est un projet qui s’est construit <b>avec et pour les travailleurs sociaux</b>, en s’appuyant sur une compréhension profonde des pratiques professionnelles et des défis du terrain.
|
||||
{{< /sector-section >}}
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
{{< sector-section title="Des domaines d’action variés" description="CHILL est aujourd’hui utilisé dans de nombreux secteurs de l’action sociale">}}
|
||||
{{< gradient-card-section title="Des domaines d’action variés" description="CHILL est aujourd’hui utilisé dans de nombreux secteurs de l’action sociale">}}
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{{< value-card
|
||||
@@ -94,11 +87,11 @@ Cette approche pragmatique et éthique signifie que CHILL n’est pas seulement
|
||||
icon="/images/sectors/home-heart.svg"
|
||||
>}}
|
||||
</div>
|
||||
{{< /sector-section >}}
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
{{< sector-section title="Une solution adaptée à toutes les organisations" description="Que vous soyez une petite structure locale ou une organisation plus large regroupant plusieurs dizaines, voire centaines de travailleurs sociaux, CHILL s’adapte à votre fonctionnement et à vos pratiques de terrain.">}}
|
||||
{{< gradient-card-section title="Une solution adaptée à toutes les organisations" description="Que vous soyez une petite structure locale ou une organisation plus large regroupant plusieurs dizaines, voire centaines de travailleurs sociaux, CHILL s’adapte à votre fonctionnement et à vos pratiques de terrain.">}}
|
||||
{{< client-logos title="Ils font déjà confiance à CHILL" >}}
|
||||
{{< /sector-section >}}
|
||||
{{< /gradient-card-section >}}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,370 +1,299 @@
|
||||
.activity-sector {
|
||||
--bg-color: #a0dcff; }
|
||||
|
||||
.badge-generation-document {
|
||||
--badge-color: #D50B51;
|
||||
}
|
||||
--badge-color: #D50B51; }
|
||||
|
||||
.badge-rapport-rgpd {
|
||||
--badge-color: #43B09B;
|
||||
}
|
||||
--badge-color: #43B09B; }
|
||||
|
||||
.badge-rapports-statistiques {
|
||||
--badge-color: #C9B99E;
|
||||
}
|
||||
--badge-color: #C9B99E; }
|
||||
|
||||
.badge-suivi-accompagnements {
|
||||
--badge-color: #EDC74B;
|
||||
}
|
||||
--badge-color: #EDC74B; }
|
||||
|
||||
.badge-suivi-decisions {
|
||||
--badge-color: #a0dcff;
|
||||
}
|
||||
--badge-color: #a0dcff; }
|
||||
|
||||
.badge-suivi-usagers {
|
||||
--badge-color: #333333;
|
||||
}
|
||||
--badge-color: #333333; }
|
||||
|
||||
.badge-rendez-vous {
|
||||
--badge-color: #E27A3E;
|
||||
}
|
||||
--badge-color: #E27A3E; }
|
||||
|
||||
@font-face {
|
||||
font-family: "Lato", Arial;
|
||||
font-family: 'Lato', Arial;
|
||||
src: url("assets/fonts/Lato/Lato-Regular.ttf") format("truetype");
|
||||
font-display: optional;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
font-style: normal; }
|
||||
body {
|
||||
font-family: "Lato", sans-serif;
|
||||
}
|
||||
body .highlight {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
body .highlight-1 {
|
||||
background-color: #43B09B;
|
||||
}
|
||||
body .highlight-2 {
|
||||
background-color: #D50B51;
|
||||
}
|
||||
body .highlight-3 {
|
||||
background-color: #EDC74B;
|
||||
}
|
||||
font-family: 'Lato', sans-serif; }
|
||||
body .highlight {
|
||||
padding: .25rem; }
|
||||
body .highlight-1 {
|
||||
background-color: #43B09B; }
|
||||
body .highlight-2 {
|
||||
background-color: #D50B51; }
|
||||
body .highlight-3 {
|
||||
background-color: #EDC74B; }
|
||||
|
||||
header.header {
|
||||
background-color: #0d242e;
|
||||
}
|
||||
background-color: #0d242e; }
|
||||
|
||||
footer.footer {
|
||||
background-color: #0d242e;
|
||||
}
|
||||
background-color: #0d242e; }
|
||||
|
||||
.chill-pres {
|
||||
padding-top: 0rem;
|
||||
}
|
||||
padding-top: 0rem; }
|
||||
|
||||
.navbar .btn-primary {
|
||||
background-color: #f46839;
|
||||
border: 1px solid #f46839;
|
||||
color: white;
|
||||
}
|
||||
.navbar .btn-primary:hover {
|
||||
background-color: #E27A3E;
|
||||
border: 1px solid #E27A3E;
|
||||
}
|
||||
color: white; }
|
||||
.navbar .btn-primary:hover {
|
||||
background-color: #E27A3E;
|
||||
border: 1px solid #E27A3E; }
|
||||
.navbar .lang-select {
|
||||
color: white;
|
||||
}
|
||||
color: white; }
|
||||
|
||||
section.hero {
|
||||
background-color: #0d242e;
|
||||
}
|
||||
section.hero h1 {
|
||||
color: #43B09B;
|
||||
}
|
||||
background-color: #0d242e; }
|
||||
section.hero h1 {
|
||||
color: #43B09B; }
|
||||
section.section-1 {
|
||||
background-color: white;
|
||||
padding-top: 10rem;
|
||||
}
|
||||
section.section-1 li {
|
||||
font-weight: 600;
|
||||
}
|
||||
section.section-2 .container {
|
||||
color: #0d242e;
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
section.section-2 .container h2 {
|
||||
line-height: 3.5rem;
|
||||
}
|
||||
padding-top: 10rem; }
|
||||
section.section-1 li {
|
||||
font-weight: 600; }
|
||||
section.section-2 {
|
||||
background: rgb(233, 227, 216);
|
||||
background: linear-gradient(180deg, rgb(233, 227, 216) 0%, rgb(239, 239, 239) 100%);
|
||||
}
|
||||
background: #e9e3d8;
|
||||
background: linear-gradient(180deg, #e9e3d8 0%, #efefef 100%); }
|
||||
section.section-2 .container {
|
||||
color: #0d242e;
|
||||
text-align: center;
|
||||
margin-top: 4rem; }
|
||||
section.section-2 .container h2 {
|
||||
line-height: 3.5rem; }
|
||||
section.section-3 {
|
||||
background: rgb(239, 239, 239);
|
||||
background: linear-gradient(180deg, rgb(239, 239, 239) 0%, rgb(255, 255, 255) 100%);
|
||||
}
|
||||
section.section-3 h2 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
section.section-3 h2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
left: -10%;
|
||||
top: -30%;
|
||||
margin-left: -35px;
|
||||
background-color: #f46839;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 50px;
|
||||
}
|
||||
background: #efefef;
|
||||
background: linear-gradient(180deg, #efefef 0%, white 100%); }
|
||||
section.section-3 h2 {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
section.section-3 h2:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
left: -10%;
|
||||
top: -30%;
|
||||
margin-left: -35px;
|
||||
background-color: #f46839;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 50px; }
|
||||
section.section-4 {
|
||||
position: relative;
|
||||
background-color: white;
|
||||
}
|
||||
section.section-4 .row {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
section.section-4 h4 {
|
||||
font-weight: bold;
|
||||
height: 175px;
|
||||
color: #0d242e;
|
||||
border: 1px dashed #0d242e;
|
||||
border-radius: 15px;
|
||||
padding: 3rem;
|
||||
}
|
||||
section.section-4 .btn-primary {
|
||||
position: absolute;
|
||||
top: 52%;
|
||||
left: 28%;
|
||||
}
|
||||
background-color: white; }
|
||||
section.section-4 .row {
|
||||
padding-bottom: 5rem; }
|
||||
section.section-4 h4 {
|
||||
font-weight: bold;
|
||||
height: 175px;
|
||||
color: #0d242e;
|
||||
border: 1px dashed #0d242e;
|
||||
border-radius: 15px;
|
||||
padding: 3rem; }
|
||||
section.section-4 .btn-primary {
|
||||
position: absolute;
|
||||
top: 52%;
|
||||
left: 28%; }
|
||||
section.section-5 {
|
||||
background-color: rgba(67, 176, 155, 0.5);
|
||||
}
|
||||
background-color: rgba(67, 176, 155, 0.5); }
|
||||
section.section-6 {
|
||||
background-color: #0d242e !important;
|
||||
background-repeat: repeat;
|
||||
background-position: top center;
|
||||
background-image: url("/images/bg/pattern-1.png");
|
||||
}
|
||||
background-image: url("/images/bg/pattern-1.png"); }
|
||||
section.section-7 h2 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
section.section-7 h2:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
left: -15%;
|
||||
top: -30%;
|
||||
margin-left: -35px;
|
||||
background-color: #fcc958;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
z-index: 1; }
|
||||
section.section-7 h2:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
left: -15%;
|
||||
top: -30%;
|
||||
margin-left: -35px;
|
||||
background-color: #fcc958;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 0; }
|
||||
|
||||
section h2.title {
|
||||
color: #0d242e;
|
||||
}
|
||||
color: #0d242e; }
|
||||
section.big-text h2, section.big-text p, section.li-block h2, section.li-block p {
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
margin-right: auto; }
|
||||
section.big-text .container .row > div:last-child {
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
margin-left: 10%; }
|
||||
section.li-block .container .row > div:last-child {
|
||||
width: 100%;
|
||||
}
|
||||
width: 100%; }
|
||||
section.li-block .container .row > div ul {
|
||||
display: flex;
|
||||
}
|
||||
section.li-block .container .row > div ul li i:first-child {
|
||||
display: none;
|
||||
}
|
||||
section.li-block .container .row > div ul li {
|
||||
flex: 1 0 0;
|
||||
margin: 0.5em 2rem 0.5em 2rem;
|
||||
padding: 2em 1em 1em 1em;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
display: flex; }
|
||||
section.li-block .container .row > div ul li {
|
||||
flex: 1 0 0;
|
||||
margin: 0.5em 2rem 0.5em 2rem;
|
||||
padding: 2em 1em 1em 1em;
|
||||
text-align: center;
|
||||
border-radius: 20px; }
|
||||
section.li-block .container .row > div ul li i:first-child {
|
||||
display: none; }
|
||||
section.li-block.section-1 ul li {
|
||||
font-weight: 500;
|
||||
font-size: large;
|
||||
position: relative;
|
||||
}
|
||||
section.li-block.section-1 ul li:nth-child(1) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
section.li-block.section-1 ul li:nth-child(1):before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 44%;
|
||||
top: -60%;
|
||||
margin-left: -35px;
|
||||
background-color: #56c4aa;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
section.li-block.section-1 ul li:nth-child(2) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
section.li-block.section-1 ul li:nth-child(2):before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 44%;
|
||||
top: -60%;
|
||||
margin-left: -35px;
|
||||
background-color: #f0384d;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 50px;
|
||||
}
|
||||
section.li-block.section-1 ul li:nth-child(3) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
section.li-block.section-1 ul li:nth-child(3):before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 44%;
|
||||
top: -60%;
|
||||
margin-left: -35px;
|
||||
background-color: #E27A3E;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
section.li-block.section-1 ul li:nth-child(4) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
section.li-block.section-1 ul li:nth-child(4):before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 44%;
|
||||
top: -60%;
|
||||
margin-left: -35px;
|
||||
background-color: #fcc958;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 50px;
|
||||
}
|
||||
position: relative; }
|
||||
section.li-block.section-1 ul li:nth-child(1) {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
section.li-block.section-1 ul li:nth-child(1):before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 44%;
|
||||
top: -60%;
|
||||
margin-left: -35px;
|
||||
background-color: #56c4aa;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 0; }
|
||||
section.li-block.section-1 ul li:nth-child(2) {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
section.li-block.section-1 ul li:nth-child(2):before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 44%;
|
||||
top: -60%;
|
||||
margin-left: -35px;
|
||||
background-color: #f0384d;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 50px; }
|
||||
section.li-block.section-1 ul li:nth-child(3) {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
section.li-block.section-1 ul li:nth-child(3):before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 44%;
|
||||
top: -60%;
|
||||
margin-left: -35px;
|
||||
background-color: #E27A3E;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 0; }
|
||||
section.li-block.section-1 ul li:nth-child(4) {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
section.li-block.section-1 ul li:nth-child(4):before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
left: 44%;
|
||||
top: -60%;
|
||||
margin-left: -35px;
|
||||
background-color: #fcc958;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
border-radius: 50px; }
|
||||
section.li-block.section-5 .container .row p {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
margin-bottom: 5rem; }
|
||||
section.li-block.section-5 .container .row ul li {
|
||||
border-radius: 1em;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
width: 400px;
|
||||
height: 180px;
|
||||
padding: 0.85rem;
|
||||
padding: .85rem;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
transition: 0.6s ease-in;
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
height: 220px;
|
||||
width: 25px;
|
||||
border-radius: 32px;
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li:nth-child(1)::before {
|
||||
background-color: rgba(240, 56, 77, 0.85);
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li:nth-child(2)::before {
|
||||
background-color: rgba(232, 148, 99, 0.85);
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li:nth-child(3)::before {
|
||||
background-color: rgba(67, 178, 157, 0.85);
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li:nth-child(4)::before {
|
||||
background-color: rgb(241, 210, 117);
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li:hover::before {
|
||||
transition-delay: 0.2s;
|
||||
transform: scale(40);
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li:hover h5 {
|
||||
color: #EBEBEB;
|
||||
}
|
||||
section.li-block.section-5 .container .row ul li h5 {
|
||||
color: #0d242e;
|
||||
font-weight: bold;
|
||||
}
|
||||
transition: 0.6s ease-in; }
|
||||
section.li-block.section-5 .container .row ul li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
height: 220px;
|
||||
width: 25px;
|
||||
border-radius: 32px;
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 0.25s ease-out; }
|
||||
section.li-block.section-5 .container .row ul li:nth-child(1)::before {
|
||||
background-color: rgba(240, 56, 77, 0.85); }
|
||||
section.li-block.section-5 .container .row ul li:nth-child(2)::before {
|
||||
background-color: rgba(232, 148, 99, 0.85); }
|
||||
section.li-block.section-5 .container .row ul li:nth-child(3)::before {
|
||||
background-color: rgba(67, 178, 157, 0.85); }
|
||||
section.li-block.section-5 .container .row ul li:nth-child(4)::before {
|
||||
background-color: #f1d275; }
|
||||
section.li-block.section-5 .container .row ul li:hover::before {
|
||||
transition-delay: 0.2s;
|
||||
transform: scale(40); }
|
||||
section.li-block.section-5 .container .row ul li:hover {
|
||||
color: #ffffff; }
|
||||
section.li-block.section-5 .container .row ul li:hover h5 {
|
||||
color: #EBEBEB; }
|
||||
section.li-block.section-5 .container .row ul li h5 {
|
||||
color: #0d242e;
|
||||
font-weight: bold; }
|
||||
section.li-block a.btn-chill {
|
||||
background-color: #fc3636;
|
||||
}
|
||||
background-color: #fc3636; }
|
||||
|
||||
.download {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
}
|
||||
.download a {
|
||||
text-decoration: none;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
display: block; }
|
||||
.download a {
|
||||
text-decoration: none;
|
||||
padding: .5rem; }
|
||||
|
||||
section.dark p {
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
}
|
||||
font-weight: bolder; }
|
||||
|
||||
.hop {
|
||||
color: red;
|
||||
}
|
||||
color: red; }
|
||||
|
||||
.content-subtitle {
|
||||
padding-left: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
font-weight: bold; }
|
||||
|
||||
.bord-1 {
|
||||
border-left: 4px solid #E27A3E;
|
||||
}
|
||||
border-left: 4px solid #E27A3E; }
|
||||
|
||||
.bord-2 {
|
||||
border-left: 4px solid #C9B99E;
|
||||
}
|
||||
border-left: 4px solid #C9B99E; }
|
||||
|
||||
.bord-3 {
|
||||
border-left: 4px solid #EDC74B;
|
||||
}
|
||||
border-left: 4px solid #EDC74B; }
|
||||
|
||||
.bord-4 {
|
||||
border-left: 4px solid #43B09B;
|
||||
}
|
||||
border-left: 4px solid #43B09B; }
|
||||
|
||||
.chapo {
|
||||
font-size: large;
|
||||
@@ -373,144 +302,105 @@ section.dark p {
|
||||
padding-bottom: 2rem;
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.chapo::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
margin: 10px auto;
|
||||
width: 15%;
|
||||
height: 6px;
|
||||
background: #DE4849;
|
||||
}
|
||||
margin-bottom: 5rem; }
|
||||
.chapo::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
margin: 10px auto;
|
||||
width: 15%;
|
||||
height: 6px;
|
||||
background: #DE4849; }
|
||||
|
||||
figure.image {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
figure.image.left {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
figure.image.right {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
figure.image.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
figure.image img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
flex-direction: column; }
|
||||
figure.image.left {
|
||||
float: left;
|
||||
margin-right: 1.5em; }
|
||||
figure.image.right {
|
||||
float: right;
|
||||
margin-left: 1.5em; }
|
||||
figure.image.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
figure.image img {
|
||||
margin-bottom: 0; }
|
||||
|
||||
.text-brochure {
|
||||
text-align: center;
|
||||
}
|
||||
text-align: center; }
|
||||
|
||||
@media screen and (max-width: 1536px) {
|
||||
section.li-block.section-5 .container .row ul {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
flex-wrap: wrap; }
|
||||
section.li-block.section-5 .container .row ul li {
|
||||
flex: 30%;
|
||||
}
|
||||
}
|
||||
flex: 30%; } }
|
||||
@media screen and (max-width: 1023px) {
|
||||
section.section-4 h4 {
|
||||
height: 224px;
|
||||
}
|
||||
height: 224px; }
|
||||
section.section-4 .btn-primary {
|
||||
top: 56%;
|
||||
}
|
||||
top: 56%; }
|
||||
|
||||
section.li-block.section-5 .container .row ul {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
flex-wrap: wrap; }
|
||||
section.li-block.section-5 .container .row ul li {
|
||||
flex: 50%;
|
||||
}
|
||||
}
|
||||
flex: 50%; } }
|
||||
@media screen and (max-width: 767px) {
|
||||
section.hero {
|
||||
height: 110vh;
|
||||
}
|
||||
height: 110vh; }
|
||||
section.section-3 h2:before {
|
||||
top: -70%;
|
||||
left: 5%;
|
||||
z-index: -1;
|
||||
}
|
||||
z-index: -1; }
|
||||
section.section-4 h4 {
|
||||
height: 280px;
|
||||
}
|
||||
height: 280px; }
|
||||
section.section-4 .btn-primary {
|
||||
top: 64%;
|
||||
}
|
||||
top: 64%; }
|
||||
|
||||
section.li-block .container .row > div ul {
|
||||
flex-direction: column;
|
||||
}
|
||||
section.li-block .container .row > div ul li {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
flex-direction: column; }
|
||||
section.li-block .container .row > div ul li {
|
||||
margin-bottom: 4rem; }
|
||||
section.li-block.section-1 ul li:nth-child(1) {
|
||||
top: -66%;
|
||||
}
|
||||
top: -66%; }
|
||||
section.li-block.section-1 ul li:nth-child(2) {
|
||||
top: -66%;
|
||||
}
|
||||
top: -66%; }
|
||||
section.li-block.section-1 ul li:nth-child(3):before {
|
||||
top: -85%;
|
||||
}
|
||||
top: -85%; }
|
||||
section.li-block.section-1 ul li:nth-child(4):before {
|
||||
top: -85%;
|
||||
}
|
||||
top: -85%; }
|
||||
section.li-block.section-5 .container .row ul {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
flex-wrap: wrap; }
|
||||
section.li-block.section-5 .container .row ul li {
|
||||
flex: 50%;
|
||||
}
|
||||
}
|
||||
flex: 50%; } }
|
||||
@media screen and (max-width: 513px) {
|
||||
section.hero {
|
||||
height: 120vh;
|
||||
}
|
||||
height: 120vh; }
|
||||
section.section-4 h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
font-size: 1.1rem; }
|
||||
section.section-4 .btn-primary {
|
||||
top: 64%;
|
||||
}
|
||||
top: 64%; }
|
||||
section.section-5 .container .row ul li {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
width: 350px; } }
|
||||
@media screen and (max-width: 470px) {
|
||||
section.section-4 h4 {
|
||||
height: 280px;
|
||||
}
|
||||
height: 280px; }
|
||||
section.section-4 .btn-primary {
|
||||
top: 64%;
|
||||
}
|
||||
top: 64%; }
|
||||
|
||||
section.li-block.section-1 ul li:nth-child(3):before {
|
||||
top: -70%;
|
||||
}
|
||||
top: -70%; }
|
||||
section.li-block.section-1 ul li:nth-child(4):before {
|
||||
top: -70%;
|
||||
}
|
||||
top: -70%; }
|
||||
section.li-block.section-5 .container .row ul {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
flex-wrap: wrap; }
|
||||
section.li-block.section-5 .container .row ul li {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
width: 350px; } }
|
||||
@media screen and (max-width: 420px) {
|
||||
section.li-block.section-5 .container .row ul li {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
width: 300px; } }
|
||||
|
||||
/*# sourceMappingURL=custom.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1896,17 +1896,36 @@ body {
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
padding: 1.5rem;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
@@ -2437,6 +2456,10 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.max-h-12 {
|
||||
max-height: 3rem;
|
||||
}
|
||||
@@ -2497,6 +2520,10 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-48 {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.\!max-w-none {
|
||||
max-width: none !important;
|
||||
}
|
||||
@@ -2587,6 +2614,14 @@ body {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.list-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
@@ -2603,10 +2638,6 @@ body {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -3127,6 +3158,10 @@ body {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
@@ -4571,11 +4606,6 @@ body {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:py-20 {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.sm\:py-32 {
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 8rem;
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
.section {
|
||||
@apply py-16 md:py-24;
|
||||
@apply py-8 md:py-16;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
30
themes/chill-theme/layouts/_default/gradient-card.html
Normal file
30
themes/chill-theme/layouts/_default/gradient-card.html
Normal file
@@ -0,0 +1,30 @@
|
||||
{{ define "main" }}
|
||||
<div class="pt-2 {{ .Params.bgColor }}">
|
||||
<style>
|
||||
.gradient-bg {
|
||||
background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-color) 25%, white), white);
|
||||
}
|
||||
</style>
|
||||
<div class="absolute inset-x-0 top-0 h-full gradient-bg opacity-75"></div>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<main>
|
||||
<article>
|
||||
<div class="relative isolate overflow-hidden">
|
||||
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6">{{ .Params.title }}</h1>
|
||||
<p class="text-xl text-gray-600 mb-16">{{ .Params.description }}</p>
|
||||
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm p-8">
|
||||
<p class="text-xl text-gray-600 text-left">
|
||||
{{ .Params.card | markdownify }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,5 +0,0 @@
|
||||
{{ define "main" }}
|
||||
<article class="post">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ end }}
|
||||
@@ -1,79 +1,81 @@
|
||||
{{ define "main" }}
|
||||
<div class="pt-2">
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full md:w-1/4 lg:w-1/5 pt-1">
|
||||
{{ partial "features-sidebar.html" . }}
|
||||
</div>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full md:w-1/4 lg:w-1/5 pt-1">
|
||||
{{ partial "features-sidebar.html" . }}
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="w-full md:w-3/4 lg:w-4/5 pt-2">
|
||||
<article class="feature-page">
|
||||
<h1 class="text-4xl font-bold text-center mb-5">{{ .Title }}</h1>
|
||||
{{ with .Params.description }}
|
||||
<p class="text-center font-light text-gray-500 sm:text-xl">{{ . }}</p>
|
||||
{{ end }}
|
||||
<!-- Main Content -->
|
||||
<main class="w-full md:w-3/4 lg:w-4/5 pt-2">
|
||||
<article class="feature-page">
|
||||
<h1 class="text-4xl font-bold text-center mb-5">{{ .Title }}</h1>
|
||||
{{ with .Params.description }}
|
||||
<p class="text-center font-light text-gray-500 sm:text-xl">{{ . }}</p>
|
||||
{{ end }}
|
||||
|
||||
<!-- Main Content -->
|
||||
<!-- Main Content -->
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{{ $paginator := .Paginate (.Pages.ByWeight) }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ partial "feature-card.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{{ $paginator := .Paginate (.Pages.ByWeight) }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ partial "feature-card.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ $paginator := .Paginate .Pages }}
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<nav class="mt-12 flex justify-between items-center">
|
||||
{{ if $paginator.HasPrev }}
|
||||
<a href="{{ $paginator.Prev.URL }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||
</svg>
|
||||
{{ i18n "previous" }}
|
||||
</a>
|
||||
{{ else }}
|
||||
<div></div>
|
||||
{{ end }}
|
||||
{{ $paginator := .Paginate .Pages }}
|
||||
{{ if gt $paginator.TotalPages 1 }}
|
||||
<nav class="mt-12 flex justify-between items-center">
|
||||
{{ if $paginator.HasPrev }}
|
||||
<a href="{{ $paginator.Prev.URL }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||
</svg>
|
||||
{{ i18n "previous" }}
|
||||
</a>
|
||||
{{ else }}
|
||||
<div></div>
|
||||
{{ end }}
|
||||
|
||||
<div class="flex space-x-2">
|
||||
{{ range $paginator.Pagers }}
|
||||
{{ if eq . $paginator }}
|
||||
<div class="flex space-x-2">
|
||||
{{ range $paginator.Pagers }}
|
||||
{{ if eq . $paginator }}
|
||||
<span class="px-4 py-2 bg-primary-400 text-white rounded-lg">
|
||||
{{ .PageNumber }}
|
||||
</span>
|
||||
{{ else }}
|
||||
<a href="{{ .URL }}"
|
||||
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
|
||||
{{ else }}
|
||||
<a href="{{ .URL }}"
|
||||
class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
|
||||
{{ .PageNumber }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if $paginator.HasNext }}
|
||||
<a href="{{ $paginator.Next.URL }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||
{{ i18n "next" }}
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{{ else }}
|
||||
<div></div>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if $paginator.HasNext }}
|
||||
<a href="{{ $paginator.Next.URL }}"
|
||||
class="inline-flex items-center px-4 py-2 bg-primary-400 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200">
|
||||
{{ i18n "next" }}
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
{{ else }}
|
||||
<div></div>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
<!-- Global CTA -->
|
||||
{{ partial "components/cta.html" . }}
|
||||
</article>
|
||||
</main>
|
||||
<!-- Global CTA -->
|
||||
{{ partial "components/cta.html" . }}
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@@ -1,98 +1,102 @@
|
||||
{{ define "main" }}
|
||||
<div class="pt-2 feature-page badge-{{ .Params.badgeColor }}">
|
||||
<style>
|
||||
.badge {
|
||||
background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
|
||||
color: #222;
|
||||
}
|
||||
.gradient-bg {
|
||||
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 15%, white), white);
|
||||
}
|
||||
</style>
|
||||
<div class="absolute inset-x-0 top-0 h-96 gradient-bg opacity-75"></div>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full md:w-1/3 lg:w-1/4 pt-1">
|
||||
{{ partial "features-sidebar.html" . }}
|
||||
</div>
|
||||
<style>
|
||||
.badge {
|
||||
background-color: color-mix(in srgb, var(--badge-color) 40%, transparent);
|
||||
color: #222;
|
||||
}
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="w-full md:w-2/3 lg:w-4/5 pt-2">
|
||||
<article >
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden">
|
||||
|
||||
<div class="relative pt-16 pb-16 ">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
{{ with .Params.badge }}
|
||||
<div class="mb-6">
|
||||
<span class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
|
||||
{{ . }}
|
||||
</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ .Title }}</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.gradient-bg {
|
||||
background-image: linear-gradient(180deg, color-mix(in srgb, var(--badge-color) 25%, white), white);
|
||||
}
|
||||
</style>
|
||||
<div class="absolute inset-x-0 top-0 h-96 gradient-bg opacity-75"></div>
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-full md:w-1/3 lg:w-1/4 pt-1">
|
||||
{{ partial "features-sidebar.html" . }}
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<!-- Key Features Grid -->
|
||||
{{ if .Params.features }}
|
||||
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<div class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2 xl:grid-cols-4">
|
||||
{{ range .Params.features }}
|
||||
<div class="flex flex-col bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-8">
|
||||
<dt class="text-lg font-semibold leading-7 text-gray-900">
|
||||
{{ .title }}
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
|
||||
<p class="flex-auto">{{ .description }}</p>
|
||||
</dd>
|
||||
<main class="w-full md:w-2/3 lg:w-4/5 pt-2">
|
||||
<article>
|
||||
<!-- Hero Section -->
|
||||
<div class="relative isolate overflow-hidden">
|
||||
|
||||
<div class="relative pt-16 pb-16 ">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
{{ with .Params.badge }}
|
||||
<div class="mb-6">
|
||||
<span
|
||||
class="badge inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium">
|
||||
{{ . }}
|
||||
</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{{ .Title }}
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<!-- Key Features Grid -->
|
||||
{{ if .Params.features }}
|
||||
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<div
|
||||
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2 xl:grid-cols-4">
|
||||
{{ range .Params.features }}
|
||||
<div class="flex flex-col bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-8">
|
||||
<dt class="text-lg font-semibold leading-7 text-gray-900">
|
||||
{{ .title }}
|
||||
</dt>
|
||||
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
|
||||
<p class="flex-auto">{{ .description }}</p>
|
||||
</dd>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="prose prose-lg mx-auto mt-16 pb-24">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<!-- Demo Section -->
|
||||
{{ if .Params.demo }}
|
||||
<div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-2xl lg:text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ i18n
|
||||
"seeItInAction" }}</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<div class="relative rounded-xl bg-white p-8 shadow-2xl ring-1 ring-gray-200">
|
||||
<div class="carousel">
|
||||
{{ range .Params.demo.images }}
|
||||
<div class="carousel-item">
|
||||
<img src="{{ . }}" alt="Demo" class="rounded-lg">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="prose prose-lg mx-auto mt-16 pb-24">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<!-- Demo Section -->
|
||||
{{ if .Params.demo }}
|
||||
<div class="bg-gray-50 -mx-6 px-6 py-24 sm:py-32">
|
||||
<div class="mx-auto max-w-2xl lg:text-center">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ i18n "seeItInAction" }}</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">{{ .Params.demo.description }}</p>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<div class="relative rounded-xl bg-white p-8 shadow-2xl ring-1 ring-gray-200">
|
||||
<div class="carousel">
|
||||
{{ range .Params.demo.images }}
|
||||
<div class="carousel-item">
|
||||
<img src="{{ . }}" alt="Demo" class="rounded-lg">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Global CTA -->
|
||||
{{ partial "components/cta.html" . }}
|
||||
</article>
|
||||
</main>
|
||||
<!-- Global CTA -->
|
||||
{{ partial "components/cta.html" . }}
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
@@ -4,13 +4,13 @@
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||
<div class="text-center max-w-3xl mx-auto mb-8">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">{{ $title }}</h2>
|
||||
<p class="text-xl text-gray-600">{{ $description | markdownify }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Grid -->
|
||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||
<div class="text-center max-w-3xl mx-auto mb-8">
|
||||
{{ .Inner | safeHTML }}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user