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/import-export-data.mdx

@@ -5,7 +5,7 @@ icon: IconNote
 image: /images/user-guide/placeholder-header.png
 ---
 
-# Import data
+## Import data
 
 You can import People and Companies data into Twenty from other apps using a .csv, .xslx, or .xsl file. In the <b>Companies</b> or <b>People</b> page, click on <b>Options</b> and then on <b>Import</b>. 
 
@@ -13,7 +13,7 @@ Upload your file, match the columns, check your data and import it.
 
 <img src="/images/user-guide/import-export-data/match-columns.png" style={{width:'100%'}}/>
 
-# Export data
+## Export data
 
 To export data from an object:
 
@@ -23,7 +23,7 @@ To export data from an object:
 4. Click on `Export`.
 5. Select the save location for the CSV data. Note that exporting may take time with a large record count.
 
-<div style={{padding:'71.24% 0 0 0', position:'relative'}}>
+<div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/926226303?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
     frameborder="0" 
@@ -40,4 +40,6 @@ To export data from an object:
     title="Export data"
   ></iframe>
 </div>
-<script src="https://player.vimeo.com/api/player.js"></script>
+<script src="https://player.vimeo.com/api/player.js"></script>
+
+<ArticleEditContent articleTitle="import-export-data.mdx"></ArticleEditContent>