Updates hero on How to support us page

Adds image, adds bg color, adds in page links, updates the page title

Author: matyikriszta

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

@@ -1,13 +1,24 @@
-.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('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 +27,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 'hello@codebar.io', 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 'hello@codebar.io', 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 +51,11 @@
               = 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 'hello@codebar.io', 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 'hello@codebar.io', 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
+.py-4.py-lg-5.bg-light#donate
   .container
     = render partial: 'shared/donation_platforms'

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

@@ -502,17 +502,19 @@ 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
 
   admin:
     dashboard:

config/locales/de.yml

@@ -615,17 +615,19 @@ 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
 
   admin:
     dashboard:

config/locales/en.yml

@@ -468,17 +468,19 @@ en-AU:
       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
 
   admin:
     dashboard:

config/locales/en_AU.yml

@@ -468,17 +468,19 @@ en-GB:
       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
 
   admin:
     dashboard:

config/locales/en_GB.yml

@@ -466,17 +466,19 @@ en-US:
       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
 
   admin:
     dashboard: