Image adjustments

astro.config.mjs

@@ -11,6 +11,8 @@ export default defineConfig({
       plugins: [tailwindcss()],
   },
 
+  //base: '/mockup/',
+
   integrations: [markdoc(), icon()],
 
   i18n: {

src/components/BaseHead.astro

@@ -10,7 +10,7 @@ const {
 		<meta charset="utf-8" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
         <meta name="description" content={description} />

src/components/BoxContainer.astro

@@ -6,7 +6,7 @@ import Button from "./ui/Button.astro";
 const background = props.bgImage || props.bgColor;
 
 ---
-<div style={{ background: props.bgImage ? `url('${props.bgImage}') center no-repeat; background-size:680px;` : props.bgColor }} class={`aspect-square py-12 px-16 flex flex-col justify-evenly`}>
+<div style={{ background: props.bgImage ? `url('${props.bgImage}') center no-repeat; background-size:680px;` : props.bgColor }} class={`aspect-auto lg:aspect-square py-12 px-16 flex flex-col justify-evenly`}>
 
      <div class="flex flex-col gap-6">
         {props.hasIcon && (

src/components/HeroHome.astro

@@ -12,7 +12,7 @@ import Header from './Header.astro';
             <div class="gap-8 flex flex-col justify-end">
                 <div>
                     <img
-                        src="/src/assets/logo-metalico.webp"
+                        src="/img/logo-metalico.webp"
                         alt="Logo Metalico"
                         class="w-58 mb-4"
                     />
@@ -35,7 +35,7 @@ import Header from './Header.astro';
                     </h2>
                     <div class="w-16 self-end mt-64">
                         <img
-                            src="/src/assets/white-dove.webp"
+                            src="/img/white-dove.webp"
                             alt="White Dove"
                         />
                     </div>

src/components/cards/NewsCard.astro

@@ -1,5 +1,5 @@
 ---
-import Image from "astro/components/Image.astro";
+import { Image } from "astro:assets"
 import { Icon } from "astro-icon/components";
 import dayjs from "dayjs";
 

src/components/section/AuthoritySection.astro

@@ -9,7 +9,7 @@ const { title, titleColor, description, descColor, bgColor } = Astro.props;
             <p>El <strong>Dr. José Benjamín Pérez Matos</strong> es el <strong>fundador y único referente del Centro del Reino de Paz y Justicia.</strong> Su liderazgo articula visión espiritual, formación intelectual, acción pública y proyección internacional.</p>
         </div>
         <div class="col-span-4 bg-secondary flex items-end self-end justify-center h-82 overflow-visible">
-            <img src="/src/assets/DRJBP-1.webp" class="w-92 h-98 object-contain" alt="">
+            <img src="/img/DRJBP-1.webp" class="w-92 h-98 object-contain" alt="">
         </div>
     </div>
 </div>

src/components/section/CarouselSection.astro

@@ -1,5 +1,5 @@
 ---
-import Image from "astro/components/Image.astro";
+import { Image } from "astro:assets"
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";

src/components/section/FooterSection.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import Image from "astro/components/Image.astro";
+import { Image } from "astro:assets"
 import jbp from "../../assets/DRJBP-1.webp";
 ---
 <div class="bg-[#22523F]">

src/components/section/IdentitySection.astro

@@ -6,7 +6,7 @@ const { title, text, initTitle, colorText, bgColor } = Astro.props;
 
     <div class={`grid grid-cols-12 ${bgColor}`}>
         <div class="bg-[#22523F] col-span-4 flex items-center justify-center bg-[url('/src/assets/mid-logo-2.webp')] bg-left">
-            <img src="/src/assets/logo-metalico.webp" alt="Imagen de identidad del CPyJ" class="w-1/2" />
+            <img src="/img/logo-metalico.webp" alt="Imagen de identidad del CPyJ" class="w-1/2" />
         </div>
         <div class={`flex flex-col ${colorText} col-span-8 gap-8 py-24 px-32`}>
             <h2 class="font-primary text-3xl font-bold">{initTitle}</h2>

src/components/section/InfoSection.astro

@@ -7,7 +7,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
 ---
 
 <div class="container mx-auto">
-    <div class="grid grid-cols-3">
+    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3">
         { infoboxes.map((box) => (
             <BoxContainer props={box} />    
         ))}
@@ -37,7 +37,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
             }} />
         </div>
         <div class="col-span-1 py-38 px-24 bg-[#21523F]">
-            <img src="/src/assets/logo-ligth.webp" alt="Logo del CPyJ">
+            <img src="/img///logo-ligth.webp" alt="Logo del CPyJ">
         </div>
     </div>
 </div>

src/components/section/ProjectionSection.astro

@@ -49,11 +49,11 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
                     bgColor: '#CBA16A',
                 }} />
                 <div class="absolute -bottom-[8rem] z-10 w-full">
-                    <img src="/src/assets/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del CPyJ">
+                    <img src="/img/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del CPyJ">
                 </div>
             </div>
             <div class="bg-[#22523F] object-cover pt-64 justify-end flex">
-                <img src="/src/assets/DRJBP-2.webp" class="h-full object-cover" />
+                <img src="/img/DRJBP-2.webp" class="h-full object-cover" />
             </div>
         </div>
         

src/pages/index.astro

@@ -9,7 +9,7 @@ import CarouselSection from "../components/section/CarouselSection.astro";
 import InfoSection from "../components/section/InfoSection.astro";
 import IdentitySection from "../components/section/IdentitySection.astro";
 import AuthoritySection from "../components/section/AuthoritySection.astro";
-import ProjectionSection from "../components/section/projectionSection.astro";
+import ProjectionSection from "../components/section/ProjectionSection.astro";
 
 import { infoboxes } from "../data/content/infosection.js";
 import ColorSection from "../components/section/ColorSection.astro";

src/styles/global.css

@@ -9,6 +9,8 @@
     --color-secondary: #CBA16A;
     --color-tertiary: #003421;
     --color-link: #CBA16A;
+
+    --container-mobile: 40rem;
 }
 
 :root {