docs: add new product launch webinar banner for mysql, oracle & mariadb section

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9091
GitOrigin-RevId: 215ba8051eb957f751258a22562eef3980de8c85

docs/src/components/HasuraConBanner/index.tsx

@@ -1,19 +1,49 @@
 import React from 'react';
 
-import hasuraConDark from '@site/static/img/hasura-con-dark.png';
+// import hasuraConDark from '@site/static/img/hasura-con-dark.png';
-import hasuraConLight from '@site/static/img/hasura-con-light.png';
+// import hasuraConLight from '@site/static/img/hasura-con-light.png';
 import ArrowRight from '@site/static/icons/arrow_right.svg';
 
 import styles from './styles.module.scss';
 
 const HasuraConBanner = props => {
-  const isSnowFlakeSectionPage = props.location.pathname.startsWith(`/docs/latest/databases/snowflake`);
+  const isSnowFlakeSection = props.location.pathname.startsWith(`/docs/latest/databases/snowflake`);
 
-  const isObservabilitySectionPage = props.location.pathname.startsWith(`/docs/latest/observability`);
+  const isObservabilitySection = props.location.pathname.startsWith(`/docs/latest/observability`);
 
-  const isSecuritySectionPage = props.location.pathname.startsWith(`/docs/latest/security`);
+  const isSecuritySection = props.location.pathname.startsWith(`/docs/latest/security`);
 
-  if (isSnowFlakeSectionPage) {
+  const isMySQLSection = props.location.pathname.startsWith(`/docs/latest/databases/mysql`);
+
+  const isOracleSection = props.location.pathname.startsWith(`/docs/latest/databases/oracle`);
+
+  const isMariaDBSection = props.location.pathname.startsWith(`/docs/latest/databases/mariadb`);
+
+  // Banner for - New product launch webinar */
+  if (isMySQLSection || isOracleSection || isMariaDBSection) {
+    return (
+      <div className={styles['product-launch-webinar-bg']}>
+        <a className={styles['webinar-banner']} href="https://hasura.io/events/webinar/product-launch/">
+          <div className={styles['hasura-con-brand']}>
+            <img
+              className={styles['brand-light']}
+              src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683628053/main-web/Group_11457_vceb9f.png"
+              alt="hasura-webinar"
+            />
+          </div>
+          <div className={styles['content-div']}>
+            <h3>Ship faster with low-code APIs on MySQL, MariaDB, and Oracle</h3>
+            <div className={styles['hasura-con-register'] + ' ' + styles['hasura-con-register-mobile-hide']}>
+              Register
+              <ArrowRight />
+            </div>
+          </div>
+        </a>
+      </div>
+    );
+  }
+
+  if (isSnowFlakeSection) {
     return (
       <div className={styles['snowflake-bg']}>
         <a className={styles['webinar-banner']} href="https://hasura.io/events/webinar/snowflake-and-postgresql/">
@@ -36,7 +66,30 @@ const HasuraConBanner = props => {
     );
   }
 
-  if (isObservabilitySectionPage) {
+  if (isSnowFlakeSection) {
+    return (
+      <div className={styles['snowflake-bg']}>
+        <a className={styles['webinar-banner']} href="https://hasura.io/events/webinar/snowflake-and-postgresql/">
+          <div className={styles['hasura-con-brand']}>
+            <img
+              className={styles['brand-light']}
+              src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1677756408/main-web/Group_11455_1_ziz1fz.png"
+              alt="Hasura Con"
+            />
+          </div>
+          <div className={styles['content-div']}>
+            <h3>Combining Snowflake and PostgreSQL to build low-latency apps on historical data insights</h3>
+            <div className={styles['hasura-con-register'] + ' ' + styles['hasura-con-register-mobile-hide']}>
+              View Recording
+              <ArrowRight />
+            </div>
+          </div>
+        </a>
+      </div>
+    );
+  }
+
+  if (isObservabilitySection) {
     return (
       <div className={styles['observe-bg']}>
         <a
@@ -62,7 +115,7 @@ const HasuraConBanner = props => {
     );
   }
 
-  if (isSecuritySectionPage) {
+  if (isSecuritySection) {
     return (
       <div className={styles['security-bg']}>
         <a className={styles['webinar-banner']} href="https://hasura.io/events/webinar/securing-your-api-with-hasura/">
@@ -85,24 +138,26 @@ const HasuraConBanner = props => {
     );
   }
 
-  return (
+  return null;
-    <a className={styles['hasura-con-banner']} href="https://hasura.io/events/hasura-con-2022/">
+
-      <div className={styles['hasura-con-brand']}>
+  // return (
-        <img className={styles['brand-dark']} src={hasuraConDark} alt="Hasura Con" />
+  //   <a className={styles['hasura-con-banner']} href="https://hasura.io/events/hasura-con-2022/">
-        <img className={styles['brand-light']} src={hasuraConLight} alt="Hasura Con" />
+  //     <div className={styles['hasura-con-brand']}>
-      </div>
+  //       <img className={styles['brand-dark']} src={hasuraConDark} alt="Hasura Con" />
-      <div className={styles['hasura-con-space-between']}>
+  //       <img className={styles['brand-light']} src={hasuraConLight} alt="Hasura Con" />
-        <div>
+  //     </div>
-          <div className={styles['hasura-con-desc']}>The Hasura User Conference</div>
+  //     <div className={styles['hasura-con-space-between']}>
-          <div className={styles['hasura-con-title']}>New Product Announcements</div>
+  //       <div>
-        </div>
+  //         <div className={styles['hasura-con-desc']}>The Hasura User Conference</div>
-        <div className={styles['hasura-con-register'] + ' ' + styles['hasura-con-register-mobile-hide']}>
+  //         <div className={styles['hasura-con-title']}>New Product Announcements</div>
-          View Recordings
+  //       </div>
-          <ArrowRight />
+  //       <div className={styles['hasura-con-register'] + ' ' + styles['hasura-con-register-mobile-hide']}>
-        </div>
+  //         View Recordings
-      </div>
+  //         <ArrowRight />
-    </a>
+  //       </div>
-  );
+  //     </div>
+  //   </a>
+  // );
 };
 
 export default HasuraConBanner;

docs/src/components/HasuraConBanner/styles.module.scss

@@ -179,6 +179,12 @@ html[data-theme='dark'] {
   }
 }
 
+.product-launch-webinar-bg {
+  background: #000615;
+  margin: 40px 0;
+  border-radius: 12px;
+}
+
 .snowflake-bg {
   background: linear-gradient(117.44deg, #2c64f4 35.75%, #a36ff8 95.65%, #16a9c9 136.27%);
   margin: 40px 0;