@crm-market/template-shared 1.0.0

package/components/ForgotPassword/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="authentication-area ptb-60">
+    <div class="container">
+      <div class="authentication-content">
+        <div class="row align-items-center">
+          <div class="col-lg-5">
+            <div class="login text-center">
+              <img src="~/assets/images/login.png" alt="login" />
+            </div>
+          </div>
+          <div class="col-lg-7">
+            <div class="authentication-form">
+              <ul class="nav nav-tabs login-tabs" id="myTab" role="tablist">
+                <li class="nav-item" role="presentation">
+                  <NuxtLink to="/forgot-password" class="nav-link active">
+                    Forgot Password
+                  </NuxtLink>
+                </li>
+              </ul>
+              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+              <form>
+                <div class="form-group mb-4">
+                  <label class="label">Email Address</label>
+                  <input
+                    type="email"
+                    class="form-control"
+                    placeholder="Enter Your Email"
+                  />
+                </div>
+                <div class="form-group mb-0">
+                  <button
+                    type="submit"
+                    class="btn btn-warning btn-pill text-white w-100 d-block"
+                  >
+                    Forgot Password
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ForgotPassword",
+};
+</script>

package/components/Layout/BackToUp.vue

@@ -0,0 +1,38 @@
+<template>
+  <button
+    type="button"
+    class="backtotop"
+    :class="[{ active: isTop }]"
+    @click="scrollToTop()"
+  >
+    <i class="ri-upload-line"></i>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "BackToUp",
+  data() {
+    return {
+      isTop: false,
+    };
+  },
+  methods: {
+    scrollToTop() {
+      window.scrollTo(0, 0);
+    },
+  },
+  mounted() {
+    window.addEventListener("scroll", () => {
+      let scrollPos = window.scrollY;
+      if (scrollPos >= 100) {
+        this.isTop = true;
+      } else {
+        this.isTop = false;
+      }
+    });
+  },
+});
+</script>

package/components/Layout/Copyright.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="copyright-area bg-white">
+    <div class="container">
+      <v-row class="align-items-center">
+        <v-col cols="12" lg="6" md="6">
+          <p class="mb-2 mb-md-0 text-center text-md-start">
+            © <span>Tuan.</span> All Rights Reserved by
+            <a href="https://envytheme.com/" target="_blank">EnvyTheme</a>
+          </p>
+        </v-col>
+        <v-col cols="12" lg="6" md="6">
+          <div class="text-center text-md-end">
+            <img src="~/assets/images/payment.svg" alt="payment" />
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Copyright",
+};
+</script>

