Merge pull request #6146 from CodaProtocol/feature/homepage-feedback

Website Redesign: Homepage Feedback
MinaProtocol · Sep 26, 2020 · c09d53d · c09d53d
2 parents 5950212 + 33086b4
commit c09d53d
Show file tree

Hide file tree

Showing 19 changed files with 153 additions and 139 deletions.
diff --git a/frontend/website-redesign/public/static/img/homepage-cta.jpg b/frontend/website-redesign/public/static/img/homepage-cta.jpg
diff --git a/frontend/website-redesign/public/static/img/mina-cubes.gif b/frontend/website-redesign/public/static/img/mina-cubes.gif
diff --git a/frontend/website-redesign/public/static/img/mina-heavy.gif b/frontend/website-redesign/public/static/img/mina-heavy.gif
diff --git a/frontend/website-redesign/src/Theme.re b/frontend/website-redesign/src/Theme.re
@@ -285,7 +285,7 @@ module Type = {
     ]);
 
   let sectionSubhead_ = [
-    Typeface.monumentGrotesk,
+    Typeface.monumentGroteskMono,
     fontSize(`rem(1.)),
     lineHeight(`rem(1.5)),
     letterSpacing(`px(-1)),

diff --git a/frontend/website-redesign/src/components/AboutpageRows.re b/frontend/website-redesign/src/components/AboutpageRows.re
@@ -7,6 +7,7 @@ module Styles = {
       important(backgroundSize(`cover)),
       backgroundImage(`url("/static/img/BackgroundGlowCluster01.png")),
     ]);
+
   let container =
     style([
       display(`flex),
@@ -17,6 +18,8 @@ module Styles = {
         [
           position(`relative),
           flexDirection(`row),
+          maxWidth(`rem(96.)),
+          margin2(~v=`zero, ~h=`auto),
           padding2(~h=`rem(9.5), ~v=`rem(11.6)),
         ],
       ),

diff --git a/frontend/website-redesign/src/components/Badge.re b/frontend/website-redesign/src/components/Badge.re
@@ -8,8 +8,8 @@ let make =
       ~marginRight=0.5,
       ~mobileMarginLeft=0.5,
       ~mobileMarginRight=0.5,
-      ~title: string=?,
-      ~alt: string=?,
+      ~title="",
+      ~alt="",
     ) => {
   <img
     src

diff --git a/frontend/website-redesign/src/components/BlockchainComparison.re b/frontend/website-redesign/src/components/BlockchainComparison.re
@@ -4,7 +4,8 @@ module Styles = {
     style([
       width(`percent(100.)),
       height(`percent(100.)),
-      margin2(~v=`rem(3.), ~h=`zero),
+      marginBottom(`rem(3.)),
+      media(Theme.MediaQuery.tablet, [margin2(~v=`rem(3.), ~h=`zero)]),
     ]);
 
   let flex =
@@ -13,10 +14,6 @@ module Styles = {
       flexDirection(`column),
       justifyContent(`spaceBetween),
       marginLeft(`zero),
-      selector(
-        "div:last-child",
-        [media(Theme.MediaQuery.desktop, [marginLeft(`rem(3.))])],
-      ),
       media(Theme.MediaQuery.tablet, [flexDirection(`row)]),
     ]);
 
@@ -28,7 +25,7 @@ module Styles = {
       justifyContent(`spaceBetween),
       width(`percent(100.)),
       height(`percent(100.)),
-      marginTop(`rem(3.)),
+      marginTop(`rem(5.)),
       media(
         Theme.MediaQuery.notMobile,
         [flexDirection(`row), alignItems(`flexEnd)],
@@ -95,32 +92,24 @@ module Styles = {
       flexDirection(`column),
       justifyContent(`center),
       alignItems(`center),
-      marginTop(`rem(1.5)),
-      width(`percent(100.)),
-      height(`rem(20.)),
+      width(`rem(30.)),
+      height(`rem(30.)),
       marginLeft(`zero),
+      overflow(`hidden),
       media(
         Theme.MediaQuery.notMobile,
-        [marginLeft(`rem(1.)), width(`rem(21.)), height(`rem(14.))],
-      ),
-      media(
-        Theme.MediaQuery.tablet,
-        [justifyContent(`flexEnd), height(`rem(20.))],
+        [width(`rem(26.)), height(`rem(14.))],
       ),
+      media(Theme.MediaQuery.tablet, [height(`rem(20.))]),
     ]);
 
-  let minaBlockChainImage = style([width(`rem(5.)), height(`rem(5.))]);
+  let minaBlockChainImage = style([height(`percent(90.))]);
 
   let comparisonLabel =
     merge([Theme.Type.label, style([fontSize(`rem(1.25))])]);
 
   let otherBlockChainImage =
