+
diff --git a/packages/base/Resources/Public/JavaScript/fade-in.js b/packages/base/Resources/Public/JavaScript/fade-in.js
new file mode 100644
index 0000000..1ac9b67
--- /dev/null
+++ b/packages/base/Resources/Public/JavaScript/fade-in.js
@@ -0,0 +1,40 @@
+(function() {
+ document.addEventListener('DOMContentLoaded', function() {
+ // Elements that should fade in when in view
+ var fadeInElements = document.querySelectorAll('.fade-in-on-scroll');
+
+ // If IntersectionObserver is supported, use it for better performance
+ if ('IntersectionObserver' in window) {
+ var observer = new IntersectionObserver(function(entries, observer) {
+ entries.forEach(function(entry) {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('fade-in-visible');
+ observer.unobserve(entry.target);
+ }
+ });
+ }, { threshold: 0.1 });
+
+ fadeInElements.forEach(function(el) {
+ el.classList.add('fade-in-hidden');
+ observer.observe(el);
+ });
+ } else {
+ // Fallback if IntersectionObserver is not supported
+ fadeInElements.forEach(function(el) {
+ el.classList.add('fade-in-hidden');
+ });
+
+ var checkVisibility = function() {
+ var windowBottom = window.innerHeight + window.scrollY;
+ fadeInElements.forEach(function(el) {
+ if (el.getBoundingClientRect().top + window.scrollY < windowBottom - (el.offsetHeight * 0.1)) {
+ el.classList.add('fade-in-visible');
+ }
+ });
+ };
+
+ window.addEventListener('scroll', checkVisibility);
+ checkVisibility();
+ }
+ });
+})();
diff --git a/packages/base/Resources/Public/Scss/abstracts/_fade-in.scss b/packages/base/Resources/Public/Scss/abstracts/_fade-in.scss
new file mode 100644
index 0000000..95f9cbf
--- /dev/null
+++ b/packages/base/Resources/Public/Scss/abstracts/_fade-in.scss
@@ -0,0 +1,19 @@
+.fade-in-hidden {
+ opacity: 0;
+ transform: translateY(1.5rem);
+ transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+.fade-in-visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Respect prefers-reduced-motion: reduce (for accessibility).
+ If user prefers reduced motion, override transitions. */
+@media (prefers-reduced-motion: reduce) {
+ .fade-in-hidden {
+ opacity: 1;
+ transform: none;
+ transition: none;
+ }
+}
diff --git a/packages/base/Resources/Public/Scss/components/_buttons.scss b/packages/base/Resources/Public/Scss/components/_buttons.scss
index aeb5af0..702d245 100644
--- a/packages/base/Resources/Public/Scss/components/_buttons.scss
+++ b/packages/base/Resources/Public/Scss/components/_buttons.scss
@@ -7,8 +7,10 @@
padding: 0.75rem 1.5rem;
border: none;
cursor: pointer;
+ transition: background 0.3s;
&:hover {
background-color: var(--bs-primary-light);
+ color: var(--bs-yellow);
}
}
diff --git a/packages/base/Resources/Public/Scss/main.scss b/packages/base/Resources/Public/Scss/main.scss
index 0e3ef41..11f64d9 100644
--- a/packages/base/Resources/Public/Scss/main.scss
+++ b/packages/base/Resources/Public/Scss/main.scss
@@ -2,6 +2,7 @@
@import 'abstracts/mixins';
@import 'abstracts/fonts';
@import 'abstracts/icons';
+@import 'abstracts/fade-in';
@import 'base/base';
@import 'components/navigation';
@import 'components/images';