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/other/tips.mdx

@@ -0,0 +1,92 @@
+---
+title: Tips 
+info: Discover tips and tricks for optimizing your experience, including user and workspace management, personalization settings, and navigation enhancements.
+icon: IconInfoCircle
+image: /images/user-guide/tips/light-bulb.png
+sectionInfo: Discover tips and tricks to optimize your experience.
+---
+
+## Update workspace name & logo
+
+Workspace admins can edit its name and logo in settings. 
+
+- From the sidebar, go to <b>Settings</b>. 
+- Under <b>Workspace</b>, go to <b>General</b>.
+- Edit the name and logo. The system will automatically save your changes.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927915481?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>
+
+## Enable dark mode 
+
+Not a fan of light mode? Switch to dark mode with these steps:
+
+- From the sidebar, go to <b>Settings</b>. 
+- Under <b>User</b>, go to <b>Appearance</b>.
+Select **Dark**. The system will automatically save your changes.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927916570?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>
+
+## Account settings 
+
+Configure your user account and set your preferences. 
+
+- From the sidebar, go to <b>Settings</b>. 
+- Under <b>User</b>, go to <b>Profile</b> to edit your name and profile picture. You can upload PNGs, GIFs, and JPEGs.
+- Manage your accounts and configure your email and calendar settings in <b>Accounts</b>. 
+- The system will automatically save your changes.
+
+## Invite & manage members
+
+Admins can invite new members any time. 
+
+- From the sidebar, go to <b>Settings</b>. 
+- Under <b>Workspace</b>, go to <b>Members</b>.
+- Use the invite link to add more members to your workspace or delete existing ones.
+
+## Quick Search 
+
+You'll see a search bar at the top of your sidebar. You can also bring up the command bar with the `cmd/ctrl + k` shortcut to navigate through your workspace, and find people, companies, notes, and more. 
+
+The command bar also supports shortcuts for navigation.  
+
+## Add Records To Favorites
+
+You can add records to your favorites for quick access. To do so, expand the record you want to add, and click on the heart icon on the top right. You'll now be able to see your favorite records in your sidebar right above your workspace. 
+
+<img src="/images/user-guide/tips/favorites.png" style={{width:'100%', maxWidth:'800px'}}/>
+
+<ArticleEditContent articleTitle="tips.mdx"></ArticleEditContent>