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

@@ -0,0 +1,53 @@
+---
+title: Emails
+info: Understand the concept of email synchronization in Twenty, including how to read synced emails, connect new mailboxes, and set sharing levels.
+icon: IconChecklist
+image: /images/user-guide/emails/emails_header.png
+sectionInfo: Learn how to connect Twenty to your other tools.
+---
+
+## Email Synchronization
+
+The system links emails from known contacts directly to their CRM records, keeping all communication up to date. It's important to avoid syncing emails from impersonal addresses such as team@ and support@, or from personal email providers like Gmail or Outlook, to ensure privacy and relevance.
+
+### Reading an Email
+
+Go to a specific `Person` or `Company` record page, then select the `Emails` tab to view synced emails instantly. Click on an email to open it.
+
+<img src="/images/user-guide/emails/show-inbox.png" style={{width:'100%'}}/>
+
+You can customize how you share and manage your emails through the settings. 
+
+## Mailbox Settings
+
+### Connecting a New Mailbox
+
+To connect a Gmail mailbox, go to `Settings` > `Accounts`, then click the `Add account` button. You can add several mailboxes to your account.
+
+After connecting a mailbox, visit the `Emails` tab and select the desired mailbox to customize its settings.
+
+The initial import may take some time, and it will be followed by automatic updates every ten minutes.
+
+<img src="/images/user-guide/emails/connect-account.png" style={{width:'100%'}}/>
+
+### Sharing Levels
+
+From here, you can choose different levels of sharing for outbound and inbound emails:
+
+-  **Metadata Only**: Share only the basic information of the email (sender, recipient, date, and time).
+-  **Subject and Metadata**: Share the subject line of the email along with the metadata.
+-  **All Email Content**: Share the entire content of the email, including attachments.
+
+<img src="/images/user-guide/emails/privacy-settings.png" style={{width:'100%'}}/>
+
+### Contacts Auto-Creation
+
+Contact auto-creation is a handy built-in feature. This default feature automatically adds email contacts not already in your CRM, boosting your contact list without any extra effort on your part. To manage this feature, go to `Settings` > `Email`. You can toggle it on or off. Remember, turning it off means that all new email contacts must be manually entered into the CRM.
+
+<img src="/images/user-guide/emails/auto-creation.png" style={{width:'100%'}}/>
+
+### Upcoming Features
+
+Soon, you will have the capability to send emails, view attachments, and request access to email content that you're not allowed to read.
+
+<ArticleEditContent articleTitle="emails.mdx"></ArticleEditContent>