Added About Page

resources/js/components/home/Hero.vue

@@ -1,20 +1,20 @@
 <template>
 <section class="hero">
-    <div class="hero-bg"></div>
+    <div class="hero-bg" :style="'background-image:url('+image+')'"></div>
     <div class="hero-overlay"></div>
 
     <div class="hero-content">
         <h1 class="hero-title animate-fade">
-            <GradientText>Travel.</GradientText><br>
-            <span>On the Edge</span>
+            <GradientText>{{titleLineOne}}</GradientText><br>
+            <span>{{titleLineTwo}}</span>
         </h1>
 
         <p class="hero-subtitle animate-slide">
-            We don't go wherever is trendy. <br/>
-            We set the trends.
+            {{subtitleLineOne}}<br/>
+            {{subtitleLineTwo}}<br/>
         </p>
         <div class="hero-buttons">
-            <EdgyButton classes="btn-secondary">View Adventures</EdgyButton>
+            <slot />
         </div>
     </div>
     <ScrollIndicator />
@@ -38,7 +38,6 @@
   left: 0;
   right: 0;
   height: 120%;
-  background-image: url('/img/hero.jpg');
   background-size: cover;
   background-position: center;
   will-change: transform;
@@ -60,6 +59,10 @@
   text-align: center;
   max-width: 1000px;
   padding: 0 2rem;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 .hero-title {
@@ -86,7 +89,8 @@
 }
 
 .hero-title,
-.hero-subtitle {
+.hero-subtitle,
+.hero-buttons{
   opacity: 0;
   transform: translateY(18px);
   transition: opacity 1000ms cubic-bezier(.22,.9,.32,1),
@@ -96,15 +100,17 @@
 
 /* visible state toggled by JS */
 .hero-title.is-visible,
-.hero-subtitle.is-visible {
+.hero-subtitle.is-visible,
+.hero-buttons.is-visible {
   opacity: 1;
   transform: translateY(0);
 }
 
 @media (min-width: 640px) {
   .hero-buttons {
-      flex-direction: row;
+      width: 50%;
       justify-content: center;
+      align-items: center;
   }
 }
 @media (max-width: 767px) {
@@ -149,6 +155,7 @@ const initLoadingAnimations = (): void => {
 
     const heroTitle = document.querySelector('.hero-title') as HTMLElement | null;
     const heroSubtitle = document.querySelector('.hero-subtitle') as HTMLElement | null;
+    const heroButtons = document.querySelector('.hero-buttons') as HTMLElement | null;
 
     if (heroTitle) {
         setTimeout(() => {
@@ -164,8 +171,23 @@ const initLoadingAnimations = (): void => {
             heroSubtitle.classList.add('is-visible');
         }, 750);
     }
+
+    if (heroButtons) {
+        setTimeout(() => {
+            void heroButtons.offsetWidth;
+            heroButtons.classList.add('is-visible');
+        }, 900);
+    }
 };
 
+defineProps({
+    image: String,
+    titleLineOne: String,
+    titleLineTwo: String,
+    subtitleLineOne: String,
+    subtitleLineTwo: String,
+})
+
 onMounted(() => {
     initParallax()
     initLoadingAnimations()