[LIGO-96] Redesign partners section

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

@@ -271,7 +271,7 @@ class Index extends React.Component {
 
     const Features = () => (
       <div className="features">
-        <h2 className="sectionTitle">Features</h2>
+        <h2>Features</h2>
 
         <div className="flex-inline-container">
           {[
@@ -336,25 +336,24 @@ 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">
-          <h2 className="sectionTitle">Partners</h2>
-          <div className="logos">{showcase}</div>
-          {/* <div className="more-users">
-            <a className="button" href={pageUrl('users.html')}>
-              More {siteConfig.title} Users
-            </a>
-          </div> */}
+        <div className="partners-container hide-small">
+          {PartnerShowcase}
+          {/* <div className="partners-list"></div> */}
+          <div className="partners-text">
+            <h3>Our Partners</h3>
+            <p className="body">
+              We are not alone in this world -- here're some guys who support us
+            </p>
+          </div>
         </div>
       );
     };
@@ -381,7 +380,7 @@ class Index extends React.Component {
 
       return (
         <div className="productShowcaseSection paddingBottom team">
-          <h2 className="sectionTitle">Team</h2>
+          <h2>Team</h2>
           <div className="flex-inline-container">{showcase}</div>
           {/* <div className="more-users">
             <a className="button" href={pageUrl('users.html')}>

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
   }

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,
@@ -490,6 +492,10 @@ body
   align-items: stretch;
 }
 
+.team .flex-inline-container {
+  align-items: flex-start;
+}
+
 /** Feature Cards **/
 .card {
   display: flex;
@@ -509,6 +515,27 @@ body
   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);
+}
+
+.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 {
@@ -538,6 +565,9 @@ body
     max-width: 100%;
     width: 100%;
   }
+  .hide-small {
+    display: none;
+  }
 }
 
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {

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>