https://puertoasis-putumayo.gov.co/SiteAssets/V3/componentes/Participa/main.js

1document.addEventListener("DOMContentLoaded", async () => {
2  cards.forEach((page) => {
3    drawCard(page);
4  });
5});
6
7const cards = [
8  {
9    Img: "/SiteAssets/V3/componentes/Participa/icons/diagnostico.svg",
10    Title: "Diagnóstico e identificación de problemas",
11    FileRef:
12      "/Participa/Paginas/Diagnostico-e-identificacion-de-problemas.aspx",
13  },
14  {
15    Img: "/SiteAssets/V3/componentes/Participa/icons/planeacion_y_presup.svg",
16    Title: "Planeación y presupuesto participativo",
17    FileRef: "/Participa/Paginas/Planeacion-y-presupuesto-participativo.aspx",
18  },
19  {
20    Img: "/SiteAssets/V3/componentes/Participa/icons/consulta ciudadana .svg",
21    Title: "Consulta ciudadana",
22    FileRef: "/Participa/Paginas/Consulta-ciudadana.aspx",
23  },
24  {
25    Img: "/SiteAssets/V3/componentes/Participa/icons/colaboracion e innovacion .svg",
26    Title: "Colaboración e innovación",
27    FileRef: "/Participa/Paginas/Colaboracion-e-innovacion.aspx",
28  },
29  {
30    Img: "/SiteAssets/V3/componentes/Participa/icons/rendicion_de_cuentas.svg",
31    Title: "Rendición de cuentas",
32    FileRef: "/Conectividad/Paginas/Rendicion-de-Cuentas.aspx",
33  },
34  {
35    Img: "/SiteAssets/V3/componentes/Participa/icons/control ciudadano .svg",
36    Title: "Control ciudadano",
37    FileRef: "/Participa/Paginas/Control-ciudadano.aspx ",
38  },
39];
40
41const drawCard = (item) => {
42  const ITEMS_CONTAINER = document.getElementById("itemsContainer");
43
44  const cardElement = document.createElement("LI");
45  cardElement.className = "border-[1px] group hover:bg-[#db323b] p-3 border-[#db323b] aspect-[5/2] rounded-lg flex items-center justify-center"; 
46
47  cardElement.innerHTML = `
48        <a href="${item.FileRef}" class="w-full flex gap-3">
49            <figure class="w-[30%] flex items-center">
50                <img src="${item.Img}" alt="${item.Title}" class="w-[40px] object-contain transition-all duration-300 group-hover:brightness-[3]">
51            </figure>
52            <section class="w-[70%] flex items-center">
53                <h2 class="!text-mainColor font-bold text-[18px] group-hover:!text-white transition-all duration-300">${item.Title}</h2>
54            </section>
55        </a>
56    `;
57  ITEMS_CONTAINER.appendChild(cardElement);
58};