Blocks - Portfolio

<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 align-items-center mb-7">
        <div class="col-md-8 col-lg-8 col-xl-7 col-xxl-6 pe-lg-17">
          <h2 class="display-4 mb-3">Recent Projects</h2>
          <p class="lead fs-lg">We love to turn ideas into beautiful things.</p>
        </div>
        <!--/column -->
      </div>

      <!--/.row -->
      <div class="projects-tiles">
        <div class="project grid grid-view">
          <div ref="isotopeContainer" class="d-flex">
            <div
              v-for="(item, i) in projects2"
              :key="item.id"
              :class="`item p-4 col-md-6 ${i == 1 ? 'mt-md-17' : ''} `"
            >
              <figure class="lift rounded mb-6">
                <nuxt-link to="/single-project3">
                  <nuxt-img :src="item.image.src" alt="" />
                </nuxt-link>
              </figure>
              <div :class="['post-category', item.categoryClass]">
                {{ item.category }}
              </div>
              <h3 class="post-title">{{ item.title }}</h3>
            </div>
            <!-- /.item -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /.project -->
      </div>
      <!-- /.projects-tiles -->
    </div>

    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import imagesLoaded from 'imagesloaded';
import { projects2 } from "~/data/projects";
const isotopeContainer = ref();
const isotope = ref();
const initIsotop = async () => {
  const Isotope = (await import("isotope-layout")).default;
  // Initialize Isotope in the mounted hook
  isotope.value = new Isotope(isotopeContainer.value, {
    itemSelector: ".item",
    layoutMode: "masonry", // or 'fitRows', depending on your layout needs
  });
  imagesLoaded(isotopeContainer.value).on(
    "progress",
    function (instance, image) {
      // Trigger Isotope layout
      isotope.value.layout();
    }
  );
};

onMounted(() => {
  initIsotop();
  
});
</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">
        <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
          <h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
          <h3 class="display-4 mb-10">
            Check out some of our awesome projects with
            <span class="underline-3 style-2 yellow">creative</span> ideas and
            great design.
          </h3>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="swiper-container grid-view mb-6">
        <Swiper
          :space-between="30"
          :pagination="{ el: '.pbutton2', 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 projects" :key="i">
            <figure class="rounded mb-6">
              <nuxt-img :src="elm.imgSrc" :srcset="elm.imgSrcset" alt="" />
              <div
                class="item-link cursor-pointer"
                @click="() => setActiveLightBox(true, i)"
              >
                <i class="uil uil-focus-add"></i>
              </div>
            </figure>
            <div
              class="project-details d-flex justify-content-center flex-column"
            >
              <div class="post-header">
                <h2 class="post-title h3">
                  <nuxt-link to="/single-project" class="link-dark">{{
                    elm.title
                  }}</nuxt-link>
                </h2>
                <div class="post-category text-ash">{{ elm.category }}</div>
              </div>
              <!-- /.post-header -->
            </div></SwiperSlide
          >
        </Swiper>
        <div class="swiper-controls">
          <div
            class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal pbutton2"
          ></div>
        </div>

        <!-- /.swiper -->
      </div>
      <!-- /.swiper-container -->
    </div>

    <!-- /.container -->
    
    <!-- /.container -->
  </section>
  <Lightbox
    :images="images"
    :activeLightBox="activeLightBox"
    :firstSlideIndex="currentSlideIndex"
    @setActiveLightBox="setActiveLightBox"
  />
  <!-- Component for lightbox image slider  from omponents>common>Lightbox -->
</template>

<script setup>
import { projects } from "~/data/projects";
const activeLightBox = ref(false);
const currentSlideIndex = ref(1);
const images = ref([]);
onMounted(() => {
  images.value = projects.map((elm) => elm.imgSrc);
});

