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/user-guide/UserGuideCard.tsx

@@ -9,27 +9,42 @@ const StyledContainer = styled.div`
   color: ${Theme.border.color.plain};
   border: 2px solid ${Theme.border.color.plain};
   border-radius: ${Theme.border.radius.md};
-  padding: ${Theme.spacing(6)};
   gap: ${Theme.spacing(4)};
   display: flex;
   flex-direction: column;
   cursor: pointer;
-  width: 348px;
+  width: 340px;
+
+  &:hover {
+    box-shadow: -8px 8px 0px -4px ${Theme.color.gray60};
+  }
+
+  @media (max-width: 385px) {
+    width: 280px;
+  }
 `;
 
 const StyledHeading = styled.div`
   font-size: ${Theme.font.size.lg};
   color: ${Theme.text.color.primary};
+  padding: 0 16px;
+  font-weight: ${Theme.font.weight.medium};
+  @media (max-width: 800px) {
+    font-size: ${Theme.font.size.base};
+  }
 `;
 
 const StyledSubHeading = styled.div`
-  font-size: ${Theme.font.size.sm};
+  font-size: ${Theme.font.size.xs};
   color: ${Theme.text.color.secondary};
   font-family: ${Theme.font.family};
+  padding: 0 16px 24px;
+  font-weight: ${Theme.font.weight.regular};
+  line-height: 21px;
 `;
 
 const StyledImage = styled.img`
-  width: 300px;
+  border-bottom: 1.5px solid #14141429;
 `;
 
 export default function UserGuideCard({