From e8d133a9c2770616d1d3ceefe483d3504eb6db26 Mon Sep 17 00:00:00 2001
From: borntojesus <borntojesus@gmail.com>
Date: Sat, 25 Nov 2023 03:06:46 +0200
Subject: [PATCH] faq page

---
 content/faq/index.md               |   2 +
 sass/common/search.scss            |  23 ++
 sass/main.scss                     |   2 +
 sass/pages/faq-page.scss           |   6 +
 sass/pages/volunteering.scss       |  52 +--
 sass/variables/color-theme.scss    |   1 +
 templates/base.html                |   2 +-
 templates/faq.html                 | 520 +++++++++++++++++++++++------
 templates/new-donate.html          |  41 +--
 templates/section/donate.html      |  40 +++
 templates/shortcodes/acordeon.html |  14 +
 templates/support.html             |  41 +--
 templates/ui/search.html           |   3 +
 templates/volunteering.html        |  54 +--
 14 files changed, 553 insertions(+), 248 deletions(-)
 create mode 100644 sass/common/search.scss
 create mode 100644 sass/pages/faq-page.scss
 create mode 100644 templates/section/donate.html
 create mode 100644 templates/shortcodes/acordeon.html
 create mode 100644 templates/ui/search.html

diff --git a/content/faq/index.md b/content/faq/index.md
index 729a1add..7ce10e3d 100644
--- a/content/faq/index.md
+++ b/content/faq/index.md
@@ -5,6 +5,8 @@ template: faq.html
 weight: 10
 extra:
   hero_title: Faq
+  hero_image: faq/hero_image.png
+  menu_title_pre: Home
   faq_question_title_1: About Organic Maps
   faq_question_title_2: App
   faq_question_title_3: Operating The Map
diff --git a/sass/common/search.scss b/sass/common/search.scss
new file mode 100644
index 00000000..8933a5b3
--- /dev/null
+++ b/sass/common/search.scss
@@ -0,0 +1,23 @@
+.search {
+  padding: 20rem 0 20rem;
+  &__container {
+    position: relative;
+  }
+
+  &__input {
+    width: 100%;
+    outline: none;
+    padding: 15rem 15rem 15rem 40rem;
+    border-radius: 90rem;
+    border: 1px solid var(--common-grey-v5);
+  }
+  &__label {
+    position: relative;
+  }
+  &__icon {
+    position: absolute;
+    top: 3rem;
+    left: 15rem;
+    color: var(--common-grey-v5);
+  }
+}
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index 797a3fd8..661ddf39 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -14,6 +14,7 @@
 @import "./common/footer";
 @import "./common/bred-crum";
 @import "./common/support-block";
+@import "./common/search";
 
 // Component Style
 @import "./component/lang-switcher";
@@ -29,5 +30,6 @@
 @import "./pages/support";
 @import "./pages/volunteering";
 @import "./pages/new-support";