const setActiveLightBox = (val, i) => {
  currentSlideIndex.value = i;
  activeLightBox.value = val;
};
import Lightbox from "~/components/common/Lightbox.vue";

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="projects-tiles">
        <div class="project grid grid-view">
          <div
            class="row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope"
            ref="isotopeContainer"
          >
            <div class="item col-md-6 mt-md-7 mt-lg-15">
              <div
                class="project-details d-flex justify-content-center align-self-end flex-column ps-0 pb-0"
              >
                <div class="post-header">
                  <h2 class="display-4 mb-4 pe-xxl-15">
                    Check out some of our recent projects below.
                  </h2>
                  <p class="lead fs-lg mb-0">
                    We love to turn ideas into beautiful things.
                  </p>
                </div>
                <!-- /.post-header -->
              </div>
              <!-- /.project-details -->
            </div>
            <!-- /.item -->
            <div
              v-for="(item, i) in projects2"
              :key="item.id"
              class="item px-7 py-1 col-md-6"
            >
              <figure class="lift rounded mb-6">
                <nuxt-link to="/single-project3">
                  <nuxt-img :src="item.image.src" alt="" />
                </nuxt-link>
              </figure>
              <div :class="['post-category', item.categoryClass]">
                {{ item.category }}
              </div>
              <h3 class="post-title">{{ item.title }}</h3>
            </div>
            <!-- /.item -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /.project -->
      </div>
      <!-- /.projects-tiles -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import imagesLoaded from 'imagesloaded';
import { projects2 } from "~/data/projects";
const isotopeContainer = ref();
const isotope = ref();
const initIsotop = async () => {
  const Isotope = (await import("isotope-layout")).default;
  // Initialize Isotope in the mounted hook
  isotope.value = new Isotope(isotopeContainer.value, {
    itemSelector: ".item",
    layoutMode: "masonry", // or 'fitRows', depending on your layout needs
  });
  imagesLoaded(isotopeContainer.value).on(
    "progress",
    function (instance, image) {
      // Trigger Isotope layout
      isotope.value.layout();
    }
  );
};

onMounted(() => {
  initIsotop();
 
});
</script>

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

<template>
  <section id="snippet-4" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17">
      <div class="row">
        <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
          <h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
          <h3 class="display-4 mb-10">
            Check out some of our awesome projects with creative ideas and great
            design.
          </h3>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
    <div class="container-fluid px-md-6">
      <div class="swiper-container blog grid-view mb-14 mb-md-16">
        <Swiper
          :space-between="30"
          :pagination="{ el: '.pagi4', clickable: true }"
          :modules="[Pagination, Navigation]"
          :navigation="{
            prevEl: '.snpb1',
            nextEl: '.snnb1',
          }"
          :breakpoints="{
            500: { slidesPerView: 1 },
            768: { slidesPerView: 2 },
            1024: { slidesPerView: 2 },
            1400: { slidesPerView: 3 },
          }"
          :grab-cursor="true"
        >
          <SwiperSlide v-for="(elm, i) in projects3" :key="i">
            <figure class="rounded">
              <nuxt-img :src="elm.image.src" alt="" />
            </figure>
          </SwiperSlide>
        </Swiper>

        <div class="swiper-controls">
          <div class="swiper-navigation">
            <div class="swiper-button swiper-button-prev snpb1"></div>
            <div class="swiper-button swiper-button-next snnb1"></div>
          </div>
          <div
            class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal pagi4"
          ></div>
        </div>
        <!-- /.swiper -->
      </div>
      <!-- /.swiper-container -->
    </div>
    <!-- /.container-fluid -->
    
    <!-- /.container -->
  </section>
</template>

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

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

<template>
  <section id="snippet-5" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row">
        <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto mb-8">
          <h2 class="fs-15 text-uppercase text-muted text-center mb-3">
            Our Projects
          </h2>
          <h3 class="display-4 text-center">
            Check out some of our awesome projects with creative ideas and great
            design.
          </h3>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="grid grid-view projects-masonry">
        <div class="row gx-md-8 gy-10 gy-md-13 isotope" ref="isotopeContainer">
          <div
            v-for="project in projects4"
            :key="project.id"
            :class="[
              'project',
              'item',
              `col-md-6`,
              `col-xl-4`,
              project.category,
            ]"
          >
            <figure class="lift rounded mb-6">
              <nuxt-link to="/single-project3">
                <nuxt-img :src="project.image.src" alt="" />
              </nuxt-link>
            </figure>
            <div
              class="project-details d-flex justify-content-center flex-column"
            >
              <div class="post-header">
                <div
                  :class="[
                    'post-category',
                    'text-line',
                    `mb-3`,
                    project.categoryClass,
                  ]"
                >
                  {{ project.categoryText }}
                </div>
                <h2 class="post-title h3">{{ project.title }}</h2>
              </div>
              <!-- /.post-header -->
            </div>
            <!-- /.project-details -->
          </div>
          <!-- /.project -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.grid -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import imagesLoaded from 'imagesloaded';
