feat: implement HeroImage

packages/docusaurus-playground/src/pages/index.mdx

@@ -3,6 +3,7 @@ import {
   HeroTitle,
   HeroDescription,
   HeroActions,
+  HeroImage,
   HeroAction,
   CallToActionSection,
   CallToActionButton,
@@ -38,6 +39,7 @@ import * as challengesData from '/generated/challenges.json'
       </HeroAction>
     </HeroActions>
   </HeroInfo>
+  <HeroImage src="/hero/hero-image.png" alt="alt" />
 </Hero>
 
 <Box>

packages/logos-docusaurus-theme/src/client/components/mdx/Hero/Hero.scss

@@ -1,4 +1,8 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
 .mdx-hero {
+  --default-z-index: 1;
   --hero-max-height: 1080px;
 
   position: relative;
@@ -6,6 +10,11 @@
   flex-direction: column;
   height: calc(100vh - var(--ifm-navbar-height) - 8px);
   max-height: var(--hero-max-height);
+  z-index: var(--default-z-index);
+
+  h1 {
+    @include lsd.typography('display4');
+  }
 }
 
 .mdx-hero--large {
@@ -25,3 +34,11 @@
 .mdx-hero--bottom {
   justify-content: flex-end;
 }
+
+@include utils.responsive('md', 'down') {
+  .mdx-hero {
+    h1 {
+      @include lsd.typography('h2');
+    }
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/HeroImage/HeroImage.scss

@@ -0,0 +1,21 @@
+@use '../../../css/utils';
+
+.mdx-hero-image {
+  --default-z-index: -1;
+  z-index: var(--default-z-index);
+
+  button {
+    display: none !important;
+  }
+
+  img {
+    position: absolute;
+    right: -300px;
+    top: 0;
+  }
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-hero-image {
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/HeroImage/HeroImage.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+import React, { PropsWithChildren } from 'react'
+import './HeroImage.scss'
+
+export type HeroImageProps = PropsWithChildren<
+  React.HTMLAttributes<HTMLDivElement>
+> & {
+  src: string
+  alt: string
+}
+
+export const HeroImage: React.FC<HeroImageProps> = ({
+  src,
+  alt,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <>
+      <div className={clsx(className, 'mdx-hero-image')} {...(props as any)}>
+        <img src={src} alt={alt} className="mdx-hero-image__img" />
+        {children}
+      </div>
+    </>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/HeroImage/index.ts

@@ -0,0 +1 @@
+export * from './HeroImage'

packages/logos-docusaurus-theme/src/client/components/mdx/index.ts

@@ -17,6 +17,7 @@ export * from './HeroInfo'
 export * from './HeroModel'
 export * from './HeroTitle'
 export * from './HeroVideo'
+export * from './HeroImage'
 export * from './JobsPerDepartment'
 export * from './LogoCarousel'
 export * from './NewsletterSubscription'

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -340,6 +340,16 @@ a code {
   --ifm-navbar-item-padding-horizontal: 12px;
 }
 
+.mdx-page {
+  body {
+    overflow-x: hidden !important;
+  }
+
+  .navbar {
+    background-color: transparent;
+  }
+}
+
 .card,
 .alert,
 .theme-code-block {
@@ -458,6 +468,10 @@ small {
   height: 40px;
 }
 
+a[class^='sidebarLogo_'] {
+  margin-left: -16px !important;
+}
+
 .header-github-link:hover {
   opacity: 0.6;
 }