website/themes/le-2025/layouts/partials/sections/support.html at 9d89b4f0b4aa223e8299704b41eac8ed69c39647 · letsencrypt/website · 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
<section class="support-section pt-16 section-padding relative">
  <div class="relative z-10">
    <div class="container mx-auto">
      <h2 class="text-left text-3xl md:text-4xl font-bold mb-8">
        {{ if and (i18n "support_heading_base") (i18n "support_heading_word1") (i18n "support_heading_word2") (i18n "support_heading_word3") (i18n "support_heading_word4") }}
          {{ i18n "support_heading_base" }}
          <span class="text-le-blue rotate-words"
            data-word1="{{ i18n "support_heading_word1" }}"
            data-word2="{{ i18n "support_heading_word2" }}"
            data-word3="{{ i18n "support_heading_word3" }}"
            data-word4="{{ i18n "support_heading_word4" }}">{{ i18n "support_heading_word1" }}</span>
        {{ else if i18n "support_heading_entire_sentence" }}
          {{ i18n "support_heading_entire_sentence" }}
        {{ end }}
      </h2>

      <script>
        document.addEventListener('DOMContentLoaded', function() {
          const rotator = document.querySelector('.rotate-words');
          const words = [
            rotator.dataset.word1,
            rotator.dataset.word2,
            rotator.dataset.word3,
            rotator.dataset.word4
          ];
          let currentIndex = 0;

          setInterval(() => {
            currentIndex = (currentIndex + 1) % words.length;
            rotator.style.opacity = 0;
            setTimeout(() => {
              rotator.textContent = words[currentIndex];
              rotator.style.opacity = 1;
            }, 200);
          }, 3000);
        });
      </script>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="donate-column -ml-4">
          {{ partial "components/basic-hero" (dict
            "title" (T "support_donate_section_title")
            "description" (T "support_donate_section_description")
            "buttonText" (T "support_donate_section_button")
            "buttonUrl" "/donate"
            "class" "h-full bg-transparent"
            "headingLevel" "h3"
            "fullWidth" true
          ) }}
        </div>
        <div class="sponsorship-column -ml-4 md:ml-0 -mr-4">
          {{ partial "components/basic-hero" (dict
            "title" (T "support_sponsor_section_title")
            "description" (T "support_sponsor_section_description")
            "buttonText" (T "support_sponsor_section_button")
            "buttonUrl" "/sponsor"
            "class" "h-full"
            "headingLevel" "h3"
            "fullWidth" true
          ) }}
        </div>
      </div>
    </div>
  </div>
</section>