feature: add i18n

next.config.js

@@ -4,6 +4,10 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
+  i18n: {
+    locales: ["ru", "en"],
+    defaultLocale: "ru",
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -18,6 +18,7 @@
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",
+    "next-intl": "^2.12.0",
     "postcss": "^8.4.21",
     "postcss-nesting": "^11.2.1",
     "react": "^18.2.0",

src/components/action/MainAction.tsx

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

src/components/header/Header.js

@@ -1,10 +1,13 @@
 import { useEffect } from "react";
+import { useTranslations } from "next-intl";
 import cn from "classnames";
 import styles from "./Header.module.css";
 import mainStyles from "../action/MainAction.module.css";
 import { initSmoothScroll } from "./smooth-scroll";
 
 export function Header() {
+  const t = useTranslations("Dev");
+
   useEffect(() => {
     initSmoothScroll();
   }, []);
@@ -19,19 +22,16 @@ export function Header() {
       />
 
       <div className={cn(styles.header__text)}>
-        <p data-id="header-text">
-          Это Код Екатеринбурга&nbsp;&mdash; команда, которая сделает
-          невозможное. Невыполнимое, сложное и&nbsp;безумное. Сделает&nbsp;то,
-          что никто не&nbsp;сможет. Это тот проект, о&nbsp;котором
-          вы&nbsp;мечтали. Это&nbsp;&mdash; проект судьбы.
-        </p>
+        <p
+          data-id="header-text"
+          dangerouslySetInnerHTML={{ __html: t.raw("header") }}
+        ></p>
         <a
           className={cn(mainStyles.mainaction)}
           href="#about"
           data-id="header-more"
-        >
-          Нажми, чтобы узнать, что мы&nbsp;будем делать 🫦
-        </a>
+          dangerouslySetInnerHTML={{ __html: t.raw("Learn more") }}
+        />
       </div>
     </header>
   );

src/components/page/Page.module.css → src/components/main-text/MainText.module.css

@@ -1,4 +1,4 @@
-.page {
+.main-text {
   margin: 0 auto;
   padding: 0 8vw;
   padding-bottom: 60px;
@@ -35,7 +35,7 @@
 }
 
 @media (min-width: 768px) {
-  .page {
+  .main-text {
     width: 60%;
     padding: 0;
     font-size: 2.25vw;

src/components/main-text/MainText.tsx

@@ -0,0 +1,87 @@
+import { useTranslations } from "next-intl";
+import cn from "classnames";
+import styles from "@/components/main-text/MainText.module.css";
+
+interface MainTextProps {
+  projects: JSX.Element;
+  team: JSX.Element;
+}
+
+// TODO: translate to english
+export function MainText({ projects, team }: MainTextProps) {
+  const t = useTranslations("Dev");
+
+  return (
+    <main className={cn(styles.page)}>
+      <h2>Экосистема Екатеринбурга</h2>
+
+      <h3>Что происходит</h3>
+
+      <p>
+        Сегодня город&nbsp;&mdash; это не&nbsp;просто место, чтобы жить жизнь,
+        а&nbsp;невероятно сложная инфраструктура услуг, функций, событий,
+        сценариев и взаимодействий, которые определяют комфорт и&nbsp;качество
+        жизни. Разобраться во&nbsp;всём этом, мягко говоря, сложно.
+      </p>
+
+      <p>
+        Поэтому мы&nbsp;планируем создать цифровую экосистему Екатеринбурга
+        &mdash; объединение всех городских сфер в&nbsp;одном месте, чтобы
+        упростить и автоматизировать жизнь горожан, бизнеса
+        и&nbsp;администрации.
+      </p>
+
+      <h3>Почему здесь</h3>
+
+      <p>
+        Потому что Екатеринбург&nbsp;&mdash; город энтузиастов. Мы&nbsp;горим
+        своим делом. Мы объединяемся, чтобы свернуть горы,
+        а&nbsp;не&nbsp;конкурируем ради прибыли. Мы &mdash; сообщество.
+      </p>
+
+      <h3>Что уже есть и&nbsp;что в&nbsp;планах</h3>
+
+      <p>
+        Уже есть 10&nbsp;проектов и&nbsp;заряженная команда&nbsp;&mdash;
+        зацените, какой у&nbsp;нас
+        <a href="https://github.com/ekaterinburgdev/" target="_blank">
+          гитхаб
+        </a>
+        . В&nbsp;ближайшие месяцы планируются большие анонсы всех проектов и
+        разработка новых.
+      </p>
+
+      {projects}
+
+      <h3>Кто нам нужен</h3>
+
+      <p>
+        Специалисты судьбы по&nbsp;следующим направлениям: AI, Big Data,
+        Machine Learning, backend, frontend, C#, Python, Node.js, customer
+        development, UI/UX design.
+      </p>
+
+      <p>
+        Также мы&nbsp;ищем руководителей, арт-директоров, менеджеров
+        продуктов, финансистов, продавцов, тестировщиков, аналитиков,
+        продюсеров.
+      </p>
+
+      <p>
+        И&nbsp;более того мы&nbsp;ищем инвесторов, спонсоров и&nbsp;партнёров!
+      </p>
+
+      <p>
+        В&nbsp;нашей команде уже есть крутые ребята из&nbsp;Контура, Яндекса,
+        Точки. И мы&nbsp;ждём к&nbsp;нам всех профессионалов, кто готов
+        создать цифровой город будущего.
+      </p>
+
+      {team}
+
+      <p>
+        Наш локомотив уже несётся полным ходом. Залетайте, пока есть места.
+      </p>
+    </main>
+  );
+}

src/locales/en.json

@@ -0,0 +1,12 @@
+{
+  "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.",
+    "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>"
+  }
+}