Blocks - Process

<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 gy-10 gy-sm-13 gx-lg-3 align-items-center">
        <div class="col-md-8 col-lg-6 position-relative">
          <div
            class="shape bg-dot primary rellax w-17 h-21"
            data-rellax-speed="1"
            style="top: -2rem; left: -1.9rem"
          ></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">
            <img
              src="/assets/img/photos/about7.jpg"
              srcset="/assets/img/photos/about7@2x.jpg 2x"
              alt=""
            />
          </figure>
        </div>
        <!--/column -->
        <div class="col-lg-5 col-xl-4 offset-lg-1">
          <h2 class="h1 mb-3">How It Works?</h2>
          <p class="lead fs-lg mb-6">
            So here are three working steps why our valued customers choose us.
          </p>
          <div
            v-for="(item, index) in process1"
            class="d-flex flex-row mb-6"
            :key="index"
          >
            <div>
              <span class="icon btn btn-circle btn-primary pe-none me-5">
                <span class="number fs-18">{{ item.number }}</span>
              </span>
            </div>
            <div>
              <h4 class="mb-1">{{ item.title }}</h4>
              <p class="mb-0">{{ item.description }}</p>
            </div>
          </div>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import { process1 } from "~/data/process";
</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">
      <h2 class="display-4 mb-3">How We Do It?</h2>
      <p class="lead fs-lg mb-8">
        We make your spending <span class="underline">stress-free</span> for you
        to have the perfect control.
      </p>
      <div class="row gx-lg-8 gx-xl-12 gy-6 process-wrapper line">
        <div
          v-for="(item, index) in steps"
          class="col-md-6 col-lg-3"
          :key="index"
        >
          <span
            :class="[
              'icon',
              'btn',
              'btn-circle',
              'btn-lg',
              item.number != 2 ? 'btn-soft-primary' : 'btn-primary',
              'pe-none',
              'mb-4',
            ]"
          >
            <span class="number">{{ item.number }}</span>
          </span>
          <h4 class="mb-1">{{ item.title }}</h4>
          <p class="mb-0">{{ item.description }}</p>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
    
    <!-- /.container -->
  </section>
</template>

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

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

<template>
  <section id="snippet-3" class="wrapper bg-light wrapper-border">
    <div class="container pt-11 pt-lg-13 pb-16 pb-lg-6">
      <div class="row gx-lg-8 gx-xl-10 align-items-center">
        <div class="col-lg-6">
          <figure>
            <img
              src="/assets/img/photos/device.png"
              srcset="/assets/img/photos/device@2x.png 2x"
              alt=""
            />
          </figure>
        </div>
        <!-- /column -->
        <div class="col-lg-6">
          <h2 class="fs-15 text-uppercase text-muted mb-3">How It Works</h2>
          <h3 class="display-4 mb-5">
            Download the app, create your profile and voilà, you're all set!
          </h3>
          <p class="mb-8">
            Donec ullamcorper nulla non metus auctor fringilla. Cras mattis
            consectetur purus sit amet fermentum. Integer posuere erat a ante
            venenatis dapibus posuere velit aliquet. Nulla vitae elit libero.
            Etiam porta sem malesuada magna mollis euismod. Fusce dapibus,
            tellus ac cursus commodo.
          </p>
          <div class="row gy-6 gx-xxl-8 process-wrapper">
            <div v-for="(item, index) in steps2" class="col-md-4" :key="index">
              <img
                :src="item.iconSrc"
                class="icon-svg icon-svg-sm"
                :class="['text-' + item.iconColor, 'mb-3']"
                alt=""
              />
              <h4 class="mb-1">{{ item.title }}</h4>
              <p class="mb-0">{{ item.description }}</p>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import { steps2 } from "~/data/process";
