Freshen up frontpage design

Part of a larger effort, but doing this iteratively in smaller chunks.

2 files changed, 70 insertions, 44 deletions

diff --git a/Biz/Bild/Deps/Haskell.nix b/Biz/Bild/Deps/Haskell.nix
index c08e353..eb34f3a 100644
--- a/Biz/Bild/Deps/Haskell.nix
+++ b/Biz/Bild/Deps/Haskell.nix
@@ -10,6 +10,7 @@ with hpkgs;
   bytestring
   clay
   cmark
+  cmark-lucid
   config-ini
   containers
   directory
diff --git a/Biz/Devalloc.hs b/Biz/Devalloc.hs
index 59e2240..aa61975 100644
--- a/Biz/Devalloc.hs
+++ b/Biz/Devalloc.hs
@@ -19,6 +19,9 @@
 -- : out devalloc
 -- : dep acid-state
 -- : dep clay
+-- : dep cmark
+-- : sys cmark
+-- : dep cmark-lucid
 -- : dep docopt
 -- : dep envy
 -- : dep github
@@ -43,12 +46,15 @@ module Biz.Devalloc
   )
 where
 
-import Alpha hiding ((<.>))
+import Alpha hiding (rem, (<.>))
 import Biz.App (CSS (..), HtmlApp (..))
 import qualified Biz.Cli as Cli
 import qualified Biz.Look
 import Biz.Test ((@=?))
 import qualified Biz.Test as Test
+import qualified CMark as Cmark
+import qualified CMark.Lucid as Cmark
+import Clay (em, px, rem)
 import qualified Clay
 import qualified Control.Exception as Exception
 import Crypto.JOSE.JWK (JWK)
@@ -455,18 +461,27 @@ htmlApp cooks kp cfg jwk oAuthArgs =
             Clay.listStyleType <| Clay.none
             Clay.margin (Clay.px 0) 0 0 0
           "nav > ul > li" Clay.? do
-            Clay.padding 0 (Clay.px 5) 0 (Clay.px 5)
-            {-
-                         - nav > ul {
-                display: flex;
-                justify-content: flex-end;
-                list-style: none;
-            }
-
-            nav > ul > li {
-                padding: 0 5px;
-            }
-                         - -}
+            Clay.padding 0 (px 5) 0 (px 5)
+          "#home" Clay.? do
+            "h1" Clay.? do
+              Clay.fontSize (Clay.rem 3)
+            "h1, h2" Clay.? do
+              Clay.textAlign Clay.center
+            "section" Clay.? do
+              Clay.padding (rem 3) 0 (rem 3) 0
+            "#try-button" Clay.? do
+              Clay.padding (em 0.5) (em 1) (em 0.5) (em 1)
+              Clay.display Clay.flex
+              Clay.flexDirection Clay.column
+              Clay.margin (em 3) Clay.auto 0 Clay.auto
+              Clay.width (px 250)
+              Clay.backgroundColor "#ffe000"
+              Clay.textDecoration Clay.none
+              Clay.justifyContent Clay.center
+              Clay.alignItems Clay.center
+              Clay.fontWeight Clay.bold
+              "small" Clay.? do
+                Clay.fontSize (px 10)
     }
 
 -- | The front page pitch. Eventually I'd like to load the content from markdown
@@ -476,33 +491,41 @@ newtype Home = Home OAuthArgs
 instance Lucid.ToHtml Home where
   toHtmlRaw = Lucid.toHtml
   toHtml (Home oAuthArgs) = do
