add comm page

# Conflicts:
#	templates/base.html

.github/workflows/publish.yml

@@ -4,7 +4,7 @@ env:
   ZOLA_VERSION: 0.17.2
 
 on:
-  workflow_dispatch:  # keep manual Github Action trigger in case of any issues with CF pages
+  workflow_dispatch:  # keep manual Github Action trigger in case of any issues with CF section
 #  push:
 
 jobs:
@@ -26,7 +26,7 @@ jobs:
           ./zola build
 
       - name: Publish to Cloudflare Pages
-        uses: cloudflare/pages-action@v1
+        uses: cloudflare/section-action@v1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 public
 translations.yaml
+.idea/

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="b9871119-7d48-43df-9f66-6fd91d65a1cb" name="Changes" comment="git ignore">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/content/community/index.md" beforeDir="false" afterPath="$PROJECT_DIR$/content/community/index.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/community.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/community.html" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="HTML File" />
+      </list>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="preprod" />
+      </map>
+    </option>
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 8
+}</component>
+  <component name="ProjectId" id="2XtPqp4nfatb5z8aknynlDefs2J" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;preprod&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/Users/dmitroantonuk/Documents/development/organicmaps.github.io/content/community&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.stylelint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.stylelint&quot;: &quot;E:\\organicmaps.github.io\\node_modules\\stylelint&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;/Users/dmitroantonuk/Documents/development/organicmaps.github.io/node_modules/prettier&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  }
+}</component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/content/community" />
+      <recent name="$PROJECT_DIR$/templates" />
+      <recent name="$PROJECT_DIR$/content/new" />
+      <recent name="E:\organicmaps.github.io\static\images" />
+      <recent name="E:\organicmaps.github.io\templates" />
+    </key>
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/templates" />
+      <recent name="E:\organicmaps.github.io\static\images\sections" />
+      <recent name="E:\organicmaps.github.io\static\images\open-map" />
+      <recent name="E:\organicmaps.github.io\static\images\hero" />
+      <recent name="E:\organicmaps.github.io\static\images" />
+    </key>
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="b9871119-7d48-43df-9f66-6fd91d65a1cb" name="Changes" comment="" />
+      <created>1699445595123</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1699445595123</updated>
+      <workItem from="1699445596944" duration="246000" />
+      <workItem from="1699445857666" duration="387000" />
+      <workItem from="1699446263788" duration="8939000" />
+      <workItem from="1700494833319" duration="590000" />
+    </task>
+    <task id="LOCAL-00001" summary="no index">
+      <created>1699960224756</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1699960224756</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="no index" />
+    <option name="LAST_COMMIT_MESSAGE" value="no index" />
+  </component>
+</project>

config.toml

@@ -37,7 +37,10 @@ install-fdroid="Install Organic Maps from F-Droid"
 language = "English"
 name = "Name"
 token = "Token"
-
+button-download = "Download"
+footer-copyright = "reg. code 16225385 Harju county, Tallinn, Kesklinna district, Rävala pst 8-810, 10143, Estonia"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 # Please sort all other translation sections and values in alphabetical order.
 [languages.de]
 [languages.de.translations]
@@ -51,6 +54,8 @@ install-fdroid = "Installiere Organic Maps aus F-Droid"
 language = "Deutsch"
 name = "Name"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.fr]
 [languages.fr.translations]
 address = "Addresse"
@@ -63,6 +68,8 @@ install-fdroid = "Installer Organic Maps depuis F-Droid"
 language = "Français"
 name = "Nom"
 token = "Jeton"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.it]
 [languages.it.translations]
 address = "Indirizzi"
@@ -75,6 +82,8 @@ install-fdroid = "Installa Organic Maps da F-Droid"
 language = "Italiano"
 name = "Nome"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.pl]
 [languages.pl.translations]
 address = "Adres"
@@ -87,6 +96,8 @@ install-fdroid = "Zainstaluj Organic Maps z F-Droid"
 language = "Polski"
 name = "Nazwa"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.ru]
 [languages.ru.translations]
 address = "Адрес"
@@ -99,6 +110,8 @@ install-fdroid = "Установите Organic Maps из F-Droid"
 language = "Русский"
 name = "Название"
 token = "Токен"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.tr]
 [languages.tr.translations]
 address = "Adres"
@@ -111,6 +124,8 @@ install-fdroid = "Organic Maps'i F-Droid'den İndir"
 language = "Türkçe"
 name = "İsim"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.id]
 [languages.id.translations]
 address = "Alamat"
@@ -123,6 +138,8 @@ install-fdroid = "Instal Peta Organik dari F-Droid"
 language = "Bahasa Indonesia"
 name = "Nama"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.cs]
 [languages.cs.translations]
 address = "Adresa"
@@ -135,6 +152,8 @@ install-fdroid = "Instalace Organic Maps z F-Droid"
 language = "Čeština"
 name = "Název"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.pt-BR.translations]
 address = "Endereço"
 back = "Voltar às Notícias"
@@ -146,6 +165,8 @@ install-fdroid = "Instale Organic Maps a partir do F-Droid"
 language = "Português (Brazil)"
 name = "Nome"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.es.translations]
 address = "Dirección"
 back = "Volver a Noticias"
@@ -157,6 +178,8 @@ install-fdroid = "Instalar Organic Maps desde F-Droid"
 language = "Español"
 name = "Nombre"
 token = "Ficha"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.nl.translations]
 address = "Adres"
 back = "Terug naar Nieuws"
@@ -168,6 +191,8 @@ install-fdroid = "Installeer Organic Maps op F-Droid"
 language = "Dutch"
 name = "Naam"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.eu.translations]
 address = "Helbidea"
 back = "Back to News"
@@ -179,6 +204,8 @@ install-fdroid = "Install Organic Maps from F-Droid"
 language = "Euskara"
 name = "Izena"
 token = "token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.hu.translations]
 address = "Cím"
 back = "Vissza a Hírekhez"
@@ -190,6 +217,8 @@ install-fdroid = "Telepítse az Organic Maps-et az F-Droidról"
 language = "Magyar"
 name = "Név"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.hi.translations]
 address = "पता"
 back = "ख़बरों पर वापस जाएं"
@@ -201,6 +230,8 @@ install-fdroid = "F-Droid से ऑर्गेनिक मैप्स इं
 language = "हिंदी"
 name = "नाम"
 token = "टोकन/Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.uk.translations]
 address = "Адреса"
 back = "Назад до Новин"
@@ -212,6 +243,8 @@ install-fdroid = "Встановіть Organic Maps з F-Droid"
 language = "Українська"
 name = "Назва"
 token = "Токен"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.ca.translations]
 address = "Adreça"
 back = "Torna a Notícies"
@@ -223,6 +256,8 @@ install-fdroid = "Instal·leu l’Organic Maps des del F-Droid"
 language = "Català"
 name = "Nom"
 token = "Testimoni"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.zh-CN]
 [languages.zh-CN.translations]
 address = "地址"
@@ -235,6 +270,8 @@ install-fdroid = "从 F-Droid 安装有机地图"
 language = "英语"
 name = "姓名"
 token = "令牌"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.sv.translations]
 address = "Adress"
 back = "Tillbaka till nyheter"
@@ -246,6 +283,8 @@ install-fdroid = "Installera Organic Maps från F-Droid"
 language = "Svenska"
 name = "Namn"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.mr.translations]
 address = "पत्ता"
 back = "बातम्यांवर परता"
@@ -257,6 +296,8 @@ install-fdroid = "F-Droid द्वारे Organic Maps स्थापित
 language = "मराठी"
 name = "नाव"
 token = "Token"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.zh-Hans.translations]
 address = "地址"
 back = "返回到新闻"
@@ -268,6 +309,8 @@ install-fdroid = "从F-Droid安装Organic Maps"
 language = "简体中文"
 name = "名称"
 token = "令牌"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.oc.translations]
 address = "Address"
 back = "Back to News"
@@ -279,6 +322,8 @@ install-fdroid = "Installar Mapas Organicas de F-Droid"
 language = "Occitan"
 name = "Nom"
 token = "geton"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.af.translations]
 address = "Adres"
 back = "Terug na nuus"
@@ -290,6 +335,8 @@ install-fdroid = "Installeer Organic Maps vanaf F-Droid"
 language = "Afrikaans"
 name = "Naam"
 token = "Teken"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"
 [languages.ar.translations]
 address = "العنوان"
 back = "العودة إلى الأخبار"
@@ -301,3 +348,5 @@ install-fdroid = "تثبيت Organic Maps من F-Droid"
 language = "العربية"
 name = "الاسم"
 token = "رمز"
+donate-title = "Donate"
+donate-description = "The app runs on your donations, help improve it"

content/_index.md

@@ -1,113 +1,11 @@
 ---
-title: "Organic Maps: Offline Hike, Bike, Trails and Navigation"
-description: Fast detailed offline maps for travelers, tourists, drivers, hikers and cyclists created by MapsWithMe (Maps.Me) app founders.
-page_template: index.html
+title: "Navigate with Privacy. Drive, Hike, Bike Offline"
+description: 'The ultimate companion app for travelers,
+built by the community.'
+template: home.html
 sort_by: weight
 extra:
   menu_title: Home
 ---
 
-**Organic Maps** is a free Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced **[OpenStreetMap][openstreetmap]** data. It is a privacy-focused, open-source [fork][fork] of **Maps.me** app (previously known as [**MapsWithMe**][mapswithme]), maintained by the same people who created **MapsWithMe** in 2011.
 
