User guide (#3060)

* user guide

* user guide additions

* light mode images added

* minor edits

* Delete packages/twenty-server/.local-storage/attachment/bd373039-67f7-4da3-ac86-3710d0b8c70d.svg

* Optimize image size

---------

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

packages/twenty-docs/docs/user-guide/basics/custom objects.mdx

@@ -5,6 +5,8 @@ sidebar_custom_props:
   icon: TbAugmentedReality
 ---
 
+import ThemedImage from '@theme/ThemedImage';
+
 Objects are structures that allow you to store data (records, attributes, and values) specific to an organization. Twenty provides both standard and custom objects.
 
 Standard objects are in-built objects with a set of attributes available for all users. All workspaces come with three standard objects by default: People, Companies, and Opportunities. Standard objects have standard fields that are also available for all Twenty users, like Account Owner and URL.
@@ -19,13 +21,12 @@ To create a new custom object:
 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).
 <br/>
 
-<div style={{textAlign: 'center'}}>
-    <img src="/img/user-guide/view-all-objects.png" alt="View all objects" />
-</div>
+
+<ThemedImage sources={{light: "/img/user-guide/view-all-objects-light.png", dark:"/img/user-guide/view-all-objects-dark.png"}} style={{width:'100%', maxWidth:'800px'}}/>
 
 <br/>
 
-3. Click on `+ New object` at the top, then choose Custom as the object type. Enter the name (both singular and plural) and 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." 
+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." 
 
 <br/>
 
@@ -35,7 +36,7 @@ To create a new custom object:
 
 <br/>
 
-4. Once you create your custom object, you'll be able to manage it. You can edit the name and description, view the different fields, and add more fields.
+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.
 
 <div style={{textAlign: 'center'}}>
     <img src="/img/user-guide/manage-custom-object.png" alt="Create custom object" />

packages/twenty-docs/docs/user-guide/basics/notes.mdx

@@ -0,0 +1,30 @@
+---
+title: Notes
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbNote
+---
+
+import ThemedImage from '@theme/ThemedImage';
+
+Easily create a note to keep track of important information. 
+
+## Create Notes 
+
+To attach a note to the record, go to the <b>Notes</b> tab of a record page and click on `+ New Note`. You can also format, comment, and upload images to your notes.   
+
+<ThemedImage sources={{light: "/img/user-guide/create-new-note-light.png", dark:"/img/user-guide/create-new-note-dark.png"}} style={{width:'100%', maxWidth:'800px'}}/>
+
+## Format Notes 
+
+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.  
+
+## Delete Notes
+
+To delete a note, open it and click on the trashcan icon on the upper right of the screen. This will permanently delete your note. 
+
+

packages/twenty-docs/docs/user-guide/basics/opportunities.mdx

@@ -0,0 +1,50 @@
+---
+title: Opportunities
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbTargetArrow
+---
+
+import ThemedImage from '@theme/ThemedImage';
+
+All opportunities are presented in a Kanban board, where each column represents the stage of your workflow and each card represents a record. For each card, you can list the amount, close date, probability, and the point of contact. You can also move each card between stages as it goes through your workflow. 
+
+<ThemedImage sources={{light: "/img/user-guide/all-opportunities-light.png", dark:"/img/user-guide/all-opportunities-dark.png"}} style={{width:'100%', maxWidth:'800px'}}/>
+
+## Add and delete stages
+
+You can add as many stages as you'd like to perfectly capture your entire workflow. To add a new stage, click on <b>Options</b> on the top right, choose <b>Stages</b>, and then click on `+ Add stage`. Name your stage and hit `Enter` to create it. Click on the name of the stage and then on on edit to change the stage's name and color.
+
+To delete a stage, click on the stage name or on the `⋮` icon that appears when you hover over a stage. Click on edit to open the menu and click on <b>Delete</b> at the bottom to permanently delete a stage. 
+
+## Filter, update, and sort views 
+
+It's easy to add filters and update your view to focus on only the most important things. To add a filter:
+- Click <b>Filter</b> on the top right of the opportunities board and select the field you want to filter by (Amount, Close date, Company, Creation Date, Person, Pipeline Step, and Point of Contact).
+- Select the filter's condition (is/is not, greater than/lesser than) and then choose the value of the field you want to filter by.
+- You can either create a new view or update your current view with the filter in place. 
+- You can also add another filter by following the same steps or clicking on the `+ Add filter` button on top of the columns. 
+- To remove a filter condition, simply click on the <b>X</b> next to the attribute you used to filter the records. 
+
+<ThemedImage sources={{light: "/img/user-guide/filter-opportunities-light.png", dark:"/img/user-guide/filter-opportunities-dark.png"}} style={{width:'100%', maxWidth:'800px'}}/>
+
+<br/>
+
+You can also sort your records by Close date, Creation date, and Probability. To do so:
+- Click on <b>Sort</b> on the top right. 
+- Choose Ascending or Descending, and then the field you want to sort the records by. 
+- You can then update your view or create a new one with the sort filter in place. 
+
+## Display fields 
+
+You can configure your kanban board to display some fields and hide others. By default, the Amount, Close date, Probability, and Point of Contact are all visible. 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 over 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. 
+
+<ThemedImage sources={{light: "/img/user-guide/display-fields-light.png", dark:"/img/user-guide/display-fields-dark.png"}} style={{width:'100%', maxWidth:'800px'}}/>
+
+<br/>
+
+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. 
+
+<ThemedImage sources={{light: "/img/user-guide/compact-opportunities-view-light.png", dark:"/img/user-guide/compact-opportunities-view-dark.png"}} style={{width:'100%', maxWidth:'800px'}}/>

packages/twenty-docs/docs/user-guide/basics/tasks.mdx

@@ -0,0 +1,18 @@
+---
+title: Tasks
+sidebar_position: 1
+sidebar_custom_props:
+  icon: TbChecklist
+---
+
+import ThemedImage from '@theme/ThemedImage';
+
+You can find all the tasks from across your workspace in the <b>Tasks</b> window in your sidebar. You can also find a dedicated tab for Tasks on each record so you can add and edit tasks directly from each record. Alternatively, you can click on the `+` button on the top right of each record page and then click on <b>Task</b> to create a new task. 
+
+<ThemedImage sources={{light: "/img/user-guide/create-new-task-light.png", dark:"/img/user-guide/create-new-task-dark.png"}} style={{width:'100%', maxWidth:'800px'}}/>
+
+## Tasks page
+
+Switch between upcoming and completed tasks to get an overview of what's pending and what's already been done. 
+
+You can also see the tasks assigned to others by changing the assignee from the top right of the Tasks page, and edit each task to update the content, due dates, and assignee. You can also comment on each task.