floranet/src/pages/HomePage.vue

<template>
  <q-page>
    <q-no-ssr>
      <VerticalCarouselImgs :imgsArr="slidesContent" class="home-carousel" />
    </q-no-ssr>

    <!-- <p v-if="isCarouselVisible">Está visível</p>
    <p v-if="!isCarouselVisible">Não está visível</p>
    <p v-if="isOpenNav">Hamburg ativo</p>
    <p v-if="!isOpenNav">Hamburg não ativo</p> -->

    <section class="products-section">
      <header class="products-section-header section-header">
        <h3 class="products-header-title subtitle">
          Diseños de ramos más vendidos
        </h3>

        <p class="products-header-paragraph section-paragraph">
          Descripción SEO: Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua.
        </p>
      </header>

      <div class="products-body">
        <Container cardContainer>
          <Card
            v-for="(
              { imgSrc, discount, isNew, title, value, id }, i
            ) in cardMock"
            :productValue="value"
            :productName="title"
            :discount="discount"
            :imgSrc="imgSrc"
            :isNew="isNew"
            :key="i"
            :id="id"
          />
        </Container>

        <RouterLink class="btn rounded outlined" to="/">
          Ver todos los diseños <IconArrowCircleFilledRight />
        </RouterLink>
      </div>
    </section>

    <section class="products-selection">
      <header class="products-selection-header section-header">
        <h3 class="products-selection-title subtitle">
          Nuestra selección de plantas para el verano
        </h3>

        <p class="products-selection-paragraph section-paragraph">
          Descripción SEO: Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua.
        </p>
      </header>

      <div class="products-selection-body">
        <!-- <Container> </Container> -->
      </div>

      <footer class="products-selection-footer">
        <RouterLink class="btn rounded outlined pd-icon" to="/">
          Ver todas las plantas <IconArrowCircleFilledRight />
        </RouterLink>
      </footer>
    </section>
  </q-page>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, ref } from 'vue';

import { storeToRefs } from 'pinia';
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
import VerticalCarouselImgs from 'src/components/quasar-components/carousel/VerticalCarouselImgs.vue';
import Container from 'src/components/ui/Container.vue';
import { cardMock } from 'src/mock/cards';
import { useMobileStore } from 'src/stores/mobileNav';

export default defineComponent({
  name: 'HomePage',
  components: {
    IconArrowCircleFilledRight,
    VerticalCarouselImgs,
    // HorizontalCarousel,
    // ButtonComponent,
    // SwiperSlide,
    Container,
    Card: defineAsyncComponent({
      loader: () => import('src/components/ui/Card.vue'),
      loadingComponent: { template: '<p>loading</p>' },
    }),
  },
  setup() {
    const mobileStore = useMobileStore();
    const { isCarouselVisible, isOpenNav, screenWidth } =
      storeToRefs(mobileStore);
    const slidesContent = [
      'assets/1.jpg',
      'assets/2.jpg',
      'assets/3.jpg',
      'assets/4.jpg',
      'assets/5.jpg',
    ];
    const data = ref(null);

    return {
      slidesContent,
      cardMock,
      isCarouselVisible,
      isOpenNav,
      screenWidth,
      data,
    };
  },
});
</script>

<style lang="scss" scoped>
.home-carousel {
  margin-bottom: 132px;

  @media only screen and (max-width: $med-md) {
    margin-bottom: 67px;
  }
}

.section-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 65px;
  padding-inline: 72px;

  & .section-paragraph {
    font-size: $font-16;
    font-family: $font-questrial;
    line-height: 26px;
  }

  @media only screen and (max-width: $med-xmd) {
    padding-inline: 16px;
    gap: 22px;
    margin-bottom: 33px;
  }
}

.products-section {
  text-align: center;
  margin-bottom: 87px;

  & .products-section-header {
    & .products-header-title {
    }

    & .products-header-paragraph {
    }
  }

  & .products-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 99px;
  }

  @media only screen and (max-width: $med-xmd) {
    & .products-body {
    }
  }
}

.products-selection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: $secondary-10;
  padding-block: 104px 73px;

  @media only screen and (max-width: $med-xmd) {
    padding-block: 48px 41px;
  }
}
</style>