Created the user-guide content (Text and illustrations) (#4683)

* Second attempt

* Small image optimizations

---------

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

.github/vale-styles/vocabularies/Base/accept.txt

@@ -0,0 +1,14 @@
+kanban
+kanbans
+Kanban
+Kanbans
+automation
+automations
+Automation
+Automations
+S3
+PNGs
+PNG
+JPEG
+JPEGs
+US

packages/twenty-website/src/content/user-guide/api-webhooks.mdx

@@ -0,0 +1,47 @@
+---
+title: API Keys
+info: Learn how to manage API keys and Webhooks in Twenty.
+icon: IconApi
+image: /images/user-guide/placeholder-header.png
+---
+
+## API Keys
+
+API keys allow automated access to your CRM data, synchronize data with other systems, and create custom integrations or solutions. 
+
+For example, you can use them to retrieve details of a specific `Person` or `Company` record, such as their name or address.
+
+## generate an API key
+
+1. Go to Settings in the sidebar on the left.
+2. Under Workspace, go to Developers. Here, you'll see a list of active keys that you or your team have created.
+3. To generate a new key, click on `+ Create key` at the top right. 
+4. Give your API key a name, an expiration date, and a logo.
+5. Hit save to see your API key. 
+6. Since the key is only visible once, make sure you store it somewhere safe. 
+
+<div class="warning">
+Since your API key gives access to sensitive information, you shouldn't share it with services you don't fully trust. If leaked, someone can use it maliciously. If your API key's security is compromised, immediately disable it and generate a new one.
+</div>
+
+
+## Regenerating an API key
+
+To regenerate an API key, click on the key you want to regenerate. You'll then be able to see a button to regenerate the API key.
+
+# Webhooks
+
+Webhooks allow for immediate updates to your specified URL about changes or events related to your customer data.
+
+For instance, a webhook can alert your system in real-time when someone creates a new person record or updates an existing note.
+
+## Creating Webhooks
+
+1. From Settings -> Developers, click `+` Create webhook.
+2. Enter your URL.
+3. Click Save.
+
+## Deleting Webhooks
+
+1. In Developers, find your webhook.
+2. Click on your webhook and press **Delete** to remove it. A confirmation popup will appear to confirm.

packages/twenty-website/src/content/user-guide/create-workspace.mdx

@@ -0,0 +1,50 @@
+---
+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/placeholder-header.png
+---
+
+# Step 1: Registration
+1. Navigate to [Twenty Sign Up](https://app.twenty.com/sign-up).
+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'}}>
+  <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 [Discord](https://discord.gg/cx5n4Jzs57)

packages/twenty-website/src/content/user-guide/emails.mdx

@@ -0,0 +1,50 @@
+---
+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
+---
+
+# 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.

packages/twenty-website/src/content/user-guide/fields.mdx

@@ -0,0 +1,86 @@
+---
+title: Fields   
+info: Understand the role of fields and how to handle them.
+icon: IconChecklist
+image: /images/user-guide/placeholder-header.png
+---
+
+
+# About Fields
+
+Fields in an object are akin to the column names in an Excel spreadsheet, indicating the type of data stored — such as text, numbers, or dates — under specific names. These fields can be standard (created by default) or custom (user-created).
+
+## Standard Fields
+
+The platform includes Standard Fields by default as predefined fields designed to meet common, universal requirements in business modeling.
+
+As an example, "First Name" and "Last Name" are standard fields within the `people object`. They're text fields, meant to capture and store the respective names of individuals. 
+
+As essential parts of the data model, you can't delete them, but only deactivate them.
+
+<img src="/images/user-guide/fields/standard-fields.png" style={{width:'100%'}}/>
+
+## Custom Fields
+
+A `Custom Field` is a user-defined attribute you can add to a standard or custom object to store specific information that's not captured by the default fields. These fields can carry different types of data such as text, number, date, Select values, etc. Custom fields allow you to tailor your database to the unique needs of your business.
+
+For instance, a custom field for SpaceX could be "Rocket Active Status", indicating if a rocket is operational.
+
+<img src="/images/user-guide/fields/custom-fields.png"style={{width:'100%'}}/>
+
+# Create a Custom Field
+
+To add a custom field to any object, follow these steps:
+	1.	Go to `Settings` in the left sidebar.
+	2.	Go to `Data Model`, then select the object you wish to customize
+	3.	Proceed by clicking on `Add Field`.
+	4.	Choose a field name and type that suits your requirements. Consider adding a field description for better understanding.
+
+Your newly created field is now available within the application's fields. To display it on a specific view, click on the options menu, then select "Fields".
+
+<div style={{padding:'71.15% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927628219?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>
+
+For creating `Custom Fields` in a more expeditious manner, make use of the **+** button located in the top right of the chosen object table, and then select the Customize fields option. This pathway affords you rapid access to the Data Model Settings page.
+
+<img src="/images/user-guide/fields/quick-new-field.png" style={{width:'100%'}}/>
+
+# Deactivate a field
+
+You can deactivate a field in the app to stop it from functioning without disrupting your data model. Deactivation is like a soft deletion, making the field unavailable for use in the app.
+
+Here's how you can do it:
+
+1. Locate the field you wish to deactivate. You'll find these under various object sections.
+
+2. To the right of the line, three vertically aligned dots symbolize a menu button. Click on this to unveil a dropdown list of options.
+
+3. In the dropdown menu, find and click on the "deactivate" option.
+
+<img src="/images/user-guide/fields/deactivate-field.png" style={{width:'100%'}}/>
+
+And, voila! You've deactivated a field. But what does this imply for your CRM operations?
+
+1. **In-App Functionality:** A deactivated field will no longer be functional within the app. You won't be able to assign values to these fields anymore.
+
+2. **Relation Fields:** If the deactivated field happens to be a relation field, the system doesn't delete the existing relation. It does prevent you from assigning or linking records to each other via this field in the app, moving forward.
+
+3. **API:** You can still use deactivated Fields and their data through the API.
+
+You can reactivate Standard and Custom Fields or have the option to permanently delete them.

packages/twenty-website/src/content/user-guide/github.mdx

@@ -0,0 +1,54 @@
+---
+title: GitHub
+info: Learn about the Twenty GitHub repository and the variety of resources it hosts including source code, documentation, and discussions.
+icon: IconGitHub
+image: /images/user-guide/github/github-header.png
+---
+
+# About
+
+The Twenty GitHub repository hosts a vast array of resources like source code, documentation, discussions, and issue tracking. This is where you will be able to access the full code behind Twenty.
+
+[Visit Twenty on Github](https://github.com/twentyhq/twenty)
+
+# Contributing
+
+Contributing to the Twenty project on GitHub is a rewarding way to help improve the software you use. Whether you're fixing bugs, suggesting features, or improving documentation, your contributions are welcome.
+
+## Reporting Issues
+
+Encounter an issue? [Create an issue](https://github.com/twentyhq/twenty/issues/new) on GitHub, providing as much detail as possible.
+
+<img src="/images/user-guide/github/new-issue.png" style={{width:'100%'}}/>
+
+## Suggesting Features
+
+What improvements would you like to see on Twenty? No matter your technical know-how, you can join [the conversation here](https://github.com/twentyhq/twenty/discussions).
+
+<img src="/images/user-guide/github/github-conversations.png" style={{width:'100%'}}/>
+
+## Coding a feature
+
+Start your journey by finding beginner-friendly tasks:
+
+1. Navigate to the **[Issues](https://github.com/twentyhq/twenty/issues)** tab on the Twenty repository.
+2. Filter by **[Good First Issue](https://github.com/twentyhq/twenty/labels/good%20first%20issue)** label to find tasks suited for newcomers.
+3. Pick an issue, fork the repository, and start contributing.
+
+<img src="/images/user-guide/github/good-first-issues.png" style={{width:'100%'}}/>
+
+Ensure you're assigned to the issue to avoid overlapping work with other contributors.
+
+## Code of Conduct
+
+Remember to adhere to Twenty's [Code of Conduct](https://github.com/twentyhq/twenty/blob/main/.github/CODE_OF_CONDUCT.md) throughout your contribution process.
+
+# Discord
+
+If you have any question, for example on how to contribute, join the community on [Discord](https://discord.gg/cx5n4Jzs57)
+
+<img src="/images/user-guide/github/discord-welcome.png" style={{width:'100%'}}/>
+
+<br/>
+<br/>
+Thank you for contributing to Twenty ❤️

packages/twenty-website/src/content/user-guide/glossary.mdx

@@ -0,0 +1,43 @@
+---
+title: Glossary
+info: Get familiar with essential terminology used in Twenty.
+icon: IconVocabulary
+image: /images/user-guide/placeholder-header.png
+---
+
+# Company & People
+The CRM has two fundamental types of records:
+- A `Company` represents a business or organization.
+- `People` represent your company's current and prospective customers or clients.
+
+# Kanban
+A `Kanban` is a way to track a business process. Pipelines are present within a *module* and have *stages*:
+- A **module** has the logic for a certain business process (for example: sales, recruiting).
+- **Stages** map the steps in your process (for example: new, ongoing, won, lost).
+
+# Views 
+You can customize the display of your records using views, setting different filters and sorting options for each view.
+
+# Workspace
+A `Workspace` typically represents a company using Twenty. It holds all the records and data that you and your team members add to Twenty.   
+It has a single domain name, which is typically the domain name your company uses for employee email addresses.
+
+Sure, here is the glossary in the requested markdown format:
+
+# Field 
+A field refers to a specific area where particular data is stored for an entity.
+
+# Record 
+A Record indicates an instance of an object, like a specific account or contact.
+
+# Tasks 
+Tasks in Twenty CRM are assigned activities relating to contacts, accounts, or opportunities.
+
+# Opportunities 
+Opportunities in Twenty CRM are potential deals or sales with accounts or contacts.
+
+# Integration 
+Integration are built-in tools that allow to link Twenty with other software or systems.
+
+# User Profile
+A User Profile is the information and settings specific to a workspace member in Twenty.

packages/twenty-website/src/content/user-guide/import-export-data.mdx

@@ -0,0 +1,43 @@
+---
+title: Import/Export Data
+info: Learn the procedures for importing and exporting data.
+icon: IconNote
+image: /images/user-guide/placeholder-header.png
+---
+
+# Import data
+
+You can import People and Companies data into Twenty from other apps using a .csv, .xslx, or .xsl file. In the <b>Companies</b> or <b>People</b> page, click on <b>Options</b> and then on <b>Import</b>. 
+
+Upload your file, match the columns, check your data and import it.
+
+<img src="/images/user-guide/import-export-data/match-columns.png" style={{width:'100%'}}/>
+
+# Export data
+
+To export data from an object:
+
+1. Visit the object index.
+2. Choose the view for data export.
+3. Access the `Options` menu.
+4. Click on `Export`.
+5. Select the save location for the CSV data. Note that exporting may take time with a large record count.
+
+<div style={{padding:'71.24% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/926226303?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>

packages/twenty-website/src/content/user-guide/integrations.mdx

@@ -0,0 +1,43 @@
+---
+title: Integrations
+info: Learn how to connect Twenty to your other tools.
+icon: IconBrandZapier
+image: /images/user-guide/placeholder-header.png
+---
+
+# About
+
+Integration with Zapier and Windmill is available for automating your workflows.
+
+# Zapier
+
+Sync Twenty with 3000+ apps using [Zapier](https://zapier.com/apps/twenty/integrations), and automate your work. Here's how you can connect Twenty to Zapier:
+
+1. Go to Zapier and log in. 
+2. Click on `+ Create Zap` in the left sidebar. 
+3. Choose the application you want to set as the trigger. A trigger refers to an event that starts the automation. 
+4. Select Twenty as the action. An action is the event performed whenever an application triggers an automation. [Learn more about triggers and actions in Zapier.](https://zapier.com/how-it-works)
+5. Once you choose the Twenty account that you want to use for your automation, you'll have to allow Zapier to access it by adding an API key. You can learn [how to generate your API key here.](/user-guide/api-webhooks)
+
+6. Enter your API key and click on 'Yes, Continue to Twenty.'
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927913866?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>
+
+You can now continue creating your automation!

packages/twenty-website/src/content/user-guide/kanban-views.mdx

@@ -0,0 +1,80 @@
+---
+title: Kanban Views
+info: Learn how to customize and navigate Kanban Views.
+icon: IconTargetArrow
+image: /images/user-guide/placeholder-header.png
+---
+
+# About Kanban Views
+
+Kanban views visually map out process flows, where each column stands for a distinct stage and each card represents a record.
+
+# Move Cards between Stages
+
+ You can move each card between stages as it goes through your workflow by dragging and dropping. To proceed, hold your click on a card and move it to the next stage.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927888627?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>
+
+# Add and delete stages
+
+You can tailor your workflow to suit your needs using stages, which represent a value in a Select Field:
+
+## Add Stages
+
+To add a stage, access the Select Field Settings by navigating to Settings > Data Model, selecting your object, and then the field your Kanban board depends on.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927890428?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>
+
+## Remove Stages
+
+To remove a stage, hover the stage name or the `⋮` icon, click `Edit from settings` in the Select Field settings, and then click <b>Delete</b> next to the relevant stage.
+
+<img src="/images/user-guide/kanban-views/edit-stage.png" style={{width:'100%'}}/>
+
+# Display fields 
+
+You can configure your Kanban board to display some fields and hide others. To hide a field, click on <b>Options</b> on the top right, then on <b>Fields</b> to bring up the list of options. Hover the field you want to hide to bring up the `-` button. Click on it to hide the field.  
+
+You can also rearrange the order of fields by holding down the field name and dragging it to where you want it.
+
+<img src="/images/user-guide/kanban-views/filter.png" style={{width:'100%'}}/>
+
+# Compact View
+
+You can also hide all the fields, and get an overview of all the opportunities at a glance. To do so, click on <b>Options</b> on the top right and turn on the toggle in front of the <b>Compact view</b> option. 
+
+<img src="/images/user-guide/kanban-views/compact-view.png"style={{width:'100%'}}/>

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

@@ -0,0 +1,67 @@
+---
+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
+---
+
+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'}}>
+  <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.

packages/twenty-website/src/content/user-guide/objects.mdx

@@ -0,0 +1,82 @@
+---
+title: Objects
+info: Discover how to use standard and custom objects in your workspace.
+icon: IconChecklist
+image: /images/user-guide/placeholder-header.png
+---
+
+# 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
+
+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
+
+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
+
+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 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 
+
+To create a new custom object:
+
+1. Go to Settings in the sidebar on the left.
+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'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/926288174?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>
+
+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'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/926293493?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>
+
+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%'}}/>

packages/twenty-website/src/content/user-guide/table-views.mdx

@@ -0,0 +1,71 @@
+---
+title: Table Views
+info: Learn how to customize and navigate Table Views.
+icon: IconChecklist
+image: /images/user-guide/placeholder-header.png
+---
+
+# About Table Views
+
+Table views are visual representations of data structured in rows and columns.
+
+# Create record
+
+Add records as needed, without limits. To add a record, you can either click on the **+** button at the top right of the screen or at the top of the record **Name** column. 
+
+Enter the record name then press `Enter` to save. To edit a record name, click on its name on its detail page.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927071691?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>
+
+
+# Delete record
+
+**Index View:** To delete a record, select the checkbox next to the record and click the delete button below.
+
+**Record Page:** Tap the **3 dots menu** in the top right corner, then select delete.
+
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927073570?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>
+
+# Add a Custom Field
+
+To create a custom field, click the **+** button at the right end of the table columns and select **Customize fields**. 
+
+<img src="/images/user-guide/fields/quick-new-field.png" style={{width:'100%'}}/>
+
+You can also do it by navigating to **Settings** > **Data Model** > **People**. Click on **Add Field**. Choose a field name and type. The new field will be available in the app.
+

packages/twenty-website/src/content/user-guide/tasks.mdx

@@ -0,0 +1,93 @@
+---
+title: Tasks
+info: Understand how to effectively manage tasks in Twenty, including tasks creation, viewing, editing, marking as complete, and deletion.
+image: /images/user-guide/tasks/tasks_header.png
+---
+
+Manage all tasks within your workspace using the **Tasks** feature. This guide will show you how to create and manage tasks, switch between upcoming and completed tasks, edit task details, and much more.
+
+# Creating Tasks
+
+Creating tasks in Twenty is seamless. You can either:
+
+-  Go to the `Tasks`tab and press the `+` button at the top right of the page.
+-  Use the search function by pressing `cmd/ctrl + k`, then select 'Create task' from the list of quick actions.
+-  Go to a `Record page` and press `+`at the top right of the page, or go to the Task tab and press the `Add Task`button. 
+
+## Adding Task Content
+
+Once you've created a task you can enrich it with rich content, such as Titles, Bullet points or even images. To do so, press "/" and enter the desired command.
+
+# Viewing Tasks
+
+The **Tasks** page displays all your tasks across your workspace. Here you can:
+
+- Filter tasks assigned to a specific user by clicking the button with your name at the top right of the screen.
+- Toggle between upcoming (`To do`) and completed (`Done`) tasks to see what needs attention and what you have accomplished.
+
+You can also see tasks for a given Record on its `Record page`.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927908280?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>
+
+# Editing Tasks
+
+To edit a task, you should click on its card. This will open a side panel offering the following features:
+
+-  **Assignee and Due date**: Update the assignee or edit the due date.
+-  **Comments**: Work together with your team members by adding comments on tasks to give updates or feedback.
+-  **Automations**: Thanks to the API and Webhooks, you can also automate task creation triggered by specific activities in your workspace.
+
+# Marking Tasks as Complete
+
+To mark a task as complete:
+
+1. Locate the task on your `Tasks` page or within a `Record page`.
+2. Click on the circle at the left of the task card - it will change to signify completion.
+3. The task status will automatically update to `Done`.
+
+This procedure will help keep an updated record of your accomplishments. 
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927910083?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>
+
+# Delete a task
+
+To permanently remove a task:
+
+1. Open the task you want to delete by clicking on its card, either from the `Tasks` page or within a `Record page`.
+2. Click the trash icon located at the top right corner of the task details panel.
+
+Please note, deleting a task is permanent and can't be undone. Consider marking tasks as `Done` if there is a chance you will need to refer to them again.

packages/twenty-website/src/content/user-guide/tips.mdx

@@ -0,0 +1,89 @@
+---
+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/placeholder-header.png
+---
+
+# 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'}}>
+  <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'}}>
+  <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/view-favorite-records-light.png" style={{width:'100%', maxWidth:'800px'}}/>

packages/twenty-website/src/content/user-guide/views.mdx

@@ -0,0 +1,176 @@
+---
+title: Views
+info: Find out how to create, manage and delete Object Views.
+icon: IconChecklist
+image: /images/user-guide/placeholder-header.png
+---
+# About Views
+
+You can see your records in different ways by creating views. In a view, you can apply filters and sorts to organize your content efficiently. For instance, on the `People` object, you can create a view to isolate US contacts by filtering those with a US phone number.
+
+## Default View
+
+Each object comes with an unfiltered, unsorted, and undeletable view known as the Default view. It's named after the object's plural name, such as "All Companies," "All People," "All Opportunities".
+
+<img src="/images/user-guide/views/default-view.png" style={{width:'100%'}}/>
+
+# Creating, Editing and Deleting Views
+
+You can create several custom views and share them with your team.
+
+## Creating a View
+
+There is two ways to create a new view. Either directly from the `View Switcher`, either filtering and sorting an existing view.
+
+### From View Switcher
+
+1. Open the View Switcher
+2. Click the `Add View` button at the bottom of the view switcher menu.
+3. Choose an Icon and name for your View.
+4. Choose a "View type" between Table and Kanban. 
+5. (Kanban Views only) For your Kanban view, select the Select field you wish to use as the column header. The system prompts you to create one from the Settings before enabling Kanban view creation, if your object lacks a `Select field`.
+6. Click "Create" to generate your new view.
+
+The newly created view opens automatically.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927639721?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>
+
+### From Sorting and Filtering
+
+When you change the `Sorting` and `Filtering` of an existing view, a `Save as new view` button will appear at the right edge of the `View Bar`. This will opens the New View menu mentionned above, allowing you to create a new view out of an existing one.
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927643495?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>
+
+## Editing and Deleting a View
+
+To Edit or Delete a view:
+1. Open the View Switcher
+2. Hover the View you wish to edit
+3. Click the `Pen Icon Button` that appears on the right
+
+You will then be able to modify the view. To delete it, press the `Delete` button that just appeard.
+
+
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927645774?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>
+
+# Navigating Between Views
+
+To switch between views, simply open the view switcher and click the view you wish to open.
+
+# Customizing Views
+
+Each view can be customized to streamline your business processes. Views help segment your data. You can customize views using filters, sorts, and field display.
+
+## Filtering a View
+
+To filter a view:
+
+-  Click **Filter** > select a field (for example: Name, Company in the People Object).
+-  Choose a condition, select a value, and apply the filter.
+-  Add more filters with `+ Add filter` or remove them with **X**.
+
+
+<div style={{padding:'71.24% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/926282262?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>
+
+## Sorting a View
+
+Order your fields data in ascending or descending order:
+- Select **Sort**, choose a field, and define the sort order you desire.
+- You can apply and arrange several sorts as needed.
+<div style={{padding:'69.01% 0 0 0', position:'relative'}}>
+  <iframe 
+    src="https://player.vimeo.com/video/927885588?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>
+
+
+## Field display
+
+You can customize which fields to display within a view. To hide a field, click **Options** > **Fields** and select the `-` button next to the field or click on the field column header and select **hide**.
+
+You can rearrange fields by clicking their field column header and then press **Move Right** or **Move Left**.
+
+## Opening Record
+
+To open a record, click on the name in the first column. This action will open the corresponding Record page.