WIP: New User Guide (#3984)

* initial commit

* Theme setup on twenty-website package

* Left bar, Content done

* Content added, useDeviceType hook added

* useDeviceType file renamed

* Responsiveness introduced

* Mobile responsiveness fix

* TOC layout

* PR fixes

* PR changes 2

* PR changes #3

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

@@ -2,6 +2,7 @@
 title: Get started
 position: 0
 icon: IconUsers
+info: This is homepage
 ---
 
 The purpose of this user guide is to help you learn how you can use Twenty to build the CRM you want. 

packages/twenty-website/src/content/user-guide/what-is-twenty.mdx

@@ -0,0 +1,57 @@
+---
+title: What is Twenty
+position: 0
+icon: IconUsers
+info: A brief on Twenty's commitment to reshaping CRM with Open Source
+image: /images/user-guide/home/what-is-twenty.png
+---
+
+## What is Twenty
+
+The purpose of this user guide is to help you learn how you can use Twenty to build the CRM you want. 
+
+## 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 other shortcuts for navigation.  
+
+## Create Pre-filtered Views 
+
+Twenty allows you to add filters to see data that meets certain criteria and hides the rest. You can apply multiple filters at once.
+
+To create a filter in your workspace, click Filter at the top right and select the attribute you'd like to filter your records by. Create your filter and then save changes in a new view by clicking `+ Create view`. 
+
+The filtered view is now available to your whole team.
+
+## Add Stages For Opportunities
+
+You can also add more stages to the opportunities board. 
+
+On the <b>Opportunities</b> page, click on <b>Options</b>, <b>Stages</b>, then `+ Add Stage`.
+
+You can also edit the stage by clicking on the name. 
+
+## Create Notes and Tasks For Each Record
+
+You can attach notes and tasks to each record. With Notes, you can keep a record of any observations, comments, and interactions, and keep track of all items that require action with Tasks. 
+
+There are multiple ways to create notes and tasks. Learn more about [Notes](./basics/notes.mdx) and [Tasks](./basics/tasks.mdx). 
+
+## Upload Files For Each Record 
+
+You can also upload and attach files for each record. To do so, expand a record, and head over to the <b>Files</b> tab. You'll then see the `+ Add file` button. 
+
+<img src="/images/user-guide/attach-files-to-records-light.png" style={{width:'100%', maxWidth:'800px'}}/>
+
+## 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'}}/>
+
+## Import data
+
+You can easily 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, and validate the data to import it.