STYLE enhance footer layout with grid and z-index adjustments, and add parallax animation for improved visual dynamics

resources/css/layout/footer.css

@@ -1,7 +1,30 @@
 footer {
-  @apply mx-auto px-12 pt-64;
+  @apply mx-auto px-12;
   .branding {
-    @apply w-full mb-12;
+    @apply w-full mb-12 grid relative  pt-64;
+    z-index: -1;
+    .square,
+    .rectangle-rotated {
+      z-index: -1;
+    }
+    .circle,
+    .rectangle-vertical {
+      z-index: -3;
+    }
+
+    .website-title {
+      z-index: -2;
+    }
+
+    &__shapes {
+      @apply w-full grid gap-4 grid-cols-4  h-full absolute  left-0;
+      top: 0px;
+
+      img {
+        @apply h-64 shrink;
+        flex-shrink: 1;
+      }
+    }
 
     .website-title {
       @apply w-full;
@@ -26,3 +49,12 @@ footer {
     }
   }
 }
+
+@keyframes parallax {
+  from {
+    transform: translateY(-200px);
+  }
+  to {
+    transform: translateY(200px);
+  }
+}