feat: add translation system

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

@@ -0,0 +1,30 @@
+'use client';
+
+import { ReactElement } from 'react';
+import { Translate, useTranslation } from '../../_translation';
+import { HomeTranslation } from '../homeTranslation';
+
+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>
+  );
+};
+
+export default Translate(About, 'home');

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

@@ -0,0 +1,40 @@
+'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 { LanguageContext } from '../../_language';
+
+export const Header = (): ReactElement => {
+  const [selectedLanguage, changeSelectedLanguage]: LanguageContext = useContext(LanguageContext);
+  // todo: translate
+  // const {header}: HomeTranslation = useTranslation()
+
+  return (
+    <Navbar expand='lg' data-bs-theme='dark'>
+      <Container>
+        <Navbar.Brand href='/'>FreelanceConnect</Navbar.Brand>
+        <Navbar.Toggle aria-controls='main-nav' />
+        <Navbar.Collapse id='main-nav'>
+          <Nav className='ms-auto'>
+            <Nav.Link href='#about'>À propos</Nav.Link>
+            <Nav.Link href='#schedule'>Programme</Nav.Link>
+            <Nav.Link href='#speakers'>Conférenciers</Nav.Link>
+            <Nav.Link href='#tickets'>Billets</Nav.Link>
+            <Nav.Link href='#sponsors'>Sponsors</Nav.Link>
+            <NavDropdown className='bg-opacity-10' title={`${selectedLanguage.toUpperCase()}`} id='translation-dropdown'>
+              <NavDropdown.Item as='button' onClick={() => changeSelectedLanguage('en')}>
+                🇬🇧&ensp;English (EN)
+              </NavDropdown.Item>
+              <NavDropdown.Item as='button' onClick={() => changeSelectedLanguage('fr')}>
+                🇫🇷&ensp;Français (FR)
+              </NavDropdown.Item>
+            </NavDropdown>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};

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

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

src/app/(home)/homeTranslation.ts

@@ -0,0 +1,8 @@
+export type HomeTranslation = {
+  about: {
+    title: string;
+    subtitle: string;
+    description: string;
+    learnMore: string;
+  };
+};