-    Lucid.toHtml <| nav Nothing
-    Lucid.p_
-      "Devalloc analyzes your codebase trends, finds patterns \
-      \ in how your developers work, and protects against tech debt."
-    Lucid.p_ "Just hook it up to your CI system - it will warn you when it finds a problem."
-    Lucid.toHtml <| loginButton oAuthArgs
-    Lucid.h2_ "Identify blackholes in your codebase"
-    Lucid.p_
-      "What if none of your active employees have touched some part of the codebase? \
-      \ This happens too often with legacy code, and then it turns into a huge source of tech debt. \
-      \ Devalloc finds these \"blackholes\" and warns you about them so you can be proactive in eliminating tech debt."
-    Lucid.toHtml <| loginButton oAuthArgs
-    Lucid.h2_ "Protect against lost knowledge"
-    Lucid.p_ "Not everyone can know every part of a codebase. By finding pieces of code that only 1 or 2 people have touched, devalloc identifes siloed knowledge. This allows you to protect against the risk of this knowledge leaving the company if an employee leaves."
-    Lucid.toHtml <| loginButton oAuthArgs
-    Lucid.h2_ "Don't just measure code coverage - also know your dev coverage"
-    Lucid.p_ "No matter how smart your employees are, if you are under- or over-utilizing your developers then you will never get optimal performance from your team."
-    Lucid.ul_ <| do
-      Lucid.li_ "Find developer hot spots in your code: which pieces of code get continually rewritten, taking up valuable dev time?"
-      Lucid.li_ "Know how your devs work best: which ones have depth of knowledge, and which ones have breadth?"
-
-    Lucid.p_ "(Paid only)"
-    Lucid.toHtml <| loginButton oAuthArgs
-    Lucid.h2_ "See how your teams *actually* organize themselves with cluster analysis"
-    Lucid.p_ "Does your team feel splintered or not cohesive? Which developers work best together? Devalloc analyzes the collaboration patterns between devs and helps you form optimal pairings and teams based on shared code and mindspace."
-    Lucid.p_ "(Paid only)"
-    Lucid.toHtml <| loginButton oAuthArgs
+    Lucid.header_ <| Lucid.toHtml <| nav Nothing
+    Lucid.main_ [Lucid.id_ "home"] <| do
+      section <| do
+        h1 "Know your codebase."
+        h1 "Know your team."
+        p "Devalloc analyzes your codebase trends, finds patterns in how your developers work, and protects against tech debt."
+        p "Just hook it up to your CI system - it will warn you when it finds a problem."
+        Lucid.toHtml <| tryButton oAuthArgs
+      section <| do
+        h2 "Identify blackholes in your codebase"
+        p
+          "What if none of your active employees have touched some part of the codebase? \
+          \ This happens too often with legacy code, and then it turns into a huge source of tech debt. \
+          \ Devalloc finds these \"blackholes\" and warns you about them so you can be proactive in eliminating tech debt."
+      section <| do
+        h2 "Protect against lost knowledge"
+        p "Not everyone can know every part of a codebase. By finding pieces of code that only 1 or 2 people have touched, devalloc identifes siloed knowledge. This allows you to protect against the risk of this knowledge leaving the company if an employee leaves."
+      section <| do
+        h2 "Don't just measure code coverage - also know your dev coverage"
+        p "No matter how smart your employees are, if you are under- or over-utilizing your developers then you will never get optimal performance from your team."
+        Lucid.ul_ <| do
+          Lucid.li_ "Find developer hot spots in your code: which pieces of code get continually rewritten, taking up valuable dev time?"
+          Lucid.li_ "Know how your devs work best: which ones have depth of knowledge, and which ones have breadth?"
+      section <| do
+        h2 "See how your teams *actually* organize themselves with cluster analysis"
+        p "Does your team feel splintered or not cohesive? Which developers work best together? Devalloc analyzes the collaboration patterns between devs and helps you form optimal pairings and teams based on shared code and mindspace."
+      section <| do
+        h1 <| "Ready to get going?"
+        Lucid.toHtml <| tryButton oAuthArgs
+    where
+      section = Lucid.section_
+      markdown = Cmark.renderNode [] <. Cmark.commonmarkToNode []
+      p = Lucid.p_ <. markdown
+      h1 = Lucid.h1_
+      h2 = Lucid.h2_ <. markdown
 
 newtype UserHome = UserHome User
 
@@ -616,11 +639,13 @@ encodeParams =
     <. Web.FormUrlEncoded.urlEncodeParams
 
 -- | Login button for GitHub.
-loginButton :: OAuthArgs -> Lucid.Html ()
-loginButton oAuthArgs =
+tryButton :: OAuthArgs -> Lucid.Html ()
+tryButton oAuthArgs =
   Lucid.a_
-    [Lucid.href_ <| githubLoginUrl oAuthArgs]
-    "Get Started with GitHub"
+    [Lucid.id_ "try-button", Lucid.href_ <| githubLoginUrl oAuthArgs]
+    <| do
+      "Give it a try with GitHub"
+      Lucid.small_ "Free for a limited time"
 
 -- | Universal top navbar
 -- nav :: (Applicative m, Monad m) => Maybe User -> Lucid.HtmlT m  ()