Change the hero layout and improve class replace script

Add floating ship —instead of old hero image—
Add versatility to the class replace script so that
it is possible to add multiple classes for each value

resources/views/themes/tailwind/assets/js/app.js

@@ -10,10 +10,25 @@ window.csrf = document.querySelector("meta[name='csrf-token']").getAttribute("co
 document.addEventListener("DOMContentLoaded", function(){
     var replacers = document.querySelectorAll('[data-replace]');
     for(var i=0; i<replacers.length; i++){
-        let replaceClasses = JSON.parse(replacers[i].dataset.replace.replace(/'/g, '"'));
-        Object.keys(replaceClasses).forEach(function(key) {
+        let inputClasses = JSON.parse(replacers[i].dataset.replace.replace(/'/g, '"'));
+        //replace white-space seperated values in inputClasses with array of classes
+        var replacementClasses = new Array();
+        Object.keys(inputClasses).forEach(function(key, i) {
+            replacementClasses[i] = inputClasses[key].match(/(\s+)/)
+            ? inputClasses[key].split(/(\s+)/).filter((e) => e.trim().length > 0)
+            : inputClasses[key];
+            inputClasses[key] = replacementClasses[i];
+        });
+
+        Object.keys(inputClasses).forEach(function(key) {
             replacers[i].classList.remove(key);
-            replacers[i].classList.add(replaceClasses[key]);
+
+            if(typeof(inputClasses[key]) === 'string'){
+                replacers[i].classList.add(inputClasses[key]);
+            }else if(typeof(inputClasses[key]) === 'object'){
+                replacers[i].classList.add(...inputClasses[key]);
+
+            }
         });
     }
 });

resources/views/themes/tailwind/assets/sass/app.scss

@@ -49,6 +49,23 @@ svg {
     to {transform: translateX(-100%);}
   }
 
+  .ship {
+    animation: ship 6s linear infinite;
+  }
+  @keyframes ship {
+    0% {
+        transform: rotate(0deg) translateY(0.75vh);
+    }
+
+    50%{
+        transform: rotate(0.25deg) translateY(0);
+    }
+
+    100% {
+        transform: rotate(0deg) translateY(0.75vh);
+    }
+  }
+
   .form-control{
     @apply form-input w-full;
   }
@@ -65,4 +82,4 @@ svg {
     background-size: 1.5em 1.5em;
     padding:.5rem 2.5rem .5rem .75rem;
     background-repeat: no-repeat;
-}
+}

resources/views/themes/tailwind/home.blade.php

@@ -27,29 +27,30 @@
                     </div>
                 </div>
 
-                <div class="flex w-full mb-16 lg:w-1/2 lg:mb-0">
-
-                    <div class="relative invisible transition-none duration-1000 delay-100 transform translate-x-12 opacity-0" data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-x-12": "translate-y-0", "opacity-0": "opacity-100" }'>
-                        <img src="{{ Voyager::image(theme('home_promo_image')) }}" class="w-full max-w-3xl sm:w-auto">
-                    </div>
-
-                </div>
             </div>
         </div>
 
+    </div>
 
+    <div class="relative flex items-center z-10 -mt-32 sm:mt-auto xl:-mt-40">
+        <div
+            class="absolute w-auto right-0.5 invisible transition-none transform translate-x-12 -translate-y-3/7 opacity-0 float-right -z-1"
+            data-replace='{ "transition-none": "transition-all duration-1000 delay-100", "invisible": "visible", "translate-x-12": "sm:-translate-x-6", "opacity-0": "opacity-100" }'>
 
-    </div>
+            <img src="{{ Voyager::image(theme('home_promo_image')) }}"
+                class="w-4/5 m-auto max-w-xl sm:w-auto lg:max-w-xl xl:max-w-3xl 2xl:max-w-4xl ship">
 
-    <div class="relative z-40 -mt-64">
+        </div>
 
-        <svg viewBox="0 0 120 28" class="-mt-64">
+        <svg viewBox="0 0 120 28" class="-mt-1/2" fill-rule="evenodd">
             <defs>
-                <path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
+                {{-- Editted the svg path using https://yqnn.github.io/svg-path-editor/ --}}
+                <path id="wave"
+                    d="M 0 13 C 30 13 30 15 60 15 C 90 15 90 13 120 13 C 150 13 150 15 180 15 C 210 15 210 13 240 13 v 28 h -240 z" />
             </defs>
-            <use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2"></use>
+            <use id="wave3" class="wave" xlink:href="#wave" x="0" y="-0.5"></use>
             <use id="wave2" class="wave" xlink:href="#wave" x="0" y="0"></use>
-            <use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
+            <use id="wave1" class="wave" xlink:href="#wave" x="0" y="0.25" />
         </svg>
     </div>
 

resources/views/themes/tailwind/tailwind.config.js

@@ -53,6 +53,13 @@ module.exports = {
                     800: '#002F73',
                     900: '#00204D',
                 },
+            },
+            zIndex: {
+                "-1": "-1",
+            },
+            spacing: {
+                '3/7': '42.8571429%',
+                '9/20': '45%',
             }
         }
     },