[LIGO-94] redesign Features section

gitlab-pages/website/pages/en/index.js

@@ -259,33 +259,42 @@ class Index extends React.Component {
       </Block>
     );
 
+    const FeatureCard = props => (
+      <div className="card" key={props.title}>
+        <img src={props.image} />
+        <div className="card-text">
+          <h4>{props.title}</h4>
+          <p className="body">{props.content}</p>
+        </div>
+      </div>
+    );
+
     const Features = () => (
       <div className="features">
-        <h1 className="sectionTitle blockTitle">Features</h1>
+        <h2 className="sectionTitle">Features</h2>
-        <Block layout="fourColumn">
+
+        <div className="flex-inline-container">
           {[
-            {
-              content:
-                "Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.",
-              image: `${baseUrl}img/edit.svg`,
-              imageAlign: "top",
-              title: "Syntax Agnostic"
-            },
             {
               content:
                 "Write types, then code, and benefit from the safety coming from type systems.",
-              image: `${baseUrl}img/lightning.svg`,
+              image: `${baseUrl}img/strong-type-system.svg`,
-              imageAlign: "top",
               title: "Strong Type System"
             },
+            {
+              content:
+                "Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.",
+              image: `${baseUrl}img/syntax-agnostic.svg`,
+              title: "Syntax Agnostic"
+            },
+
             {
               content: "With Granary, you can use LIGO as a lib from NodeJS.",
-              image: `${baseUrl}img/puzzle.svg`,
+              image: `${baseUrl}img/easy-integration.svg`,
-              imageAlign: "top",
               title: "Easy Integration"
             }
-          ]}
+          ].map(FeatureCard)}
-        </Block>
+        </div>
       </div>
     );
 
