Merge pull request #2096 from codebar/add-how-to-support-us-landing-page

Add Fundraise section to the How to support us page

Author: matyikriszta

app/assets/images/how-to-support-us/codebar-festival-2023.jpg

@@ -57,7 +57,7 @@
 
 .py-4.py-lg-5.bg-light
   .container
-    = render partial: 'shared/donation_platforms', locals: { title: t('homepage.donation_platforms.title') }
+    = render partial: 'shared/donation_platforms', locals: { title: t('homepage.donation_platforms.title'), with_button: true }
 
 .container.py-4.py-lg-5
   .row

app/assets/images/how-to-support-us/hackney-half.jpeg

@@ -1,13 +1,26 @@
-.container.py-4.py-lg-5
-  .row
-    .col
-      %h1.display-2.text-center How to support us
+.py-4.py-lg-5.bg-primary
+  .container
+    .row.align-items-center
+      .col-12.col-md-6
+        %h1.display-2.text-white.lh-1.mb-4
+          How to support
+          %br
+          our mission
+        %ul.list-inline
+          %li.list-inline-item
+            = link_to t('pages.how_to_support_us.volunteer.title'), '#volunteer-with-us', class: 'btn btn-light'
+          %li.list-inline-item
+            = link_to t('pages.how_to_support_us.fundraise.title'), '#fundraise', class: 'btn btn-light'
+          %li.list-inline-item
+            = link_to t('donation_platforms.title'), '#donate', class: 'btn btn-light'
+      .col-12.col-md-6
+        = image_tag 'how-to-support-us/codebar-festival-2023.jpg', alt: '', class: 'mw-100 rounded'
 
-.py-4.py-lg-5
+.py-4.py-lg-5#volunteer-with-us
   .container
     .row.mb-3
       .col
-        %h2.h1.text-center Volunteer with us
+        %h2.h1.text-center= t('pages.how_to_support_us.volunteer.title')
     .row.justify-content-center
       .col-12.col-lg-9
         .card.mb-3
@@ -16,20 +29,20 @@
               = image_tag 'how-to-support-us/become-an-organiser.jpg', class: 'rounded-start mw-100'
             .col-md-7
               .card-body
-                %h3.card-title= t('pages.how_to_support_us.become_an_organiser.title')
+                %h3.card-title= t('pages.how_to_support_us.volunteer.become_an_organiser.title')
                 %p.card-text
-                  = t('pages.how_to_support_us.become_an_organiser.description')
-                = mail_to '[email protected]', t('pages.how_to_support_us.become_an_organiser.link'), subjetc: "I'd like to become a codebar organiser for [city] chapter", class: 'btn btn-primary btn-sm text-decoration-none'
+                  = t('pages.how_to_support_us.volunteer.become_an_organiser.description')
+                = mail_to '[email protected]', t('pages.how_to_support_us.volunteer.become_an_organiser.link'), subjetc: "I'd like to become a codebar organiser for [city] chapter", class: 'btn btn-primary btn-sm text-decoration-none'
       .col-12.col-lg-9
         .card.mb-3
           .row.g-0
             .col-md-5
               = image_tag 'how-to-support-us/become-a-coach.jpg', class: 'rounded-start mw-100'
             .col-md-7
               .card-body
-                %h3.card-title= t('pages.how_to_support_us.become_a_coach.title')
+                %h3.card-title= t('pages.how_to_support_us.volunteer.become_a_coach.title')
                 %p.card-text
-                  = t('pages.how_to_support_us.become_a_coach.description')
+                  = t('pages.how_to_support_us.volunteer.become_a_coach.description')
                 = link_to registration_path(member_type: 'coach'), class: 'btn btn-primary btn-sm text-decoration-none' do
                   = t('members.sign_up_as_coach')
                   %i.fab.fa-github
@@ -40,11 +53,30 @@
               = image_tag 'how-to-support-us/volunteer.jpg', class: 'rounded-start mw-100'
             .col-md-7
               .card-body
-                %h3.card-title= t('pages.how_to_support_us.volunteer.title')
+                %h3.card-title= t('pages.how_to_support_us.volunteer.volunteer.title')
                 %p.card-text
