Merge branch 'site-redesign-init' into 'dev'

[LIGO-91] Add redesign colors, typography, padding, fonts

See merge request ligolang/ligo!84

.gitignore

@@ -6,3 +6,4 @@ cache/*
 Version.ml
 /_opam/
 /*.pp.ligo
+**/.DS_Store

gitlab-pages/.gitignore

@@ -1,4 +1,4 @@
-.DS_Store
+**/.DS_Store
 
 node_modules
 

gitlab-pages/website/package.json

@@ -11,6 +11,6 @@
     "rename-version": "docusaurus-rename-version"
   },
   "devDependencies": {
-    "docusaurus": "^1.9.0"
+    "docusaurus": "^1.13.0"
   }
 }

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

@@ -5,116 +5,167 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const React = require('react');
+const React = require("react");
 
-const CompLibrary = require('../../core/CompLibrary.js');
+const CompLibrary = require("../../core/CompLibrary.js");
 
 const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
-class HomeSplash extends React.Component {
+const PascalLIGOTab = () => (
-  render() {
+  <div
-    const {siteConfig, language = ''} = this.props;
+    id="tab-group-3-content-4"
-    const {baseUrl, docsUrl} = siteConfig;
+    className="tab-pane active"
-    const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
+    data-group="group_3"
-    const langPart = `${language ? `${language}/` : ''}`;
+    tabIndex="-1"
-    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" data-group="group_3" tabIndex="-1">
     <div>
       <span>
-                    <pre><code className="hljs css language-Pascal">// variant defining pseudo multi-entrypoint actions<br />type action is<br />| Increment of int<br />| Decrement of int<br /><br />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) : int is<br />    block {'{ skip }'} with a - b<br /><br />// real entrypoint that re-routes the flow based on the action provided<br />function main (const p : action ; const s : int) : (list(operation) * int) is<br />  block {'{ skip }'} with ((nil : list(operation)),<br />    case p of<br />    | Increment(n) -&gt; add(s, n)<br />    | Decrement(n) -&gt; subtract(s, n)<br />    end)<br /></code></pre>
+        <pre>
+          <code className="hljs css language-Pascal">
+            // variant defining pseudo multi-entrypoint actions
+            <br />
+            type action is
+            <br />| Increment of int
+            <br />| Decrement of int
+            <br />
+            <br />
+            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) : int is
+            <br /> block {"{ skip }"} with a - b<br />
+            <br />
+            // real entrypoint that re-routes the flow based on the action
+            provided
+            <br />
+            function main (const p : action ; const s : int) : (list(operation)
+            * int) is
+            <br /> block {"{ skip }"} with ((nil : list(operation)),
+            <br /> case p of
+            <br /> | Increment(n) -&gt; add(s, n)
+            <br /> | Decrement(n) -&gt; subtract(s, n)
+            <br /> end)
+            <br />
+          </code>
+        </pre>
       </span>
     </div>
   </div>
-              <div id="tab-group-3-content-5" className="tab-pane" data-group="group_3" tabIndex="-1">
+);
+
+const CamelLIGOTab = () => (
+  <div
+    id="tab-group-3-content-5"
+    className="tab-pane"
+    data-group="group_3"
+    tabIndex="-1"
+  >
     <div>
       <pre>
         <code className="hljs css language-Pascal">
-                    type storage = int <br/><br/>(* variant defining pseudo multi-entrypoint actions *) <br/><br/>type action =<br/>| Increment of int<br/>| Decrement of int<br/><br/>let add (a: int) (b: int) : int = a + b<br/><br/>let subtract (a: int) (b: int) : int = a - b<br/><br/>(* real entrypoint that re-routes the flow based on the action provided *)<br/><br/>let%entry main (p : action) storage =<br/>  let storage =<br/>    match p with<br/>     | Increment n -> add storage n<br/>     | Decrement n -> subtract storage n<br/>  in (([] : operation list), storage)<br/>
+          type storage = int <br />
+          <br />
+          (* variant defining pseudo multi-entrypoint actions *) <br />
+          <br />
+          type action =<br />| Increment of int
+          <br />| Decrement of int
+          <br />
+          <br />
+          let add (a: int) (b: int) : int = a + b<br />
+          <br />
+          let subtract (a: int) (b: int) : int = a - b<br />
+          <br />
+          (* real entrypoint that re-routes the flow based on the action
+          provided *)
+          <br />
+          <br />
+          let%entry main (p : action) storage =<br /> let storage =<br /> match
+          p with
+          <br /> | Increment n -> add storage n<br /> | Decrement n -> subtract
+          storage n<br /> in (([] : operation list), 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')}>Get Started</Button>
+          <LinkButton
-            <Button href={docUrl('tutorials/get-started/tezos-taco-shop-smart-contract')}>Tutorials</Button>
+            href={docUrl("setup/installation.html")}
-            <Button href={docUrl('contributors/origin.html')}>Contribute</Button>
+            className="large-primary-button"
-          </PromoSection>
+          >
+            Get Started
+          </LinkButton>
+        </div>
+        <SampleCode />
       </div>
-      </SplashContainer>
     );
   }
 }
 
 class Index extends React.Component {
   render() {
-    const {config: siteConfig, language = ''} = this.props;
+    const { config: siteConfig, language = "" } = this.props;
     const { baseUrl } = siteConfig;
 
     const Block = props => (
       <Container
-        padding={['bottom', 'top']}
+        padding={["bottom", "top"]}
         id={props.id}
-        background={props.background}>
+        background={props.background}
+      >
         <GridBlock
           align="center"
           contents={props.children}
@@ -126,7 +177,8 @@ class Index extends React.Component {
     const FeatureCallout = () => (
       <div
         className="productShowcaseSection paddingBottom"
-        style={{textAlign: 'center'}}>
+        style={{ textAlign: "center" }}
+      >
         <h2>Feature Callout</h2>
         <MarkdownBlock>These are features of this project</MarkdownBlock>
       </div>
@@ -137,13 +189,13 @@ class Index extends React.Component {
         {[
           {
             content:
-              'To make your landing page more attractive, use illustrations! Check out ' +
+              "To make your landing page more attractive, use illustrations! Check out " +
-              '[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. ' +
+              "[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. " +
-              'The illustrations you see on this page are from unDraw.',
+              "The illustrations you see on this page are from unDraw.",
             image: `${baseUrl}img/undraw_code_review.svg`,
-            imageAlign: 'left',
+            imageAlign: "left",
-            title: 'Wonderful SVG Illustrations',
+            title: "Wonderful SVG Illustrations"
-          },
+          }
         ]}
       </Block>
     );
@@ -153,11 +205,11 @@ class Index extends React.Component {
         {[
           {
             content:
-              'This is another description of how this project is useful',
+              "This is another description of how this project is useful",
             image: `${baseUrl}img/undraw_note_list.svg`,
-            imageAlign: 'right',
+            imageAlign: "right",
-            title: 'Description',
+            title: "Description"
-          },
+          }
         ]}
       </Block>
     );
@@ -167,40 +219,51 @@ class Index extends React.Component {
         {[
           {
             content:
-              'Each new Docusaurus project has **randomly-generated** theme colors.',
+              "Each new Docusaurus project has **randomly-generated** theme colors.",
             image: `${baseUrl}img/undraw_youtube_tutorial.svg`,
-            imageAlign: 'right',
+            imageAlign: "right",
-            title: 'Randomly Generated Theme Colors',
+            title: "Randomly Generated Theme Colors"
-          },
+          }
         ]}
       </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.',
+              content:
-              image: `${baseUrl}img/edit.svg`,
+                "Write types, then code, and benefit from the safety coming from type systems.",
-              imageAlign: 'top',
+              image: `${baseUrl}img/strong-type-system.svg`,
-              title: 'Syntax Agnostic',
+              title: "Strong Type System"
             },
             {
-              content: 'Write types, then code, and benefit from the safety coming from type systems.',
+              content:
-              image: `${baseUrl}img/lightning.svg`,
+                "Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.",
-              imageAlign: 'top',
+              image: `${baseUrl}img/syntax-agnostic.svg`,
-              title: 'Strong Type System',
+              title: "Syntax Agnostic"
             },
+
             {
-              content: 'With Granary, you can use LIGO as a lib from NodeJS.',
+              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"
-              title: 'Easy Integration',
             }
-          ]}
+          ].map(FeatureCard)}
-        </Block>
+        </div>
       </div>
     );
 
