v3/packages/design-system/atoms/hero/Hero.tsx

import * as React from 'react';
import styled from 'styled-components';

type HeroContainerProps = {
  topSpacing: number;
  bottomSpacing: number;
};

type HeroProps = Partial<HeroContainerProps> & {
  children: React.ReactNode;
};

const HeroContainer = styled.div<HeroContainerProps>`
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  min-height: calc(100vh - ${(props) => props.topSpacing + props.bottomSpacing}px);
  margin-top: ${(props) => props.topSpacing}px;
`;

export const Hero = (props: HeroProps) => (
  <HeroContainer
    topSpacing={props.topSpacing || 0}
    bottomSpacing={props.bottomSpacing || 0}
  >
    {props.children}
  </HeroContainer>
);