Footer 7

    
 <template>
  <footer class="site-footer">
    <div
      class="footer-top"
      :style="{
        backgroundImage: 'url(/images/background/bg3.png)',
        backgroundSize: 'cover',
      }"
    >
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-5 col-xl-2 col-lg-2 col-sm-6 footer-col-4">
            <div class="widget widget_services border-0">
              <h5 class="footer-title 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-3 col-7 col-xl-2 col-lg-3 col-sm-6 footer-col-4">
            <div class="widget widget_services border-0">
              <h5 class="footer-title 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-xl-4 col-lg-3 col-sm-6 footer-col-4">
            <div class="widget widget_getintuch">
              <h5 class="footer-title 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-12 col-xl-4 col-lg-4 footer-col-4">
            <div class="widget">
              <h5 class="footer-title text-white">
                Subscribe To Our Newsletter
              </h5>
              <p class="text-capitalize m-b20">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry has been the industry's standard dummy text ever since
                the..
              </p>
              <div class="subscribe-form form-white m-b20">
                <form class="dzSubscribe" @submit.prevent="handleSubscribe">
                  <div class="dzSubscribeMsg" />
                  <div class="input-group">
                    <input
                      name="dzEmail"
                      required
                      class="form-control"
                      placeholder="Your Email Id"
                      type="email"
                    />
                    <span class="input-group-btn">
                      <button
                        name="submit"
                        value="Submit"
                        type="submit"
                        class="site-button radius-xl btnhover16"
                      >
                        Subscribe
                      </button>
                    </span>
                  </div>
                </form>
              </div>
              <ul class="list-inline m-a0">
                <li v-for="(link, index) in socialLinks" :key="index">
                  <a
                    :href="link.href"
                    :class="`site-button circle ${link.className}`"
                  >
                    <i :class="link.iconClass" />
                  </a>
                </li>
              </ul>
            </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="/about-2"> About</nuxt-link>
                </li>
                <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, socialLinks } from "@/data/footerLinks";

const currentYear = new Date().getFullYear();

const handleSubscribe = () => {
  // Handle subscription logic here
};
</script>

<style scoped>
/* Add any scoped CSS styles here */
</style>