feat: translate playbook page to ua

src/components/CarCard.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import CalendarIcon from "@assets/fa-calendar.svg?react";
-import TruckIcon from "@assets/fa-truck.svg?react";
-import CogIcon from "@assets/fa-cog.svg?react";
-import HammerIcon from "@assets/fa-hammer.svg?react";
-import ToolboxIcon from "@assets/fa-toolbox.svg?react";
-import ScrewdriverIcon from "@assets/fa-screwdriver.svg?react";
+import CalendarIcon from "@assets/icons/calendar.svg?react";
+import TruckIcon from "@assets/icons/truck.svg?react";
+import CogIcon from "@assets/icons/cog.svg?react";
+import HammerIcon from "@assets/icons/hammer.svg?react";
+import ToolboxIcon from "@assets/icons/toolbox.svg?react";
+import ScrewdriverIcon from "@assets/icons/screwdriver.svg?react";
 
 interface Props {
   className?: string;

src/components/InfoItem.tsx

@@ -5,14 +5,20 @@ import LeafIcon from "@assets/icons/leaf.svg?react";
 import LightbulbOnIcon from "@assets/icons/lightbulb-on.svg?react";
 import MaximizeIcon from "@assets/icons/maximize.svg?react";
 import UsersIcon from "@assets/icons/users.svg?react";
+import TruckFastIcon from "@assets/icons/truck-fast.svg?react";
+import GearIcon from "@assets/icons/gear.svg?react";
+import ScrewdriverWrenchIcon from "@assets/icons/screwdriver-wrench.svg?react";
 
 type Icons =
   | "bullseye_arrow"
   | "feather"
   | "leaf"
   | "lightbulb"
   | "maximize"
-  | "users";
+  | "users"
+  | "truck"
+  | "gear"
+  | "screwdriver-wrench";
 
 interface Props {
   className?: string;
@@ -35,6 +41,9 @@ const InfoItem: React.FC<Props> = ({
       lightbulb: LightbulbOnIcon,
       maximize: MaximizeIcon,
       users: UsersIcon,
+      truck: TruckFastIcon,
+      gear: GearIcon,
+      "screwdriver-wrench": ScrewdriverWrenchIcon,
     };
 
     const IconComponent = iconMapping[icon as Icons] || (() => <></>);

src/pages/en/playbook.mdx

@@ -24,8 +24,7 @@ import {
 <div class="bg-neutral-50 w-full -mt-48 pt-48">
   <div class="container-width grid grid-cols-1 md:grid-cols-12 gap-8 mt-8 mb-20 md:mt-20 bg-neutral-50 lg:!px-0">
     <HeadlineUnderlined variant={11} className="pt-10 pb-8 sm:py-0 col-span-5">
-      How to Tolocar<br/>
-      Playbook for Mobile Makerspaces
+      How to Tolocar: Our Playbook for Mobile Makerspaces
     </HeadlineUnderlined>
     <TextBlock className="col-span-6">
       **Toloka is a traditional way of showing solidarity through the provision of physical support in Ukraine.** With that in mind, German and Ukrainian partners with support from the Deutsche Gesellschaft für Internationale Zusammenarbeit (GIZ) co-created the Tolocar project just a few weeks after the start of the full-scale Russian invasion of Ukraine. 
@@ -82,27 +81,27 @@ import {
     <div class="col-span-1 md:col-span-12 grid grid-cols-1 md:grid-cols-3 gap-8">
       <InfoItem
         description="Harness Ukraine's digital innovation capacity to meet urgent humanitarian needs"
-        icon="bullseye_arrow"
+        icon="lightbulb"
         className="col-span-1"
       />
       <InfoItem
         description="Support both new and existing stationary makerspaces"
-        icon="feather"
+        icon="truck"
         className="col-span-1"
       />
       <InfoItem
         description="Expand the reach of Ukrainian makers by connecting them to national, regional, and global maker networks"
-        icon="maximize"
+        icon="users"
         className="col-span-1"
       />
       <InfoItem
         description="Strengthen decentralized production systems at partner locations, such as displaced businesses, makerspaces or community workshops"
-        icon="lightbulb"
+        icon="gear"
         className="col-span-1"
       />
       <InfoItem
         description="Develop the capacities of Ukrainian makers and makerspace managers"
-        icon="leaf"
+        icon="screwdriver-wrench"
         className="col-span-1"
       />
     </div>
@@ -125,6 +124,8 @@ import {
     </TextBlock>
     <TextBlock className="col-span-1 md:col-span-4">
       ### Support & Contact
+      One of our main goals is to connect the global maker community with local makers and initivatives in order to support and strengthen them. 
+
       For more information, please contact us at 
 
       [email protected]

src/pages/ua/playbook.mdx

@@ -0,0 +1,130 @@
+---
+layout: "@layouts/AwardsLayout.astro"
+title: "UA How To Tolocar: Playbook for Mobile Makerspaces"
+footerGrey: false
+metaImage: og_image_award.jpg
+metaDescription: "UA Empowering Ukrainian Maker Community: Where Networking Meets Funding, Mentoring Sparks Ideas, and Innovation Comes to Life!"
+---
+
+import WideCard from "@components/WideCard";
+import {
+  HeadlineUnderlined,
+  TextBlock,
+  ButtonLink,
+  InfoItem,
+} from "@components";
+
+
+<WideCard
+  bg={3}
+  className="mt-20 md:mt-32 !px-0"
+  centerImage="images/playbook/playbook.svg"
+  centerImageClasses="w-full"
+/>
+<div class="bg-neutral-50 w-full -mt-48 pt-48">
+  <div class="container-width grid grid-cols-1 md:grid-cols-12 gap-8 mt-8 mb-20 md:mt-20 bg-neutral-50 lg:!px-0">
+    <HeadlineUnderlined variant={11} className="pt-10 pb-8 sm:py-0 col-span-5">
+      ЯК ТОЛОКАРИТИ. Практичний посібник для мобільних мейкерспейсів
+    </HeadlineUnderlined>
+    <TextBlock className="col-span-6">
+      **Толока — це традиційний спосіб виявлення солідарності в Україні через фізичну допомогу.** Зважаючи на це, за підтримки Німецького товариства з міжнародного співробітництва (GIZ) німецькі й українські партнери разом створили проєкт «Tolocar» всього через кілька тижнів після початку повномасштабного вторгнення Росії* в Україну.
+
+      Мета проєкту — підтри- мати як заходи з надання екстреної допомоги, так і розвиток інновацій-ної учасницької екосистеми для соціально-економічного відновлення України.
+
+      **У цьому Практичний посібник ми ділимося нашими усвідомленнями, здобутими в межах проєкту «Tolocar», а також різноманітними можливостями та варіантами застосування мобільних мейкерспейсів в Україні з травня 2022 року.** Ми показуємо різне розуміння того, чим є мобільні мейкер- спейси, ділимося випадками використання та списками обладнання, а також представляємо багатогранні якості нашої команди, які стали визначальними для успішної реалізації проєкту.
+    </TextBlock>
+  </div>
+</div>
+
+<div class="container-width grid grid-cols-12 p-0 md:py-24">
+  <object type="application/pdf" data="/playbook/HowToTolocar_Playbook_UA_ES.pdf" width="100%" height="800px" className="w-full md:col-span-12"></object>
+</div>
+
+<div class="container-width grid grid-cols-1 md:grid-cols-12 gap-8 py-8 md:py-24">
+  <div class="col-span-1 md:col-span-12">
+    <h2
+      class="text-neutral-900 text-lg leading-6 lg:text-2xl lg:leading-7 font-aktiv font-semibold"
+    >
+      Робити те, що має сенс. Будь-де.
+    </h2>
+  </div>
+  <TextBlock className="col-span-1 md:col-span-5">
+    Завдяки зв'язкам з глобальною спільнотою виробників, Tolocars створює гнучкі та тимчасові виробничі системи в місцях розташування організацій-партнерів. Цей інноваційний підхід уможливлює розподілене виробництво на місці, надаючи індивідуальні рішення там, де вони найбільше потрібні.
+
+    Розподілене виробництво дає змогу розмістити дрібномасштабне виробництво набагато ближче до кінцевого споживача, зменшуючи витрати, час виконання замовлення та вплив на навколишнє середовище.
+  </TextBlock>
+  <div className="col-span-1 md:col-span-5">
+    <TextBlock>
+      Практичний посібник відображає ітеративний і плюралістичний підхід цього безпрецедентного проекту і має на меті викликати дискусії з іншими, хто цікавиться цією темою. Розміщений на Appropedia, вікі про сталий розвиток, ігровий посібник у своїй віртуальній формі є живим документом. Будь ласка, долучайтеся до обговорення на Appropedia!
+    </TextBlock>
+    <ButtonLink
+      target={"https://www.appropedia.org/Tolocar_Playbook"}
+      className={"mt-8"}
+      caption={"Playbook на Appropedia"}
+      variant={"dark"}
+      newTab={true}
+    />
+  </div>
+</div>
+
+<div class="bg-tolo-green w-full text-white">
+  <div class="container-width grid grid-cols-1 md:grid-cols-12 gap-x-16 gap-y-2 md:gap-y-24 py-8 md:py-24">
+    <div class="col-span-1 md:col-span-5 flex items-center justify-center">
+      <img src="images/award/submit-ideas.svg" className="col-span-12 w-full" />
+    </div>
+    <div class="col-span-1 md:col-span-7 font-semibold font-aktiv text-2xl">
+      <p class="mb-8">Проєкт «Tolocar» розгортається навколо парку мобільних майстерень — мейкерспейсів — та об’єднує фахівців у сфері мейкінгу, розподіленого виробництва та планування міського розвитку із організаціями грома-дянського суспільства України для:</p>
+    </div>
+    <div class="col-span-1 md:col-span-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+      <InfoItem
+        description="використання українського потенціалу цифрових інновацій для забезпечення нагальних гуманітарних потреб"
+        icon="lightbulb"
+        className="col-span-1"
+      />
+      <InfoItem
+        description="підтримки як нових, так і наявних стаціонарних мейкерспейсів"
+        icon="truck"
+        className="col-span-1"
+      />
+      <InfoItem
+        description="розширення горизонту українських мейкерів через встановлення зв’язків із національними, регіональними та глобальними мережами мейкерів"
+        icon="users"
+        className="col-span-1"
+      />
+      <InfoItem
+        description="зміцнення децентралізованих систем виробництва на партнерських локаціях, як-от переміщені бізнеси, мейкерспейси або громадські майстерні"
+        icon="gear"
+        className="col-span-1"
+      />
+      <InfoItem
+        description="розвитку спроможності українських мейкерів і менеджерів майстерень"
+        icon="screwdriver-wrench"
+        className="col-span-1"
+      />
+    </div>
+  </div>
+</div>
+
+<div class="bg-neutral-50 w-full">
+  <div class="container-width grid grid-cols-1 md:grid-cols-12 py-8 md:py-24 gap-8">
+<TextBlock className="col-span-1 md:col-span-4">
+### Appropedia
+Appropedia - це вікі-сайт, який допомагає людям обмінюватися інформацією та співпрацювати над проектами, спрямованими на подолання бідності, міжнародний розвиток та екологічну стійкість.
+<br/><br/><a href="https://www.appropedia.org" target="_blank">www.appropedia.org</a>
+</TextBlock>
+    <TextBlock className="col-span-1 md:col-span-4">
+      ### Maker Academy
+      Разом з Академією мейкерства ми розробляємо проєктну навчальну програму українською мовою, яка зосереджена на створенні комп'ютерно-керованих машин з відкритим вихідним кодом, різних за складністю та можливостями. 
+      <br/><br/>
+      <a href="/ua/academy" target="_blank">tolocar.org/ua/academy</a>
+    </TextBlock>
+    <TextBlock className="col-span-1 md:col-span-4">
+      ### Support & Contact
+      Одна з наших головних цілей - об'єднати глобальну спільноту мейкерів з локальними мейкерами та ініціативами, щоб підтримати та зміцнити їх.  
+
+      Для отримання додаткової інформації, будь ласка, зв'яжіться з нами за адресою  
+
+      [email protected]
+    </TextBlock>
+  </div>
+</div>