@import '../../../styles';

.landing-page {
  padding: 6rem 12rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;

  color: $color-black;
  transition: color 0.3s ease-in-out;

  .wrapper {
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  //region Hero
  &__hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 2rem;
    gap: 2rem;
  }

  &__hero_left {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &--title {
      font-size: 5rem;
      font-weight: 700;
      line-height: 1;
      margin: 0;
    }

    &--description {
      font-size: 1rem;
      color: #475569;
    }

    &__buttons {
      display: flex;
      flex-direction: row;
      gap: 0.75rem;

      &--editor,
      &--git {
        border-radius: 4px;
        padding: 0.625rem 1.25rem;
        border: none;
        cursor: pointer;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;

        &--image {
          width: 1rem;
          height: 1rem;
          object-fit: cover;
        }
      }

      &--editor {
        background-color: $color-black;
        color: $color-white;
      }

      &--git {
        border: 2px solid $color-black;
      }
    }
  }

  &__hero_right {
    position: relative;
    display: flex;
    justify-content: center;

    &--image {
      position: absolute;
      width: auto;
      height: 100%;
      object-fit: cover;
    }
  }

  //endregion

  //region Informations
  &__informations {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    &--lists {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4rem;
    }

    &__list {
      display: grid;
      grid: 'icon title' 'icon description' / auto 1fr;
      gap: 0.5rem 1rem;

      &--icon {
        grid-area: icon;
        height: fit-content;
        background: black;
        border-radius: 999px;

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

        svg {
          width: 1rem;
          height: auto;
          aspect-ratio: 1;
          padding: 0.5rem;

          path {
            fill: white;
            stroke: white;
          }
        }
      }

      &--title {
        grid-area: title;
        font-size: 1.125rem;
        font-weight: 600;
      }

      &--description {
        grid-area: description;
        font-size: 1rem;
        color: $color-gray;
      }
    }
  }

  &__informations_top {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &--title {
      margin: 0;
      font-size: 3rem;
      font-weight: 700;
      line-height: 1;
    }

    &--description {
      font-size: 1rem;
      color: #475569;
    }
  }

  //endregion

  //region Technologies
  &__technologies {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    &--title {
      text-align: center;
      font-size: 1rem;
      font-weight: 700;
    }

    &__list {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 4rem;

      svg {
        width: 3rem;
        height: auto;
        aspect-ratio: 1;
      }
    }
  }

  //endregion

  //region About
  &__about {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-inline: 10rem;

    &__titles {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    &--title {
      font-size: 2rem;
      font-weight: 700;
      margin: 0;
    }

    &--description {
      font-size: 1.125rem;
    }

    &__members {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 3rem;
    }

    &__member {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      &--image {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 0.8;
        object-fit: contain;

        img {
          position: absolute;
          width: 100%;
          height: 100%;
        }
      }

      &--texts {
        display: flex;
        flex-direction: column;
        align-items: center;

        &--name {
          font-size: 1.125rem;
        }

        &--role {
          font-size: 0.875rem;
        }
      }
    }
  }

  //endregion

  //region Socials
  &__socials {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    &--title {
      text-align: center;
      font-size: 1rem;
      font-weight: 700;
    }

    &__list {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 4rem;

      svg {
        cursor: pointer;
        width: 3rem;
        height: auto;
        aspect-ratio: 1;
      }
    }
  }

  //endregion

  //region Get Started
  &__get_started {
    background-color: $color-black;
    padding: 3rem 5rem;
    border-radius: 10px;
    margin-inline: 6rem;

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

    &--title {
      //white-space: nowrap;
      color: $color-white;
      font-size: 3.75rem;
      font-weight: 400;
      text-align: center;
      margin: 0;
    }

    &--description {
      color: #94a4b8;
      font-size: 1.25rem;
      text-align: center;
    }

    &--button {
      border: none;
      margin-top: 0.25rem;
      cursor: pointer;
      background: $color-white;
      padding: 0.75rem 1.5rem;
      border-radius: 10px;
    }
  }

  //endregion

  @media (max-width: 80rem) {
    //region Hero
    &__hero_left {
      &--title {
        font-size: 3rem;
      }

      &--description {
        font-size: 0.875rem;
      }
    }

    //endregion

    //region Informations
    &__informations_top {
      &--title {
        font-size: 2rem;
      }
    }

    //endregion

    //region Get Started
    &__get_started {
      margin-inline: 3rem;

      &--title {
        font-size: 2.5rem;
      }
    }

    //endregion
  }

  @media (max-width: 1024px) {
    padding: 4rem;
    flex-direction: column;
    gap: 1rem;

    //region Informations
    &__informations {
      &--lists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    //endregion

    //region About
    &__about {
      margin-inline: 3rem;
    }

    //endregion

    //region Get Started
    &__get_started {
      padding: 3rem;
    }

    //endregion

    &--title {
      font-size: 4rem;
    }
  }

  @media (max-width: 767px) {
    padding: 2rem;

    //region Hero
    &__hero {
      display: flex;
      flex-direction: column;
      gap: 4rem;
    }

    &__hero_left {
      &--title {
        font-size: 2.5rem;
      }
    }

    &__hero_right {
      min-height: 25dvh;
    }

    //endregion

    //region Informations
    &__informations {
      &--lists {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    //endregion

    //region Technologies
    &__technologies {
      &__list {
        gap: 2rem;
      }
    }

    //endregion

    //region About
    &__about {
      margin-inline: 0;

      &__members {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    //endregion

    //region Socials
    &__socials {
      &__list {
        gap: 2rem;
      }
    }

    //endregion

    //region Get Started
    &__get_started {
      padding: 2rem;
      margin-inline: 0;

      &--title {
        font-size: 2rem;
      }

      &--description {
        font-size: 1rem;
      }
    }

    //endregion

    &--title {
      font-size: 2.5rem;
    }
  }

  &--title {
    font-size: 2.5rem;
  }

  &.dark-theme {
    color: $color-white;
  }
}
