organicmaps/website
13
Fork 1
Code Issues 31 Pull requests 8 Projects Releases Wiki Activity Actions

page new support + FAQ

Browse source
This commit is contained in:
borntojesus 2023-11-25 02:24:19 +02:00
parent 647560df85
commit 310ea57950
17 changed files with 847 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/new-donate/index.md
View file

@ -4,6 +4,8 @@ template: new-donate.html
weight: 10
extra:
hero_title: Donate
hero_image: new-donate/donate-bg.png
menu_title_pre: Home
hero_description: Donate and create better maps together!
info_section_card_description_1: We rely on your donations to keep Organic Maps open, free, and without ads
info_section_card_description_2: We are a few enthusiasts contributing in our free time, and spending our families' money on the project. We love what we do, and we love our users

16
sass/component/header-sub.scss
View file

@ -17,6 +17,22 @@
left: 0;
}
&--big {
padding:calc(var(--menu-height) + 30rem) 0 274rem;
@media (max-width: $media-sm) {
padding:calc(var(--menu-height) + 30rem) 0 74rem;
}
&:before {
background: transparent;
}
.hero-sub__title {
padding: 100rem 0 22rem;
}
.hero-sub__description {
margin-bottom: 30rem;
}
}
&__container {
display: flex;
flex-direction: column;

10
sass/component/icons.scss
View file

@ -6,4 +6,14 @@
align-items: center;
padding: 8rem;
border-radius: 8rem;
}
.swiper-pagination-bullet {
background-color: var(--dots-color)!important;
opacity: 1!important;
width: 22rem!important;
height: 22rem!important;
}
.swiper-pagination-bullet-active {
background-color: var(--common-green)!important;
}

11
sass/global/index.scss
View file

@ -25,4 +25,15 @@ max-width: 130rem;
.frizz {
overflow: hidden;
}
.line {
width: 100%;
background-color: var(--green-button);
max-width: 222rem;
height: 2rem;
margin: 10rem auto 40rem;
@media (max-width: $media-sm) {
margin: 10rem auto 20rem;
}
}

1
sass/main.scss
View file

@ -28,5 +28,6 @@
@import "./pages/community";
@import "./pages/support";
@import "./pages/volunteering";
@import "./pages/new-support";

277
sass/pages/new-support.scss Normal file
View file

@ -0,0 +1,277 @@
@import "../variables/media";
.new-support {
&__text {
color: var(--black-white);
}
}
.support-benefit {
margin: -120rem 0 80rem;
position: relative;
z-index: 10;
@media (max-width: $media-sm) {
margin: -20rem 0 80rem;
}
&__container {
display: flex;
justify-content: center;
gap: 15rem;
@media (max-width: $media-sm) {
flex-direction: column;
}
}
&__item {
background-color: var(--wite-green);
border-radius: 10rem;
box-shadow: var(--card-box-shadow);
padding: 28rem 26rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15rem;
}
&__text {
max-width: 292rem;
text-align: center;
}
&__icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: 143rem;
width: 143rem;
height: 143rem;
background-color: var(--acordion-green-bg);
color: var(--green-button);
border: 1rem solid var(--green-button-transparent);
}
}
.services-support {
&__container {
display: flex;
flex-direction: column;
align-items: center;
}
&__title {
text-align: center;
}
&__img {
display: block;
width: 47%;
border-radius: 10rem 0 0 10rem;
@media (max-width: $media-sm) {
border-radius: 10rem;
width: calc(100% - 10rem);
margin: 0 10rem -20rem 0;
}
}
&__item {
border-radius: 10rem;
display: flex;
align-items: center;
margin-bottom: 10rem;
@media (max-width: $media-sm) {
margin-bottom: 20rem;
}
&:nth-child(2n) {
flex-direction: row-reverse;
@media (max-width: $media-sm) {
flex-direction: column;
}
.services-support__img {
border-radius: 0 10rem 10rem 0;
@media (max-width: $media-sm) {
border-radius: 10rem;
width: calc(100% - 10rem);
margin: 0 0rem -20rem 10rem;
}
}
.services-support__item-content {
@media (max-width: $media-sm) {
width: calc(100% - 10rem);
margin: 0 10rem 0rem 0;
}
}
}
@media (max-width: $media-sm) {
flex-direction: column;
}
}
&__sub-title {
padding: 10rem 0;
}
&__row {
margin-bottom: 40rem;
@media (max-width: $media-sm) {
margin-bottom: 10rem;
}
}
&__item-content {
background-color: var(--bg-green);
padding: 110rem 40rem;
border-radius: 10rem;
position: relative;
@media (max-width: $media-sm) {
padding: 20rem 16rem;
width: calc(100% - 10rem);
margin: 0 0 0 10rem;
}
}
&__count {
display: flex;
gap: 19rem;
align-items: center;
}
&__number {
color: var(--green-button);
}
&__icon {
width: 53rem;
height: 53rem;
border-radius: 53rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--icon-check-color);
color: var(--common-green);
@media (max-width: $media-sm) {
width: 33rem;
height: 33rem;
}
}
&__title-row {
@media (max-width: $media-sm) {
display: flex;
align-items: center;
gap: 16rem;
}
}
&__line {
margin: 10rem auto 40rem;
}
}
.reviews {
padding: var(--container-mob-section) 0;
&__title {
text-align: center;
}
&__line {
@media (max-width: $media-sm) {
margin-bottom: -10rem;
}
}
&__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: var(--card-box-shadow);
margin: 30rem 30rem 65rem;
border-radius: 10rem;
padding: 58rem 30rem 0;
background-color: var(--rewi-card-color);
position: relative;
@media (max-width: $media-sm) {
padding: 30rem 30rem 0;
}
&:before {
content: "";
width: 150rem;
height: 150rem;
position: absolute;
bottom: -30rem;
left: 50%;
transform: translateX(-50%) rotate(45deg);
z-index: 1;
border-radius: 30rem;
box-shadow: var(--card-box-shadow);
background-color: var(--rewi-card-color);
}
&:after {
content: "";
width: 100%;
height: 100%;
border-radius: 10rem;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
background-color: var(--rewi-card-color);
}
}
&__text {
color: var(--black-white);
max-width: 390rem;
z-index: 4;
}
&__s-title {
text-align: center;
display: flex;
align-items: center;
width: 100%;
max-width: 200rem;
justify-content: space-between;
margin: 30rem 0 10rem;
z-index: 4;
&:before {
content: "";
width: 16rem;
height: 1rem;
background-color: var(--green-button);
}
&:after {
content: "";
width: 16rem;
height: 1rem;
background-color: var(--green-button);
}
}
&__icon {
display: block;
margin-top: auto;
width: 80rem;
height: 80rem;
border-radius: 80rem;
margin-bottom: -30rem;
z-index: 4;
}
&__pag {
position: relative;
margin-top: 60rem;
}
}

