change favicon added modal form, fixed sections and installed daisy ui

package-lock.json

@@ -19,7 +19,8 @@
         "tailwindcss": "^4.1.18"
       },
       "devDependencies": {
-        "@tailwindcss/typography": "^0.5.19"
+        "@tailwindcss/typography": "^0.5.19",
+        "daisyui": "^5.5.18"
       }
     },
     "node_modules/@antfu/install-pkg": {
@@ -3019,6 +3020,16 @@
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "license": "CC0-1.0"
     },
+    "node_modules/daisyui": {
+      "version": "5.5.18",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.18.tgz",
+      "integrity": "sha512-VVzjpOitMGB6DWIBeRSapbjdOevFqyzpk9u5Um6a4tyId3JFrU5pbtF0vgjXDth76mJZbueN/j9Ok03SPrh/og==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.19",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",

package.json

@@ -21,6 +21,7 @@
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.19"
+    "@tailwindcss/typography": "^0.5.19",
+    "daisyui": "^5.5.18"
   }
 }

src/components/BoxContainer.astro

@@ -1,8 +1,8 @@
-≈---
+---
 const { props } = Astro.props;
 import { Icon } from "astro-icon/components";
 import Button from "./ui/Button.astro";
-
+import Modal from "./Modal.astro";
 const background = props.bgImage || props.bgColor;
 
 ---
@@ -26,9 +26,8 @@ const background = props.bgImage || props.bgColor;
     )}
 
     {props.hasInput && (
-        <div class="flex border gap-2 w-full">
+        <div class="flex gap-2 w-full">
-            <input type="email" placeholder="Correo" class="flex-1 p-2 min-w-0 outline-none"/>
+           <Modal />
-            <Button class="px-6 py-3 uppercase" variant="secondary" title={props.buttonLabel} />
         </div>
     )}
     </div>

src/components/Header.astro

@@ -4,8 +4,8 @@ import Button from "./ui/Button.astro";
 
 <div>
   <div class="md:flex justify-between px-8 md:px-0 md:py-4">
-    <div class="border-l-4 border-primary pl-4">
+    <div class="border-l-4 border-colorPrimary pl-4">
-      <p class="font-secondary text-primary font-bold leading-none py-2 text-3xl md:text-lg">
+      <p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-3xl md:text-lg">
         <a href="/">Centro del Reino<br /> De Paz y Justicia</a>
       </p>
     </div>
@@ -13,9 +13,9 @@ import Button from "./ui/Button.astro";
       class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
     >
       <div class="hidden md:flex gap-8 font-primary font-bold">
-        <a class="hover:text-primary transition" href="#somos">Somos</a>
+        <a class="hover:text-colorPrimary transition" href="#somos">Somos</a>
-        <a class="hover:text-primary transition" href="#programs">Programas</a>
+        <a class="hover:text-colorPrimary transition" href="#programs">Programas</a>
-        <a class="hover:text-primary transition" href="#news">Noticias</a>
+        <a class="hover:text-colorPrimary transition" href="#news">Noticias</a>
       </div>
       <div class="w-50">
         <Button class="px-8 py-2 uppercase" title="Contacto" url="#contact" variant="primary" />

src/components/HeroHome.astro

@@ -15,7 +15,7 @@ import Header from './Header.astro';
                         alt="Logo Metalico"
                         class="w-20 sm:24 md:w-32 lg:w-58 mb-4 mt-0"
                     />
-                <div class="text-primary font-semibold font-secondary sm:mb-24 mt-8">
+                <div class="text-colorPrimary font-semibold font-secondary sm:mb-24 mt-8">
                     <h1 class="text-3xl md:text-6xl sm:mb-8">
                         Dr. José Benjamín<br /> Pérez Matos
                     </h1>
@@ -24,7 +24,7 @@ import Header from './Header.astro';
             </div>
             <div class="order-first md:order-last flex flex-col md:justify-end items-end gap-8 ">
                 <div
-                    class="md:w-1/2 font-primary font-medium text-2xl text-primary gap-8 flex flex-col justify-end mb-24"
+                    class="md:w-1/2 font-primary font-medium text-2xl text-colorPrimary gap-8 flex flex-col justify-end mb-24"
                 >
                     <h2 class="text-[#EAE6D2] text-lg py-8">
                         “El sueño de mi vida es ver cumplida la visión de los

src/components/Modal.astro

@@ -0,0 +1,70 @@
+---
+import Button from "./ui/Button.astro";
+import { Icon } from "astro-icon/components";
+const { id, title } = Astro.props;
+---
+
+<!-- Open the modal using ID.showModal() method -->
+<button class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg" onclick="my_modal_5.showModal()">Registrate</button>
+<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
+  <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
+    <form method="dialog">
+            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"><Icon name="ph:x" class="text-2xl" /></button>
+    </form>
+    <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">Formulario de Registro</h3>
+    <div class="form py-4 mt-6 ">
+
+        <form id="voluteenFrom" class="flex flex-col gap-2 place-items-center" action="">
+
+            <label class="input rounded-none">
+                <span>Nombres <span class="text-error">*</span></span>
+                <input id="name" type="text" placeholder="Nombres" class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error" required/>
+            </label>
+
+            <label class="input rounded-none">
+                <span>Apellidos <span class="text-error">*</span></span>
+                <input id="lastname" type="text" placeholder="Apellidos" class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error" required />
+            </label>
+
+            <label class="input rounded-none">
+                <span>País</span>
+                <input id="country" type="text" placeholder="Pais" class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none">
+                <span>Lugar</span>
+                <input id="place" type="text" placeholder="Lugar" class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none">
+                <span>Dirección</span>
+                <input id="address" type="text" placeholder="Dirección" class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none">
+                <span>Teléfono <span class="text-error">*</span></span>
+                <input id="phone" type="text" placeholder="Teléfono" class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error" required />
+            </label>
+
+            <label class="input validator rounded-none">
+                <span>Email <span class="text-error">*</span></span>
+                <input id="email" type="email" placeholder="Ingresa Correo Electrónico" class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error" required />
+            </label>
+
+            <div class="validator-hint hidden text-error text-sm">
+                Inserta un correo electrónico válido
+            </div>
+                
+            <button type="submit" class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">Enviar</button>
+
+        </form>
+
+    </div>
+  </div>
+</dialog>
+
+<script>
+    
+
+
+</script>

src/components/section/AuthoritySection.astro

@@ -8,7 +8,7 @@ const { title, titleColor, description, descColor, bgColor } = Astro.props;
             <h2 class={`${titleColor} text-2xl`}><strong>Autoridades</strong> | Centro del Reino de Paz y Justicia</h2>
             <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="hidden sm:flex col-span-1 bg-secondary items-end self-end justify-center h-82 overflow-visible">
+        <div class="hidden sm:flex col-span-1 bg-[#CBA16A] items-end self-end justify-center h-82 overflow-visible">
             <img src="/img/DRJBP-1.webp" class="w-48 sm:w-64 lg:w-76 object-contain absolute bottom-0" alt="">
         </div>
     </div>

src/components/section/FooterSection.astro

@@ -15,8 +15,8 @@ import jbp from "../../assets/DRJBP-1.webp";
         <h2 class="text-2xl lg:text-5xl text-center font-bold font-secondary my-8">Conectemos con visión y propósito</h2>
 
         <div class="px-12 lg:px-4 lg:w-2/5 mx-auto">
-            <p class="text-lg font-light mb-10">El <strong>Centro del Reino de Paz y Justicia</strong> dispone de canales directos para consultas institucionales, participación en programas y acti- vidades internacionales.</p>
+            <p class="text-lg font-light mb-10">El <strong>Centro del Reino de Paz y Justicia</strong> dispone de canales directos para consultas institucionales, participación en programas y actividades internacionales.</p>
-            <p class="text-lg font-light mb-10 wrap-break-word">Correo electrónico: <strong>info@centrodelreinodepazyjusticia.com</strong> Redes sociales: actualizaciones permanentes sobre actividades y convocatorias.</p>
+            <p class="text-lg font-light mb-10 wrap-break-word">Correo electrónico: <strong>info@centrodelreinodepazyjusticia.com</strong><br> Redes sociales: actualizaciones permanentes sobre actividades y convocatorias.</p>
 
             <div class="flex flex-col gap-4">
                 <form action="">

src/components/ui/Button.astro

@@ -7,7 +7,7 @@ const { variant = "primary", title = "Botón", url = "#", class: className } = A
 };
 const variants = {
     primary: "bg-[#EBE6D2] text-[#22523F] hover:bg-[#22523F]/90 hover:text-[#EBE6D2] rounded-none",
-    secondary: "bg-[#22523F] text-[#EBE6D2] hover:bg-[#22523F]/90 uppercase rounded-none",
+    secondary: "bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none",
     light: "bg-green-100",
 } as const;
 

src/pages/index.astro

@@ -41,7 +41,7 @@ const carouselImages3 = [
 
   <IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />
 
-  <AuthoritySection bgColor="bg-[#003421]" titleColor="text-secondary" descColor="text-[#EBE6D2]" />
+  <AuthoritySection bgColor="bg-[#003421]" titleColor="text-colorSecondary" descColor="text-[#EBE6D2]" />
 
   <TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
 

src/styles/global.css

@@ -1,12 +1,13 @@
 @import "tailwindcss";
 @plugin '@tailwindcss/typography';
+@plugin "daisyui";
 
 @theme {
     --font-primary: "Poppins", sans-serif;
     --font-secondary: "Rockwell", sans-serif;
 
-    --color-primary: #EBE6D2;
+    --color-colorPrimary: #EBE6D2;
-    --color-secondary: #CBA16A;
+    --color-colorSecondary: #CBA16A;
     --color-tertiary: #003421;
     --color-link: #CBA16A;