"Команда" Header item added

projects/co-map/components/CoMapHomePage.tsx

@@ -32,7 +32,7 @@ const Main: FC = () => {
       <MapBannerCoMap/>
       <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
         <div className={'bounding_element'}>
-          <ChooseDirectionSearch/>
+          {/* <ChooseDirectionSearch/> */}
           <HowToUseMap/>
         </div>
       </div>

projects/co-map/components/HomeHeaderCoMap.tsx

@@ -29,6 +29,9 @@ const HomeHeader = () => {
               <Menu.Item>
                   <Link href={'/mappinginstructions'}>Инструкции</Link>
               </Menu.Item>
+              <Menu.Item>
+                  <Link href={'/team'}>Команда</Link>
+              </Menu.Item>
           </Menu>
       </Header>
   );

projects/co-map/components/HowToUseMap.tsx

@@ -2,41 +2,56 @@ import { FC } from 'react'
 import Image from 'next/image'
 
 const instructions = [
-    {
-        title: 'Находите вдохновляющие организации и события поблизости',
-        image: '/projects/co-map/assets/img/current_location.png',
-        instruction:
-            'Заходите в гости к лидерам изменений, которые заботятся об окружающих и о будущем.',
-        reason: 'Например: Зайдите в кафе «Огурцы», которое принимает на работу ребят с нейроособенностями (перейти к карте). Сдайте ненужную одежду в Charity Shop',
-    },
     {
         title: 'Отмечайте на карте лидеров изменений',
-        image: '/projects/co-map/assets/img/right_direction.png',
         instruction:
-            'Расскажите об организациях и проектах в вашем районе, которые вас вдохновляют',
-        reason: 'Вы поможете им привлечь внимание СМИ, новых клиентов, волонтёров и партнёров',
+        'Расскажите об организациях и проектах в вашем районе, которые вас вдохновляют.',
+        reason: 'Вы поможете им привлечь внимание СМИ, новых клиентов, волонтёров и партнёров.',
+        image: '/projects/co-map/assets/img/place_icon.svg',
+        position: 'left',
+        background: '#0198AF',
+      },
+      {
+        title: 'Находите вдохновляющие организации и события поблизости',
+        instruction:
+        'Заходите в гости к лидерам изменений, которые заботятся об окружающих и о будущем.',
+        reason: 'Например: Зайдите в кафе «Огурцы», которое принимает на работу ребят с нейроособенностями. Сдайте ненужную одежду в Charity Shop.',
+        image: '/projects/co-map/assets/img/find_icon.svg',
+        position: 'right',
+        background: '#94C31F',
     },
     {
         title: 'Влияйте на рейтинг участников карты',
-        image: '/projects/co-map/assets/img/winners.png',
         instruction:
-            'Оставляйте отзывы и оценивайте лидеров изменений по специальным критериям',
-        reason: 'Ваша оценка поможет проекту стать более заметным, а обратная связь — понять, над чем стоит работать',
+        'Оставляйте отзывы и оценивайте лидеров изменений по специальным критериям.',
+        reason: 'Ваша оценка поможет проекту стать более заметным, а обратная связь — понять, над чем стоит работать.',
+        image: '/projects/co-map/assets/img/mouse_icon.svg',
+        position: 'left',
+        background: '#AC3970',
     },
 ];
 
 
 const HowToUseMap: FC = () => (
-  <div id={'HowToUseMap'}>
-    <div className='co_map_title how-to-use-title'>Как использовать карту</div>
+  <div id='HowToUseMap'>
     {
-      instructions.map(({ title, instruction, reason, image }) => <div className='map-instruction-block'>
-        <div className='description-block'>
+      instructions.map(({ title, instruction, reason, image, position, background }) =>
+        <div
+          className={'map-instruction-block ' + position}
+        >
+        <div 
+          className='description-block'
+          style={{
+            background: background
+          }}
+        >
           <div className='co_map_subtitle'>{title}</div>
           <div className='description co_map_smalltext'>{instruction}</div>
           <div className='description co_map_smalltext'>{reason}</div>
         </div>
-        <div className='image-block'><Image src={image} width={250} height={200}/></div>
+        <div className='image-block'>
+          <Image src={image} width={220} height={240}/>
+        </div>
       </div>)
     }
 

styles/comap.scss

@@ -80,8 +80,15 @@
 }
 
 .bounding_element {
-  width: 55%;
+  width: calc(100% - 200px);
   min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @media (max-width: 1000px) {
+    width: calc(100% - 40px);
+  }
 }
 
 .info_community {
@@ -225,29 +232,133 @@
 
 // How to use map
 
-.how-to-use-title {
-  margin: 20px 0;
-}
-
-.map-instruction-block {
+#HowToUseMap {
   display: flex;
-  justify-content: space-between;
+  gap: 50px;
+  flex-direction: column;
+
+  max-width: 1200px;
 
-  & .description-block {
-    width: 50%;
-    align-self: center;
+  margin-bottom: 20px;
+
+  .map-instruction-block {
     display: flex;
-    flex-direction: column;
-    padding: 5px 0;
+    justify-content: space-between;
+    align-items: center;
+
+    & .description-block {
+      color: #ffffff;
+      width: 100%;
+      align-self: center;
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
+      margin-right: 30px;
+
+      padding: 50px;
+
+
+      & > div {
+        padding: 10px 0;
+      }
+
+      & .co_map_subtitle {
+        font-family: 'Roboto', sans-serif;
+        font-weight: normal;
+        font-size: 33px;
+        text-align: center;
+      }
+
+      & .description {
+        font-size: 25px;
+        font-family: 'Roboto', sans-serif;
+      }
+    }
+
+    &.right {
+      flex-direction: row-reverse;
+
+      & .description-block {
+        margin-left: 30px;
+        margin-right: 0;
+      }
+
+    }
+
+    & .image-block {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      width: 400px;
+    }
+
+    @media (max-width: 1000px) {
+      & .image-block {
+        width: auto;
+      }
+
+      & .co_map_subtitle {
+        font-size: 28px;
+      }
 
-    & > div {
-      padding: 10px 0;
+      & .description {
+        font-size: 22px;
+      }
     }
 
-    & .description {
-      font-family: 'Open Sans', sans-serif;
+    @media (max-width: 768px) {
+
+      & .description-block {
+
+        padding: 35px;
+
+        & .co_map_subtitle {
+          font-size: 26px;
+        }
+
+        & .description {
+          font-size: 20px;
+        }
+
+      }
+    }
+
+    @media (max-width: 480px) {
+      & .image-block {
+        display: none;
+      }
+
+      &.right {
+        & .description-block {
+          margin-left: 0;
+        }
+      }
+
+      & .description-block {
+        padding: 20px;
+        margin-right: 0;
+
+        & .co_map_subtitle {
+          font-size: 20px;
+        }
+
+        & .description {
+          font-size: 15px;
+        }
+      }
     }
+
+  }
+
+  @media (max-width: 768px) {
+    gap: 30px;
   }
+
+  @media (max-width: 480px) {
+    gap: 20px;
+  }
+
 }
 
 // Ambassador Program