package/components/Layout/Footer.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="footer-area pb-60 bg-gray1">
+    <div class="container">
+      <div class="border-top pt-60 pb-35">
+        <v-row class="justify-content-center">
+          <v-col cols="12" lg="3" sm="6">
+            <div class="single-footer-widget">
+              <h3>{{ storeName }}</h3>
+              <p v-if="siteConfig?.siteDescription">
+                {{ siteConfig.siteDescription }}
+              </p>
+              <p v-else>
+                Your online store for the best products and deals.
+              </p>
+
+              <div class="call-info" v-if="phone">
+                <span class="title">Got Question? Call us 24/7</span>
+                <div class="d-flex align-items-center">
+                  <i class="flaticon-headphones-1"></i>
+                  <a :href="`tel:${phone}`">{{ phone }}</a>
+                </div>
+              </div>
+              <div class="call-info" v-if="email">
+                <a :href="`mailto:${email}`">{{ email }}</a>
+              </div>
+              <div class="mt-2" v-if="address">
+                <small class="text-muted">{{ address }}</small>
+              </div>
+            </div>
+          </v-col>
+          <v-col cols="12" lg="3" sm="6">
+            <div class="single-footer-widget">
+              <h3>Popular Categories</h3>
+
+              <ul class="ps-0 mb-0 list-unstyled import-link">
+                <li v-for="category in footerCategories" :key="category.id">
+                  <NuxtLink :to="`/products?categoryId=${category.id}`">
+                    {{ category.name }}
+                  </NuxtLink>
+                </li>
+                <li v-if="footerCategories.length === 0">
+                  <NuxtLink to="/products">All Products</NuxtLink>
+                </li>
+              </ul>
+            </div>
+          </v-col>
+          <v-col cols="12" lg="3" sm="6">
+            <div class="single-footer-widget">
+              <h3>Let Us Help You</h3>
+
+              <ul class="ps-0 mb-0 list-unstyled import-link">
+                <li>
+                  <NuxtLink to="/dashboard">Your Account</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/order-history">Your Orders</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/privacy-policy">Privacy Policy</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/faq">Help Center</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/terms-conditions">Terms & Conditions</NuxtLink>
+                </li>
+              </ul>
+            </div>
+          </v-col>
+          <v-col cols="12" lg="3" sm="6">
+            <div class="single-footer-widget">
+              <h3>Get to Know Us</h3>
+
+              <ul class="ps-0 mb-0 list-unstyled import-link">
+                <li>
+                  <NuxtLink to="/about-us">About Us</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/contact">Contact Us</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/categories">Categories</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/products">All Products</NuxtLink>
+                </li>
+              </ul>
+            </div>
+          </v-col>
+        </v-row>
+      </div>
+      <v-row class="align-items-end justify-content-center">
+        <v-col cols="12" lg="3" md="6">
+          <div class="single-footer-bottom-item">
+            <span class="title">Subscribe to the newsletter</span>
+            <form class="subscribe-form position-relative" @submit.prevent>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Enter your email"
+              />
+              <button
+                class="btn btn-warning text-white position-absolute top-50 end-0 translate-middle-y"
+              >
+                Submit Now
+              </button>
+            </form>
+          </div>
+        </v-col>
+        <v-col cols="12" lg="4" md="6">
+          <div class="single-footer-bottom-item" v-if="hasSocialMedia">
+            <ul
+              class="ps-0 mb-0 list-unstyled d-flex align-items-center social-link justify-content-center"
+            >
+              <li>
+                <span class="titles">Follow Us:</span>
+              </li>
+              <li v-if="socialMedia?.facebook">
+                <a :href="socialMedia.facebook" target="_blank">
+                  <i class="ri-facebook-fill"></i>
+                </a>
+              </li>
+              <li v-if="socialMedia?.twitter">
+                <a :href="socialMedia.twitter" target="_blank">
+                  <i class="ri-twitter-x-line"></i>
+                </a>
+              </li>
+              <li v-if="socialMedia?.instagram">
+                <a :href="socialMedia.instagram" target="_blank">
+                  <i class="ri-instagram-line"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </v-col>
+        <v-col cols="12" lg="5" md="6">
+          <div class="single-footer-bottom-item">
+            <p class="text-center text-lg-end mb-0 text-muted">
+              &copy; {{ new Date().getFullYear() }} {{ storeName }}. All rights reserved.
+            </p>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed } from "vue";
+
+export default {
+  name: "Footer",
+  setup() {
+    const { siteConfig, siteName, contactInfo } = useSiteConfig();
+    const { topLevelCategories } = useCategories();
+
+    const storeName = computed(() => siteName.value || 'Our Store');
+    const phone = computed(() => contactInfo.value?.phone);
+    const email = computed(() => contactInfo.value?.email);
+    const address = computed(() => contactInfo.value?.address);
+    const socialMedia = computed(() => contactInfo.value?.socialMedia);
+    const hasSocialMedia = computed(() => {
+      const sm = socialMedia.value;
+      return sm && (sm.facebook || sm.twitter || sm.instagram);
+    });
+
+    const footerCategories = computed(() =>
+      topLevelCategories.value.slice(0, 6)
+    );
+
+    return {
+      siteConfig,
+      storeName,
+      phone,
+      email,
+      address,
+      socialMedia,
+      hasSocialMedia,
+      footerCategories,
+    };
+  },
+};
+</script>