import { projects4 } from "~/data/projects";
const isotopeContainer = ref();
const isotope = ref();
const initIsotop = async () => {
  const Isotope = (await import("isotope-layout")).default;
  // Initialize Isotope in the mounted hook
  isotope.value = new Isotope(isotopeContainer.value, {
    itemSelector: ".item",
    layoutMode: "masonry", // or 'fitRows', depending on your layout needs
  });
  imagesLoaded(isotopeContainer.value).on(
    "progress",
    function (instance, image) {
      // Trigger Isotope layout
      isotope.value.layout();
    }
  );
};

onMounted(() => {
  initIsotop();
  
});
</script>

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

<template>
  <section id="snippet-6" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row align-items-center mb-10">
        <div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">
          <h2 class="display-4 mb-3">Latest Projects</h2>
          <p class="lead fs-20 mb-0">
            Check out some of my latest projects with creative ideas.
          </p>
        </div>
        <!--/column -->
        <div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
          <a href="#" class="btn btn-primary rounded-pill mb-0"
            >See All Projects</a
          >
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
      <div
        v-for="(card, index) in cards"
        :key="index"
        :class="`card ${card.bgClass} mb-10`"
      >
        <div class="card-body p-12 pb-0">
          <div class="row">
            <div class="col-lg-4 pb-12 align-self-center">
              <div :class="`post-category mb-3 text-${card.categoryColor}`">
                {{ card.category }}
              </div>
              <h3 class="h1 post-title mb-3">{{ card.title }}</h3>
              <p>{{ card.description }}</p>
              <a
                :href="card.link"
                class="more hover link-{{ card.categoryColor }}"
                >See Project</a
              >
            </div>
            <div class="col-lg-7 offset-lg-1 align-self-end">
              <figure>
                <nuxt-img
                  class="img-fluid"
                  :src="card.image.src"
                  :srcset="card.image.srcset"
                  alt=""
                />
              </figure>
            </div>
          </div>
        </div>
      </div>
      <!--/.card -->
      <div class="row gx-md-8 gx-xl-10">
        <div v-for="(project, index) in projects" :key="index" class="col-lg-6">
          <div :class="project.cardClass">
            <div class="card-body p-12 pb-0">
              <div :class="project.categoryClass">{{ project.category }}</div>
              <h3 class="h1 post-title mb-3">{{ project.title }}</h3>
              <p>{{ project.description }}</p>
              <a
                :href="project.link"
                class="more hover {{ project.linkClass }}"
                >{{ project.linkLabel }}</a
              >
            </div>
            <!--/.card-body -->
            <nuxt-img
              class="card-img-bottom"
              :src="project.imageSrc"
              :srcset="project.imageSrcset"
              alt=""
            />
          </div>
          <!--/.card -->
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->

    <!-- /.container -->
  </section>
</template>

<script setup>
const projects = [
  {
    id: 1,
    cardClass: "card bg-soft-leaf mb-10 mb-lg-0",
    categoryClass: "post-category mb-3 text-leaf",
    category: "Web Design",
    title: "Missio Theme",
    description:
      "Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.",
    link: "#",
    linkClass: "link-leaf mb-8",
    linkLabel: "See Project",
    imageSrc: "/assets/img/photos/f3.png",
    imageSrcset: "/assets/img/photos/f3@2x.png 2x",
  },
  {
    id: 2,
    cardClass: "card bg-soft-pink mb-lg-0",
    categoryClass: "post-category mb-3 text-pink",
    category: "Mobile Design",
    title: "Storage App",
    description:
      "Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper.",
    link: "#",
    linkClass: "link-pink mb-8",
    linkLabel: "See Project",
    imageSrc: "/assets/img/photos/f4.png",
    imageSrcset: "/assets/img/photos/f4@2x.png 2x",
  },
];
const cards = [
  {
    bgClass: "bg-soft-violet",
    category: "Web Design",
    categoryColor: "violet",
    title: "Snowlake Theme",
    description:
      "Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.",
    link: "#",
    image: {
      src: "/assets/img/photos/f1.png",
      srcset: "/assets/img/photos/f1@2x.png 2x",
    },
  },
  {
    bgClass: "bg-soft-blue",
    category: "Mobile Design",
    categoryColor: "blue",
    title: "Budget App",
    description:
      "Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.",
    link: "#",
    image: {
      src: "/assets/img/photos/f2.png",
      srcset: "/assets/img/photos/f2@2x.png 2x",
    },
  },
  // Add more cards as needed
];
</script>

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