+@import "./pages/faq-page";
 
 
diff --git a/sass/pages/faq-page.scss b/sass/pages/faq-page.scss
new file mode 100644
index 00000000..272108f7
--- /dev/null
+++ b/sass/pages/faq-page.scss
@@ -0,0 +1,6 @@
+@import "../variables/media";
+
+.faq-page {
+padding-top: 0;
+}
+
diff --git a/sass/pages/volunteering.scss b/sass/pages/volunteering.scss
index a2ae6b25..f2fab7a0 100644
--- a/sass/pages/volunteering.scss
+++ b/sass/pages/volunteering.scss
@@ -2,12 +2,14 @@
 
 .section-volunteering {
   padding: var(--container-mob-section) 0;
-&__title {
-  @media (max-width: $media-sm) {
-     display: flex;
-    align-items: center;
+
+  &__title {
+    @media (max-width: $media-sm) {
+      display: flex;
+      align-items: center;
     }
-}
+  }
+
   &__select {
     display: flex;
     justify-content: space-between;
@@ -17,37 +19,49 @@
     margin-bottom: 20rem;
     cursor: pointer;
     border: 1rem solid transparent;
-@media (max-width: $media-sm) {
+    @media (max-width: $media-sm) {
       padding: 16rem 15rem;
     }
+
     &:last-child {
       margin-bottom: 0;
     }
   }
- &__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;
+
+  &__block {
+    padding: 20rem;
+    display: flex;
+    flex-direction: column;
+    gap: 16rem;
+    border-bottom: 1rem solid var(--common-acord-button);
+     overflow: scroll;
+   max-height: 500rem;
+    img {
+      display: inline;
+    width: fit-content;
     }
- }
+    @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;
     border-radius: 0 0 10rem 10rem;
-@media (max-width: $media-sm) {
-   margin-top: -27rem;
+        max-height: 0;
+
+    @media (max-width: $media-sm) {
+      margin-top: -27rem;
     }
 
   }
@@ -72,7 +86,7 @@
   }
 
   .is-active + .section-volunteering__content {
-    max-height: 1500rem;
+    max-height: 500rem;
     border: 1rem solid var(--common-acord-button);
 
   }
diff --git a/sass/variables/color-theme.scss b/sass/variables/color-theme.scss
index e0939266..f6ed9b3e 100644
--- a/sass/variables/color-theme.scss
+++ b/sass/variables/color-theme.scss
@@ -13,6 +13,7 @@
   --common-grey-v2: #5A5A5A;
   --common-grey-v3: #64776E;
   --common-grey-v4: #E5F0EB;
+  --common-grey-v5: #CECECE;
   --common-green-border: #99C4AF;
   --common-line-color: #AEC5BA;
   --common-black-sub: #26312C;
diff --git a/templates/base.html b/templates/base.html
index 3d7ec085..900c136e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -108,7 +108,7 @@
         {% include 'common/footer.html' %}
     </footer>
 </div>
-
+{% include 'shortcodes/acordeon.html' %}
 {% include 'shortcodes/switch-theme.html' %}
 {% include 'shortcodes/header-switch.html' %}
 {% include 'shortcodes/animation-section-js.html' %}
diff --git a/templates/faq.html b/templates/faq.html
index 5e8321e9..16d827d8 100644
--- a/templates/faq.html
+++ b/templates/faq.html
@@ -1,103 +1,433 @@
 {% extends "base.html" %}
 
 {%- block content %}
-<section class="hero-sub">
-  <div class="container hero-sub__container">
-    <h1>{{ page.extra.hero_title | safe }}</h1>
-  </div>
-</section>
-<section class="section-community">
-  <img src="logos/search-ico.svg">
-  {{ trans(key='search-label', lang=lang) }}
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_1 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
 
-    <h3>{{ page.extra.faq_question_app_q_1 | safe }}</p>
-    <img src="images/faq/app-img-1.png">
-    <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
-    <img src="images/faq/app-img-2.png">
-    <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+    <section class="hero-sub" 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>
+            <div class="hero-sub__content">
+                <h1 class="h1 hero-sub__title">
+                    {{ page.extra.hero_title | safe }}
+                </h1>
 
-    <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
-    <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
 
-    <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
-    <img src="images/faq/app-img-3.png">
-    <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+            </div>
+        </div>
+    </section>
 
-    <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
-    <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
-    <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
-    <img src="images/faq/app-img-4.png">
-    <img src="images/faq/app-img-5.png">
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_3 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_4 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_5 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_6 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_7 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_8 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_9 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_10 | safe }}
-    </h2>
-  </div>
-  <div>
-    <h2>
-      {{ page.extra.faq_question_title_11 | safe }}
-    </h2>
-  </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="search">
+        <div class="container search__container">
+            <label class="search__label" for="inpSearch">
+                {% include 'ui/search.html' %}
+                <input class="search__input" id="inpSearch" type="text" placeholder="Search">
+            </label>
+        </div>
+    </section>
+    <section class="faq-page section-volunteering">
+        <div class="container section-volunteering__container">
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_1| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_2| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_3| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_4| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_5| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_6| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_7| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_8| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_9| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_10| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+            <div class="section-volunteering__item">
+                <div class="section-volunteering__select">
+                    <h2 class="h5-boold  section-volunteering__title">
+                        {{ page.extra.faq_question_title_11| safe }}
+                    </h2>
+                    <div class="section-volunteering__button">
+                        <span class="section-volunteering__symbol">+</span>
+                    </div>
+                </div>
+                <div class="section-volunteering__content">
+                    <div class="section-volunteering__block">
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+    </section>
+
+    {% include 'section/donate.html' %}
 {%- endblock content %}
\ No newline at end of file
diff --git a/templates/new-donate.html b/templates/new-donate.html
index 6098ab8d..c90ff7ea 100644
--- a/templates/new-donate.html
+++ b/templates/new-donate.html
@@ -150,46 +150,7 @@
         </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>
+    {% include 'section/donate.html' %}
 
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
     <script>
