Footer 9

    
<template>
  <footer class="site-footer">
    <div
      class="footer-top overlay-black-dark"
      :style="{ backgroundImage: 'url(/images/background/bg17.jpg)' }"
    >
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-xl-5 col-lg-4 col-sm-8 footer-col-4">
            <div class="widget">
              <h5 class="m-b30 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 @submit.prevent="handleSubmit">
                  <div class="dzSubscribeMsg" />
                  <div class="input-group">
                    <input
                      name="dzEmail"
                      required
                      type="email"
                      class="form-control"
                      placeholder="Your Email"
                    />
                    <span class="input-group-btn">
                      <button
                        name="submit"
                        value="Submit"
                        type="submit"
                        class="site-button radius-xl"
                      >
                        Subscribe
                      </button>
                    </span>
                  </div>
                </form>
              </div>
              <ul class="list-inline m-a0">
                <li v-for="(elm, i) in socialLinks.slice(0, 4)" :key="i">
                  <a href="#" :class="`site-button ${elm.className} circle`">
                    <i :class="elm.iconClass" />
                  </a>
                </li>
                <li>
                  <a href="#" class="site-button twitter circle">
                    <i class="fab fa-twitter"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-5 col-xl-2 col-lg-2 col-sm-4 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-3 col-7 col-xl-2 col-lg-3 col-sm-6 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-xl-3 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>
      </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">{{ new Date().getFullYear() }}</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";

function handleSubmit(e) {
  e.preventDefault();
  // Handle form submission logic here
}
</script>

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