fundacion-atoma.github.io/impact.html at main · fundacion-atoma/fundacion-atoma.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
---
layout: default
title: Impacto - Fundación Átoma
---

<section class="bg-white py-20 px-6">
  <div class="container mx-auto max-w-5xl text-center">
    <h1 class="text-4xl md:text-5xl font-bold text-brand-primary font-sora mb-6">Creamos oportunidades para
      todas</h1>
    <p class="text-lg text-black max-w-3xl mx-auto mb-12">
      Trabajamos con personas y comunidades que buscan transformar su realidad:
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 text-left">
      <div class="bg-brand-light-gray p-6 rounded-lg">
        <h3 class="text-xl font-sora font-semibold text-brand-secondary mb-2"></h3>
        <p class="text-black">Jóvenes que buscan alternativas de formación fuera del sistema tradicional</p>
      </div>
      <div class="bg-brand-light-gray p-6 rounded-lg">
        <h3 class="text-xl font-sora font-semibold text-brand-secondary mb-2"></h3>
        <p class="text-black">Mujeres cabeza de familia que necesitan desarrollar nuevas habilidades</p>
      </div>
      <div class="bg-brand-light-gray p-6 rounded-lg">
        <h3 class="text-xl font-sora font-semibold text-brand-secondary mb-2"></h3>
        <p class="text-black">Comunidades rurales con limitado acceso a tecnología</p>
      </div>
      <div class="bg-brand-light-gray p-6 rounded-lg">
        <h3 class="text-xl font-sora font-semibold text-brand-secondary mb-2"></h3>
        <p class="text-black">Organizaciones sociales que quieren fortalecer sus capacidades</p>
      </div>
      <div class="bg-brand-light-gray p-6 rounded-lg">
        <h3 class="text-xl font-sora font-semibold text-brand-secondary mb-2"></h3>
        <p class="text-black">Personas en situación de vulnerabilidad que merecen oportunidades</p>
      </div>
      <div class="bg-brand-light-gray p-6 rounded-lg">
        <h3 class="text-xl font-sora font-semibold text-brand-secondary mb-2"></h3>
        <p class="text-black">Emprendedoras de sectores populares que necesitan acompañamiento</p>
      </div>
    </div>
  </div>
</section>
<!-- <section class="bg-brand-light-gray py-20 px-6">
  <div class="container mx-auto max-w-5xl">
    <div class="relative shadow-lg rounded-lg overflow-hidden" id="carousel">
      <div class="relative w-full h-96">
        <div class="carousel-item active">
          <img alt="Personas colaborando en un proyecto" class="w-full h-full object-cover"
            src="https://lh3.googleusercontent.com/aida-public/AB6AXuA3N3exbmzNivIuYdd5fkAUq75BCG1tnoosouaw61S0OBHu5QNr_VIOmdNcN__-dGTtuGUddlddQkZAWLT32L5XnPVsLTCB11py5cWN9lSfSp7g1VbHKJE4Zjh0_zHSwa9atW2Kpf1Q77AY18JXP0VpCEaPoCYHd8HeoYa_rQ__P8uSQkDaAamhDY04hYHqtdbPeDXKMawWtup0ymthbC5GofYzgp5UKZslM_CikGqvQ-JmgNEDdzBj9VXenIZrDsnz6HdCARa5cMI" />
        </div>
        <div class="carousel-item">
          <img alt="Jóvenes aprendiendo a programar" class="w-full h-full object-cover"
            src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4ih3Bo_k30M8Yb-gMVrlE2x_rYVBAqgsHjhpwzyIfl2kclt925KUbxhKHM-E1xAEldLpPdYsvt5doABRmy7GS2eNgCFoZBg9Xu7vOtbErU5rtVqoaOGet0LrIxoTS8YuO_wUJOR7tN9nTxEjaFdFOLYaQ4aBAFeV3ftxatJcUiEYJUzH88ErfkRVKb-uLa4acS0zat1Z1yEzFQpgomJ7PJtKrwGg3n6daXRORcV4Hh_0fgx52cQW8CgBGi2xwEtBQ1Kzz4eQ9KUE" />
        </div>
        <div class="carousel-item">
          <img alt="Comunidad rural participando en un taller" class="w-full h-full object-cover"
            src="https://lh3.googleusercontent.com/aida-public/AB6AXuADiEab-V_AH2R1gzuL33t1DSXTOSm-iSTGFeh58cSVFj1AD6NNtX3kEEfYf9N4XVvXsb2qJJ46jNtYXkPwUsAbjzKQx4hyfep5arbCkm6Bs_At-_3XhL9ukgnPcmhcR8dfHIVNyZ5jB_axay9z4IKi6GPdx8BZs7v4H63teLJaym56iOwIldi4orMdvDpC1C205SSSX7oX4ntS4l4l6n_ZRJUPXF0VTV7Nd4voJ0y6qm8lr3-4aKtd_L7Qt583YXtKzpK0hQ2ST4k" />
        </div>
      </div>
      <button
        class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-black bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-75 transition-opacity"
        id="prevBtn">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
        </svg>
      </button>
      <button
        class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-black bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-75 transition-opacity"
        id="nextBtn">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
        </svg>
      </button>
    </div>
  </div>
</section> -->

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const carouselItems = document.querySelectorAll('.carousel-item');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentIndex = 0;
    function showItem(index) {
      carouselItems.forEach((item, i) => {
        item.classList.remove('active');
        if (i === index) {
          item.classList.add('active');
        }
      });
    }
    prevBtn.addEventListener('click', () => {
      currentIndex = (currentIndex > 0) ? currentIndex - 1 : carouselItems.length - 1;
      showItem(currentIndex);
    });
    nextBtn.addEventListener('click', () => {
      currentIndex = (currentIndex < carouselItems.length - 1) ? currentIndex + 1 : 0;
      showItem(currentIndex);
    });
    // Auto-play
    setInterval(() => {
      nextBtn.click();
    }, 5000);
  });
</script>