Improve performance

Interface/src/Components/about/about.component.html

@@ -1,7 +1,7 @@
 <div class="responsive-container-block bigContainer">
   <div class="responsive-container-block Container bottomContainer">
     <div class="ultimateImg">
-      <img class="mainImg" src="assets/team.jpg" alt="team">
+      <img class="mainImg" src="assets/team.webp" alt="team">
     </div>
     <div class="allText bottomText">
       <p class="text-blk headingText">

Interface/src/Components/footer/footer.component.css

@@ -1,5 +1,5 @@
 .cta-section {
-  background: url('../../assets/hero-bg.png');
+  background: url('../../assets/hero-bg.webp');
   background-repeat: no-repeat;
   background-position: right;
   background-color: #0a2640;
@@ -144,4 +144,4 @@
   .cta-section {
     width: 90%;
   }
-}
+}

Interface/src/Components/footer/footer.component.html

@@ -13,7 +13,7 @@ <h1>{{ 'FOOTER_SUBSCRIBE_TITLE' | translate }}</h1>
 
   <div class="footer-content">
     <div class="footer-section logo">
-      <img src="assets/blacklogo.png" alt="FeedPulse Logo" class="logo-img">
+      <img src="assets/backlogo.webp" alt="FeedPulse Logo" class="logo-img">
       <p>{{ 'FOOTER_DESCRIPTION' | translate }}</p>
     </div>
 

Interface/src/Components/home/home.component.css

@@ -24,7 +24,7 @@
   align-items: center; /* vertical alignment */
   justify-content: center;
   position: relative;
-  background: url('../../assets/hero-bg.png');
+  background: url('../../assets/hero-bg.webp');
   background-position: right top;
   background-repeat: no-repeat;
   max-width: 100%;
@@ -291,7 +291,7 @@
     position: relative;
   }
   .timeline-section {
-    background-image: url('../../assets/home.jpg');
+    background-image: url('../../assets/home.webp');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;

Interface/src/Components/home/home.component.html

@@ -18,7 +18,7 @@ <h1>FeedPulse</h1>
     </ng-template>
   </div>
   <div class="right-side">
-    <img src="assets/GenericHero.png" alt="Description">
+    <img src="assets/GenericHero.webp" alt="Description">
   </div>
 </section>
 

Interface/src/Components/navbar/navbar.component.html

@@ -1,6 +1,6 @@
 <nav [ngClass]="{'navbar': true, 'scrolled': isScrolled}">
   <div class="navbar-brand">
-    <img src="assets/logo.png" alt="FeedPulse Logo" class="logo-img">
+    <img src="assets/logo.webp" alt="FeedPulse Logo" class="logo-img">
 
         <!-- Hamburger (mobile only) -->
     <button class="hamburger" (click)="toggleMenu()" aria-label="Toggle menu">