refactor(images): add hero and about section optimized images

public/data/about.json

@@ -1,19 +1,19 @@
 [
   {
     "id": 1,
-    "image": "assets/images/what.svg",
+    "image": "assets/images/what.webp",
     "title": "What?",
     "description": "We are ALiAS (Amity Linux Assistance Sapience), a passionate coding club dedicated to the exploration and promotion of Linux and open-source technologies."
   },
   {
     "id": 2,
-    "image": "assets/images/why.svg",
+    "image": "assets/images/why.webp",
     "title": "Why?",
     "description": "We exist to inspire, educate, and collaborate with students who share our enthusiasm for open-source software and to create a thriving community of tech enthusiasts."
   },
   {
     "id": 3,
-    "image": "assets/images/how.svg",
+    "image": "assets/images/how.webp",
     "title": "How?",
     "description": "We reach our goals through workshops, hackathons, open-source contributions, and a focus on skill development, all in a supportive learning community."
   }

src/components/Hero/Hero.jsx

@@ -19,7 +19,7 @@ const Hero = () => {
         </p>
         <div className={styles.hero__interactive}>
           <img
-            src="assets/images/hero-one.png"
+            src="assets/images/hero-one.webp"
             alt="hero"
             className={styles.hero__one_image}
           />
@@ -31,7 +31,7 @@ const Hero = () => {
             </button>
           </div>
           <img
-            src="assets/images/hero-two.png"
+            src="assets/images/hero-two.webp"
             alt="hero"
             className={styles.hero__two_image}
           />