Blocks - About

<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 gx-lg-8 gx-xl-12 gy-10 align-items-center">
        <div class="col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative">
          <div
            class="shape bg-soft-primary rounded-circle rellax w-20 h-20"
            data-rellax-speed="1"
            style="top: -2rem; right: -1.9rem"
          ></div>
          <figure class="rounded">
            <nuxt-img
              :width="575"
              :height="550"
              src="/assets/img/photos/about7.jpg"
              srcset="/assets/img/photos/about7@2x.jpg 2x"
              alt="image"
            />
          </figure>
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <h2 class="display-4 mb-3">Who Are We?</h2>
          <p class="lead fs-lg">
            We are a digital and branding company that believes in the power of
            creative strategy and along with great design.
          </p>
          <p class="mb-6">
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in,
            egestas eget quam. Praesent commodo cursus magna, vel scelerisque
            nisl consectetur et.
          </p>
          <div class="row gx-xl-10 gy-6">
            <div v-for="(item, index) in items" :key="index" class="col-md-6">
              <div class="d-flex flex-row">
                <div>
                  <nuxt-img
                    :src="item.iconSrc"
                    class="icon-svg icon-svg-sm me-4"
                    alt=""
                  />
                </div>
                <div>
                  <h4 class="mb-1">{{ item.title }}</h4>
                  <p class="mb-0">{{ item.description }}</p>
                </div>
              </div>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
const items = [
  {
    id: 1,
    iconSrc: "/assets/img/icons/lineal/target.svg",
    title: "Our Mission",
    description: "Dapibus eu leo quam ornare curabitur blandit tempus.",
  },
  {
    id: 2,

    iconSrc: "/assets/img/icons/lineal/award-2.svg",
    title: "Our Values",
    description: "Aenean lacinia bibendum nulla sed consectetur.",
  },
  // Add more items as needed
];
</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 gx-lg-8 gx-xl-12 gy-12 align-items-center">
        <div class="col-lg-6 position-relative">
          <div
            class="btn btn-circle btn-primary pe-none position-absolute counter-wrapper flex-column d-none d-md-flex"
            style="
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 170px;
              height: 170px;
            "
          >
            <h3 class="text-white mb-1 mt-n2">
              <span class="counter counter-lg">
                <CounterVue parentClass="" :min="5" :max="20" :time="1500" />
                <!-- Component for counting number with intersetion observer from omponents>common>counter -->
                +</span
              >
            </h3>
            <p>Year Experience</p>
          </div>
          <div class="row gx-md-5 gy-5 align-items-center">
            <div class="col-md-6">
              <div class="row gx-md-5 gy-5">
                <div class="col-md-10 offset-md-2">
                  <figure class="rounded">
                    <nuxt-img
                      src="/assets/img/photos/ab1.jpg"
                      srcset="/assets/img/photos/ab1@2x.jpg 2x"
                      alt="image"
                    />
                  </figure>
                </div>
                <!--/column -->
                <div class="col-md-12">
                  <figure class="rounded">
                    <nuxt-img
                      :width="290"
                      :height="225"
                      src="/assets/img/photos/ab2.jpg"
                      srcset="/assets/img/photos/ab2@2x.jpg 2x"
                      alt="image"
                    />
                  </figure>
                </div>
                <!--/column -->
              </div>
              <!--/.row -->
            </div>
            <!--/column -->
            <div class="col-md-6">
              <figure class="rounded">
                <nuxt-img
                  :width="290"
                  :height="440"
                  src="/assets/img/photos/ab3.jpg"
                  srcset="/assets/img/photos/ab3@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <nuxt-img
            :width="512"
            :height="390"
            src="/assets/img/icons/lineal/handshake.svg"
            class=" icon-svg icon-svg-md mb-4"
            alt="image"
          />
          <h3 class="display-5 mb-5">
            We are a creative company that focuses on establishing long-term
            relationships with customers.
          </h3>
          <p class="mb-7">
            Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum
            nulla sed consectetur. Integer posuere erat a ante venenatis dapibus
            posuere velit aliquet. Vestibulum id ligula porta felis euismod
            semper. Vestibulum id ligula.
          </p>
          <div class="row counter-wrapper gy-6">
            <div
              class="col-md-4"
              v-for="(counter, index) in counters"
              :key="index"
            >
              <h3 class="counter text-primary">
                <CounterVue
                  parentClass=""
                  :min="50"
                  :max="counter.count"
                  :time="500"
                />
                <!-- Component for counting number with intersetion observer from omponents>common>counter -->
              </h3>
              <p>{{ counter.label }}</p>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
    <!-- /.container -->
  </section>
