special thanks to sovereign tech agency

Author: terrafrost

website/pages/en/index.js

@@ -113,11 +113,34 @@ class Index extends React.Component {
       </Block>
     );
 
+    const Sponsors = () => (
+        <Container
+          id="sponsors"
+          background={null}>
+          <div className="sponsors-header">
+            <h2>Special Thanks</h2>
+          </div>
+          <GridBlock
+            align="center"
+            layout="fourColumn"
+            contents={[
+              {
+                image: `${baseUrl}img/sponsors/sovereign-tech-agency.webp`,
+                imageAlign: 'top',
+                imageAlt: 'Sovereign Tech Agency',
+                imageLink: 'https://www.sovereign.tech/tech/phpseclib',
+              },
+            ]}
+          />
+        </Container>
+      );
+
     return (
       <div>
         <HomeSplash siteConfig={siteConfig} language={language} />
         <div className="mainContainer">
           <Features />
+          <Sponsors />
         </div>
       </div>
     );

website/static/css/custom.css

@@ -47,4 +47,33 @@ sub {
 .equation {
   font-size: 120%;
   font-family: "Times New Roman", Times, serif;
-}
+}
+
+/* Center heading */
+#sponsors .sponsors-header { text-align: center; margin-bottom: 0.75rem; }
+#sponsors .sponsors-header h2 { font-weight: 600; font-size: 1.5rem; margin: 0; }
+
+/* Center GridBlock contents as a group (works for 1..N sponsors) */
+#sponsors .gridBlock { text-align: center; }
+#sponsors .blockElement {
+  float: none !important;
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 16px 16px;
+}
+
+/* Center each logo box and scale logos up */
+#sponsors .blockImage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 140px;          /* slot height so different logos line up */
+  text-align: center;
+}
+
+#sponsors .blockImage img {
+  max-height: 120px;   /* never taller than 120px */
+  max-width: 200px;    /* never wider than 200px */
+  width: auto;
+  height: auto;
+}