feat: add divlo.fr

components/Footer/index.tsx

@@ -0,0 +1,60 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { LanguageButton } from './LanguageButton'
+import { LanguageFlag } from './LanguageFlag'
+
+export const Footer: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <footer className='Footer text-center'>
+        <p className='Footer__text'>
+          <span className='important'>Divlo</span> | {t('common:allRightsReserved')}
+        </p>
+        <p className='Footer__lang'>
+          <LanguageButton lang='en'>{t('common:english')}</LanguageButton> |{' '}
+          <LanguageButton lang='fr'>{t('common:french')}</LanguageButton>
+        </p>
+      </footer>
+
+      <div className='Footer__flags'>
+        <LanguageFlag
+          lang='en'
+          imageLink='/images/flags/english_flag.png'
+          title={t('common:english')}
+        />
+        <LanguageFlag
+          lang='fr'
+          imageLink='/images/flags/french_flag.png'
+          title={t('common:french')}
+        />
+      </div>
+
+      <style jsx>
+        {`
+          .Footer {
+            border-top: var(--border-header-footer);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
+          .Footer__text {
+            margin: 20px 0 10px 0;
+          }
+          .Footer__lang {
+            margin: 0 0 20px 0;
+          }
+          .Footer__flags {
+            display: flex;
+            position: fixed;
+            bottom: 28px;
+            left: 32px;
+            z-index: 10;
+          }
+        `}
+      </style>
+    </>
+  )
+}