2812ad69adbe18bdb291652b910df3b6a9f9ee51
[blender-dev-fund.git] / websrc / templates / blender_fund / landing.pug
1 | {% extends "blender_fund/layout.html" %}
2 | {% load membership_tags %}
3 | {% load looper %}
4 | {% load wagtailcore_tags %}
5 | {% load wagtailimages_tags %}
6 | {% load wagtailuserbar %}
7 | {% block page_header %}
8 | {% image page.header_image max-1920x1080 as header_image %}
9
10 .featured.large.nav-hidden(style='background-image: url({{ header_image.url }})')
11         .container
12                 .featured-content
13                         h1 {{ page.title }}
14                         .featured-subtitle
15                                 p {{ page.tagline }}
16
17         .featured-overlay(style='background-color: rgba(10, 10, 10, .1)')
18
19         | {% block nav_secondary %}
20         | {% include "blender_fund/_navbar_secondary.html" %}
21         | {% endblock nav_secondary %}
22
23         | {% block navbar_tertiary %}{% endblock navbar_tertiary %}
24 | {% endblock page_header %}
25
26 | {% block content %}
27 .container.py-4
28         | {% if settings.SHOW_THERMOMETER %}
29         | {% with progress_corporate=thermo_percentages.CORP progress_individual=thermo_percentages.INDIV %}
30         .position-relative
31                 .progress-container
32                         .progress-label.current.transform-flip-h(
33                                 style="left: {{ thermo_total_percentage }}%",
34                                 title="Current Income")
35                                 .transform-flip-h.d-flex
36                                         span.d-block.d-md-none
37                                                 strong Current Income
38                                         | {{ summed_income.with_currency_symbol_nonocents }} / month
39
40                         .progress-label.target(title="Next Milestone")
41                                 | #[strong 5 Developers] #[span {{currency_symbol}} {{thermo_mid}}k / month]
42
43                         .progress-label.final.ml-auto(title="Final Milestone")
44                                 | #[strong 10 Developers] #[span {{currency_symbol}} {{thermo_high}}k / month]
45
46                 .progress.bg-white
47                         //- Progress values in percentage.
48                         .progress-bar.bg-corporate(
49                                 title="{{ memberships_per_category.CORP }} corporate members account for {{ progress_corporate }}% progress toward our Final Milestone",
50                                 role="progressbar", style="width: {{ progress_corporate }}%", aria-valuenow="{{ progress_corporate }}", aria-valuemin="0", aria-valuemax="100")
51                         .progress-bar.bg-individual(
52                                 title="{{ memberships_per_category.INDIV }} individual members account for {{ progress_individual }}% progress toward our Final Milestone",
53                                 role="progressbar" style="width: {{ progress_individual }}%" aria-valuenow="{{ progress_individual }}" aria-valuemin="0" aria-valuemax="100")
54
55                 .d-flex.align-items-center.justify-content-between.mb-5
56                         .d-flex.justify-items-start
57                                 small.d-flex.align-items-center
58                                         .rounded-circle.mr-2.bg-corporate.progress-legend
59                                         span Corporate
60
61                                 small.d-flex.align-items-center.px-4
62                                         .rounded-circle.mr-2.bg-individual.progress-legend
63                                         span Individual
64
65                         small.d-none.d-sm-block
66                                 span Read more about the #[a(href="{% slugurl 'about' %}") campaign and our goals].
67
68                 .container.text-center.campaign-message
69                         .row
70                                 .col-md-offset-2.col-md-8
71                                         p.
72                                                 Join {{ memberships_total_count }} people & companies
73                                                 in the Development Fund and support #[br]
74                                                 Blender Foundation to work on #[a(href="{% slugurl 'about' %}") core Blender development].
75         | {% endwith %}
76         | {% endif %}
77
78 #join.levels.js-fade
79         .container
80                 h2 Individual Memberships
81
82                 section.levels-compare
83                         | {% for m, plan_variation in membership_levels %}
84                         a.level-col.js-fades(
85                                 href="{% url 'looper:checkout_new' m.plan.id %}",
86                                 title="Choose {{ m.name }} membership",
87                                 class="id-{{ m.plan.id }}{% if m.is_popular %} is-selected is-popular{% endif %}\
88                                         {% if m.name in user_membership_levels %} is-own{% endif %}")
89
90                                 | {% if m.image %}
91                                 .level-badge
92                                         img.bf-badge.mx-auto.my-3(src='{{m.image.url}}')
93                                 | {% endif %}
94
95                                 span.level-name {{ plan_variation|pricing }}
96
97                                 .level-details
98                                         span.detail-perks YOU GET
99
100                                         .detail-badge
101                                                 span
102                                                         | #[strong {{ m.name }}] Badge
103
104                                                 small.
105                                                         Show your badge in any #[abbr(title="Such as Blender Cloud, Blender Network, Blender Community, BlenderArtists, etc.") Blender ID website]
106
107                                         | {% with perks=m.visible_attributes_set %}
108                                         | {% if perks %}
109                                         span.detail-perks WE WILL SHOW
110                                         | {% endif %}
111
112                                         | {% if 'display_name' in perks %}
113                                         .detail-perk-name.p-2
114                                                 span Your Name/Company
115                                         | {% endif %}
116
117                                         | {% if 'description' in perks %}
118                                         .detail-perk-description.p-2
119                                                 span A short description
120                                         | {% endif %}
121
122                                         | {% if 'url' in perks %}
123                                         .detail-perk-url.p-2
124                                                 i.fa.fa-link.pr-2.text-info
125                                                 span Your website URL
126                                         | {% endif %}
127
128                                         | {% if 'logo' in perks %}
129                                         .detail-perk-log.p-2
130                                                 i.fa.fa-star.pr-2.text-warning
131                                                 span Your logo
132                                         | {% endif %}
133                                         | {% endwith %}
134
135                                         | {% if m.details_html %}
136                                         .detail-plus
137                                                 span +
138                                         | {{ m.details_html | safe }}
139                                         | {% endif %}
140                         | {% endfor %}
141
142                 small.levels-notes.
143                         * Other pricing options available.
144                         Displaying your badge, name or company is opt-in.
145                         You control it being public or private.
146
147         .container
148                 h2 Corporate Memberships
149
150                 .row.mt-5.mx-auto
151                         .col-md-6.col-md-offset-3
152                                 .box.text-secondary.px-3.py-3
153                                         section.story.text-left
154                                                 | {{ page.body|richtext }}
155
156
157 #credits.container.js-fade
158         section.memberships
159                 a(href="#credits")
160                         h1.text-center Credits
161
162                 | {% if memberships.Patron %}
163                 #credits-patron.membership-level
164                         a.section-title(href="#credits-patron")
165                                 h2.text-gradient Patron
166                         | {% for m in memberships.Patron %}
167                         .membership-member.mb-4
168                                 a(href="{{ m.url }}", target="_blank")
169                                         | {% if m.logo %}
170                                         img(src="{{ m.logo.url }}" alt="{{ m.display_name }}")
171                                         | {% else %}
172                                         span.name {{ m.display_name }}
173                                         | {% endif %}
174                         | {% endfor %}
175                 | {% endif %}
176
177
178                 | {% if memberships.Corporate_Gold %}
179                 #credits-corporate-gold.membership-level
180                         a.section-title(href="#credits-corporate-gold")
181                                 h2.text-gradient Corporate Gold
182
183                         ul.corporate-gold
184                                 | {% for m in memberships.Corporate_Gold %}
185                                 li {% membership_credit m %}
186                                 | {% endfor %}
187                 | {% endif %}
188
189                 | {% if memberships.Corporate_Silver %}
190                 #credits-corporate-silver.membership-level
191                         a.section-title(href="#credits-corporate-silver")
192                                 h2.text-gradient Corporate Silver
193
194                         ul.corporate-silver
195                                 | {% for m in memberships.Corporate_Silver %}
196                                 li {% membership_credit m %}
197                                 | {% endfor %}
198                 | {% endif %}
199
200                 | {% if memberships.Corporate_Bronze %}
201                 #credits-corporate-bronze.membership-level
202                         a.section-title(href="#credits-corporate-bronze")
203                                 h2.text-gradient Corporate Bronze
204
205                         ul.corporate-bronze
206                                 | {% for m in memberships.Corporate_Bronze %}
207                                 li {% membership_credit m %}
208                                 | {% endfor %}
209                 | {% endif %}
210
211                 | {% if memberships.Diamond %}
212                 #credits-diamond.membership-level
213                         a.section-title(href="#credits-diamond")
214                                 h2.text-gradient Diamond
215
216                         ul.diamond
217                                 | {% for m in memberships.Diamond %}
218                                 li {% membership_credit m %}
219                                 | {% endfor %}
220                 | {% endif %}
221
222                 | {% if memberships.Titanium %}
223                 #credits-titanium.membership-level
224                         a.section-title(href="#credits-titanium")
225                                 h2.text-gradient Titanium
226
227                         ul.titanium
228                                 | {% for m in memberships.Titanium %}
229                                 li {% membership_credit m %}
230                                 | {% endfor %}
231                 | {% endif %}
232
233                 | {% if memberships.Platinum %}
234                 #credits-platinum.membership-level
235                         a.section-title(href="#credits-platinum")
236                                 h2.text-gradient Platinum
237
238                         ul.platinum
239                                 | {% for m in memberships.Platinum %}
240                                 li {% membership_credit m %}
241                                 | {% endfor %}
242                 | {% endif %}
243
244                 | {% if memberships.Gold %}
245                 #credits-gold.membership-level
246                         a.section-title(href="#credits-gold")
247                                 h2.text-gradient Gold
248                         ul.gold
249                                 | {% for m in memberships.Gold %}
250                                 li {% membership_credit m %}
251                                 | {% endfor %}
252                 | {% endif %}
253
254         | {% wagtailuserbar 'bottom-left' %}
255
256         .d-flex.p-3.align-items-center
257                 span.ml-auto.pr-3 Select Currency
258                 select#js-currency
259                         | {% if preferred_currency == 'EUR' %}
260                         option(data-currency="EUR", selected) Euro
261                         | {% else %}
262                         option(data-currency="EUR") Euro
263                         | {% endif %}
264                         | {% if preferred_currency == 'USD' %}
265                         option(data-currency="USD", selected) US Dollar
266                         | {% else %}
267                         option(data-currency="USD") US Dollar
268                         | {% endif %}
269
270 | {% endblock content %}
271
272 | {% block footer_scripts %}
273 script.
274         $('#js-currency').on('change', function(){
275
276                 let currency = (this.options[this.selectedIndex].getAttribute('data-currency'));
277                 set_preferred_currency(currency);
278         });
279
280         var offsetTop = 280;
281         var winHeight = $(window).height();
282
283         window.onresize = function() {
284           winHeight = $(window).height();
285         }
286
287         $(window).scroll(function (event) {
288             var scroll = $(window).scrollTop();
289             var $div = $('.js-fade');
290             var diff = $div.offset().top - winHeight + offsetTop;
291
292                         var classVisible = 'is-visible';
293
294                         if (!$div.hasClass(classVisible)){
295                                 $div.addClass(classVisible,
296                                         scroll >= diff
297                                 );
298                         }
299         });
300
301         $(window).resize();
302         $(window).scroll();
303 | {% endblock footer_scripts %}