ebook page

ebook.js

<template>
  <div class="mother">
    <div class="background"></div>

    <img
      v-if="windowWidth >= 1024"
      class="desktop-image"
      :src="require('@/assets/img/e-book-topimage.png')"
      alt=""
    />

    <!-- Hero Area -->
    <div class="hero">
      <div class="hero-header">
        <svg
          width="19"
          height="29"
          viewBox="0 0 19 29"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.2227 1.20774L1.07517 11.0802C-0.387559 12.6589 -0.353535 15.1826 1.15117 16.7172C2.65588 18.2519 5.06147 18.2163 6.52421 16.6376L15.6718 6.7651C17.1344 5.18644 17.1005 2.66263 15.5958 1.12801C14.0911 -0.406605 11.6855 -0.370909 10.2227 1.20774Z"
            fill="#0E6FC8"
          />
          <path
            d="M11.5015 12.3255L2.35392 22.1981C0.891186 23.7766 0.925214 26.3005 2.42992 27.8351C3.93462 29.3697 6.34022 29.334 7.80295 27.7553L16.9505 17.8829C18.4132 16.3042 18.3792 13.7805 16.8745 12.2458C15.3698 10.7112 12.9641 10.7469 11.5015 12.3255Z"
            fill="#0E6FC8"
          />
        </svg>

        <button class="btn">{{ $t("learnMore") }}</button>
      </div>

      <div v-if="windowWidth < 1024" class="hero-image">
        <img :src="bookImage" alt="" />
      </div>
    </div>

    <!-- Main Content -->
    <!-- Intro -->
    <section class="intro">
      <h1>
        {{ $t("titleEbook") }} {{ $t("title2Ebook") }}
              </h1>
                    <h1>
        
              </h1>
          <!--  <span class="intro-circle">
       <span>
            <svg
              width="92"
              height="51"
              viewBox="0 0 92 51"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M89.6216 26.1911C89.6216 31.9457 84.8978 37.2753 76.9858 41.1921C69.1011 45.0955 58.1779 47.5222 46.0888 47.5222C33.9996 47.5222 23.0765 45.0955 15.1917 41.1921C7.27969 37.2753 2.55593 31.9457 2.55593 26.1911C2.55593 20.4365 7.27969 15.1069 15.1917 11.1901C23.0765 7.28672 33.9996 4.86001 46.0888 4.86001C58.1779 4.86001 69.1011 7.28672 76.9858 11.1901C84.8978 15.1069 89.6216 20.4365 89.6216 26.1911Z"
                stroke="#FD661F"
                stroke-width="0.870656"
              />
              <path
                d="M89.3891 20.8291C89.9571 26.3046 85.7994 31.8773 78.3109 36.4378C70.8533 40.9794 60.2265 44.4243 48.1996 45.6718C36.1726 46.9193 25.065 45.7288 16.8341 42.8145C8.56897 39.8881 3.35605 35.2874 2.7881 29.812C2.22015 24.3365 6.37781 18.7638 13.8663 14.2033C21.3239 9.66173 31.9507 6.21683 43.9776 4.96931C56.0046 3.72179 67.1122 4.91226 75.3431 7.82657C83.6082 10.753 88.8212 15.3537 89.3891 20.8291Z"
                stroke="#FD661F"
                stroke-width="0.870656"
              />
            </svg>
          </span>
          <span>tidy!</span>
        </span> -->
      <p v-if="windowWidth < 1024">
        {{ $t("title4Ebook") }}
        <span>{{ $t("offerEbook") }}</span> {{ $t("title5Ebook") }}
      </p>
      <p v-else>
        {{ $t("title4Ebook") }}
        <span>{{ $t("offerEbook") }}</span> {{ $t("title5Ebook") }}
      </p>
    </section>

    <!-- Sign Up -->

    <section class="form">
      <!-- <p>Fill out the from to get the e-book :</p> -->
      <span class="relative">
        <span
          v-if="error"
          class="mdi mdi-24px mdi-information-outline error"
        ></span>
        <input type="text" placeholder="Name" v-model="details.name" />
      </span>
      <span class="relative">
        <span
          v-if="error"
          class="mdi mdi-24px mdi-information-outline error"
        ></span>
        <input type="text" placeholder="Email" v-model="details.email" />
      </span>
      <button @click="download">{{ $t("joinList") }}</button>
    </section>

    <!-- Timer Section -->

    <!-- <section class="timer">
      <p>{{ $t("comingSoonEbook")}}</p>

      <div>
        <span>
          <span>{{ Math.floor(days) }}</span>
          <span>{{ $t("days")}}</span>
        </span>
        <span>
          <span>{{ Math.floor(hours) }}</span>
          <span>{{ $t("hours")}}</span>
        </span>
        <span>
          <span>{{ Math.floor(minutes) }}</span>
          <span>{{ $t("minutes")}}</span>
        </span>
        <span>
          <span>{{ Math.floor(seconds) }}</span>
          <span>{{ $t("seconds")}}</span>
        </span>
      </div>
    </section> -->

    <!-- Footer Section -->

    <section class="footer">
      <h2>{{ $t("whatsInForYouEbook")}}</h2>
      <p>
{{ $t("whatsInForYou")}}
      </p>
    </section>
  </div>