<template>
  <section id="snippet-7" class="wrapper bg-light wrapper-border">
    <div class="overflow-hidden">
      <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
        <div class="row">
          <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
            <h2 class="fs-16 text-uppercase text-primary mb-3">
              Latest Projects
            </h2>
            <h3 class="display-3 mb-10">
              Check out some of our awesome projects with creative ideas and
              great design.
            </h3>
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
        <div
          class="swiper-container grid-view nav-bottom nav-color mb-14"
          data-margin="30"
          data-dots="false"
          data-nav="true"
          data-items-md="2"
          data-items-xs="1"
        >
          <Swiper
            :space-between="30"
            :pagination="{ el: '.pbutton10', clickable: true }"
            :modules="[Pagination, Navigation]"
            :navigation="{
              prevEl: '.snpb2',
              nextEl: '.snnb2',
            }"
            :breakpoints="{
              500: { slidesPerView: 1 },
              768: { slidesPerView: 1 },
              1024: { slidesPerView: 2 },
              1200: { slidesPerView: 2 },
            }"
            class="overflow-visible"
          >
            <SwiperSlide v-for="(slide, i) in projects5" :key="i">
              <figure class="rounded mb-7">
                <nuxt-link to="/single-project3">
                  <nuxt-img :src="slide.image.src" alt="" />
                </nuxt-link>
              </figure>
              <div
                class="project-details d-flex justify-content-center flex-column"
              >
                <div class="post-header">
                  <h2 class="post-title h3">
                    <nuxt-link to="/single-project" class="link-dark">{{
                      slide.title
                    }}</nuxt-link>
                  </h2>
                  <div class="post-category text-ash">{{ slide.category }}</div>
                </div>
                <!-- /.post-header -->
              </div>
            </SwiperSlide>
          </Swiper>
          <div class="swiper-controls">
            <div class="swiper-navigation">
              <div class="swiper-button swiper-button-prev snpb2"></div>
              <div class="swiper-button swiper-button-next snnb2"></div>
            </div>
          </div>

          <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
      </div>
      <!-- /.container -->
    </div>
    <!-- /.overflow-hidden -->
    
    <!-- /.container -->
  </section>
</template>

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

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

<template>
  <section id="snippet-8" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row">
        <div class="col-lg-11 col-xl-10 mx-auto mb-10">
          <h2 class="fs-16 text-uppercase text-muted text-center mb-3">
            Our Projects
          </h2>
          <h3 class="display-3 text-center px-lg-5 px-xl-10 px-xxl-16 mb-0">
            Check out some of our awesome projects with creative ideas and great
            design.
          </h3>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="grid grid-view projects-masonry">
        <div class="row gx-md-8 gy-10 gy-md-13 isotope">
          <div
            v-for="(project, i) in projects6"
            :key="project.id"
            class="project item col-md-6 col-xl-4"
          >
            <figure class="rounded mb-6">
              <nuxt-img :src="project.image.src" alt="" />
              <div
                class="item-link cursor-pointer"
                @click="() => setActiveLightBox(true, i)"
              >
                <i class="uil uil-focus-add"></i>
              </div>
            </figure>
            <div
              class="project-details d-flex justify-content-center flex-column"
            >
              <div class="post-header">
                <h2 class="post-title h3 fs-22">
                  <nuxt-link to="/single-project3" class="link-dark">{{
                    project.title
                  }}</nuxt-link>
                </h2>
                <div class="post-category text-ash">{{ project.category }}</div>
              </div>
              <!-- /.post-header -->
            </div>
            <!-- /.project-details -->
          </div>
          <!-- /.item -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.grid -->
      <div class="text-center mt-10">
        <a href="#" class="btn btn-lg btn-primary rounded-pill"
          >Start a Project</a
        >
      </div>
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
  <Lightbox
    :images="images"
    :activeLightBox="activeLightBox"
    :firstSlideIndex="currentSlideIndex"
    @setActiveLightBox="setActiveLightBox"
  />
  <!-- Component for lightbox image slider  from omponents>common>Lightbox -->
