exercism/website

View on GitHub
app/views/about/impact.html.haml

Summary

Maintainability
Test Coverage
- content_for :meta_title, "Exercism's Impact Report".html_safe
- content_for :meta_description, "We've provided over 310 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' } 310,569,762
      %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 ~285,340 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.bg-backgroundColorA.overflow-hidden
          .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 Exercise Submissions
            .text-purple.font-semibold.text-40.leading-150{ class: 'h-[60px]' }
              = render ReactComponents::Impact::Stat.new(:submit_submission_metric, Metrics.num_submissions.to_i)

          .py-12.px-32
            %h3.label-large Mentoring Discussions
            .text-purple.font-semibold.text-40.leading-150
              = render ReactComponents::Impact::Stat.new(:mentoring_discussions_metric, 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 19,603
            .label-large Mentors
          .flex.flex-col
            .text-40.leading-150.font-semibold.text-purple 5,508
            .label-large Code Contributors
          .flex.flex-col
            .text-40.leading-150.font-semibold.text-purple 3
            .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)