[LIGO-93] redesign profile pics

.gitignore

@@ -5,5 +5,10 @@ dune-project
 cache/*
 Version.ml
 /_opam/
+<<<<<<< HEAD
 /*.pp.ligo
-**/.DS_Store
+<<<<<<< HEAD
+**/.DS_Store
+=======
+**/.DS_Store
+>>>>>>> [LIGO-93] redesign profile pics

gitlab-pages/.gitignore

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

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

@@ -106,25 +106,109 @@ class HomeSplash extends React.Component {
     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
+    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="nav-link"
-                data-group="group_3"
-                data-tab="tab-group-3-content-5"
-              >
-                CameLIGO
+              <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>
+                    </span>
+                  </div>
+                </div>
+                <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 />
+                      </code>
+                    </pre>
+                  </div>
+                </div>
               </div>
               <div className="disabled">ReasonLIGO (coming soon) </div>
             </div>
@@ -132,22 +216,32 @@ class HomeSplash extends React.Component {
               {PascalLIGOTab()}
               {CamelLIGOTab()}
             </div>
+
+            {props.children}
           </div>
         </div>
       </div>
     );
 
     return (
-      <div className="home-container">
-        <div className="home-text">
-          <h4 className="tagline-text">{siteConfig.tagline}</h4>
-          <p className="body">{siteConfig.taglineSub}</p>
-          <LinkButton
-            href={docUrl("setup/installation.html")}
-            className="large-primary-button"
-          >
-            Get Started
-          </LinkButton>
+      <SplashContainer>
+        <div className="inner">
+          <ProjectTitle siteConfig={siteConfig} />
+          <PromoSection>
+            <Button href={docUrl("setup/installation.html")}>
+              Get Started
+            </Button>
+            <Button
+              href={docUrl(
+                "tutorials/get-started/tezos-taco-shop-smart-contract"
+              )}
+            >
+              Tutorials
+            </Button>
+            <Button href={docUrl("contributors/origin.html")}>
+              Contribute
+            </Button>
+          </PromoSection>
         </div>
         <SampleCode />
       </div>
@@ -246,20 +340,23 @@ class Index extends React.Component {
           {[
             {
               content:
-                "Write types, then code, and benefit from the safety coming from type systems.",
-              image: `${baseUrl}img/strong-type-system.svg`,
-              title: "Strong Type System"
+                "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 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"
+                "Write types, then code, and benefit from the safety coming from type systems.",
+              image: `${baseUrl}img/lightning.svg`,
+              imageAlign: "top",
+              title: "Strong Type System"
             },
 
             {
               content: "With Granary, you can use LIGO as a lib from NodeJS.",
-              image: `${baseUrl}img/easy-integration.svg`,
+              image: `${baseUrl}img/puzzle.svg`,
+              imageAlign: "top",
               title: "Easy Integration"
             }
           ].map(FeatureCard)}
@@ -313,6 +410,8 @@ class Index extends React.Component {
           </a>
         ));
 
+      const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
+
       return (
         <div className="partners-container hide-small">
           {PartnerShowcase}
@@ -344,10 +443,17 @@ class Index extends React.Component {
           </a>
         ));
 
+      const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
+
       return (
-        <div className="team">
-          <h2>Team</h2>
-          <div className="flex-inline-container">{showcase}</div>
+        <div className="productShowcaseSection paddingBottom team">
+          <h1 className="sectionTitle">Team</h1>
+          <div className="team-container">{showcase}</div>
+          {/* <div className="more-users">
+            <a className="button" href={pageUrl('users.html')}>
+              More {siteConfig.title} Users
+            </a>
+          </div> */}
         </div>
       );
     };

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.svg",
+    image: "/img/nomadic-logo.jpg",
     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-2.svg",
+    image: "/img/tq-logo.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.svg",
+    image: "/img/stove-logo.png",
     infoLink: "https://stove-labs.com",
     pinned: true
   }
@@ -82,8 +82,7 @@ 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.",
-  taglineSub: "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. 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

@@ -454,10 +454,35 @@ body
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 20%;
+  max-width: fit-content;
+  color: var(--color-primary-text);
   padding: 0 var(--padding-level-1);
 }
 
+.profileContainer:hover {
+  color: var(--color-primary-brand);
+}
+
+.profileImage {
+  max-height: 195px;
+  max-width: 195px;
+  border: var(--color-gray);
+}
+.profileImage:hover {
+  box-shadow: 12px 12px 0px var(--color-primary-brand);
+}
+
+.team-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: var(--padding-level-1);
+  flex-wrap: wrap;
+}
+
+@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+}
+
 .profileContainer p {
   color: var(--color-primary-text);
 }