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/ui/icons/SvgIcons.tsx

@@ -139,7 +139,9 @@ export const PullRequestIcon = ({ size = 'S', color = 'rgb(179,179,179)' }) => {
 export const HeartIcon = ({ size = 'S', color = 'rgb(179,179,179)' }) => {
   const dimension = getSize(size);
   return (
-    <div style={{ width: dimension, height: dimension }}>
+    <span
+      style={{ width: dimension, height: dimension, display: 'inline-block' }}
+    >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20" fill="none">
         <path
           d="M18.513 10.572L11.013 18L3.513 10.572C3.0183 10.0906 2.62864 9.51201 2.36854 8.87263C2.10845 8.23325 1.98356 7.54694 2.00173 6.85693C2.01991 6.16691 2.18076 5.48813 2.47415 4.86333C2.76755 4.23853 3.18713 3.68125 3.70648 3.22657C4.22583 2.7719 4.8337 2.42968 5.49181 2.22147C6.14991 2.01327 6.844 1.94358 7.53036 2.0168C8.21673 2.09001 8.8805 2.30455 9.47987 2.6469C10.0792 2.98925 10.6012 3.45199 11.013 4.00599C11.4265 3.45602 11.9491 2.99731 12.5481 2.6586C13.1471 2.31988 13.8095 2.10844 14.4939 2.03751C15.1784 1.96658 15.8701 2.03769 16.5258 2.24639C17.1815 2.45508 17.787 2.79687 18.3045 3.25036C18.8221 3.70385 19.2404 4.25928 19.5334 4.88189C19.8264 5.50449 19.9877 6.18088 20.0073 6.8687C20.0269 7.55653 19.9043 8.24099 19.6471 8.87924C19.39 9.5175 19.0039 10.0958 18.513 10.578"
@@ -149,7 +151,7 @@ export const HeartIcon = ({ size = 'S', color = 'rgb(179,179,179)' }) => {
           strokeLinejoin="round"
         />
       </svg>
-    </div>
+    </span>
   );
 };
 

packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx

@@ -30,7 +30,7 @@ const ExternalLinkItem = styled.a`
 `;
 
 const ActivePage = styled.span`
-  color: ${Theme.text.color.secondary};
+  color: ${Theme.text.color.primary};
   font-weight: ${Theme.font.weight.medium};
 `;
 

packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx

@@ -9,7 +9,7 @@ const Container = styled.div`
   padding: 0px 96px 0px 96px;
   @media (max-width: 809px) {
     width: 100%;
-    padding: 0px 12px 0px 12px;
+    padding: 0px 24px 0px 24px;
   }
 `;
 

packages/twenty-website/src/app/_components/ui/layout/FooterDesktop.tsx

@@ -19,7 +19,7 @@ const FooterContainer = styled.div`
   color: rgb(129, 129, 129);
   gap: 32px;
   @media (max-width: 809px) {
-    display: none;
+    padding: 36px 24px;
   }
 `;
 
@@ -28,6 +28,9 @@ const LeftSideFooter = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
+  @media (max-width: 809px) {
+    display: none;
+  }
 `;
 
 const RightSideFooter = styled.div`
@@ -35,6 +38,10 @@ const RightSideFooter = styled.div`
   justify-content: space-between;
   gap: 48px;
   height: 146px;
+  @media (max-width: 809px) {
+    flex-direction: column;
+    height: fit-content;
+  }
 `;
 
 const RightSideFooterColumn = styled.div`
@@ -96,6 +103,9 @@ export const FooterDesktop = () => {
           </RightSideFooterColumn>
           <RightSideFooterColumn>
             <RightSideFooterColumnTitle>Other</RightSideFooterColumnTitle>
+            <RightSideFooterLink href="/contributors">
+              Contributors
+            </RightSideFooterLink>
             <RightSideFooterLink href="/oss-friends">
               OSS Friends
             </RightSideFooterLink>
@@ -120,7 +130,7 @@ export const FooterDesktop = () => {
       >
         <div>
           <span style={{ fontFamily: 'Inter, sans-serif' }}>©</span>
-          2023 Twenty PBC
+          {new Date().getFullYear()} Twenty PBC
         </div>
         <div
           style={{

packages/twenty-website/src/app/_components/ui/layout/header/styled.ts

@@ -119,22 +119,26 @@ export const LinkNextToCTA = styled.a`
 export const HamburgerContainer = styled.div`
   height: 44px;
   width: 44px;
-  cursor: pointer;
   position: relative;
+
   input {
+    cursor: pointer;
     height: 44px;
     width: 44px;
     opacity: 0;
+    z-index: 1;
   }
 
   #line1 {
     transition: transform 0.5s;
     transition-timing-function: ease-in-out;
+    z-index: 0;
   }
 
   #line2 {
     transition: transform 0.5s;
     transition-timing-function: ease-in-out;
+    z-index: 0;
   }
 
   #menu-input:checked ~ #line1 {
@@ -154,6 +158,7 @@ export const HamburgerLine1 = styled.div`
   width: 20px;
   border-radius: 10px;
   background-color: rgb(179, 179, 179);
+  z-index: 0;
 `;
 
 export const HamburgerLine2 = styled.div`
@@ -164,6 +169,7 @@ export const HamburgerLine2 = styled.div`
   width: 20px;
   border-radius: 10px;
   background-color: rgb(179, 179, 179);
+  z-index: 0;
 `;
 
 export const NavOpen = styled.div`