</template>

<script setup>
import CounterVue from "~/components/common/Counter.vue";
import { counters } from "~/data/count";
</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 pb-lg-2">
      <figure class="rounded">
        <nuxt-img
          :width="1200"
          :height="650"
          src="/assets/img/photos/about5.jpg"
          srcset="/assets/img/photos/about5@2x.jpg 2x"
          alt=""
        />
      </figure>
      <div class="row">
        <div class="col-xl-10 mx-auto">
          <div
            class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 text-white mt-n5 mt-lg-0 mt-lg-n50p mb-lg-n50p border-radius-lg-top"
            style="background-image: url(/assets/img/photos/bg3.jpg)"
          >
            <div class="card-body p-9 p-xl-10">
              <div
                class="row align-items-center counter-wrapper gy-4 text-center"
              >
                <div
                  v-for="(counter, index) in counters2"
                  :key="index"
                  class="col-6 col-lg-3"
                >
                  <h3 class="counter counter-lg text-white">
                    <Counter
                      parentClass=""
                      :min="50"
                      :max="counter.count"
                      :time="500"
                    />
                    <!-- Component for counting number with intersetion observer from omponents>common>counter -->
                  </h3>

                  <p>{{ counter.label }}</p>
                </div>
                <!--/column -->
              </div>
              <!--/.row -->
            </div>
            <!--/.card-body -->
          </div>
          <!--/.card -->
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import Counter from "~/components/common/Counter.vue";
import { counters2 } from "~/data/count";
</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 pb-13 pb-md-15">
      <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
        <div class="col-lg-6 position-relative order-lg-2">
          <div
            class="shape bg-dot primary rellax w-16 h-20"
            data-rellax-speed="1"
            style="top: 3rem; left: 5.5rem"
          ></div>
          <div class="overlap-grid overlap-grid-2">
            <div class="item">
              <figure class="rounded shadow">
                <nuxt-img
                  src="/assets/img/photos/about2.jpg"
                  :width="450"
                  :height="450"
                  srcset="/assets/img/photos/about2@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>
            <div class="item">
              <figure class="rounded shadow">
                <nuxt-img
                  src="/assets/img/photos/about3.jpg"
                  :width="450"
                  :height="450"
                  srcset="/assets/img/photos/about3@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>
          </div>
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <nuxt-img
            :width="410"
            :height="362"
            src="/assets/img/icons/lineal/megaphone.svg"
            class="icon-svg icon-svg-md mb-4"
            alt=""
          />
          <h2 class="display-4 mb-3">Who Are We?</h2>
          <p class="lead fs-lg">
            We are a digital and branding company that believes in the power of
            creative strategy and along with great design.
          </p>
          <p class="mb-6">
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in,
            egestas eget quam. Praesent commodo cursus magana, vel scelerisque
            nisl consectetur et.
          </p>
          <div class="row gy-3 gx-xl-8">
            <div v-for="(list, index) in lists" :key="index" class="col-xl-6">
              <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
                <li v-for="(item, itemIndex) in list.items" :key="itemIndex">
                  <span><i class="uil uil-check"></i></span>
                  <span>{{ item.text }}</span>
                </li>
              </ul>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
    
    <!-- /.container -->
  </section>
</template>

