docs: align the logo and slogan at the centre of the readme.md file

Reference: https://stackoverflow.com/questions/12090472/how-do-i-center-an-image-in-the-readme-md-file-on-github#:~:text=Fortunately%2C%20this%20works%20both%20for,and%20the%20GitHub%20Wiki%20pages.&text=Just%20go%20to%20the%20Readme.md%20file%20and%20use%20this%20code.&text=%3Cdiv%20align%3D%E2%80%9Dcenter%E2%80%9D,the%20dimensions%20of%20the%20page.

Author: mrlemoos

readme.md

@@ -4,13 +4,8 @@ Louffee is a SaaS (Software as a Service) which intends to house students who
 adventure abroad by providing options for their international homes for lower
 prices in a trustful, transparent, and amazing way.
 
-<div style="display: flex; justify-content: center; gap: 2rem; margin: 4rem; overflow: hidden; border-radius: 0.5rem;">
-  <img src="./_/docs/assets/brands/louffee-48x48.svg" height="100" width="100" />
-  <div style="display: flex; flex-direction: column">
-    <strong>Louffee</strong>
-    <span>The way to connect students to housing abroad.</span>
-    <span>Safe. Smart. Easy.</span>
-  </div>
+<div align="center">
+  <img src="./_/docs/assets/readme-cover.png" />
 </div>
 
 As we make everything we do clear and visible, we have the whole project