-                  = t('pages.how_to_support_us.volunteer.description')
-                = mail_to '[email protected]', t('pages.how_to_support_us.volunteer.link'), subjetc: "I'd like to volunteer with codebar", class: 'btn btn-primary btn-sm text-decoration-none'
+                  = t('pages.how_to_support_us.volunteer.volunteer.description')
+                = mail_to '[email protected]', t('pages.how_to_support_us.volunteer.volunteer.link'), subjetc: "I'd like to volunteer with codebar", class: 'btn btn-primary btn-sm text-decoration-none'
+
+.py-4.py-lg-5.bg-light#fundraise
+  .container
+    .row.d-flex.align-items-center.mb-5
+      .col-12.col-md-6
+        %h2.h1= t('pages.how_to_support_us.fundraise.title')
+        %p= t('pages.how_to_support_us.fundraise.description_html')
+      .col-12.col-md-6
+        = image_tag 'how-to-support-us/hackney-half.jpeg', alt: t('pages.how_to_support_us.fundraise.image_alt'), class: 'mw-100 rounded'
+    .row
+      .col-12.col-lg-4
+        .ratio.shadow{style: '--bs-aspect-ratio: 150%;'}
+          %iframe{title: 'Great South Run', src: '//runforcharity.com/codebar/great-south-run/493220'}
+      .col-12.col-lg-4
+        .ratio.shadow{style: '--bs-aspect-ratio: 150%;'}
+          %iframe{title: 'Run Alton Towers Half', src: '//runforcharity.com/codebar/run-alton-towers-half/register'}
+      .col-12.col-lg-4
+        .ratio.shadow{style: '--bs-aspect-ratio: 150%;'}
+          %iframe{title: 'Hackney Half', src: '//runforcharity.com/codebar/hackney-half/register'}
 
-.py-4.py-lg-5.bg-light
+.py-4.py-lg-5#donate
   .container
     = render partial: 'shared/donation_platforms'

app/views/dashboard/show.html.haml

@@ -1,43 +1,44 @@
 - title = local_assigns[:title] ? local_assigns[:title] : t("donation_platforms.title")
 
-.row
-  .col.mb-3
+.row.justify-content-center
+  .col-12.col-md-7.text-center.mb-3
     %h2.h1= title
+    %p= t("donation_platforms.description")
 
 .row.d-flex
   .d-flex.col-sm-12.col-md-6.col-lg-3
     .card.mt-3.mt-lg-0.shadow
       .card-header.bg-white.border-0.p-0.ratio.ratio-21x9
         .bg-white.rounded-top.p-3.d-flex.align-items-center
-          = image_tag("logo.png", alt: "codebar logo", class: "mw-100")
+          = image_tag("logo.png", alt:t("donation_platforms.donation_form.image_alt"), class: "mw-100")
       .card-body
         %h3.h6= link_to(t("donation_platforms.donation_form.title"), new_donation_path)
         %p.card-text= t("donation_platforms.donation_form.text")
   .d-flex.col-sm-12.col-md-6.col-lg-3
     .card.mt-3.mt-lg-0.shadow
       .card-header.bg-white.border-0.p-0.ratio.ratio-21x9
         .bg-dark.rounded-top
-          = image_tag("give-as-you-live.png", alt: "Give as you Live logo", class: "mw-100 rounded-top")
+          = image_tag("give-as-you-live.png", alt: t("donation_platforms.give_as_you_live.image_alt"), class: "mw-100 rounded-top")
       .card-body
         %h3.h6= link_to(t("donation_platforms.give_as_you_live.title"), "https://www.giveasyoulive.com/join/codebar?utm_source=charitytoolkit&utm_content=233896&utm_medium=post&utm_campaign=CTGenericCampaign")
         %p.card-text= t("donation_platforms.give_as_you_live.text")
   .d-flex.col-sm-12.col-md-6.col-lg-3
     .card.mt-3.mt-lg-0.shadow
       .card-header.bg-white.border-0.p-0.ratio.ratio-21x9
         .bg-white.rounded-top.p-3.d-flex.align-items-center
-          = image_tag("open-collective-logo.png", alt: "Open Collective logo", class: "mw-100")
+          = image_tag("open-collective-logo.png", alt: t("donation_platforms.open_collective.image_alt"), class: "mw-100")
       .card-body
         %h3.h6= link_to(t("donation_platforms.open_collective.title"), "https://opencollective.com/codebar")
         %p.card-text= t("donation_platforms.open_collective.text")
   .d-flex.col-sm-12.col-md-6.col-lg-3
     .card.mt-3.mt-lg-0.shadow
       .card-header.bg-white.border-0.p-0.ratio.ratio-21x9
         .bg-dark.rounded-top