</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 text-center">
        <div class="col-lg-10 mx-auto">
          <div class="position-relative">
            <div
              class="shape bg-dot red rellax w-16 h-18"
              data-rellax-speed="1"
              style="top: 1rem; left: -3.9rem; pointer-events: none"
            ></div>
            <div
              class="shape rounded-circle bg-line primary rellax w-18 h-18"
              data-rellax-speed="1"
              style="bottom: 2rem; right: -3rem; pointer-events: none"
            ></div>
            <div style="width: 100%; position: relative" class="">
              <CommonVideoPlayer
                :options="{
                  autoplay: true,
                  controls: true,
                  sources: [
                    {
                      src: '/assets/media/movie.mp4',
                      type: 'video/mp4',
                    },
                  ],
                }"
              />
              <!-- Component for video player  from omponents>common>Videoplayer -->
            </div>
          </div>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
      <div class="row text-center">
        <div class="col-lg-9 mx-auto">
          <h2 class="fs-15 text-uppercase text-muted mb-3 mt-12">
            Our Process
          </h2>
          <h3 class="display-4 mb-0 text-center px-xl-10 px-xxl-15">
            Find out everything you need to know about creating a business
            process model
          </h3>
          <div class="row gx-lg-8 gx-xl-12 process-wrapper text-center mt-10">
            <div v-for="(item, index) in steps3" class="col-md-4" :key="index">
              <img
                :src="item.iconSrc"
                class="icon-svg icon-svg-md"
                :class="['text-' + item.iconColor, 'mb-3']"
                alt=""
              />
              <h4 class="mb-1">{{ item.title }}</h4>
              <p class="mb-0">{{ item.description }}</p>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import { steps3 } from "~/data/process";
</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 mb-5">
        <div class="col-md-10 col-xl-8 col-xxl-7 mx-auto text-center">
          <img
            src="/assets/img/icons/lineal/list.svg"
            class="icon-svg icon-svg-md mb-4"
            alt=""
          />
          <h2 class="display-4 mb-4 px-lg-14">
            Here are 3 working steps to organize our business projects.
          </h2>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="row gx-md-8 gx-xl-12 gy-10 align-items-center">
        <div class="col-lg-6 order-lg-2">
          <div
            v-for="(item, index) in steps4"
            class="card"
            :class="{
              'me-lg-6': index === 0,
              'ms-lg-13': index === 1,
              'mx-lg-6': index === 2,
              'mt-6': index > 0,
            }"
            :key="index"
          >
            <div class="card-body p-6">
              <div class="d-flex flex-row">
                <div>
                  <span
                    class="icon btn btn-circle btn-lg btn-soft-primary pe-none me-4"
                  >
                    <span class="number">{{ item.number }}</span>
                  </span>
                </div>
                <div>
                  <h4 class="mb-1">{{ item.title }}</h4>
                  <p class="mb-0">{{ item.description }}</p>
                </div>
              </div>
            </div>
          </div>
          <!--/.card -->
        </div>
        <!--/column -->
        <div class="col-lg-6">
          <h2 class="display-6 mb-3">How It Works?</h2>
          <p class="lead fs-lg pe-lg-5">
            Find out everything you need to know and more about how we create
            our business process models.
          </p>
          <p>
            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
            vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam
            id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus
            eget urna mollis ornare.
          </p>
          <p class="mb-6">
            Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id
            ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed
            consectetur. Sed posuere consectetur est at lobortis. Vestibulum id
            ligula porta felis.
          </p>
          <a href="#" class="btn btn-primary rounded-pill mb-0">Learn More</a>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
  
    <!-- /.container -->
  </section>
</template>

<script setup>
import { steps4 } from "~/data/process";
</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>
            <img
              class="w-auto"
              src="/assets/img/illustrations/i3.png"
              srcset="/assets/img/illustrations/i3@2x.png 2x"
              alt=""
            />
          </figure>
        </div>
        <!--/column -->
        <div class="col-lg-5">
          <h2 class="fs-15 text-uppercase text-line text-primary mb-3">
            How It Works?
          </h2>
          <h3 class="display-5 mb-7 pe-xxl-5">
            Everything you need on creating a business process.
          </h3>
          <div
            v-for="(item, index) in steps5"
            :class="`d-flex flex-row ${index != 2 ? 'mb-4' : ''}`"
            :key="index"
          >
            <div>
              <img
                :src="item.iconSrc"
                class="icon-svg icon-svg-sm"
                :class="['text-' + item.iconColor, 'me-4']"
                alt=""
              />
            </div>
            <div>
              <h4 class="mb-1">{{ item.title }}</h4>
              <p class="mb-1">{{ item.description }}</p>
            </div>
          </div>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
    
    <!-- /.container -->
  </section>