-    style([
-      width(`percent(100.)),
-      height(`percent(100.)),
-      marginLeft(`zero),
-      media(Theme.MediaQuery.tablet, [marginLeft(`rem(3.))]),
-    ]);
+    style([height(`percent(100.)), marginLeft(`zero)]);
 };
 
 [@react.component]
@@ -151,7 +140,7 @@ let make = () => {
           </div>
           <div className=Styles.comparisonImage>
             <img
-              src="/static/img/MinaBlockchain.png"
+              src="/static/img/mina-cubes.gif"
               className=Styles.minaBlockChainImage
               alt="Mina Blockchain Size"
             />
@@ -180,7 +169,7 @@ let make = () => {
           </div>
           <div className=Styles.comparisonImage>
             <img
-              src="/static/img/OtherBlockchains.png"
+              src="/static/img/mina-heavy.gif"
               className=Styles.otherBlockChainImage
               alt="Other Blockchain Size"
             />

diff --git a/frontend/website-redesign/src/components/Button.re b/frontend/website-redesign/src/components/Button.re
@@ -82,7 +82,7 @@ let make =
       ~width=`rem(10.9),
       ~borderColor=Theme.Colors.black,
       ~paddingX=1.5,
-      ~paddingY=1.,
+      ~paddingY=0.,
       ~bgColor=Theme.Colors.orange,
       ~dark=false,
       ~onClick=?,

diff --git a/frontend/website-redesign/src/components/Contributors.re b/frontend/website-redesign/src/components/Contributors.re
@@ -5,7 +5,11 @@ module Styles = {
       padding2(~v=`rem(4.), ~h=`rem(1.25)),
       media(
         Theme.MediaQuery.desktop,
-        [padding2(~v=`rem(8.), ~h=`rem(9.5)), maxWidth(`rem(89.))],
+        [
+          padding2(~v=`rem(8.), ~h=`rem(9.5)),
+          maxWidth(`rem(89.)),
+          margin2(~v=`zero, ~h=`auto),
+        ],
       ),
     ]);
   let header = merge([Theme.Type.h2, style([marginBottom(`rem(0.5))])]);

diff --git a/frontend/website-redesign/src/components/Footer.re b/frontend/website-redesign/src/components/Footer.re
@@ -49,12 +49,23 @@ module Styles = {
       justifyContent(`spaceBetween),
       color(white),
     ]);
+
   let innerContainer =
     style([
       display(`flex),
       flexDirection(`column),
+      justifyContent(`spaceBetween),
       media(Theme.MediaQuery.desktop, [flexDirection(`row)]),
     ]);
+
+  let whiteLine =
+    style([
+      border(`px(1), `solid, white),
+      marginTop(`rem(3.0)),
+      width(`percent(100.)),
+      opacity(0.2),
+      marginBottom(`rem(0.)),
+    ]);
 };
 
 module SocialIcons = {
@@ -94,16 +105,20 @@ module LeftSide = {
         alignContent(`spaceBetween),
         media(Theme.MediaQuery.desktop, [marginRight(`rem(10.6))]),
       ]);
+
     let emailInputSection =
       style([media(Theme.MediaQuery.desktop, [marginTop(`rem(10.5))])]);
+
     let logo =
       style([
         height(`rem(3.1)),
         width(`rem(11.)),
         marginBottom(`rem(4.)),
       ]);
+
     let label =
       merge([Theme.Type.h4, style([color(white), lineHeight(`rem(2.))])]);
+
     let emailSubtext =
       merge([
         Theme.Type.paragraph,
@@ -116,6 +131,7 @@ module LeftSide = {
         ]),
       ]);
   };
+
   [@react.component]
   let make = () => {
     <div className=Styles.leftSide>
@@ -173,6 +189,7 @@ module Subfooter = {
           media(Theme.MediaQuery.desktop, [marginTop(`zero)]),
         ]),
       ]);