-          = image_tag("GitHub_Logo_White.png", alt: "Github Sponsors logo", class: "mw-100")
+          = image_tag("GitHub_Logo_White.png", alt: t("donation_platforms.github_sponsors.image_alt"), class: "mw-100")
       .card-body
         %h3.h6= link_to(t("donation_platforms.github_sponsors.title"), "https://github.com/sponsors/codebar")
         %p.card-text= t("donation_platforms.github_sponsors.text")
 
 - if local_assigns[:with_button]
   .d-flex.justify-content-center.mt-4
-    = link_to t("donation_platforms.link"), how_to_support_us_path, class: 'btn btn-primary btn-lg'
+    = link_to t("donation_platforms.link"), how_to_support_us_path, class: "btn btn-primary btn-lg"

app/views/pages/how-to-support-us.html.haml

@@ -502,17 +502,23 @@ de:
       lifetime_ban: Lifetime ban - You will no longer be able to RSVP to any future codebar events. You will also be removed from codebar’s Slack workspace. Examples of behaviour that will get you an automatic lifetime ban include - physical intimidation, stalking, inappropriate physical contact, unwelcome sexual attention or repeated behaviour after you’ve been spoken to by someone from the codebar team (directors or chapter organisers).
       closing_para: The above is only a starting point. The details of the incident may change how we view it, e.g. some verbal harassment may be so serious that we would give a lifetime ban.
     how_to_support_us:
-      become_an_organiser:
-        title: Become an organiser
-        description: Champion inclusion and diversity in the tech industry as a workshop organiser with codebar. Your contribution will create an empowering and safe environment, fostering learning and collaboration among individuals exploring coding in our vibrant community.
-        link: Email us to become an organiser
-      become_a_coach:
-        title: Become a coach
-        description: Affect change as a volunteer coach with codebar - your expertise and guidance will pave the way for aspiring developers, unlocking the world of coding and creating opportunities for folks from groups under represented in the tech industry.
       volunteer:
-        title: Other skills
-        description: codebar welcomes volunteers with a diverse range of skills - whether it's event coordination, fundraising, marketing or any other skill. Your unique abilities can enrich our community and drive our mission forward.
-        link: Email us to become a volunteer
+        title: Volunteer with us
+        become_an_organiser:
+          title: Become an organiser
+          description: Champion inclusion and diversity in the tech industry as a workshop organiser with codebar. Your contribution will create an empowering and safe environment, fostering learning and collaboration among individuals exploring coding in our vibrant community.
+          link: Email us to become an organiser
+        become_a_coach:
+          title: Become a coach
+          description: Affect change as a volunteer coach with codebar - your expertise and guidance will pave the way for aspiring developers, unlocking the world of coding and creating opportunities for folks from groups under represented in the tech industry.
+        volunteer:
+          title: Other skills
+          description: codebar welcomes volunteers with a diverse range of skills - whether it's event coordination, fundraising, marketing or any other skill. Your unique abilities can enrich our community and drive our mission forward.
+          link: Email us to become a volunteer
+      fundraise:
+        title: Fundraise
+        description_html: "Join our team at running and sporting events across the UK and challenge yourself physically while also supporting codebar. Use the registration forms below to register for an event. If you are not seeing an event in your area, <a href='mailto:[email protected]'>drop us an email</a> telling us where you are located and we'll let you know about upcoming events in your area."
+        image_alt: A Black British woman crosses the finish line at the Hackney Half Marathon in London in a shower of confetti while spectators cheer her on.
 
   admin:
     dashboard:
@@ -559,16 +565,21 @@ de:
         expiry_date: Application closing date
   donation_platforms:
     title: "Donate"
+    description: "Your support, whether a single gift or ongoing commitment, fuels our efforts to create an inclusive tech industry and provides consistent opportunities for learning and growth for members of groups underrepresented in the tech industry."
     link: "Find out how else to support us"
     donation_form:
       title: "Use the donation page"
-      text: "Consider making a lasting impact through codebar with a one-time donation or a monthly recurring contribution. Your support, whether a single gift or ongoing commitment, fuels our efforts to create an inclusive tech industry and provides consistent opportunities for learning and growth for members of groups underrepresented in the tech industry."
+      text: "Consider making a lasting impact through codebar with a one-time donation or a monthly recurring contribution."
+      image_alt: "codebar logo"
     github_sponsors:
       title: "Github Sponsors"
       text: "Support codebar's mission directly through GitHub Sponsors. Join us in shaping the future of technology through your generous donation."
+      image_alt: "Github Sponsors logo"
     open_collective:
       title: "Open Collective"
       text: "Setup a recurring contribution or make a one-time donation through Open Collective."