</template>

<script setup>
import { projects6 } from "~/data/projects";
const activeLightBox = ref(false);
const currentSlideIndex = ref(1);
const images = ref([]);
onMounted(() => {
  images.value = projects6.map((elm) => elm.fullImage);
});

const setActiveLightBox = (val, i) => {
  currentSlideIndex.value = i;
  activeLightBox.value = val;
};
import Lightbox from "~/components/common/Lightbox.vue";
</script>

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

<template>
  <section id="snippet-9" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15 text-center">
      <div class="row">
        <div class="col-lg-10 col-xl-8 col-xxl-7 mx-auto mb-8">
          <h2 class="display-5 mb-3">My Selected Shots</h2>
          <p class="lead fs-lg">
            Photography is my passion and I love to turn ideas into beautiful
            things.
          </p>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="grid grid-view projects-masonry">
        <div class="isotope-filter filter mb-10">
          <ul>
            <li
              v-for="filter in filters"
              @click="() => updateCategory(filter.value)"
              :key="filter.id"
            >
              <a
                :class="`filter-item ${
                  currentCategory == filter.value ? 'active' : ''
                }`"
                >{{ filter.label }}</a
              >
            </li>
          </ul>
        </div>
        <div class="row gx-md-6 gy-6 isotope" ref="isotopeContainer">
          <div
            v-for="(project, i) in filteredItems"
            :key="project.id"
            :class="[
              'project',
              'item',
              `col-md-6`,
              `col-xl-4`,
              ...project.categories,
            ]"
          >
            <figure class="overlay overlay-1 rounded">
              <div
                class="cursor-pointer"
                @click="() => setActiveLightBox(true, i)"
              >
                <nuxt-img :src="project.image.src" alt="" />
                <span class="bg"></span>
              </div>
              <figcaption>
                <h5 class="from-top mb-0">{{ project.title }}</h5>
              </figcaption>
            </figure>
          </div>
          <!-- /.project -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.grid -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
  <Lightbox
    :images="images"
    :activeLightBox="activeLightBox"
    :firstSlideIndex="currentSlideIndex"
    @setActiveLightBox="setActiveLightBox"
  />
  <!-- Component for lightbox image slider  from omponents>common>Lightbox -->
</template>

<script setup>
import imagesLoaded from 'imagesloaded';
import { projects7 } from "~/data/projects";
const activeLightBox = ref(false);
const currentSlideIndex = ref(1);
const images = ref([]);
onMounted(() => {
  images.value = projects7.map((elm) => elm.fullImage);
});

const setActiveLightBox = (val, i) => {
  currentSlideIndex.value = i;
  activeLightBox.value = val;
};
import Lightbox from "~/components/common/Lightbox.vue";
const isotope = ref();
const initIsotop = async () => {
  const Isotope = (await import("isotope-layout")).default;
  // Initialize Isotope in the mounted hook
  isotope.value = new Isotope(isotopeContainer.value, {
    itemSelector: ".item",
    layoutMode: "masonry", // or 'fitRows', depending on your layout needs
  });
  imagesLoaded(isotopeContainer.value).on(
    "progress",
    function (instance, image) {
      // Trigger Isotope layout
      isotope.value.layout();
    }
  );
};
const filters = [
  { id: 1, label: "All", value: "*" },
  { id: 2, label: "Foods", value: "foods" },
  { id: 3, label: "Drinks", value: "drinks" },
  { id: 4, label: "Events", value: "events" },
  { id: 5, label: "Pastries", value: "pastries" },
];
const currentCategory = ref("*");
const filteredItems = ref(projects7);
const updateCategory = (val) => {
  if (val == "*") {
    currentCategory.value = "*";
    // filteredItems.value = projects7;
  } else {
    currentCategory.value = val;
    // filteredItems.value = [
    //   ...projects7.filter((elm) => elm.categories.includes(val)),
    // ];
  }

  isotope.value.arrange({
    filter: currentCategory.value == "*" ? "*" : `.${currentCategory.value}`,
  });
  //   isotope.value.layout();
};

const isotopeContainer = ref();


onMounted(() => {
  initIsotop();

});
</script>

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

<template>
  <section id="snippet-10" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row text-center">
        <div class="col-lg-10 col-xxl-8 mx-auto mb-12">
          <h2 class="fs-16 text-uppercase text-muted mb-3">Latest Projects</h2>
          <h3 class="display-2 ls-sm">
            Check out some of our
            <span class="underline-3 style-1 primary"><em>awesome</em></span>
            projects with creative ideas and great design.
          </h3>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="row gy-10 align-items-center mb-15 mb-md-17">
        <div class="col-lg-7">
          <div class="card bg-soft-grape">
            <div class="card-body px-9 py-0 overflow-hidden">
              <div class="row gx-4 gx-md-9">
                <div class="col-6">
                  <figure class="mt-9">
                    <a href="#"
                      ><nuxt-img
                        class="shadow-lg rounded-top"
                        src="/assets/img/demos/d18.jpg"
                        srcset="/assets/img/demos/d18@2x.jpg 2x"
                        alt=""
                    /></a>
                  </figure>
                </div>
                <!-- /column -->
                <div class="col-6">
                  <figure>
                    <a href="#"
                      ><nuxt-img
                        class="shadow-lg rounded-bottom"
                        src="/assets/img/demos/d18-2.jpg"
                        srcset="/assets/img/demos/d18-2@2x.jpg 2x"
                        alt=""
                    /></a>
                  </figure>
                </div>
                <!-- /column -->
              </div>
              <!-- /.row -->
            </div>
            <!--/.card-body -->
          </div>
          <!--/.card -->
        </div>
        <!-- /column -->
        <div class="col-lg-4 ms-auto">
          <h3 class="h1 post-title ls-sm mb-2">Wiretree Network Company</h3>
          <div class="post-category text-muted mb-4">
            <span>Dashboard</span>, <span>Web Development</span>
          </div>
          <p class="mb-6">
            Maecenas faucibus mollis interdum sed posuere consectetur est at
            lobortis. Scelerisque id ligula porta felis euismod semper. Fusce
            dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.
          </p>
          <a href="#" class="btn btn-grape rounded">See Project</a>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="row gy-10 align-items-center">
        <div class="col-lg-7 order-lg-2">
          <div class="card bg-soft-primary">
            <div class="card-body p-11 overflow-hidden">
              <figure>
                <a href="#"
                  ><nuxt-img
                    src="/assets/img/photos/f2.png"
                    srcset="/assets/img/photos/f2@2x.png 2x"
                    alt=""
                /></a>
              </figure>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.card -->
        </div>
        <!-- /column -->
        <div class="col-lg-4 me-auto">
          <h3 class="h1 post-title ls-sm mb-2">Alphine Finance</h3>
          <div class="post-category text-muted mb-4">
            <span>Branding</span>, <span>Web Design</span>
          </div>
          <p class="mb-6">
            Maecenas faucibus mollis interdum sed posuere consectetur est at
            lobortis. Scelerisque id ligula porta felis euismod semper. Fusce
            dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.
          </p>
          <a href="#" class="btn btn-primary rounded">See Project</a>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup></script>

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

<template>
  <section id="snippet-11" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row mb-10">
        <div class="col-md-9 col-lg-7 col-xl-6 col-xxl-5 mx-auto">
          <div class="counter-wrapper">
            <h3 class="fs-70 mb-3 text-primary text-center counter">
              <CommonCounter parentClass="" :min="0" :max="21" :time="1500" />
              <!-- Component for counting number with intersetion observer from omponents>common>counter -->
            </h3>
          </div>
          <h2 class="display-3 mb-3 text-center mb-0">
            Functional, impressive and rich demos to start with
          </h2>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="demos-wrapper">
        <div class="project mb-10">
          <div class="card bg-soft-grape">
            <div class="card-body ps-xl-12 py-0 overflow-hidden">
              <div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
                <div class="col-lg-7">
                  <div class="row gx-7">
                    <div class="col-6">
                      <figure
                        class="itooltip itooltip-grape mt-9"
                        title='<h5 class="mb-0">Click to see the demo</h5>'
                      >
                        <nuxt-link to="/demo18"
                          ><nuxt-img
                            class="shadow-lg rounded-top"
                            src="/assets/img/demos/d18.jpg"
                            srcset="/assets/img/demos/d18@2x.jpg 2x"
                            alt=""
                        /></nuxt-link>
                      </figure>
                    </div>
                    <!-- /column -->
                    <div class="col-6">
                      <figure
                        class="itooltip itooltip-grape"
                        title='<h5 class="mb-0">Click to see the demo</h5>'
                      >
                        <nuxt-link to="/demo18"
                          ><nuxt-img
                            class="shadow-lg rounded-bottom"
                            src="/assets/img/demos/d18-2.jpg"
                            srcset="/assets/img/demos/d18-2@2x.jpg 2x"
                            alt=""
                        /></nuxt-link>
                      </figure>
                    </div>
                    <!-- /column -->
                  </div>
                  <!-- /.row -->
                </div>
                <!-- /column -->
                <div class="col-lg-5 d-none d-lg-block">
                  <h2 class="post-title fs-30 mb-4">Demo Layout XVIII</h2>
                  <ul class="icon-list bullet-grape row ms-0 gy-2">
                    <li class="col-md-6" v-for="item in items" :key="item.id">
                      <span><i class="uil uil-check"></i></span>
                      <span>{{ item.text }}</span>
                    </li>
                  </ul>
                  <nuxt-link
                    to="/demo18"
                    class="btn btn-sm btn-grape rounded-pill mt-1"
                    >See Demo</nuxt-link
                  >
                </div>
                <!-- /column -->
              </div>
              <!-- /.row -->
            </div>
            <!--/.card-body -->
          </div>
          <!--/.card -->
        </div>
        <!-- /.project -->
        <div class="project">
          <div class="card bg-soft-fuchsia">
            <div class="card-body ps-xl-12 py-0 overflow-hidden">
              <div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
                <div class="col-lg-7">
                  <div class="row gx-7">
                    <div class="col-6">
                      <figure
                        class="itooltip itooltip-fuchsia mt-9"
                        title='<h5 class="mb-0">Click to see the demo</h5>'
                      >
                        <nuxt-link to="/demo19"
                          ><nuxt-img
                            class="shadow-lg rounded-top"
                            src="/assets/img/demos/d19-1.jpg"
                            srcset="/assets/img/demos/d19-1@2x.jpg 2x"
                            alt=""
                        /></nuxt-link>
                      </figure>
                    </div>
                    <!-- /column -->
                    <div class="col-6">
                      <figure
                        class="itooltip itooltip-fuchsia"
                        title='<h5 class="mb-0">Click to see the demo</h5>'
                      >
                        <nuxt-link to="/demo19"
                          ><nuxt-img
                            class="shadow-lg rounded-bottom"
                            src="/assets/img/demos/d19-2.jpg"
                            srcset="/assets/img/demos/d19-2@2x.jpg 2x"
                            alt=""
                        /></nuxt-link>
                      </figure>
                    </div>
                    <!-- /column -->
                  </div>
                  <!-- /.row -->
                </div>
                <!-- /column -->
                <div class="col-lg-5 d-none d-lg-block">
                  <h2 class="post-title fs-30 mb-4">Demo Layout XIX</h2>
                  <ul class="icon-list bullet-fuchsia row ms-0 gy-2">
                    <li class="col-md-6" v-for="item in items2" :key="item.id">
                      <span><i class="uil uil-check"></i></span>
                      <span>{{ item.text }}</span>
                    </li>
                  </ul>
                  <nuxt-link
                    to="/demo19"
                    class="btn btn-sm btn-fuchsia rounded-pill mt-1"
                    >See Demo</nuxt-link
                  >
                </div>
                <!-- /column -->
              </div>
              <!-- /.row -->
            </div>
            <!--/.card-body -->
          </div>
          <!--/.card -->
        </div>
        <!-- /.project -->
        <div class="text-center mt-12">
          <a href="#" class="btn btn-primary rounded-pill">See All Demos</a>
        </div>
      </div>
      <!-- /.demos-wrapper -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
const items = ref([
  { id: 1, text: "Network, Marketing" },
  { id: 2, text: "SVG icons" },
  { id: 3, text: "3D illustrations" },
  { id: 4, text: "Gradient image" },
]);
const items2 = ref([
  { id: 5, text: "Agency, Startup" },
  { id: 6, text: "Gradient image" },
  { id: 7, text: "SVG icons" },
  { id: 8, text: "Colorful design" },
]);
</script>

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