-
-
Notifications
You must be signed in to change notification settings - Fork 111
/
impact.html.haml
191 lines (169 loc) · 10.6 KB
/
impact.html.haml
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
- content_for :meta_title, "Exercism's Impact Report".html_safe
- content_for :meta_description, "We've provided over 100 million minutes of free learning to over a million people. Learn more in our impact report!".html_safe
- content_for :canonical_url, impact_about_url
- require_stylesheet "about"
= render ViewComponents::AboutNav.new(:impact)
#impact-page
%header.pt-48.flex.flex-col.items-center{ class: 'mb-[-130px] md:h-[500px] h-[600px]' }
.md-container.c-shapes-impact.c-shapes-1
%h1.text-h5.text-textColor6.mb-16.flex.items-center
= graphical_icon "report", css_class: 'h-[26px] w-[26px] filter-textColor6 mr-16'
Exercism Impact Report
%h2.text-h0.mb-12.text-center{ class: 'max-w-[800px]' }
We've provided
%strong{ class: 'pl-8 pr-12 font-bold bg-[url(graphics/impact-highlight.svg)] bg-[length:100%_100%] text-textColor1NoDark' } 104,220,130
%strong{ class: 'pl-8 pr-8 mr-[-8px] font-bold bg-[url(graphics/impact-highlight.svg)] bg-[length:100%_100%] text-textColor1NoDark' } minutes
of free education.
%p.font-medium.text-textColor6.text-24.leading-160.text-center{ class: 'max-w-[780px]' }
And we provide another 132,916 minutes every day!
%br
All on a free, open source project funded by people like you.
.md-container.mb-48
.flex.flex-col.md:flex-row.md:items-stretch
.md:mr-32.mb-40.md:mb-0{ class: 'w-fill md:max-w-[380px]' }
.shadow-lgZ1.py-8.rounded-16.mb-32
.py-12.px-32.bg-backgroundColorF
%h3.label-large Students
.text-purple.font-semibold.text-40.leading-150{ class: 'h-[60px]' }
= render ReactComponents::Impact::Stat.new(:sign_up_metric, Metrics.num_users.to_i)
.py-12.px-32.bg-backgroundColorB
%h3.label-large Exercises Practiced
.text-purple.font-semibold.text-40.leading-150{ class: 'h-[60px]' }
= render ReactComponents::Impact::Stat.new(:start_solution_metric, Metrics.num_solutions.to_i)
.py-12.px-32
%h3.label-large Mentoring Discussions
.text-purple.font-semibold.text-40.leading-150= number_with_delimiter(Metrics.num_discussions.to_i)
.bg-backgroundColorB.shadow-base.py-16.px-24
%p.text-p-large.mb-8
%span.text-h5 Exercism teaches #{Track.active.count} programming languages
from #{Track.active.order('title ASC').first.title} to #{Track.active.order('title ASC').last.title},
using a unique blend of learning, practicing, and mentoring.
%p.text-h5 Everything on Exercism is 100% free.
.shadow-lg.flex-grow.bg-backgroundColorB.rounded-16.py-48.px-24.relative
.absolute.w-full.shadow-sm.text-h5.py-6.px-16.rounded-24.bg-backgroundColorA.flex.flex-row.items-center.whitespace-nowrap{ class: 'top-0 left-1/2 -translate-y-1/2 -translate-x-1/2' }
= graphical_icon "graph-stats-gradient", css_class: 'h-[24px] w-[24px] mr-12'
Live activity on Exercism
= ReactComponents::Impact::Map.new
.md-container.mb-64
.grid.grid-cols-1.gap-20.md:grid-cols-2.lg:grid-cols-3
.flex.flex-col.py-20.px-24
.flex.items-center.mb-12
= image_tag "photos/twitter-dapritchard_.jpg", class: 'w-[40px] h-[40px] rounded-circle mr-12'
.flex.flex-col
.label-large David Pritchard
.text-p-base.text-textColor6 @dapritchard_
= link_to icon('external-site-twitter', 'Twitter', css_class: 'filter-twitter h-[16px] w-[16px]'), "https://twitter.com/dapritchard_/status/1549978935995338753", class: 'ml-auto p-8'
%p.text-p-large
%em.not-italic.font-medium.text-purple @exercism_io
is really incredible. My submission was failing it's tests…I asked for mentoring to help straighten things out, and within 15 minutes someone had messaged me explaining my error.
.flex.flex-col.py-20.px-24
.flex.items-center.mb-12
= image_tag "photos/twitter-zippkode.jpg", class: 'w-[40px] h-[40px] rounded-circle mr-12'
.flex.flex-col
.label-large Karl 🇺🇦
.text-p-base.text-textColor6 @zippcode
= link_to icon('external-site-twitter', 'Twitter', css_class: 'filter-twitter h-[16px] w-[16px]'), "https://twitter.com/zippkode/status/1561075536834838530", class: 'ml-auto p-8'
%p.text-p-large
\…I worked on the Ruby strings exercises at
%em.not-italic.font-medium.text-purple @exercism_io
This platform forces me to slow down and actually logically solve the tasks…
.flex.flex-col.py-20.px-24
.flex.items-center.mb-12
= image_tag "photos/twitter-alebaffa.jpg", class: 'w-[40px] h-[40px] rounded-circle mr-12'
.flex.flex-col
.label-large Alessandro Baffa
.text-p-base.text-textColor6 @alebaffa
= link_to icon('external-site-twitter', 'Twitter', css_class: 'filter-twitter h-[16px] w-[16px]'), "https://twitter.com/alebaffa/status/1545972418497302528", class: 'ml-auto p-8'
%p.text-p-large
I've always loved
%em.not-italic.font-medium.text-purple @exercism_io
because you learn not only the syntax of a language, but also its dev environment: how to setup tests, packaging and build. Fantastic resource!
.md-container.mb-64
.flex.flex-col.md:flex-row
.md:mr-32.mb-48.md:mb-0.shadow-lg.flex-grow.bg-backgroundColorA.rounded-16.py-40.px-48
%h2.text-h1.mb-32 Exercism is powered by huge team of wonderful volunteers.
.grid.grid-cols-1.gap-20.lg:grid-cols-3
.flex.flex-col
.text-40.leading-150.font-semibold.text-purple 11,513
.label-large Mentors
.flex.flex-col
.text-40.leading-150.font-semibold.text-purple 3,567
.label-large Code Contributors
.flex.flex-col
.text-40.leading-150.font-semibold.text-purple 6
.label-large Full-time Staff
.flex.flex-wrap.mt-32.overflow-y-hidden{ class: 'h-[76px]' }
- @contributor_avatars.each do |avatar|
= image_tag avatar, class: 'bg-backgroundColorA h-[32px] w-[32px] mr-[-14px] mb-12 rounded-circle'
%div{ class: 'w-fill md:max-w-[374px]' }
.py-24.px-24.pt-60.shadow-base.mb-32.bg-backgroundColorA.relative
.absolute.bg-lightGold.rounded-circle.w-48.text-24.p-12{ class: 'top-0 -translate-y-1/2' } 🙌
%h3.text-h4.mb-8 Has Exercism helped you become a better developer?
%p.text-p-large.mb-16 If Exercism has helped your career prospects or given you joy, please consider financially supporting us.
%p.text-p-large Only 1% of people that use Exercism support us. Please be one of them.
= link_to donate_path, class: "btn btn-base btn-secondary" do
%span See how you can support us
= graphical_icon "arrow-right"
.md-container.mb-64
%h3.text-h3.text-center.mb-16 A special thanks to these organisations…
.logos.flex.items-center.justify-center.flex-wrap.gap-64.mb-24
= icon "mozilla", "Mozilla", category: :partners, css_class: "mozilla h-48 filter-textColor1"
= icon "gobridge", "GoBridge", category: :partners, css_class: "gobridge h-[80px]"
= icon "chicago", "University of Chicago", category: :partners, css_class: "chicago h-48"
= icon "packt", "Packt Publishing", category: :partners, css_class: 'h-48'
.text-center.text-18.leading-150.text-textColor6.font-semibold
And over
= link_to "700 individuals donors!", individual_supporters_about_path, class: 'underline hover:text-lightBlue'
.impact-chart-container.bg-repeat.overflow-hidden{ class: 'bg-[#221E31] bg-[length:90px] bg-[url(photos/chart-bg.jpg)]' }
.md-container
.pt-48.flex.flex-col.items-center
.flex.flex-col.text-center{ class: "max-w-[927px]" }
= graphical_icon "graph-stats-ascend", css_class: "mb-16 mx-auto h-[67px] w-[64px]"
%h2.text-h1.leading-128.text-white.mb-16
We've grown to over 1M students entirely by word of mouth.
%p.text-gray.text-p-2xlarge
We work closely with our community to understand how to evolve Exercism
to be the best it can be, and they reward us by sharing with their
friends.
%div{ class: 'h-[480px]' }
= render ReactComponents::Impact::Chart.new
-# .relative{ class: 'h-[900px]' }
= ReactComponents::Impact::Chart.new
.absolute{ class: 'top-[50px] left-0 right-0' }
.flex.flex-col.items-center
.flex.flex-col.text-center{ class: "max-w-[927px]" }
= graphical_icon "graph-stats-ascend", css_class: "mb-16 mx-auto h-[67px] w-[64px]"
%h2.text-h1.leading-128.text-white.mb-16
We've grown to over 1M students entirely by word of mouth.
%p.text-gray.text-p-2xlarge
We work closely with our community to understand how to evolve Exercism
to be the best it can be, and they reward us by sharing with their
friends.
.sm-container.mb-64.relative{ class: 'mt-[-64px]' }
.bg-backgroundColorA.flex.flex-col.text-center.justify-center.rounded-32.pt-24.md:pb-40.pb-24.md:px-48.px-24.shadow-lgv2
.text-48.leading-130.mb-8 🚀
%h2.text-h1.mb-12 Become rocket fuel for our mission
%p.text-p-2xlarge.mb-36.text-center.text-textColor6.font-medium
We've built everything for under $500,000. Imagine what we could do with
more significant funding! Could you be the one to make it happen?
.flex.flex-col.border.border-2.border-gradient.rounded-16.md:px-40.px-24.py-24.shadow-smZ1
.flex.flex-col.gap-8.md:gap-0.items-center.mx-auto.mb-24.md:flex-row
= image_tag "team/jeremy-walker.jpg", alt: "A photo of Jeremy Walker", class: 'w-[64px] h-[64px] md:mr-24 md:mb-4 rounded-circle'
.flex.flex-col.text-left
.md:text-h4.text-h5.mb-4
Interested in supporting Exercism as an organisation?
.leading-regular.text-textColor5.text-18
Get in touch with
= succeed(',') do
%span.text-textColor2.font-medium Jeremy Walker
Co-founder & CEO
= link_to "mailto:jeremy@exercism.org", class: "btn btn-primary" do
= graphical_icon "envelope", css_class: "mr-16"
%span.md:text-16.text-14 jeremy@exercism.org
.lg-container.mb-64
.c-shapes-impact.c-shapes-1
%h2.text-h1.text-center{ class: "max-w-[800px] mx-auto" }
Over 85,000 students have left testimonials to thank their mentors.
.md-container{ class: "bg-[var(--backgroundColorImpactPage)]" }
%article.testimonials.pt-40
= ReactComponents::Impact::TestimonialsList.new(params)