@@ -229,9 +292,9 @@ class Index extends React.Component {
                 "Long term plans will be announced soon" +
                 "</em>",
               image: ``,
-              imageAlign: 'right',
+              imageAlign: "right",
-              title: 'Roadmap',
+              title: "Roadmap"
-            },
+            }
           ]}
         </Block>
       </div>
@@ -242,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>
       );
     };
@@ -273,32 +334,28 @@ class Index extends React.Component {
       const showcase = siteConfig.team
         .filter(user => user.pinned)
         .map(user => (
-          <a href={user.infoLink} key={user.infoLink}>
+          <a
-            <img src={user.image} alt={user.caption} title={user.caption} />
+            className="profileContainer"
-            <p>{user.caption}</p>
+            href={user.infoLink}
+            key={user.infoLink}
+          >
+            <img className="profileImage" src={user.image} alt={user.caption} />
+            <p className="headline">{user.caption}</p>
           </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="logos">{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>
       );
     };
 
     return (
-      <div>
+      <div className="landing">
         <HomeSplash siteConfig={siteConfig} language={language} />
         <div className="mainContainer">
-          
           <Features />
           {/* <Roadmap /> */}
           {/* <FeatureCallout /> */}

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

@@ -11,99 +11,104 @@
 // List of projects/orgs using your project for the users page.
 const partners = [
   {
-    caption: 'Nomadic Labs',
+    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/',
+    infoLink: "https://www.nomadic-labs.com/",
-    pinned: true,
+    pinned: true
   },
   {
-    caption: 'Tocqueville Group',
+    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/',
+    infoLink: "https://tqgroup.io/",
-    pinned: true,
+    pinned: true
   },
   {
-    caption: 'Stove Labs',
+    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',
+    infoLink: "https://stove-labs.com",
-    pinned: true,
+    pinned: true
-  },
+  }
 ];
 
 const team = [
   {
-    caption: 'Gabriel Alfour',
+    caption: "Gabriel Alfour",
     // You will need to prepend the image path with your baseUrl
     // if it is not '/', like: '/test-site/img/image.jpg'.
-    image: '/img/user.png',
+    image: "/img/user.svg",
-    infoLink: 'https://gitlab.com/gabriel.alfour',
+    infoLink: "https://gitlab.com/gabriel.alfour",
-    pinned: true,
+    pinned: true
   },
   {
-    caption: 'Georges Dupéron',
+    caption: "Georges Dupéron",
     // You will need to prepend the image path with your baseUrl
     // if it is not '/', like: '/test-site/img/image.jpg'.
-    image: '/img/user.png',
+    image: "/img/user.svg",
-    infoLink: 'https://gitlab.com/georges.duperon',
+    infoLink: "https://gitlab.com/georges.duperon",
-    pinned: true,
+    pinned: true
   },
   {
-    caption: 'Christian Rinderknecht',
+    caption: "Christian Rinderknecht",
     // You will need to prepend the image path with your baseUrl
     // if it is not '/', like: '/test-site/img/image.jpg'.
-    image: '/img/christian.jpeg',
+    image: "/img/christian.jpeg",
-    infoLink: 'https://github.com/rinderknecht',
+    infoLink: "https://github.com/rinderknecht",
-    pinned: true,
+    pinned: true
   },
   {
-    caption: 'Brice Aldrich',
+    caption: "Brice Aldrich",
     // You will need to prepend the image path with your baseUrl
     // if it is not '/', like: '/test-site/img/image.jpg'.
-    image: '/img/brice.png',
+    image: "/img/brice.png",
-    infoLink: 'https://github.com/DefinitelyNotAGoat',
+    infoLink: "https://github.com/DefinitelyNotAGoat",
-    pinned: true,
+    pinned: true
   },
   {
-    caption: 'Matej Sima',
+    caption: "Matej Sima",
     // You will need to prepend the image path with your baseUrl
     // if it is not '/', like: '/test-site/img/image.jpg'.
-    image: '/img/matej.jpg',
+    image: "/img/matej.jpg",
-    infoLink: 'https://github.com/maht0rz',
+    infoLink: "https://github.com/maht0rz",
-    pinned: true,
+    pinned: true
-  },
+  }
 ];
 
 const siteConfig = {
-  title: 'LIGO', // Title for your website.
+  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.',
+  tagline:
-  url: 'https://your-docusaurus-test-site.com', // Your website URL
+    "LIGO is a statically typed high-level smart-contract language that compiles down to Michelson.",
-  baseUrl: '/', // Base URL for your project */
+  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:
   //   url: 'https://facebook.github.io',
   //   baseUrl: '/test-site/',
 
   // Used for publishing and more
-  projectName: 'ligo',
+  projectName: "ligo",
-  organizationName: 'marigold',
+  organizationName: "marigold",
   // For top-level user or org sites, the organization is still the same.
   // e.g., for the https://JoelMarcey.github.io site, it would be set like...
   //   organizationName: 'JoelMarcey'
 
   // For no header links in the top nav bar -> headerLinks: [],
   headerLinks: [
-    {doc: 'setup/installation', label: 'Docs'},
+    { doc: "setup/installation", label: "Docs" },
-    {doc: 'tutorials/get-started/tezos-taco-shop-smart-contract', label: 'Tutorials'},
+    {
-    { blog: true, label: 'Blog' },
+      doc: "tutorials/get-started/tezos-taco-shop-smart-contract",
+      label: "Tutorials"
+    },
+    { blog: true, label: "Blog" },
     // TODO: { href: "/odoc", label: "Api" },
-    {doc: 'contributors/origin', label: 'Contribute'},
+    { doc: "contributors/origin", label: "Contribute" },
-    {href: 'https://discord.gg/9rhYaEt', label: ''},
+    { href: "https://discord.gg/9rhYaEt", label: "" },
-    { search: true },
+    { search: true }
   ],
 
   // If you have users set above, you add it here:
@@ -111,14 +116,14 @@ const siteConfig = {
   team,
 
   /* path to images for header/footer */
-  headerIcon: 'img/logo.svg',
+  headerIcon: "img/logo.svg",
-  footerIcon: 'img/logo.svg',
+  footerIcon: "img/logo.svg",
-  favicon: 'img/logo.svg',
+  favicon: "img/logo.svg",
 
   /* Colors for website */
   colors: {
-    primaryColor: '#1A1A1A',
+    primaryColor: "#1A1A1A",
-    secondaryColor: '#1A1A1A',
+    secondaryColor: "#1A1A1A"
   },
 
   /* Custom fonts for website */
@@ -140,20 +145,20 @@ const siteConfig = {
 
   highlight: {
     // Highlight.js theme to use for syntax highlighting in code blocks.
-    theme: 'default',
+    theme: "default"
   },
 
   // Add custom scripts here that would be placed in <script> tags.
-  scripts: ['https://buttons.github.io/buttons.js'],
+  scripts: ["https://buttons.github.io/buttons.js"],
 
   // On page navigation for the current documentation page.
-  onPageNav: 'separate',
+  onPageNav: "separate",
   // No .html extensions for paths.
   cleanUrl: true,
 
   // Open Graph and Twitter card images.
-  ogImage: 'img/undraw_online.svg',
+  ogImage: "img/undraw_online.svg",
-  twitterImage: 'img/undraw_tweetstorm.svg',
+  twitterImage: "img/undraw_tweetstorm.svg",
 
   // Show documentation's last contributor's name.
   // enableUpdateBy: true,
@@ -163,13 +168,15 @@ const siteConfig = {
 
   // You may provide arbitrary config keys to be used as needed by your
   // template. For example, if you need your repo's URL...
-    repoUrl: 'https://gitlab.com/ligolang/ligo',
+  repoUrl: "https://gitlab.com/ligolang/ligo",
-
+  stylesheets: [
+    "https://fonts.googleapis.com/css?family=DM+Sans|Open+Sans|Source+Code+Pro&display=swap"
+  ],
   algolia: {
-    apiKey: '12be98d9fd4242a5f16b70a5cc6b0158',
+    apiKey: "12be98d9fd4242a5f16b70a5cc6b0158",
-    indexName: 'ligolang',
+    indexName: "ligolang",
     algoliaOptions: {} // Optional, if provided by Algolia
-  },
+  }
 };
 
 module.exports = siteConfig;

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

@@ -1,30 +1,126 @@
-.projectTitle small {
+:root {
-    max-width: 700px;
+  --color-primary-brand: #3aa0ff;
-    text-align: center;
+  --color-secondary-brand: #fc683a;
-    margin: 0 auto;
+  --color-accent: #37d7c3;
-    margin-top: 0.7em;
+  --color-primary-text: #0d0f33;
+  --color-secondary-text: #5a5c74;
+  --color-gray: #ebebeb;
+  --color-light-blue: #ebf6ff;
+  --color-light-gray: #fafafa;
+  --color-white: #ffffff;
+  --color-code-background1: #eff4f7;
+  --color-code-background2: #d2dfe9;
+  --padding-level-1: 20px;
+  --padding-level-2: 25px;
+  --padding-level-3: 30px;
+  --padding-level-4: 45px;
+  --padding-level-5: 60px;
+  --padding-level-6: 100px;
+}
+
+html {
+  font-size: 16px;
+}
+
+h1,
+h2,
+h3,
+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,
+.body,
+.headline,
+.subhead,
+.footnote {
+  font-family: "Open Sans", sans-serif;
+}
+
+/** 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;
+}
+.landing h1 {
+  font-size: 4.5rem;
+}
+h2 {
+  font-size: 2.25rem;
+}
+.landing h2 {
+  font-size: 3rem;
+}
+h3 {
+  font-size: 1.5rem;
+}
+.landing h3 {
+  font-size: 2.25rem;
+}
+h4 {
+  font-size: 1.125rem;
+}
+.landing h4 {
+  font-size: 1.5rem;
+}
+.headline {
+  font-weight: bold;
+  font-size: 1rem;
+}
+.landing .headline {
+  font-size: 1.125rem;
+}
+body,
+.body {
+  font-size: 1rem;
+}
+.landing .body,
+.landing {
+  font-size: 1.125rem;
+}
+.subhead {
+  font-size: 0.875rem;
+}
+.landing .subhead {
+  font-size: 1rem;
+}
+.footnote,
+footnote {
+  font-size: 0.75rem;
 }
 
 .fixedHeaderContainer header .headerTitleWithLogo {
   display: none;
 }
 
-.fixedHeaderContainer header img {}
+.fixedHeaderContainer header img {
+}
 
 .nav-footer {
-    background: #1A1A1A;
+  background: var(--color-primary-text);
 }
 
 .navigationSlider .slidingNav {
-    background: #1A1A1A;
+  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;
 }
@@ -47,13 +143,12 @@
 }
 
 .tabs .nav-tabs > div.active {
-    border-bottom: 4px solid #1A1A1A;
+  border-bottom: 4px solid #1a1a1a;
 }
 
-
+.disabled {
-.homeContainer .tabs .nav-tabs > div:last-of-type {
   cursor: default;
-    color: #24292e64;
+  color: #24292e64 !important;
   border-bottom: none;
 }
 
@@ -67,17 +162,33 @@
   top: 4px;
 }
 
-
+/** Top Section **/
-.button {
+.home-container {
-    border: 1px solid #B2210C;
+  display: flex;
-    color: #B2210C;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-level-3);
 }
 
-.button:hover, .promoSection .buttonWrapper:first-of-type > a.button {
+.home-text {
-    background: #B2210C;
+  max-width: 40%;
-    color: white;
 }
 
+.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 {
   background-color: rgba(26, 26, 26, 0.3);
@@ -88,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 {
@@ -138,7 +226,7 @@ a:hover {
 }
 
 .blockElement {
-    color: #1A1A1A;
+  color: #1a1a1a;
 }
 
 .blockImage {
@@ -149,7 +237,8 @@ a:hover {
   margin-top: -25px;
 }
 
-.features {
+.features,
+.team {
   background: white;
   margin-top: -40px;
   position: relative;
@@ -159,7 +248,6 @@ a:hover {
 
 .sectionTitle {
   border-bottom: 4px solid #e0e0e0;
-    max-width: 200px;
   margin: 0 auto;
   margin-top: 35px;
   padding-bottom: 15px;
@@ -169,24 +257,14 @@ a:hover {
   margin-bottom: -20px;
 }
 
-.lightBackground, body, html {
+.lightBackground,
+body,
+html {
   background: white;
 }
 
 .copyright a {
-    color: #B2210C;
+  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 {
@@ -197,6 +275,10 @@ a:hover {
   padding-top: 60px;
 }
 
+.mainContainer > * {
+  padding: var(--padding-level-4) 0;
+}
+
 .tocActive .onPageNav > .toc-headings {
   padding-top: 24px;
 }
@@ -211,8 +293,15 @@ code {
   color: #444;
 }
 
-body > div.fixedHeaderContainer > div > header > div > nav > ul > li:nth-child(5)  {
+body
-    background: url('/img/discord.svg');
+  > div.fixedHeaderContainer
+  > div
+  > header
+  > div
+  > nav
+  > ul
+  > li:nth-child(5) {
+  background: url("/img/discord.svg");
   background-repeat: no-repeat;
   background-position: center center;
   min-width: 50px;
@@ -220,11 +309,26 @@ body > div.fixedHeaderContainer > div > header > div > nav > ul > li:nth-child(5
   opacity: 0.8;
 }
 
-body > div.fixedHeaderContainer > div > header > div > nav > ul > li:nth-child(5):hover {
+body
+  > div.fixedHeaderContainer
+  > div
+  > header
+  > div
+  > nav
+  > ul
+  > li:nth-child(5):hover {
   opacity: 1;
 }
 
-body > div.fixedHeaderContainer > div > header > div > nav > ul > li:nth-child(5) > a:hover {
+body
+  > div.fixedHeaderContainer
+  > div
+  > header
+  > div
+  > nav
+  > ul
+  > li:nth-child(5)
+  > a:hover {
   background: transparent;
 }
 
@@ -232,16 +336,260 @@ body > div.fixedHeaderContainer > div > header > div > nav > ul > li:nth-child(5
   min-width: 240px;
 }
 
+/** Buttons **/
+
+.button,
+.large-primary-button,
+.large-secondary-button {
+  border: none;
+  color: var(--color-white);
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.375rem;
+  text-transform: none;
+  text-align: center;
+}
+
+.button,
+.button:hover {
+  border-radius: 36px;
+  padding: 10px 20px;
+  background-color: var(--color-primary-brand);
+  min-width: 130px;
+  color: var(--color-white);
+}
+
+.button:hover {
+  box-shadow: 0px 2px 15px rgba(58, 160, 255, 0.3);
+}
+
+.button:focus {
+  background-color: #0078e8;
+}
+
+.button[disabled] {
+  background: rgba(58, 160, 255, 0.35);
+}
+
+.large-primary-button,
+.large-primary-button:hover,
+.large-secondary-button,
+.large-secondary-button:hover {
+  border-radius: 37px;
+  padding: 5px 20px;
+  min-height: 56px;
+  min-width: 132px;
+  color: var(--color-white);
+}
+
+.large-primary-button {
+  background-color: var(--color-primary-text);
+}
+
+.large-primary-button:hover {
+  box-shadow: 0px 2px 25px rgba(13, 15, 51, 0.3);
+}
+
+.large-primary-button:focus {
+  background-color: #010212;
+  box-shadow: 0px 2px 25px rgba(13, 15, 51, 0.3);
+}
+.large-primary-button[disabled] {
+  background: rgba(13, 15, 51, 0.35);
+}
+
+.large-secondary-button {
+  background-color: var(--color-secondary-brand);
+}
+
+.large-secondary-button:hover {
+  box-shadow: 0px 2px 25px rgba(252, 104, 58, 0.3);
+}
+
+.large-secondary-button:focus {
+  background-color: #f33e24;
+  box-shadow: 0px 2px 25px rgba(252, 104, 58, 0.3);
+}
+.large-secondary-button[disabled] {
+  background: rgba(252, 104, 58, 0.35);
+}
+
+.version-button {
+  background-color: var(--color-gray);
+  padding: 5px;
+  border-radius: 2px;
+  color: var(--color-primary-text);
+}
+.version-button:hover {
+  background-color: var(--color-light-blue);
+}
+.version-button:focus {
+  background: rgba(47, 152, 249, 0.3);
+}
+.version-button[disabled] {
+  background: rgba(58, 160, 255, 0.35);
+}
+
+.page-button * {
+  stroke: var(--color-primary-text);
+}
+.page-button:hover * {
+  stroke: var(--color-secondary-text);
+}
+.page-button:focus * {
+  stroke: #010212;
+}
+
+.discord-button #background {
+  fill: var(--color-primary-brand);
+}
+.discord-button:hover svg {
+  box-shadow: 0px 2px 15px rgba(58, 160, 255, 0.3);
+}
+.discord-button:focus #background {
+  fill: #0078e8;
+}
+
+/** Profile Images **/
+.profileContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 20%;
+  color: var(--color-primary-text);
+  padding: 0 var(--padding-level-1);
+}
+
+.profileContainer:hover {
+  color: var(--color-primary-brand);
+}
+
+.profileContainer:hover .profileImage {
+  box-shadow: 12px 12px 0px var(--color-primary-brand);
+}
+
+.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>

gitlab-pages/website/static/img/user.svg

@@ -0,0 +1,17 @@
+<svg width="195" height="195" viewBox="0 0 195 195" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="195" height="195" rx="2" fill="#EBF6FF"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="195" height="195">
+<rect width="195" height="195" rx="2" fill="#EFEFEF"/>
+</mask>
+<g mask="url(#mask0)">
+<g opacity="0.66">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96.8828 136.001C117.493 136.001 134.2 117.205 134.2 94.0192C134.2 70.8332 117.493 52.0371 96.8828 52.0371C76.2729 52.0371 59.5653 70.8332 59.5653 94.0192C59.5653 117.205 76.2729 136.001 96.8828 136.001ZM74.6715 144C40.8717 144 14.2319 172.785 16.8451 206.484L22.1944 275.469C22.9616 285.363 31.2138 293 41.1375 293H153.862C163.786 293 172.038 285.363 172.805 275.469L178.155 206.484C180.768 172.785 154.128 144 120.328 144H74.6715Z" fill="url(#paint0_linear)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="97.9998" y1="215.5" x2="97.9998" y2="25.9999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A5D4FF"/>
+<stop offset="1" stop-color="#D3EAFF"/>
+</linearGradient>
+</defs>
+</svg>

gitlab-pages/website/versioned_sidebars/version-next-sidebars.json

@@ -37,7 +37,8 @@
   },
   "version-next-tutorials": {
     "Get Started": [
-      "version-next-tutorials/get-started/tezos-taco-shop-smart-contract"
+      "version-next-tutorials/get-started/tezos-taco-shop-smart-contract",
+      "version-next-tutorials/get-started/tezos-taco-shop-payout"
     ]
   }
 }