Hero.vue

<template>
  <section class="banner-section mb-16 lg:mb-0 relative">
    <div class="swiper-container">
      <div class="swiper-wrapper relative">
        <div class="banner-content swiper-slide">
          <div
            class=" w-full hero-img bg-cover relative pb-8 sm:pb-16 md:pb-32"
          >
            <div class="overlay blue-overlay" />
            <div
              class="container py-32 relative w-full h-full mx-auto text-white px-4 flex items-center"
            >
              <div class="mt-6">
                <h1 class="max-w-2xl text-white">
                  {{ homeTitle }}
                </h1>
                <span class="gold-bar mt-3" />
                <p class="max-w-hero py-4 text-white">
                  <span> {{ homeDescription }}</span>
                </p>
                <NuxtLink
                  to="/get-involved"
                  class="px-8 rounded btn btn-gold transition glow-gold"
                >
                  Take Action
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-content swiper-slide">
          <div class=" w-full harvard bg-cover relative pb-8 sm:pb-16 md:pb-32">
            <div class="overlay blue-overlay" />
            <div
              class="container py-32 relative w-full h-full mx-auto text-white px-4 flex items-center"
            >
              <div class="mt-6">
                <h1 class="max-w-2xl text-white">
                  {{ homeTitle }}
                </h1>
                <span class="gold-bar mt-3" />
                <p class="max-w-hero py-4 text-white">
                  <span> {{ homeDescription }}</span>
                </p>
                <NuxtLink
                  to="/get-involved"
                  class="px-8 rounded btn btn-gold transition glow-gold"
                >
                  Take Action
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-content swiper-slide">
          <div class=" w-full wind bg-cover relative pb-8 sm:pb-16 md:pb-32">
            <div class="overlay blue-overlay" />
            <div
              class="container py-32 relative w-full h-full mx-auto text-white px-4 flex items-center"
            >
              <div class="mt-6">
                <h1 class="max-w-2xl text-white">
                  {{ homeTitle }}
                </h1>
                <span class="gold-bar mt-3" />
                <p class="max-w-hero py-4 text-white">
                  <span> {{ homeDescription }}</span>
                </p>
                <NuxtLink
                  to="/get-involved"
                  class="px-8 rounded btn btn-gold transition glow-gold"
                >
                  Take Action
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-content swiper-slide">
          <div class=" w-full turtle bg-cover relative pb-8 sm:pb-16 md:pb-32">
            <div class="overlay blue-overlay" />
            <div
              class="container py-32 relative w-full h-full mx-auto text-white px-4 flex items-center"
            >
              <div class="mt-6">
                <h1 class="max-w-2xl text-white">
                  {{ homeTitle }}
                </h1>
                <span class="gold-bar mt-3" />
                <p class="max-w-hero py-4 text-white">
                  <span> {{ homeDescription }}</span>
                </p>
                <NuxtLink
                  to="/get-involved"
                  class="px-8 rounded btn btn-gold transition glow-gold"
                >
                  Take Action
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-content swiper-slide">
          <div class=" w-full city bg-cover relative pb-8 sm:pb-16 md:pb-32">
            <div class="overlay blue-overlay" />
            <div
              class="container py-32 relative w-full h-full mx-auto text-white px-4 flex items-center"
            >
              <div class="mt-6">
                <h1 class="max-w-2xl text-white">
                  {{ homeTitle }}
                </h1>
                <span class="gold-bar mt-3" />
                <p class="max-w-hero py-4 text-white">
                  <span> {{ homeDescription }}</span>
                </p>
                <NuxtLink
                  to="/get-involved"
                  class="px-8 rounded btn btn-gold transition glow-gold"
                >
                  Take Action
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img
      class="absolute bottom-0 z-10 lg:relative w-full white-tri"
      src="~assets/img/white-tri.svg"
      alt=""
    />
    <div
      class="swiper-pagination absolute z-20 white-tri mx-auto inset-x-0 "
    ></div>
  </section>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
export default {
  props: {
    homeTitle: { type: String, default: '' },
    homeDescription: { type: String, default: '' }
  },
  data() {
    return {}
  },
  mounted() {
    const swiper = new Swiper('.swiper-container', {
      navigation: {
        nextE1: '.swiper-button-next',
        prevE1: '.swiper-button-prev'
      },

      pagination: {
        el: '.swiper-pagination',
        type: 'bullets'
      },

      loop: true,

      autoplay: {
        delay: 4000
      }
    })
    console.log(swiper)
  }
}
</script>

<style lang="scss">
.swiper-pagination {
  bottom: 90px;
}
@screen lg {
  .swiper-pagination {
    bottom: 190px;
  }
}
.swiper-pagination-bullet {
  @apply mx-2;
}
.swiper-pagination-bullet-active {
  @apply bg-orange;
}

.white-tri {
  z-index: 10;
}

@screen lg {
  .white-tri {
    margin-top: -175px;
  }
}

.h600 {
  height: 600px;
}

.hero-img {
  background-image: url(~assets/img/hero-img.jpg);
  background-position: 50% 20%;
}

.city {
  background-image: url(~assets/img/city.jpg);
  background-position: 50% 20%;
}

.harvard {
  background-image: url(~assets/img/harvard.jpg);
  background-position: 50% 20%;
}

.turtle {
  background-image: url(~assets/img/turtle.jpg);
  background-position: 50% 20%;
}

.wind {
  background-image: url(~assets/img/wind.jpg);
  background-position: 50% 20%;
}

.max-w-hero {
  max-width: 33rem;
}
</style>