update footer animation

src/components/wave.css

@@ -16,25 +16,39 @@
     animation: wave-animation-1 10s linear infinite;
 }
 
+.wave9 {
+  animation: wave-animation-6 11s linear infinite;
+}
+
 .wave2 {
     animation: wave-animation-2 12s linear infinite;
 }
 
+.wave8 {
+  animation: wave-animation-6 13s linear infinite;
+}
+
 .wave3 {
     animation: wave-animation-3 14s linear infinite;
 }
 
+.wave6 {
+  animation: wave-animation-6 15s linear infinite;
+}
+
 .wave4 {
     animation: wave-animation-4 16s linear infinite;
 }
 
+.wave7 {
+  animation: wave-animation-6 17s linear infinite;
+}
+
 .wave5 {
   animation: wave-animation-5 18s linear infinite;
 }
 
-.wave6 {
-  animation: wave-animation-6 15s linear infinite;
-}
+
 
 @keyframes wave-animation-1 {
     0% { transform: translateX(-50%); }

src/components/wave.tsx

@@ -18,8 +18,11 @@ export function WaveAnimation() {
           </defs>
           <g className="parallax">
             <use href="#gentle-wave" x="48" y="-2" className='wave1' fill="rgba(178,66,65,0.7)" />
+            <use href="#gentle-wave" x="48" y="2" className='wave9' fill="rgba(245, 245, 220,0.3)" />
             <use href="#gentle-wave" x="48" y="-1" className='wave2' fill="rgba(232,169,166,0.5)" />
+            <use href="#gentle-wave" x="48" y="2" className='wave8' fill="rgba(245, 245, 220,0.3)" />
             <use href="#gentle-wave" x="48" y="0" className='wave3' fill="rgba(205,68,50,0.3)" />
+            <use href="#gentle-wave" x="48" y="2" className='wave7' fill="rgba(245, 245, 220,0.3)" />
             <use href="#gentle-wave" x="48" y="2" className='wave6' fill="rgba(245, 245, 220,0.3)" />
             <use href="#gentle-wave" x="48" y="1" className='wave4' fill="rgba(135,31,35,1)" />
             <use href="#gentle-wave" x="48" y="2" className='wave5' fill="rgba(114, 47, 55, 1)" />