From 47d38a5dda0ad19925ae74dfaecc8b5b201c1656 Mon Sep 17 00:00:00 2001 From: Boris Waaub Date: Thu, 22 Jan 2026 15:03:35 +0100 Subject: [PATCH] add style --- content/_index.md | 120 ++++++++++++++++++++++++++----------------- static/css/style.css | 66 ++++++++++++++++++++++++ 2 files changed, 140 insertions(+), 46 deletions(-) diff --git a/content/_index.md b/content/_index.md index 5c4cf63..a139cf1 100644 --- a/content/_index.md +++ b/content/_index.md @@ -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 l’allié 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 d’accompagnement 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 d’une é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 d’un visa d’un service compétent possible,Autres types de validations personnalisables selon les besoins,Basé sur des documents existants,Basé sur des actions d’accompagnement", + "imagePosition": "right" + }, + { + "title": "Rapports statistiques", + "description": "CHILL vous permet d’exporter des statistiques précises sur l’ensemble 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 l’usager,Donées des ménages,Actions d’accompagnement,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 d’informations déjà pré-remplies à partir des données présentes dans l’application.", + "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 >}} + diff --git a/static/css/style.css b/static/css/style.css index bba9fbc..8727ee4 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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);