Readme visual update (#146)

* new header for Readme

* new header for Readme

* new header for Readme

* Correct naming and changed assets

* Applied Strapi method for dark-mode images

* Corrected logo-square-dark look

* Corrected a typo

* Corrected spacing

README.md

@@ -1,13 +1,41 @@
-# Twenty
 
-Twenty is a open source CRM designed to solve the issues that are still prevalent amongst the existings solutions. 
+</br>
+<p align="center">
+  <a href="https://www.twenty.com#gh-dark-mode-only">
+    <img src="./docs/src/img/logo-square-dark.svg" width="136px" alt="Twenty logo" />
+  </a>
+  <a href="https://www.twenty.com#gh-light-mode-only">
+    <img src="./docs/src/img/logo-square-dark.svg" width="136px" alt="Twenty logo" />
+  </a>
+</p>
+
+<h2 align="center" >CRM empowering simplicity.</h3>
+<p align="center">Engineer-Designed. Business-Ready.
+
+
+</p>
+<p align="center"><a href="https://twenty.com">Website</a> · <a href="https://docs.twenty.com">Documentation</a> · <a href="https://twenty.com/story">Story</a></p>
+<br />
+
+<p align="center">
+  <a href="https://www.twenty.com#gh-dark-mode-only">
+    <img src="./docs/src/img/preview-dark.png" alt="Companies view" />
+  </a>
+</p>
+<p align="center">
+  <a href="https://www.twenty.com#gh-light-mode-only">
+    <img src="./docs/src/img/preview-light.png" alt="Companies view" />
+  </a>
+</p>
+
+# About
+
+Twenty is an Open Source CRM designed to solve the issues that are still prevalent among the existings solutions. 
 It is meant to be:
 - Easily extendable
 - Perfectly in-sync with your data
 - Crafted with care and enjoyable to use
 
-![Mockup of the CRM](/docs/src/img/mockup.png)
-
 
 # Documentation
 The doc is available on [docs.twenty.com](https://docs.twenty.com)