add wave footer animation

src/components/Footer.tsx

@@ -6,10 +6,13 @@ export function Footer() {
   const teamSlug = stringToSlug(teamName);
 
   return (
-    <footer className="pt-1 pb-1 footer py-5 mt-0 bg-wine-red text-white">
-        <hr />
+    <footer className="pt-0 pb-1 footer py-5 mt-0 text-white">
+        {/* <hr /> */}
+        <div className="wave-container bg-rice_yellow">
+          <div className="wave"></div>
+        </div>
         {/* The following MUST be on every page: license information and link to the repository on gitlab.igem.org */}
-        <div className="row">
+        <div className="row bg-wine-red ">
           <div className="col-4">
 
             {/* <div className="col-1"></div> */}

src/containers/App/App.css

@@ -484,4 +484,32 @@ footer a:hover {
   70% { opacity: 1; }
   95% { opacity: 1; }
   100% { opacity: 0; }
+}
+
+.wave-container {
+  position: relative;
+  width: 100%;
+  height: 50px; /* Full viewport height */
+  overflow: hidden;
+}
+
+.wave {
+  position: absolute;
+  bottom: -25px;
+  left: 0;
+  width: 200%; /* Ensure the wave extends beyond the viewport */
+  height: 50px; /* Height of the wave */
+  background: linear-gradient(90deg, rgba(114, 47, 55, 1) 0%, rgba(114, 47, 55, 0.4) 100%);
+  border-radius: 100%;
+  transform: rotate(180deg);
+  animation: waveAnimation 10s linear infinite;
+}
+
+@keyframes waveAnimation {
+  0% {
+    transform: translateX(-100%) rotate(180deg);
+  }
+  100% {
+    transform: translateX(100%) rotate(180deg);
+  }
 }
\ No newline at end of file