Add moving squares to footer

mandaljazz · Feb 22, 2024 · d0a41b2 · d0a41b2
1 parent 1367fd7
commit d0a41b2
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/src/components/DesktopMenu.astro b/src/components/DesktopMenu.astro
@@ -1,6 +1,5 @@
 ---
-import Link from "./Link.astro";
-import TopArt from "./TopArt.astro";
+import MovingSquares from "./MovingSquares.astro";
 
 export interface Props {
   class?: string;
@@ -14,7 +13,7 @@ const { class: extraClasses, navItems } = Astro.props;
 ---
 
 <div class={`relative ${extraClasses}`}>
-  <TopArt />
+  <MovingSquares />
   <nav
     class="menu p-4 flex gap-10 bg-dark-blue text-white fixed w-full top-0 left-0 shadow-lg"
   >

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -2,9 +2,13 @@
 import { Icon } from "astro-icon";
 import Link from "../components/Link.astro";
 import BuyTicketsButton from "./BuyTicketsButton.astro";
+import MovingSquares from "./MovingSquares.astro";
 ---
 
 <footer class="relative mt-32">
+  <div class="top-16 absolute bg-yellow w-full rotate-180">
+    <MovingSquares />
+  </div>
   <div class="py-32 bg-dark-blue text-white z-10 relative">
     <div
       class="max-w-5xl mx-auto px-4 sm:px-6 md:px-8 lg:px-16 xl:px-32 space-y-8"
@@ -109,12 +113,4 @@ import BuyTicketsButton from "./BuyTicketsButton.astro";
       </div>
     </div>
   </div>
-  <div
-    class="absolute w-64 h-64 -top-8 md:-top-10 right-0 sm:right-1/3 md:right-1/4 bg-dark-blue animate-sideways-left-slow"
-  >
-  </div>
-  <div
-    class="absolute w-64 h-32 -top-4 md:-top-8 right-0 sm:right-1/4 md:right-[20%] bg-blue animate-sideways-left"
-  >
-  </div>
 </footer>
diff --git a/src/components/MobileMenu.astro b/src/components/MobileMenu.astro
@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon";
-import TopArt from "./TopArt.astro";
+import MovingSquares from "./MovingSquares.astro";
 
 export interface Props {
   class?: string;
@@ -14,7 +14,7 @@ const { class: extraClasses, navItems } = Astro.props;
 ---
 
 <div class={`relative ${extraClasses}`}>
-  <TopArt />
+  <MovingSquares />
   <nav
     class="fixed w-full text-2xl top-0 left-0 transition-transform duration-500 ease-in-out -translate-y-full bg-dark-blue text-white rounded-lg off-screen-nav-items flex flex-col gap-4 items-center py-24 shadow-lg"
   >

diff --git a/src/components/TopArt.astro → src/components/MovingSquares.astro b/src/components/TopArt.astro → src/components/MovingSquares.astro