champs-libres/chill_hugoplate
7
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update hero section and color scheme across the application

Browse Source 
- Changed the hero headline and sub-headline for better clarity and engagement.
- Added a secondary button for demo booking in the hero section.
- Updated primary color scheme in CSS files to unify the visual identity.
- Adjusted background and text colors to enhance readability and aesthetics.
- Removed unused CSS classes to streamline styles.
- Updated Tailwind configuration to reflect new color values for primary and secondary themes.
This commit is contained in:
Boris Waaub
2026-01-22 13:34:30 +01:00
parent c92d34814c
commit 7b98930deb
6 changed files with 54 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/scss/custom.scss
View File

@@ -307,14 +307,6 @@ section {
}
}
// Dark context (homepage header, hero, footer)
// Overwrite primary button design
.btn-primary {
background-color: $orange;
color: white;
border: 1px solid $orange;
border-radius: 2em;
}
.download {
margin-right: auto;

6
content/_index.md
View File

@@ -27,10 +27,12 @@ testimonials:
---
{{< hero
headline="Le compagnon du travailleur social"
sub_headline="Une application web open source dédiée à faciliter le travail social."
headline="Le logiciel libre pensé pour les travailleurs sociaux"
sub_headline="Gagnez du temps, sécurisez vos données et restez indépendants avec une solution ouverte et collaborative!"
primary_button_text="Essayer la démo"
primary_button_url="http://demo.chill.social/"
secondary_button_text="Réserver une démo"
secondary_button_url="#"
custom_class="hero"
hero_image="/images/hero-dashboard.svg"
>}}

6
static/css/custom.css
View File

@@ -237,12 +237,6 @@ section.li-block.section-5 .container .row ul li {
section.li-block a.btn-chill {
background-color: #fc3636; }
.btn-primary {
background-color: #f46839;
color: white;
border: 1px solid #f46839;
border-radius: 2em; }
.download {
margin-right: auto;
margin-left: auto;

2
static/css/custom.css.map
View File

File diff suppressed because one or more lines are too long

63
static/css/style.css
View File

@@ -1834,7 +1834,7 @@ body {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2rem;
--tw-bg-opacity: 1;
background-color: rgb(46 69 83 / var(--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));
}
@@ -1844,7 +1844,7 @@ body {
--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(39 58 69 / var(--tw-bg-opacity, 1));
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
}
.btn-outline {
@@ -1862,9 +1862,9 @@ body {
border-radius: 2rem;
border-width: 2px;
--tw-border-opacity: 1;
border-color: rgb(46 69 83 / var(--tw-border-opacity, 1));
border-color: rgb(244 104 57 / var(--tw-border-opacity, 1));
--tw-text-opacity: 1;
color: rgb(46 69 83 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.btn-outline:hover {
@@ -2024,13 +2024,13 @@ body {
.prose a {
--tw-text-opacity: 1;
color: rgb(46 69 83 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
text-decoration-line: none;
}
.prose a:hover {
--tw-text-opacity: 1;
color: rgb(39 58 69 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.prose ul, .prose ol {
@@ -2585,10 +2585,6 @@ body {
align-items: baseline;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
@@ -2834,17 +2830,17 @@ body {
.bg-primary-100 {
--tw-bg-opacity: 1;
background-color: rgb(230 237 241 / var(--tw-bg-opacity, 1));
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
}
.bg-primary-50 {
--tw-bg-opacity: 1;
background-color: rgb(242 246 248 / var(--tw-bg-opacity, 1));
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
}
.bg-primary-600 {
--tw-bg-opacity: 1;
background-color: rgb(46 69 83 / var(--tw-bg-opacity, 1));
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
@@ -2853,8 +2849,7 @@ body {
}
.bg-secondary-100 {
--tw-bg-opacity: 1;
background-color: rgb(255 234 234 / var(--tw-bg-opacity, 1));
background-color: rgba(67, 178, 157, 0.61);
}
.bg-white {
@@ -2891,8 +2886,8 @@ body {
}
.from-primary-600 {
--tw-gradient-from: #2e4553 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(46 69 83 / 0) var(--tw-gradient-to-position);
--tw-gradient-from: #f46839 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(244 104 57 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
@@ -2902,7 +2897,7 @@ body {
}
.to-primary-700 {
--tw-gradient-to: #273a45 var(--tw-gradient-to-position);
--tw-gradient-to: #f46839 var(--tw-gradient-to-position);
}
.to-white {
@@ -3243,12 +3238,12 @@ body {
.text-primary-100 {
--tw-text-opacity: 1;
color: rgb(230 237 241 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.text-primary-600 {
--tw-text-opacity: 1;
color: rgb(46 69 83 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.text-white {
@@ -3936,13 +3931,13 @@ body {
.sm\:prose a {
--tw-text-opacity: 1;
color: rgb(46 69 83 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
text-decoration-line: none;
}
.sm\:prose a:hover {
--tw-text-opacity: 1;
color: rgb(39 58 69 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.sm\:prose ul,.sm\:prose ol {
@@ -4254,7 +4249,7 @@ body {
.hover\:border-primary-600:hover {
--tw-border-opacity: 1;
border-color: rgb(46 69 83 / var(--tw-border-opacity, 1));
border-color: rgb(244 104 57 / var(--tw-border-opacity, 1));
}
.hover\:bg-gray-100:hover {
@@ -4274,12 +4269,12 @@ body {
.hover\:bg-primary-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(230 237 241 / var(--tw-bg-opacity, 1));
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(39 58 69 / var(--tw-bg-opacity, 1));
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
}
.hover\:text-gray-900:hover {
@@ -4289,12 +4284,12 @@ body {
.hover\:text-primary-600:hover {
--tw-text-opacity: 1;
color: rgb(46 69 83 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-700:hover {
--tw-text-opacity: 1;
color: rgb(39 58 69 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.hover\:opacity-90:hover {
@@ -4326,7 +4321,7 @@ body {
.focus\:border-primary-500:focus {
--tw-border-opacity: 1;
border-color: rgb(51 77 92 / var(--tw-border-opacity, 1));
border-color: rgb(244 104 57 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
@@ -4342,12 +4337,12 @@ body {
.focus\:ring-primary-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(51 77 92 / var(--tw-ring-opacity, 1));
--tw-ring-color: rgb(244 104 57 / var(--tw-ring-opacity, 1));
}
.focus\:ring-primary-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(46 69 83 / var(--tw-ring-opacity, 1));
--tw-ring-color: rgb(244 104 57 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
@@ -4366,22 +4361,22 @@ body {
.group:hover .group-hover\:border-primary-100 {
--tw-border-opacity: 1;
border-color: rgb(230 237 241 / var(--tw-border-opacity, 1));
border-color: rgb(244 104 57 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:bg-primary-100 {
--tw-bg-opacity: 1;
background-color: rgb(230 237 241 / var(--tw-bg-opacity, 1));
background-color: rgb(244 104 57 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-primary-600 {
--tw-text-opacity: 1;
color: rgb(46 69 83 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-primary-700 {
--tw-text-opacity: 1;
color: rgb(39 58 69 / var(--tw-text-opacity, 1));
color: rgb(244 104 57 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100 {

40
tailwind.config.js
View File

@@ -11,28 +11,28 @@ module.exports = {
extend: {
colors: {
primary: {
50: '#f2f6f8',
100: '#e6edf1',
200: '#bfd3de',
300: '#99b9cb',
400: '#4d8596',
500: '#334d5c', // couleur principale
600: '#2e4553',
700: '#273a45',
800: '#1f2e37',
900: '#19262c',
50: '#f46839',
100: '#f46839',
200: '#f46839',
300: '#f46839',
400: '#f46839',
500: '#f46839',
600: '#f46839',
700: '#f46839',
800: '#f46839',
900: '#f46839',
},
secondary: {
50: '#fff5f5',
100: '#ffeaea',
200: '#ffc9c9',
300: '#ffa8a8',
400: '#ff6666',
500: '#e57469', // couleur principale
600: '#ce6860',
700: '#ad5650',
800: '#8b4440',
900: '#723836',
50: 'rgba(67, 178, 157, 0.61)',
100: 'rgba(67, 178, 157, 0.61)',
200: 'rgba(67, 178, 157, 0.61)',
300: 'rgba(67, 178, 157, 0.61)',
400: 'rgba(67, 178, 157, 0.61)',
500: 'rgba(67, 178, 157, 0.61)',
600: 'rgba(67, 178, 157, 0.61)',
700: 'rgba(67, 178, 157, 0.61)',
800: 'rgba(67, 178, 157, 0.61)',
900: 'rgba(67, 178, 157, 0.61)',
},
},
fontFamily: {