Migrated Developer Docs (#5683)

- Migrated developer docs to Twenty website

- Modified User Guide and Docs layout to include sections and
subsections

**Section Example:**
<img width="549" alt="Screenshot 2024-05-30 at 15 44 42"
src="https://github.com/twentyhq/twenty/assets/102751374/41bd4037-4b76-48e6-bc79-48d3d6be9ab8">

**Subsection Example:**
<img width="557" alt="Screenshot 2024-05-30 at 15 44 55"
src="https://github.com/twentyhq/twenty/assets/102751374/f14c65a9-ab0c-4530-b624-5b20fc00511a">


- Created different components (Tabs, Tables, Editors etc.) for the mdx
files

**Tabs & Editor**

<img width="665" alt="Screenshot 2024-05-30 at 15 47 39"
src="https://github.com/twentyhq/twenty/assets/102751374/5166b5c7-b6cf-417d-9f29-b1f674c1c531">

**Tables**

<img width="698" alt="Screenshot 2024-05-30 at 15 57 39"
src="https://github.com/twentyhq/twenty/assets/102751374/2bbfe937-ec19-4004-ab00-f7a56e96db4a">

<img width="661" alt="Screenshot 2024-05-30 at 16 03 32"
src="https://github.com/twentyhq/twenty/assets/102751374/ae95b47c-dd92-44f9-b535-ccdc953f71ff">

- Created a crawler for Twenty Developers (now that it will be on the
twenty website). Once this PR is merged and the website is re-deployed,
we need to start crawling and make sure the index name is
‘twenty-developer’
- Added a dropdown menu in the header to access User Guide and
Developers + added Developers to footer


https://github.com/twentyhq/twenty/assets/102751374/1bd1fbbd-1e65-4461-b18b-84d4ddbb8ea1

- Made new layout responsive

Please fill in the information for each mdx file so that it can appear
on its card, as well as in the ‘In this article’ section. Example with
‘Getting Started’ in the User Guide:

<img width="786" alt="Screenshot 2024-05-30 at 16 29 39"
src="https://github.com/twentyhq/twenty/assets/102751374/2714b01d-a664-4ddc-9291-528632ee12ea">

Example with info and sectionInfo filled in for 'Getting Started':

<img width="620" alt="Screenshot 2024-05-30 at 16 33 57"
src="https://github.com/twentyhq/twenty/assets/102751374/bc69e880-da6a-4b7e-bace-1effea866c11">


Please keep in mind that the images that are being used for Developers
are the same as those found in User Guide and may not match the article.

---------

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

packages/twenty-website/src/content/user-guide/functions/notes.mdx

@@ -0,0 +1,70 @@
+---
+title: Notes
+info: Explore how to efficiently manage notes within record pages in Twenty, including procedures for creating, formatting, commenting, saving, and deleting notes.
+icon: IconNote
+image: /images/user-guide/notes/notes_header.png
+sectionInfo: Learn how to connect Twenty to your other tools.
+---
+
+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 in the system is intuitive and dynamic. You can either:
+
+- Use the search function by pressing `cmd/ctrl + k`, then select 'Create note' from the list of quick actions.
+- Go to a `Record page` and select `+` at the top right of the page, or go to the Notes tab and press the `New Note` button.
+
+<img src="/images/user-guide/notes/add-note.png"style={{width:'100%'}}/>
+
+
+### Adding Content
+
+Start typing directly or press '/' to add elements like headings, files, or images instantly.
+
+### 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. 
+
+Highlight the text to see more formatting options like bold, italics, and alignment options. 
+
+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', 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" 
+    allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
+    style={{
+      position:'absolute',
+      top:0,
+      left:0,
+      width:'100%',
+      height:'100%',
+      borderRadius: '16px', 
+      border:'2px solid black'
+    }}
+    title="Export data"
+  ></iframe>
+</div>
+<script src="https://player.vimeo.com/api/player.js"></script>
+
+## Viewing Notes
+
+The system displays all your notes linked to a specific record under the Notes section on the corresponding `Record page`.
+
+## Commenting
+**Comments**: Work together effectively with your team members by adding comments on notes for updates, feedback, or discussions.
+
+## Saving And Deleting
+
+All edits and additions to the note are automatically saved. 
+
+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.
+
+<ArticleEditContent articleTitle="notes.mdx"></ArticleEditContent>