Update AG Grid Sponsor Section

src/components/Sponsors/Sponsors.jsx

@@ -1,41 +1,61 @@
-// Import External Dependencies
 import Link from '../Link/Link';
-
-// Imports for Ad Content
 import AGLogo from '../../assets/ag-grid-logo.png';
+import AGChartsLogo from '../../assets/ag-charts-logo.png';
 import WebpackIcon from '../../assets/icon-square-small.svg';
-
-// Load Styling
 import '../Sponsors/Sponsors.scss';
 
-// Create and export the component
 const Sponsors = () => {
   return (
     <div className="sponsors">
-      <Link
-        className="sponsors__content"
-        to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship"
-      >
-        <img
-          src={AGLogo}
-          width={260}
-          height={140}
-          alt="ag grid"
-          loading="lazy"
-        />
-        <img
-          className="sponsors__img__webpack"
-          src={WebpackIcon}
-          alt="webpack"
-          width={150}
-          height={150}
-          loading="lazy"
-        />
-        <div className="sponsors__content-cont">
-          ag-grid is proud to partner with webpack
+      <div className="sponsors__content">
+        <div className="sponsors__link-wrapper">
+          <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+            <img
+              className="agGridLogo"
+              src={AGLogo}
+              alt="ag grid"
+              width={220}
+              loading="lazy"
+            />
+          </Link>
+        </div>
+        <div className="sponsors__link-wrapper">
+          <Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+            <img
+              className="agChartsLogo"
+              src={AGChartsLogo}
+              alt="ag charts"
+              width={220}
+              loading="lazy"
+            />
+          </Link>
         </div>
-      </Link>
+        <div className="sponsors__link-wrapper-2">
+          <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
+            <div className="sponsors__tagline">
+              Datagrid and Charting for Enterprise Applications
+              <br />
+              <span style={{ color: '#0070E0', fontSize: '0.70em' }}>
+                Learn more...
+              </span>
+            </div>
+            <div className="sponsors__img__wrapper">
+              <img
+                src={WebpackIcon}
+                alt="webpack"
+                width={150}
+                height={150}
+                loading="lazy"
+              />
+            </div>
+            <div className="sponsors__footer">
+              Proud to partner with webpack
+            </div>
+          </Link>
+        </div>
+      </div>
     </div>
   );
 };
+
 export default Sponsors;

src/components/Sponsors/Sponsors.scss

@@ -1,43 +1,104 @@
 @import 'functions';
 @import 'mixins';
 
+$sponsor-text-color-dark: #cecece;
+$sponsor-text-color-light: #535353;
+$background-color-hover: rgb(50, 50, 50);
+$link-wrapper-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.2);
+$link-wrapper-shadow-dark: 0 3px 10px 0px rgba(255, 255, 255, 0.2);
+$link-wrapper-radius: 8px;
+$link-wrapper-margin: 8px;
+$tagline-font-size: 2em;
+$footer-font-size: 1.7em;
+
+[data-theme='dark'] {
+  .agGridLogo {
+    content: url('../../assets/ag-grid-logo-dark.png');
+  }
+
+  .agChartsLogo {
+    content: url('../../assets/ag-charts-logo-dark.png');
+  }
+
+  .sponsors {
+    &__tagline,
+    &__footer {
+      margin: 1rem 0;
+      text-align: center;
+      color: $sponsor-text-color-dark;
+    }
+    &__tagline {
+      font-size: $tagline-font-size;
+    }
+    &__footer {
+      font-size: $footer-font-size;
+      font-style: italic;
+    }
+    &__link-wrapper {
+      background: rgb(12, 12, 12);
+      box-shadow: $link-wrapper-shadow-dark;
+      border-radius: $link-wrapper-radius;
+      margin: $link-wrapper-margin;
+      transition: transform 0.2s;
+      &:hover {
+        background-color: $background-color-hover;
+        transform: scale(1.05);
+      }
+    }
+  }
+}
+
 .sponsors {
   position: absolute;
   height: 100%;
   width: 250px;
   margin-left: -250px;
+  margin-right: 8px;
 
-  &__content-cont {
-    margin-top: 1rem;
-    font-size: 2em;
+  &__link-wrapper {
+    box-shadow: $link-wrapper-shadow;
+    border-radius: $link-wrapper-radius;
+    margin: $link-wrapper-margin;
+    transition: transform 0.2s;
+    &:hover {
+      background-color: getColor(concrete);
+      transform: scale(1.05);
+    }
+  }
+  &__tagline,
+  &__footer {
+    margin: 1rem 0;
     text-align: center;
-    color: #535353;
+    color: $sponsor-text-color-light;
+  }
+  &__tagline {
+    font-size: $tagline-font-size;
+  }
+  &__footer {
+    font-size: $footer-font-size;
+    font-style: italic;
   }
   &__content {
     position: sticky;
     display: none;
-    margin-top: 1.5em;
-    top: 1.5em;
+    margin: 1.5em 0;
+    top: 6em;
     padding: 0 1.5em 3em;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
-    align-content: flex-start;
     border-right: 2px solid getColor(concrete);
     overflow: hidden;
     transition: background-color 250ms;
-
     @include break(xlarge) {
       display: flex;
     }
-
-    &:hover {
-      background-color: getColor(concrete);
-    }
   }
   &__img {
-    &__webpack {
-      width: 100px;
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      width: 100%;
     }
   }
 }

src/styles/dark.scss

@@ -107,9 +107,6 @@ body {
 .footer__inner {
   border-color: #252525;
 }
-.sponsors__content:hover {
-  background-color: #272727;
-}
 a,
 button.as-link {
   color: #69a8ee;