Refactored Storybook UI (#2020)

* refactored Storybook UI

* refactored Storybook UI

* removed extra cards from the doc, added card for ui components

docs/docs/contributor/frontend/basics/contributing.mdx

@@ -1,12 +1,10 @@
 ---
 title: Contributing
 sidebar_position: 1
+description: Learn how you can contribute to the project
 sidebar_custom_props:
   icon: TbTopologyStar
 ---
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
 
 ## Pre-requesites
 

docs/docs/contributor/frontend/basics/design-system.mdx

@@ -1,15 +1,10 @@
 ---
 title: Design System
+description: What our design system looks like
 sidebar_position: 7
 sidebar_custom_props:
   icon: TbPaint
 ---
 
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
-# Design System
-
 We rely on our internal and custom design system, that is built on top of styled-components.
 

docs/docs/contributor/frontend/basics/folder-architecture.mdx

@@ -1,16 +1,11 @@
 ---
 title: Folder Architecture
 sidebar_position: 5
+description: A detailed look into our folder architecture
 sidebar_custom_props:
   icon: TbFolder
 ---
 
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
-# Folder Architecture
-
 In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.
 
 By following this folder architecture convention, it is easier to find the files related to specific features and ensure that the application is scalable and maintainable.

docs/docs/contributor/frontend/basics/work-with-figma.mdx

@@ -1,14 +1,11 @@
 ---
 title: Work with Figma
+description: Learn how you can collaborate with Twenty's Figma
 sidebar_position: 2
 sidebar_custom_props:
   icon: TbBrandFigma
 ---
 
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />
-
 Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
 In this guide, we'll go over how to collaborate with Twenty’s Figma.
 

docs/docs/contributor/frontend/ui-components/ui-components.mdx

@@ -4,5 +4,6 @@ sidebar_position: 0
 sidebar_custom_props:
   icon: TbBrandFigma
 ---
+import DocCardList from '@theme/DocCardList';
 
-WIP
+<DocCardList />

docs/docs/contributor/local-setup/docker-setup.mdx

@@ -98,7 +98,7 @@ make server-database-reset
 
 ## Step 5: Start Twenty
 
-Run the project with the following commands from the `root folder`:
+Run the project with the following commands from the `root` folder:
 
 ```bash
 make server-start
@@ -113,7 +113,7 @@ You should now have:
 - **Server** available on: [http://localhost:3000/graphql](http://localhost:3000/graphql)
 - **Postgres** available on [http://localhost:5432](http://localhost:5432) and containing database named `default`
 
-Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty
+Sign in using our seeded demo account `tim@apple.dev` (password: `Applecar2025`) to start using Twenty.
 
 ### Optional
 

docs/docs/contributor/local-setup/troubleshooting.mdx

@@ -23,8 +23,8 @@ Try installing [yarn classic](https://classic.yarnpkg.com/lang/en/)!
 
 ## Missing metadata schema
 
-During Twenty installation, your postgres database needs to be provisionned with right schemas, extensions and users.
-We provide [different ways](/contributor/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance
+During Twenty installation, your postgres database needs to be provisioned with right schemas, extensions and users.
+We provide [different ways](/contributor/local-setup/yarn-setup#step-2-set-up-postgresql-database) to set up your postgres instance.
 
-If you have sucessfully run this provisionning, you should have a `default` and a `metadata` schemas in your database.
+If you sucessfully run this provisioning, you should have a `default` and a `metadata` schemas in your database.
 If you don't, make sure you don't have multiple postgres instance running on your computer.