component.jsx

import Link from "next/link";
import { Wrapper, Box, Title, Menu, MenuItem } from "./styles";

const component = () => {
  return (
    <Wrapper>
      <Box backgroundImageSrc="https://picsum.photos/1200/1300">
        <Title>Man</Title>
        <Menu>
          <Link href="/catalog">
            <MenuItem>Clothes</MenuItem>
          </Link>
          <Link href="/catalog">
            <MenuItem>Shoes</MenuItem>
          </Link>
          <Link href="/catalog">
            <MenuItem>Bags</MenuItem>
          </Link>
        </Menu>
      </Box>
      <Box backgroundImageSrc="https://picsum.photos/1200/1301">
        <Title>Woman</Title>
        <Menu>
          <Link href="/catalog">
            <MenuItem>Clothes</MenuItem>
          </Link>
          <Link href="/catalog">
            <MenuItem>Shoes</MenuItem>
          </Link>
          <Link href="/catalog">
            <MenuItem>Bags</MenuItem>
          </Link>
        </Menu>
      </Box>
    </Wrapper>
  );
};

export default component;

styles.js

import styled from "styled-components";

export const Wrapper = styled.section`
  margin: 40px auto;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
`;

export const Menu = styled.ul`
  display: inline-flex;
  flex-direction: column;
`;

export const MenuItem = styled.li`
  visibility: hidden;
  cursor: pointer;

  text-transform: uppercase;
  text-align: center;
  padding: 20px 80px;

  font-family: Quicksand;
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: #fff;

  border: 1px solid transparent;

  &:hover {
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
`;

export const Title = styled.h1`
  width: 100%;

  text-align: center;
  font-family: Rozha One;
  font-style: normal;
  font-weight: 400;
  font-size: 72px;
  line-height: 87%;

  color: #fff;
`;

export const Box = styled.div`
  background-color: #464646;

  position: relative;
  width: 50%;
  min-height: 780px;

  background-image: url(${({ backgroundImageSrc }) => backgroundImageSrc});
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &:hover {
    flex-direction: column-reverse;
    ${Title} {
      margin-top: 80px;
      transition: all 0.2s;
    }

    ${MenuItem} {
      transition: all 0.2s;
      visibility: visible;
    }
  }
`;