Adjust moving squares and logo size

src/components/MovingSquares.astro

@@ -1,26 +1,26 @@
 <div class="relative -mt-12 md:-mt-12 overflow-x-clip">
   <div
-    class="absolute w-1/2 h-40 -top-10 md:-top-2 left-0 -translate-y-1/4 bg-dark-blue animate-sideways-right-fast md:animate-sideways-right-medium"
+    class="absolute rounded-xl w-1/2 h-40 -top-10 md:-top-2 left-0 -translate-y-1/4 bg-dark-blue animate-up-down-fast md:animate-up-down-medium"
   >
   </div>
   <div
-    class="absolute w-1/3 h-56 -top-16 md:-top-8 left-1/4 lg:left-[15%] -translate-y-1/4 bg-blue animate-sideways-left-fast md:animate-sideways-left-medium"
+    class="absolute rounded-xl w-1/3 h-56 -top-16 md:-top-8 left-1/4 lg:left-[15%] -translate-y-1/4 bg-blue animate-down-up-fast md:animate-down-up-medium"
   >
   </div>
   <div
-    class="absolute w-1/2 h-52 -top-16 md:-top-8 left-64 lg:left-72 -translate-y-1/4 bg-dark-blue animate-sideways-right-fast md:animate-sideways-right-medium"
+    class="absolute rounded-xl w-1/2 h-52 -top-16 md:-top-8 left-64 lg:left-72 -translate-y-1/4 bg-dark-blue animate-up-down-fast md:animate-up-down-medium"
   >
   </div>
   <div
-    class="absolute w-1/2 h-48 -top-16 md:-top-8 right-12 -translate-y-1/4 bg-blue animate-sideways-right-medium md:animate-sideways-right-slow"
+    class="absolute rounded-xl w-1/2 h-48 -top-16 md:-top-8 right-12 -translate-y-1/4 bg-blue animate-up-down-medium md:animate-up-down-slow"
   >
   </div>
   <div
-    class="absolute w-1/4 h-60 -top-16 md:-top-8 right-16 -translate-y-1/4 bg-dark-blue animate-sideways-left-fast md:animate-sideways-left-medium"
+    class="absolute rounded-xl w-1/4 h-60 -top-16 md:-top-8 right-16 -translate-y-1/4 bg-dark-blue animate-down-up-fast md:animate-down-up-medium"
   >
   </div>
   <div
-    class="absolute w-1/4 h-64 -top-16 md:-top-8 right-0 -translate-y-1/4 bg-blue animate-sideways-left-medium md:animate-sideways-left-slow"
+    class="absolute rounded-xl w-1/4 h-64 -top-16 md:-top-8 right-0 -translate-y-1/4 bg-blue animate-down-up-medium md:animate-down-up-slow"
   >
   </div>
 </div>

src/pages/index.astro

@@ -34,10 +34,10 @@ const byOrder = (a, b) => {
     class="px-4 sm:px-6 md:px-8 lg:px-16 xl:px-32 space-y-24 py-16 sm:pb-32"
   >
     <div class="max-w-5xl mx-auto flex flex-col items-center gap-8">
-      <div class="flex flex-col gap-4 items-center w-full mt-8 md:mt-16">
+      <div class="flex flex-col gap-4 items-center w-full mt-8 md:mt-16 relative">
         <img
           src="/profil/logo/tertiary/black.svg"
-          class="max-w-xs w-full transition-opacity lottie-placeholder"
+          class="max-w-[200px] md:max-w-[260px] w-full"
         />
         <h1
           class="-mt-[1px] p-6 text-2xl sm:text-4xl font-display text-center leading-snug bg-dark-blue text-white rounded-xl"

tailwind.config.cjs

@@ -43,6 +43,12 @@ module.exports = {
         "sideways-left-fast": "sideways-left 10s ease-in-out infinite",
         "sideways-left-medium": "sideways-left 30s ease-in-out infinite",
         "sideways-left-slow": "sideways-left 53s ease-in-out infinite",
+        "up-down-fast": "up-down 8s ease-in-out infinite",
+        "up-down-medium": "up-down 20s ease-in-out infinite",
+        "up-down-slow": "up-down 33s ease-in-out infinite",
+        "down-up-fast": "down-up 8s ease-in-out infinite",
+        "down-up-medium": "down-up 20s ease-in-out infinite",
+        "down-up-slow": "down-up 33s ease-in-out infinite",
       },
       keyframes: {
         "orbit-right": {
@@ -63,6 +69,16 @@ module.exports = {
           "60%": { transform: "translateX(-50%)" },
           "100%": { transform: "translateX(0)" },
         },
+        "up-down": {
+          "0%": { transform: "translateY(0)" },
+          "60%": { transform: "translateY(30%)" },
+          "100%": { transform: "translateY(0)" },
+        },
+        "down-up": {
+          "0%": { transform: "translateY(0)" },
+          "60%": { transform: "translateY(-30%)" },
+          "100%": { transform: "translateY(0)" },
+        },
       },
     },
   },