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)

docs/src/img/logo-square-dark.svg

@@ -0,0 +1,12 @@
+<svg width="136" height="136" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2343_96406)">
+<path d="M136 2.28882e-05H0L0.000144482 136H136V2.28882e-05ZM27.27 50.6401C27.27 43.2101 33.3 37.1801 40.73 37.1801H66.64C67.02 37.1801 67.37 37.4101 67.53 37.7601C67.69 38.1101 67.62 38.5201 67.36 38.8101L61.68 44.9801C60.69 46.0501 59.3 46.6701 57.84 46.6701H40.8C38.57 46.6701 36.76 48.4801 36.76 50.7101V60.8901C36.76 62.2001 35.7 63.2601 34.39 63.2601H29.65C28.34 63.2601 27.28 62.2001 27.28 60.8901V50.6401H27.27ZM107.88 85.3601C107.88 92.7901 101.85 98.82 94.42 98.82H83.41C75.98 98.82 69.95 92.7901 69.95 85.3601V66.0901C69.95 64.7801 70.44 63.5201 71.33 62.5501L77.75 55.5801C78.02 55.2901 78.44 55.1901 78.82 55.3301C79.19 55.4801 79.44 55.83 79.44 56.23V85.3001C79.44 87.5301 81.25 89.3401 83.48 89.3401H94.36C96.59 89.3401 98.4 87.5301 98.4 85.3001V50.7101C98.4 48.4801 96.59 46.6701 94.36 46.6701H81.71C80.26 46.6701 78.88 47.2801 77.89 48.3401L40.16 89.3401H62.83C64.14 89.3401 65.2 90.4001 65.2 91.7101V96.4501C65.2 97.7601 64.14 98.82 62.83 98.82H32.28C29.51 98.82 27.26 96.5701 27.26 93.8001V91.29C27.26 90.03 27.73 88.8201 28.59 87.8901L70.89 41.9401C73.69 38.9001 77.62 37.1801 81.75 37.1801H94.41C101.84 37.1801 107.87 43.2101 107.87 50.6401V85.3601H107.88Z" fill="black"/>
+<path d="M27.27 50.6401C27.27 43.2101 33.3 37.1801 40.73 37.1801H66.64C67.02 37.1801 67.37 37.4101 67.53 37.7601C67.69 38.1101 67.62 38.5201 67.36 38.8101L61.68 44.9801C60.69 46.0501 59.3 46.6701 57.84 46.6701H40.8C38.57 46.6701 36.76 48.4801 36.76 50.7101V60.8901C36.76 62.2001 35.7 63.2601 34.39 63.2601H29.65C28.34 63.2601 27.28 62.2001 27.28 60.8901V50.6401H27.27Z" fill="white"/>
+<path d="M107.88 85.3601C107.88 92.7901 101.85 98.82 94.42 98.82H83.41C75.98 98.82 69.95 92.7901 69.95 85.3601V66.0901C69.95 64.7801 70.44 63.5201 71.33 62.5501L77.75 55.5801C78.02 55.2901 78.44 55.1901 78.82 55.3301C79.19 55.4801 79.44 55.83 79.44 56.23V85.3001C79.44 87.5301 81.25 89.3401 83.48 89.3401H94.36C96.59 89.3401 98.4 87.5301 98.4 85.3001V50.7101C98.4 48.4801 96.59 46.6701 94.36 46.6701H81.71C80.26 46.6701 78.88 47.2801 77.89 48.3401L40.16 89.3401H62.83C64.14 89.3401 65.2 90.4001 65.2 91.7101V96.4501C65.2 97.7601 64.14 98.82 62.83 98.82H32.28C29.51 98.82 27.26 96.5701 27.26 93.8001V91.29C27.26 90.03 27.73 88.8201 28.59 87.8901L70.89 41.9401C73.69 38.9001 77.62 37.1801 81.75 37.1801H94.41C101.84 37.1801 107.87 43.2101 107.87 50.6401V85.3601H107.88Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2343_96406">
+<rect width="136" height="136" rx="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

docs/src/img/logo-square-light.svg

@@ -0,0 +1,11 @@
+<svg width="136" height="136" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2343_96409)">
+<rect width="136" height="136" rx="18" fill="black"/>
+<path d="M118.83 0H17.17C7.69 0 0 7.69 0 17.17V118.83C0 128.31 7.69 136 17.17 136H118.83C128.31 136 136 128.31 136 118.83V17.17C136 7.69 128.31 0 118.83 0ZM27.27 50.64C27.27 43.21 33.3 37.18 40.73 37.18H66.64C67.02 37.18 67.37 37.41 67.53 37.76C67.69 38.11 67.62 38.52 67.36 38.81L61.68 44.98C60.69 46.05 59.3 46.67 57.84 46.67H40.8C38.57 46.67 36.76 48.48 36.76 50.71V60.89C36.76 62.2 35.7 63.26 34.39 63.26H29.65C28.34 63.26 27.28 62.2 27.28 60.89V50.64H27.27ZM107.88 85.36C107.88 92.79 101.85 98.82 94.42 98.82H83.41C75.98 98.82 69.95 92.79 69.95 85.36V66.09C69.95 64.78 70.44 63.52 71.33 62.55L77.75 55.58C78.02 55.29 78.44 55.19 78.82 55.33C79.19 55.48 79.44 55.83 79.44 56.23V85.3C79.44 87.53 81.25 89.34 83.48 89.34H94.36C96.59 89.34 98.4 87.53 98.4 85.3V50.71C98.4 48.48 96.59 46.67 94.36 46.67H81.71C80.26 46.67 78.88 47.28 77.89 48.34L40.16 89.34H62.83C64.14 89.34 65.2 90.4 65.2 91.71V96.45C65.2 97.76 64.14 98.82 62.83 98.82H32.28C29.51 98.82 27.26 96.57 27.26 93.8V91.29C27.26 90.03 27.73 88.82 28.59 87.89L70.89 41.94C73.69 38.9 77.62 37.18 81.75 37.18H94.41C101.84 37.18 107.87 43.21 107.87 50.64V85.36H107.88Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2343_96409">
+<rect width="136" height="136" rx="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>