docs: add strip banner for hasuracon 23

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9112
GitOrigin-RevId: 8db39624f55814902275237f6c466236ed0dd465

docs/src/components/HasuraConBanner/index.tsx

@@ -138,26 +138,29 @@ const HasuraConBanner = props => {
     );
   }
 
-  return null;
-
-  // return (
-  //   <a className={styles['hasura-con-banner']} href="https://hasura.io/events/hasura-con-2022/">
-  //     <div className={styles['hasura-con-brand']}>
-  //       <img className={styles['brand-dark']} src={hasuraConDark} alt="Hasura Con" />
-  //       <img className={styles['brand-light']} src={hasuraConLight} alt="Hasura Con" />
-  //     </div>
-  //     <div className={styles['hasura-con-space-between']}>
-  //       <div>
-  //         <div className={styles['hasura-con-desc']}>The Hasura User Conference</div>
-  //         <div className={styles['hasura-con-title']}>New Product Announcements</div>
-  //       </div>
-  //       <div className={styles['hasura-con-register'] + ' ' + styles['hasura-con-register-mobile-hide']}>
-  //         View Recordings
-  //         <ArrowRight />
-  //       </div>
-  //     </div>
-  //   </a>
-  // );
+  return (
+    <a className={styles['hasura-con-banner']} href="https://hasura.io/events/hasura-con-2023/">
+      <div className={styles['hasura-con-brand']}>
+        <img
+          className={styles['hasuracon23-img']}
+          src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683727035/main-web/Group_2608664_c10sky.png"
+          alt="Hasura Con"
+        />
+      </div>
+      <div className={styles['hasura-con-space-between']}>
+        <div>
+          <div className={styles['hasura-con-23-title']}>The fourth annual Hasura User Conference</div>
+        </div>
+        <div className={styles['hasura-con-register-button'] + ' ' + styles['hasura-con-register-mobile-hide']}>
+          Read more
+          <img
+            src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683723549/main-web/chevron-right_ldbi7d.png"
+            alt="arrow-icon"
+          />
+        </div>
+      </div>
+    </a>
+  );
 };
 
 export default HasuraConBanner;

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

@@ -1,17 +1,53 @@
 .hasura-con-banner {
   //hiding 2022 banner, will add new one for 2023 when the promotions start
-  display: none;
-  //display: grid;
+  // display: none;
+  display: grid;
   margin: 40px 0;
-  grid-template-columns: 110px 1fr;
-  grid-gap: 32px;
-  padding: 20px 60px;
-  background-image: url('@site/static/img/hasura-con-banner-light-bg.svg');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
+  grid-template-columns: 159px 1fr;
+  grid-gap: 6%;
+  padding: 35px 32px;
+  background: #ffef93;
+  // background-image: url('@site/static/img/hasura-con-banner-light-bg.svg');
+  // background-repeat: no-repeat;
+  // background-size: cover;
+  // background-position: center;
+
   border-radius: 8px;
+
+  .hasura-con-register-button {
+    // min-width: 163px;
+    height: 42px;
+    border-radius: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #3970fd;
+    white-space: nowrap;
+    padding: 0 16px 0 22px;
+    max-width: 130px;
+
+    color: #fff;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s ease-in-out 0s;
+
+    img {
+      transition: all 0.2s ease-in-out 0s;
+      margin-left: 4px;
+      min-width: 16px;
+      width: 16px;
+    }
+  }
+
   &:hover {
+    .hasura-con-register-button {
+      background: rgb(30, 86, 227);
+
+      img {
+        transform: translateX(5px);
+      }
+    }
+
     text-decoration: none;
     .hasura-con-register {
       svg {
@@ -37,6 +73,13 @@
     img {
       width: 97px;
     }
+
+    .hasuracon23-img {
+      min-width: 159px;
+      // margin-right: 42px;
+      margin-bottom: -10px;
+    }
+
     .brand-dark {
       display: block;
     }
@@ -53,6 +96,16 @@
     font-size: var(--ifm-h3-font-size);
     font-weight: var(--ifm-font-weight-semibold);
   }
+
+  .hasura-con-23-title {
+    font-size: 20px;
+    font-weight: 800;
+    color: #1f2a37;
+    line-height: 1.25;
+    letter-spacing: -0.02em;
+    // max-width: 220px;
+    padding-right: 60px;
+  }
   .hasura-con-register {
     display: flex;
     align-items: center;
@@ -74,7 +127,6 @@
 }
 html[data-theme='dark'] {
   .hasura-con-banner {
-    background-image: url('@site/static/img/hasura-con-banner-dark-bg.svg') !important;
     .hasura-con-brand {
       .brand-light {
         display: block;
@@ -147,18 +199,45 @@ html[data-theme='dark'] {
   .hasura-con-banner {
     padding: 20px 40px;
     .hasura-con-space-between {
-      display: block;
+      // display: block;
     }
   }
 }
 @media (max-width: 800px) {
   .hasura-con-banner {
-    grid-template-columns: 1fr;
-    grid-gap: 0;
+    // grid-template-columns: 1fr;
+    grid-gap: 40px;
     padding: 20px 24px;
   }
 }
 
+@media (min-width: 997px) and (max-width: 1380px) {
+  .hasura-con-banner {
+    grid-template-columns: 1fr;
+    grid-gap: 20px;
+    .hasura-con-register-button {
+      margin-top: 20px;
+    }
+  }
+}
+
+@media (max-width: 650px) {
+  .hasura-con-banner {
+    grid-template-columns: 1fr;
+    grid-gap: 20px;
+    padding: 20px 24px;
+    .hasura-con-space-between {
+      display: block;
+      .hasura-con-23-title {
+        padding-right: 0;
+      }
+    }
+    .hasura-con-register-button {
+      margin-top: 20px;
+    }
+  }
+}
+
 .observe-bg {
   background: linear-gradient(235.85deg, #2c64f4 -66.27%, #00288e 108.5%, #a36ff8 129.05%, #16a9c9 145.37%);
   margin: 40px 0;