55
sass/pages/volunteering.scss
View file

@ -1,6 +1,13 @@
@import "../variables/media";
.section-volunteering {
padding: var(--container-mob-section) 0;
&__title {
@media (max-width: $media-sm) {
display: flex;
align-items: center;
}
}
&__select {
display: flex;
justify-content: space-between;
@ -9,23 +16,39 @@
background-color: var(--acordion-green);
margin-bottom: 20rem;
cursor: pointer;
border: 1rem solid transparent;
border: 1rem solid transparent;
@media (max-width: $media-sm) {
padding: 16rem 15rem;
}
&:last-child {
margin-bottom: 0;
}
}
&__main {
padding: 30rem;
}
&__block {
padding: 20rem;
display: flex;
flex-direction: column;
gap: 16rem;
border-bottom: 1rem solid var(--common-acord-button);
@media (max-width: $media-sm) {
padding: 16rem 15rem;
}
}
&__main {
padding: 30rem;
}
&__content {
overflow: hidden;
max-height: 0;
background-color: var(--acordion-green-bg);
transition: max-height 0.5s ease-in-out;
margin-bottom: 20rem;
margin-top: -24rem;
margin-top: -24rem;
border-radius: 0 0 10rem 10rem;
@media (max-width: $media-sm) {
margin-top: -27rem;
}
}
@ -41,15 +64,17 @@ border: 1rem solid transparent;
align-items: center;
border-radius: 34rem;
}
.is-active {
border: 1rem solid var(--common-acord-button);
background-color: var(--acordion-green-bg);
}
.is-active + .section-volunteering__content {
max-height: 1500rem;
border: 1rem solid var(--common-acord-button);
.is-active {
}
border: 1rem solid var(--common-acord-button);
background-color: var(--acordion-green-bg);
}
.is-active + .section-volunteering__content {
max-height: 1500rem;
border: 1rem solid var(--common-acord-button);
}
}

26
sass/variables/color-theme.scss
View file

