optimizaciones

package.json

@@ -4,10 +4,10 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "astro dev",
-    "format": "npx prettier --write . --plugin=prettier-plugin-astro",
-    "lint": "npx oxlint",
+    "format": "pnpm dlx prettier --write . --plugin=prettier-plugin-astro",
+    "lint": "pnpm dlx oxlint",
     "start": "astro dev",
-    "build": "npm run format && npm run lint && astro check && astro build",
+    "build": "pnpm format && pnpm lint && astro check && astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
@@ -32,6 +32,7 @@
     "embla-carousel-autoplay": "^8.1.7",
     "embla-carousel-react": "^8.1.7",
     "lucide-react": "^0.408.0",
+    "postcss": "^8.4.40",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

src/components/common/footer/footer_content/Rrss.astro

@@ -1,17 +1,11 @@
 ---
-import logo from "@assets/images/amai_logo.png";
-import { Picture } from "astro:assets";
+import logo from "@assets/images/amai_logo.webp";
+import { Image } from "astro:assets";
 import SocialButtons from "./SocialButtons.astro";
 ---
 
 <div class="w-full md:w-1/3 p-5 xl:p-10 flex flex-col items-center">
-  <Picture
-    src={logo}
-    alt="Centro amai logo"
-    formats={["webp", "png"]}
-    fallbackFormat="png"
-    class="w-52 py-2"
-  />
+  <Image src={logo} alt="Centro amai logo" loading={"lazy"} class="w-52 py-2" />
 
   <div class="text-center">
     <p class="text-black text-xs lg:text-sm xl:text-base px-14 md:px-0">

src/components/common/navigation/NavMenu.tsx

@@ -9,6 +9,9 @@ import {
 import { navServicesChild } from "@/utils/servicesSeed";
 import NavContentItem from "./item/NavContentItem";
 
+import pediatria from "@assets/images/nav/pediatria.webp";
+import adulto from "@assets/images/nav/adulto.webp";
+
 const NavMenu = () => {
   const itemClass: string = "px-2";
 
@@ -35,7 +38,7 @@ const NavMenu = () => {
             <NavContentItem
               imageItem={{
                 title: "Pediatría",
-                image: "nav/pediatria.jpg",
+                image: pediatria.src,
                 imageAlt: "Fondo pediatría",
               }}
               services={navServicesChild}
@@ -51,7 +54,7 @@ const NavMenu = () => {
             <NavContentItem
               imageItem={{
                 title: "Adulto",
-                image: "nav/adulto.jpg",
+                image: adulto.src,
                 imageAlt: "Fondo adulto",
               }}
               services={navServicesChild}

src/components/common/navigation/NavSection.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
-import LogoNormal from "@assets/images/amai_logo_full.png";
-import LogoWhite from "@assets/images/amai_logo_full_white.png";
+import LogoNormal from "@assets/images/amai_logo_full.webp";
+import LogoWhite from "@assets/images/amai_logo_full_white.webp";
 
 import NavMenu from "./NavMenu";
 import SheetHamb from "./SheetHamb";

src/components/home/about/AboutSection.astro

@@ -1,7 +1,7 @@
 ---
-import { Picture } from "astro:assets";
+import { Image, Picture } from "astro:assets";
 
-import about from "@assets/images/about.jpg";
+import about from "@assets/images/about.webp";
 ---
 
 <!-- Sobre nosotros -->
@@ -41,11 +41,10 @@ import about from "@assets/images/about.jpg";
     </div>
 
     <div class="lg:w-1/2">
-      <Picture
+      <Image
         src={about}
         alt="Acerca de nosotros"
-        formats={["webp", "jpg"]}
-        fallbackFormat="jpg"
+        loading={"lazy"}
         class="object-cover 2xl:w-full rounded-t-3xl z-10 md:rounded-3xl mx-auto"
       />
     </div>

src/components/home/front_carousel/FooterCarousel.astro

@@ -3,9 +3,9 @@ import { FaWhatsapp } from "react-icons/fa";
 
 import camila from "@assets/images/equipo/camila_eguiluz.jpg";
 import karla from "@assets/images/equipo/karla_lopez.jpg";
-import logo from "@assets/images/amai_logo.png";
+import logo from "@assets/images/amai_logo.webp";
 import { RxDoubleArrowDown } from "react-icons/rx";
-import { Picture } from "astro:assets";
+import { Image, Picture } from "astro:assets";
 ---
 
 <div class="flex justify-center md:px-10 xl:px-28 relative">
@@ -32,23 +32,21 @@ import { Picture } from "astro:assets";
             <div
               class="w-11 h-11 overflow-hidden rounded-full border-2 border-caqua"
             >
-              <Picture
+              <Image
                 src={camila}
                 alt="Imagen camila"
-                formats={["webp", "jpg"]}
-                fallbackFormat="jpg"
+                loading={"eager"}
                 class="object-cover"
               />
             </div>
 
             <div
               class="w-11 h-11 overflow-hidden rounded-full border-2 border-caqua -translate-x-3"
             >
-              <Picture
+              <Image
                 src={karla}
                 alt="Imagen karla"
-                formats={["webp", "jpg"]}
-                fallbackFormat="jpg"
+                loading={"eager"}
                 class="object-cover h-full"
               />
             </div>
@@ -65,11 +63,10 @@ import { Picture } from "astro:assets";
       </div>
 
       <div class="text-center py-5 md:py-0">
-        <Picture
+        <Image
           src={logo}
           alt="Centro amai logo"
-          formats={["webp", "png"]}
-          fallbackFormat="png"
+          loading={"eager"}
           class="w-28 md:w-14 m-auto"
         />
       </div>

src/components/home/front_carousel/FrontCarouselItem.tsx

@@ -6,7 +6,7 @@ const FrontCarouselItem = ({ item }: { item: CarouselItemType }) => (
     <img
       src={item.image.src}
       alt="Home"
-      loading="lazy"
+      loading="eager"
       className="object-cover w-full h-[80vh] opacity-90 blur-sm rounded-b-3xl"
     />
     <div className="absolute inset-0 bg-gradient-to-br from-cbackground to-transparent opacity-100 rounded-b-3xl"></div>

src/components/home/team/Person.astro

@@ -3,6 +3,7 @@ import type { SocialLinkType } from "@/utils/types";
 import Picture from "astro/components/Picture.astro";
 import { FaCircle } from "react-icons/fa6";
 import SocialLink from "./PersonSocialLink.astro";
+import { Image } from "astro:assets";
 
 interface Props {
   name: string;
@@ -21,11 +22,10 @@ const { name, position, photo, socials } = Astro.props;
     <div
       class="relative hover:scale-105 transition-transform duration-300 ease-in-out w-full h-full"
     >
-      <Picture
+      <Image
         src={photo}
         alt=`Foto perfil ${name}`
-        formats={["webp", "jpg"]}
-        fallbackFormat="jpg"
+        loading={"lazy"}
         class="object-cover rounded-3xl w-full h-full transform"
       />