feature: add i18n

src/components/action/FooterAction.tsx

@@ -1,10 +1,13 @@
+import { useTranslations } from "next-intl";
 import { ACTION_LINK } from "./constants";
 import styles from "./FooterAction.module.css";
 
 export function FooterAction() {
+  const t = useTranslations("Dev");
+
   return (
     <a className={styles.footerAction} href={ACTION_LINK}>
-      Присоединиться к нам
+      {t("Write to us")}
     </a>
   );
 }

src/components/action/MainAction.tsx

@@ -1,11 +1,14 @@
+import { useTranslations } from "next-intl";
 import { ACTION_LINK } from "./constants";
 import styles from "./MainAction.module.css";
 
 export function MainAction() {
+  const t = useTranslations("Dev");
+
   return (
     <div className={styles.mainaction__wrapper}>
       <a className={styles.mainaction} href={ACTION_LINK}>
-        Колл ту экшн
+        {t("Join us")}
       </a>
     </div>
   );

src/components/header/Header.js

@@ -26,7 +26,7 @@ export function Header() {
           className={cn(styles.header__more)}
           href="#about"
           data-id="header-more"
-          dangerouslySetInnerHTML={{ __html: t.raw("learnMore") }}
+          dangerouslySetInnerHTML={{ __html: t.raw("Learn more") }}
         />
       </div>
     </header>

src/components/page/Page.tsx

@@ -0,0 +1,20 @@
+import { useTranslations } from "next-intl";
+import cn from "classnames";
+import styles from "@/components/page/Page.module.css";
+
+export function Page() {
+  const t = useTranslations("Dev");
+
+  return (
+    <main className={cn(styles.page)}>
+      <p
+        className={cn(styles.page__text)}
+        dangerouslySetInnerHTML={{ __html: t.raw("Congratulations") }}
+      />
+
+      <details dangerouslySetInnerHTML={{ __html: t.raw("Details") }} />
+
+      <div dangerouslySetInnerHTML={{ __html: t.raw("Description") }} />
+    </main>
+  );
+}

src/locales/en.json

@@ -2,6 +2,11 @@
   "Dev": {
     "title": "Ekaterinburg code",
     "header": "This is the Yekaterinburg Code - a team that will achieve the impossible. The unattainable, complex, and insane. They will do what no one else can. This is the project you've dreamed of. It is the project of destiny.",
-    "learnMore": "Find out what we will be doing"
+    "Learn more": "Find out what we will be doing",
+    "Join us": "Join us",
+    "Write to us": "Write to us",
+    "Congratulations": "Congratulations! <br /> You are the most curious! <br /> We have been looking for you.",
+    "Details": "<summary>Details for the most curious</summary> <p> Today, the city is not just a place to live, but a huge system of services, functions, events, scenarios, interactions. Only all this is not connected with each other in any way now. Culture here, medicine there, transport here, study here, power generally on the sidelines, etc. And it all looks different (and always bad), and it's difficult to work with it, and it's impossible to find anything. </p> <p> Therefore, we plan to create a full-fledged digital ecosystem of Yekaterinburg. First, we will collect in one place everything that is now scattered across an endless list of sites. There must be exactly one entry point to communicate with the city. Find out about the events, make an appointment with a therapist, get in line at kindergarten, get benefits, write an application for repairs in the house, file a complaint, download the Ecb logo, coordinate the placement of signage, support local communities, anonymously hand over a dealer, vote on an 'active citizen', automatically make a tax deduction, resolve issues with the management company and so on — all in one convenient and beautiful place. </p> <p> As information about residents accumulates, we will automate their lives. If the system knows the entire medical record, shopping in stores, registration, social payments, benefits, trips, my car, insurance, etc., it will be able to give useful suggestions: </p> <ul> <li> It's time to go to the doctor or undergo a medical examination, do you have a free Tuesday morning, let me write it down? </li> <li> Your travel card is running out, let's fill it up for a month, with your regime you will save 150₽ </li> <li> In a week there will be a fest where your favorite performer Shysha will perform, buy a ticket? </li> <li> Congratulations on the birth of a child! Let's immediately get in line at the kindergarten </li> <li> It's time to make a booster from Covid, let's go to the bar on Friday, and on Saturday evening for a vaccination? </li> <li> Over the past year, you have accumulated 32,234 ₽ tax deductions for medicine, work and mortgage. We have already arranged everything, tell me, which card to transfer money to? </li> </ul> <p> Let the machine do everything for us, we are not obliged to keep so many worries in our heads. </p>",
+    "Description": "<p>This is more than mos.ru in Moscow. This is not an analogue of public services.</p> <p> Why is this happening in Yekaterinburg? Because this is a city of enthusiasts. We are burning with our business. We unite to move mountains, and we don't compete for profit. We are a community, not a business. </p><p> Therefore, only we and only here can do the impossible. And for this we need you: specialists in backend, frontend, c#, python, figure, product and interface design, testers, analysts, managers, managers, producers. </p><p> Our team already has cool guys from Contour, Yandex, Dot. And we are waiting for all professionals who are ready to create a city of the future. </p> <p> What to do? There are two options here: <a href='https://t.me/nibach ' target='_blank'> write to us in the cart </a> and chat, or take a look <a href='https://github.com/ekaterinburgdev /' target='_blank'> on github </a> andjust start solving puzzles right away. </p> <p> Our locomotive is already rushing at full speed. Fly in while you can. </p>"
   }
 }

src/locales/ru.json

@@ -2,6 +2,11 @@
   "Dev": {
     "title": "Код Екатеринбурга",
     "header": "Это Код Екатеринбурга — команда, которая сделает невозможное. Невыполнимое, сложное и безумное. Сделает то, что никто не сможет. Это тот проект, о котором вы мечтали. Это — проект судьбы.",
-    "learnMore": "Узнать, что мы будем делать"
+    "Learn more": "Узнать, что мы будем делать",
+    "Join us": "Го к нам",
+    "Write to us": "Написать нам",
+    "Congratulations": "Поздравляем! <br /> Вы&nbsp;самый любопытный! <br /> Вас мы&nbsp;и&nbsp;искали.",
+    "Details": "<details> <summary>Подробности для самых любопытных</summary> <p> Сегодня город представляет из себя не просто место для жизни, а огромную систему услуг, функций, событий, сценариев, взаимодействий. Только всё это никак между собой сейчас не связано. Культура тут, медицина там, транспорт сям, учёба тут, власть вообще в сторонке и т. д. И всё это выглядит по-разному (и всегда плохо), и работать с этим сложно, и найти что-либо невозможно. </p> <p> Поэтому мы планируем создать полноценную цифровую экосистему Екатеринбурга. Сначала мы соберём в одном месте всё, что сейчас разбросано по бесконечному списку сайтов. Для общения с городом должна быть ровно одна точка входа. Узнать о событиях, записаться к терапевту, встать на очередь в садик, получить льготы, написать заявление на ремонт в доме, подать жалобу, скачать лого Екб, согласовать размещение вывески, поддержать локальные сообщества, анонимно сдать барыгу, проголосовать на «активном гражданине», автоматически сделать налоговый вычет, решить вопросы с управляющей компанией и так далее — всё в одном удобном и красивом месте. </p> <p> По мере накопления информации о жителях, мы будем автоматизировать их жизнь. Если система знает всю медкарту, покупки в магазинах, регистрации, соцвыплаты, льготы, поездки, мой автомобиль, страховки и пр., то сможет выдавать полезные предложения: </p> <ul> <li> Пора сходить к&nbsp;врачу или пройти диспансеризацию, у&nbsp;вас свободно утро вторника, давайте запишу? </li> <li> У&nbsp;вас кончается проездной, давайте пополним на&nbsp;месяц, при вашем режиме вы&nbsp;сэкономите 150&nbsp;₽ </li> <li> Через неделю пройдет фест, где выступит ваш любимый исполнитель Шыша, купить билет? </li> <li> Поздравляем с&nbsp;рождением ребёнка! Давайте сразу встанем на очередь в&nbsp;садик </li> <li> Пора делать бустер от&nbsp;ковида, давайте в&nbsp;пятницу в&nbsp;бар, а&nbsp;в субботу вечером на&nbsp;прививку? </li> <li> За прошлый год у вас накопилось 32 234 ₽ налогового вычета за медицину, работу и ипотеку. Мы уже всё оформили, скажите, на какую карту перевести деньги? </li> </ul> <p> Пусть машина всё делает за&nbsp;нас, мы&nbsp;не&nbsp;обязаны столько забот держать в&nbsp;голове. </p> </details>",
+    "Description": "<p>Это больше, чем mos.ru в&nbsp;Москве. Это не&nbsp;аналог госуслуг.</p> <p> Почему это происходит в&nbsp;Екатеринбурге? Потому что это город энтузиастов. Мы&nbsp;горим своим делом. Мы&nbsp;объединяемся, чтобы свернуть горы, а&nbsp;не конкурируем ради прибыли. Мы&nbsp;сообщество, а&nbsp;не&nbsp;бизнес. </p> <p> Поэтому только мы&nbsp;и&nbsp;только здесь можем сделать невозможное. И&nbsp;для этого нам нужны&nbsp;вы: специалисты по&nbsp;бэкенду, фронтэнду, c#, питону, фигме, дизайну продуктов и интерфейсов, тестировщики, аналитики, менеджеры, руководители, продюсеры. </p> <p> В&nbsp;нашей команде уже есть крутые ребята из&nbsp;Контура, Яндекса, Точки. И&nbsp;мы&nbsp;ждём к&nbsp;нам всех профессионалов, кто готов создать город будущего. </p> <p> Что делать? Тут два варианта: <a href='https://t.me/nibach' target='_blank'> написать нам в&nbsp;телегу </a> и&nbsp;пообщаться, либо заглянуть <a href='https://github.com/ekaterinburgdev/' target='_blank'> на&nbsp;гитхаб </a> и&nbsp;просто сразу начать решать задачки. </p> <p> Наш локомотив уже несётся полным ходом. Залетайте, пока есть возможность. </p>"
   }
 }

src/pages/_app.tsx

@@ -1,8 +1,8 @@
 import { NextIntlProvider } from "next-intl";
 import type { AppProps } from "next/app";
+
 import "@/styles/globals.css";
 import "../../public/fonts/index.css";
-import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (