Update hero section and color scheme across the application

- 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

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 {