-**Organic Maps** is one of the only applications nowadays that supports 100% of features without an active Internet connection. Install Organic Maps, download maps, throw away your SIM card (by the way, your operator constantly tracks you), and go for a weeklong trip on a single battery charge without any byte sent to the network.
-
-### Download and install Organic Maps from [AppStore][appstore], [Google Play][googleplay], [FDroid][fdroid], [Huawei AppGallery][appgallery] {#install}
-
-{{ badges() }}
-
-{{ screenshot(src='/images/screenshots/hiking.jpg', alt='Hiking') }}
-
-{{ screenshot(src='/images/screenshots/prague.jpg', alt='Prague') }}
-
-{{ screenshot(src='/images/screenshots/search.jpg', alt='Offline Search') }}
-
-{{ screenshot(src='/images/screenshots/dark.jpg', alt='Navigation in dark mode') }}
-
-## Features
-
-Organic Maps is the ultimate companion app for travelers, tourists, hikers, and cyclists:
-
-- Detailed offline maps with places that don't exist on other maps, thanks to [OpenStreetMap][openstreetmap]
-- Cycling routes, hiking trails, and walking paths
-- Contour lines, elevation profiles, peaks, and slopes
-- Turn-by-turn walking, cycling, and car navigation with voice guidance
-- Fast offline search on the map
-- Bookmarks and tracks in KML, KMZ, GPX formats
-- Dark Mode to protect your eyes
-- Countries and regions don't take a lot of space
-- Free and open-source
-
-## Why Organic?
-
-Organic Maps is pure and organic, made with love:
-
-- Respects your privacy
-- Saves your battery
-- No unexpected mobile data charges
-
-Organic Maps app is free from trackers and other bad stuff:
-
-- No ads
-- No tracking
-- No data collection
-- No phoning home
-- No annoying registration
-- No mandatory tutorials
-- No noisy email spam
-- No push notifications
-- No crapware
-- ~~No pesticides~~ Purely organic!
-
-The application is verified by [Exodus Privacy Project][exodus]:
-
-{{ exodus_screenshot() }}
-
-The iOS application is verified by [TrackerControl for iOS][trackercontrol]:
-
-{{ trackercontrol_screenshot() }}
-
-Organic Maps doesn't request excessive permissions to spy on you:
-
-{{ privacy_screenshots() }}
-
-At Organic Maps, we believe that privacy is a fundamental human right:
-
-- Organic Maps is an indie community-driven open-source project
-- We protect your privacy from Big Tech's prying eyes
-- Stay safe no matter wherever you are
-
-Reject surveillance - embrace your freedom.
-
-**[Give Organic Maps a try!](#install)**
-
-## Who is paying for the free app?
-
-The app is free for everyone. Please [donate](@/donate/index.md) to support us!
-
-To donate conveniently, click on your preferred payment method icon below:
-
-{{ donate_buttons() }}
-
-### Our sponsors:
-
-[Mythic Beasts](https://www.mythic-beasts.com/) ISP [provides us][mythic_beasts_donation] two virtual servers with 400 TB/month of free bandwidth to help our users with maps downloads and updates.
-
-## Community
-
-Organic Maps is an [open-source software][github] licensed under the Apache License 2.0.
-
-- Please join our beta program, suggest your features, and report bugs:
-  * [iOS Beta (TestFlight)][testflight]
-  * [Android Beta (Firebase)][firebase]
-  * [Linux Desktop Beta (Flatpak)][flatpak]
-  * [Linux Desktop Beta (packages)][repology]
-- Report bugs or issues to [the issue tracker][issues] or [email us][email].
-- [Discuss][ideas] ideas or propose feature requests.
-- Subscribe to our [Telegram Channel][telegram] or to the [matrix space][matrix] for updates.
-- Join our [Telegram Group][telegram_chat] to discuss with other users.
-- Visit our [GitHub page][github].
-- Follow our updates in [Mastodon][mastodon], [Facebook][facebook], [Twitter][twitter], [Instagram][instagram], [Reddit][reddit], [LinkedIn][LinkedIn].
-
-[fork]: https://en.wikipedia.org/wiki/Fork_(software_development)
-
-{{ references() }}

content/community/index.md

@@ -0,0 +1,28 @@
+---
+title: 
+description: 
+template: community.html
+weight: 10
+extra:
+  menu_title: Community
+  menu_title_pre: Home
+  community_hero_description: Organic Maps is created and maintained by people like you
+  hero_image: community/community-bg.png
+  preview_image: donate/donate.png
+  community_card_title_1: Join the discussion
+  community_card_description_1: Report, bugs, discuss idea, and propose features
+  community_card_title_2: Contribute Code
+  community_card_description_2: Help fix bugs, do code reviews, and develop new features.
+  community_card_title_3: Add Location Info
+  community_card_description_3: Add info about shops, points of interest, trails, public transport to OpenStreetMap
+  community_card_title_4: Provide Support
+  community_card_description_4: Help people use the app, respond to questions on ":" Telegram, Instagram, Facebook, X (Twitter), Reddit, LinkedIn, Mastodon, Matrix
+  community_card_title_5: Translate
+  community_card_description_5: Add and update translations in the app's interface, app stores and this website.
+  community_card_title_6: Design & Product Management
+  community_card_description_6: Shape the direction of the product and the user experience
+  stay_connected_section_title: Stay Connected
+  donate:
+     title: Donate
+     description: The app runs on your donations, help improve it
+---

data/translation.yml

@@ -0,0 +1,262 @@
+ru-UA:
+  - title: О нас
+    url: /rus/
+    sublinks:
+      - title: Об клинике
+        url: "/about.html"
+      - title: Вопрос / Ответ
+        url: "/faq.html"
+      - title: Стоимость лечения
+        url: /price.html
+      - title: Наши контакты
+        url: /conatacty.html
+      - title: Памятка пациента
+        url: /for-patient.html
+  - title: Психиатрия
+    url: /psihiatria.html
+    sublinks:
+      - title: Вызов психиатра домой
+        url: /vyklyk-psykhiatra-dodomu.html
+      - title: Обсессивно-компульсивное расстройство
+        url: /obsesyvno-kompulsyvni-rozlady.html
+      - title: Биполярное расстройство
+        url: /bipolyarnyy-rozlad.html
+      - title: Деменция
+        url: /dementsiya.html
+      - title: Игровая зависимость
+        url: /psihiatria/game.html
+      - title: Сексуальные расстройства
+        url: /psihiatria/sex-zavisimosti.html
+      - title: Аффективные расстройства
+        url: /affektivnye-rasstroystva.html
+      - title: Шизоаффективное расстройство
+        url: /sizoaffektivnoe-rastroistva.html
+      - title: Шизотипическое расстройство
+        url: /shizotepia.html
+      - title: Лечение голосов
+        url: /golosov.html
+      - title: Бредовые идеи
+        url: /bred.html
+      - title: Нарушение памяти
+        url: /pamjat.html
+      - title: Шизофрения
+        url: /shizofrena.html
+      - title: Судорожные припадки
+        url: /sudorogi.html
+      - title: Лечении депрессии
+        url: /depressiya.html
+      - title: Лечение психозов
+        url: /psihozi.html
+      - title: Дереализации и деперсонализации
+        url: /depersonalization.html
+      - title: Навязчивые мысли
+        url: /navjaz.html
+      - title: Органические расстройства
+        url: /ocgr.html
+      - title: Психопатия
+        url: /psihopatii.html
+      - title: Тревожно-депрессивное расстройство
+        url: /tds.html
+      - title: Синдром Кандинского - Клерамбо
+        url: /skk.html
+  - title: Психотерапия
+    url: /uslugi/psihoterapia.html
+    sublinks:
+      - title: Нарушение питания
+        url: /narusheniya-pitaniya.html
+      - title: Нарушение сна
+        url: /parasomnia.html
+      - title: Лечение булимии
+        url: /napravlenie-lechenia/bulimija.html
+      - title: Лечение Фобий
+        url: /lechenie-fobij.html
+      - title: ГТР
+        url: /gtr.html
+      - title: Психокоррекция
+        url: /psykhokorektsiya.html
+      - title: ПТСР
+        url: /ptsr.html
+      - title: Лечение гнева
+        url: /gnev.html
+      - title: Лечение кома в горле
+        url: /com-v-gorle.html
+      - title: Истерики
+        url: /isterika.html
+      - title: Эмоциональное выгорание
+        url: /vigoranie.html
+      - title: Меланхолия
+        url: /melanholia.html
+      - title: Хроническая усталость
+        url: /ustalost.html
+  - title: Неврология
+    url: /nevrokog.html
+    sublinks:
+      - title: Энцефалопатия
+        url: /nevrokog/encefalopatia.html
+      - title: Внутричерепная гипертензия
+        url: /nevrokog/vnutricerepnaya-gipertenzia.html
+      - title: Гидроцефалия
+        url: /nevrokog/gidracefalia.html
+      - title: Гиперкинезы
+        url: /nevrokog/giper.html
+      - title: Головные боли
+        url: /nevrokog/golovnie-boli.html
+      - title: Головокружение
+        url: /nevrokog/golovokruzenie.html
+      - title: Болезнь Паркинсона
+        url: /nevrokog/parkinson.html
+      - title: Вегето-сосудистая дистония
+        url: /nevrokog/vsd-help.html
+  - title: Услуги
+    url: /uslugi.html
+    sublinks:
+      - title: Консультация Психиатра
+        url: /konsultatsiya-psykhiatra.html
+      - title: Консультация Психолога
+        url: /konsultatsiya-psykholoha.html
+      - title: Консультация Психотерапевта
+        url: /konsultatsiya-psykhoterapevta.html
+      - title: Скорая психиатрическая помощь
+        url: /skoraya-psikhiatricheskaya-pomoshch.html
+      - title: Вызов медсестры на дому
+        url: /uslugi/medsestra.html
+      - title: Очистка организма
+        url: /uslugi/detox-o.html
+      - title: Трансфер в клинику
+        url: /perevozka.html
+  - title: Стоимость лечения
+    url: /price.html
+
+
+uk-UA:
+  - title: Про нас
+    url: /
+    sublinks:
+      - title: Про клініку
+        url: /ua/about.html
+      - title: Питання/Відповідь
+        url: /ua/faq.html
+      - title: Вартість лікування
+        url: /ua/price.html
+      - title: Наші контакти
+        url: /ua/conatacty.html
+      - title: Пам'ятка пацієнта
+        url: /ua/for-patient.html
+  - title: Психіатрія
+    url: /ua/psihiatria.html
+    sublinks:
+      - title: Виклик психіатра додому
+        url: /ua/vyklyk-psykhiatra-dodomu.html
+      - title: Обсесивно-компульсивний розлад
+        url: /ua/obsesyvno-kompulsyvni-rozlady.html
+      - title: Біполярний розлад
+        url: /ua/bipolyarnyy-rozlad.html
+      - title: Деменція
+        url: /ua/dementsiya.html
+      - title: Ігрова залежність
+        url: /ua/psihiatria/game.html
+      - title: Сексуальні розлади
+        url: /ua/psihiatria/sex-zavisimosti.html
+      - title: Афективні розлади
+        url: /ua/affektivnye-rasstroystva.html
+      - title: Шизоафективний розлад
+        url: /ua/sizoaffektivnoe-rastroistva.html
+      - title: Шизотиповний розлад
+        url: /ua/shizotepia.html
+      - title: Лікування голосів
+        url: /ua/golosov.html
+      - title: Маячні ідеї
+        url: /ua/bred.html
+      - title: Порушення пам'яті
+        url: /ua/pamjat.html
+      - title: Шизофренія
+        url: /ua/shizofrena.html
+      - title: Судомні напади
+        url: /ua/sudorogi.html
+      - title: Лікування депресії
+        url: /ua/depressiya.html
+      - title: Лікування психозів
+        url: /ua/psihozi.html
+      - title: Дереалізації та деперсоналізації
+        url: /ua/depersonalization.html
+      - title: Нав'язливі думки
+        url: /ua/navjaz.html
+      - title: Органічні розлади
+        url: /ua/ocgr.html
+      - title: Психопатія
+        url: /ua/psihopatii.html
+      - title: Тривожно-депресивний розлад
+        url: /ua/tds.html
+      - title: Синдром Кандинського - Клерамбо
+        url: /ua/skk.html
+  - title: Психотерапія
+    url: /ua/uslugi/psihoterapia.html
+    sublinks:
+          - title: Порушення харчування
+            url: /ua/narusheniya-pitaniya.html
+          - title: Порушення сну
+            url: /ua/parasomnia.html
+          - title: Лікування булимії
+            url: /ua/napravlenie-lechenia/bulimija.html
+          - title: Лікування Фобій
+            url: /ua/lechenie-fobij.html
+          - title: ГТР
+            url: /ua/gtr.html
+          - title: Психокорекція
+            url: /ua/psykhokorektsiya.html
+          - title: ПТСР
+            url: /ua/ptsr.html
+          - title: Лікування гніву
+            url: /ua/gnev.html
+          - title: Лікування кома в горлі
+            url: /ua/com-v-gorle.html
+          - title: Істерики
+            url: /ua/isterika.html
+          - title: Емоційне вигоряння
+            url: /ua/vigoranie.html
+          - title: Меланхолія
+            url: /ua/melanholia.html
+          - title: Хронічна втома
+            url: /ua/ustalost.html
+  - title: Неврологія
+    url: /ua/nevrokog.html
+    sublinks:
+      - title: Енцефалопатія
+        url: /ua/nevrokog/encefalopatia.html
+      - title: Внутрішньочерепна гіпертензія
+        url: /ua/nevrokog/vnutricerepnaya-gipertenzia.html
+      - title: Гідроцефалія
+        url: /ua/nevrokog/gidracefalia.html
+      - title: Гіперкінези
+        url: /ua/nevrokog/giper.html
+      - title: Головний біль
+        url: /ua/nevrokog/golovnie-boli.html
+      - title: Запаморочення
+        url: /ua/nevrokog/golovokruzenie.html
+      - title: Хвороба Паркінсона
+        url: /ua/nevrokog/parkinson.html
+      - title: Вегето-судинна дистонія
+        url: /ua/nevrokog/vsd-help.html
+  - title: Послуги
+    url: /ua/uslugi.html
+    sublinks:
+      - title: Консультація Психіатра
+        url: /ua/konsultatsiya-psykhiatra.html
+      - title: Консультація Психолога
+        url: /ua/konsultatsiya-psykholoha.html
+      - title: Консультація Психотерапевта
+        url: /ua/konsultatsiya-psykhoterapevta.html
+      - title: Швидка психіатрична допомога
+        url: /ua/skoraya-psikhiatricheskaya-pomoshch.html
+      - title: Виклик медсестри вдома
+        url: /ua/uslugi/medsestra.html
+      - title: Очищення організму
+        url: /ua/uslugi/detox-o.html
+      - title: Трансфер до клініки
+        url: /ua/perevozka.html
+  - title: Вартість лікування
+    url: /ua/price.html
+
+
+
+

sass/_language_selector.scss

@@ -1,73 +0,0 @@
-$headerAndLogoHeight: 65px;
-$headerPadding: 10px;
-$logoColor: green;
-$baseFontSize: 400;
-$baseBgColor: black;
-
-@media print {
-  .no-print,
-  .no-print * {
-    display: none !important;
-  }
-}
-
-@mixin MenuItemsTextStyling {
-  color: green;
-  cursor: pointer;
-  text-align: center;
-  // All menu texts should be in one line.
-  white-space: nowrap;
-}
-
-@mixin MenuItemInvertedButton {
-  color: red;
-}
-
-.lang-menu {
-  display: none;
-  // It's a list, so remove list padding (where bullets are usually drawn).
-  padding: 0;
-  list-style: none;
-
-  &-item {
-    margin-left: 1em;
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  &-link {
-    @include MenuItemsTextStyling;
-
-    text-decoration: none;
-  }
-}
-
-input.lang-menu-trigger {
-  // Hide input checkbox, label is used for touch events instead.
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-
-  // Show menu on checkbox click.
-  &:checked ~ .lang-menu {
-    // Turn flexbox ul again into a block and reset it's properties.
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    z-index: 999;
-
-    .lang-menu-item {
-      text-align: center;
-    }
-  }
-
-  &:checked ~ label {
-    @include MenuItemInvertedButton;
-  }
-}
-
-// Menu button
-label[for="lang-menu-trigger"] {
-  @include MenuItemsTextStyling;
-}

sass/_top_menu.scss

@@ -1,36 +0,0 @@
-.top_menu_logo {
-  background-image: url("/logos/green-on-transparent.svg");
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: left center;
-  background-origin: content-box;
-  width: 32px;
-  height: 32px;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.top_menu_item,
-.top_menu_item_active {
-  white-space: nowrap;
-
-  a {
-    text-decoration: none;
-  }
-}
-
-.top_menu_donate a {
-  color: red;
-}
-
-.github svg {
-  fill: black;
-
-  @media (prefers-color-scheme: dark) {
-    fill: white;
-  }
-
-  display: inline-block;
-  overflow: visible !important;
-  margin-right: 0.5rem;
-}

sass/common/bred-crum.scss

@@ -0,0 +1,10 @@
+.bred-crum {
+  padding: 15rem 0 0;
+  &--active {
+    text-decoration: none;
+  }
+  &__row {
+    display: flex;
+    gap: 10rem;
+  }
+}

sass/common/footer.scss

@@ -0,0 +1,58 @@
+@import "../variables/media";
+.footer {
+  background-color: var(--footer-bg);
+  padding: 30rem 0;
+  @media (max-width: $media-md) {
+    padding: 48rem 0;
+  }
+  &__description {
+    color: var(--black-white);
+  }
+  &__logo {
+    color: var(--common-green);
+    @media (max-width: $media-md) {
+     max-height: 40rem;
+    }
+  }
+  &__nav {
+    border-top: 1rem solid var(--common-grey);
+    display: flex;
+    justify-content: space-between;
+    padding: 20rem 0;
+    margin-top: 20rem;
+    @media (max-width: $media-md) {
+      margin-top: 32rem;
+      padding: 32rem 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 30rem;
+    }
+  }
+  &__nav-item {
+    @media (max-width: $media-md) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+  &__link {
+    text-decoration: none;
+    color: var(--black-white);
+    padding: 8rem 16rem;
+  }
+  &__rw {
+    display: grid;
+    grid-template-columns: 160rem repeat(2, 1fr);
+    gap: 38rem;
+    svg {
+      width: 100%;
+    }
+    @media (max-width: $media-md) {
+      grid-template-columns: 1fr;
+      align-items: center;
+      text-align: center;
+      gap: 30rem;
+    }
+  }
+}

sass/common/header.scss

@@ -0,0 +1,176 @@
+@import "../variables/media";
+
+.header {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+
+  @media (max-width: $media-md) {
+    background-color: var(--common-green-primery);
+
+  }
+
+  &__container {
+    padding: 14rem 16rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  }
+
+  &__link a {
+    text-decoration: none;
+    font: var(--nav-link);
+    color: var(--common-white);
+    cursor: pointer;
+    padding: 8rem 16rem;
+    @media (max-width: $media-md) {
+      color: var(--common-black);
+    }
+  }
+
+  &__logo {
+    color: var(--common-white);
+    display: flex;
+    align-items: center;
+    @media (max-width: $media-md) {
+      color: var(--common-green);
+    }
+  }
+
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    @media (max-width: $media-md) {
+      position: absolute;
+      background-color: var(--common-green-primery);
+      top: 50rem;
+      width: 100%;
+      left: -100vw;
+      padding: 0 16rem;
+      overflow: scroll;
+      height: calc(100vh - 55rem);
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      gap: 16rem;
+      z-index: 80;
+      transition: left var(--transition), opacity var(--transition);
+
+      &.is-active {
+        left: 0;
+        opacity: 1;
+      }
+    }
+  }
+
+  &__btn {
+    @media (max-width: $media-md) {
+      margin-left: auto;
+      .button--main {
+        padding: 8rem 12rem;
+        min-width: 107rem;
+      }
+    }
+  }
+
+  &__ul {
+    display: flex;
+    @media (max-width: $media-md) {
+      width: 100%;
+      flex-direction: column;
+      align-items: center;
+      gap: 16rem;
+      padding: 16rem 0;
+      border-top: 1rem solid var(--common-green-border);
+      border-bottom: 1rem solid var(--common-green-border);
+    }
+  }
+
+  &__menu-btn {
+    display: none;
+    @media (max-width: $media-md) {
+      padding: 8rem 0 8rem 8rem;
+      margin-left: 20rem;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__item {
+    text-align: center;
+  }
+
+  &__mobile {
+    display: none;
+    @media (max-width: $media-md) {
+      display: block;
+    }
+  }
+
+  &__app-link {
+    padding-bottom: 30rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16rem 0;
+
+    a {
+      display: block;
+      width: 100%;
+    }
+
+    svg {
+      width: 100%;
+    }
+  }
+
+  &__card {
+    padding: 20rem 0;
+  }
+
+  &__icon-title {
+    color: var(--common-black);
+  }
+
+  &__icon-text {
+    color: var(--common-grey-v2);
+    margin-bottom: 20rem;
+  }
+
+  &__line {
+    background-color: var(--common-line-color);
+    height: 1rem;
+    max-width: 240rem;
+    margin: 0 auto;
+  }
+
+  &--green {
+    animation: header-play 2.2s ease-in-out;
+    background-color: var(--common-green-primery);
+
+    .header {
+      &__logo {
+        transition: color var(--transition);
+        color: var(--common-green);
+      }
+
+      &__link a {
+        transition: color var(--transition);
+        color: var(--common-black);
+      }
+    }
+  }
+}
+
+@keyframes header-play {
+ from{
+    max-height: 0;
+  }
+  to {
+    max-height: 1200rem;
+  }
+}

sass/component/animation.scss

@@ -0,0 +1,62 @@
+@import "../variables/media";
+@media (min-width: $media-md) {
+  .animation {
+    &--right {
+      .animation-item {
+        left: 171rem!important;
+        opacity: 0!important;
+        transition: left var(--transition), opacity var(--transition);
+      }
+
+    }
+    &--right-play {
+      .animation-item {
+        left: 38rem!important;
+        opacity: 1!important;
+        transition: left var(--transition), opacity var(--transition);
+      }
+
+    }
+
+    &--left {
+      .animation-item {
+        right: 171rem!important;
+        opacity: 0!important;
+        transition: right var(--transition), opacity var(--transition);
+      }
+
+    }
+    &--left-play {
+      .animation-item {
+        right: 40rem!important;
+        opacity: 1!important;
+        transition: right var(--transition), opacity var(--transition);
+      }
+
+    }
+
+    &--down {
+      .animation-item {
+        margin-bottom: -271rem!important;
+        opacity: 0!important;
+        transition: margin-bottom var(--transition), opacity var(--transition);
+      }
+
+    }
+    &--down-play {
+      .animation-item {
+        margin-bottom: 0rem!important;
+        opacity: 1!important;
+        transition: margin-bottom var(--transition), opacity var(--transition);
+      }
+
+    }
+    &--play-right-revers {
+    .animation-item {
+            left: 170rem!important;
+            opacity: 1!important;
+            transition: left var(--transition), opacity var(--transition);
+          }
+    }
+  }
+}

sass/component/buttons.scss

@@ -0,0 +1,48 @@
+@import "../variables/media";
+.button {
+  width: fit-content;
+  padding: 12rem 16rem;
+  min-width: 133rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font: var( --nav-link);
+  color: var(--common-white);
+  text-decoration: none;
+  border-radius: var(--border-r-8);
+  transition: background-color var(--transition);
+  gap: 10rem;
+  &:hover {
+    transition: background-color var(--transition);
+    background-color: var(--common-green-hover);
+  }
+  &--main {
+  background-color: var(--common-green);
+  }
+  &--transparent {
+    color: var(--green-button);
+    transition: transform var(--transition);
+    padding: 10rem 0;
+    min-width: fit-content;
+    &:hover {
+      transition: background-color var(--transition);
+      background-color: transparent;
+      transition: transform var(--transition);
+      transform: scale(1.1);
+    }
+  }
+
+  &--card {
+    max-width: 170rem;
+    text-align: left;
+    background-color: var(--common-green-btn-social);
+    font: var(--p-sub);
+    gap: 10rem;
+    padding: 8rem;
+    flex-direction: row-reverse;
+    svg {
+      transform: scaleX(-1);
+    }
+  }
+}

sass/component/header-sub.scss

@@ -0,0 +1,38 @@
+@import "../variables/media";
+
+.hero-sub {
+  background-size: cover;
+  padding: var(--menu-height) 0 124rem;
+  position: relative;
+
+  &:before {
+    content: "";
+    height: 100%;
+    width: 100%;
+    display: block;
+    background: var(--common-green-gradient);
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    z-index: 10;
+    position: relative;
+  }
+
+  &__title {
+    padding: 60rem 0 22rem;
+    z-index: 3;
+    position: relative;
+    @media (max-width: $media-md) {
+      padding: 40rem 0 10rem;
+    }
+  }
+
+  &__description {
+    max-width: 346rem;
+  }
+}

sass/component/icons.scss

@@ -0,0 +1,9 @@
+.icon-green {
+  background-color: var(--common-green);
+  color: var(--common-white);
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  padding: 8rem;
+  border-radius: 8rem;
+}

sass/component/lang-switcher.scss

@@ -0,0 +1,51 @@
+@import "../variables/media";
+
+.lang-menu{
+  position: relative;
+  color: var(--black-white);
+  cursor: pointer;
+ input {
+   display: none;
+ }
+  &__label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    gap: 5rem;
+  }
+  &__link {
+    color: var(--black-white);
+    text-decoration: none;
+  }
+  &__menu {
+    display: none;
+    position: absolute;
+    background-color: var(--white-black);
+    bottom: 30rem;
+    right: 0;
+    z-index: 100;
+    color: var(--black-white);
+    padding: 10rem;
+    border-radius: 3rem;
+    flex-direction: column;
+    gap: 16rem;
+    grid-template-columns: repeat(3, 1fr);
+    overflow: scroll;
+    @media (max-width: $media-md) {
+       width: 100vw;
+       right: auto;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  &__trigger {
+    &:checked ~ .lang-menu__menu {
+      display: grid;
+    }
+  }
+  &__trigger {
+    &:checked ~ .lang-menu__label .lang-menu__arrow {
+      transform: scaleY(-1);
+    }
+  }
+}

sass/component/switch-theme.scss

@@ -0,0 +1,23 @@
+.switch-theme {
+  background-color: var(--body-bg);
+  width: 70rem;
+  height: 30rem;
+  padding: 3rem;
+  border-radius: 70rem;
+  position: relative;
+  cursor: pointer;
+  &.is-active{
+    .switch-theme__toggle {
+     right: 42rem;
+    }
+  }
+   &__toggle {
+     position: absolute;
+     top: 3rem;
+     right: 3rem;
+     width: 23rem;
+     height: 23rem;
+     border-radius: 50rem;
+     background-color: var(--common-green);
+   }
+}

sass/global/index.scss

@@ -0,0 +1,28 @@
+@import "../variables/media";
+
+html {
+  font-size: 1px;
+}
+
+body {
+  font: var(--p);
+  color: var(--black-white);
+  background-color: var(--body-bg);
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 16rem;
+  max-width: var(--container);
+}
+
+.logo .svg-logo {
+  @media(max-width: $media-md) {
+max-width: 130rem;
+  }
+}
+
+.frizz {
+overflow: hidden;
+}

sass/global/reset.scss

@@ -0,0 +1,14 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.wrapper {
+  overflow: hidden;
+}
+ul { list-style: none;
+}
+button {
+  outline: none;
+  border: none;
+}

sass/main.scss

@@ -1,238 +1,29 @@
-@import "./language_selector";
-@import "./top_menu";
+/// Variables ///
+@import "./variables/media";
+@import "./variables/color-theme";
+@import "./variables/fonts";
+@import "./variables/spasing";
+@import "./variables/images";
 
-body {
-  margin: 1rem;
-  padding: 0;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "segoe ui",
-    Helvetica,
-    Arial,
-    sans-serif,
-    "apple color emoji",
-    "segoe ui emoji",
-    "segoe ui symbol";
-  font-size: 16px;
-  line-height: 1.5;
-  word-wrap: break-word;
-}
+/// Global Style ///
+@import "./global/reset";
+@import "./global";
 
-code,
-a {
-  // Prevents horizontal scrolling in Safari on narrow screen for long links and code lines.
-  word-wrap: anywhere;
-}
+// Common Style
+@import "./common/header";
+@import "./common/footer";
+@import "./common/bred-crum";
 
-header {
-  text-align: center;
-}
+// Component Style
+@import "./component/lang-switcher";
+@import "./component/buttons";
+@import "./component/switch-theme";
+@import "./component/animation";
+@import "./component/header-sub";
+@import "./component/icons";
 
-main {
-  margin: 0 auto;
-  max-width: 1080px;
-  width: 100%;
-}
+// Pages Style
+@import "./pages/home";
+@import "./pages/community";
 
-img {
-  max-width: 90%;
-}
 
-img[alt="logo"] {
-  width: 60px;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-strong {
-  font-weight: 600;
-}
-
-.badge {
-  img {
-    width: 180px;
-  }
-}
-
-.donate_buttons {
-  form,
-  input {
-    display: inline;
-    border-width: 0;
-  }
-
-  img,
-  input[type="image"] {
-    height: 48px;
-    width: 48px;
-    padding: 2px;
-    background-color: white;
-    border-radius: 10px;
-  }
-}
-
-#screenshots img {
-  max-width: 400px;
-}
-
-.screenshot {
-  max-width: 400px;
-  width: 100%;
-}
-
-hr {
-  height: 2px;
-  margin: 7px;
-  background: gray;
-  border: 0;
-}
-
-h1,
-h2,
-h3 {
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid #eaecef;
-  margin-top: 24px;
-  margin-bottom: 16px;
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-p {
-  margin: 0 0 16px;
-}
-
-footer {
-  padding-top: 1rem;
-  border-top: 1px solid #eaecef;
-  text-align: center;
-
-  p {
-    font-size: small;
-  }
-}
-
-@media (width <= 768px) {
-  #badges {
-    flex-direction: column;
-  }
-
-  #badges a {
-    margin: 20px auto;
-  }
-
-  .news_content_image {
-    flex-wrap: wrap;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #121212;
-    color: #bbb;
-  }
-
-  h1,
-  h2,
-  h3 {
-    border-bottom: 1px solid #555;
-  }
-
-  footer {
-    border-top: 1px solid #555;
-  }
-
-  a {
-    color: lightblue;
-  }
-
-  a:visited {
-    color: #f9f;
-  }
-
-  :root {
-    scrollbar-color: #333 #000;
-  }
-}
-
-.installPWAButton {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-#bottom-menu {
-  margin-bottom: 1em;
-
-  a {
-    text-decoration: none;
-  }
-}
-
-.menuitem_selected {
-  text-decoration: none;
-  border: red 2px solid;
-  border-radius: 1rem;
-  padding: 0.3rem 0.5rem;
-  margin: 0;
-}
-
-#crypto-table + table {
-  font-size: smaller;
-  display: block;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.news_date {
-  display: flex;
-  flex-basis: 100%;
-  align-items: center;
-  margin: 1rem 0;
-
-  &::before,
-  &::after {
-    content: "";
-    flex-grow: 1;
-    background-color: gray;
-    height: 1px;
-    font-size: 0;
-    line-height: 0px;
-    margin: 0;
-  }
-}
-
-.news_content_image {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.news_image {
-  max-height: 520px;
-  max-width: 300px;
-  margin-left: 0.5rem;
-  display: inline-block;
-  vertical-align: top;
-  width: auto;
-}
-
-.news_image_landscape {
-  max-height: 520px;
-  max-width: 500px;
-  margin-left: 0.5rem;
-  display: inline-block;
-  vertical-align: top;
-  width: auto;
-}
-
-.news_content {
-  display: inline-block;
-}
-
-.back_to_news {
-  margin-top: 1rem;
-}

sass/pages/community.scss

@@ -0,0 +1,153 @@
+@import "../variables/media";
+
+.section-community {
+  padding: var(--container-mob-section) 0;
+
+  &__container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 84rem 34rem;
+    @media (max-width: $media-md) {
+      grid-template-columns: 1fr;
+      gap: 30rem 34rem;
+    }
+  }
+
+  &__img-row {
+    position: relative;
+  }
+
+  &__icon {
+    position: absolute;
+    bottom: -5rem;
+    right: 27rem;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  &__img {
+    max-width: 370rem;
+    @media (max-width: $media-md) {
+      max-width: 100%;
+    }
+  }
+
+  &__title {
+    padding: 20rem 0 0;
+  }
+
+  &__description {
+    text-align: center;
+  }
+
+  &__line {
+    height: 1rem;
+    background-color: var(--green-button);
+    width: 275rem;
+    margin: 10rem 0;
+  }
+}
+
+.section-social {
+  margin-bottom: var(--container-mob-section);
+
+  &__row {
+    display: flex;
+    justify-content: center;
+    gap: 22rem;
+    @media (max-width: $media-md) {
+      gap: 6rem;
+    }
+  }
+
+  &__title {
+    color: var(--black-white);
+    text-align: center;
+    margin-bottom: 24rem;
+    @media (max-width: $media-md) {
+      margin-bottom: 20rem;
+    }
+  }
+
+  &__item {
+    width: 59px;
+    height: 59px;
+    border: 2rem solid var(--black-white);
+    padding: 13rem;
+    border-radius: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      color: var(--black-white);
+    }
+
+    a {
+      display: flex;
+    }
+
+    @media (max-width: $media-md) {
+      width: 23px;
+      height: 23px;
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+}
+
+.donate {
+  background-color: var(--bg-green);
+  padding: 77rem 0;
+  margin: 0 var(--container-mob-section) var(--container-mob-section);
+  border-radius: var(--border-r-24);
+  @media (max-width: $media-md) {
+    padding: 20rem 0;
+    margin: 0 14rem 50rem;
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 30rem;
+    @media (max-width: $media-md) {
+      flex-direction: column-reverse;
+      text-align: center;
+    }
+  }
+
+  &__line {
+    background-color: var(--green-button);
+    width: 120rem;
+    height: 1rem;
+    margin: 20rem 0;
+  }
+
+  &__content {
+    max-width: 351rem;
+     @media (max-width: $media-md) {
+     display: flex;
+       flex-direction: column;
+       align-items: center;
+    }
+  }
+
+  &__description {
+    margin-bottom: 30rem;
+    color: var(--black-white);
+  }
+
+  &__img {
+    svg {
+      color: var(--green-button);
+    }
+  }
+}

sass/pages/home.scss

@@ -0,0 +1,369 @@
+@import "../variables/media";
+
+// Hero Section
+.hero {
+  background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat fixed;
+  min-height: 100vh;
+  padding: 80rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  @media (max-width: $media-md) {
+    background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat cover;
+    min-height: auto;
+    padding: 120rem 0 51rem;
+  }
+
+  &__container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    @media (max-width: $media-md) {
+     flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  &__content {
+    max-width: 494rem;
+    z-index: 10;
+    @media (max-width: $media-md) {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+margin-bottom: 35rem;
+    }
+  }
+
+  &__title {
+    margin-bottom: var(--mb-16);
+  }
+
+  &__description {
+    margin-bottom: var(--mb-40);
+  }
+
+  &__image {
+    position: absolute;
+    top: 50%;
+    right: -20rem;
+    transform: translateY(-50%);
+    @media (max-width: $media-md) {
+      position: static;
+      transform: none;
+      width: 100%;
+    }
+  }
+}
+
+// Section MAP
+.open-map {
+  background: var(--map-section-bg) center center / contain no-repeat;
+  display: flex;
+  margin: 30rem 0;
+  align-items: center;
+  justify-content: center;
+  min-height: 660rem;
+  @media (max-width: $media-md) {
+    min-height: auto;
+    padding: 40rem 0;
+    margin: 0;
+  }
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    @media (max-width: $media-md) {
+      max-width: 150rem;
+    }
+  }
+  &__img {
+    background: var(--map-section-icon) center center / cover no-repeat;
+    width: 144rem;
+    height: 144rem;
+    margin-bottom: var(--mb-16);
+    @media (max-width: $media-md) {
+      max-width: 120rem;
+      max-height: 120rem;
+    }
+  }
+  &__title {
+    margin-bottom: var(--mb-16);
+  }
+  &__icon {
+    position: absolute;
+    left: calc(50% - 25rem);
+    top: calc(50% - 25rem);
+    @media (max-width: $media-md) {
+      border: var(--icon-border) solid var(--icon-border-green);
+      border-radius: 100rem;
+    }
+    &:nth-child(1) {
+      width: 96rem;
+      left: calc(50% + 175rem);
+      top: calc(50% - 85rem);
+      @media (max-width: $media-md) {
+        width: calc(30rem + var(--icon-border));
+        left: calc(50% - -95rem);
+        top: calc(50% - 59rem);
+      }
+    }
+    &:nth-child(2) {
+      width: 72rem;
+      left: calc(50% + 285rem);
+      top: calc(50% - -45rem);
+      @media (max-width: $media-md) {
+        width: calc(22rem + var(--icon-border));
+        left: calc(50% - -135rem);
+        top: calc(50% - 6rem);
+      }
+    }
+    &:nth-child(3) {
+      width: 96rem;
+      left: calc(50% - 395rem);
+      top: calc(50% + -86rem);
+      @media (max-width: $media-md) {
+        width: calc(30rem + var(--icon-border));
+        left: calc(50% - 125rem);
+        top: calc(50% - 59rem);
+      }
+    }
+    &:nth-child(4) {
+      width: 72rem;
+      left: calc(50% - 355rem);
+      top: calc(50% - -74rem);
+      @media (max-width: $media-md) {
+        width: calc(22rem + var(--icon-border));
+        left: calc(50% - 165rem);
+        top: calc(50% + -6rem);
+      }
+    }
+    &:nth-child(5) {
+      width: 80rem;
+      left: calc(50% - -375rem);
+      top: calc(50% + 153rem);
+      @media (max-width: $media-md) {
+        width: calc(25rem + var(--icon-border));
+        left: calc(50% - -89rem);
+        top: calc(50% + 43rem);
+
+      }
+    }
+    &:nth-child(6) {
+      width: 64rem;
+      left: calc(50% + 305rem);
+      top: calc(50% + -217rem);
+      @media (max-width: $media-md) {
+        width: calc(20rem + var(--icon-border));
+        left: calc(50% + 136rem);
+        top: calc(50% - 105rem);
+      }
+    }
+    &:nth-child(7) {
+      width: 80rem;
+      left: calc(50% + -275rem);
+      top: calc(50% + 223rem);
+      @media (max-width: $media-md) {
+        width: calc(25rem + var(--icon-border));
+        left: calc(50% - 117rem);
+        top: calc(50% - -43rem);
+      }
+    }
+    &:nth-child(8) {
+      width: 64rem;
+      left: calc(50% - 195rem);
+      top: calc(50% + -227rem);
+      @media (max-width: $media-md) {
+       width: calc(20rem + var(--icon-border));
+        left: calc(50% - 165rem);
+        top: calc(50% - 104rem);
+
+      }
+    }
+  }
+}
+
+// Services
+.services {
+  &__btn {
+    @media (max-width: $media-md) {
+      margin: 0 auto;
+    }
+  }
+  &__container {
+    padding: 50rem 40rem;
+    border-radius: var(--border-r-24);
+    background-color: var(--bg-green);
+    @media (max-width: $media-md) {
+      padding: var( --container-mob-section) var( --container-mob-padding);
+      border-radius: 0;
+    }
+  }
+  &__item {
+    display: flex;
+    align-items: center;
+    padding-bottom: 60rem;
+    gap: 50rem;
+    margin-right: -50rem;
+    @media (max-width: $media-md) {
+      flex-direction: column-reverse;
+      margin-right: 0;
+      gap: 40rem;
+      text-align: center;
+      padding-bottom: 120rem;
+    }
+    &:nth-child(2n) {
+      flex-direction: row-reverse;
+      margin-right: auto;
+      margin-left: -50rem;
+      .services__card {
+      justify-content: flex-start;
+
+      }
+      .services__img--first  {
+        left: auto;
+        right: 0;
+      }
+      @media (max-width: $media-md) {
+        flex-direction: column-reverse;
+        margin-left: 0;
+        .services__card {
+          justify-content: center;
+        }
+      }
+    }
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+  }
+  &__content {
+    max-width: 498rem;
+  }
+  &__title {
+    max-width: 367rem;
+  }
+  &__description {
+    margin: 24rem 0;
+  }
+
+  &__card {
+    position: relative;
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+    overflow: hidden;
+    &--start {
+      justify-content: flex-start;
+    }
+    @media (max-width: $media-md) {
+      width: 100%;
+    display: flex;
+      align-items: center;
+      flex-direction: row-reverse;
+      justify-content: center;
+    }
+  }
+  &__button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+  }
+  &__img {
+    padding: 20rem;
+    z-index: 3;
+    max-width: 310rem;
+
+    @media (max-width: $media-md) {
+      max-width: 140rem;
+      max-height: 240rem;
+      padding: 0;
+    }
+    &--first {
+      object-fit: cover;
+      z-index: 1;
+      max-width: 324rem;
+      max-height: 374rem;
+      position: absolute;
+      top: 50%;
+      left: -19rem;
+      transform: translateY(-50%);
+      @media (max-width: $media-md) {
+        position: static;
+        transform: none;
+        max-width: 190rem;
+        max-height: 190rem;
+        margin-left: -60rem;
+      }
+    }
+  }
+}
+
+// Singl
+.single-section {
+margin: 60rem 0;
+  overflow: hidden;
+  @media (max-width: $media-md) {
+    padding: var( --container-mob-section) 0;
+    margin:0;
+  }
+  &__container {
+    padding: 0rem 40rem 0;
+    border-radius: var(--border-r-24);
+    background-color: var(--bg-green);
+    @media (max-width: $media-md) {
+      padding: var(--container-mob-section) var(--container-mob-padding) 0;
+    }
+  }
+  &__item {
+    display: flex;
+    align-items: flex-end;
+    gap: 50rem;
+    @media (max-width: $media-md) {
+      gap: 20rem;
+      flex-direction: column;
+    }
+  }
+  &__content {
+    max-width: 498rem;
+    padding: 90rem 0;
+    @media (max-width: $media-md) {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+  &__title {
+    max-width: 357rem;
+  }
+  &__description {
+    margin: 24rem 0;
+  }
+  &__card {
+    position: relative;
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+    overflow: hidden;
+    @media (max-width: $media-md) {
+      justify-content: center;
+    }
+  }
+
+  &__img {
+    padding: 0;
+    z-index: 3;
+    width: 100%;
+  }
+}

sass/variables/color-theme.scss

@@ -0,0 +1,40 @@
+// Common COLOR
+:root {
+  --common-black: #000D07;
+  --common-white: #ffffff;
+  --common-green: #006C35;
+  --common-green-primery: #CCE1D7;
+  --common-green-btn: #006031;
+  --common-green-hover: #2b6445;
+  --common-grey: #D9DBDA;
+  --common-grey-v2: #5A5A5A;
+  --common-green-border: #99C4AF;
+  --common-line-color: #AEC5BA;
+  --common-black-sub: #26312C;
+  --common-green-btn-social: #33895E;
+
+  --common-green-gradient: linear-gradient(90deg, #006C35 0%, rgba(0, 96, 49, 0.00) 100%);
+}
+
+// Theme COLOR change
+.light {
+  --body-bg: var(--common-white);
+  --white-black: var(--common-white);
+  --black-white: var(--common-black);
+  --green-theme: #006031;
+  --bg-green: #E5F0EB;
+  --footer-bg: #F5F5F5;
+  --green-button: var(--common-green);
+  --icon-border-green: #66A686;
+}
+
+.dark {
+  --body-bg: #2C2C2C;
+  --white-black: var(--common-black);
+  --black-white: var(--common-white);
+  --green-theme: var(--common-green);
+  --bg-green: #33453D;
+  --footer-bg: var(--common-black);
+  --green-button: #BBD7A7;
+  --icon-border-green: var(--common-white);
+}

sass/variables/fonts.scss

@@ -0,0 +1,104 @@
+//font-family: 'Inter', sans-serif;
+//font-family: 'Lato', sans-serif;
+@import "../variables/media";
+:root {
+  --main-font: 'Inter', sans-serif;
+  --sub-fonst: 'Lato', sans-serif;
+
+  --h1: 300 48rem/60rem var(--sub-fonst);
+  --h1-inter: 700 36rem/46rem var(--main-font);
+  --h1-sub: 400 24rem/32rem var(--main-font);
+  --h1-sub_v2: 300 24rem/32rem var(--main-font);
+  --h3-boold: 700 24rem/32rem var(--main-font);
+  --h4: 500 18rem/28rem var(--main-font);
+  --h5: 500 20rem/28rem var(--main-font);
+  --h6: 500 30rem/36rem 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);
+  --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);
+}
+
+@media (max-width: $media-md) {
+  :root {
+
+    --h1: 300 36rem/normal var(--sub-fonst);
+    --h1-sub: 400 18rem/32rem 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);
+    --p-sm-light: 300 14rem/28rem var(--main-font);
+    --p-sub: 300 12rem/15rem var(--main-font);
+    --nav-link: 500 13rem/24rem var(--main-font);
+
+    --h1-inter: 500 24rem/36rem var(--main-font);
+  }
+}
+
+// Title
+.h1{
+  font: var(--h1);
+  color: var(--common-white);
+}
+.h1-inter {
+  font: var( --h1-inter);
+}
+.h1-sub {
+  font: var(--h1-sub);
+  color: var(--common-white);
+}
+.h2{
+  font: var(--h1);
+  color: var(--black-white);
+}
+.h2-sub{
+  font: var(--h1-sub);
+  color: var(--black-white);
+}
+.h2-sub_v2{
+  font: var(--h1-sub_v2);
+  color: var(--common-white);
+}
+
+.h3-bold {
+  font: var( --h3-boold);
+  color: var(--common-black);
+}
+.h4 {
+  font: var(--h4);
+}
+
+.h5 {
+  font: var(--h5);
+  color: var(--black-white);
+}
+.h6 {
+  font: var(--h6);
+}
+// Text
+.p{
+  font: var(--p);
+}
+.p-md {
+  font: var(--p-md);
+}
+.p-sm {
+  font: var(--p-sm);
+}
+.p-sm-light {
+  font: var(--p-sm-light);
+}
+.p-card {
+  font: var(--p-card);
+}
+.nav-link{
+ font: var(--nav-link);
+}
+.nav-bred {
+  font: var(--nav-bred);
+  color: var(--common-white);
+}
+

sass/variables/images.scss

@@ -0,0 +1,12 @@
+:root {
+  --map-section-icon: url('/images/open-map/open-map-logo.png');
+
+}
+
+.light {
+  --map-section-bg: url('/images/open-map/map-bg.png');
+}
+
+.dark {
+  --map-section-bg: url('/images/open-map/map-bg-dark.png');
+}

sass/variables/media.scss

@@ -0,0 +1,3 @@
+// Media sm: Mobile, md: Tablet, xl: Desktop
+$media-md: 991px;
+

sass/variables/spasing.scss

@@ -0,0 +1,18 @@
+:root {
+  --container: 1100rem;
+
+  --mb-16: 16rem;
+  --mb-40: 40rem;
+
+  --border-r-8: 8rem;
+  --border-r-24: 24rem;
+
+  --transition: 0.5s;
+
+  --icon-border: 2rem;
+
+  --container-mob-section: 60rem;
+  --container-mob-padding: 16rem;
+
+  --menu-height: 55rem;
+}

static/images/arrow-link.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2929 4.29289C13.6834 3.90237 14.3166 3.90237 14.7071 4.29289L21.7071 11.2929C21.8946 11.4804 22 11.7348 22 12C22 12.2652 21.8946 12.5196 21.7071 12.7071L14.7071 19.7071C14.3166 20.0976 13.6834 20.0976 13.2929 19.7071C12.9024 19.3166 12.9024 18.6834 13.2929 18.2929L18.5858 13L3 13C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11L18.5858 11L13.2929 5.70711C12.9024 5.31658 12.9024 4.68342 13.2929 4.29289Z" fill="#006031"/>
+</svg>

templates/base.html

@@ -1,7 +1,7 @@
 {%- if page %}
-{%- set resource = page %}
+    {%- set resource = page %}
 {%- elif section %}
-{%- set resource = section %}
+    {%- set resource = section %}
 {%- endif %}
 
 <!DOCTYPE html>
@@ -9,78 +9,108 @@
 <html lang="{{ lang }}" {%- if lang in rtl_langs -%} dir="rtl" {%- endif -%}>
 
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="robots" content="noindex">
+    <!--  <script>-->
+    <!--    var password = "tutorial";-->
+    <!--    (function passcodeprotect() {-->
+    <!--      var passcode = prompt("Enter PassCode");-->
+    <!--      while (passcode !== admin) {-->
+    <!--        alert("Incorrect PassCode");-->
+    <!--        return passcodeprotect();-->
+    <!--      }-->
+    <!--    }());-->
+    <!--    alert('Welcome To The TP..!');-->
+    <!--  </script>-->
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 
-  <meta name="description" content="{{ resource.description }}">
+    <meta name="description" content="{{ resource.description }}">
 
-  {% block rss %}
-  <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml", trailing_slash=false) }}">
-  {% endblock %}
+    <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"
+          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"
+          rel="stylesheet">
 
-  <link rel="canonical" href="{{ config.base_url | safe }}{{ resource.path | safe }}">
+    {% block rss %}
+        <link rel="alternate" type="application/rss+xml" title="RSS"
+              href="{{ get_url(path="rss.xml", trailing_slash=false) }}">
+    {% endblock %}
 
-  {%- set preview_image = 'images/screenshots/prague.jpg' -%}
-  {%- if resource.extra.preview_image -%}
-  {%- set preview_image = resource.extra.preview_image -%}
-  {%- elif resource.assets %}
-  {%- set basename = resource.assets[0] | split(pat='/') | last %}
-  {%- if basename is ending_with('.jpg') or basename is ending_with('.jpeg') or basename is ending_with('.png') or basename is ending_with('.webp') %}
-  {%- set preview_image = resource.path ~ basename -%}
-  {%- endif %}
-  {%- endif %}
-  <meta property="og:image" content="{{ get_url(path=preview_image) }}">
-  <meta property="og:url" content="{{ current_url | safe }}">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="{{ resource.title }}">
-  {%- if resource.description -%}
-  <meta property="og:description" content="{{ resource.description }}">
-  {%- endif -%}
+    <link rel="canonical" href="{{ config.base_url | safe }}{{ resource.path | safe }}">
 
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="{{ resource.title }}">
-  {%- if resource.description -%}
-  <meta name="twitter:description" content="{{ resource.description }}">
-  {%- endif -%}
+    {%- set preview_image = 'images/screenshots/prague.jpg' -%}
+    {%- if resource.extra.preview_image -%}
+        {%- set preview_image = resource.extra.preview_image -%}
+    {%- elif resource.assets %}
+        {%- set basename = resource.assets[0] | split(pat='/') | last %}
+        {%- if basename is ending_with('.jpg') or basename is ending_with('.jpeg') or basename is ending_with('.png') or basename is ending_with('.webp') %}
+            {%- set preview_image = resource.path ~ basename -%}
+        {%- endif %}
+    {%- endif %}
+    <meta property="og:image" content="{{ get_url(path=preview_image) }}">
+    <meta property="og:url" content="{{ current_url | safe }}">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="{{ resource.title }}">
+    {%- if resource.description -%}
+        <meta property="og:description" content="{{ resource.description }}">
+    {%- endif -%}
 
-  <meta name="apple-itunes-app" content="app-id=1567437057">
-  <meta name="wikidata" content="Q107078602">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="{{ resource.title }}">
+    {%- if resource.description -%}
+        <meta name="twitter:description" content="{{ resource.description }}">
+    {%- endif -%}
 
-  {% if resource.date -%}
-  <meta property="article:published_time" content="{{ resource.date }}">
-  {%- endif -%}
+    <meta name="apple-itunes-app" content="app-id=1567437057">
+    <meta name="wikidata" content="Q107078602">
 
-  <meta name="generator" content="Zola">
+    {% if resource.date -%}
+        <meta property="article:published_time" content="{{ resource.date }}">
+    {%- endif -%}
 
-  {%- block meta -%}{%- endblock %}
+    <meta name="generator" content="Zola">
 
-  <link href="{{ get_url(path="main.css", cachebust=true) }}" rel="stylesheet" type="text/css">
+    {%- block meta -%}{%- endblock %}
 
-  <title>{{ resource.title }}</title>
+    <link href="{{ get_url(path="main.css", cachebust=true) }}" rel="stylesheet" type="text/css">
 
-  {%- if lang == config.default_language %}
-  {% include 'language_redirect.html' %}
-  {% endif -%}
+    <title>{{ resource.title }}</title>
+
+    {%- if lang == config.default_language %}
+        {% include 'components/language_redirect.html' %}
+    {% endif -%}
+
+    <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&family=Lato:wght@300&display=swap"
+          rel="stylesheet">
 </head>
 
-<body>
-  <header>
-    {% include 'top_menu.html' %}
-  </header>
+<body class="light">
+<div class="wrapper">
+    <header class="header">
+        {% include 'common/header.html' %}
+    </header>
 
-  <main>
-    {% block content %}{% endblock %}
-  </main>
+    <main class="main">
+        {% block content %}{% endblock %}
+    </main>
 
-  <footer>
-    {% include 'bottom_menu.html' %}
-    <p>
-      <span>© 2023 <a href="mailto:legal@organicmaps.app">Organic Maps OÜ</a>, reg. code 16225385</span>
-      <span>Harju maakond, Tallinn, Kesklinna linnaosa, Rävala pst 8-810, 10143, Estonia</span>
-    </p>
-  </footer>
+    <footer class="footer">
+        {% include 'common/footer.html' %}
+    </footer>
+</div>
 
+{% include 'shortcodes/switch-theme.html' %}
+{% include 'shortcodes/header-switch.html' %}
+{% include 'shortcodes/animation-section-js.html' %}
+{% include 'shortcodes/paralax.html' %}
 </body>
 
 </html>

templates/bottom_menu.html

@@ -1,23 +0,0 @@
-{% set home = get_section(path='_index.md') %}
-{% set news = get_section(path='news/_index.md') %}
-
-<nav id="bottom-menu" role="navigation">
-  {% for page in [home, news] | concat(with=home.pages) %}
-  {% set translated = page.translations | filter(attribute='lang', value=lang) | first %}
-  {% if translated %}
-    {% if "_index" in translated.path %}
-      {% set page = get_section(path=translated.path) %}
-    {% else %}
-      {% set page = get_page(path=translated.path) %}
-    {% endif %}
-  {% endif %}
-
-  {% if page.extra.menu_title %}
-  {% if resource.path != page.path %}<a href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% endif %}
-    <span>{{ page.extra.menu_title }}</span>
-    {%- if resource.path != page.path %}</a>{% endif %}
-  &nbsp;
-  {% endif %}
-  {% endfor %}
-  <a href="mailto:hello@organicmaps.app">{{ trans(key='contact', lang=lang) }}</a>
-</nav>

templates/common/footer.html

@@ -0,0 +1,56 @@
+{% set home = get_section(path='_index.md') %}
+{% set news = get_section(path='news/_index.md') %}
+
+{% set langPathPrefix = '' %}
+{% if lang != config.default_language %}
+{% set langPathPrefix = '/' ~ lang %}
+{% endif %}
+
+
+<div class="container footer__container">
+  <div class="footer__rw">
+    <a class="footer__logo logo" href="{{ langPathPrefix | safe }}/">{% include 'ui/logo.html' %}</a>
+    <div class="footer__text">
+      <p class="p-md footer__description">© 2023 Organic Maps OÜ</p>
+      <p class="p-md footer__description">reg. code 16225385 </p>
+    </div>
+    <div class="footer__text">
+      <p class="p-md footer__description">Harju maakond, Tallinn, Kesklinna </p>
+      <p class="p-md footer__description">linnaosa, Rävala pst 8-810, 10143, Estoni</p>
+    </div>
+  </div>
+  <div class="footer__item">
+    <div class="footer__nav">
+      <nav class="footer__nav-item" id="bottom-menu" role="navigation">
+        {% for page in [home, news] | concat(with=home.pages) %}
+        {% set translated = page.translations | filter(attribute='lang', value=lang) | first %}
+        {% if translated %}
+        {% if "_index" in translated.path %}
+        {% set page = get_section(path=translated.path) %}
+        {% else %}
+        {% set page = get_page(path=translated.path) %}
+        {% endif %}
+        {% endif %}
+
+        {% if page.extra.menu_title %}
+        {% if resource.path != page.path %}<a class="p-sm footer__link" href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% endif %}
+        <span class="p-sm footer__link">{{ page.extra.menu_title }}</span>
+        {%- if resource.path != page.path %}</a>{% endif %}
+        &nbsp;
+        {% endif %}
+        {% endfor %}
+        <a class="p-sm footer__link" href="mailto:hello@organicmaps.app">{{ trans(key='contact', lang=lang) }}</a>
+      </nav>
+      <div class="switch-theme">
+        <div class="switch-theme__toggle"></div>
+      </div>
+      <div class="footer__lang">
+        {% include 'components/language_selector.html' %}
+      </div>
+    </div>
+
+
+  </div>
+</div>
+
+

templates/common/header.html

@@ -0,0 +1,86 @@
+{% set langPathPrefix = '' %}
+{% if lang != config.default_language %}
+{% set langPathPrefix = '/' ~ lang %}
+{% endif %}
+<div class="container header__container" id="menu" role="navigation">
+      <a class="header__logo logo" href="{{ langPathPrefix | safe }}/">{% include 'ui/logo.html' %}</a>
+      <div class="header__row">
+          <ul class="header__ul">
+          {% for page in [
+            get_section(path="news/_index.md"),
+            get_page(path="donate/index.md"),
+            get_page(path="support-us/index.md")
+          ] %}
+          {% set translated = page.translations | filter(attribute='lang', value=lang) | first %}
+          {% if translated %}
+            {% if "_index" in translated.path %}
+              {% set page = get_section(path=translated.path) %}
+            {% else %}
+              {% set page = get_page(path=translated.path) %}
+            {% endif %}
+          {% endif %}
+          <li class="header__nav header__{{ page.path | split(pat="/") | reverse | nth(n=1) }} header__link{% if page.path != resource.path %}">
+            <a href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% else %}_active">{% endif %}
+              {{ page.extra.menu_title }}
+              {%- if page.path != resource.path %}</a>
+          {% endif %}
+          </li>
+          {% endfor %}
+          </ul>
+          <div class="header__mobile">
+
+            <div class="header__item">
+                <h3 class="h3-bold header__h3">Get Involved</h3>
+                <div class="header__card">
+                    {% include 'ui/icons/header/donate.html' %}
+                    <h5 class="h4 header__icon-title">
+                        Donate
+                    </h5>
+                    <p class="p-sm-light header__icon-text">
+                        The app runs on your donations, help improve it
+                    </p>
+                  <div class="header__line"></div>
+                </div>
+                <div class="header__card">
+                    {% include 'ui/icons/header/code.html' %}
+                    <h5 class="h4 header__icon-title">
+                        Contribute Code
+                    </h5>
+                    <p class="p-sm-light header__icon-text">
+                        Build the app used by people around the world
+                    </p>
+                    <div class="header__line"></div>
+                </div>
+                <div class="header__card">
+                    {% include 'ui/icons/header/location.html' %}
+                    <h5 class="h4 header__icon-title">
+                        Contribute Location Info
+                    </h5>
+                    <p class="p-sm-light header__icon-text">
+                        Add info around you, and make the product
+                        better for everyone
+                    </p>
+                    <div class="header__line"></div>
+                </div>
+                <h3 class="h3-bold header__h3">Freedom Awaits</h3>
+                <p class="p-sm-light header__icon-text">
+                    Download now
+                </p>
+                <div class="header__app-link">
+                    {% include 'ui/icons/apps/google-play.html' %}
+                    {% include 'ui/icons/apps/app-store.html' %}
+                    {% include 'ui/icons/apps/f-droid.html' %}
+                    {% include 'ui/icons/apps/app-galery.html' %}
+                </div>
+            </div>
+          </div>
+        </div>
+        <div class="header__btn">
+            {% include 'components/download-button.html' %}
+        </div>
+         <div class="header__menu-btn">
+             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                 <path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM3 18C3 17.4477 3.44772 17 4 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H4C3.44772 19 3 18.5523 3 18Z" fill="#26312C"/>
+             </svg>
+         </div>
+</div>

templates/community.html

@@ -0,0 +1,171 @@
+{% extends "base.html" %}
+
+
+
+{%- block content %}
+
+    <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.menu_title | lower }}">{{ page.extra.menu_title }}</a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="hero-sub__content">
+                <h1 class="h1 hero-sub__title">
+                    {{ page.extra.menu_title }}
+                </h1>
+                <p class="h2-sub_v2 hero-sub__description">
+                    {{ page.extra.community_hero_description }}
+                </p>
+
+            </div>
+        </div>
+    </section>
+
+
+    <section class="section-community">
+        <div class="container section-community__container">
+            <div class="section-community__item">
+                <div class="section-community__img-row">
+                    <div class="icon-green section-community__icon">
+                        {% include 'ui/icons/community/icon-01.html' %}
+                    </div>
+                    <img class="section-community__img" src="/images/community/discussion-card-banner.png" alt="img">
+                </div>
+                <h2 class="h5 section-community__title">
+                    {{ page.extra.community_card_title_1 | safe }}
+                </h2>
+                <div class="section-community__line"></div>
+                <p class="p-card  section-community__description">
+                    {{ page.extra.community_card_description_1 | safe }}
+                </p>
+            </div>
+
+            <div class="section-community__item">
+                 <div class="section-community__img-row">
+                    <div class="icon-green section-community__icon">
+                        {% include 'ui/icons/community/icon-02.html' %}
+                    </div>
+                   <img class="section-community__img" src="/images/community/contribute-code-banner.png" alt="img">
+                </div>
+                <h2 class="h5 section-community__title">
+                    {{ page.extra.community_card_title_2 | safe }}
+                </h2>
+                <div class="section-community__line"></div>
+                <p class="p-card  section-community__description">
+                    {{ page.extra.community_card_description_2 | safe }}
+                </p>
+            </div>
+
+            <div class="section-community__item">
+
+                 <div class="section-community__img-row">
+                    <div class="icon-green section-community__icon">
+                        {% include 'ui/icons/community/icon-03.html' %}
+                    </div>
+                   <img class="section-community__img" src="/images/community/location-info-banner.png" alt="img">
+                </div>
+                <h2 class="h5 section-community__title">
+                    {{ page.extra.community_card_title_3 | safe }}
+                </h2>
+                <div class="section-community__line"></div>
+                <p class="p-card  section-community__description">
+                    {{ page.extra.community_card_description_3 | safe }}
+                </p>
+            </div>
+            <div class="section-community__item">
+
+                <div class="section-community__img-row">
+                    <div class="icon-green section-community__icon">
+                        {% include 'ui/icons/community/icon-04.html' %}
+                    </div>
+                  <img class="section-community__img" src="/images/community/provide-support-banner.png" alt="img">
+                </div>
+                <h2 class="h5 section-community__title">
+                    {{ page.extra.community_card_title_4 | safe }}
+                </h2>
+                <div class="section-community__line"></div>
+                <p class="p-card  section-community__description">
+                    {{ page.extra.community_card_description_4 | safe }}
+                </p>
+
+            </div>
+            <div class="section-community__item">
+
+                <div class="section-community__img-row">
+                    <div class="icon-green section-community__icon">
+                        {% include 'ui/icons/community/icon-05.html' %}
+                    </div>
+                   <img class="section-community__img" src="/images/community/translate-banner.png" alt="img">
+                </div>
+                <h2 class="h5 section-community__title">
+                    {{ page.extra.community_card_title_5 | safe }}
+                </h2>
+                <div class="section-community__line"></div>
+                <p class="p-card  section-community__description">
+                    {{ page.extra.community_card_description_5 | safe }}
+                </p>
+
+            </div>
+            <div class="section-community__item">
+
+                <div class="section-community__img-row">
+                    <div class="icon-green section-community__icon">
+                        {% include 'ui/icons/community/icon-06.html' %}
+                    </div>
+                   <img class="section-community__img" src="/images/community/design-product-banner.png" alt="img">
+                </div>
+                <h2 class="h5 section-community__title">
+                    {{ page.extra.community_card_title_6 | safe }}
+                </h2>
+                <div class="section-community__line"></div>
+                <p class="p-card  section-community__description">
+                    {{ page.extra.community_card_description_6 | safe }}
+                </p>
+            </div>
+        </div>
+    </section>
+    <section class="section-social">
+        <h2 class="h1-inter section-social__title">
+            {{ page.extra.stay_connected_section_title | safe }}
+        </h2>
+        <ul class="container section-social__row">
+            <li class="section-social__item">{% include 'ui/icons/social/instagram.html' %}</li>
+              <li class="section-social__item">{% include 'ui/icons/social/telegram.html' %}</li>
+             <li class="section-social__item">{% include 'ui/icons/social/linkidin.html' %}</li>
+             <li class="section-social__item">{% include 'ui/icons/social/facebook.html' %}</li>
+             <li class="section-social__item"> {% include 'ui/icons/social/frame.html' %}</li>
+             <li class="section-social__item">{% include 'ui/icons/social/mail.html' %}</li>
+            <li class="section-social__item">{% include 'ui/icons/social/matrix.html' %}</li>
+             <li class="section-social__item">{% include 'ui/icons/social/reddid.html' %}</li>
+            <li class="section-social__item">{% include 'ui/icons/social/git.html' %}</li>
+        </ul>
+    </section>
+   <section class="donate">
+     <div class="container donate__container">
+         <div class="donate__content">
+            <h2 class="h6 donate__title">
+                {{ page.extra.donate.title | safe }}
+            </h2>
+             <div class=" donate__line"></div>
+             <p class="h2-sub_v2 donate__description">  {{ page.extra.donate.description | safe }}</p>
+             {% include 'components/donate-button.html' %}
+         </div>
+         <div class="donate__img">
+               {% include 'ui/icons/community/donate.html' %}
+         </div>
+     </div>
+ </section>
+{%- endblock content %}

templates/components/donate-button.html

@@ -0,0 +1 @@
+<a class="button button--main" href="http://download.com">Donate</a>

templates/components/download-button.html

@@ -0,0 +1 @@
+<a class="button button--main" href="http://download.com">Download</a>

templates/components/language_redirect.html

@@ -1,5 +1,5 @@
 <script>
-// Supports partially translated pages.
+// Supports partially translated section.
 // Redirects a user to his preferred language page translation only if
 // there were no previous redirects or explicit language selections before (see language_seletor.html)
 if (null === window.localStorage.getItem('lang')) {

templates/components/language_selector.html

@@ -0,0 +1,34 @@
+<div class="lang-menu">
+  <script>
+    function onLanguageClick(langCode) {
+      window.localStorage.setItem('lang', langCode);
+      return true;
+    }
+  </script>
+  <!-- Hidden checkbox is used for pure CSS toggle menu. -->
+  {% if resource.translations | length > 1 %}
+  <input type="checkbox" id="lang-menu-trigger" class="lang-menu__trigger" />
+  {% endif %}
+  <label class="lang-menu__label no-print" for="lang-menu-trigger">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 21.5999C17.3018 21.5999 21.5999 17.3018 21.5999 11.9999C21.5999 6.69797 17.3018 2.3999 11.9999 2.3999C6.69797 2.3999 2.3999 6.69797 2.3999 11.9999C2.3999 17.3018 6.69797 21.5999 11.9999 21.5999ZM5.19805 9.63279C5.64641 8.34423 6.45059 7.22227 7.49295 6.38457C7.81441 6.87549 8.36929 7.19979 8.99992 7.19979C9.99403 7.19979 10.7999 8.00568 10.7999 8.99979V9.59979C10.7999 10.9253 11.8744 11.9998 13.1999 11.9998C14.5254 11.9998 15.5999 10.9253 15.5999 9.59979C15.5999 8.47165 16.3783 7.52531 17.4273 7.26853C18.5312 8.53383 19.1999 10.1887 19.1999 11.9998C19.1999 12.4087 19.1658 12.8097 19.1003 13.2H17.9999C16.6744 13.2 15.5999 14.2745 15.5999 15.6V18.2366C14.5409 18.8492 13.3112 19.1998 11.9998 19.1998V16.7999C11.9998 15.4744 10.9253 14.3999 9.5998 14.3999C8.27432 14.3999 7.1998 13.3254 7.1998 11.9999C7.1998 10.8101 6.33399 9.8225 5.19805 9.63279Z" fill="currentColor"/>
+    </svg>
+      {{ lang | upper }}
+      <svg class="lang-menu__arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.23431 5.83441C4.54673 5.52199 5.05327 5.52199 5.36569 5.83441L8 8.46873L10.6343 5.83441C10.9467 5.52199 11.4533 5.52199 11.7657 5.83441C12.0781 6.14683 12.0781 6.65336 11.7657 6.96578L8.56569 10.1658C8.25327 10.4782 7.74673 10.4782 7.43431 10.1658L4.23431 6.96578C3.9219 6.65336 3.9219 6.14683 4.23431 5.83441Z" fill="currentColor"/>
+      </svg>
+
+  </label>
+
+  <ul class="lang-menu__menu no-print" role="navigation">
+    {% for translation in resource.translations | sort(attribute="lang") %}
+    {% if lang != translation.lang %}
+    <li class="lang-menu__item" role="menuitem">
+      <a class="lang-menu__link" onclick="return onLanguageClick('{{ translation.lang }}');" href="{{ translation.permalink | replace(from=config.base_url, to="") | safe }}">
+        {{ trans(key="language", lang=translation.lang) }}
+      </a>
+    </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+</div>

templates/home.html

@@ -0,0 +1,17 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+{% include 'section/hero.html' %}
+
+{% include 'section/open_map.html' %}
+
+{% include 'section/home-services.html' %}
+
+{% include 'section/single-section.html' %}
+
+{{ resource.content | safe }}
+
+
+
+{% endblock content %}

templates/index.html

@@ -2,10 +2,17 @@
 
 {% block content %}
 
-<h1>{{ resource.title }}</h1>
+{% include 'section/hero.html' %}
+
+
+{% include 'section/open_map.html' %}
+
+{% include 'section/home-services.html' %}
+
+{% include 'section/single-section.html' %}
 
 {{ resource.content | safe }}
 
-{% include 'google_native_app_prompt.html' %}
 
-{% endblock content %}
+
+{% endblock content %}

templates/language_selector.html

@@ -1,27 +0,0 @@
-<span>
-  <script>
-    function onLanguageClick(langCode) {
-      window.localStorage.setItem('lang', langCode);
-      return true;
-    }
-  </script>
-  <!-- Hidden checkbox is used for pure CSS toggle menu. -->
-  {% if resource.translations | length > 1 %}
-  <input type="checkbox" id="lang-menu-trigger" class="lang-menu-trigger" />
-  {% endif %}
-  <label class="no-print" for="lang-menu-trigger">
-     🌐 {{ lang | upper }}
-  </label>
-
-  <ul class="lang-menu no-print" role="navigation">
-    {% for translation in resource.translations | sort(attribute="lang") %}
-    {% if lang != translation.lang %}
-    <li class="lang-menu-item" role="menuitem">
-      <a class="lang-menu-link" onclick="return onLanguageClick('{{ translation.lang }}');" href="{{ translation.permalink | replace(from=config.base_url, to="") | safe }}">
-        {{ trans(key="language", lang=translation.lang) }}
-      </a>
-    </li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-</span>

templates/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

templates/section/hero-sub.html

@@ -0,0 +1,28 @@
+
+
+<section class="hero-sub" style="background-image: url({{ hero_img | safe }})">
+        <div class="container hero__container">
+            <nav>
+                <ul>
+                    <li>
+                        <a href="/">{{ page.extra.menu_title_pre }}</a>
+                    </li>
+                    <li>
+                        ">"
+                    </li>
+                    <li>
+                        <a href="/{{ page.extra.menu_title | lower }}">{{ page.extra.menu_title }}</a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="hero-sub__content">
+                <h1 class="h1 hero-sub__title">
+                    {{ page.extra.menu_title }}
+                </h1>
+                <p class="h2-sub_v2 hero-sub__description">
+                    {{ page.extra.community_hero_description }}
+                </p>
+
+            </div>
+        </div>
+    </section>

templates/section/hero.html

@@ -0,0 +1,14 @@
+<section class="hero">
+    <div class="container hero__container">
+        <div class="hero__content">
+            <h1 class="h1 hero__title">
+                {{ resource.title }}
+            </h1>
+            <p class="h1-sub hero__description">
+                {{ resource.description }}
+            </p>
+            {% include 'components/download-button.html' %}
+        </div>
+        <img class="hero__image" src="/images/hero/hero-image.png" alt="hero image">
+    </div>
+</section>

templates/section/home-services.html

@@ -0,0 +1,104 @@
+<section class="services">
+    <div class="container services__container">
+        <!--Item-->
+        <div class="services__item animation animation--right">
+            <div class="services__content">
+                <h3 class="h2 services__title">
+                    Offline Search and Route
+                </h3>
+                <p class="p services__description">
+                    See the place you want to go while in an underground parking garage, and navigate while on a distant
+                    hike.
+                </p>
+                <a class="button button--transparent services__btn" href="#">
+                    Learn more
+                    {% include 'ui/btn-arrow.html' %}
+                </a>
+            </div>
+            <div class="services__card">
+                <img class="services__img services__img--first animation-item" src="/images/sections/map-m-1.png" alt="img">
+                <img class="services__img" src="/images/sections/map-s-1.png" alt="img">
+                <a class="button button--card services__button " href="#">
+                  Search
+                    {% include 'ui/icons/social/card/icon01.html' %}
+                </a>
+            </div>
+        </div>
+        <!--Item End-->
+        <!--Item-->
+        <div class="services__item animation animation--left">
+            <div class="services__content">
+                <h3 class="h2 services__title">
+                No Tracking or Data Collection
+                </h3>
+                <p class="p services__description">
+                   The app is designed with privacy as a priority and does not identify users, or track information about them.
+                </p>
+                <a class="button button--transparent services__btn" href="#">
+                    Learn more
+                    {% include 'ui/btn-arrow.html' %}
+                </a>
+            </div>
+            <div class="services__card">
+                <img class="services__img services__img--first animation-item" src="/images/sections/map-m-2.png" alt="img">
+                <img class="services__img" src="/images/sections/map-s-2.png" alt="img">
+                <a class="button button--card services__button" href="#">
+                   No additional permissions required
+                    {% include 'ui/icons/social/card/icon02.html' %}
+                </a>
+            </div>
+        </div>
+        <!-- Item End-->
+        <!--Item-->
+        <div class="services__item animation animation--right-revers">
+            <div class="services__content">
+                <h3 class="h2 services__title">
+                 Save Your Battery
+                </h3>
+                <p class="p services__description">
+                  Save Your Battery
+Efficiently uses your battery, doesn’t drain your battery like other navigation apps
+Learn more
+                </p>
+                <a class="button button--transparent services__btn" href="#">
+                    Learn more
+                    {% include 'ui/btn-arrow.html' %}
+                </a>
+            </div>
+            <div class="services__card services__card--start">
+                <img class="services__img services__img--first animation-item" src="/images/sections/map-m-3.png" alt="img">
+                <img class="services__img" src="/images/sections/map-s-3.png" alt="img">
+                <a class="button button--card services__button" href="#">
+                  <span> <b>34%</b> <br>  less power usage</span>
+                   {% include 'ui/icons/social/card/icon03.html' %}
+                </a>
+            </div>
+        </div>
+        <!-- Item End-->
+        <!--Item-->
+        <div class="services__item animation animation--left">
+            <div class="services__content">
+                <h3 class="h2 services__title">
+               Free and Built by the Community
+                </h3>
+                <p class="p services__description">
+                  People like you helped build the app by adding locations to the OpenStreetMap, giving feedback on features, and contributing code
+                </p>
+                <a class="button button--transparent services__btn" href="#">
+                    Learn more
+                    {% include 'ui/btn-arrow.html' %}
+                </a>
+            </div>
+            <div class="services__card">
+                <img class="services__img services__img--first animation-item" src="/images/sections/map-m-4.png" alt="img">
+                <img class="services__img" src="/images/sections/map-s-4.png" alt="img">
+                <a class="button button--card services__button" href="#">
+           Free for everyone, Made with love
+                    {% include 'ui/icons/social/card/icon04.html' %}
+                </a>
+            </div>
+        </div>
+        <!-- Item End-->
+    </div>
+
+</section>

templates/section/open_map.html

@@ -0,0 +1,23 @@
+
+<section class="open-map">
+    <div class="container open-map__container">
+       <div class="open-map__img"></div>
+        <h1 class="h2 open-map__title">
+            Organic
+        </h1>
+        <p class="h2-sub open-map__description">
+            Community + Open Maps
+        </p>
+        <div class="open-map__icon-row">
+            <img class="open-map__icon" src="/images/open-map/unsplash-1.png" width="50">
+            <img class="open-map__icon" src="/images/open-map/unsplash-2.png" width="50">
+            <img class="open-map__icon" src="/images/open-map/unsplash-3.png" width="50">
+            <img class="open-map__icon" src="/images/open-map/unsplash-4.png" width="50">
+            <img class="open-map__icon" src="/images/open-map/paul-green-1.png" width="50">
+            <img class="open-map__icon" src="/images/open-map/paul-green-2.png" width="50">
+            <img class="open-map__icon" src="/images/open-map/paul-green-3.png" width="50">
+            <img class="open-map__icon" src="/images/open-map/paul-green-4.png" width="50">
+        </div>
+    </div>
+</section>
+

templates/section/single-section.html

@@ -0,0 +1,23 @@
+<section class="single-section">
+    <div class="container single-section__container">
+        <!--Item-->
+        <div class="single-section__item animation animation--down">
+            <div class="single-section__content">
+                <h3 class="h2 single-section__title">
+                    Offline Search and Route
+                </h3>
+                <p class="p single-section__description">
+                    See the place you want to go while in an underground parking garage, and navigate while on a distant
+                    hike.
+                </p>
+                {% include 'components/download-button.html' %}
+            </div>
+            <div class="single-section__card">
+
+                <img class="single-section__img animation-item" src="/images/sections/singl-card-1.png">
+
+            </div>
+        </div>
+        <!--Item End-->
+    </div>
+</section>

templates/shortcodes/animation-section-js.html

@@ -0,0 +1,59 @@
+<script>
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        let targetElement = document.querySelectorAll('.animation');
+
+        if(targetElement){
+            targetElement.forEach(item => {
+                let observer = new IntersectionObserver(function(entries, observer) {
+                    entries.forEach(function(entry) {
+                        let animationRight = entry.target.className.includes('animation--right')
+                        let animationLeft = entry.target.className.includes('animation--left')
+                        let animationDown = entry.target.className.includes('animation--down')
+                        let animationRightRevers = entry.target.className.includes('animation--right-revers')
+                        if (entry.isIntersecting) {
+
+                            if(animationRight) {
+                                item.classList.add('animation--right-play');
+                            }
+                            if (animationLeft) {
+                                item.classList.add('animation--left-play');
+                            }
+
+                            if (animationDown) {
+                                item.classList.add('animation--down-play');
+                            }
+                            if (animationRightRevers) {
+                                  item.classList.add('animation--play-right-revers');
+                            }
+
+                        } else {
+                            if(animationRight) {
+                                item.classList.remove('animation--right-play');
+                            }
+                            if (animationLeft) {
+                                item.classList.remove('animation--left-play');
+                            }
+                            if (animationDown) {
+                                item.classList.remove('animation--down-play');
+                            }
+                             if (animationRightRevers) {
+                                  item.classList.remove('animation--play-right-revers');
+                            }
+                        }
+                    });
+                }, { threshold: 0.3 });
+
+
+                observer.observe(item);
+            })
+
+        }
+    } else {
+
+        console.log('Mobile');
+    }
+
+
+
+
+</script>

templates/shortcodes/header-switch.html

@@ -0,0 +1,29 @@
+<script>
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        const element = document.querySelector('.header')
+
+        const scrollThreshold = 20;
+
+        window.addEventListener('scroll', function () {
+
+            let scrollPosition = window.scrollY || window.pageYOffset;
+
+            if (scrollPosition > scrollThreshold) {
+                element.classList.add('header--green');
+            } else {
+                element.classList.remove('header--green');
+            }
+        });
+    } else {
+       const mobIcon = document.querySelector(".header__menu-btn")
+        const menu = document.querySelector('.header__row')
+        const wrapper = document.querySelector('html')
+
+        mobIcon.addEventListener('click', () => {
+            mobIcon.classList.toggle('is-active')
+            menu.classList.toggle('is-active')
+            wrapper.classList.toggle('frizz')
+        })
+    }
+
+</script>

templates/shortcodes/paralax.html

@@ -0,0 +1,65 @@
+<script>
+
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        try {
+            let options = {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.5
+            };
+
+            let lastScrollTop = 0;
+            let yPos = 0;
+
+            document.addEventListener("scroll", function onScroll() {
+                let scrollTop = window.scrollY;
+
+                if (scrollTop > lastScrollTop) {
+
+                    if (yPos < 100) {
+                        yPos = yPos + 1;
+                        console.log(yPos);
+                    }
+                } else if (scrollTop < lastScrollTop) {
+
+                    if (yPos > 0 && yPos <= 100) {
+                        yPos = yPos - 1;
+
+                    }
+                } else {
+                    console.log('er');
+                }
+
+                lastScrollTop = scrollTop;
+
+                let observer = new IntersectionObserver(function(entries, observer) {
+                    entries.forEach(function(entry) {
+                        if (entry.isIntersecting) {
+                            let parallaxLayers = entry.target.querySelectorAll(".open-map__icon");
+
+                            parallaxLayers.forEach(function(layer, index) {
+                                let speed = 1 * (index + 1);
+                                layer.style.transform = `translateY(${yPos / speed}px)`;
+                            });
+
+                            observer.unobserve(entry.target);
+                        }
+                    });
+                }, options);
+
+                let sections = document.querySelectorAll('.open-map');
+
+                sections.forEach(function(section) {
+                    observer.observe(section);
+                });
+            });
+        } catch (err) {
+            console.log(err)
+        }
+    } else {
+
+        console.log('mobile');
+    }
+
+
+</script>