@ -5,44 +5,60 @@
--common-black: #000D07;
--common-white: #ffffff;
--common-green: #006C35;
--common-green-02: #33453D ;
--common-green-primery: #CCE1D7;
--common-green-btn: #006031;
--common-green-hover: #2b6445;
--common-grey: #D9DBDA;
--common-grey-v2: #5A5A5A;
--common-grey-v3: #64776E;
--common-grey-v4: #E5F0EB;
--common-green-border: #99C4AF;
--common-line-color: #AEC5BA;
--common-black-sub: #26312C;
--common-green-btn-social: #33895E;
--common-acord-button: #BFDACC;
--common-green-gradient: linear-gradient(90deg, #006C35 0%, rgba(0, 96, 49, 0.00) 100%);
}
// Theme COLOR change
.light {
--card-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
--icon-check-color: var(--common-green-primery);
--acordion-green: #F2F8F5;
--acordion-green-bg: #E5F0EB;
--acordion-green-bg: var(--common-grey-v4);;
--dots-color: var(--common-grey-v4);;
--body-bg: var(--common-white);
--white-black: var(--common-white);
--black-white: var(--common-black);
--green-theme: #006031;
--bg-green: #E5F0EB;
--bg-green: var(--common-grey-v4);;
--wite-green: var(--common-white);
--footer-bg: #F5F5F5;
--green-button: var(--common-green);
--green-button-transparent: transparent;
--icon-border-green: #66A686;
--rewi-card-color: var(--common-white);
}
.dark {
--acordion-green: #33453D;
--acordion-green-bg: #64776E;
--card-box-shadow: none;
--icon-check-color: var(--common-green-primery);
--acordion-green: var(--common-green-02);
--acordion-green-bg: var( --common-grey-v3);
--body-bg: #2C2C2C;
--dots-color: var(--common-grey-v4);;
--white-black: var(--common-black);
--black-white: var(--common-white);
--green-theme: var(--common-green);
--bg-green: #33453D;
--bg-green: var(--common-green-02);
--wite-green: var(--common-green-02);
--footer-bg: var(--common-black);
--green-button: #BBD7A7;
--green-button-transparent: #BBD7A7;
--icon-border-green: var(--common-white);
--rewi-card-color: var( --common-grey-v3);
}

16
sass/variables/fonts.scss
View file

@ -16,12 +16,16 @@
--h6: 500 30rem/36rem var(--main-font);
--h5-boold: 700 22rem/28rem var(--main-font);
--p: 300 18rem/28rem var(--main-font);
--p-15: 300 15rem/26rem var(--main-font);
--p-md: 400 16rem/28rem var(--main-font);
--p-md-bold: 600 16rem/28rem var(--main-font);
--p-sm: 500 14rem/28rem var(--main-font);
--p-sub: 300 12rem/15rem var(--main-font);
--p-card: 300 17rem/24rem var(--main-font);
--nav-link: 500 16rem/28rem var(--main-font);
--nav-bred: 400 13rem/18rem var(--main-font);
--icon-count: 700 64rem/60rem var(--sub-fonst);
}
@media (max-width: $media-md) {
@ -29,6 +33,7 @@
--h1: 300 36rem/normal var(--sub-fonst);
--h1-sub: 400 18rem/32rem var(--main-font);
--h5-boold: 700 16rem/28rem var(--main-font);
--p: 300 18rem/28rem var(--main-font);
--p-md: 400 16rem/28rem var(--main-font);
--p-sm: 500 14rem/28rem var(--main-font);
@ -37,6 +42,7 @@
--nav-link: 500 13rem/24rem var(--main-font);
--h1-inter: 500 24rem/36rem var(--main-font);
--icon-count: 700 48rem/60rem var(--sub-fonst);
}
}
@ -89,6 +95,9 @@
.p{
font: var(--p);
}
.p-15 {
font: var(--p-15);
}
.p-md {
font: var(--p-md);
}
@ -101,6 +110,9 @@
.p-card {
font: var(--p-card);
}
.p-md-bold {
font: var(--p-md-bold);
}
.nav-link{
font: var(--nav-link);
}
@ -109,3 +121,7 @@
color: var(--common-white);
}
.icon-count {
font: var(--icon-count);
}

4
templates/base.html
View file

@ -34,7 +34,7 @@
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lato:wght@300&display=swap"
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lato:wght@300;700&display=swap"
rel="stylesheet">
{% block rss %}
@ -90,6 +90,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Lato:wght@300&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<body class="light">

282
templates/new-donate.html
View file

