Файловый менеджер - Редактировать - /home/adiggxhn/public_html/index.html
Ðазад
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <title>ADIG-SN - Asociación para el Desarrollo Integral de Guatemala</title> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" /> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <script id="tailwind-config"> tailwind.config = { darkMode: "class", theme: { extend: { colors: { "primary": "#003366", "secondary": "#28a745", "turquoise": "#00CED1", "metallic": "#9ca3af", "background-light": "#f3f4f6", "background-dark": "#111827", }, fontFamily: { "display": ["Manrope", "sans-serif"] }, borderRadius: { "DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "2xl": "2rem", "3xl": "3rem", "full": "9999px" }, boxShadow: { 'soft': '0 10px 40px -10px rgba(0,0,0,0.08)', 'glow': '0 0 20px rgba(0, 206, 209, 0.3)', } }, }, } </script> <style type="text/tailwindcss"> @layer utilities { .text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .text-shadow-lg { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } } </style> </head> <body class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-100 font-display antialiased selection:bg-turquoise selection:text-white"> <div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden"> <header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-slate-200/50 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md dark:border-slate-800 px-6 py-4 lg:px-10 shadow-sm transition-all duration-300"> <div class="flex items-center gap-4"> <a href="index.html" class="flex items-center"> <img src="logo_adig.png" alt="ADIG-SN Logo" class="h-14 w-auto object-contain transition-transform hover:scale-105" /> </a> </div> <div class="hidden lg:flex flex-1 justify-end gap-8 items-center"> <nav class="flex items-center gap-8"> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="index.html"> Inicio <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="somos.html"> Nosotros <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="esccuelas.html"> Escuela <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="programas.html"> Programas <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="donaciones.html"> Donaciones <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="actividades.html"> Noticias <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="contacto.html"> Contacto <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> </nav> <a href="https://adig-v2.vercel.app/login" target="_blank" rel="noopener noreferrer" class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-11 px-8 bg-primary hover:bg-blue-800 transition-all hover:shadow-lg hover:shadow-primary/30 text-white text-sm font-bold tracking-wide transform active:scale-95"> <span class="truncate">Plataforma</span> </a> </div> <button class="lg:hidden text-slate-900 dark:text-white p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800"> <span class="material-symbols-outlined">menu</span> </button> </header> <main class="flex-grow flex flex-col"> <section class="relative flex min-h-[700px] flex-col justify-center overflow-hidden bg-slate-900 py-24 px-4 lg:py-32"> <div class="absolute inset-0 z-0"> <img alt="Nursing students in white uniforms smiling in a modern classroom setting" class="h-full w-full object-cover opacity-30" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDmMBPieqtIgw2TH9ZzU1gg40dBv9i560nCsniE1Cf-BgucB-AQQu0vv3zUyshHWlp0wjrzs5LYVZGKujJCAtKRVUY7bmG2IKOyilG7NTnqXQvvJ1re61HsVHMx6xcFhFoEVyFUps8Lu2Q2LwJHpDUVFrew5cq0Sa8qVjDzy_ZH-jFRk4pXabBeMr5mLPSpbskf0I4e0qvT9S3VJDCku1dObpMRA90KkrE42O3Ak5BV5eZus2LqmGslAaXigDd3KD7dZqVffdqKC58" /> <div class="absolute inset-0 bg-gradient-to-r from-primary/95 via-primary/70 to-transparent mix-blend-multiply"> </div> <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent"></div> </div> <div class="absolute top-20 right-10 w-64 h-64 bg-turquoise/20 rounded-full blur-[100px] z-0 pointer-events-none"> </div> <div class="absolute bottom-10 left-10 w-96 h-96 bg-secondary/10 rounded-full blur-[120px] z-0 pointer-events-none"> </div> <div class="relative z-10 mx-auto max-w-7xl w-full px-4 lg:px-8"> <div class="max-w-3xl flex flex-col gap-8"> <div class="animate-fade-in-up"> <span class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm font-bold text-turquoise ring-1 ring-inset ring-turquoise/30 backdrop-blur-md shadow-glow"> <span class="flex h-2 w-2 rounded-full bg-turquoise animate-pulse"></span> Escuela de Auxiliares de Enfermería </span> </div> <h1 class="text-white text-5xl font-black leading-[1.1] tracking-tight lg:text-7xl drop-shadow-sm"> Formamos <span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-slate-200 to-metallic">Profesionales</span> en Salud con <span class="text-turquoise">Vocación</span> </h1> <p class="text-slate-200 text-lg md:text-xl font-medium leading-relaxed max-w-2xl border-l-4 border-turquoise pl-6"> Somos una institución comprometida con el desarrollo social y la salud comunitaria en Guatemala, educando a la próxima generación de héroes de la salud. </p> <div class="flex flex-col sm:flex-row gap-5 pt-6"> <a href="esccuelas.html" class="flex items-center justify-center rounded-full h-14 px-10 bg-turquoise hover:bg-cyan-400 text-primary hover:text-primary text-base font-bold transition-all shadow-[0_0_20px_rgba(0,206,209,0.4)] hover:shadow-[0_0_30px_rgba(0,206,209,0.6)] transform hover:-translate-y-1"> Conoce la Escuela <span class="material-symbols-outlined ml-2 text-xl">arrow_forward</span> </a> <a href="programas.html" class="flex items-center justify-center rounded-full h-14 px-10 bg-white/5 hover:bg-white/10 text-white border border-white/30 backdrop-blur-md text-base font-bold transition-all hover:border-white/60"> Nuestros Programas </a> </div> </div> </div> </section> <section class="py-24 bg-white dark:bg-background-dark px-4 relative overflow-hidden"> <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-slate-50 to-transparent dark:from-slate-800/20 pointer-events-none"> </div> <div class="mx-auto max-w-7xl px-4 lg:px-8 relative z-10"> <div class="flex flex-col lg:flex-row gap-16 items-start"> <div class="flex-1 lg:sticky lg:top-32"> <div class="inline-block mb-4"> <span class="text-sm font-extrabold tracking-widest text-metallic uppercase">Sobre Nosotros</span> </div> <h2 class="text-primary dark:text-white text-4xl lg:text-5xl font-black tracking-tight mb-6 leading-tight"> Compromiso con el <span class="relative z-10 inline-block px-2">Desarrollo <span class="absolute bottom-2 left-0 w-full h-3 bg-secondary/30 -z-10 skew-x-12"></span> </span> </h2> <p class="text-slate-600 dark:text-slate-300 text-lg leading-relaxed mb-8 font-medium"> ADIG-SN es una organización enfocada en la educación, salud y bienestar social de las comunidades más vulnerables de Guatemala. Creemos en el potencial humano y en la educación como herramienta de cambio. </p> <div class="flex gap-4"> <div class="flex flex-col p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl border border-slate-100 dark:border-slate-700 w-32 items-center text-center"> <span class="text-3xl font-black text-primary dark:text-turquoise mb-1">10+</span> <span class="text-xs font-bold text-slate-500 uppercase tracking-wide">Años de experiencia</span> </div> <div class="flex flex-col p-4 bg-slate-50 dark:bg-slate-800 rounded-2xl border border-slate-100 dark:border-slate-700 w-32 items-center text-center"> <span class="text-3xl font-black text-secondary mb-1">5k+</span> <span class="text-xs font-bold text-slate-500 uppercase tracking-wide">Vidas impactadas</span> </div> </div> </div> <div class="flex-1 w-full grid gap-8"> <div class="group relative flex flex-col gap-6 rounded-3xl border border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-800 p-8 shadow-soft hover:shadow-2xl hover:shadow-primary/10 transition-all duration-500 transform hover:-translate-y-1"> <div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity"> <span class="material-symbols-outlined text-8xl text-primary">target</span> </div> <div class="size-14 rounded-2xl bg-gradient-to-br from-primary to-blue-700 flex items-center justify-center text-white shadow-lg shadow-primary/30 group-hover:scale-110 transition-transform duration-300"> <span class="material-symbols-outlined text-3xl">target</span> </div> <div> <h3 class="text-slate-900 dark:text-white text-2xl font-bold mb-3">Nuestra Misión </h3> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-base"> Educar y formar profesionales técnicos en salud con altos valores éticos, morales y espíritu de servicio, contribuyendo al mejoramiento de la calidad de vida de la población guatemalteca. </p> </div> </div> <div class="group relative flex flex-col gap-6 rounded-3xl border border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-800 p-8 shadow-soft hover:shadow-2xl hover:shadow-secondary/10 transition-all duration-500 transform hover:-translate-y-1"> <div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity"> <span class="material-symbols-outlined text-8xl text-secondary">visibility</span> </div> <div class="size-14 rounded-2xl bg-gradient-to-br from-secondary to-green-600 flex items-center justify-center text-white shadow-lg shadow-secondary/30 group-hover:scale-110 transition-transform duration-300"> <span class="material-symbols-outlined text-3xl">visibility</span> </div> <div> <h3 class="text-slate-900 dark:text-white text-2xl font-bold mb-3">Nuestra Visión </h3> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-base"> Ser una institución líder en educación y desarrollo comunitario integral, reconocida por la excelencia académica de sus egresados y el impacto positivo de sus programas sociales. </p> </div> </div> </div> </div> </div> </section> <section class="py-24 bg-background-light dark:bg-slate-900 px-4"> <div class="mx-auto max-w-7xl px-4 lg:px-8"> <div class="flex flex-col lg:flex-row gap-12 lg:gap-24 items-center"> <div class="flex-1 flex flex-col gap-8 order-2 lg:order-1"> <div> <span class="inline-flex items-center gap-2 text-turquoise font-extrabold tracking-wider text-sm uppercase mb-3"> <span class="h-px w-8 bg-turquoise"></span> Educación de Calidad </span> <h2 class="text-primary dark:text-white text-4xl lg:text-5xl font-black leading-tight mb-6"> Escuela de Auxiliares de Enfermería </h2> <p class="text-slate-600 dark:text-slate-300 text-lg leading-relaxed font-medium"> Nuestra escuela ofrece una formación integral teórico-práctica con docentes altamente capacitados. Prepárate para servir con excelencia en el sistema de salud nacional. </p> </div> <div class="bg-white dark:bg-slate-800 p-8 rounded-3xl shadow-sm border border-slate-100 dark:border-slate-700"> <ul class="flex flex-col gap-6"> <li class="flex gap-4 items-start"> <div class="mt-1 min-w-[24px] text-secondary bg-secondary/10 rounded-full p-1"> <span class="material-symbols-outlined text-[20px] font-bold">check</span> </div> <div> <h4 class="font-bold text-slate-900 dark:text-white text-lg">Prácticas Clínicas Supervisadas</h4> <p class="text-sm text-slate-500 dark:text-slate-400 font-medium"> Experiencia real en hospitales nacionales y centros de salud.</p> </div> </li> <li class="flex gap-4 items-start"> <div class="mt-1 min-w-[24px] text-secondary bg-secondary/10 rounded-full p-1"> <span class="material-symbols-outlined text-[20px] font-bold">check</span> </div> <div> <h4 class="font-bold text-slate-900 dark:text-white text-lg">Aval Ministerial</h4> <p class="text-sm text-slate-500 dark:text-slate-400 font-medium">Programas certificados por el Ministerio de Salud Pública.</p> </div> </li> <li class="flex gap-4 items-start"> <div class="mt-1 min-w-[24px] text-secondary bg-secondary/10 rounded-full p-1"> <span class="material-symbols-outlined text-[20px] font-bold">check</span> </div> <div> <h4 class="font-bold text-slate-900 dark:text-white text-lg">Docentes Especializados</h4> <p class="text-sm text-slate-500 dark:text-slate-400 font-medium">Clases impartidas por licenciados en enfermería y médicos.</p> </div> </li> </ul> </div> <div class="flex flex-wrap gap-4 pt-2"> <a href="esccuelas.html#apply" class="rounded-full flex items-center justify-center h-14 px-8 bg-gradient-to-r from-primary to-blue-800 hover:from-blue-800 hover:to-primary text-white font-bold transition-all shadow-xl shadow-primary/20 hover:shadow-primary/40 transform hover:-translate-y-1"> Inscripciones Abiertas </a> <a href="esccuelas.html#apply" class="rounded-full flex items-center justify-center h-14 px-8 bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-600 hover:border-primary dark:hover:border-turquoise hover:text-primary dark:hover:text-turquoise text-slate-700 dark:text-white font-bold transition-all"> Solicita Información </a> </div> </div> <div class="flex-1 order-1 lg:order-2 w-full"> <div class="relative w-full aspect-[4/5] lg:aspect-[3/4] rounded-[2.5rem] overflow-hidden shadow-2xl group"> <img alt="Medical instructor teaching students in a laboratory setting" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuIZFQXX2Be_HVwGb9BeSVAaj4P2MVgBuVp4Sn7hGHI2Qs2ayyDSBEOTHIzAtA-7jVE0VGuQI-hJbl9Qhs8lHluMr18cB7XvUmGuWCGPgSL_D8V6H7xiSzBITbHuayTS5RceB-cvyLrRay3UKxGGPgk1WRC7szKXomNDSr08u0lOCpuy0-KteUJCQIrsqg71eftOdkXUbKhAFY8oO-H4TEKXk4ByQUfcSY1v_Kc3hJw5LmcAgwZvjYPejCMlswP3m8wBM45_j8KqY" /> <div class="absolute inset-0 bg-gradient-to-t from-primary/90 via-transparent to-transparent opacity-80"> </div> <div class="absolute top-6 right-6 bg-white/20 backdrop-blur-xl border border-white/30 text-white px-5 py-2 rounded-full text-sm font-bold shadow-lg"> ★ Excelencia Académica </div> <div class="absolute bottom-6 left-6 right-6 bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl p-6 rounded-3xl border border-white/50 shadow-xl transform transition-transform duration-300 group-hover:translate-y-[-8px]"> <div class="flex items-center justify-between gap-4"> <div class="flex flex-col"> <span class="text-xs font-bold text-metallic uppercase tracking-wider mb-1">Próxima Cohorte</span> <span class="text-lg font-black text-slate-900 dark:text-white">Enero 2024</span> </div> <div class="h-10 w-px bg-slate-200 dark:bg-slate-700"></div> <div class="flex -space-x-4"> <img alt="Student profile" class="w-12 h-12 rounded-full border-[3px] border-white dark:border-slate-800 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3eiwhsR3ymLiENPVopk0yrigeGb2MB2XQHaHfM_tY3VKA4E299Zgx4afdHkEUzdJ7Jz6zsABVz4Xv-vJb6MW_ETHB3ZosocNpdYwmQTuRxpb8k5lZBgGAXmavaV7YCSG9jJ9l281o8YTbPNFdSp7VxZmnkAHqOFtCgbudvm1-oMXIqlsCer4aP1l7cbSKDmouwuoJ7JdZibPtuMBdD8UvIbLcy3oiDSKid2c1SfKNCE5RuAbxkd_KE5Z_2_kC1D0GHOD1Wt1bIsU" /> <img alt="Student profile" class="w-12 h-12 rounded-full border-[3px] border-white dark:border-slate-800 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGlRg95Bj98mU4RexjvA0jdF7b5PEl_ZKEJdOPV0_ld4WaBTuthCSL8VkX5EwByi1YmaZ2G_Jz8-ZxeO7BqqzcNFQrisTSOssIvLfXqNQMy-DtK9KpsRRfjHOCTvi5U3k-OAJd62Ara4ZOFa3YBpgISS2tal45SOyopB2tjv9Af3542u1huTCPb1IUiAf--zsL1SrqyZPFoIuvmivlE9xwy2wPMwVlARQmXnTP-HzQhFzCvvQV63ubSzJH_Jtu6AtRkmUvhlCPfBM" /> <div class="w-12 h-12 rounded-full border-[3px] border-white dark:border-slate-800 bg-secondary flex items-center justify-center text-xs text-white font-bold"> +150</div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="py-24 bg-white dark:bg-background-dark px-4 relative"> <div class="absolute top-1/2 left-0 w-full h-1/2 bg-slate-50 dark:bg-slate-800/50 -skew-y-3 z-0"></div> <div class="mx-auto max-w-7xl px-4 lg:px-8 relative z-10"> <div class="mb-16 text-center max-w-3xl mx-auto"> <span class="text-secondary font-bold tracking-widest text-sm uppercase mb-3 block">Impacto Social</span> <h2 class="text-primary dark:text-white text-4xl lg:text-5xl font-black mb-6"> Programas Sociales </h2> <p class="text-slate-600 dark:text-slate-300 text-xl font-medium"> Impactando vidas a través de iniciativas focalizadas en los grupos más vulnerables de la sociedad guatemalteca. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="group flex flex-col rounded-[2rem] bg-white dark:bg-slate-800 overflow-hidden shadow-soft hover:shadow-2xl transition-all duration-300 border border-slate-100 dark:border-slate-700 hover:border-turquoise/30 relative top-0 hover:-top-2"> <div class="h-2 w-full bg-gradient-to-r from-primary to-blue-400"></div> <div class="p-8 flex flex-col h-full"> <div class="mb-6 size-16 rounded-2xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-primary dark:text-blue-300 group-hover:scale-110 group-hover:bg-primary group-hover:text-white transition-all duration-300"> <span class="material-symbols-outlined text-4xl">elderly</span> </div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-3 group-hover:text-primary dark:group-hover:text-turquoise transition-colors"> Adulto Mayor</h3> <p class="text-slate-600 dark:text-slate-400 mb-8 flex-grow leading-relaxed"> Apoyo integral, acompañamiento y actividades recreativas para dignificar la vida de nuestros abuelitos. </p> <a class="inline-flex items-center text-slate-900 dark:text-white font-bold hover:gap-3 transition-all group-hover:text-primary dark:group-hover:text-turquoise mt-auto" href="programas.html"> Leer más <span class="material-symbols-outlined text-lg ml-2 bg-slate-100 dark:bg-slate-700 rounded-full p-1 group-hover:bg-primary group-hover:text-white dark:group-hover:bg-turquoise dark:group-hover:text-primary transition-colors">arrow_forward</span> </a> </div> </div> <div class="group flex flex-col rounded-[2rem] bg-white dark:bg-slate-800 overflow-hidden shadow-soft hover:shadow-2xl transition-all duration-300 border border-slate-100 dark:border-slate-700 hover:border-secondary/30 relative top-0 hover:-top-2"> <div class="h-2 w-full bg-gradient-to-r from-secondary to-green-400"></div> <div class="p-8 flex flex-col h-full"> <div class="mb-6 size-16 rounded-2xl bg-green-50 dark:bg-green-900/20 flex items-center justify-center text-secondary dark:text-green-300 group-hover:scale-110 group-hover:bg-secondary group-hover:text-white transition-all duration-300"> <span class="material-symbols-outlined text-4xl">school</span> </div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-3 group-hover:text-secondary dark:group-hover:text-green-400 transition-colors"> Formación Ciudadana</h3> <p class="text-slate-600 dark:text-slate-400 mb-8 flex-grow leading-relaxed"> Talleres y programas educativos para fomentar valores cívicos, democráticos y de participación social. </p> <a class="inline-flex items-center text-slate-900 dark:text-white font-bold hover:gap-3 transition-all group-hover:text-secondary dark:group-hover:text-green-400 mt-auto" href="programas.html"> Leer más <span class="material-symbols-outlined text-lg ml-2 bg-slate-100 dark:bg-slate-700 rounded-full p-1 group-hover:bg-secondary group-hover:text-white dark:group-hover:bg-secondary dark:group-hover:text-white transition-colors">arrow_forward</span> </a> </div> </div> <div class="group flex flex-col rounded-[2rem] bg-white dark:bg-slate-800 overflow-hidden shadow-soft hover:shadow-2xl transition-all duration-300 border border-slate-100 dark:border-slate-700 hover:border-metallic/30 relative top-0 hover:-top-2"> <div class="h-2 w-full bg-gradient-to-r from-slate-500 to-slate-400"></div> <div class="p-8 flex flex-col h-full"> <div class="mb-6 size-16 rounded-2xl bg-slate-100 dark:bg-slate-700/50 flex items-center justify-center text-slate-600 dark:text-slate-300 group-hover:scale-110 group-hover:bg-slate-600 group-hover:text-white transition-all duration-300"> <span class="material-symbols-outlined text-4xl">sentiment_satisfied</span> </div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-3 group-hover:text-slate-600 dark:group-hover:text-slate-300 transition-colors"> Niñez Vulnerable</h3> <p class="text-slate-600 dark:text-slate-400 mb-8 flex-grow leading-relaxed"> Atención especial a niños en contexto penitenciario y situaciones de riesgo, brindando educación y esperanza. </p> <a class="inline-flex items-center text-slate-900 dark:text-white font-bold hover:gap-3 transition-all group-hover:text-slate-600 dark:group-hover:text-slate-300 mt-auto" href="programas.html"> Leer más <span class="material-symbols-outlined text-lg ml-2 bg-slate-100 dark:bg-slate-700 rounded-full p-1 group-hover:bg-slate-600 group-hover:text-white transition-colors">arrow_forward</span> </a> </div> </div> </div> </div> </section> <section id="noticias" class="py-24 bg-slate-50 dark:bg-slate-900 px-4"> <div class="mx-auto max-w-7xl px-4 lg:px-8"> <div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6 border-b border-slate-200 dark:border-slate-800 pb-8"> <div> <h2 class="text-primary dark:text-white text-4xl font-black mb-3"> Noticias y Eventos </h2> <p class="text-slate-600 dark:text-slate-300 text-lg font-medium text-metallic">Mantente al día con nuestras actividades recientes.</p> </div> <a class="flex items-center gap-2 rounded-full px-6 py-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-primary dark:text-white font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors" href="actividades.html"> Ver todas las noticias <span class="material-symbols-outlined text-sm">arrow_forward</span> </a> </div> <div id="news-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 opacity-0 transition-opacity duration-500"> <!-- Dynamic News Cards will appear here --> <div class="col-span-full py-20 text-center" id="news-loading"> <div class="inline-block animate-spin size-8 border-4 border-turquoise border-t-transparent rounded-full mb-4"> </div> <p class="text-slate-500 font-medium">Cargando noticias...</p> </div> </div> </div> </section> <section id="donar" class="relative py-32 px-4 overflow-hidden"> <div class="absolute inset-0 z-0 bg-primary"> <img alt="Blurred background of children smiling showing hope" class="h-full w-full object-cover mix-blend-overlay opacity-20" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-P1Ohu3onxHKtb2bX80REickds3X4b8XsC6dYcL42Rzcb4HSgIkDnCy6E5sPJjyPjYckiiuk8sqvPOeD7jIPYdyBXgoJWXrvm9hDpoo0PhnP_9Ar-JOpL_IPYJO8vnk3BzKG9HO68uB6klvVoiKz9oaxnNQWTqp9o40C3V1S5VaGK7tFGu4UvSdy8HyOJl5jSrniMgxhPr2O5rPKxLBLOgq3Bj51Y3v_f6lynxU2YDojn13v6x1lceeEPFFn335MeVDQTvhP_GF4" /> <div class="absolute inset-0 bg-gradient-to-tr from-primary via-primary/90 to-blue-900/80"></div> <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#00CED1 1px, transparent 1px); background-size: 30px 30px;"> </div> </div> <div class="relative z-10 mx-auto max-w-4xl text-center"> <div class="mb-6 inline-flex items-center justify-center p-3 bg-white/10 rounded-full backdrop-blur-sm border border-white/20"> <span class="material-symbols-outlined text-turquoise text-3xl">volunteer_activism</span> </div> <h2 class="text-white text-5xl lg:text-6xl font-black mb-8 tracking-tight drop-shadow-lg"> Tu Ayuda <span class="text-turquoise">Transforma</span> Vidas </h2> <p class="text-blue-100 text-xl lg:text-2xl mb-12 leading-relaxed font-medium max-w-2xl mx-auto"> Cada aporte nos permite seguir educando a jóvenes talentosos y brindando apoyo a quienes más lo necesitan. Sé parte del cambio hoy. </p> <div class="flex flex-col sm:flex-row items-center justify-center gap-6"> <a href="donaciones.html" class="w-full sm:w-auto rounded-full flex items-center justify-center h-16 px-10 bg-turquoise hover:bg-cyan-300 text-primary text-xl font-bold shadow-xl shadow-cyan-900/20 hover:shadow-cyan-400/30 transition-all transform hover:-translate-y-1 hover:scale-105"> Donar Ahora </a> <a href="somos.html" class="w-full sm:w-auto rounded-full flex items-center justify-center h-16 px-10 bg-transparent border-2 border-white/30 text-white text-xl font-bold hover:bg-white/10 hover:border-white transition-all backdrop-blur-sm"> Conviértete en Voluntario </a> </div> <div class="mt-12 flex justify-center gap-8 text-blue-200 text-sm font-medium"> <span class="flex items-center gap-2 bg-primary/40 px-4 py-2 rounded-full border border-white/10"><span class="material-symbols-outlined text-lg text-secondary">lock</span> Donación 100% Segura</span> <span class="flex items-center gap-2 bg-primary/40 px-4 py-2 rounded-full border border-white/10"><span class="material-symbols-outlined text-lg text-secondary">verified</span> Deduce Impuestos</span> </div> </div> </section> </main> <footer id="footer" class="bg-slate-900 text-slate-300 py-20 px-4 border-t border-slate-800 relative overflow-hidden"> <div class="absolute top-0 right-0 w-96 h-96 bg-primary/20 rounded-full blur-[100px] pointer-events-none -translate-y-1/2 translate-x-1/2"> </div> <div class="mx-auto max-w-7xl px-4 lg:px-8 relative z-10"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-16 mb-16"> <div class="flex flex-col gap-6"> <div class="flex items-center mb-6"> <img src="logo_adig_blanco.png" alt="ADIG-SN Logo" class="h-16 w-auto object-contain" /> </div> <p class="text-sm leading-relaxed text-slate-400 font-medium"> Asociación para el Desarrollo Integral de Guatemala. Formando profesionales, transformando comunidades con innovación y compromiso. </p> <div class="flex gap-4 mt-2"> <a class="size-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-primary hover:text-white transition-all transform hover:-translate-y-1" href="#"><span class="sr-only">Facebook</span> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"> </path> </svg> </a> <a class="size-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-secondary hover:text-white transition-all transform hover:-translate-y-1" href="#"><span class="sr-only">Instagram</span> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <path clip-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772 4.902 4.902 0 011.772-1.153c.636-.247 1.363-.416 2.427-.465C9.673 2.013 10.03 2 12.48 2h-.165zm0 1.962h.03c2.551 0 2.862.009 3.882.056.904.041 1.399.191 1.728.32.435.168.749.37 1.08.702.333.33.535.644.703 1.08.128.33.279.824.32 1.728.047 1.02.056 1.33.056 3.992v.043c0 2.662-.009 2.972-.056 3.992-.041.904-.191 1.399-.32 1.728a3.037 3.037 0 01-.703 1.08 3.037 3.037 0 01-1.08.703c-.33.128-.824.279-1.728.32-1.02.047-1.33.056-3.992.056h-.043c-2.662 0-2.972-.009-3.992-.056-.904-.041-1.399-.191-1.728-.32a3.037 3.037 0 01-1.08-.703 3.037 3.037 0 01-.703-1.08c-.128-.33-.279-.824-.32-1.728-.047-1.02-.056-1.33-.056-3.992v-.043c0-2.662.009-2.972.056-3.992.041-.904.191-1.399.32-1.728.168-.435.37-.749.702-1.08.33-.333.644-.535 1.08-.703.33-.128.824-.279 1.728-.32 1.02-.047 1.33-.056 3.992-.056zM12.46 7.087a4.912 4.912 0 100 9.825 4.912 4.912 0 000-9.825zm0 1.962a2.95 2.95 0 110 5.9 2.95 2.95 0 010-5.9zM18.667 4.991a1.306 1.306 0 10.001 2.612 1.306 1.306 0 00-.001-2.612z" fill-rule="evenodd"></path> </svg> </a> </div> </div> <div> <h3 class="text-white font-bold text-lg mb-6">Navegación</h3> <ul class="flex flex-col gap-3 text-sm font-medium"> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="index.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Inicio</a> </li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="somos.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Sobre Nosotros</a></li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="esccuelas.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Escuela de Enfermería</a></li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="programas.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Programas Sociales</a></li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="actividades.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Noticias</a> </li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="donaciones.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Donaciones</a> </li> </ul> </div> <div> <h3 class="text-white font-bold text-lg mb-6">Contacto</h3> <ul class="flex flex-col gap-4 text-sm"> <li class="flex items-start gap-4"> <span class="material-symbols-outlined text-turquoise text-xl mt-0.5">location_on</span> <span class="text-slate-400">6ta Avenida 12-34, Zona 1<br />Guatemala</span> </li> <li class="flex items-center gap-4"> <span class="material-symbols-outlined text-turquoise text-xl">call</span> <span class="text-slate-400 hover:text-white transition-colors cursor-pointer">+502 2222-3333</span> </li> <li class="flex items-center gap-4"> <span class="material-symbols-outlined text-turquoise text-xl">mail</span> <span class="text-slate-400 hover:text-white transition-colors cursor-pointer">info@adig-sn.org</span> </li> </ul> </div> <div> <h3 class="text-white font-bold text-lg mb-6">Boletín Informativo</h3> <p class="text-sm text-slate-400 mb-4">Suscríbete para recibir noticias sobre nuestros programas y cursos.</p> <form class="flex flex-col gap-3" id="newsletter-form"> <div class="relative"> <input class="rounded-lg h-12 px-4 bg-slate-800 border-none text-white text-sm placeholder:text-slate-500 focus:ring-2 focus:ring-turquoise w-full" placeholder="Tu correo electrónico" type="email" name="email" required /> </div> <button class="rounded-lg h-12 px-4 bg-primary hover:bg-blue-700 text-white font-bold text-sm transition-colors border border-slate-700 shadow-lg shadow-black/20" type="submit">Suscribirse</button> </form> </div> </div> <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500"> <p>© 2024 ADIG-SN. Todos los derechos reservados.</p> <div class="flex gap-8"> <a class="hover:text-turquoise transition-colors" href="#">Política de Privacidad</a> <a class="hover:text-turquoise transition-colors" href="#">Términos de Uso</a> </div> </div> </div> </footer> </div> <script src="files/form-handler.js"></script> <!-- News Fetching Logic --> <script> const SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbxDevnrIkNfgRvP77u484EfbfDWmuae2UP6891dipZi3vO7I-35dXy5n5Z9LemhGdgh/exec'; function formatImageUrl(url) { if (!url) return ''; if (url.includes('drive.google.com')) { const idMatch = url.match(/\/d\/([^\/]+)/) || url.match(/id=([^\&]+)/); if (idMatch && idMatch[1]) { return `https://lh3.googleusercontent.com/u/0/d/${idMatch[1]}`; } } return url; } async function fetchLatestNews() { const grid = document.getElementById('news-grid'); const loading = document.getElementById('news-loading'); try { const response = await fetch(SCRIPT_URL); if (!response.ok) throw new Error('Network error'); const data = await response.json(); if (data.error) throw new Error(data.error); // Sort by date descending and take top 3 const latest = data .sort((a, b) => new Date(b.fecha) - new Date(a.fecha)) .slice(0, 3); loading.classList.add('hidden'); if (latest.length === 0) { grid.innerHTML = '<p class="col-span-full text-center text-slate-500 py-10">No hay noticias recientes que mostrar.</p>'; } else { grid.innerHTML = latest.map(news => { const img = formatImageUrl(news.fotografía); const date = new Date(news.fecha).toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' }).toUpperCase(); return ` <article class="flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 group"> <div class="relative h-60 overflow-hidden"> <img alt="${news.título}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="${img || 'https://via.placeholder.com/800x450?text=ADIG-SN'}" /> <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors"></div> <div class="absolute bottom-4 left-4 flex gap-2"> <span class="bg-primary/90 backdrop-blur-sm text-white px-3 py-1 rounded-lg text-xs font-bold uppercase tracking-wider">Actividad</span> </div> </div> <div class="p-8 flex flex-col flex-grow"> <div class="text-metallic text-xs font-bold mb-3 flex items-center gap-1"> <span class="material-symbols-outlined text-sm">calendar_today</span> ${date} </div> <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-4 line-clamp-2 leading-tight group-hover:text-primary transition-colors"> ${news.título} </h3> <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-3 mb-6 flex-grow"> ${news.descripción} </p> <a class="text-slate-900 dark:text-white text-sm font-bold flex items-center gap-2 group-hover:gap-3 transition-all" href="actividades.html"> Leer más <span class="material-symbols-outlined text-sm text-turquoise">arrow_forward</span> </a> </div> </article> `; }).join(''); } grid.classList.remove('opacity-0'); } catch (err) { console.error('Fetch latest news error:', err); loading.innerHTML = '<p class="text-red-500 font-medium whitespace-normal px-4">Error al cargar noticias. Por favor, intenta más tarde.</p>'; } } fetchLatestNews(); </script> </body> </html>
| ver. 1.1 | |
.
| PHP 8.4.20 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ Ñтраницы: 0.2 |
proxy
|
phpinfo
|
ÐаÑтройка