<script setup>
const lists = [
  {
    items: [
      { text: "Aenean eu leo quam ornare curabitur blandit tempus." },
      { text: "Nullam quis risus eget urna mollis ornare donec elit." },
    ],
  },
  {
    items: [
      { text: "Etiam porta sem malesuada magna mollis euismod." },
      { text: "Fermentum massa vivamus faucibus amet euismod." },
    ],
  },
];
</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 gx-lg-8 gx-xl-12 gy-10 align-items-center">
        <div class="col-lg-7 order-lg-2">
          <figure>
            <nuxt-img
              class="w-auto"
              src="/assets/img/illustrations/i2.png"
              srcset="/assets/img/illustrations/i2@2x.png 2x"
              alt=""
            />
          </figure>
        </div>
        <!--/column -->
        <div class="col-lg-5">
          <h2 class="fs-15 text-uppercase text-line text-primary mb-3">
            Why Choose Us?
          </h2>
          <h3 class="display-5 mb-7">
            A few reasons why our valued customers choose us.
          </h3>
          <div class="accordion accordion-wrapper" id="accordionExample">
            <div
              v-for="(item, index) in accordionItems"
              :key="index"
              class="card plain accordion-item"
            >
              <div class="card-header" :id="`heading${index + 1}`">
                <button
                  :class="{ collapsed: !item.expanded }"
                  data-bs-toggle="collapse"
                  :data-bs-target="`#collapse${index + 1}`"
                  :aria-expanded="item.expanded"
                  :aria-controls="`collapse${index + 1}`"
                  @click="toggleAccordionItem(index)"
                >
                  {{ item.title }}
                </button>
              </div>
              <div
                :id="`collapse${index + 1}`"
                :class="`accordion-collapse collapse ${
                  item.expanded ? 'show' : ''
                }`"
                :aria-labelledby="`heading${index + 1}`"
                data-bs-parent="#accordionExample"
              >
                <div class="card-body">
                  <p>{{ item.content }}</p>
                </div>
              </div>
            </div>
            <!--/.accordion-item -->
          </div>
          <!--/.accordion -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
    
    <!-- /.container -->
  </section>
</template>

<script setup>
const accordionItems = [
  {
    title: "Professional Design",
    content:
      "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.",
    expanded: true,
  },
  {
    title: "Top-Notch Support",
    content:
      "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.",
    expanded: false,
  },
  {
    title: "Header and Slider Options",
    content:
      "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.",
    expanded: false,
  },
];

const toggleAccordionItem = (index) => {
  accordionItems.forEach((item, i) => {
    item.expanded = i === index && !item.expanded;
  });
};
</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 gx-lg-8 gx-xl-12 gy-10 align-items-center">
        <div class="col-lg-7">
          <figure>
            <nuxt-img
              class="w-auto"
              src="/assets/img/illustrations/i8.png"
              srcset="/assets/img/illustrations/i8@2x.png 2x"
              alt=""
            />
          </figure>
        </div>
        <!--/column -->
        <div class="col-lg-5">
          <h3 class="display-4 mb-6 pe-xxl-6">
            We bring rapid solutions to make the life of our customers easier.
          </h3>
          <ul class="progress-list mt-3">
            <li v-for="(item, index) in skills" :key="index">
              <p>{{ item.title }}</p>
              <div :class="`progressbar line ${item.color}`">
                <LineProgressbar :max="item.value" />
                <!-- Component for line progressbar with animation from omponents>common>LineProgressbar -->
              </div>
            </li>
          </ul>
          <!-- /.progress-list -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
 
    <!-- /.container -->
  </section>
</template>

<script setup>
import LineProgressbar from "~/components/common/LineProgressbar.vue";

import { skills } from "~/data/skils";
</script>

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

<template>
  <section id="snippet-7" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center">
        <div class="col-md-8 col-lg-6 position-relative">
          <div
            class="btn btn-circle btn-primary btn-play ripple mx-auto mb-5 position-absolute cursor-pointer"
            @click="
              () => {
                modalOpen = true;
              }
            "
            style="
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 3;
            "
          >
            <i class="icn-caret-right"></i>
          </div>
          <div
            class="shape rounded bg-soft-primary rellax d-md-block"
            data-rellax-speed="0"
            style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%"
          ></div>
          <figure class="rounded">
            <nuxt-img
              src="/assets/img/photos/about12.jpg"
              :width="650"
              :height="520"
              srcset="/assets/img/photos/about12@2x.jpg 2x"
              alt="image"
            />
          </figure>
        </div>
        <!--/column -->
        <div class="col-lg-5 col-xl-4 offset-lg-1">
          <h3 class="display-4 mb-3">Sandbox Brings Awesomeness</h3>
          <p class="lead fs-lg mb-6">
            We have considered our solutions to
            <span class="underline">support every stage</span> of your growth.
          </p>
          <ul class="progress-list">
            <li v-for="(item, index) in skills2" :key="index">
              <p>{{ item.title }}</p>
              <div :class="`progressbar line primary`">
                <LineProgressbar :max="item.value" />
                <!-- Component for line progressbar with animation from omponents>common>LineProgressbar -->
              </div>
            </li>
          </ul>
          <!-- /.progress-list -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
  <CommonModalVideo @modalClose="modalClose" :modalOpen="modalOpen" />
</template>

<script setup>
import LineProgressbar from "~/components/common/LineProgressbar.vue";
import { skills2 } from "~/data/skils";
const modalOpen = ref(false);
const modalClose = () => {
  modalOpen.value = false;
};
</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 gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center">
        <div class="col-lg-6">
          <div class="row gx-md-5 gy-5">
            <div class="col-12">
              <figure class="rounded mx-md-5">
                <nuxt-img
                  :width="1120"
                  :height="570"
                  src="/assets/img/photos/g8.jpg"
                  srcset="/assets/img/photos/g8@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>

            <!--/column -->
            <div class="col-md-6">
              <figure class="rounded">
                <nuxt-img
                  :width="293"
                  :height="260"
                  src="/assets/img/photos/g9.jpg"
                  srcset="/assets/img/photos/g9@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>
            <!--/column -->
            <div class="col-md-6">
              <figure class="rounded">
                <nuxt-img
                  :width="293"
                  :height="235"
                  src="/assets/img/photos/g10.jpg"
                  srcset="/assets/img/photos/g10@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <h2 class="fs-16 text-uppercase text-muted mb-3">
            What Makes Us Different?
          </h2>
          <h3 class="display-3 mb-10">
            We bring
            <span class="underline-3 style-2 yellow">solutions</span> to make
            life easier for our customers.
          </h3>
          <div class="row gy-8">
            <div v-for="item in features" :key="item.title" class="col-md-6">
              <div class="d-flex flex-row">
                <div>
                  <nuxt-img
                    :src="item.icon"
                    class="icon-svg icon-svg-xs solid-mono"
                    :class="item.textColor"
                    alt=""
                  />
                </div>
                <div>
                  <h4 class="mb-1">{{ item.title }}</h4>
                  <p class="mb-0">{{ item.description }}</p>
                </div>
              </div>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->

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

<script setup>
import { features } from "~/data/features";
</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">
      <div class="row gx-md-8 gy-10 align-items-center">
        <div class="col-lg-6 offset-lg-1 order-lg-2 position-relative">
          <figure class="rounded">
            <nuxt-img
              class="img-fluid"
              :width="625"
              :height="590"
              src="/assets/img/photos/about27.jpg"
              srcset="/assets/img/photos/about27@2x.jpg 2x"
              alt=""
            />
          </figure>
          <div
            class="card shadow-lg position-absolute d-none d-md-block"
            style="top: 15%; left: -7%"
          >
            <div class="card-body py-4 px-5">
              <div class="d-flex flex-row align-items-center">
                <div>
                  <nuxt-img
                    :width="256"
                    :height="235"
                    src="/assets/img/icons/solid/cloud-group.svg"
                    class=" icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-3"
                    alt=""
                  />
                </div>
                <div>
                  <h3 class="fs-25 counter mb-0 text-nowrap">
                    <Counter :max="25000" :min="100" :time="1500" />
                    <!-- Component for counting number with intersetion observer from omponents>common>counter -->
                    +
                  </h3>
                  <p class="fs-16 lh-sm mb-0 text-nowrap">Happy Clients</p>
                </div>
              </div>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.card -->
          <div
            class="card shadow-lg position-absolute text-center d-none d-md-block"
            style="bottom: 10%; left: -10%"
          >
            <div class="card-body p-6">
              <div class="progressbar semi-circle fuchsia mb-3" data-value="80">
                <CircleProgressbar :max="80" />
                <!-- Component for circuler progressbar with animation from omponents>common>CircleProgressbar -->
              </div>
              <h4 class="mb-0">Time Saved</h4>
            </div>
            <!--/.card-body -->
          </div>
          <!--/.card -->
        </div>
        <!--/column -->
        <div class="col-lg-5">
          <h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">
            What Makes Us Different?
          </h2>
          <h3 class="display-4 mb-4 me-lg-n5">
            We make spending stress free so you have the perfect control.
          </h3>
          <p class="mb-6">
            Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper
            nulla non metus auctor fringilla. Morbi leo risus, porta ac
            consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus.
            Integer posuere erat a ante venenatis dapibus posuere velit.
          </p>
          <ul class="icon-list bullet-bg bullet-soft-primary">
            <li v-for="item in features2" :key="item.id">
              <i :class="item.iconClass"></i>{{ item.text }}
            </li>
          </ul>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import CircleProgressbar from "~/components/common/CircleProgressbar.vue";
import Counter from "~/components/common/Counter.vue";

import { features2 } from "~/data/features";
</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 gx-md-8 gx-xl-12 gy-6 align-items-center">
        <div class="col-md-8 col-lg-6 mx-auto">
          <div class="img-mask mask-1">
            <nuxt-img
              :width="610"
              :height="610"
              src="/assets/img/photos/about29.jpg"
              alt=""
            />
          </div>
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <h2 class="display-5 mb-5">
            Hi, I'm Julia, a documentary wedding and couples photographer
            currently working from and based in London.
          </h2>
          <p class="mb-6">
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in,
            egestas eget quam. Praesent commodo cursus magna, vel scelerisque
            nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat
            porttitor ligula, eget lacinia odio. Sed posuere consectetur est at
            lobortis facilisis in.
          </p>
          <div class="row counter-wrapper gy-6">
            <div class="col-md-4">
              <h3 class="counter">
                <CommonCounter :max="500" :min="50" :time="1500" />
                <!-- Component for counting number with intersetion observer from omponents>common>counter -->
                K+
              </h3>
              <p>Shots Taken</p>
            </div>
            <!--/column -->
            <div class="col-md-4">
              <h3 class="counter">
                <CommonCounter :max="500" :min="50" :time="1500" />
                <!-- Component for counting number with intersetion observer from omponents>common>counter -->
                +
              </h3>
              <p>Happy Clients</p>
            </div>
            <!--/column -->
            <div class="col-md-4">
              <h3 class="counter">
                <CommonCounter :max="25" :min="0" :time="1500" />
                <!-- Component for counting number with intersetion observer from omponents>common>counter -->
              </h3>
              <p>Awards Won</p>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
      </div>
      <!-- /.row -->
      <div class="row gx-md-8 gx-xl-12 gy-6 mt-8">
        <div class="col-lg-4">
          <h3>My Skills</h3>
          <p>
            Etiam porta sem malesuada magna mollis euismod. Praesent commodo
            cursus magna vel consectetur purus sit amet fermentum.
          </p>
          <ul class="progress-list">
            <li
              v-for="skill in skills3"
              :key="skill.id"
              :class="{ 'mb-0': skill.id === skills3[skills3.length - 1].id }"
            >
              <p>{{ skill.name }}</p>
              <div class="progressbar line soft-primary">
                <CommonLineProgressbar :max="skill.value" />
                <!-- Component for line progressbar with animation from omponents>common>LineProgressbar -->
              </div>
            </li>
          </ul>
          <!-- /.progress-list -->
        </div>
        <!-- /column -->
        <div class="col-lg-4">
          <h3>Why Choose Me?</h3>
          <p>
            Vestibulum id ligula porta felis euismod semper. Cras mattis
            consectetur purus sit amet fermentum. Donec ullamcorper nulla non
            metus auctor fringilla. Nullam id dolor id nibh ultricies. Cras
            mattis consectetur purus amet fermentum.
          </p>
          <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
            <li v-for="(item, index) in checklistItems" :key="index">
              <i class="uil uil-check"></i>{{ item.text }}
            </li>
          </ul>
        </div>
        <!-- /column -->
        <div class="col-lg-4">
          <h3>My Process</h3>
          <div
            v-for="(item, index) in tasks"
            :key="index"
            class="d-flex flex-row mb-5"
          >
            <div>
              <span
                class="icon btn btn-circle btn-soft-primary pe-none mt-1 me-5"
                ><span class="number fs-18">{{ item.number }}</span></span
              >
            </div>
            <div>
              <h5 class="mb-1">{{ item.title }}</h5>
              <p class="mb-0">{{ item.description }}</p>
            </div>
          </div>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import { skills3 } from "~/data/skils";
import { checklistItems } from "~/data/features";

const tasks = [
  {
    number: 1,
    title: "Collect Ideas",
    description:
      "Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.",
  },
  {
    number: 2,
    title: "Data Analysis",
    description:
      "Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.",
  },
  {
    number: 3,
    title: "Finalize Product",
    description:
      "Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.",
  },
];
</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 gx-md-8 gx-xl-12 gy-6 align-items-center">
        <div class="col-md-8 col-lg-6 order-lg-2 mx-auto">
          <div class="img-mask mask-2">
            <nuxt-img
              src="/assets/img/photos/about30.jpg"
              :width="1000"
              :height="850"
              alt=""
            />
          </div>
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <h2 class="display-5 mb-3">About Me</h2>
          <p class="lead fs-lg">
            I'm Caitlyn Sandbox, a photographer specializing in food, drink and
            product photography.
          </p>
          <p>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
            eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus
            commodo, tortor mauris condimentum nibh, ut fermentum massa justo
            sit amet risus. Etiam porta sem malesuada magna mollis euismod.
            Vestibulum id ligula.
          </p>
          <p>
            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
            vestibulum. Aenean lacinia bibendum nulla sed consectetur. Curabitur
            blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur.
          </p>
          <a href="#" class="btn btn-primary rounded-pill mt-2">Learn More</a>
        </div>
        <!--/column -->
      </div>
      <!-- /.row -->
      <div class="row gx-md-8 gx-xl-12 mt-10 mt-md-13">
        <div class="col-lg-4">
          <h2 class="display-5 mb-3">My Working Process</h2>
          <p>
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor. Fusce dapibus, tellus ac cursus. Aenean eu leo quam.
          </p>
        </div>
        <!-- /column -->
        <div class="col-lg-8">
          <div class="row gy-6 gx-md-8 gx-xl-12">
            <div v-for="(step, index) in steps" :key="index" class="col-md-6">
              <div class="d-flex flex-row">
                <div>
                  <span :class="step.iconClass"
                    ><span class="number fs-18">{{ step.number }}</span></span
                  >
                </div>
                <div>
                  <h4 class="mb-1">{{ step.title }}</h4>
                  <p class="mb-0">{{ step.description }}</p>
                </div>
              </div>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
    
    <!-- /.container -->
  </section>
</template>

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

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

<template>
  <section id="snippet-12" 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-md-11 col-lg-9 col-xl-8 col-xxl-7 mx-auto position-relative"
        >
          <nuxt-img
            :width="85"
            :height="82"
            src="/assets/img/svg/doodle3.svg"
            class="h-11 position-absolute d-none d-lg-block"
            style="top: -20%; right: -12%"
            alt="image"
          />
          <nuxt-img
            width="206"
            height="214"
            src="/assets/img/svg/doodle9.svg"
            class="h-17 position-absolute d-none d-lg-block"
            style="bottom: 5%; left: -17%"
            alt="image"
          />
          <h2 class="fs-16 text-uppercase text-muted mb-3 text-center">
            Why Choose Sandbox?
          </h2>
          <h3 class="display-3 mb-12 text-center">
            Here are a few
            <span class="text-gradient gradient-7">reasons why</span> our
            customers choose the Sandbox app.
          </h3>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="row d-flex align-items-start">
        <div class="col-lg-6 position-lg-sticky" style="top: 8rem">
          <figure>
            <nuxt-img
              src="/assets/img/photos/devices5.png"
              srcset="/assets/img/photos/devices5@2x.png 2x"
              alt="image"
            />
          </figure>
        </div>
        <!-- /column -->
        <div class="col-lg-5 ms-auto">
          <div
            v-for="(feature, index) in features3"
            :key="index"
            class="d-flex flex-row mb-8"
          >
            <div>
              <div :class="feature.svgBgClass">
                <nuxt-img
                  :width="256"
                  :height="256"
                  :src="feature.icon"
                  class="icon-svg solid text-navy"
                  alt=""
                />
              </div>
            </div>
            <div>
              <h4 class="fs-20">{{ feature.title }}</h4>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  
    <!-- /.container -->
  </section>
</template>

<script setup>
import { features3 } from "~/data/features";
</script>

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

<template>
  <section id="snippet-13" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div
        class="row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center mb-10 mb-md-12"
      >
        <div class="col-lg-6">
          <div class="row gx-md-5 gy-5">
            <div class="col-md-6">
              <figure class="rounded">
                <nuxt-img
                  :width="293"
                  :height="260"
                  src="/assets/img/photos/g12.jpg"
                  srcset="/assets/img/photos/g12@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>
            <!--/column -->
            <div class="col-md-6 align-self-end">
              <figure class="rounded">
                <nuxt-img
                  :width="293"
                  :height="235"
                  src="/assets/img/photos/g13.jpg"
                  srcset="/assets/img/photos/g13@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>
            <!--/column -->
            <div class="col-12">
              <figure class="rounded mx-md-5">
                <nuxt-img
                  :width="560"
                  :height="285"
                  src="/assets/img/photos/g11.jpg"
                  srcset="/assets/img/photos/g11@2x.jpg 2x"
                  alt="image"
                />
              </figure>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <h2 class="fs-16 text-uppercase text-primary mb-3">Who Are We?</h2>
          <h3 class="display-3 mb-5">
            Company that believes in the power of creative strategy.
          </h3>
          <p class="mb-6">
            Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in,
            egestas eget quam. Praesent commodo cursus magna, vel scelerisque
            nisl consectetur et. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum
            nulla sed.
          </p>
          <div class="row align-items-center counter-wrapper gy-6">
            <div class="col-md-6">
              <h3 class="counter counter-lg mb-1">
                <counter :min="0" :max="99.7" :time="1500" />%
              </h3>
              <h5 class="mb-0">Customer Satisfaction</h5>
            </div>
            <!--/column -->
            <div class="col-md-6">
              <h3 class="counter counter-lg mb-1">
                <counter :min="0" :max="12" :time="1500" />x
              </h3>
              <h5 class="mb-0">Revenue Growth</h5>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
      <div class="row gx-lg-8 gx-xl-12 gy-6 mb-7 mb-md-9">
        <div v-for="(item, index) in features4" :key="index" class="col-lg-4">
          <div class="d-flex flex-row">
            <div>
              <div :class="item.iconClass">
                <span class="number fs-18">{{ index + 1 }}</span>
              </div>
            </div>
            <div>
              <h3>{{ item.title }}</h3>
              <p class="mb-2">{{ item.description }}</p>
            </div>
          </div>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
      <div class="text-center">
        <a href="#" class="btn btn-primary">More Details</a>
      </div>
    </div>
    <!-- /.container -->
 
    <!-- /.container -->
  </section>
</template>

<script setup>
import { features4 } from "~/data/features";
import Counter from "~/components/common/Counter.vue";
</script>

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

<template>
  <section id="snippet-14" class="wrapper bg-light wrapper-border">
    <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
      <div class="row gx-md-8 gx-xl-12 gy-10 align-items-center mb-16 mb-md-18">
        <div class="col-md-8 col-lg-6 mx-auto">
          <div class="img-mask mask-3 px-xxl-5">
            <nuxt-img
              :width="560"
              :height="525"
              src="/assets/img/avatars/avatar.jpg"
              srcset="/assets/img/avatars/avatar@2x.jpg 2x"
              alt=""
            />
          </div>
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <h2 class="display-2 mb-3">More about me</h2>
          <p class="lead fs-24">
            👋 Hello! I'm Camille, a multidisciplinary product designer 🧸 based
            in New York City 🚕. I’m very passionate about the work 💌 that I
            do.
          </p>
          <p>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
            eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus
            commodo, tortor mauris condimentum nibh ut fermentum massa justo sit
            amet risus.
          </p>
          <p>
            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
            vestibulum. Aenean lacinia bibendum nulla sed consectetur.
          </p>
          <a href="#" class="btn btn-primary btn-icon btn-icon-end mt-2"
            >Learn More <i class="uil uil-arrow-up-right"></i
          ></a>
        </div>
        <!--/column -->
      </div>
      <!-- /.row -->
      <div class="row gx-md-8 gx-xl-12 gy-10">
        <div class="col-lg-5 mx-auto">
          <h2 class="display-2 mb-3">My experiences</h2>
          <p class="lead fs-24 pe-xxl-8">
            I've had the pleasure to work with companies 🏢 across a variety of
            industries 🏛️ I'm always interested in new ✨ and exciting
            adventures 🧨
          </p>
          <a href="#" class="btn btn-primary btn-icon btn-icon-end mt-2"
            >Download Resume <i class="uil uil-arrow-up-right"></i
          ></a>
        </div>
        <!--/column -->
        <div class="col-lg-7">
          <ul class="timeline">
            <li
              v-for="experience in experiences"
              :key="experience.id"
              class="timeline-item"
            >
              <div class="timeline-info meta fs-14">
                {{ experience.duration }}
              </div>
              <div class="timeline-marker"></div>
              <div class="timeline-content">
                <h3 class="timeline-title">{{ experience.title }}</h3>
                <p>{{ experience.description }}</p>
              </div>
            </li>
          </ul>
        </div>
        <!--/column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

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

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