+      image_alt: "Open Collective logo"
     give_as_you_live:
       title: "Give as you Live"
       text: "Give as you Live is a platform enabling you to raise funds for your favourite charity with your everyday online shopping."
+      image_alt: "Give as you Live logo"

app/views/shared/_donation_platforms.html.haml

@@ -615,17 +615,23 @@ en:
       lifetime_ban: Lifetime ban - You will no longer be able to RSVP to any future codebar events. You will also be removed from codebar’s Slack workspace. Examples of behaviour that will get you an automatic lifetime ban include - physical intimidation, stalking, inappropriate physical contact, unwelcome sexual attention or repeated behaviour after you’ve been spoken to by someone from the codebar team (directors or chapter organisers).
       closing_para: The above is only a starting point. The details of the incident may change how we view it, e.g. some verbal harassment may be so serious that we would give a lifetime ban.
     how_to_support_us:
-      become_an_organiser:
-        title: Become an organiser
-        description: Champion inclusion and diversity in the tech industry as a workshop organiser with codebar. Your contribution will create an empowering and safe environment, fostering learning and collaboration among individuals exploring coding in our vibrant community.
-        link: Email us to become an organiser
-      become_a_coach:
-        title: Become a coach
-        description: Affect change as a volunteer coach with codebar - your expertise and guidance will pave the way for aspiring developers, unlocking the world of coding and creating opportunities for folks from groups under represented in the tech industry.
       volunteer:
-        title: Other skills
-        description: codebar welcomes volunteers with a diverse range of skills - whether it's event coordination, fundraising, marketing or any other skill. Your unique abilities can enrich our community and drive our mission forward.
-        link: Email us to become a volunteer
+        title: Volunteer with us
+        become_an_organiser:
+          title: Become an organiser
+          description: Champion inclusion and diversity in the tech industry as a workshop organiser with codebar. Your contribution will create an empowering and safe environment, fostering learning and collaboration among individuals exploring coding in our vibrant community.
+          link: Email us to become an organiser
+        become_a_coach:
+          title: Become a coach
+          description: Affect change as a volunteer coach with codebar - your expertise and guidance will pave the way for aspiring developers, unlocking the world of coding and creating opportunities for folks from groups under represented in the tech industry.
+        volunteer:
+          title: Other skills
+          description: codebar welcomes volunteers with a diverse range of skills - whether it's event coordination, fundraising, marketing or any other skill. Your unique abilities can enrich our community and drive our mission forward.
+          link: Email us to become a volunteer
+      fundraise:
+        title: Fundraise
+        description_html: "Join our team at running and sporting events across the UK and challenge yourself physically while also supporting codebar. Use the registration forms below to register for an event. If you are not seeing an event in your area, <a href='mailto:[email protected]'>drop us an email</a> telling us where you are located and we'll let you know about upcoming events in your area."
+        image_alt: A Black British woman crosses the finish line at the Hackney Half Marathon in London in a shower of confetti while spectators cheer her on.
 
   admin:
     dashboard:
@@ -757,19 +763,24 @@ en:
     discord_invitation: https://discord.gg/Eru89Rk
   donation_platforms:
     title: "Donate"
+    description: "Your support, whether a single gift or ongoing commitment, fuels our efforts to create an inclusive tech industry and provides consistent opportunities for learning and growth for members of groups underrepresented in the tech industry."
     link: "Find out how else to support us"
     donation_form:
       title: "Use the donation page"
-      text: "Consider making a lasting impact through codebar with a one-time donation or a monthly recurring contribution. Your support, whether a single gift or ongoing commitment, fuels our efforts to create an inclusive tech industry and provides consistent opportunities for learning and growth for members of groups underrepresented in the tech industry."
+      text: "Consider making a lasting impact through codebar with a one-time donation or a monthly recurring contribution."
+      image_alt: "codebar logo"
     github_sponsors:
       title: "Github Sponsors"
       text: "Support codebar's mission directly through GitHub Sponsors. Join us in shaping the future of technology through your generous donation."
+      image_alt: "Github Sponsors logo"
     open_collective:
       title: "Open Collective"
       text: "Setup a recurring contribution or make a one-time donation through Open Collective."
+      image_alt: "Open Collective logo"
     give_as_you_live:
       title: "Give as you Live"
       text: "Give as you Live is a platform enabling you to raise funds for your favourite charity with your everyday online shopping."
+      image_alt: "Give as you Live logo"
   services:
     donations: https://codebar.enthuse.com/donate/#!/