Footer 3

    
<template>
  <footer class="site-footer text-uppercase bg-white">
    <!-- Social icon -->

    <!-- Social icon End -->
    <div
      class="footer-top"
      :style="{
        backgroundImage: 'url(/images/background/bg3.png)',
        backgroundSize: 'contain',
      }"
    >
      <div class="container saf-footer">
        <div class="row">
          <div class="col-md-6 col-lg-3 col-sm-6 footer-col-4">
            <div class="widget widget_getintuch">
              <h5 class="m-b30 text-white">Contact us</h5>
              <ul>
                <li>
                  <i class="ti-location-pin" />
                  <strong>address</strong> demo address #8901 Marmora Road Chi
                  Minh City, Vietnam
                </li>
                <li>
                  <i class="ti-mobile" />
                  <strong>phone</strong>
                  <a href="tel:+4733378901">0800-123456 </a> (24/7 Support Line)
                </li>
                <li>
                  <i class="ti-email" />
                  <strong>email</strong>
                  <a href="mailto:someone@example.com">info@example.com</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-6 col-lg-3 col-sm-6 col-5 footer-col-4">
            <div class="widget widget_services border-0">
              <h5 class="m-b30 text-white">Company</h5>
              <ul>
                <li
                  v-for="(link, index) in footerLinks2.slice(0, 5)"
                  :key="index"
                >
                  <nuxt-link :to="link.href">{{ link.label }}</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-6 col-lg-3 col-sm-6 col-7 footer-col-4">
            <div class="widget widget_services border-0">
              <h5 class="m-b30 text-white">Useful Link</h5>
              <ul>
                <li
                  v-for="(link, index) in footerLinks2.slice(5, 10)"
                  :key="index"
                >
                  <nuxt-link :to="link.href">{{ link.label }}</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-6 col-lg-3 col-sm-6 footer-col-4">
            <div class="widget widget_gallery gallery-grid-4">
              <h5 class="m-b30 text-white">Gallery</h5>
              <Gallery />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- footer bottom part -->
    <div class="footer-bottom">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-sm-6 text-left">
            <span>
              Copyright ©
              <span class="current-year">{{ currentYear }}</span>
              <a href="https://dexignzone.com/" target="_blank"> DexignZone </a>
              . all rights reserved.
            </span>
          </div>
          <div class="col-md-6 col-sm-6 text-right">
            <div class="widget-link">
              <ul>
                <li>
                  <nuxt-link to="/help-desk">Help Desk</nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/privacy-policy">Privacy Policy</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { footerLinks2 } from "@/data/footerLinks";
import Gallery from "./Gallery.vue";

const currentYear = new Date().getFullYear();
</script>

<style scoped>
/* Add your styles here */
</style>