+
     let linksContainer =
       style([
         display(`flex),
@@ -183,10 +200,12 @@ module Subfooter = {
             flexDirection(`row),
             justifyContent(`spaceBetween),
             alignContent(`center),
-            width(`rem(36.5)),
+            width(`rem(39.3)),
+            marginRight(`rem(5.25)),
           ],
         ),
       ]);
+
     let copyright =
       merge([
         Theme.Type.paragraphSmall,
@@ -199,6 +218,7 @@ module Subfooter = {
         ]),
       ]);
   };
+
   [@react.component]
   let make = () => {
     <div className=Styles.column>
@@ -234,29 +254,11 @@ module Subfooter = {
   };
 };
 
-module WhiteLine = {
-  module Styles = {
-    open Css;
-    let whiteLine =
-      style([
-        border(`px(1), `solid, white),
-        marginTop(`rem(3.0)),
-        width(`percent(100.)),
-        opacity(0.2),
-        marginBottom(`rem(0.)),
-      ]);
-  };
-  [@react.component]
-  let make = () => {
-    <hr className=Styles.whiteLine />;
-  };
-};
-
 [@react.component]
 let make = () => {
-  <div className=Styles.footerContainer>
+  <footer className=Styles.footerContainer>
     <div className=Styles.innerContainer> <LeftSide /> <FooterLinks /> </div>
-    <WhiteLine />
+    <hr className=Styles.whiteLine />
     <Subfooter />
     <div className=Styles.backToTopButton>
       <Button
@@ -273,5 +275,5 @@ let make = () => {
         </span>
       </Button>
     </div>
-  </div>;
+  </footer>;
 };
diff --git a/frontend/website-redesign/src/components/FooterLinks.re b/frontend/website-redesign/src/components/FooterLinks.re
@@ -3,9 +3,7 @@ module Styles = {
   let linksGrid =
     style([
       display(`grid),
-      gridTemplateColumns([
-        `repeat((`num(2), `minmax((`rem(11.), `rem(11.5))))),
-      ]),
+      gridTemplateColumns([`repeat((`num(2), `fr(1.)))]),
       gridColumnGap(`rem(0.5)),
       gridRowGap(`rem(3.1)),
       marginTop(`rem(4.)),
@@ -22,7 +20,7 @@ module Styles = {
       ),
       media(
         Theme.MediaQuery.desktop,
-        [marginTop(`rem(0.)), width(`rem(36.5)), height(`rem(30.))],
+        [marginTop(`rem(0.)), height(`rem(30.))],
       ),
     ]);
   let linksGroup =

diff --git a/frontend/website-redesign/src/components/HomepageHero.re b/frontend/website-redesign/src/components/HomepageHero.re
@@ -4,10 +4,28 @@ module Styles = {
     style([
       height(`rem(120.)),
       width(`percent(100.)),
+      position(`relative),
       important(backgroundSize(`cover)),
       backgroundImage(`url(backgroundImg)),
-      media(Theme.MediaQuery.desktop, [height(`rem(180.))]),
+      media(Theme.MediaQuery.desktop, [height(`rem(140.))]),
       position(`relative),
+      after([
+        contentRule(""),
+        position(`absolute),
+        bottom(`zero),
+        left(`zero),
+        right(`zero),
+        height(`rem(30.)),
+        background(
+          linearGradient(
+            deg(0.),
+            [
+              (`percent(0.), white),
+              (`percent(100.), rgba(255, 255, 255, 0.)),
+            ],
+          ),
+        ),
+      ]),
     ]);
 
   let container =
@@ -27,7 +45,6 @@ module Styles = {
       marginTop(`rem(13.)),
       media("(min-width:65rem)", [flexDirection(`row)]),
       media(Theme.MediaQuery.tablet, [marginTop(`rem(17.))]),
-      media(Theme.MediaQuery.desktop, [marginTop(`rem(50.))]),
     ]);
 
   let heroHeadline =
@@ -39,13 +56,12 @@ module Styles = {
         alignItems(`center),
         marginTop(`rem(23.)),
         media(Theme.MediaQuery.tablet, [marginTop(`rem(32.))]),
-        media(Theme.MediaQuery.desktop, [marginTop(`rem(37.))]),
+        media(Theme.MediaQuery.desktop, [marginTop(`rem(35.))]),
       ]),
     ]);
 
   let heroImageSize =
     style([
-      height(`rem(20.5)),
       width(`percent(100.)),
       media(
         "(min-width:38rem)",
@@ -82,7 +98,7 @@ module Styles = {
 
   let buttonIcon =
     style([
-      marginTop(`rem(0.65)),
+      height(`rem(1.5)),
       marginLeft(`rem(0.5)),
       color(hex("#FF603B")),
     ]);