@ -1,74 +1,216 @@
{% extends "base.html" %}
{%- block content %}
<section class="hero-sub">
<div class="container hero-sub__container">
<h1>{{ page.extra.hero_title | safe }}</h1>
<p>{{ page.extra.hero_description | safe }}</p>
<button> {{ trans(key='donate-title', lang=lang) }}</button>
</div>
</section>
<section class="section-community">
<div>
<img src="images/donate/earth-ico.png">
<p>{{ page.extra.info_section_card_description_1 | safe }}</p>
</div>
<div>
<img src="images/donate/heart-ico.png">
<p>{{ page.extra.info_section_card_description_2 | safe }}</p>
</div>
<div>
<img src="images/donate/info-ico.png">
<p>{{ page.extra.info_section_card_description_3 | safe }}</p>
</div>
</section>
<section>
<div>
<img src="images/donate/first-card-banner.png">
<h2>{{ page.extra.funding_section_card_title_1 | safe }}</h2>
<p>{{ page.extra.funding_section_card_description_1 | safe }}</p>
</div>
<div>
<img src="images/donate/second-card-banner.png">
<h2>{{ page.extra.funding_section_card_title_2 | safe }}</h2>
<p>{{ page.extra.funding_section_card_description_2 | safe }}</p>
</div>
<div>
<img src="images/donate/third-card-banner.png">
<h2>{{ page.extra.funding_section_card_title_3 | safe }}</h2>
<p>{{ page.extra.funding_section_card_description_3 | safe }}</p>
</div>
<button> {{ trans(key='donate-title', lang=lang) }}</button>
</section>
<section>
<h2>{{ page.extra.users_way_section_title | safe }}</h2>
<div>
<p>{{ page.extra.users_way_donation_description_1 | safe }}</p>
<h3>{{ page.extra.users_way_donation_name_1| safe }}</h3>
<img src="images/donate/first-donate-ico.png">
</div>
<div>
<p>{{ page.extra.users_way_donation_description_2 | safe }}</p>
<h3>{{ page.extra.users_way_donation_name_2| safe }}</h3>
<img src="images/donate/second-donate-ico.png">
</div>
</section>
<section>
{{ trans(key='ged-involved-title', lang=lang) }}
<div>
<img src="get-involved/donation-ico.png">
{{ trans(key='donate-title', lang=lang) }}
{{ trans(key='donate-description', lang=lang) }}
</div>
<div>
<img src="get-involved/contribute-code-ico.png">
{{ trans(key='contribute-code-title', lang=lang) }}
{{ trans(key='contribute-code-description', lang=lang) }}
</div>
<div>
<img src="get-involved/contribute-info-ico.png">
{{ trans(key='contribute-location-title', lang=lang) }}
{{ trans(key='contribute-location-description', lang=lang) }}
</div>
</section>
<section class="hero-sub hero-sub--big" style="background-image: url({{ page.extra.hero_image | safe }})">
<div class="container hero-sub__container">
<nav class="bred-crum">
<ul class="bred-crum__row">
<li class="bred-crum__item">
<a class="nav-bred bred-crum__link" href="/">{{ page.extra.menu_title_pre }}</a>
</li>
<li class="bred-crum__item">
<span class="nav-bred">
>
</span>
</li>
<li class="bred-crum__item">
<a class="nav-bred bred-crum__link bred-crum--active"
href="/{{ page.extra.hero_title | lower }}">{{ page.extra.hero_title }}</a>
</li>
</ul>
</nav>
<h1 class="h1 hero-sub__title">{{ page.extra.hero_title | safe }}</h1>
<p class="h2-sub_v2 hero-sub__description">{{ page.extra.hero_description | safe }}</p>
<button class="button button--main"> {{ trans(key='donate-title', lang=lang) }}</button>
</div>
</section>
<section class="support-benefit">
<div class="container support-benefit__container">
<div class="support-benefit__item">
<div class="support-benefit__icon">
{% include 'ui/icons/new-support/icon01.html' %}
</div>
<p class="p-15 support-benefit__text">{{ page.extra.info_section_card_description_1 | safe }}</p>
</div>
<div class="support-benefit__item">
<div class="support-benefit__icon">
{% include 'ui/icons/new-support/icon02.html' %}
</div>
<p class="p-15 support-benefit__text">{{ page.extra.info_section_card_description_2 | safe }}</p>
</div>
<div class="support-benefit__item">
<div class="support-benefit__icon">
{% include 'ui/icons/new-support/icon03.html' %}
</div>
<p class="p-15 support-benefit__text">{{ page.extra.info_section_card_description_3 | safe }}</p>
</div>
</div>
</section>
<section class="services-support">
<div class="container services-support__container">
<h2 class="h6 services-support__title">{{ page.extra.funding_section_title | safe }}</h2>
<div class="line services-support__line"></div>
<div class="services-support__row">
<div class="services-support__item">
<img class="services-support__img" src="/images/donate/first-card-banner.png" alt="img">
<div class="services-support__item-content">
<div class="services-support__title-row">
<div class="services-support__count">
<span class="icon-count services-support__number">01</span>
<div class="services-support__icon">
{% include 'ui/icons/new-support/pin.html' %}
</div>
</div>
<h2 class="h5 services-support__sub-title">{{ page.extra.funding_section_card_title_1 | safe }}</h2>
</div>
<p class="p-card services-support__text">{{ page.extra.funding_section_card_description_1 | safe }}</p>
</div>
</div>
<div class="services-support__item">
<img class="services-support__img" src="/images/donate/second-card-banner.png" alt="img">
<div class="services-support__item-content">
<div class="services-support__title-row">
<div class="services-support__count">
<span class="icon-count services-support__number">02</span>
<div class="services-support__icon">
{% include 'ui/icons/new-support/pin.html' %}
</div>
</div>
<h2 class="h5 services-support__sub-title">{{ page.extra.funding_section_card_title_2 | safe }}</h2>
</div>
<p class="p-card services-support__text">{{ page.extra.funding_section_card_description_2 | safe }}</p>
</div>
</div>
<div class="services-support__item">
<img class="services-support__img" src="/images/donate/third-card-banner.png" alt="img">
<div class="services-support__item-content">
<div class="services-support__title-row">
<div class="services-support__count">
<span class="icon-count services-support__number">03</span>
<div class="services-support__icon">
{% include 'ui/icons/new-support/pin.html' %}
</div>
</div>
<h2 class="h5 services-support__sub-title">{{ page.extra.funding_section_card_title_3 | safe }}</h2>
</div>
<p class="p-card services-support__text">{{ page.extra.funding_section_card_description_3 | safe }}</p>
</div>
</div>
</div>
<button class="button button--main"> {{ trans(key='donate-title', lang=lang) }}</button>
</div>
</section>
<section class="reviews">
<h2 class="reviews__title">{{ page.extra.users_way_section_title | safe }}</h2>
<div class="line reviews__line"></div>
<div class="swiper container reviews__carusel">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="reviews__item">
<p class="p reviews__text">{{ page.extra.users_way_donation_description_1 | safe }}</p>
<h3 class="p-md-bold reviews__s-title">{{ page.extra.users_way_donation_name_1| safe }}</h3>
<img class="reviews__icon" src="/images/donate/first-donate-ico.png" alt="img">
</div>
</div>
<div class="swiper-slide">
<div class="reviews__item">
<p class="p reviews__text">{{ page.extra.users_way_donation_description_2 | safe }}</p>
<h3 class="p-md-bold reviews__s-title">{{ page.extra.users_way_donation_name_2| safe }}</h3>
<img class="reviews__icon" src="/images/donate/second-donate-ico.png" alt="img">
</div>
</div>
<div class="swiper-slide">
<div class="reviews__item">
<p class="p reviews__text">{{ page.extra.users_way_donation_description_2 | safe }}</p>
<h3 class="p-md-bold reviews__s-title">{{ page.extra.users_way_donation_name_2| safe }}</h3>
<img class="reviews__icon" src="/images/donate/second-donate-ico.png" alt="img">
</div>
</div>
<div class="swiper-slide">
<div class="reviews__item">
<p class="p reviews__text">{{ page.extra.users_way_donation_description_2 | safe }}</p>
<h3 class="p-md-bold reviews__s-title">{{ page.extra.users_way_donation_name_2| safe }}</h3>
<img class="reviews__icon" src="/images/donate/second-donate-ico.png" alt="img">
</div>
</div>
</div>
<div class="reviews__pag">
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="support-block">
<div class="container support-block__container">
<h3 class="h3-bold support-block__title"> {{ trans(key='ged-involved-title', lang=lang) }}</h3>
<div class="support-block__row">
<div class="support-block__card">
{% include 'ui/icons/header/donate.html' %}
<h5 class="h4 support-block__icon-title">
{{ trans(key='donate-title', lang=lang) }}
</h5>
<p class="p-sm-light support-block__icon-text">
{{ trans(key='donate-description', lang=lang) }}
</p>
</div>
<div class="support-block__card">
{% include 'ui/icons/header/code.html' %}
<h5 class="h4 support-block__icon-title">
{{ trans(key='contribute-code-title', lang=lang) }}
</h5>
<p class="p-sm-light support-block__icon-text">
{{ trans(key='contribute-code-description', lang=lang) }}
</p>
</div>
<div class="support-block__card">
{% include 'ui/icons/header/location.html' %}
<h5 class="h4 support-block__icon-title">
{{ trans(key='contribute-location-title', lang=lang) }}
</h5>
<p class="p-sm-light support-block__icon-text">
{{ trans(key='contribute-location-description', lang=lang) }}
</p>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
let swiper = new Swiper(".reviews__carusel", {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 2000,
pauseOnMouseEnter: true,
},
breakpoints: {
768: {
slidesPerView: 2,
}
}
});
</script>
{%- endblock content %}

