-
-
Notifications
You must be signed in to change notification settings - Fork 57
/
donate.html
231 lines (221 loc) · 13.3 KB
/
donate.html
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
---
layout: main.html
permalink: /donate/
multilingual: true
hook: "donate_page"
---
<svg style="display: none;" aria-hidden="true">
<symbol viewBox="0 0 24 24" id="feature-check">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect width="24" height="24" rx="12" fill="var(--lightest-background-color)" />
<path d="M17.3337 8L10.0003 15.3333L6.66699 12" stroke="var(--link-color)" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</symbol>
<symbol viewBox="0 0 21 20" id="oc">
<svg width="21" height="20" viewBox="0 0 21 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8759 9.97371C16.8759 11.2331 16.5103 12.4409 15.8828 13.4384L18.4441 16.0103C19.6984 14.3306 20.4825 12.2309 20.4825 9.9734C20.4825 7.7159 19.6981 5.61652 18.4441 3.93652L15.8828 6.5084C16.51 7.5059 16.8759 8.66059 16.8759 9.97309V9.97371Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.501 16.3781C6.99883 16.3781 4.12414 13.4906 4.12414 9.97406C4.12414 6.4575 6.99914 3.57 10.501 3.57C11.8079 3.57 12.9573 3.9375 13.951 4.62L16.5123 2.04813C14.8395 0.7875 12.7488 0 10.501 0C5.01227 0 0.517578 4.46187 0.517578 10.0262C0.517578 15.5906 5.01227 20 10.501 20C12.801 20 14.8916 19.2125 16.5645 17.9531L14.0032 15.3813C13.0101 16.0112 11.8079 16.3787 10.501 16.3787V16.3781Z" fill="currentColor" />
</svg>
</symbol>
<symbol viewBox="0 0 21 20" id="gh">
<svg width="21" height="20" viewBox="0 0 21 20" aria-label="GitHub">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2495 0C4.6123 0 0 4.6123 0 10.2495C0 14.7764 2.90404 18.62 7.00386 19.9866C7.51634 20.072 7.68716 19.7304 7.68716 19.4741C7.68716 19.2179 7.68716 18.62 7.68716 17.7659C4.86854 18.3638 4.27065 16.3993 4.27065 16.3993C3.84358 15.2035 3.16028 14.8618 3.16028 14.8618C2.13532 14.264 3.16028 14.264 3.16028 14.264C4.18523 14.3494 4.69771 15.2889 4.69771 15.2889C5.63725 16.8263 7.08927 16.3993 7.68716 16.143C7.77257 15.4597 8.02881 15.0327 8.37047 14.7764C6.06432 14.5202 3.67276 13.6661 3.67276 9.73707C3.67276 8.6267 4.09982 7.68716 4.69771 7.00386C4.69771 6.66221 4.27065 5.63725 4.86854 4.27065C4.86854 4.27065 5.72267 4.01441 7.68716 5.2956C8.54129 5.03936 9.39542 4.95395 10.2495 4.95395C11.1037 4.95395 11.9578 5.03936 12.8119 5.2956C14.7764 3.92899 15.6306 4.27065 15.6306 4.27065C16.2285 5.72267 15.8014 6.74762 15.716 7.00386C16.3993 7.68716 16.7409 8.6267 16.7409 9.73707C16.7409 13.6661 14.3494 14.5202 12.0432 14.7764C12.3849 15.1181 12.7265 15.716 12.7265 16.6555C12.7265 18.0221 12.7265 19.1325 12.7265 19.4741C12.7265 19.7304 12.8973 20.072 13.4098 19.9866C17.5096 18.62 20.4137 14.7764 20.4137 10.2495C20.4991 4.6123 15.8868 0 10.2495 0Z" fill="currentColor" />
</svg>
</symbol>
</svg>
{%- from 'components/hero.macro.html' import hero %}
{% set supporting_text = site.donate_page.description %}
{% set monthly_donations = sponsors.totals.monthlyDonations | dollars %}
{% set supporting_text = supporting_text | replace("BACKER_COUNT", sponsors.totals.sponsorCount) | replace("MONTHLY_DONATIONS", monthly_donations) %}
{{ hero({
title: site.donate_page.title,
supporting_text: supporting_text,
buttons: {
primary: {
primaryText: site.donate_page.hero.cta.text,
primaryURL: site.donate_page.hero.cta.url
}
}
}) }}
<section>
<div class="content-container divider">
<div class="section-head center-text">
<h2 class="section-title h3">{{ site.donate_page.donation_options.title }}</h2>
<p class="section-supporting-text fs-step-0">
{{ site.donate_page.donation_options.subtitle }}
</p>
</div>
<div class="donation-plans grid">
<article class="donation-plan span-1-6">
<header class="donation-plan__header divider">
<img src="/assets/images/icons/opencollective-img.svg" width="64" height="64" alt="Open Collective" loading="lazy"/>
<div class="donation-plan__platform">
<h3 class="donation-plan__platform-name">
{{ site.donate_page.donation_options.open_collective.title }}
</h3>
<p class="donation-plan__description">
{{ site.donate_page.donation_options.open_collective.subtitle }}
</p>
</div>
</header>
<ul role="list" class="donation-plan__features divider">
{%- for item in site.donate_page.donation_options.open_collective.items -%}
<li>
<svg width="24" height="24" aria-hidden="true" focusable="false" viewBox="0 0 24 24"
class="c-icon donation-plan__features__icon">
<use xlink:href="#feature-check"></use>
</svg>
{{ item.text }}
</li>
{%- endfor -%}
</ul>
<footer class="donation-plan__footer">
<a href="{{ links.openCollective }}" target="_blank" class="c-btn c-btn--primary c-btn--block">
<svg width="21" height="20" viewBox="0 0 21 20" aria-label="Open Collective">
<use xlink:href="#oc"></use>
</svg>
{{ site.donate_page.donation_options.open_collective.cta.text }}
</a>
</footer>
</article>
<article class="donation-plan span-7-12">
<header class="donation-plan__header divider">
<img src="/assets/images/icons/github-img.svg" width="64" height="64" alt="GitHub Sponsors" class="donation-plan__github-logo" loading="lazy"/>
<div class="donation-plan__platform">
<h3 class="donation-plan__platform-name">
{{ site.donate_page.donation_options.github_sponsors.title }}
</h3>
<p class="donation-plan__description">
{{ site.donate_page.donation_options.github_sponsors.subtitle }}
</p>
</div>
</header>
<ul role="list" class="donation-plan__features divider">
{%- for item in site.donate_page.donation_options.github_sponsors.items -%}
<li>
<svg width="24" height="24" aria-hidden="true" focusable="false" viewBox="0 0 24 24"
class="c-icon donation-plan__features__icon">
<use xlink:href="#feature-check"></use>
</svg>
{{ item.text }}
</li>
{%- endfor -%}
</ul>
<footer class="donation-plan__footer">
<a href="{{ links.githubSponsors }}" target="_blank" class="c-btn c-btn--primary c-btn--block">
<svg width="21" height="20" viewBox="0 0 21 20" aria-label="GitHub">
<use xlink:href="#gh"></use>
</svg>
{{ site.donate_page.donation_options.github_sponsors.cta.text }}
</a>
</footer>
</article>
</div>
</div>
</section>
<section>
<div class="content-container divider">
<div class="section-head center-text">
<h2 class="section-title h3">{{ site.donate_page.budget.title }}</h2>
<p class="section-supporting-text fs-step-0">
{{ site.donate_page.budget.subtitle }}
</p>
</div>
<div class="section-body features-wrapper grid">
<div class="features span-1-5">
{%- for item in site.donate_page.budget.items -%}
{% set tsc_hourly_rate = budget.hourlyRateTSC | dollars %}
{% set commiters_hourly_rate = budget.hourlyRate |dollars %}
{% set contributor_pool_budget = budget.contributorPool | dollars %}
{% set dependencies_budget = budget.dependencies | dollars %}
{% set community_budget = budget.community | dollars %}
{% set feature_desc = item.text | replace("HOURLY_RATE_TSC", tsc_hourly_rate) | replace("HOURLY_RATE_COMMITERS", commiters_hourly_rate) | replace("CONTRIBUTOR_POOL_BUDGET", contributor_pool_budget) | replace("DEPENDENCIES_BUDGET", dependencies_budget) | replace("COMMUNITY_BUDGET", community_budget) %}
<article class="feature">
<h3 class="feature__title"> {{item.name}} </h3>
<p class="feature__description"> {{feature_desc}} </p>
</article>
{%- endfor -%}
</div>
<div class="features-image span-7-12">
<img src="/assets/images/chart.svg" alt="Graph visually representing approximate percentages of how the money is used and distributed between Team Development, Contributor Pool, Dependencies, Community Projects, and support systems." loading="lazy">
</div>
</div>
<footer class="section-foot center-text">
<p class="section-supporting-text">
{{ site.donate_page.budget.footer.text }}
</p>
</footer>
</div>
</section>
<section>
<div class="content-container divider">
<div class="section-head center-text">
<h2 class="section-title h3" id="donation-tiers-label">{{ site.donate_page.donation_tiers.title }}</h2>
<p class="section-supporting-text fs-step-0">
{{ site.donate_page.donation_tiers.subtitle }}
</p>
</div>
<ol class="donation-tiers" aria-labelledby="donation-tiers-label" role="list">
{%- for item in site.donate_page.donation_tiers.items -%}
<li class="donation-tiers__item">
<h3 class="donation-tiers__title">
<span> {{item.name}} </span>
<span class="donation-tiers__title__value">{{item.amount}}</span>
<span class="donation-tiers__title__freq">{{item.frequency}}</span>
</h3>
<div class="donation-tiers__item__description">
{{item.text}}
</div>
<div>
<a href="{{ links.openCollective }}" target="_blank" class="c-btn c-btn--primary c-btn--block">
<svg role="img" aria-label="Open Collective" width="21" height="20" viewBox="0 0 21 20">
<use xlink:href="#oc"></use>
</svg>
{{ site.donate_page.donation_tiers.cta.open_collective_text | safe }}
</a>
<a href="{{ links.githubSponsors }}" target="_blank" class="c-btn c-btn--primary c-btn--block">
<svg role="img" aria-label="GitHub" width="21" height="20" viewBox="0 0 21 20" aria-label="GitHub">
<use xlink:href="#gh"></use>
</svg>
{{ site.donate_page.donation_tiers.cta.github_sponsors_text | safe }}
</a>
</div>
</li>
{%- endfor -%}
</ol>
</div>
</section>
<section>
<div class="content-container divider">
<div class="section-head center-text">
<h2 class="section-title h3" hidden>{{ site.donate_page.testimonials.title }}</h2>
</div>
<div class="c-slider c-slider--testimonials">
<div class="c-slider__slides-container">
<div class="c-slider__slides-wrapper">
{%- for item in site.donate_page.testimonials.items -%}
<div class="c-slider__slide">
<blockquote class="c-slider__testimonial span-1-6">
<div class="c-slider__testimonial__content">
<p>
{{ item.text }}
</p>
</div>
<footer class="c-slider__testimonial__footer">
<cite class="profile contributor">
<img class="profile__photo profile__photo--small" src="/assets/images/people/testimonials/small/{{ item.image }}" width="48" height="48" alt="{{ item.name }}" loading="lazy">
<div class="profile__details">
<span class="c-slider__testimonial__author profile__name">{{ item.name }}</span>
<span class="c-slider__testimonial__author-role profile__title">{{ item.title }}</span>
</div>
</cite>
</footer>
</blockquote>
</div>
{%- endfor -%}
</div>
</div>
</div>
</div>
</section>
{% include "partials/faqs.html" %}