feat: replace roadmap images by transparent and webp

Author: SergioRibera

assets/roadmap.webp

@@ -18,16 +18,6 @@
   filter: drop-shadow(5px 5px 0px #ffffff);
 }
 
-.image-container img:not(:first-child) {
-  @apply opacity-60
-}
-
-.image-container {
-  position: relative;
-  width: 100%;
-  height: auto;
-}
-
 .group:hover > span.badge-container {
   @apply first:min-w-28 first:min-h-6 items-center justify-center transition-all transform duration-1000;
 }
@@ -42,4 +32,4 @@
 
 .list-container {
   @apply min-w-80 md:min-w-[420px];
-}
+}

input.css

@@ -13,7 +13,7 @@ pub fn Roadmap(
 
     view! {
         <section class="bg-orange-200 py-20 flex flex-col-reverse md:flex-row items-center justify-center  container mx-auto gap-10">
-            <div class="container px-10  lg:mx-auto flex flex-wrap text-balance gap-5  lg:w-1/2">
+            <div class="container px-10 lg:mx-auto flex flex-wrap text-balance gap-5 lg:w-1/2">
                 <h1 class="font-alfa-slab text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left">
                     "Roadmap de aprendizaje del lenguaje"
                 </h1>
@@ -24,32 +24,18 @@ pub fn Roadmap(
                     "Ir al Roadmap"
                 </ButtonLink>
             </div>
-            <div class="w-full lg:w-1/2 min-h-72 xs:min-h-[420px] lg:min-h-[450px]  xs:mb-12">
-                <div class="image-container w-full max-w-60 xs:max-w-none mx-auto">
+            <div class="w-full lg:w-1/2 min-h-72 xs:min-h-[420px] lg:min-h-[450px] xs:mb-12">
+                <div class="w-full h-full max-w-60 xs:max-w-none mx-auto">
                     <img
-                        src=format!("{}/roadmap.avif", assets_folder)
+                        src=format!("{}/roadmap.webp", assets_folder)
                         alt="Roadmap"
                         width="748"
                         height="515"
                         loading="eager"
-                        class="skew-y-2 absolute -left-8 -top-5 z-30"
-                    />
-                    <img
-                        src=format!("{}/roadmap2.avif", assets_folder)
-                        alt="Roadmap"
-                        width="748"
-                        height="515"
-                        class="skew-y-2 absolute z-0 left-0 top-0"
-                    />
-                    <img
-                        src=format!("{}/roadmap3.avif", assets_folder)
-                        alt="Roadmap"
-                        width="748"
-                        height="515"
-                        class="skew-y-2 absolute z-0 left-10 top-10"
+                        class="skew-y-2 -left-8 -top-5 z-30"
                     />
                 </div>
             </div>
         </section>
     }
-}
+}