</template>

<script>
import mobileBookImage from "@/assets/img/e-book-topimage.png";
import desktopBookImage from "@/assets/img/e-book-topimage.png";

export default {
  data() {
    return {
      date: "2021-3-31", //Date format "YYYY-MM-DD"
      time: "18:09:10", //Time format "HH:MM:SS"
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      windowWidth: 0,
      error: false,
      details: {
        name: "",
        email: "",
      },
    };
  },

  computed: {
    bookImage() {
      if (this.windowWidth > 1024) {
        return desktopBookImage;
      } else {
        return mobileBookImage;
      }
    },
  },

  methods: {
    download() {
      if (!this.details.email || !this.details.name) {
        console.log(this.details);
        this.error = true;
      } else {
        this.error = false;
      }
    },
  },

  mounted() {
    this.windowWidth = window.innerWidth;

    window.addEventListener("resize", () => {
      this.windowWidth = window.innerWidth;
    });

    const date = new Date(
      this.date.split("-")[0],
      this.date.split("-")[1] - 1,
      this.date.split("-")[2],
      this.time.split(":")[0],
      this.time.split(":")[1],
      this.time.split(":")[2]
    );

    let difference = date - new Date();

    console.log(difference);

    if (difference > 0) {
      const timer = setInterval(() => {
        difference = difference - 1000;
        this.days = difference / 1000 / 60 / 60 / 24;
        this.hours = (this.days - Math.floor(this.days)) * 24;
        this.minutes = (this.hours - Math.floor(this.hours)) * 60;
        this.seconds = (this.minutes - Math.floor(this.minutes)) * 60;

        if (difference <= 999) {
          clearInterval(timer);
        }
      }, 1000);
    }
  },
};
</script>

