User guide layout (#5016)

- Modified CSS: font-size, colors, margins...

- Added an ArticleContent Component that will be used for the changelog
and user guide articles, which contains the styles for each titles,
paragraphs, images etc.

- Added link to User Guide in footer

- Added a UserGuideWarning Component: 

<img width="332" alt="Screenshot 2024-04-17 at 18 14 48"
src="https://github.com/twentyhq/twenty/assets/102751374/0f5c601b-a2c0-4c63-baeb-1990d65fc332">

- Added a UserGuideEditContent Component:

<img width="394" alt="Screenshot 2024-04-17 at 18 16 24"
src="https://github.com/twentyhq/twenty/assets/102751374/6c7c3bd4-c5bb-4d02-8f93-bd99bc30ce7b">

- Added a UserGuideLink Component (for usage in MDX to allow links to
open in new tab)

- Fixed table of content

- Made responsive

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

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

@@ -17,7 +17,6 @@ const StyledLineContainer = styled.div`
 const StyledLine = styled.div`
   height: 1px;
   background-color: #d9d9d9;
-  margin-bottom: 80px;
   margin-left: 148px;
   margin-top: 40px;
   width: 100%;

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

@@ -4,6 +4,7 @@ import { JSXElementConstructor, ReactElement } from 'react';
 import styled from '@emotion/styled';
 import { Gabarito } from 'next/font/google';
 
+import { ArticleContent } from '@/app/_components/ui/layout/articles/ArticleContent';
 import MotionContainer from '@/app/_components/ui/layout/LoaderAnimation';
 import { Theme } from '@/app/_components/ui/theme/theme';
 import { ReleaseNote } from '@/app/releases/api/route';
@@ -28,13 +29,15 @@ const StyledVersion = styled.div`
   flex-flow: column;
   align-items: start;
   font-weight: 500;
+  margin-top: 64px;
 
   @media (max-width: 810px) {
     width: 100%;
     font-size: 20px;
     flex-flow: row;
     justify-content: space-between;
-    margin-bottom: 24px;
+    margin-bottom: -48px;
+    margin-top: 0px;
   }
 `;
 
@@ -49,39 +52,6 @@ const StyledDate = styled.span`
   font-size: ${Theme.font.size.sm};
 `;
 
-const StlyedContent = styled.div`
-  flex: 1;
-
-  gap: 64px;
-
-  h3 {
-    color: ${Theme.text.color.primary};
-    font-weight: 700;
-    font-size: 40px;
-    margin: 0;
-  }
-
-  p {
-    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 {
-    max-width: 100%;
-  }
-
-  @media (max-width: 810px) {
-    h3 {
-      font-size: 24px;
-    }
-  }
-`;
-
 const gabarito = Gabarito({
   weight: ['400', '500', '600', '700'],
   subsets: ['latin'],
@@ -108,7 +78,7 @@ export const Release = ({
               : release.date}
           </StyledDate>
         </StyledVersion>
-        <StlyedContent>{mdxReleaseContent}</StlyedContent>
+        <ArticleContent>{mdxReleaseContent}</ArticleContent>
       </StyledContainer>
     </MotionContainer>
   );

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

@@ -3,12 +3,13 @@
 import styled from '@emotion/styled';
 
 const StyledTitle = styled.div`
-  margin: 64px auto;
+  margin: 64px auto 0px;
   text-align: center;
   font-size: 1.8em;
 
   @media (max-width: 810px) {
     font-size: 1em;
+    margin: 64px auto;
   }
 `;
 const StyledHeader = styled.h1`