purityselect/resources/js/views/pages/home/Footer.vue

<script setup>
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
onBeforeMount(() => initialize());

const date = ref()
const initialize = () => {
  date.value = new Date().getFullYear();
}
const gotoTermsCondition = () => {
  router.push('/terms-and-conditions');
};
const gotoPrivacyPolicy = () => {
  router.push('/privacy-policy');
};
const gotoRefundPolicy = () => {
  router.push('/refund-policy');
};
</script>
<template>
  <footer id="site-footer" class="site-footer" role="contentinfo">
    <div class="footer-container">
      <div class="footer-grid">
        <div class="footer-grid-column logo-footer">
          <!-- <a href="https://welltrustmedical.com"><img
              src="https://static.maleexcel.com/wp-content/uploads/2023/11/01100300/logo-welltrust.svg"
              class="logo-footer-main" width="229" height="57" alt="Welltrust small white logo" /></a> -->
          <!-- <div class="footer-minilogos">
            <a href="https://maleexcel.com"><img
                src="https://static.maleexcel.com/wp-content/uploads/2023/11/01100259/logo-male-excel.svg"
                class="minilogo-footer" width="67" height="9" alt="Maleexcel small white logo" /></a>
            <a href="https://femexcelle.com"><img
                src="https://static.maleexcel.com/wp-content/uploads/2023/11/01100301/logo-femexcelle.svg"
                class="minilogo-footer" width="67" height="9" alt="Femexcelle small white logo" /></a>
            <a href="https://aemalabs.com"><img
                src="https://static.maleexcel.com/wp-content/uploads/2023/11/01100302/logo-aema-labs.svg"
                class="minilogo-footer" width="67" height="9" alt="AEMA Labs small white logo" /></a>
          </div> -->

          <div class="social-footer">
            <h6 class="text-white">Follow Us</h6>
            <div class="icons">
              <div class="icon"><a href="#" target="_blank"><img
                    src="https://maleexcel.com/wp-content/uploads/2023/02/facebook.svg" width="25" height="25"
                    alt="FaceBook logo" /></a></div>
              <div class="icon"><a href="#" target="_blank"><img
                    src="https://static.maleexcel.com/wp-content/uploads/sites/9/2022/04/22082708/twitter-new.svg"
                    width="25" height="25" alt="Twitter logo" /></a></div>
              <div class="icon"><a href="#" target="_blank"><img
                    src="https://static.maleexcel.com/wp-content/uploads/2023/11/01081416/icon-instagram.svg" width="25"
                    height="25" alt="Instagram logo" /></a></div>
              <div class="icon"><a href="#" target="_blank"><img
                    src="https://maleexcel.com/wp-content/uploads/2023/02/linkedin.svg" width="25" height="25"
                    alt="LinkedIn logo" /></a></div>
            </div>
          </div>

        </div>
        <div class="footer-grid-column contact-footer">
          <div>
            <h4>Contact Us</h4>
            <p>Mon–Sun: 8am–8pm EST</p>
            <!-- <span>Message and data rates may apply</span> -->
          </div>
          <div class="contact-icons">
            <img src="https://static.maleexcel.com/wp-content/uploads/2023/09/08114531/contact-icon1.svg" width="23"
              height="23" alt="Phone icon" />
            <a href="tel:+1 (789) 450-0010<">(789) 450-0010</a>
          </div>
          <div class="contact-icons">
            <img src="https://static.maleexcel.com/wp-content/uploads/2023/09/08114533/contact-icon2.svg" width="23"
              height="23" alt="SMS icon" />
            <a href="sms:+1 (456) 658-2045">(456) 658-2045</a>
          </div>
          <div class="contact-icons mb-3">
            <img src="https://static.maleexcel.com/wp-content/uploads/2023/09/08114534/contact-icon3.svg" width="23"
              height="23" alt="Email icon" />
            <a href="mailto:support@purityselect.com">support@purityselect.com</a>
          </div>
        </div>

        <!-- <div class="footer-grid-column contact-footer">
          <div>
            <h4>Treatments</h4>

          
          </div>
          <div class="contact-icons">
            <a href="#">Testosterone Replacement</a>
          </div>
          <div class="contact-icons">
            <a href="#">Thyroid Therapy</a>
          </div>
          <div class="contact-icons">
            <a href="#">Testosterone Test Kit</a>
          </div>
          <div class="contact-icons">
            <a href="#">Testosterone Treatment Pricing</a>
          </div>
        </div> -->

        <div class="footer-grid-column contact-footer">
          <div>
            <h4>Learn More</h4>

            <!-- <span>Message and data rates may apply</span> -->
          </div>
          <div class="contact-icons">
            <a href="#">Contact Us</a>
          </div>
          <div class="contact-icons">
            <a type="button" @click="gotoTermsCondition()">Terms & Conditions</a>
          </div>
          <div class="contact-icons">
            <a type="button" @click="gotoPrivacyPolicy()">Privacy Policy</a>
          </div>
          <div class="contact-icons">
            <a type="button" @click="gotoRefundPolicy()">Refund Policy</a>
          </div>
        </div>

      </div>
      <div class="col-lg-7 copyright-footer mt-5">
        <p> &copy; Copyright {{ new Date().getFullYear() }}, PuritySelect. All Rights Reserved.</p>
      </div>
    </div>
  </footer>
</template>
<style>
@import "@vendor/css/pages/footer.css";
@import "@vendor/css/pages/theme.css";

.menu-footer-1-new-container {
  text-align: left;
  /* Align the menu items to the left */
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  margin-bottom: 10px;
  /* Adjust the spacing between each list item as needed */
}

.menu-item a {
  text-decoration: none;
  /* Remove underlines from links */
  color: #333;
  /* Set the color of the links */
  font-weight: bold;
  /* Make the text bold */
  display: block;
  /* Make the links fill the entire width of the container */
  padding: 5px 0;
  /* Add some padding to the links for better readability */
  transition: color 0.3s ease;
  /* Add a smooth color transition on hover */
}
</style>