</template>

<script setup>
import { steps5 } from "~/data/process";
</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 gx-lg-8 gx-xl-12 gy-10 align-items-center">
        <div class="col-lg-7">
          <figure>
            <img
              class="w-auto"
              src="/assets/img/illustrations/i9.png"
              srcset="/assets/img/illustrations/i9@2x.png 2x"
              alt=""
            />
          </figure>
        </div>
        <!--/column -->
        <div class="col-lg-5">
          <h3 class="fs-16 text-uppercase text-muted mb-3">How It Works?</h3>
          <h3 class="display-4 mb-6">
            Find out everything about creating a business model.
          </h3>
          <div class="row gy-4">
            <div v-for="(item, index) in steps6" class="col-md-6" :key="index">
              <h4>
                <span class="text-primary">{{ item.number }}.</span>
                {{ item.title }}
              </h4>
              <p class="mb-0">{{ item.description }}</p>
            </div>
            <!--/column -->
          </div>
          <!--/.row -->
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup>
import { steps6 } from "~/data/process";
</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 text-center">
        <div class="col-md-10 col-lg-7 mx-auto position-relative">
          <img
            src="/assets/img/svg/doodle5.svg"
            class="w-15 position-absolute d-none d-lg-block"
            data-delay="1800"
            style="bottom: -60%; right: 10%"
            alt=""
          />
          <img
            src="/assets/img/svg/doodle6.svg"
            class="h-15 position-absolute d-none d-lg-block"
            data-delay="1800"
            style="top: -40%; left: -5%"
            alt=""
          />
          <h2 class="fs-16 text-uppercase text-muted mb-3">How It Works</h2>
          <h3 class="display-3 mb-8 px-xl-6">
            Download the app, create your profile and
            <span class="text-gradient gradient-7">voilà</span>, you're all set!
          </h3>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
      <div class="row">
        <div class="col-xxl-11 mx-auto">
          <div class="row gy-10 gy-lg-0 text-center d-flex align-items-center">
            <div class="col-md-6 col-lg-4 mx-auto mb-n10 mb-lg-0">
              <figure class="mx-auto">
                <img
                  src="/assets/img/photos/devices4.png"
                  srcset="/assets/img/photos/devices4@2x.png 2x"
                  alt=""
                />
              </figure>
            </div>
            <!-- /column -->
            <div class="w-100 d-lg-none"></div>
            <div class="col-md-6 col-lg-4 order-lg-first">
              <div class="mb-8">
                <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7"
                  >01</span
                >
                <h4 class="fs-20">Download Application</h4>
                <p class="mb-0 px-xl-7">
                  Nulla vitae elit libero, a pharetra augue. Donec id elit non
                  mi porta gravida at eget metus.
                </p>
              </div>
              <!-- /div -->
              <div>
                <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7"
                  >02</span
                >
                <h4 class="fs-20">Quick Registration</h4>
                <p class="mb-0 px-xl-7">
                  Nulla vitae elit libero, a pharetra augue. Donec id elit non
                  mi porta gravida at eget metus.
                </p>
              </div>
              <!-- /div -->
            </div>
            <!-- /column -->
            <div class="col-md-6 col-lg-4">
              <div class="mb-8">
                <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7"
                  >03</span
                >
                <h4 class="fs-20">Track Your Spending</h4>
                <p class="mb-0 px-xl-7">
                  Nulla vitae elit libero, a pharetra augue. Donec id elit non
                  mi porta gravida at eget metus.
                </p>
              </div>
              <!-- /div -->
              <div>
                <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7"
                  >04</span
                >
                <h4 class="fs-20">Have Total Control</h4>
                <p class="mb-0 px-xl-7">
                  Nulla vitae elit libero, a pharetra augue. Donec id elit non
                  mi porta gravida at eget metus.
                </p>
              </div>
              <!-- /div -->
            </div>
            <!-- /column -->
          </div>
          <!-- /.row -->
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
   
    <!-- /.container -->
  </section>
</template>

<script setup></script>

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