feat: add translation system

src/app/(home)/_components/About.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { ReactElement } from 'react';
+import { useTranslation } from '@/app/_translation';
+import { HomeTranslation } from '../homeTranslation';
+
+export const About = (): ReactElement => {
+  const { about }: HomeTranslation = useTranslation();
+
+  return (
+    <div className='container'>
+      <div className='row'>
+        <div className='col-lg-6 col-12'></div>
+        <div className='col-lg-6 col-12'>
+          <h2>
+            <small>{about.subtitle}</small> {about.title}
+          </h2>
+          <p className='lead my-4'>{about.description}</p>
+          <div className='d-sm-block d-grid'>
+            <button className='btn btn-outline-primary btn-lg' disabled>
+              {about.learnMore}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/app/(home)/_components/Header.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { ReactElement, useContext } from 'react';
+import { NavDropdown } from 'react-bootstrap';
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import { LANGUAGE_SETTINGS, LanguageContext } from '@/app/_language';
+import { useTranslation } from '@/app/_translation';
+import { HomeTranslation } from '../homeTranslation';
+
+const languagesMap: Map<string, string> = new Map<string, string>([
+  ['de', '🇩🇪 Deutch (DE)'],
+  ['en', '🇬🇧 English (EN)'],
+  ['es', '🇪🇸 Español (ES)'],
+  ['fr', '🇫🇷 Français (FR)'],
+  ['in', '🇮🇩 Bahasa Indonesia (IN)'],
+  ['it', '🇮🇹 Italiano (IT)'],
+  ['ja', '🇯🇵 日本語 (JA)'],
+  ['ko', '🇰🇷 한국어 (KO)'],
+  ['pt', '🇵🇹 Português (PT)'],
+  ['tr', '🇹🇷 Türkçe (TR)'],
+  ['ru', '🇷🇺 Русский (RU)'],
+  ['uk', '🇺🇦 Українська (UK)'],
+  ['vi', '🇻🇳 Tiếng Việt (VI)'],
+  ['zh', '🇨🇳 中文 (ZH)']
+]);
+
+export const Header = (): ReactElement => {
+  const [selectedLanguage, changeSelectedLanguage]: LanguageContext = useContext(LanguageContext);
+  const { header: i18n }: HomeTranslation = useTranslation();
+
+  return (
+    <Navbar expand='lg' data-bs-theme='dark'>
+      <Container>
+        <Navbar.Brand href='/'>{i18n.brand}</Navbar.Brand>
+        <Navbar.Toggle aria-controls='main-nav' />
+        <Navbar.Collapse id='main-nav'>
+          <Nav className='ms-auto'>
+            <Nav.Link href='#about'>{i18n.about}</Nav.Link>
+            <Nav.Link href='#program'>{i18n.program}</Nav.Link>
+            <Nav.Link href='#speakers'>{i18n.speakers}</Nav.Link>
+            <Nav.Link href='#tickets'>{i18n.tickets}</Nav.Link>
+            <Nav.Link href='#sponsors'>{i18n.sponsors}</Nav.Link>
+            <NavDropdown className='bg-opacity-10' title={`${selectedLanguage.toUpperCase()}`} id='translation-dropdown'>
+              {LANGUAGE_SETTINGS.availableLanguages.map((lang: string) => (
+                <NavDropdown.Item as='button' onClick={() => changeSelectedLanguage(lang)} key={lang}>
+                  {languagesMap.get(lang)}
+                </NavDropdown.Item>
+              ))}
+            </NavDropdown>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};

src/app/(home)/_components/Hero.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { ReactElement } from 'react';
+import { useTranslation } from '@/app/_translation';
+import { HomeTranslation } from '../homeTranslation';
+
+export const Hero = (): ReactElement => {
+  const { hero: i18n }: HomeTranslation = useTranslation();
+
+  return (
+    <div className='text-white col-xxl-7 col-lg-6'>
+      <h1 className='display-4'>
+        <small>{i18n.nextEditionDate}</small>
+        {i18n.title}
+      </h1>
+      <p className='lead my-5'>{i18n.description}</p>
+      <div className='d-sm-block d-grid'>
+        <a className='btn btn-primary btn-lg' href='#tickets'>
+          {i18n.callToAction}
+        </a>
+      </div>
+    </div>
+  );
+};

src/app/(home)/_components/index.ts

@@ -0,0 +1,3 @@
+export * from './About';
+export * from './Header';
+export * from './Hero';

src/app/(home)/homeTranslation.ts

@@ -0,0 +1,22 @@
+export type HomeTranslation = {
+  hero: {
+    title: string;
+    nextEditionDate: string;
+    description: string;
+    callToAction: string;
+  };
+  header: {
+    brand: string;
+    about: string;
+    program: string;
+    speakers: string;
+    tickets: string;
+    sponsors: string;
+  };
+  about: {
+    title: string;
+    subtitle: string;
+    description: string;
+    learnMore: string;
+  };
+};