<style lang="scss" scoped>
.mother {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  overflow: hidden;

  .background {
    position: absolute;
    top: -10.5rem;
    left: 58%;
    transform: rotateZ(10deg);
    width: 70%;
    height: 500px;
    background-image: linear-gradient(to top, #0e6fc8, transparent);
    z-index: 0;
  }

  .desktop-image {
    position: absolute;
    top: 8rem;
    right: 0;
    z-index: 1;
    width: 750px;
  }

  @media (min-width: 1024px) {
    .background {
      position: absolute;
      top: -10rem;
      left: 70%;
      transform: rotateZ(10deg);
      width: 70%;
      height: 900px;
      background-image: linear-gradient(to top, #0e6fc8, transparent);
      z-index: 0;
    }
  }

  @media (min-width: 1600px) {
    .background {
      position: absolute;
      top: -4rem;
      left: 70%;
      transform: rotateZ(10deg);
      width: 70%;
      height: 900px;
      background-image: linear-gradient(to top, #0e6fc8, transparent);
      z-index: 0;
    }

    .desktop-image {
      top: 10rem;
      width: 320px;
      right: 18rem;
    }
  }

  .hero {
    position: relative;
    width: 100%;
    z-index: 1;
    padding: 1.5rem 1.5rem;

    &-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      button {
        background-color: white;
        padding: 0.5rem 0.5rem;
        border-radius: 2rem;
        outline: none;
        border: none;
      }
    }

    &-image {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 320px;
      }

      @media (min-width: 360px) {
        img {
          width: auto;
        }
      }
    }

    @media (min-width: 1024px) {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 2rem;
    }
  }

  .intro {
    padding: 1.5rem;

    &-circle {
      display: inline-block;
      position: relative;

      span:first-of-type {
        position: absolute;
        top: -0.25rem;
        left: -0.5rem;
      }
    }

    h1 {
      font-size: 2.25rem;
      line-height: 2.25rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }

    p {
      font-size: 0.9rem !important;
      font-weight: 500;
      font-family: "Poppins", sans-serif;

      span {
        color: #ff8d3b;
      }
    }

    @media (min-width: 1024px) {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;

      h1 {
        font-size: 3.9rem;
        line-height: 3.9rem;
        font-weight: bold;
        padding-right: 34rem;
        margin-bottom: 1.5rem;
      }

      p {
        font-size: 1.2rem !important;
        line-height: 1.75rem;
        padding-right: 34rem;
      }
    }

    @media (min-width: 1600px) {
      h1 {
        padding-right: 38rem;
      }

      p {
        padding-right: 42rem;
      }
    }
  }

  .form {
    padding: 1.5rem;

    p {
      font-size: 0.9rem !important;
      font-weight: 500;
      font-family: "Poppins", sans-serif;
      margin-bottom: 1rem;
    }

    input {
      padding: 0.85rem 1.5rem;
      font-size: 1rem;
      width: 70%;
      background-color: #f5f5f5;
      border: none;
      outline: none;
      margin-bottom: 1rem;
      border-radius: 0.25rem;
    }

    span {
      display: block;
    }

    span .error {
      position: absolute;
      left: 70%;
      top: 0.5rem;
      margin-left: -1.6rem;
    }

    span .error::before {
      color: #eb5757;
      font-size: 1.3rem !important;
    }

    button {
      background-color: #fd661f;
      padding: 0.75rem 1rem;
      font-size: 1rem;
      color: white;
      border: none;
      outline: none;
      border-radius: 0.25rem;
      margin-top: 1rem;
    }

    @media (min-width: 1024px) {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-right: 40rem;
        margin-top: 5em;
      span:first-of-type {
        width: 70%;
      }
    }

    @media (min-width: 1600px) {
      padding-right: 47rem;
    }
  }

  .timer {
    padding: 1.5rem;

    p {
      font-size: 1.1rem !important;
      font-weight: 500;
      font-family: "Poppins", sans-serif;
      margin-bottom: 2rem;
    }

    div {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      span {
        display: flex;
        flex-direction: column;
        align-items: center;

        span:first-child {
          font-family: "Roboto", sans-serif;
          font-weight: bold;
          font-size: 2.5rem;
          margin-bottom: 0.5rem;
        }
        span:last-child {
          font-family: "Roboto", sans-serif;
          font-size: 0.9rem;
          font-weight: 500;
        }
      }
    }

    @media (min-width: 1024px) {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-right: 40rem;
    }

    @media (min-width: 1600px) {
      padding-right: 45rem;
    }
  }

  .footer {
    padding: 1.5rem;
    padding-bottom: 4rem;

    h2 {
      font-family: "Roboto", sans-serif;
      line-height: 2.25rem;
      font-size: 2.25rem !important;
      font-weight: bold;
      margin-bottom: 1rem;
    }

    p {
      font-size: 0.9rem !important;
      font-family: "Poppins", sans-serif;
      font-weight: 500;

      span {
        color: #ff8d3b;
      }
    }

    @media (min-width: 1024px) {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-right: 40rem;
      margin-bottom: 2rem;

      p {
        font-size: 1.1rem !important;
        line-height: 1.75rem;
      }
    }

    @media (min-width: 1600px) {
      padding-right: 45rem;
    }
  }
}
</style>