17
templates/support.html
View file

@ -62,40 +62,39 @@
</div>
</section>
<div class="support-block">
<div class="support-block">
<div class="container support-block__container">
<h3 class="h3-bold support-block__title">Get Involved</h3>
<h3 class="h3-bold support-block__title"> {{ trans(key='ged-involved-title', lang=lang) }}</h3>
<div class="support-block__row">
<div class="support-block__card">
{% include 'ui/icons/header/donate.html' %}
<h5 class="h4 support-block__icon-title">
Donate
{{ trans(key='donate-title', lang=lang) }}
</h5>
<p class="p-sm-light support-block__icon-text">
The app runs on your donations, help improve it
{{ trans(key='donate-description', lang=lang) }}
</p>
</div>
<div class="support-block__card">
{% include 'ui/icons/header/code.html' %}
<h5 class="h4 support-block__icon-title">
Contribute Code
{{ trans(key='contribute-code-title', lang=lang) }}
</h5>
<p class="p-sm-light support-block__icon-text">
Build the app used by people around the world
{{ trans(key='contribute-code-description', lang=lang) }}
</p>
</div>
<div class="support-block__card">
{% include 'ui/icons/header/location.html' %}
<h5 class="h4 support-block__icon-title">
Contribute Location Info
{{ trans(key='contribute-location-title', lang=lang) }}
</h5>
<p class="p-sm-light support-block__icon-text">
Add info around you, and make the product
better for everyone
{{ trans(key='contribute-location-description', lang=lang) }}
</p>
</div>

