feat: update image formats to WebP for improved performance and reduc…

…e file sizes

src/components/templates/aprende.rs

@@ -28,31 +28,31 @@ pub fn AprendeSection() -> impl IntoView {
             <div class="p-3">
                 <div class="relative flex flex-row sm:block columns-1 sm:columns-3 gap-1 md:gap-8">
                     <div class="relative aspect-w-16 aspect-h-9">
-                      <img class="w-full object-cover rounded-lg" src="./assets/images/RustMX2018.png" />
+                      <img class="w-full object-cover rounded-lg" src="./assets/images/RustMX2018.webp" />
                       <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg  h-fit"></div>
                     </div>
                     <div class="relative aspect-w-1 aspect-h-1 md:mt-8">
-                      <img class="w-full object-cover rounded-lg" src="./assets/images/Peru2024.png" />
+                      <img class="w-full object-cover rounded-lg" src="./assets/images/Peru2024.webp" />
                       <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg h-fit"></div>
                     </div>
                     <div class="relative aspect-w-1 aspect-h-1 md:mt-8">
-                      <img class="w-full object-cover rounded-lg" src="./assets/images/MX2024v2.png" />
+                      <img class="w-full object-cover rounded-lg" src="./assets/images/MX2024v2.webp" />
                       <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg  h-fit"></div>
                     </div>
                     <div class="hidden sm:block relative aspect-w-1 aspect-h-1 mt-8 sm:mt-0">
-                      <img class="w-full object-cover rounded-lg" src="./assets/images/MX2024.png" />
+                      <img class="w-full object-cover rounded-lg" src="./assets/images/MX2024.webp" />
                       <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg"></div>
                     </div>
                     <div class="hidden sm:block relative aspect-w-16 aspect-h-9 mt-8">
-                      <img class="w-full object-cover rounded-lg" src="./assets/images/nerdearla2024.png" />
+                      <img class="w-full object-cover rounded-lg" src="./assets/images/nerdearla2024.webp" />
                       <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg"></div>
                     </div>
                     <div class="hidden sm:block relative aspect-w-16 aspect-h-9 mt-8">
-                      <img class="w-full object-cover rounded-lg" src="./assets/images/sergio2024.png" />
+                      <img class="w-full object-cover rounded-lg" src="./assets/images/sergio2024.webp" />
                       <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg"></div>
                     </div>
                     <div class="hidden sm:block relative aspect-w-16 aspect-h-9 mt-8">
-                      <img class="w-full object-cover rounded-lg" src="./assets/images/sticker.jpg" />
+                      <img class="w-full object-cover rounded-lg" src="./assets/images/sticker.webp" />
                       <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg"></div>
                     </div>
                   </div>

src/components/templates/drawer.rs

@@ -36,7 +36,7 @@ pub fn Drawer() -> impl IntoView {
             >
                 <div class="h-full">
                     <div class="p-5">
-                        <img src="/logo.png" width="640" height="640" class="size-24 rounded-full mx-auto" />
+                        <img src="/logo.webp" width="640" height="640" class="size-24 rounded-full mx-auto" />
                         <h2 class="font-bold mt-4 font-akira text-xl">Rust Perú</h2>
                         <nav class="text-left mt-4 px-2">
                             <ul class="space-y-2 list-disc">
@@ -54,8 +54,6 @@ pub fn Drawer() -> impl IntoView {
                     </div>
                     <div class="mt-4">
                         <p>"Únete a nuestra comunidad de Telegram"</p>
-                        // https://img.shields.io/aur/popularity/asd?style=flat&logo=telegram&logoColor=white&label=Miembros&labelColor=black&color=neon
-                        // (https://img.shields.io/endpoint?color=neon&style=flat&url=https%3A%2F%2Ftg.sumanjay.workers.dev%2Frustperu)](https://t.me/rustperu)
                         <a href="https://t.me/rustperu" class="bg-neon-500 text-white p-2 rounded-lg">
                             <img src="https://img.shields.io/endpoint?color=neon&style=flat&url=https://mogyo.ro/quart-apis/tgmembercount?chat_id=rustperu" class="mx-auto" />
                         </a>

src/components/templates/hero.rs

@@ -9,7 +9,7 @@ pub fn Hero() -> impl IntoView {
     view! {
         <div class="h-screen flex flex-col items-center text-center text-white bg-cover bg-center bg-machu-picchu bg-blend-hard-light bg-black/60 justify-between">
             <div class="h-full flex flex-col justify-center items-center">
-                <img src="/logo.png" width="640" height="640" class="w-64 h-64 rounded-full" />
+                <img src="/logo.webp" width="640" height="640" class="w-64 h-64 rounded-full" />
                 <h1 class="text-6xl font-bold mt-4 bg-black bg-opacity-70 p-4 rounded-md font-akira">Rust Perú</h1>
                 <div class="flex flex-col gap-4 mt-4 justify-center items-center">
                     <p class="text-2xl">"Únete a nuestra comunidad en:"</p>

tailwind.config.js

@@ -62,9 +62,9 @@ module.exports = {
         'inter': ['Inter', 'sans-serif'],
       },
       backgroundImage: {
-        'machu-picchu': "url('/background2.jpg')",
+        'machu-picchu': "url('/background2.avif')",
         'peru-flag': "url('/peru2.png')",
-        'call-to-action': "url('/assets/images/cta.png')",
+        'call-to-action': "url('/assets/images/cta.avif')",
       },
       listStyleImage: {
         'learning': "url('/assets/images/ferris_thinking.png')",