From f498b2af7bb5432eda085e6c5cbf441d55f4e640 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Wed, 24 Mar 2021 15:27:13 +0500
Subject: [PATCH] Updating homepage for focalboard

---
 website/site/layouts/partials/hero.html | 50 +++++++++++++------------
 website/site/static/css/styles.css      | 33 ++++++++++------
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/website/site/layouts/partials/hero.html b/website/site/layouts/partials/hero.html
index 6a9458367..41a357dcf 100755
--- a/website/site/layouts/partials/hero.html
+++ b/website/site/layouts/partials/hero.html
@@ -1,33 +1,37 @@
-<div class="homepage__intro text-center">
+<div class="homepage__intro">
     <div class="container-fluid">
-		<p>
+		<div class="homepage-intro__text text-left mt-4 mb-4">
+			<h2>
+				Focalboard is an open source, self-hosted alternative to Trello, Notion, and Asana.
+			</h2>
+
+			<p>
+				It helps define, organize, track and manage work across individuals and teams. Focalboard comes in two editions:
+			</p>
+
+			<div class="text-left">
+				<ul >
+					<li><b><a href="https://www.focalboard.com/download/personal-edition/desktop/">Focalboard Personal Desktop</a></b>: A stand-alone desktop app for your todos and personal projects</li>
+					<li><b><a href="https://www.focalboard.com/download/personal-edition/ubuntu/">Focalboard Personal Server</a></b>: A self-hosted server for your team to collaborate</li>
+				</ul>
+			</div>
+		</div>
+
+		<p class="text-center">
 			<a href="download/personal-edition">
 				<img src="img/hero.jpg" style="width: 100%; max-width: 1000px" />
 			</a>
 		</p>
 
-		<p>
-            Focalboard is an open source, self-hosted alternative to Trello, Notion, and Asana.
-		</p>
+		<div class="homepage-intro__text">
+			<p>
+				We're currently in early-access beta, and are looking for feedback. So please <a href="download/personal-edition/">download it today</a> and <a href="https://docs.google.com/forms/d/e/1FAIpQLSdTq7M69Pdlz71CwucaSEG0FCK1M_WRvIbZbPr2imfT2QvUCQ/viewform?usp=sf_link" target="_blank" rel="noopener">let us know what you think</a>.
+			</p>
 
-		<p>
-            It helps define, organize, track and manage work across individuals and teams. Focalboard comes in two editions:
-		</p>
-
-        <div class="text-left" style="max-width: 800px; margin: 0 auto;">
-            <ul >
-                <li><b><a href="https://www.focalboard.com/download/personal-edition/desktop/">Focalboard Personal Desktop</a></b>: A stand-alone desktop app for your todos and personal projects</li>
-                <li><b><a href="https://www.focalboard.com/download/personal-edition/ubuntu/">Focalboard Personal Server</a></b>: A self-hosted server for your team to collaborate</li>
-            </ul>
-        </div>
-
-		<p>
-			We're currently in early-access beta, and are looking for feedback. So please <a href="download/personal-edition/">download it today</a> and <a href="https://docs.google.com/forms/d/e/1FAIpQLSdTq7M69Pdlz71CwucaSEG0FCK1M_WRvIbZbPr2imfT2QvUCQ/viewform?usp=sf_link" target="_blank" rel="noopener">let us know what you think</a>.
-		</p>
-
-		<p>
-			Focalboard is open source! <a href="https://github.com/mattermost/focalboard" target='_blank'>Check out the source code here</a>, and contribute to the future of this project.
-		</p>
+			<p>
+				Focalboard is open source! <a href="https://github.com/mattermost/focalboard" target='_blank'>Check out the source code here</a>, and contribute to the future of this project.
+			</p>
+		</div>
 
 		{{ if .Site.Params.search.enable }}
 			<div class="homepage-search row">
diff --git a/website/site/static/css/styles.css b/website/site/static/css/styles.css
index 6d96f31a5..1be217dae 100644
--- a/website/site/static/css/styles.css
+++ b/website/site/static/css/styles.css
@@ -3425,7 +3425,15 @@ table>tbody>tr:nth-of-type(odd) {
 }
 
 .doc-content table {
-    .table-striped;
+}
+
+.homepage-intro__text {
+    font-size: 18px;
+    padding: 20px;
+}
+
+.homepage-intro__text li {
+    margin-bottom: 20px;
 }
 
 .homepage .homepage__bg {
@@ -3476,7 +3484,8 @@ table>tbody>tr:nth-of-type(odd) {
 
 .homepage .header__links--right a {
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-    opacity: 0.7;
+    opacity: 1;
+    font-weight: 500;
 }
 
 .homepage .header__links--right a:hover,
@@ -3609,16 +3618,6 @@ table>tbody>tr:nth-of-type(odd) {
         background: #fff;
         display: none;
     }
-}
-
-@media (max-width: 768px) {
-    header {
-        padding: 0 20px;
-    }
-
-    .doc-content {
-        padding: 0 20px;
-    }
 
     .header__links--right {
         background: #fff;
@@ -3649,6 +3648,16 @@ table>tbody>tr:nth-of-type(odd) {
     .header__menu-toggle {
         display: block;
     }
+}
+
+@media (max-width: 768px) {
+    header {
+        padding: 0 20px;
+    }
+
+    .doc-content {
+        padding: 0 20px;
+    }
 
     .homepage-boxes__box {
         border-bottom: 1px solid #ddd;