35
templates/ui/icons/new-support/icon01.html Normal file
View file

@ -0,0 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" width="87" height="87" viewBox="0 0 87 87" fill="none">
<g clip-path="url(#clip0_131_5556)">
<mask id="mask0_131_5556" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="87" height="87">
<path d="M87 0H0V87H87V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_131_5556)">
<mask id="mask1_131_5556" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="87" height="87">
<path d="M0 7.62939e-06H87V87H0V7.62939e-06Z" fill="white"/>
</mask>
<g mask="url(#mask1_131_5556)">
<path d="M4.5 39C6 29.5 9.83773 24.1488 12.8624 20.9593" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M80.0247 30.6529C82.0517 35.4185 83.1731 40.6621 83.1731 46.1676C83.1731 68.0787 65.4106 85.8409 43.4997 85.8409C21.5888 85.8409 3.82617 68.0787 3.82617 46.1676C3.82617 43.0407 4.18794 39.9984 4.87204 37.08" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.2158 10.9492C30.6873 8.10285 36.9058 6.4942 43.4998 6.4942C52.9309 6.4942 61.5937 9.78508 68.402 15.2814" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M61.9542 57.0087L62.884 55.6953C64.5122 53.3954 63.9676 50.2111 61.6675 48.5831L54.1943 43.2926" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33.1536 67.3266L32.8572 75.3833C32.8071 76.7457 33.4455 78.0421 34.5561 78.8329C35.9488 79.8247 37.8142 79.8354 39.2183 78.8599L50.9492 70.7103C52.6485 69.5295 54.1292 68.0617 55.3248 66.3729L58.8663 61.3702" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M39.9432 33.9874C37.1507 33.4294 34.1636 34.5098 32.4122 36.984L28.13 43.0327C26.5831 45.2183 26.5844 48.0342 27.911 50.1759" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.2083 22.8685C14.1674 23.1894 14.1465 23.5142 14.1465 23.8413V30.0336C14.1465 31.6415 15.9536 32.5866 17.2744 31.6697L21.8422 28.4985C23.3277 27.4669 25.0932 26.9143 26.9017 26.9143H32.7803C34.7063 26.9143 36.5534 26.1491 37.9153 24.7872L43.7163 18.9861C45.1995 17.503 45.2806 15.1246 43.902 13.5437L41.0771 10.3046C40.1586 9.25109 40.0307 7.7687 40.6625 6.59624" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M67.2063 26.322C66.8508 28.8612 67.2146 31.4635 68.2756 33.8258L70.7553 39.346C71.8798 41.8498 74.369 43.4603 77.1138 43.4603C78.4992 43.4603 79.8531 43.0476 81.0026 42.2746L82.8437 41.0369" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M83.0753 21.6644C82.8233 27.7065 78.2174 32.99 75.9463 35.241C75.2564 35.9246 74.1465 35.9258 73.4566 35.2422C71.1213 32.9282 66.3154 27.4057 66.3154 21.1492C66.3154 16.4872 70.1196 12.7139 74.793 12.7642C79.5603 12.8155 83.2741 16.9008 83.0753 21.6644Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M78.8037 21.4642C78.8037 23.7301 76.9665 25.5671 74.7008 25.5671C72.4347 25.5671 70.5977 23.7301 70.5977 21.4642C70.5977 19.1981 72.4347 17.3613 74.7008 17.3613C76.9665 17.3613 78.8037 19.1981 78.8037 21.4642Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M56.7033 35.0379C56.4513 41.0801 51.8454 46.3635 49.5742 48.6145C48.8843 49.298 47.7744 49.2994 47.0845 48.6156C44.7493 46.3016 39.9434 40.7792 39.9434 34.5227C39.9434 29.8607 43.7476 26.0874 48.4209 26.1377C53.1883 26.189 56.9021 30.2744 56.7033 35.0379Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M52.4316 34.8375C52.4316 37.1034 50.5944 38.9404 48.3287 38.9404C46.0626 38.9404 44.2256 37.1034 44.2256 34.8375C44.2256 32.5714 46.0626 30.7346 48.3287 30.7346C48.6067 30.7346 48.8784 30.7623 49.1411 30.8149" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M43.7015 54.71C43.4495 60.752 38.8436 66.0354 36.5722 68.2864C35.8825 68.9702 34.7724 68.9713 34.0827 68.2876C31.7473 65.9737 26.9414 60.4513 26.9414 54.1946C26.9414 49.5328 30.7456 45.7595 35.419 45.8096C40.1863 45.8609 43.9001 49.9464 43.7015 54.71Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M39.4297 54.5095C39.4297 56.7756 37.5926 58.6124 35.3267 58.6124C33.0607 58.6124 31.2236 56.7756 31.2236 54.5095C31.2236 52.2434 33.0607 50.4066 35.3267 50.4066C37.5926 50.4066 39.4297 52.2434 39.4297 54.5095Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25.1749 10.1692C24.9229 16.2112 20.317 21.4948 18.0459 23.7457C17.356 24.4293 16.2461 24.4305 15.5562 23.7469C13.2209 21.4329 8.41504 15.9105 8.41504 9.65395C8.41504 4.99197 12.2193 1.21869 16.8926 1.26899C21.6599 1.32013 25.3738 5.40556 25.1749 10.1692Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.9033 9.96884C20.9033 12.2348 19.0661 14.0718 16.8004 14.0718C14.5343 14.0718 12.6973 12.2348 12.6973 9.96884C12.6973 7.70277 14.5343 5.86591 16.8004 5.86591C19.0661 5.86591 20.9033 7.70277 20.9033 9.96884Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_131_5556">
<rect width="87" height="87" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.9 KiB

