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/content/user-guide/notes.mdx

@@ -7,7 +7,7 @@ image: /images/user-guide/notes/notes_header.png
 
 Manage your record-linked notes efficiently using the powerful **Notes** feature. This guide walks through how to create, format, comment, and delete notes seamlessly within record pages. 
 
-# Creating Notes
+## Creating Notes
 
 Creating notes in the system is intuitive and dynamic. You can either:
 
@@ -17,11 +17,11 @@ Creating notes in the system is intuitive and dynamic. You can either:
 <img src="/images/user-guide/notes/add-note.png"style={{width:'100%'}}/>
 
 
-## Adding Content
+### Adding Content
 
 Start typing directly or press '/' to add elements like headings, files, or images instantly.
 
-## Format Content
+### Format Content
 
 You can format your notes right from the editor. Use markdown syntax, press the `/` key or click on the `+` icon on the editor to see the different block options, such as headings, tables, and lists. You can also attach images to your note. 
 
@@ -29,7 +29,7 @@ Highlight the text to see more formatting options like bold, italics, and alignm
 
 You can also change the background color and text color of each block to highlight important things in your note. To do so, hover over the block you want to format and click on the `⋮⋮` icon besides the `+` icon. Click on <b>Colors</b> to open up all color options for both the text and the background.
 
-<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927896302?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
     frameborder="0" 
@@ -48,14 +48,14 @@ You can also change the background color and text color of each block to highlig
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>
 
-# Viewing Notes
+## Viewing Notes
 
 The system displays all your notes linked to a specific record under the Notes section on the corresponding `Record page`.
 
-# Commenting
+## Commenting
 **Comments**: Work together effectively with your team members by adding comments on notes for updates, feedback, or discussions.
 
-# Saving And Deleting
+## Saving And Deleting
 
 All edits and additions to the note are automatically saved. 
 
@@ -64,4 +64,6 @@ To delete a note:
 1. Open the note you wish to remove by clicking on it from within the `Record page`.
 2. Click the trashcan icon located in the top right corner of the screen.
 
-Please be aware that deleting a note is permanent and can't be undone.
+Please be aware that deleting a note is permanent and can't be undone.
+
+<ArticleEditContent articleTitle="notes.mdx"></ArticleEditContent>