Ecosystem Image Fix (#103)

# Description

Bug: fix missing waves.

Current behavior:
<img width="1417" alt="Screenshot 2024-11-21 at 11 56 40 AM"
src="https://github.com/user-attachments/assets/8404297d-1299-44e5-86d6-f74ce8bffefc">

Expected behavior:
<img width="1439" alt="Screenshot 2024-11-21 at 11 57 00 AM"
src="https://github.com/user-attachments/assets/307420c1-d8ca-4553-a25e-f0c8499797bc">

---------

Co-authored-by: Claire Olmstead <[email protected]>

Author: claireclark1

src/components/GetNotified/ContactThankYou.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ThankYouWaves from '$lib/assets/ThankYouWave.svg';
+  import ThankYouWaves from '$lib/assets/Contact/ThankYouWave.svg';
 
   let { onClick = async () => {} } = $props();
 </script>

src/components/Sections/About.svelte

@@ -4,7 +4,7 @@
   import SectionParagraph from '../SectionParagraph.svelte';
   import SectionContent from '../SectionContent.svelte';
   import AboutAnimation from '../Animations/About.svelte';
-  import AboutRoadImg from '$lib/assets/aboutRoad.jpg';
+  import RoadImg from '$lib/assets/About/road.jpg';
 </script>
 
 <SectionWrapper id="about">
@@ -38,9 +38,5 @@
     </div>
   </div>
   <!-- Bottom border image -->
-  <img
-    src={AboutRoadImg}
-    alt="AboutRoad"
-    class="h-[145px] w-full object-cover sm:h-[185px] md:h-[250px] lg:h-[300px]"
-  />
+  <img src={RoadImg} alt="AboutRoad" class="h-[145px] w-full object-cover sm:h-[185px] md:h-[250px] lg:h-[300px]" />
 </SectionWrapper>

src/components/Sections/Ecosystem.svelte

@@ -2,21 +2,17 @@
   import { Button } from '@frequency-chain/style-guide';
   import SectionWrapper from './SectionWrapper.svelte';
   import TikTokTag from '../TikTokTag.svelte';
-  import WavesTwo from '$lib/assets/waves-two.svg';
-  import MeWeLogo from '$lib/assets/EcosystemIcons/mewe.svg';
-  import SoarLogo from '$lib/assets/EcosystemIcons/soar.svg';
+  import MeWeLogo from '../../lib/assets/Ecosystem/mewe-logo.svg';
+  import SoarLogo from '../../lib/assets/Ecosystem/soar-logo.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';
 </script>
 
 <SectionWrapper id="ecosystem">
   <div class="w-full overflow-hidden">
     <div class="h-[36px] bg-white lg:h-[61px]"></div>
     <div class="relative mb-[-36px] bg-navy lg:mb-[-61px]">
       <div
-        class="background relative top-[-36px] z-10 h-[240px] min-w-[1000px] max-w-none bg-contain bg-top bg-repeat-x md:h-[260px] lg:top-[-61px] lg:h-[300px] lg:w-full xl:h-[360px]"
-        style="background-image: url('{WavesTwo}')"
+        class="waves-bg-img background relative top-[-36px] z-10 h-[240px] min-w-[1000px] max-w-none bg-contain bg-top bg-repeat-x md:h-[260px] lg:top-[-61px] lg:h-[300px] lg:w-full xl:h-[360px]"
       ></div>
     </div>
   </div>
@@ -49,8 +45,18 @@
       <h1 class="title-70 mb-6 text-center font-title text-primary">Companies in the Frequency Ecosystem</h1>
     </SlideIn>
     <div class="flex w-full flex-wrap justify-around p-2 md:p-6">
-      <img class={logoClasses} alt="MeWe" src={MeWeLogo} />
-      <img class={logoClasses} alt="Soar" src={SoarLogo} />
+      <img class="logo" alt="MeWe" src={MeWeLogo} />
+      <img class="logo" alt="Soar" src={SoarLogo} />
     </div>
   </section>
 </SectionWrapper>
+
+<style lang="postcss">
+  .logo {
+    @apply max-h-[120px] w-full px-3 py-5 sm:w-1/2 lg:w-1/4;
+  }
+
+  .waves-bg-img {
+    background-image: url('../../lib/assets/Ecosystem/waves-two.svg?url');
+  }
+</style>

src/components/Sections/Mission/MissionItems.svelte

@@ -1,11 +1,11 @@
 <script>
   import MissionItem from '$components/Sections/Mission/MissionItem.svelte';
-  import App from '$lib/assets/MissionIcons/App.svg';
-  import Box from '$lib/assets/MissionIcons/Box.svg';
-  import Fingerprint from '$lib/assets/MissionIcons/Fingerprint.svg';
-  import Network from '$lib/assets/MissionIcons/Network.svg';
-  import Universe from '$lib/assets/MissionIcons/Universe.svg';
-  import Users from '$lib/assets/MissionIcons/Users.svg';
+  import App from '$lib/assets/Mission/App.svg';
+  import Box from '$lib/assets/Mission/Box.svg';
+  import Fingerprint from '$lib/assets/Mission/Fingerprint.svg';
+  import Network from '$lib/assets/Mission/Network.svg';
+  import Universe from '$lib/assets/Mission/Universe.svg';
+  import Users from '$lib/assets/Mission/Users.svg';
 
   const missionItems = [
     {

src/components/Sections/Users/UsersItems.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import UsersItem from './UsersItem.svelte';
-  import Control from '$lib/assets/UsersIcons/Control.svg';
-  import Community from '$lib/assets/UsersIcons/Community.svg';
-  import Ownership from '$lib/assets/UsersIcons/Ownership.svg';
+  import Control from '$lib/assets/Users/Control.svg';
+  import Community from '$lib/assets/Users/Community.svg';
+  import Ownership from '$lib/assets/Users/Ownership.svg';
 
   const userItems = [
     {

src/components/TikTokTag.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ThePeoplesBid from '$lib/assets/the-peoples-bid.svg';
+  import ThePeoplesBid from '$lib/assets/Ecosystem/the-peoples-bid.svg';
 </script>
 
 <div class={$$restProps.class}>

src/lib/assets/aboutRoad.jpg renamed to src/lib/assets/About/road.jpg

@@ -1,9 +1,9 @@
 <script lang="ts">
   import HAccordion from '../../../components/HAccordion.svelte';
-  import ProviderIcon from '$lib/assets/ExploreIcons/icon-provider.svg';
-  import GatewayIcon from '$lib/assets/ExploreIcons/icon-gateway.svg';
-  import SsoIcon from '$lib/assets/ExploreIcons/icon-sso.svg';
-  import CoreIcon from '$lib/assets/ExploreIcons/icon-core.svg';
+  import ProviderIcon from '$lib/assets/Explore/icon-provider.svg';
+  import GatewayIcon from '$lib/assets/Explore/icon-gateway.svg';
+  import SsoIcon from '$lib/assets/Explore/icon-sso.svg';
+  import CoreIcon from '$lib/assets/Explore/icon-core.svg';
   import SlideIn from '$components/SlideIn.svelte';
 
   let sectionOpenStates: boolean[] = [