remove unused image files, refactor assets directory, update static images, and implement mission statement animation

Author: claireclark1

src/components/HAccordion.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher, type Snippet } from 'svelte';
   import { Button } from '@frequency-chain/style-guide';
-  import Arrow from '../lib/assets/arrow-right.svg';
+  import Arrow from '$lib/assets/UIIcons/arrow-right.svg';
   import { MAX_MOBILE_WIDTH } from '$lib/consts';
 
   const dispatch = createEventDispatcher();

src/components/Sections/Ecosystem.svelte

@@ -3,8 +3,8 @@
   import SectionWrapper from './SectionWrapper.svelte';
   import TikTokTag from '../TikTokTag.svelte';
   import WavesTwo from '$lib/assets/waves-two.svg';
-  import MeWeLogo from '$lib/assets/ecosystem/mewe.svg';
-  import SoarLogo from '$lib/assets/ecosystem/soar.svg';
+  import MeWeLogo from '$lib/assets/EcosystemIcons/mewe.svg';
+  import SoarLogo from '$lib/assets/EcosystemIcons/soar.svg';
   import SlideIn from '../SlideIn.svelte';
 
   const logoClasses = 'max-h-[120px] px-3 py-5 w-full sm:w-1/2 lg:w-1/4';

src/components/Sections/Mission/MissionStatement.svelte

@@ -1,92 +1,130 @@
-<div class="bg-navy py-f24 text-white">
-  <div class="flex items-center justify-center gap-f12 md:gap-f24">
-    <h2 class="title-70 text-[30px] sm:text-[46px] md:text-[70px]">Your:</h2>
+<div class="flex items-center justify-center gap-f12 bg-navy text-white md:gap-f24">
+  <h2 class="title-70 text-[48px] md:text-[70px]">Your:</h2>
 
-    <div class="text-slide-container overflow-hidden h-[300px]">
-      <div class="text-slide">
-        <span class="emphasized-text">Content</span>
-        <span class="emphasized-text">Followers</span>
-        <span class="emphasized-text">Network</span>
-        <span class="emphasized-text">Content</span>
-        <span class="emphasized-text">Followers</span>
-        <span class="emphasized-text">Network</span>
-      </div>
+  <div class="h-[240px] overflow-hidden">
+    <div class="text-slider-container">
+      <span class="slider-item" id="first">Content</span>
+      <span class="slider-item" id="second">Followers</span>
+      <span class="slider-item" id="third">Network</span>
+      <span class="slider-item" id="fourth">Content</span>
+      <span class="slider-item" id="fifth">Followers</span>
+      <span class="slider-item" id="sixth">Network</span>
     </div>
   </div>
 </div>
 
 <style>
-  .thin-text {
-    @apply text-[20px] font-thin opacity-40 sm:text-[30px] md:text-[50px] h-[100px];
+  .text-slider-container {
+    @apply flex flex-col gap-0;
+    animation: text-slide 10s linear infinite;
   }
 
-  .emphasized-text {
-    @apply text-[30px] font-thin sm:text-[48px] md:text-[70px] h-[100px];
+  .slider-item {
+    @apply flex h-[80px] origin-[center_left] items-center text-[48px] font-thin md:text-[70px];
   }
 
-  .text-slide-container {
-    position: relative;
-    overflow: hidden;
+  /*Text Slider Items bold and scale animations*/
+  #first {
+    scale: 0.75;
+    opacity: 0.33;
   }
-
-  .text-slide {
-    @apply flex flex-col gap-0;
-    animation: text-slide 4s linear infinite;
+  #second {
+    animation: second 10s linear infinite;
   }
-
-  .text-slide span:nth-child(1) {
-    animation: unbold 2s linear;
+  #third {
+    animation: third 10s linear infinite;
+  }
+  #fourth {
+    animation: fourth 10s linear infinite;
+  }
+  #fifth {
+    animation: fifth 10s linear infinite;
+  }
+  #sixth {
+    scale: 0.75;
+    opacity: 0.33;
   }
 
-  /*.text-slide span:nth-child(2) {*/
-  /*  animation: middle-bold 8s linear infinite 2s; !* Adjust timing for each *!*/
-  /*}*/
-
-  /*.text-slide span:nth-child(3) {*/
-  /*  animation: middle-bold 8s linear infinite 4s;*/
-  /*}*/
+  /*Followers bold and scale animation*/
+  @keyframes second {
+    0%,
+    20% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    33.33%,
+    100% {
+      transform: scale(0.75);
+      opacity: 0.33;
+    }
+  }
 
-  /* Animation to emphasize the middle word */
-  @keyframes unbold {
-    0% {
+  /*Network bold and scale animation*/
+  @keyframes third {
+    0%,
+    20% {
       transform: scale(0.75);
-      opacity: 0.75;
+      opacity: 0.33;
     }
-    100% {
+    33.33%,
+    53.33% {
       transform: scale(1);
       opacity: 1;
     }
+    66.66%,
+    100% {
+      transform: scale(0.75);
+      opacity: 0.33;
+    }
   }
 
-  /* Animation to emphasize the middle word */
-  @keyframes bold-unbold {
-    0% {
+  /*Content bold and scale animation*/
+  @keyframes fourth {
+    0%,
+    53.33% {
       transform: scale(0.75);
-      opacity: 0.75;
+      opacity: 0.33;
     }
-    33.33%, 66.66% {
+    66.66%,
+    86.66% {
       transform: scale(1);
       opacity: 1;
     }
     100% {
       transform: scale(0.75);
-      opacity: 0.75;
+      opacity: 0.33;
+    }
+  }
+
+  /*Followers 2 bold and scale animation*/
+  @keyframes fifth {
+    0%,
+    86.66% {
+      transform: scale(0.75);
+      opacity: 0.33;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
     }
   }
 
-  /* Animation to slide text */
+  /* Animation to slide all text */
   @keyframes text-slide {
-    0%, 20% {
+    0%,
+    20% {
       transform: translateY(0);
     }
-    33.33%, 53.33% {
-      transform: translateY(-100px);
+    33.33%,
+    53.33% {
+      transform: translateY(-80px);
     }
-    66.66%, 86.66% {
-      transform: translateY(-200px);
+    66.66%,
+    86.66% {
+      transform: translateY(-160px);
     }
     100% {
-      transform: translateY(-300px);
+      transform: translateY(-240px);
     }
   }
 </style>