hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-12-14 17:02:49 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9091
GitOrigin-RevId: 215ba8051eb957f751258a22562eef3980de8c85
This commit is contained in:
Jigyasu Arya 2023-05-09 20:15:36 +05:30 committed by hasura-bot
parent 7a28f0a349
commit 4b492e1d79
2 changed files with 87 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
docs/src/components/HasuraConBanner/index.tsx
View File

@ -1,19 +1,49 @@
import React from 'react';
import hasuraConDark from '@site/static/img/hasura-con-dark.png';
import hasuraConLight from '@site/static/img/hasura-con-light.png';
// import hasuraConDark from '@site/static/img/hasura-con-dark.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 (
<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 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>
// );
};
export default HasuraConBanner;

6
docs/src/components/HasuraConBanner/styles.module.scss
View File

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