Componentalization

resources/js/components/home/Hero.vue

@@ -14,7 +14,7 @@
                 We set the trends.
             </p>
             <div class="hero-buttons">
-                <EdgyButton classes="btn-secondary">View Tours</EdgyButton>
+                <EdgyButton classes="btn-secondary">View Adventures</EdgyButton>
             </div>
         </div>
 
@@ -91,6 +91,22 @@
     align-items: center;
 }
 
+.hero-title,
+.hero-subtitle {
+    opacity: 0;
+    transform: translateY(18px);
+    transition: opacity 1000ms cubic-bezier(.22,.9,.32,1),
+    transform 1000ms cubic-bezier(.22,.9,.32,1);
+    will-change: opacity, transform;
+}
+
+/* visible state toggled by JS */
+.hero-title.is-visible,
+.hero-subtitle.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
 @media (min-width: 640px) {
     .hero-buttons {
         flex-direction: row;
@@ -104,6 +120,31 @@
     }
 }
 
+/* Animations */
+@keyframes bounce {
+    0%, 20%, 53%, 80%, 100% {
+        transform: translateX(-50%) translateY(0);
+    }
+    40%, 43% {
+        transform: translateX(-50%) translateY(-15px);
+    }
+    70% {
+        transform: translateX(-50%) translateY(-7px);
+    }
+    90% {
+        transform: translateX(-50%) translateY(-2px);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
 .scroll-indicator {
     position: absolute;
     bottom: 2rem;
@@ -136,4 +177,54 @@
 
 import EdgyButton from "@/components/dredgy/EdgyButton.vue";
 import GradientText from "@/components/dredgy/GradientText.vue";
+import {onMounted} from "vue";
+
+const initParallax = (): void => {
+    const heroBackground = document.querySelector('.hero-bg') as HTMLElement | null;
+    const heroSection = document.querySelector('.hero') as HTMLElement | null;
+    if (!heroBackground || !heroSection) return;
+
+    window.addEventListener('scroll', () => {
+        const scrolled = window.pageYOffset;
+        const heroRect = heroSection.getBoundingClientRect();
+        const heroHeight = heroSection.offsetHeight;
+
+        if (heroRect.bottom > 0) {
+            const rate = scrolled * -0.15;
+            const maxMovement = heroHeight * 0.1;
+            const constrainedRate = Math.max(rate, -maxMovement);
+
+            heroBackground.style.transform = `translateY(${constrainedRate}px)`;
+        }
+    });
+};
+
+// Add loading animations
+
+const initLoadingAnimations = (): void => {
+    document.body.classList.add('loaded');
+
+    const heroTitle = document.querySelector('.hero-title') as HTMLElement | null;
+    const heroSubtitle = document.querySelector('.hero-subtitle') as HTMLElement | null;
+
+    if (heroTitle) {
+        setTimeout(() => {
+            // force reflow (safe) then add class to trigger transition
+            void heroTitle.offsetWidth;
+            heroTitle.classList.add('is-visible');
+        }, 500);
+    }
+
+    if (heroSubtitle) {
+        setTimeout(() => {
+            void heroSubtitle.offsetWidth;
+            heroSubtitle.classList.add('is-visible');
+        }, 750);
+    }
+};
+
+onMounted(() => {
+    initParallax()
+    initLoadingAnimations()
+})
 </script>