package/components/Layout/FooterTwo.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="footer-area pb-60 bg-gray1">
+    <div class="container">
+      <div class="border-top pt-60 pb-35">
+        <v-row class="justify-content-center">
+          <v-col cols="12" lg="3" sm="6">
+            <div class="single-footer-widget">
+              <h3>About The Shop</h3>
+              <p>
+                We're not just an online store; we're your gateway to a world of
+                cutting-edge electronics and telemobile devices
+              </p>
+
+              <div class="call-info">
+                <span class="title">Got Question? Call us 24/7</span>
+                <div class="d-flex align-items-center">
+                  <i class="flaticon-headphones-1"></i>
+                  <a href="tel:(808)-555-0111">(808) 555-0111</a>
+                </div>
+              </div>
+            </div>
+          </v-col>
+          <v-col cols="12" lg="3" sm="6">
+            <div class="single-footer-widget">
+              <h3>Popular Categories</h3>
+
+              <ul class="ps-0 mb-0 list-unstyled import-link">
+                <li>
+                  <NuxtLink to="/products">Smartphone & Tablets</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/products">Laptop & Desktop</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/products">Headphones</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/products">Smart Watches</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/products">Drone & Camera</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/products">Home Electronics</NuxtLink>
+                </li>
+              </ul>
+            </div>
+          </v-col>
+          <v-col cols="12" lg="3" sm="6">
+            <div class="single-footer-widget">
+              <h3>Let Us Help You</h3>
+
+              <ul class="ps-0 mb-0 list-unstyled import-link">
+                <li>
+                  <NuxtLink to="/dashboard">Your Account</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/order-history">Your Order</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/privacy-policy">Return Policy</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/faq">Help Center</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/products">Product Replacement</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/dashboard">Shop With Points</NuxtLink>
+                </li>
+              </ul>
+            </div>
+          </v-col>
+          <v-col cols="12" lg="3" sm="6">
+            <div class="single-footer-widget">
+              <h3>Get to Know Us</h3>
+
+              <ul class="ps-0 mb-0 list-unstyled import-link">
+                <li>
+                  <NuxtLink to="/about-us">About Us</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/about-us">Careers</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/contact">Store Location</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/our-blog">News Center</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/about-us">Investor Relations</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/contact">Contact Us</NuxtLink>
+                </li>
+              </ul>
+            </div>
+          </v-col>
+        </v-row>
+      </div>
+      <v-row class="align-items-end justify-content-center">
+        <v-col cols="12" lg="6" md="6">
+          <div class="single-footer-bottom-item">
+            <ul
+              class="ps-0 mb-0 list-unstyled d-flex align-items-center social-link ms-0 justify-content-md-start justify-content-center"
+            >
+              <li>
+                <span class="titles">Follow Us:</span>
+              </li>
+              <li>
+                <a href="https://www.facebook.com/" target="_blank">
+                  <i class="ri-facebook-fill"></i>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.twitter.com/" target="_blank">
+                  <i class="ri-twitter-x-line"></i>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.linkedin.com/" target="_blank">
+                  <i class="ri-linkedin-fill"></i>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.whatsapp.com/" target="_blank">
+                  <i class="ri-whatsapp-line"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </v-col>
+        <v-col cols="12" lg="6" md="6">
+          <div class="single-footer-bottom-item">
+            <ul
+              class="ps-0 mb-0 list-unstyled d-flex align-items-center justify-content-center justify-content-lg-end app-link"
+            >
+              <li>
+                <span class="titles">Download App:</span>
+              </li>
+              <li>
+                <a href="https://www.apple.com/store" target="_blank">
+                  <img src="~/assets/images/ios.svg" alt="ios" />
+                </a>
+              </li>
+              <li>
+                <a href="https://play.google.com/store/games" target="_blank">
+                  <img src="~/assets/images/gplay.svg" alt="gplay" />
+                </a>
+              </li>
+            </ul>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FooterTwo",
+};
+</script>

package/components/Layout/LocationOption.vue