@@ -339,7 +348,7 @@ class Index extends React.Component {
 
       return (
         <div className="productShowcaseSection paddingBottom">
-          <h1 className="sectionTitle">Partners</h1>
+          <h2 className="sectionTitle">Partners</h2>
           <div className="logos">{showcase}</div>
           {/* <div className="more-users">
             <a className="button" href={pageUrl('users.html')}>
@@ -372,8 +381,8 @@ class Index extends React.Component {
 
       return (
         <div className="productShowcaseSection paddingBottom team">
-          <h1 className="sectionTitle">Team</h1>
+          <h2 className="sectionTitle">Team</h2>
-          <div className="team-container">{showcase}</div>
+          <div className="flex-inline-container">{showcase}</div>
           {/* <div className="more-users">
             <a className="button" href={pageUrl('users.html')}>
               More {siteConfig.title} Users

gitlab-pages/website/static/css/custom.css

@@ -462,7 +462,7 @@ body
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  max-width: fit-content;
+  max-width: 20%;
   color: var(--color-primary-text);
   padding: 0 var(--padding-level-1);
 }
@@ -474,18 +474,71 @@ body
 .profileImage {
   max-height: 195px;
   max-width: 195px;
+  width: 100%;
   border: var(--color-gray);
 }
 .profileImage:hover {
   box-shadow: 12px 12px 0px var(--color-primary-brand);
 }
 
-.team-container {
+.flex-inline-container {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   padding: var(--padding-level-1);
   flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+/** Feature Cards **/
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 30%;
+  height: auto;
+  background-color: var(--color-light-gray);
+}
+
+.card:hover {
+  background-color: var(--color-light-blue);
+}
+
+.card-text {
+  text-align: center;
+}
+
+@media (min-width: 560px) and (max-width: 768px) {
+  /** Special rules to reorient feature cards at only one screen size**/
+  .card {
+    flex-direction: row;
+    width: 100%;
+    max-width: 100%;
+    justify-content: left;
+    margin: var(--padding-level-1) 0;
+  }
+  .card-text {
+    text-align: left;
+  }
+}
+
+@media (max-width: 768px) {
+  .profileContainer {
+    max-width: 30%;
+  }
+}
+
+@media (max-width: 560px) {
+  .card {
+    max-width: 100%;
+    margin: var(--padding-level-1) 0;
+  }
+  .profileContainer {
+    max-width: 100%;
+    width: 100%;
+  }
 }
 
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {

gitlab-pages/website/static/img/easy-integration.svg

@@ -0,0 +1,18 @@
+<svg width="170" height="170" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M142 77.7896C143.105 77.7896 144 78.685 144 79.7896V112.822C144 113.927 143.105 114.822 142 114.822H116.089C114.984 114.822 114.089 113.927 114.089 112.822V79.7895C114.089 78.685 114.984 77.7896 116.089 77.7896H142Z" fill="url(#paint0_linear)"/>
+<path d="M121.401 55C122.506 55 123.401 55.8954 123.401 57V82.911C123.401 84.0156 122.506 84.911 121.401 84.911H86.1781C85.0735 84.911 84.1781 84.0156 84.1781 82.911V57C84.1781 55.8954 85.0735 55 86.1781 55L121.401 55Z" fill="url(#paint1_linear)"/>
+<path d="M52.9111 56.0537C54.0157 56.0537 54.9111 56.9491 54.9111 58.0537L54.9111 101.76H25.0001L25.0001 58.0537C25.0001 56.9491 25.8956 56.0537 27.0001 56.0537L52.9111 56.0537Z" fill="#FC683A"/>
+<path d="M82.8218 85.9111C83.9263 85.9111 84.8218 86.8066 84.8218 87.9111V113.822C84.8218 114.927 83.9263 115.822 82.8218 115.822H48.4999L48.4999 85.9111H82.8218Z" fill="#FC683A"/>
+<path d="M54.9111 85.9111L54.9111 115.822H27.0001C25.8956 115.822 25.0001 114.927 25.0001 113.822L25.0001 85.9111H54.9111Z" fill="#FFB097"/>
+<path d="M142 55C143.105 55 144 55.8954 144 57V84.911H114.089V55L142 55Z" fill="#BDDCF9"/>
+<defs>
+<linearGradient id="paint0_linear" x1="114.51" y1="118.51" x2="143.51" y2="85.0104" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AA0FF"/>
+<stop offset="1" stop-color="#0072DC"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="84.5102" y1="84.5105" x2="114.51" y2="54.5105" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AA0FF"/>
+<stop offset="1" stop-color="#0072DC"/>
+</linearGradient>
+</defs>
+</svg>

gitlab-pages/website/static/img/strong-type-system.svg

@@ -0,0 +1,16 @@
+<svg width="170" height="170" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="41" y="55" width="102" height="72" rx="2" fill="url(#paint0_linear)"/>
+<rect x="27" y="41" width="102" height="72" rx="2" fill="url(#paint1_linear)"/>
+<circle cx="77" cy="77" r="21" fill="white"/>
+<path d="M67 76.8868L74.0732 84L87 71" stroke="#FC683A" stroke-width="5" stroke-linecap="square"/>
+<defs>
+<linearGradient id="paint0_linear" x1="41" y1="91" x2="143" y2="91" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFDCF6"/>
+<stop offset="1" stop-color="#CEE7FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="129" y1="77" x2="27" y2="77" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AA0FF"/>
+<stop offset="1" stop-color="#0072DC"/>
+</linearGradient>
+</defs>
+</svg>

gitlab-pages/website/static/img/syntax-agnostic.svg

@@ -0,0 +1,25 @@
+<svg width="170" height="170" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35 46C35 44.8954 35.8954 44 37 44H132.493C133.597 44 134.493 44.8954 134.493 46V120C134.493 121.105 133.597 122 132.493 122H37C35.8954 122 35 121.105 35 120V46Z" fill="url(#paint0_linear)"/>
+<path d="M116.234 94.5L108.772 102L101.31 94.5L93.8478 102L86.3858 94.5L78.9239 102L71.4619 94.5L64 102" stroke="white" stroke-width="5" stroke-linejoin="round"/>
+<path d="M35 46C35 44.8954 35.8954 44 37 44H132.493C133.597 44 134.493 44.8954 134.493 46V63H35V46Z" fill="url(#paint1_linear)" fill-opacity="0.45"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.791 66.3737L155.281 55.9843L113.934 86.1776L121.444 96.5669L162.791 66.3737ZM109.936 97.0332L113.933 86.1772L121.443 96.5666L109.936 97.0332Z" fill="#0D0F33"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="109" y="55" width="54" height="43">
+<mask id="path-5-inside-1" mask-type="luminance" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.791 66.3739L155.281 55.9846L113.934 86.1778L121.444 96.5672L162.791 66.3739ZM109.936 97.0334L113.933 86.1775L121.443 96.5668L109.936 97.0334Z"/>
+</mask>
+<path d="M155.281 55.9846L197.219 25.359L166.716 -16.8401L124.777 13.7855L155.281 55.9846ZM162.791 66.3739L193.295 108.573L235.233 77.9474L204.729 35.7483L162.791 66.3739ZM113.934 86.1778L83.4304 43.9788L41.4918 74.6043L71.9957 116.803L113.934 86.1778ZM121.444 96.5672L79.5057 127.193L110.009 169.392L151.948 138.766L121.444 96.5672ZM113.933 86.1775L155.872 55.5519L98.9098 -23.2495L65.2984 68.0288L113.933 86.1775ZM109.936 97.0334L61.3009 78.8847L34.2721 152.287L112.08 149.132L109.936 97.0334ZM121.443 96.5668L123.587 148.666L220.344 144.743L163.382 65.9413L121.443 96.5668ZM113.342 86.6101L120.852 96.9995L204.729 35.7483L197.219 25.359L113.342 86.6101ZM144.438 128.377L185.785 98.1836L124.777 13.7855L83.4304 43.9788L144.438 128.377ZM163.383 65.9416L155.873 55.5522L71.9957 116.803L79.5057 127.193L163.383 65.9416ZM132.287 24.1749L90.9404 54.3681L151.948 138.766L193.295 108.573L132.287 24.1749ZM65.2984 68.0288L61.3009 78.8847L158.571 115.182L162.568 104.326L65.2984 68.0288ZM163.382 65.9413L155.872 55.5519L71.9947 116.803L79.5047 127.192L163.382 65.9413ZM112.08 149.132L123.587 148.666L119.299 44.4681L107.792 44.9347L112.08 149.132Z" fill="#FC683A" mask="url(#path-5-inside-1)"/>
+</mask>
+<g mask="url(#mask0)">
+<rect width="51.8377" height="35.1415" transform="matrix(0.593657 0.806374 -0.801338 0.595984 163.06 30.3345)" fill="#FC683A"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="134.493" y1="90" x2="35" y2="90" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3AA0FF"/>
+<stop offset="1" stop-color="#0072DC"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="35" y1="53.5" x2="134.493" y2="53.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BFDCF6"/>
+<stop offset="1" stop-color="#CEE7FF"/>
+</linearGradient>
+</defs>
+</svg>