diff --git a/templates/section/donate.html b/templates/section/donate.html
new file mode 100644
index 00000000..d8a835e7
--- /dev/null
+++ b/templates/section/donate.html
@@ -0,0 +1,40 @@
+   <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>
\ No newline at end of file
diff --git a/templates/shortcodes/acordeon.html b/templates/shortcodes/acordeon.html
new file mode 100644
index 00000000..7724ec6a
--- /dev/null
+++ b/templates/shortcodes/acordeon.html
@@ -0,0 +1,14 @@
+    <script>
+       try{
+           const select = document.querySelectorAll('.section-volunteering__select')
+
+           select.forEach(item => {
+              item.addEventListener('click', ()=>{
+                 item.classList.toggle('is-active')
+              })
+           })
+       }
+       catch (err) {
+           console.log(err)
+       }
+    </script>
\ No newline at end of file
diff --git a/templates/support.html b/templates/support.html
index 95e4e2ae..46a1bb46 100644
--- a/templates/support.html
+++ b/templates/support.html
@@ -62,46 +62,7 @@
         </div>
 
     </section>
-   <div 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>
-    </div>
+    {% include 'section/donate.html' %}
 
 
 {%- endblock content %}
\ No newline at end of file
diff --git a/templates/ui/search.html b/templates/ui/search.html
new file mode 100644
index 00000000..ee4159a7
--- /dev/null
+++ b/templates/ui/search.html
@@ -0,0 +1,3 @@
+<svg class="search__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M17.0418 16.4523L13.7865 13.197C14.7856 12.0576 15.3369 10.616 15.3369 9.08655C15.3369 7.41703 14.6867 5.84762 13.5063 4.6672C12.3258 3.48678 10.7564 2.83655 9.08691 2.83655C7.4174 2.83655 5.84798 3.48678 4.66756 4.6672C3.48714 5.84762 2.83691 7.41703 2.83691 9.08655C2.83691 10.7561 3.48714 12.3255 4.66756 13.5059C5.84798 14.6863 7.4174 15.3365 9.08691 15.3365C10.6164 15.3365 12.058 14.7853 13.1973 13.7862L16.4526 17.0415C16.534 17.1228 16.6406 17.1635 16.7472 17.1635C16.8538 17.1635 16.9604 17.1228 17.0418 17.0415C17.2046 16.8787 17.2046 16.615 17.0418 16.4523ZM5.25675 12.9167C4.23381 11.8936 3.67025 10.5333 3.67025 9.08655C3.67025 7.63981 4.23381 6.27954 5.25675 5.25639C6.27991 4.23344 7.64018 3.66988 9.08691 3.66988C10.5337 3.66988 11.8939 4.23344 12.9171 5.25639C13.94 6.27954 14.5036 7.63981 14.5036 9.08655C14.5036 10.5333 13.94 11.8936 12.9171 12.9167C11.8939 13.9397 10.5337 14.5032 9.08691 14.5032C7.64018 14.5032 6.27991 13.9397 5.25675 12.9167Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/templates/volunteering.html b/templates/volunteering.html
index ee1b0bf1..e437f034 100644
--- a/templates/volunteering.html
+++ b/templates/volunteering.html
@@ -325,60 +325,8 @@
         </div>
 
     </section>
-    <div class="support-block">
-        <div class="container support-block__container">
-            <h3 class="h3-bold support-block__title">Get Involved</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
-                    </h5>
 
-                    <p class="p-sm-light support-block__icon-text">
-                        The app runs on your donations, help improve it
-                    </p>
+     {% include 'section/donate.html' %}
 
-                </div>
-                <div class="support-block__card">
-                    {% include 'ui/icons/header/code.html' %}
-                    <h5 class="h4 support-block__icon-title">
-                        Contribute Code
-                    </h5>
 
-                    <p class="p-sm-light support-block__icon-text">
-                        Build the app used by people around the world
-                    </p>
-
-                </div>
-                <div class="support-block__card">
-                    {% include 'ui/icons/header/location.html' %}
-                    <h5 class="h4 support-block__icon-title">
-                        Contribute Location Info
-                    </h5>
-                    <p class="p-sm-light support-block__icon-text">
-                        Add info around you, and make the product
-                        better for everyone
-                    </p>
-
-                </div>
-            </div>
-
-        </div>
-    </div>
-
-    <script>
-       try{
-           const select = document.querySelectorAll('.section-volunteering__select')
-
-           select.forEach(item => {
-              item.addEventListener('click', ()=>{
-                 item.classList.toggle('is-active')
-              })
-           })
-       }
-       catch (err) {
-           console.log(err)
-       }
-    </script>
 {%- endblock content %}
\ No newline at end of file