Website UI design (#4829)

**Fixed different issues** :
 
- Multiple CSS fixes: font-size, colors, margins, z-index ...
- Fixed hover on contributor avatars
- Added link to contributors in footer
- Made the year in the footer dynamic (2023 --> 2024)
- Added name of contributor in "Thank you" section of Contributor page
- Added footer in small screens
- Made Activity Log Responsive 
- Fixed bug in "saving issues to DB", title was null everywhere. I
needed to implement an "upsert" behaviour to update the existing
database on init

**To be noted :** 

There is the following bug on production happening on mobile when you
refresh a second time :

<img width="1440" alt="Screenshot 2024-04-05 at 01 30 58"
src="https://github.com/twentyhq/twenty/assets/102751374/b935b07a-63dc-463d-8dcb-070ad4ef6db0">


It seems to be related to the following issue on mdx :
[https://github.com/hashicorp/next-mdx-remote/issues/350](https://github.com/hashicorp/next-mdx-remote/issues/350)

I added the following code that fixed this bug for me in development
(this needs to be tested in production) :

```
const serialized = await serialize(content, {
    mdxOptions: {
      development: process.env.NODE_ENV === 'development',
    }
  })
```

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/src/app/_components/releases/Line.tsx

@@ -9,17 +9,17 @@ const StyledLineContainer = styled.div`
 
   @media (max-width: 810px) {
     width: auto;
-    margin: 24px 0;
     display: block;
+    margin: 24px 0px 64px;
   }
 `;
 
 const StyledLine = styled.div`
   height: 1px;
   background-color: #d9d9d9;
-  margin-bottom: 48px;
+  margin-bottom: 80px;
   margin-left: 148px;
-  margin-top: 48px;
+  margin-top: 40px;
   width: 100%;
 
   @media (max-width: 810px) {

packages/twenty-website/src/app/_components/releases/Release.tsx

@@ -6,6 +6,7 @@ import { compileMDX } from 'next-mdx-remote/rsc';
 import remarkBehead from 'remark-behead';
 import gfm from 'remark-gfm';
 
+import { Theme } from '@/app/_components/ui/theme/theme';
 import { ReleaseNote } from '@/app/releases/api/route';
 
 const StyledContainer = styled.div`
@@ -16,7 +17,6 @@ const StyledContainer = styled.div`
 
   @media (max-width: 810px) {
     width: auto;
-    margin: 24px 0;
     display: block;
   }
 `;
@@ -35,17 +35,19 @@ const StyledVersion = styled.div`
     font-size: 20px;
     flex-flow: row;
     justify-content: space-between;
+    margin-bottom: 24px;
   }
 `;
 
 const StyledRelease = styled.span`
-  color: #141414;
+  color: ${Theme.text.color.quarternary};
+  line-height: 140%;
 `;
 
 const StyledDate = styled.span`
-  color: #474747;
-  font-size: 16px;
+  color: ${Theme.text.color.secondary};
   font-weight: 400;
+  font-size: ${Theme.font.size.sm};
 `;
 
 const StlyedContent = styled.div`
@@ -54,16 +56,20 @@ const StlyedContent = styled.div`
   gap: 64px;
 
   h3 {
-    color: #141414;
+    color: ${Theme.text.color.primary};
+    font-weight: 700;
     font-size: 40px;
     margin: 0;
   }
 
   p {
-    color: #474747;
+    color: ${Theme.text.color.secondary};
+    font-family: ${Theme.font.family};
     font-size: 16px;
     line-height: 28.8px;
     font-weight: 400;
+    margin: 40px 0px;
+    text-align: justify;
   }
 
   img {
@@ -73,16 +79,16 @@ const StlyedContent = styled.div`
   @media (max-width: 810px) {
     h3 {
       font-size: 24px;
-      margin: 24px 0 40px;
     }
   }
 `;
 
 const gabarito = Gabarito({
-  weight: ['400', '500'],
+  weight: ['400', '500', '600', '700'],
   subsets: ['latin'],
   display: 'swap',
   adjustFontFallback: false,
+  variable: '--font-gabarito',
 });
 
 export const Release = async ({ release }: { release: ReleaseNote }) => {
@@ -92,6 +98,7 @@ export const Release = async ({ release }: { release: ReleaseNote }) => {
       source: release.content,
       options: {
         mdxOptions: {
+          development: process.env.NODE_ENV === 'development',
           remarkPlugins: [gfm, [remarkBehead, { depth: 2 }]],
         },
       },