@@ -0,0 +1,178 @@
+<template>
+  <div :class="['location-option', { show: stateStoreInstance.open }]">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header border-0 pb-0">
+          <h3 class="modal-title" id="exampleModal2Label">
+            Where to deliver your products?
+          </h3>
+          <button
+            type="button"
+            class="btn-close"
+            @click="stateStoreInstance.onChange"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <form>
+            <div class="form-group mb-4">
+              <label class="label">Search your location</label>
+              <div class="position-relative">
+                <input
+                  type="text"
+                  class="form-control ps-5"
+                  placeholder="Search your location"
+                />
+                <i
+                  class="ri-map-pin-line position-absolute top-50 start-0 translate-middle-y ps-3"
+                ></i>
+              </div>
+            </div>
+            <h6>Select a Location</h6>
+
+            <ul class="ps-0 mb-0 list-unstyled location-list">
+              <li>
+                <div class="form-check ps-0 position-relative mb-0">
+                  <label
+                    class="form-check-label d-block"
+                    for="flexRadioDefault4"
+                  >
+                    <span class="title1">Alberta</span>
+                    <span class="dec">Athabasca T9S</span>
+                  </label>
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault4"
+                    id="flexRadioDefault4"
+                  />
+                </div>
+              </li>
+              <li>
+                <div class="form-check ps-0 position-relative mb-0">
+                  <label
+                    class="form-check-label d-block"
+                    for="flexRadioDefault5"
+                  >
+                    <span class="title1">British Columbia</span>
+                    <span class="dec">Athabasca T9S</span>
+                  </label>
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault5"
+                    id="flexRadioDefault5"
+                  />
+                </div>
+              </li>
+              <li>
+                <div class="form-check ps-0 position-relative mb-0">
+                  <label
+                    class="form-check-label d-block"
+                    for="flexRadioDefault6"
+                  >
+                    <span class="title1">New Brunswick</span>
+                    <span class="dec">Athabasca T9S</span>
+                  </label>
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault6"
+                    id="flexRadioDefault6"
+                  />
+                </div>
+              </li>
+              <li>
+                <div class="form-check ps-0 position-relative mb-0">
+                  <label
+                    class="form-check-label d-block"
+                    for="flexRadioDefault7"
+                  >
+                    <span class="title1">Nova Scotia</span>
+                    <span class="dec">Athabasca T9S</span>
+                  </label>
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault7"
+                    id="flexRadioDefault7"
+                  />
+                </div>
+              </li>
+              <li>
+                <div class="form-check ps-0 position-relative mb-0">
+                  <label
+                    class="form-check-label d-block"
+                    for="flexRadioDefault8"
+                  >
+                    <span class="title1">Ontario</span>
+                    <span class="dec">Athabasca T9S</span>
+                  </label>
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault8"
+                    id="flexRadioDefault8"
+                  />
+                </div>
+              </li>
+              <li>
+                <div class="form-check ps-0 position-relative mb-0">
+                  <label
+                    class="form-check-label d-block"
+                    for="flexRadioDefault9"
+                  >
+                    <span class="title1">Quebec</span>
+                    <span class="dec">Athabasca T9S</span>
+                  </label>
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault9"
+                    id="flexRadioDefault9"
+                  />
+                </div>
+              </li>
+              <li>
+                <div class="form-check ps-0 position-relative mb-0">
+                  <label
+                    class="form-check-label d-block"
+                    for="flexRadioDefault10"
+                  >
+                    <span class="title1">Yukon</span>
+                    <span class="dec">Athabasca T9S</span>
+                  </label>
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="flexRadioDefault10"
+                    id="flexRadioDefault10"
+                  />
+                </div>
+              </li>
+            </ul>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import stateStore from "~/utils/store";
+
+export default defineComponent({
+  name: "MobileDeviceNavbar",
+  setup() {
+    const stateStoreInstance = stateStore;
+    const handleClick = () => {
+      stateStoreInstance.open = false;
+    };
+
+    return {
+      stateStoreInstance,
+      handleClick,
+    };
+  },
+});
+</script>