add style

This commit is contained in:
Boris Waaub
2026-01-22 15:03:35 +01:00
parent 7b98930deb
commit 47d38a5dda
2 changed files with 140 additions and 46 deletions
+74 -46
View File
@@ -36,51 +36,79 @@ testimonials:
custom_class="hero"
hero_image="/images/hero-dashboard.svg"
>}}
{{< client-logos animate="true" >}}
{{< features-section
title="Modern Features for Modern Websites"
description="Discover how our theme helps you build fast, beautiful SaaS websites with ease."
>}}
{{< feature
title="Lightning-Fast Performance"
description="Leverage Hugo's blazing-fast build times and optimized output. Your website loads instantly, providing an exceptional user experience."
badge="Performance"
badgeColor="#2563eb"
image="/images/feature-1.svg"
buttonText="Learn More"
buttonLink="/features/performance/"
features="Sub-second page loads,Optimized assets,Minimal JavaScript,CDN-ready output"
imagePosition="right"
>}}
{{< feature
title="Beautiful Design System"
description="Create stunning user interfaces with our comprehensive design system built on TailwindCSS. Customize everything to match your brand."
badge="Design"
badgeColor="#7c3aed"
image="/images/feature-2.svg"
buttonText="Learn More"
buttonLink="/features/design-system/"
features="Modern UI components,Responsive design,Custom typography,Flexible layouts"
imagePosition="left"
>}}
{{< feature
title="Developer Experience"
description="Enjoy a seamless development experience with hot reload, component-based architecture, and clean, maintainable code."
badge="Development"
badgeColor="#16a34a"
image="/images/feature-3.svg"
buttonText="Learn More"
buttonLink="/features/developer-experience/"
features="Component system,Easy customization,Clean code,Detailed documentation"
imagePosition="right"
>}}
{{< /features-section >}}
{{< features-carousel title="Découvrez les fonctionnalités qui font de CHILL lallié incontournable des travailleurs sociaux" background-color="#f1f5f9" >}}
{
"features": [
{
"title": "Suivi des usagers",
"description": "CHILL vous offre une gestion complète et structurée des dossiers individuels, facilitant le suivi personnalisé de chaque usager.",
"badge": "Usagers",
"badgeColor": "#2563eb",
"image": "/images/feature-1.svg",
"buttonText": "En savoir plus",
"buttonLink": "/features/suivi-usagers/",
"features": "Fiche individuelle détaillée,Gestion des ménages,Suivi budgétaire,Personnes ressources,Génération de documents,Enregistrement de tâches",
"imagePosition": "right"
},
{
"title": "Suivi des accompagnements",
"description": "Créez et suivez un ou plusieurs parcours daccompagnement pour chaque usager, du diagnostic initial aux actions entreprises et aux progrès réalisés.",
"badge": "Accompagnements",
"badgeColor": "#7c3aed",
"image": "/images/feature-2.svg",
"buttonText": "En savoir plus",
"buttonLink": "/features/suivi-accompagnements/",
"features": "Renseigner les parcours,Caractériser les parcours,Enregistrer les échanges,Actions mises en œuvre",
"imagePosition": "left"
},
{
"title": "Suivi des décisions",
"description": "CHILL facilite le suivi et la validation de décisions au sein dune équipe.",
"badge": "Décisions",
"badgeColor": "#7c3aed",
"image": "/images/feature-2.svg",
"buttonText": "En savoir plus",
"buttonLink": "/features/suivi-accompagnements/",
"features": "Permet de configurer des parcours de validation adaptés,Approbation hiérarchique possible, Obtention dun visa dun service compétent possible,Autres types de validations personnalisables selon les besoins,Basé sur des documents existants,Basé sur des actions daccompagnement",
"imagePosition": "right"
},
{
"title": "Rapports statistiques",
"description": "CHILL vous permet dexporter des statistiques précises sur lensemble de vos entités.",
"badge": "Statistiques",
"badgeColor": "#7c3aed",
"image": "/images/feature-2.svg",
"buttonText": "En savoir plus",
"buttonLink": "/features/suivi-accompagnements/",
"features": "Données de lusager,Donées des ménages,Actions daccompagnement,Problématiques sociales,Rendez-vous,Et bien plus encore...",
"imagePosition": "left"
},
{
"title": "Génération de documents",
"description": "Grâce à un système de modèles personnalisables, vous pouvez générer automatiquement des documents avec un large éventail dinformations déjà pré-remplies à partir des données présentes dans lapplication.",
"badge": "Documents",
"badgeColor": "#7c3aed",
"image": "/images/feature-2.svg",
"buttonText": "En savoir plus",
"buttonLink": "/features/suivi-accompagnements/",
"features": "Informations sur l'usager,Informations sur le ménage,Détails financiers ou sociaux,Et bien plus encore...",
"imagePosition": "right"
},
{
"title": "Rapports & RGPD",
"description": "Générez des rapports statistiques, organisez vos documents et assurez la conformité RGPD pour la sécurité et la confidentialité des données.",
"badge": "Rapports & RGPD",
"badgeColor": "#16a34a",
"image": "/images/feature-3.svg",
"buttonText": "En savoir plus",
"buttonLink": "/features/rapports-rgpd/",
"features": "Rapports statistiques,Génération de documents,Organisation documentaire,Conformité RGPD",
"imagePosition": "left"
}
]
}
{{< /features-carousel >}}
{{< cta >}}
{{< testimonials
title="Trusted by Modern Web Teams"
@@ -89,4 +117,4 @@ testimonials:
background-color="#f1f5f9"
>}}
{{< cta >}}
+66
View File
@@ -3385,6 +3385,72 @@ body {
border-radius: 2rem;
}
.features-carousel__nav {
margin-bottom: 1rem;
text-align: center;
}
.features-carousel__nav button {
display: inline-flex;
align-items: center;
justify-content: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-weight: 500;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2rem;
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.features-carousel__nav button:hover {
--tw-text-opacity: 1;
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.features-carousel__nav button {
max-height:40px;
}
.features-carousel__nav button.active {
display: inline-flex;
align-items: center;
justify-content: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-weight: 500;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2rem;
--tw-bg-opacity: 1;
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.features-carousel__nav button.active:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-bg-opacity: 1;
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
}
.features-carousel__slides {
min-height: 150px;
}
.feature {
display: none;
}
@media (min-width: 640px) {
.sm\:prose {
color: var(--tw-prose-body);