feat(welcome): animate background on landing page

Author: Jonnx

public/css/app.css

@@ -1524,6 +1524,42 @@ select {
     display: none !important;
 }
 
+/* ANIMATED BACKGROUND */
+.bg-animated {
+    background: linear-gradient(-45deg, #441580, #055e6b, #036042);
+    background-size: 400% 400%;
+    -webkit-animation: gradient 20s ease infinite;
+            animation: gradient 20s ease infinite;
+}
+
+@-webkit-keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
 .hero {
     background-image: url('/images/map.jpg');
     background-size: cover;
@@ -1720,3 +1756,4 @@ select {
     grid-column: span 1 / span 1;
   }
 }
+

resources/css/app.css

@@ -6,6 +6,27 @@
     display: none !important;
 }
 
+/* ANIMATED BACKGROUND */
+.bg-animated {
+    background: linear-gradient(-45deg, #441580, #055e6b, #036042);
+    background-size: 400% 400%;
+    animation: gradient 20s ease infinite;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
 .hero {
     background-image: url('/images/map.jpg');
     background-size: cover;
@@ -32,4 +53,4 @@
 
 .changelog ul li {
     @apply ml-8 text-gray-300
-}
+}

resources/views/welcome.blade.php

@@ -5,8 +5,8 @@
 
         <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
             <div class="col-span-2 md:col-span-3">
-                <div class="rounded-lg" style="background: linear-gradient(-45deg, #441580, #055e6b);">
-                    <div class="rounded-lg lg:text-center p-6 lg:py-24">
+                <div>
+                    <div class="rounded-lg lg:text-center p-6 lg:py-24 bg-animated">
                         <h1 class="text-3xl lg:text-5xl font-bold">
                             Generate complex map markers on the fly.
                         </h1>