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/getting-started/create-workspace.mdx

@@ -0,0 +1,53 @@
+---
+title: Create a Workspace
+info: Follow a step-by-step guide on how to register on Twenty, choose a subscription plan, confirm your payment and set up your account, with additional advice on seeking assistance if needed.
+icon: IconNote
+image: /images/user-guide/create-workspace/workspace-cover.png
+sectionInfo: Discover Twenty, an open-source CRM.
+---
+
+## Step 1: Registration
+1. Navigate to <ArticleLink href="https://app.twenty.com/sign-up">Twenty Sign Up</ArticleLink>.
+2. Select your preferred sign-up method:
+    - **Continue with Google** for Google account registration.
+    - Or, **Continue With Email** for email registration.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927066829?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>
+
+## Step 2: Choosing A Subscription Plan
+Choose a subscription plan after completing the 7-day free trial. Twenty offers the most competitive pricing in the market.
+
+### Monthly Plan
+At $9 per seat per month, this plan offers absolute freedom to cancel at any time.
+
+### Annual Plan
+At $90 per seat per year, this plan provides an annual saving of $18 compared to the Monthly Plan.
+
+Both plans give full access to all Twenty features, including unlimited contacts, email integration, custom objects, API & Webhooks, and frequent updates.
+
+<img src="/images/user-guide/create-workspace/choose-plan.png" style={{width:'100%'}}/>
+
+## Step 3: Payment Confirmation & Account Setup
+Post payment approval via Stripe, you're directed to create your workspace and user profile. Remember that you can cancel your subscription anytime.
+
+## Support
+For queries or help, connect with the dedicated support team at [contact@twenty.com](mailto:contact@twenty.com) or send a message on <ArticleLink href="https://discord.gg/cx5n4Jzs57">Discord</ArticleLink>
+
+<ArticleEditContent articleTitle="create-workspace.mdx"></ArticleEditContent>