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/objects.mdx

@@ -5,31 +5,31 @@ icon: IconChecklist
 image: /images/user-guide/placeholder-header.png
 ---
 
-# Standard Objects
+## Standard Objects
 
 Standard objects are predefined entities in your workspace that offer integrated, standardized intelligence requiring no extra configuration. They're part of a shared data model accessible to all users of Twenty.
 
 <img src="/images/user-guide/objects/standard-objects.png"style={{width:'100%'}}/>
 
-## People
+### People
 
 The `People` object aggregates customer relations data. It includes contact details and interaction history, providing a comprehensive view of your business's customer interactions.
 
-## Company
+### Company
 
 The `Companies` object consolidates business account information. It encompasses all pertinent data such as industry, size, location, and contact personnel, thereby offering an integrated perspective of your business's organizational connections. It is both link to the People and Opportunities objects.
 
-## Opportunities
+### Opportunities
 
 The `Opportunities` object encapsulates deal-related data. It tracks the progression of potential sales, from prospecting to closure, recording stages, deal sizes, associated accounts, and expected closure dates. This provides a well-rounded view of your business's sales pipeline. 
 
-# Custom objects
+## Custom objects
 
 Custom objects are objects that you can create to store information that's unique to your organization. They're not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for. For example, if you're SpaceX, you may want to create a custom object for Rockets and Launches.
 
 <img src="/images/user-guide/objects/custom-objects.png"style={{width:'100%'}}/>
 
-## Creating a new custom object 
+### Creating a new custom object 
 
 To create a new custom object:
 
@@ -37,7 +37,7 @@ To create a new custom object:
 2. Under Workspace, go to Data model. Here you'll be able to see an overview of all your existing Standard and Custom objects (both active and disabled).
 
 
-<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/926288174?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
     frameborder="0" 
@@ -58,7 +58,7 @@ To create a new custom object:
 
 3. Click on `+ New object` at the top, then choose Custom as the object type. Enter the name (both singular and plural), choose an icon, and add a description for your custom object and hit Save (at the top right). Using Listing as an example of custom object, the singular would be "listing" and the plural would be "listings" along with a description like "Listings that hosts created to showcase their property."
 
-<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/926293493?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
     frameborder="0" 
@@ -79,4 +79,6 @@ To create a new custom object:
 
 4. Once you create your custom object, you'll be able to manage it. You can edit the name, icon and description, view the different fields, and add more fields.
 
-<img src="/images/user-guide/objects/customize-fields.png"style={{width:'100%'}}/>
+<img src="/images/user-guide/objects/customize-fields.png"style={{width:'100%'}}/>
+
+<ArticleEditContent articleTitle="objects.mdx"></ArticleEditContent>