docs: add strip banner for hasuracon 23

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9112
GitOrigin-RevId: 8db39624f55814902275237f6c466236ed0dd465
This commit is contained in:
Jigyasu Arya 2023-05-11 16:39:24 +05:30 committed by hasura-bot
parent 29e91203a2
commit c70ef14901
2 changed files with 115 additions and 33 deletions

View File

@ -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;

View File

@ -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;