templates/shortcodes/switch-theme.html

@@ -0,0 +1,69 @@
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const switchTheme = document.querySelector('.switch-theme');
+        let activeCheck = localStorage.getItem('switchTheme') === 'true';
+        const bodyThemeClass = document.querySelector('.light')
+
+        let firstCheck = localStorage.getItem('switchTheme') ? localStorage.getItem('switchTheme') : 'first';
+
+
+        if (firstCheck == 'first') {
+
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                switchTheme.classList.add('is-active');
+                switchThemeToggle(true)
+            } else {
+                switchTheme.classList.remove('is-active');
+                switchThemeToggle(false)
+            }
+        } else {
+            if (activeCheck) {
+                switchTheme.classList.add('is-active');
+                switchThemeToggle(true)
+            } else {
+                switchTheme.classList.remove('is-active');
+                switchThemeToggle(false)
+            }
+        }
+
+        switchTheme.addEventListener('click', () => changeToggle(true));
+
+        function switchThemeToggle(arg){
+            if(arg) {
+                bodyThemeClass.classList.remove('light')
+                bodyThemeClass.classList.add('dark')
+            } else {
+                bodyThemeClass.classList.add('light')
+                bodyThemeClass.classList.remove('dark')
+            }
+        }
+
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        } else {
+            return 'light';
+        }
+
+        function changeToggle(arr) {
+            console.log(activeCheck);
+
+            if (activeCheck) {
+                switchTheme.classList.remove('is-active');
+                switchThemeToggle(false)
+                if (arr) {
+                    localStorage.setItem('switchTheme', 'false');
+                    activeCheck = false;
+                }
+            } else {
+                switchTheme.classList.add('is-active');
+                switchThemeToggle(true)
+                if (arr) {
+                    localStorage.setItem('switchTheme', 'true');
+                    activeCheck = true;
+                }
+            }
+        }
+    });
+
+
+</script>