.hero-container {
  /* container styles */
}

.hero-top {
  /* top styles */
}

.hero-left {
  /* left styles */
}

.hero-right {
  /* right styles */
}

/* ect... */

function Stack() {
  /** vertically stacks elements on top of each other */
}

function Inline() {
  /** horizontally stacks elements in a row */
}

function Split() {
  /** splits the parent's width between two elements */
}

function Cover() {
  /** covers an area and vertically centers its child */
}

function Frame() {
  /** Frames out a media into the correct aspect ratio */
}

export function Hero() {
  return (
    <Stack>
      <Inline>{/* */}</Inline>
      <Split>
        <Cover>
          <Stack>
            <h1>{/* */}</h1>
            <p>{/* */}</p>
            <Inline>
              <button>{/* */}</button>
              <button>{/* */}</button>
            </Inline>
          </Stack>
        </Cover>
        <Frame>
          <img />
        </Frame>
      </Split>
    </Stack>
  );
}

export default function Subscribe() {
  return (
    <Stack as="section" gutter="xl">
      <Stack as="header" gutter="md">
        <h2>Subscribe To Our Newsletter</h2>
        <p>
          Subscribe to our newsletter to keep up to date on all our amazing
          products.
        </p>
      </Stack>

      <Stack as="form">
        <Stack as="label" gutter="sm">
          Name
          <input type="text" />
        </Stack>

        <Stack as="label" gutter="sm">
          Email
          <input type="text" />
        </Stack>

        <button>Subscribe</button>
      </Stack>
    </Stack>
  );
}

export default function MenuBar() {
  return (
    <Menu>
      <InlineCluster as="nav" gutter="lg" justify="end" align="center">
        <a>Product</a>
        <a>Features</a>
        <a>Marketplace</a>
        <a>Company</a>
        <a>Log in</a>
      </InlineCluster>
    </Menu>
  );
}