landingpage.scss

//main.scss
@import 'abstracts/variables';
@import 'abstracts/mixins';

@import 'base/reset';
@import 'base/typography';
@import 'base/animations';

@import 'components/buttons';
@import 'components/cards';

@import 'layout/grid';
@import 'layout/header';

@import 'pages/home';


//abstracts/_mixins.scss

@mixin transition($time) {
  transition: all $time ease;
}

@mixin respond($breakpoint) {
  @if $breakpoint == "tablet" {
    @media (max-width: 768px) {
      @content;
    }
  } @else if $breakpoint == "phone" {
    @media (max-width: 600px) {
      @content;
    }
  }
}


//abstracts/_variables.scss

$font-primary: 'Arial', sans-serif;
$color-primary: #ffb6c1;
$color-secondary: #1e90ff;
$color-bg-light: #fafaf5;
$color-bg-dark: #f4f4f4;
$color-text: #333;
$color-white: #fff;
$color-black: #000;


//base/_animations.scss

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(3rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


//base/_reset.scss

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


//base/_typography.scss

body {
  font-family: $font-primary;
  line-height: 1.6;
  background-color: $color-bg-light;
}


//components/_buttons.scss

.btn {
  padding: 1rem 2.5rem;
  text-transform: uppercase;
  border-radius: 5rem;
  text-decoration: none;
  font-size: 1.5rem;
  @include transition(0.3s);

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

  &--animated {
    animation: slideIn 1.5s ease-out;
  }
}


//components/_cards.scss

.room-card {
  background-color: $color-white;
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.1);
  @include transition(0.3s);

  &:hover {
    transform: scale(1.05);
  }

  &__img {
    width: 100%;
    height: 18.75rem;
    object-fit: cover;
  }

  &__title {
    font-size: 1.8rem;
    margin-top: 1.5rem;
  }

  &__price {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }
}

.activity-card {
  background-color: #f7f7f7;
  padding: 2rem;
  border-radius: 0.625rem;
  transition: transform 0.3s ease;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-0.625rem);
  }

  &__title {
    font-size: 1.5rem;
    font-weight: bold;
    color: $color-text;
  }

  &__img {
    width: 100%;
    height: 18.75rem;
    object-fit: cover;
  }
}


// layout/_grid.scss
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
  gap: 2rem;
}

.activities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21.875rem, 1fr));
  gap: 2rem;
}


// layout/_header.scss
.header {
  height: 100vh;
  background: linear-gradient(
      to right bottom,
      rgba($color-primary, 0.8),
      rgba($color-secondary, 0.7)
    ),
    url('../img/pexels-jess-vide.jpg') center/cover no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 75% 100%, 25% 100%, 0 80%);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 2s ease-out;

  &__text-box {
    text-align: center;
    color: $color-white;

    .heading-primary {
      font-size: 3.5rem;
      text-transform: uppercase;
      margin-bottom: 4rem;

      &--main {
        display: block;
        font-size: calc(2rem + 2vw);
      }

      &--sub {
        display: block;
        font-size: calc(1rem + 1vw);
      }
    }
  }
}


//pages/_home.scss

.section-rooms {
  padding: 5rem 2rem;
  background-color: $color-bg-dark;
  text-align: center;

  .heading-secondary {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: $color-text;
  }
}

.section-activities {
  padding: 5rem 2rem;
  background-color: $color-bg-light;
  text-align: center;
}