Add sponsors to docs landing page and root readme

Author: bkoelman

README.md

@@ -130,3 +130,8 @@ Alternatively, to build and validate the code, run all tests, generate code cove
 ```bash
 pwsh Build.ps1
 ```
+
+## Sponsors
+
+<a href="https://jb.gg/OpenSourceSupport"><img align="middle" src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg" alt="JetBrains Logo" style="width:150px"></a> &nbsp;
+<a href="https://www.araxis.com/buy/open-source"><img align="middle" src="https://www.araxis.com/theme/37/img/araxis-logo-lg.svg" alt="Araxis Logo" style="width:150px"></a>

docs/home/assets/home.css

@@ -95,7 +95,6 @@ h1, h2, h3, h4, h5, h6, .font-primary {
   margin-top: 72px;
 }
 
-
 /*--------------------------------------------------------------
 # Hero Section
 --------------------------------------------------------------*/
@@ -300,12 +299,6 @@ section {
   .breadcrumbs ol li {
     display: inline-block;
   }
-
-
-}
-
-div[feature]:hover {
-  cursor: pointer;
 }
 
 /*--------------------------------------------------------------
@@ -401,6 +394,34 @@ div[feature]:hover {
   margin-bottom: 0;
 }
 
+div[feature]:hover {
+  cursor: pointer;
+}
+
+/*--------------------------------------------------------------
+# Sponsors
+--------------------------------------------------------------*/
+.sponsors .icon-box {
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+  margin: 0 0 40px 0;
+  background: #fff;
+  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
+  transition: all 0.3s ease-in-out;
+  border-radius: 15px;
+  text-align: center;
+  border-bottom: 3px solid #fff;
+}
+
+.sponsors .icon-box:hover {
+  transform: translateY(-5px);
+  border-color: #ef7f4d;
+}
+
+div[sponsor]:hover {
+  cursor: pointer;
+}
 
 /*--------------------------------------------------------------
 # Footer

docs/home/assets/home.js

@@ -38,7 +38,6 @@
     }
   });
 
-
   // Feature panels linking
   $('div[feature]#filter').on('click', () => navigateTo('usage/reading/filtering.html'));
   $('div[feature]#sort').on('click', () => navigateTo('usage/reading/sorting.html'));
@@ -49,13 +48,19 @@
   $('div[feature]#validation').on('click', () => navigateTo('usage/options.html#enable-modelstate-validation'));
   $('div[feature]#customizable').on('click', () => navigateTo('usage/extensibility/resource-definitions.html'));
 
-
   const navigateTo = (url) => {
-    if (!window.getSelection().toString()){
+    if (!window.getSelection().toString()) {
       window.location = url;
     }
   }
 
+  // Sponsor panels linking
+  $('div[sponsor]#jetbrains').on('click', () => navigateExternalTo('https://jb.gg/OpenSourceSupport'));
+  $('div[sponsor]#araxis').on('click', () => navigateExternalTo('https://www.araxis.com/buy/open-source'));
+
+  const navigateExternalTo = (url) => {
+    window.open(url, "_blank");
+  }
 
   hljs.initHighlightingOnLoad()
 

docs/home/index.html

@@ -253,6 +253,29 @@ <h4 class="title">Response</h4>
         </div>
       </div>
     </section>
+    <section id="sponsors" class="sponsors">
+      <div class="container">
+        <div class="section-title" data-aos="fade-up">
+          <h2>Sponsors</h2>
+        </div>
+        <div class="row justify-content-center">
+          <div sponsor class="col-md-4 col-lg-3 d-flex align-items-stretch justify-content-center aos-init aos-animate" data-aos="zoom-in" data-aos-delay="100" id="jetbrains">
+            <div class="icon-box d-flex align-items-center">
+              <div class="icon">
+                <img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg" alt="JetBrains Logo" style="width:150px">
+              </div>
+            </div>
+          </div>
+          <div sponsor class="col-md-4 col-lg-3 d-flex align-items-stretch justify-content-center aos-init aos-animate" data-aos="zoom-in" data-aos-delay="100" id="araxis">
+            <div class="icon-box d-flex align-items-center">
+              <div class="icon">
+                <img src="https://www.araxis.com/theme/37/img/araxis-logo-lg.svg" alt="Araxis Logo" style="width:150px">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
     <footer id="footer">
       <div class="footer-newsletter section-bg aos-init aos-animate" data-aos="fade-up">
         <div class="container">