3
templates/ui/icons/new-support/icon02.html Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 9.3 KiB

15
templates/ui/icons/new-support/icon03.html Normal file
View file

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88" viewBox="0 0 88 88" fill="none">
<g clip-path="url(#clip0_131_5605)">
<path d="M41.429 75.7401C38.5729 79.0375 35.5128 82.1524 32.2667 85.0667C29.2674 82.4105 2.9334 58.3484 2.9334 32.2667C2.91006 24.4287 6.04636 16.912 11.6337 11.415C18.6729 4.39353 28.8136 1.45875 38.5148 3.63546C48.2161 5.81217 56.1308 12.7981 59.4954 22.154C59.6814 22.6439 60.1147 22.9974 60.632 23.0813C61.1493 23.1651 61.672 22.9667 62.0033 22.5606C62.3346 22.1545 62.4241 21.6026 62.2381 21.1126C56.8601 6.49875 41.7708 -2.14919 26.443 0.597791C11.1152 3.34477 -0.0317324 16.6946 6.78671e-05 32.2667C6.78671e-05 59.6317 27.2229 84.5167 30.3366 87.274C30.8745 87.7424 31.5637 88.0003 32.277 88C32.9865 88.0015 33.6715 87.7402 34.1998 87.2667C37.5467 84.2714 40.6991 81.0656 43.6378 77.6688C44.1712 77.0588 44.1091 76.132 43.4992 75.5986C42.8893 75.0652 41.9624 75.1272 41.429 75.7372V75.7401Z" fill="currentColor"/>
<path d="M83.6003 50.0749V41.0667C83.6003 32.1565 76.3771 24.9333 67.4669 24.9333C58.5567 24.9333 51.3336 32.1565 51.3336 41.0667V50.0749C48.7513 50.7417 46.9436 53.0663 46.9336 55.7334V82.1334C46.9336 85.3734 49.5602 88 52.8003 88H82.1336C85.3737 88 88.0003 85.3734 88.0003 82.1334V55.7334C87.9903 53.0663 86.1826 50.7417 83.6003 50.0749ZM54.2669 41.0667C54.2669 33.7765 60.1768 27.8667 67.4669 27.8667C74.7571 27.8667 80.6669 33.7765 80.6669 41.0667V49.8667H77.7336V41.0667C77.7336 35.3966 73.1371 30.8 67.4669 30.8C61.7968 30.8 57.2003 35.3966 57.2003 41.0667V49.8667H54.2669V41.0667ZM60.1336 49.8667V41.0667C60.1336 37.0166 63.4168 33.7333 67.4669 33.7333C71.517 33.7333 74.8003 37.0166 74.8003 41.0667V49.8667H60.1336ZM85.0669 82.1334C85.0669 83.7534 83.7536 85.0667 82.1336 85.0667H52.8003C51.1802 85.0667 49.8669 83.7534 49.8669 82.1334V55.7334C49.8669 54.1133 51.1802 52.8 52.8003 52.8H82.1336C83.7536 52.8 85.0669 54.1133 85.0669 55.7334V82.1334Z" fill="currentColor"/>
<path d="M68.5604 60.2331C66.843 59.9071 65.0696 60.3639 63.7235 61.4792C62.3774 62.5945 61.5987 64.2519 61.5996 66C61.5946 67.4296 62.1168 68.8108 63.0663 69.8794V73.3334C63.0663 75.7634 65.0363 77.7334 67.4663 77.7334C69.8964 77.7334 71.8663 75.7634 71.8663 73.3334V69.8808C73.2626 68.2999 73.7026 66.091 73.0189 64.0956C72.3352 62.1003 70.6329 60.6255 68.5604 60.2331ZM69.4404 68.1648C69.1192 68.4426 68.934 68.846 68.933 69.2707V73.3334C68.933 74.1434 68.2763 74.8 67.4663 74.8C66.6563 74.8 65.9996 74.1434 65.9996 73.3334V69.2707C65.9997 68.8467 65.8162 68.4434 65.4966 68.1648C64.8773 67.6166 64.5259 66.8271 64.533 66C64.5321 65.1296 64.9179 64.3037 65.586 63.7458C66.1124 63.3035 66.7788 63.0628 67.4663 63.0667C67.6587 63.067 67.8506 63.0847 68.0398 63.1195C69.2226 63.3558 70.1416 64.2899 70.3586 65.4764C70.5412 66.4722 70.1915 67.491 69.436 68.1648H69.4404Z" fill="currentColor"/>
<path d="M42.8955 49.8182C39.6953 51.7734 36.0168 52.8053 32.2666 52.7999C21.6725 52.8051 12.8136 44.7495 11.8147 34.2026C10.8158 23.6557 18.0049 14.0803 28.4116 12.0965C38.8183 10.1127 49.0259 16.3719 51.9771 26.5466C52.1223 27.0502 52.525 27.438 53.0337 27.5641C53.5424 27.6902 54.0796 27.5353 54.4432 27.1578C54.8067 26.7804 54.9412 26.2376 54.7961 25.7341C51.4255 14.1048 39.7606 6.94898 27.8665 9.21432C15.9723 11.4797 7.7544 22.4223 8.89457 34.4764C10.0347 46.5305 20.1587 55.7382 32.2666 55.7333C36.5578 55.7385 40.7668 54.5568 44.4282 52.3189C44.9128 52.0641 45.2151 51.5606 45.2123 51.0131C45.2094 50.4656 44.9019 49.9653 44.4146 49.7155C43.9274 49.4658 43.3417 49.5082 42.8955 49.8255V49.8182Z" fill="currentColor"/>
<path d="M14.667 32.2666C14.667 33.0766 15.3236 33.7333 16.1337 33.7333C16.9437 33.7333 17.6003 33.0766 17.6003 32.2666C17.6092 24.1701 24.1705 17.6089 32.267 17.6C33.077 17.6 33.7337 16.9433 33.7337 16.1333C33.7337 15.3233 33.077 14.6666 32.267 14.6666C22.5511 14.6771 14.6775 22.5508 14.667 32.2666Z" fill="currentColor"/>
<path d="M32.2666 76.9091C33.1375 76.9092 33.9635 76.5223 34.5209 75.8531L38.7199 70.8107C39.448 69.9366 39.605 68.7203 39.1228 67.69C38.6406 66.6596 37.6062 66.001 36.4686 66H28.0646C26.927 66.001 25.8926 66.6596 25.4104 67.69C24.9282 68.7203 25.0852 69.9366 25.8133 70.8107L30.0153 75.8545C30.5723 76.5224 31.3969 76.9087 32.2666 76.9091ZM36.4671 68.9333L32.2666 73.9757L28.0661 68.9333H36.4671Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_131_5605">
<rect width="88" height="88" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

