Merge branch 'LIGO-94-feature-cards' into 'site-redesign-init'

[LIGO 94] Redesign feature cards

See merge request ligolang/ligo!89

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

@@ -13,40 +13,7 @@ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
-class HomeSplash extends React.Component {
+const PascalLIGOTab = () => (
-  render() {
-    const { siteConfig, language = "" } = this.props;
-    const { baseUrl, docsUrl } = siteConfig;
-    const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
-    const langPart = `${language ? `${language}/` : ""}`;
-    const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
-
-    const SplashContainer = props => (
-      <div className="homeContainer">
-        <div className="homeSplashFade">
-          <div className="wrapper homeWrapper">
-            <div className="tabs">
-              <div className="nav-tabs">
-                <div
-                  id="tab-group-3-tab-4"
-                  className="nav-link active"
-                  data-group="group_3"
-                  data-tab="tab-group-3-content-4"
-                >
-                  PascaLIGO
-                </div>
-                <div
-                  className="nav-link"
-                  data-group="group_3"
-                  data-tab="tab-group-3-content-5"
-                >
-                  CameLIGO
-                </div>
-                <div className="nav-link">ReasonLIGO (coming soon) </div>
-                {/* <div id="tab-group-3-tab-5" className="nav-link" data-group="group_3"
-                data-tab="tab-group-3-content-5">Camligo</div> */}
-              </div>
-              <div className="tab-content">
   <div
     id="tab-group-3-content-4"
     className="tab-pane active"
@@ -67,17 +34,15 @@ class HomeSplash extends React.Component {
             function add (const a : int ; const b : int) : int is
             <br /> block {"{ skip }"} with a + b<br />
             <br />
-                          function subtract (const a : int ; const b : int) :
+            function subtract (const a : int ; const b : int) : int is
-                          int is
             <br /> block {"{ skip }"} with a - b<br />
             <br />
-                          // real entrypoint that re-routes the flow based on
+            // real entrypoint that re-routes the flow based on the action
-                          the action provided
+            provided
             <br />
-                          function main (const p : action ; const s : int) :
+            function main (const p : action ; const s : int) : (list(operation)
-                          (list(operation) * int) is
+            * int) is
-                          <br /> block {"{ skip }"} with ((nil :
+            <br /> block {"{ skip }"} with ((nil : list(operation)),
-                          list(operation)),
             <br /> case p of
             <br /> | Increment(n) -&gt; add(s, n)
             <br /> | Decrement(n) -&gt; subtract(s, n)
@@ -88,6 +53,9 @@ class HomeSplash extends React.Component {
       </span>
     </div>
   </div>
+);
+
+const CamelLIGOTab = () => (
   <div
     id="tab-group-3-content-5"
     className="tab-pane"
@@ -99,8 +67,7 @@ class HomeSplash extends React.Component {
         <code className="hljs css language-Pascal">
           type storage = int <br />
           <br />
-                        (* variant defining pseudo multi-entrypoint actions *){" "}
+          (* variant defining pseudo multi-entrypoint actions *) <br />
-                        <br />
           <br />
           type action =<br />| Increment of int
           <br />| Decrement of int
@@ -110,78 +77,80 @@ class HomeSplash extends React.Component {
           <br />
           let subtract (a: int) (b: int) : int = a - b<br />
           <br />
-                        (* real entrypoint that re-routes the flow based on the
+          (* real entrypoint that re-routes the flow based on the action
-                        action provided *)
+          provided *)
           <br />
           <br />
-                        let%entry main (p : action) storage =<br /> let storage
+          let%entry main (p : action) storage =<br /> let storage =<br /> match
-                        =<br /> match p with
+          p with
-                        <br /> | Increment n -> add storage n<br /> | Decrement
+          <br /> | Increment n -> add storage n<br /> | Decrement n -> subtract
-                        n -> subtract storage n<br /> in (([] : operation list),
+          storage n<br /> in (([] : operation list), storage)
-                        storage)
           <br />
         </code>
       </pre>
     </div>
   </div>
-              </div>
-            </div>
-
-            {props.children}
-          </div>
-        </div>
-      </div>
 );
 
-    const Logo = props => (
+const LinkButton = props => (
-      <div className="projectLogo">
+  <a href={props.href} target={props.target}>
-        <img src={props.img_src} alt="Project Logo" />
+    <button className={props.className}>{props.children}</button>
-      </div>
-    );
-
-    const ProjectTitle = () => (
-      <h2 className="projectTitle">
-        <small>{siteConfig.tagline}</small>
-      </h2>
-    );
-
-    const PromoSection = props => (
-      <div className="section promoSection">
-        <div className="promoRow">
-          <div className="pluginRowBlock">{props.children}</div>
-        </div>
-      </div>
-    );
-
-    const Button = props => (
-      <div className="pluginWrapper buttonWrapper">
-        <a className="button" href={props.href} target={props.target}>
-          {props.children}
   </a>
+);
+
+class HomeSplash extends React.Component {
+  render() {
+    const { siteConfig, language = "" } = this.props;
+    const { baseUrl, docsUrl } = siteConfig;
+    const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
+    const langPart = `${language ? `${language}/` : ""}`;
+    const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
+
+    const SampleCode = props => (
+      <div className="sample-code-container">
+        <div className="sample-code">
+          <div className="tabs">
+            <div className="nav-tabs">
+              <div
+                id="tab-group-3-tab-4"
+                className="nav-link active"
+                data-group="group_3"
+                data-tab="tab-group-3-content-4"
+              >
+                PascaLIGO
+              </div>
+              <div
+                className="nav-link"
+                data-group="group_3"
+                data-tab="tab-group-3-content-5"
+              >
+                CameLIGO
+              </div>
+              <div className="disabled">ReasonLIGO (coming soon) </div>
+            </div>
+            <div className="tab-content">
+              {PascalLIGOTab()}
+              {CamelLIGOTab()}
+            </div>
+          </div>
+        </div>
       </div>
     );
 
     return (
-      <SplashContainer>
+      <div className="home-container">
-        <div className="inner">
+        <div className="home-text">
-          <ProjectTitle siteConfig={siteConfig} />
+          <h4 className="tagline-text">{siteConfig.tagline}</h4>
-          <PromoSection>
+          <p className="body">{siteConfig.taglineSub}</p>
-            <Button href={docUrl("setup/installation.html")}>
+          <LinkButton
-              Get Started
+            href={docUrl("setup/installation.html")}
-            </Button>
+            className="large-primary-button"
-            <Button
-              href={docUrl(
-                "tutorials/get-started/tezos-taco-shop-smart-contract"
-              )}
           >
-              Tutorials
+            Get Started
-            </Button>
+          </LinkButton>
-            <Button href={docUrl("contributors/origin.html")}>
+        </div>
-              Contribute
+        <SampleCode />
-            </Button>
-          </PromoSection>
       </div>
-      </SplashContainer>
     );
   }
 }
@@ -259,33 +228,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>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>
     );
 
@@ -327,25 +305,23 @@ class Index extends React.Component {
         return null;
       }
 
-      const showcase = siteConfig.partners
+      const PartnerShowcase = siteConfig.partners
         .filter(user => user.pinned)
         .map(user => (
-          <a href={user.infoLink} key={user.infoLink}>
+          <a className="partner-link" href={user.infoLink} key={user.infoLink}>
             <img src={user.image} alt={user.caption} title={user.caption} />
           </a>
         ));
 
-      const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
-
       return (
-        <div className="productShowcaseSection paddingBottom">
+        <div className="partners-container hide-small">
-          <h1 className="sectionTitle">Partners</h1>
+          {PartnerShowcase}
-          <div className="logos">{showcase}</div>
+          <div className="partners-text">
-          {/* <div className="more-users">
+            <h3>Our Partners</h3>
-            <a className="button" href={pageUrl('users.html')}>
+            <p className="body">
-              More {siteConfig.title} Users
+              We are not alone in this world -- here're some guys who support us
-            </a>
+            </p>
-          </div> */}
+          </div>
         </div>
       );
     };
@@ -368,17 +344,10 @@ class Index extends React.Component {
           </a>
         ));
 
-      const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
-
       return (
-        <div className="productShowcaseSection paddingBottom team">
+        <div className="team">
-          <h1 className="sectionTitle">Team</h1>
+          <h2>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
-            </a>
-          </div> */}
         </div>
       );
     };

gitlab-pages/website/sidebars.json

@@ -1,11 +1,23 @@
 {
   "docs": {
     "Setup": ["setup/installation", "setup/editor-support"],
-    "Language Basics": ["language-basics/cheat-sheet", "language-basics/types", "language-basics/variables", "language-basics/functions", "language-basics/entrypoints", "language-basics/operators"],
+    "Language Basics": [
+      "language-basics/cheat-sheet",
+      "language-basics/types",
+      "language-basics/variables",
+      "language-basics/functions",
+      "language-basics/entrypoints",
+      "language-basics/operators"
+    ],
     "API": ["api-cli-commands"]
   },
   "contributors-docs": {
-    "Introduction": ["contributors/origin", "contributors/philosophy", "contributors/getting-started", "contributors/documentation-and-releases"],
+    "Introduction": [
+      "contributors/origin",
+      "contributors/philosophy",
+      "contributors/getting-started",
+      "contributors/documentation-and-releases"
+    ],
     "Big Picture": [
       "contributors/big-picture/overview",
       "contributors/big-picture/front-end",
@@ -13,9 +25,15 @@
       "contributors/big-picture/back-end",
       "contributors/big-picture/vendors"
     ],
-    "Road Map": ["contributors/road-map/short-term", "contributors/road-map/long-term"]
+    "Road Map": [
+      "contributors/road-map/short-term",
+      "contributors/road-map/long-term"
+    ]
   },
   "tutorials": {
-    "Get Started": ["tutorials/get-started/tezos-taco-shop-smart-contract", "tutorials/get-started/tezos-taco-shop-payout"]
+    "Get Started": [
+      "tutorials/get-started/tezos-taco-shop-smart-contract",
+      "tutorials/get-started/tezos-taco-shop-payout"
+    ]
   }
 }

gitlab-pages/website/siteConfig.js

@@ -14,7 +14,7 @@ const partners = [
     caption: "Nomadic Labs",
     // You will need to prepend the image path with your baseUrl
     // if it is not '/', like: '/test-site/img/image.jpg'.
-    image: "/img/nomadic-logo.jpg",
+    image: "/img/nomadic-logo.svg",
     infoLink: "https://www.nomadic-labs.com/",
     pinned: true
   },
@@ -22,7 +22,7 @@ const partners = [
     caption: "Tocqueville Group",
     // You will need to prepend the image path with your baseUrl
     // if it is not '/', like: '/test-site/img/image.jpg'.
-    image: "/img/tq-logo.svg",
+    image: "/img/tq-logo-2.svg",
     infoLink: "https://tqgroup.io/",
     pinned: true
   },
@@ -30,7 +30,7 @@ const partners = [
     caption: "Stove Labs",
     // You will need to prepend the image path with your baseUrl
     // if it is not '/', like: '/test-site/img/image.jpg'.
-    image: "/img/stove-logo.png",
+    image: "/img/stove-logo.svg",
     infoLink: "https://stove-labs.com",
     pinned: true
   }
@@ -82,7 +82,8 @@ const team = [
 const siteConfig = {
   title: "LIGO", // Title for your website.
   tagline:
-    "LIGO is a statically typed high-level smart-contract language that compiles down to Michelson. It seeks to be easy to use, extensible and safe.",
+    "LIGO is a statically typed high-level smart-contract language that compiles down to Michelson.",
+  taglineSub: "It seeks to be easy to use, extensible and safe.",
   url: "https://your-docusaurus-test-site.com", // Your website URL
   baseUrl: "/", // Base URL for your project */
   // For github.io type URLs, you would set the url and baseUrl like:

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

@@ -29,6 +29,8 @@ h4,
 .landing .headline {
   font-family: "DM Sans", sans-serif;
   font-weight: bold;
+  /** Override docusaurus rule that makes a huge top margin **/
+  margin-top: 1rem;
 }
 
 body,
@@ -39,12 +41,20 @@ body,
   font-family: "Open Sans", sans-serif;
 }
 
-code,
+/** TODO: code font size is currently 85%; designs have it as 1rem (16px);
+this breaks some of the tiny-text in the internal pages, so wait until those
+are fixed to set this to the correct size
+**/
+.landing code,
 .mono {
   font-family: "Source Code Pro", monospace;
   font-size: 1rem;
 }
 
+code {
+  font-family: "Source Code Pro", monospace;
+}
+
 h1 {
   font-size: 2.625rem;
 }
@@ -90,17 +100,11 @@ body,
 .landing .subhead {
   font-size: 1rem;
 }
-.footnote {
+.footnote,
+footnote {
   font-size: 0.75rem;
 }
 
-.projectTitle small {
-  max-width: 700px;
-  text-align: center;
-  margin: 0 auto;
-  margin-top: 0.7em;
-}
-
 .fixedHeaderContainer header .headerTitleWithLogo {
   display: none;
 }
@@ -116,12 +120,7 @@ body,
   background: #1a1a1a;
 }
 
-.homeContainer {
+.hljs {
-  box-shadow: inset 0 -10px 10px -6px rgba(177, 176, 176, 0.2);
-  background: #f6f4f4;
-}
-
-.homeContainer .hljs {
   text-align: left;
   background: transparent;
 }
@@ -147,9 +146,9 @@ body,
   border-bottom: 4px solid #1a1a1a;
 }
 
-.homeContainer .tabs .nav-tabs > div:last-of-type {
+.disabled {
   cursor: default;
-  color: #24292e64;
+  color: #24292e64 !important;
   border-bottom: none;
 }
 
@@ -163,9 +162,32 @@ body,
   top: 4px;
 }
 
-.promoSection .buttonWrapper:first-of-type > a.button {
+/** Top Section **/
-  background: #b2210c;
+.home-container {
-  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-level-3);
+}
+
+.home-text {
+  max-width: 40%;
+}
+
+.sample-code-container {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  max-width: 60%;
+  background: url("/img/geo.svg") top right/140px 140px no-repeat,
+    url("/img/geo.svg") bottom left/200px 200px no-repeat;
+}
+
+.sample-code {
+  width: 80%;
+  padding: 25px;
+  box-shadow: 0px 0px 70px rgba(13, 15, 51, 0.06);
+  background-color: white;
 }
 
 blockquote {
@@ -177,44 +199,21 @@ blockquote {
 blockquote code {
   opacity: 0.5;
 }
-/* 
-blockquote a {
-    color: rgba(255,255,255, 0.8);
-    border-bottom: 1px solid rgba(255,255,255, 0.8);
-}
-
-blockquote a:hover {
-    color: rgba(255,255,255, 1);
-    border-bottom: 1px solid rgba(255,255,255, 1);
-} */
-/* 
-blockquote {
-    background-color: rgba(252, 214, 0, 0.687);
-    border-left-color: rgba(240, 210, 37, 1);
-    color: rgba(0, 0, 0, 0.632);
-} */
 
 a {
-  color: rgba(178, 33, 12, 0.8);
+  color: var(--color-primary-text);
 }
 
 a:hover {
-  color: rgba(178, 33, 12, 1);
+  color: var(--color-primary-brand);
 }
 
-.homeContainer .homeWrapper .projectLogo {
+.landing a {
-  display: block;
+  color: var(--color-white);
-  position: relative;
-  padding: 0;
 }
 
-.projectTitle {
+.landing a:hover {
-  margin-top: 30px;
+  font-weight: bold;
-  margin-bottom: 0;
-}
-
-.projectTitle small {
-  margin: 0 auto;
 }
 
 .promoSection .promoRow {
@@ -238,7 +237,8 @@ a:hover {
   margin-top: -25px;
 }
 
-.features {
+.features,
+.team {
   background: white;
   margin-top: -40px;
   position: relative;
@@ -267,18 +267,6 @@ html {
   color: #b2210c;
 }
 
-.productShowcaseSection.team .logos img {
-  border-radius: 50%;
-  height: 150px;
-  margin-bottom: 0px;
-  padding-left: 40px;
-  padding-right: 40px;
-}
-
-.productShowcaseSection.team .logos p {
-  padding-top: 0px;
-}
-
 .toc .toggleNav {
   margin-top: 12px;
 }
@@ -287,6 +275,10 @@ html {
   padding-top: 60px;
 }
 
+.mainContainer > * {
+  padding: var(--padding-level-4) 0;
+}
+
 .tocActive .onPageNav > .toc-headings {
   padding-top: 24px;
 }
@@ -355,6 +347,7 @@ body
   font-weight: normal;
   line-height: 1.375rem;
   text-transform: none;
+  text-align: center;
 }
 
 .button,
@@ -383,7 +376,8 @@ body
 .large-secondary-button,
 .large-secondary-button:hover {
   border-radius: 37px;
-  padding: 20px;
+  padding: 5px 20px;
+  min-height: 56px;
   min-width: 132px;
   color: var(--color-white);
 }
@@ -462,7 +456,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);
 }
@@ -471,33 +465,131 @@ body
   color: var(--color-primary-brand);
 }
 
-.profileImage {
+.profileContainer:hover .profileImage {
-  max-height: 195px;
-  max-width: 195px;
-  border: var(--color-gray);
-}
-.profileImage:hover {
   box-shadow: 12px 12px 0px var(--color-primary-brand);
 }
 
-.team-container {
+.profileImage {
+  max-height: 195px;
+  max-width: 195px;
+  width: 100%;
+  border: var(--color-gray);
+}
+
+.flex-inline-container {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   padding: var(--padding-level-1);
   flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.team .flex-inline-container {
+  align-items: flex-start;
+}
+
+/** Feature Cards **/
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 30%;
+  background-color: var(--color-light-gray);
+}
+
+.card:hover {
+  background-color: var(--color-light-blue);
+}
+
+.card-text {
+  text-align: center;
+}
+
+/** Partners **/
+.partners-container {
+  background-color: var(--color-light-gray);
+  display: flex;
+  justify-content: space-around;
+  align-content: center;
+  padding: var(--padding-level-3);
+  margin: var(--padding-level-4) 0;
+}
+
+.partners-container a {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  margin: 0 10px;
+}
+
+.partners-text {
+  padding: 0 var(--padding-level-1);
+  border-left: 5px solid var(--color-primary-brand);
+}
+
+@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%;
+  }
+  .hide-small {
+    display: none;
+  }
 }
 
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
 }
 
-@media only screen and (min-width: 1200px) {
-}
-
 @media only screen and (max-width: 1023px) {
+  .home-container {
+    flex-direction: column-reverse;
+    margin-top: var(--padding-level-1);
+  }
+  .home-text {
+    align-content: center;
+    text-align: center;
+    max-width: 90%;
+    padding-top: var(--padding-level-2);
+  }
+  .sample-code-container {
+    max-width: 100%;
+  }
 }
 
-@media only screen and (min-width: 1400px) {
+@media only screen and (min-width: 1280px) {
+}
+
+@media only screen and (min-width: 1440px) {
+  .landing h4.tagline-text {
+    font-size: 2.25rem;
+  }
 }
 
 @media only screen and (min-width: 1500px) {

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/geo.svg

@@ -0,0 +1,11 @@
+<svg width="283" height="293" viewBox="0 0 283 293" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5493 9.85961L22.8389 40.1643L44.2426 17.8585L14.5493 9.85961Z" fill="#FC683A"/>
+<path d="M256.608 227L215 282.348L282.301 293L256.608 227Z" fill="#EFEFEF"/>
+<circle cx="100" cy="154" r="74" stroke="url(#paint0_linear)" stroke-width="52"/>
+<defs>
+<linearGradient id="paint0_linear" x1="100" y1="54.0002" x2="100" y2="254" 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>

gitlab-pages/website/static/img/tq-logo-2.svg

@@ -0,0 +1,17 @@
+<svg width="108" height="66" viewBox="0 0 108 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3" clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.9777 1.32883C56.4584 1.32883 42.2529 15.6534 42.2529 33.318C42.2529 50.9901 56.4584 65.3134 73.9777 65.3134C74.3753 65.3134 74.7717 65.3071 75.1631 65.2873V54.3835C74.7717 54.4034 74.3753 54.4158 73.9777 54.4158C62.4225 54.4158 53.0535 44.9687 53.0535 33.318C53.0535 21.6723 62.4213 12.2251 73.9777 12.2251C85.0257 12.2251 94.0734 20.8645 94.8489 31.8018H105.675C104.888 14.8382 91.0021 1.32883 73.9777 1.32883Z" fill="black"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="41" y="0" width="66" height="66">
+<path d="M41.7949 0.866028H106.157V65.7749H41.7949V0.866028Z" fill="black"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.9776 1.79015C56.7377 1.79015 42.7132 15.9347 42.7132 33.3177C42.7132 50.7044 56.7365 64.849 73.9776 64.849C74.2201 64.849 74.4626 64.849 74.7038 64.8403V54.8647C74.4626 54.8733 74.2201 54.8783 73.9776 54.8783C62.1873 54.8783 52.5955 45.2054 52.5955 33.3177C52.5955 21.4313 62.1873 11.7621 73.9776 11.7621C84.9997 11.7621 94.2715 20.327 95.271 31.3387H105.193C104.17 14.73 90.5527 1.79015 73.9763 1.79015H73.9776ZM73.9763 65.7734C56.233 65.7758 41.7949 51.2144 41.7949 33.3177C41.7949 15.4248 56.233 0.867027 73.9776 0.867027C91.2039 0.867027 105.328 14.4458 106.133 31.7804L106.158 32.2643H94.4216L94.3909 31.835C93.6301 21.0963 84.6649 12.6877 73.9776 12.6877C62.6932 12.6877 53.5126 21.94 53.5126 33.3177C53.5126 44.6954 62.6932 53.9527 73.9776 53.9527C74.3666 53.9527 74.7568 53.9403 75.1396 53.9204L75.6197 53.8969V65.7262L75.1852 65.7486C74.7876 65.7684 74.3826 65.7746 73.9788 65.7746" fill="black"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.713867 0.945824H74.2893V11.5481H32.6282V65.0259H21.1899V11.5481H0.713867V0.945824ZM91.5131 43.2978L85.7399 50.643L101.594 63.8831L107.374 56.6942L91.5131 43.2978Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="107.095" height="65.76" fill="white" transform="translate(0.713867 0.0781555)"/>
+</clipPath>
+</defs>
+</svg>