chore: added a banner for cfp

Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
blam
2023-07-13 09:58:02 +02:00
parent 8084bb0d31
commit b199874668
2 changed files with 51 additions and 22 deletions
+48 -22
View File
@@ -31,7 +31,7 @@ const HomePage = () => {
<BannerSection diagonalBottomBorder greyBackground>
<BannerSectionGrid
header={
!hiddenNewsletterBanner && (
<>
<div
className={clsx(
'card',
@@ -40,31 +40,57 @@ const HomePage = () => {
)}
>
<div className="text--left bannerContent">
🗞 Want to stay up to date with Backstage? Sign up for our{' '}
<Link
to="https://info.backstage.spotify.com/newsletter_subscribe"
className="text--secondary"
>
Newsletter
</Link>
!
CFP is now open for BackstageCon 2023 🚀
</div>
<div
className={clsx('button button--link', 'bannerCloseButton')}
onClick={() => hideNewsletterBanner(true)}
>
<svg
className="text--secondary"
width="24"
height="24"
viewBox="0 0 24 24"
<div>
<a
className="button button--outline button--secondary"
href="https://bit.ly/BackstageConCFP"
rel="noopener noreferrer"
target="_blank"
>
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
Submit a talk
</a>
</div>
</div>
)
{!hiddenNewsletterBanner && (
<div
className={clsx(
'card',
'padding--md',
homeStyles.newsletterBanner,
)}
>
<div className="text--left bannerContent">
🗞 Want to stay up to date with Backstage? Sign up for our{' '}
<Link
to="https://info.backstage.spotify.com/newsletter_subscribe"
className="text--secondary"
>
Newsletter
</Link>
!
</div>
<div
className={clsx(
'button button--link',
'bannerCloseButton',
)}
onClick={() => hideNewsletterBanner(true)}
>
<svg
className="text--secondary"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
</svg>
</div>
</div>
)}
</>
}
>
<ContentBlock
@@ -22,6 +22,9 @@
flex-direction: row;
color: var(--ifm-button-color);
background-color: var(--ifm-color-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
:global(.bannerContent) {
flex: 1;