Doc changes (#2124)

* refactored Storybook UI

* refactored Storybook UI

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

* added hover behavior to doc page & made it look selected

* separate storybook docs and tests

* separating storybook tests and docs

* fixed spelling errors in docs

* Final round of edits for frontend, added backend folder architecture

* Created CODE_OF_CONDUCT.md

* Add code of conduct to contributing.md

* doc changes

* fixed broken links

docs/docs/start/getting-started.mdx

@@ -21,7 +21,7 @@ The signup is free.
 If you're a developer and would like to experiment or contribute to the app, you can install Twenty on your local environment. Follow our [local setup](/contributor/local-setup) guide to get started.  
 
 ### 3. Self-hosting
-We provide [self-hosting options](/hosting/self-hosting) if you want greater control over your data and want to run the app on your own server. Right now, Docker containers are the only hosting option we support. However we are actively working on providing simple options to self-host Twenty.
+We provide [self-hosting options](self-hosting) if you want greater control over your data and want to run the app on your own server. Right now, Docker containers are the only hosting option we support. However we are actively working on providing simple options to self-host Twenty.
 
 
 ___

docs/docs/start/overview.mdx

@@ -9,7 +9,7 @@ import ThemedImage from '@theme/ThemedImage';
 
 
 Twenty is an Open Source CRM that provides flexibility, tailored to your business needs. It helps you break free from vendor lock-in and limitations, and provides the tools needed to harness the full potential of your data while ensuring a sleek and effortlessly intuitive design that teams will love to use.  
-<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"./img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'800px'}}/>
+<ThemedImage sources={{light: "../img/light-doc-preview.png", dark:"../img/dark-doc-preview.png"}} style={{width:'100%', maxWidth:'800px'}}/>
 
 ___
 

docs/docs/start/self-hosting.mdx

@@ -0,0 +1,54 @@
+---
+title: Self-Hosting
+sidebar_position: 2
+sidebar_custom_props:
+  icon: TbServer
+---
+Right now, Docker containers are the only hosting option we support. However, we are actively working on providing simple options to self-host Twenty. 
+Feel free to open issues on [Github](https://github.com/twentyhq/twenty/issues/new) if you want a specific cloud provider to be supported.
+
+## Production docker containers
+
+We provide a production-ready set of `Dockerfiles` to allow you to build your own image and deploy it to your favorite cloud provider (Amazon Web Services, Google Cloud Platform, etc.).
+
+You will find these in the [infra/prod/front/Dockerfile](https://github.com/twentyhq/twenty/blob/main/infra/prod/front/Dockerfile) and [infra/prod/server/Dockerfile](https://github.com/twentyhq/twenty/blob/main/infra/prod/server/Dockerfile) files.
+
+### Front
+
+```bash
+docker build \
+ --build-arg REACT_APP_SERVER_BASE_URL=REPLACE_ME \
+ -t twenty-front:latest \
+ -f ./infra/prod/front/Dockerfile .
+```
+
+### Server
+
+:::info Note
+
+To run the server, you will need to set the environment variables listed [here](https://github.com/twentyhq/twenty/blob/main/server/.env.example).
+
+:::
+
+```bash
+docker build \
+  -t twenty-server:latest \
+  -f ./infra/prod/server/Dockerfile .
+```
+
+## Render
+
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/twentyhq/twenty)
+
+
+## AWS Elastic Beanstalk (Coming soon)
+
+We are working on providing a joint Docker image - containing both the Twenty frontend and server - that you can deploy using [AWS Elastic Beanstalk](https://aws.amazon.com/elasticbeanstalk/).
+
+
+<!--
+
+## Railway 
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/YWGqza?referralCode=3CLObs)
+
+-->