1 files changed, 75 insertions, 1 deletions
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3d4f6ff..886552c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,15 +6,89 @@ import { seo } from '@config/seo';
 import { NextPageWithLayout } from '@ts/types/app';
 import { loadTranslation } from '@utils/helpers/i18n';
 import HomePageContent from '@content/pages/homepage.mdx';
+import { ButtonLink } from '@components/Buttons';
+import styles from '@styles/pages/Home.module.scss';
+import { t } from '@lingui/macro';
 
 const Home: NextPageWithLayout = () => {
+  const CodingLinks = () => {
+    return (
+      <ul className={styles['links-list']}>
+        <li>
+          <ButtonLink target="/thematique/developpement-web">
+            {t`Web development`}
+          </ButtonLink>
+        </li>
+        <li>
+          <ButtonLink target="/projets">{t`Projects`}</ButtonLink>
+        </li>
+      </ul>
+    );
+  };
+
+  const ColdarkRepos = () => {
+    return (
+      <ul className={styles['links-list']}>
+        <li>
+          <ButtonLink
+            target="https://github.com/ArmandPhilippot/coldark"
+            isExternal={true}
+          >
+            Github
+          </ButtonLink>
+        </li>
+        <li>
+          <ButtonLink
+            target="https://gitlab.com/ArmandPhilippot/coldark"
+            isExternal={true}
+          >
+            Gitlab
+          </ButtonLink>
+        </li>
+      </ul>
+    );
+  };
+
+  const LibreLinks = () => {
+    return (
+      <ul className={styles['links-list']}>
+        <li>
+          <ButtonLink target="/thematique/libre">{t`Free`}</ButtonLink>
+        </li>
+        <li>
+          <ButtonLink target="/thematique/linux">{t`Linux`}</ButtonLink>
+        </li>
+      </ul>
+    );
+  };
+
+  const MoreLinks = () => {
+    return (
+      <ul className={styles['links-list']}>
+        <li>
+          <ButtonLink target="/contact">{t`Contact me`}</ButtonLink>
+        </li>
+        <li>
+          <ButtonLink target="/feed">{t`Subscribe`}</ButtonLink>
+        </li>
+      </ul>
+    );
+  };
+
+  const components = {
+    CodingLinks: CodingLinks,
+    ColdarkRepos: ColdarkRepos,
+    LibreLinks: LibreLinks,
+    MoreLinks: MoreLinks,
+  };
+
   return (
     <>
       <Head>
         <title>{seo.homepage.title}</title>
         <meta name="description" content={seo.homepage.description} />
       </Head>
-      <HomePageContent />
+      <HomePageContent components={components} />
     </>
   );
 };