Blocks - Team

<template>
  <section id="snippet-1" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row mb-3">
        <div
          class="col-md-10 col-lg-12 col-xl-10 col-xxl-9 mx-auto text-center"
        >
          <h2 class="fs-15 text-uppercase text-muted mb-3">Our Team</h2>
          <h3 class="display-4 mb-7 px-lg-19 px-xl-18">
            Think unique and be innovative. Make a difference with Sandbox.
          </h3>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
      <div class="row grid-view gx-md-8 gx-xl-10 gy-8 gy-lg-0">
        <div
          v-for="(item, index) in teamMembers"
          class="col-md-6 col-lg-3"
          :key="index"
        >
          <div class="position-relative">
            <div
              class="shape rounded rellax"
              :class="['bg-soft-' + item.color, 'd-md-block']"
              :style="{
                bottom: '-0.75rem',
                right: '-0.75rem',
                width: '98%',
                height: '98%',
                zIndex: 0,
              }"
            ></div>
            <div class="card">
              <figure class="card-img-top">
                <nuxt-img class="img-fluid" :src="item.avatarSrc" alt="" />
              </figure>
              <div class="card-body px-6 py-5">
                <h4 class="mb-1">{{ item.name }}</h4>
                <p class="mb-0">{{ item.position }}</p>
              </div>
            </div>
          </div>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import { teamMembers } from "~/data/team";
</script>

<style lang="scss" scoped></style>

<template>
  <section id="snippet-2" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row mb-3">
        <div class="col-md-10 col-xl-9 col-xxl-7 mx-auto text-center">
          <nuxt-img
            src="/assets/img/icons/lineal/team.svg"
            class=" icon-svg icon-svg-md mb-4"
            alt=""
          />
          <h2 class="display-4 mb-3 px-lg-14">
            Save your time and money by choosing our professional team.
          </h2>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
      <div class="position-relative">
        <div
          class="shape rounded-circle bg-soft-yellow rellax w-16 h-16"
          data-rellax-speed="1"
          style="bottom: 0.5rem; right: -1.7rem"
        ></div>
        <div
          class="shape rounded-circle bg-line red rellax w-16 h-16"
          data-rellax-speed="1"
          style="top: 0.5rem; left: -1.7rem"
        ></div>
        <div class="swiper-container dots-closer mb-6">
          <Swiper
            :space-between="5"
            :pagination="{ el: '.spb1', clickable: true }"
            :modules="[Pagination]"
            :grab-cursor="true"
            :breakpoints="{
              500: { slidesPerView: 1 },
              768: { slidesPerView: 2 },
              1024: { slidesPerView: 3 },
              1200: { slidesPerView: 3 },
            }"
          >
            <SwiperSlide v-for="(item, i) in teamMembers2" :key="i">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <nuxt-img
                      class="rounded-circle w-15 mb-4"
                      :src="item.avatarSrc"
                      alt=""
                    />
                    <h4 class="mb-1">{{ item.name }}</h4>
                    <div class="meta mb-2">{{ item.position }}</div>
                    <p class="mb-2">{{ item.description }}</p>
                    <nav class="nav social mb-0">
                      <a
                        v-for="(social, i) in item.socialLinks"
                        :key="i"
                        :href="social.link"
                      >
                        <i :class="social.iconClass"></i>
                      </a>
                    </nav>
                  </div>
                </div></div
            ></SwiperSlide>
          </Swiper>
          <div class="swiper-controls">
            <div
              class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb1"
            ></div>
          </div>

          <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
      </div>
      <!-- /.position-relative -->
    </div>
    <!-- /.container -->
    
    <!-- /.container -->
  </section>
</template>

<script setup>
import { teamMembers2 } from "~/data/team";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
</script>

<style lang="scss" scoped></style>

<template>
  <section id="snippet-3" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
        <div class="col-lg-4">
          <h2
            class="fs-15 text-uppercase text-line text-primary text-center mb-3"
          >
            Meet the Team
          </h2>
          <h3 class="display-5 mb-5">
            Save your time and money by choosing our professional team.
          </h3>
          <p>
            Donec id elit non mi porta gravida at eget metus. Morbi leo risus,
            porta ac consectetur ac, vestibulum at eros tempus porttitor.
          </p>
          <a href="#" class="btn btn-primary rounded-pill mt-3"
            >See All Members</a
          >
        </div>
        <!--/column -->
        <div class="col-lg-8">
          <div
            class="swiper-container text-center mb-6"
            data-margin="30"
            data-dots="true"
            data-items-xl="3"
            data-items-md="2"
            data-items-xs="1"
          >
            <Swiper
              :space-between="30"
              :pagination="{ el: '.spb2', clickable: true }"
              :modules="[Pagination]"
              :grab-cursor="true"
              :breakpoints="{
                500: { slidesPerView: 1 },
                768: { slidesPerView: 2 },
                1024: { slidesPerView: 3 },
                1200: { slidesPerView: 3 },
              }"
            >
              <SwiperSlide v-for="(elm, i) in teamMembers3" :key="i">
                <nuxt-img
                  class="rounded-circle w-20 mx-auto mb-4"
                  :src="elm.avatarSrc"
                  alt=""
                />
                <h4 class="mb-1">{{ elm.name }}</h4>
                <div class="meta mb-2">{{ elm.position }}</div>
                <p class="mb-2">{{ elm.description }}</p>
                <nav class="nav social justify-content-center text-center mb-0">
                  <a
                    v-for="(elm2, i2) in elm.socialLinks"
                    :key="i2"
                    :href="elm2.link"
                    ><i :class="elm2.iconClass"></i
                  ></a>
                </nav>
              </SwiperSlide>
            </Swiper>
            <div class="swiper-controls">
              <div
                class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb2"
              ></div>
            </div>

            <!-- /.swiper -->
          </div>
          <!-- /.swiper-container -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
  
    <!-- /.container -->
  </section>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { teamMembers3 } from "~/data/team";
</script>

<style lang="scss" scoped></style>