3
templates/ui/icons/new-support/pin.html Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
<path d="M25.7125 9.90005C25.1625 9.35005 24.3375 9.35005 23.7875 9.90005L13.475 20.2125L9.2125 15.95C8.6625 15.4 7.8375 15.4 7.2875 15.95C6.7375 16.5001 6.7375 17.325 7.2875 17.875L12.5125 23.1C12.7875 23.375 13.0625 23.5126 13.475 23.5126C13.8875 23.5126 14.1625 23.375 14.4375 23.1L25.7125 11.825C26.2625 11.275 26.2625 10.45 25.7125 9.90005Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 473 B

237
templates/volunteering.html
View file

@ -42,18 +42,35 @@
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_1 | safe }}
</h3>
<p>
{{ page.extra.section_marketing_description_1 | safe }}
</p>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_2 | safe }}
</h3>
<ul>
<li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
</ul>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
</div>
</div>
<div class="section-volunteering__item">
@ -65,19 +82,36 @@
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_1 | safe }}
</h3>
<p>
{{ page.extra.section_marketing_description_1 | safe }}
</p>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_2 | safe }}
</h3>
<ul>
<li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
</ul>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
</div>
</div>
<div class="section-volunteering__item">
@ -90,18 +124,35 @@
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_1 | safe }}
</h3>
<p>
{{ page.extra.section_marketing_description_1 | safe }}
</p>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_2 | safe }}
</h3>
<ul>
<li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
</ul>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
</div>
</div>
<div class="section-volunteering__item">
@ -114,15 +165,35 @@
</div>
</div>
<div class="section-volunteering__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_1 | safe }}
</h3>
<p>
{{ page.extra.section_marketing_description_1 | safe }}
</p>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_2 | safe }}
</h3>
<ul>
<li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
</ul>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
</div>
</div>
<div class="section-volunteering__item">
@ -135,17 +206,37 @@
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_1 | safe }}
</h3>
<p>
{{ page.extra.section_marketing_description_1 | safe }}
</p>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_2 | safe }}
</h3>
<ul>
<li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
</ul>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
</div>
</div>
</div>
@ -158,16 +249,36 @@
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_1 | safe }}
</h3>
<p>
{{ page.extra.section_marketing_description_1 | safe }}
</p>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_2 | safe }}
</h3>
<ul>
<li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
</ul>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
</div>
</div>
<div class="section-volunteering__item">