@crm-market/template-shared 1.0.0

package/components/Categories/index.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="blog-area ptb-60">
+    <div class="container">
+      <v-row class="justify-content-center">
+        <v-col cols="12" lg="8">
+          <v-row>
+            <v-col cols="12" lg="12" md="6">
+              <div class="single-blog-item">
+                <NuxtLink to="/blog-details" class="blog-img">
+                  <img src="~/assets/images/blog-1.jpg" alt="blog" />
+                </NuxtLink>
+
+                <ul class="ps-0 list-unstyled d-flex gap-4 info flex-wrap">
+                  <li>
+                    By: <a href="#" class="text-decoration-none">Admin</a>
+                  </li>
+                  <li>
+                    <i class="ri-calendar-2-line text-warning"></i>
+                    25 December 2024
+                  </li>
+                  <li>
+                    <i class="ri-question-answer-line text-warning"></i>
+                    <NuxtLink to="/blog-details" class="text-decoration-none">
+                      03 Comments
+                    </NuxtLink>
+                  </li>
+                </ul>
+
+                <h2>
+                  <NuxtLink to="/blog-details">
+                    The Future of Tech: A Sneak Peek into Innovation
+                  </NuxtLink>
+                </h2>
+                <p>
+                  Express the excitement of looking ahead and exploring the
+                  innovations that will shape the future. Highlight real-world
+                  applications and potential impacts on various industries
+                </p>
+                <NuxtLink to="/blog-details" class="read-more">
+                  <span>Read More</span>
+                  <i class="ri-arrow-right-up-line"></i>
+                </NuxtLink>
+              </div>
+            </v-col>
+            <v-col cols="12" lg="12" md="6">
+              <div class="single-blog-item">
+                <NuxtLink to="/blog-details" class="blog-img">
+                  <img src="~/assets/images/blog-2.jpg" alt="blog" />
+                </NuxtLink>
+
+                <ul class="ps-0 list-unstyled d-flex gap-4 info flex-wrap">
+                  <li>
+                    By: <a href="#" class="text-decoration-none">Admin</a>
+                  </li>
+                  <li>
+                    <i class="ri-calendar-2-line text-warning"></i>
+                    25 December 2024
+                  </li>
+                  <li>
+                    <i class="ri-question-answer-line text-warning"></i>
+                    <NuxtLink to="/blog-details" class="text-decoration-none">
+                      03 Comments
+                    </NuxtLink>
+                  </li>
+                </ul>
+
+                <h2>
+                  <NuxtLink to="/blog-details">
+                    The Future of Tech: A Sneak Peek into Innovation
+                  </NuxtLink>
+                </h2>
+                <p>
+                  Express the excitement of looking ahead and exploring the
+                  innovations that will shape the future. Highlight real-world
+                  applications and potential impacts on various industries
+                </p>
+                <NuxtLink to="/blog-details" class="read-more">
+                  <span>Read More</span>
+                  <i class="ri-arrow-right-up-line"></i>
+                </NuxtLink>
+              </div>
+            </v-col>
+            <v-col cols="12" lg="12" md="6">
+              <div class="single-blog-item">
+                <NuxtLink to="/blog-details" class="blog-img">
+                  <img src="~/assets/images/blog-3.jpg" alt="blog" />
+                </NuxtLink>
+
+                <ul class="ps-0 list-unstyled d-flex gap-4 info flex-wrap">
+                  <li>
+                    By: <a href="#" class="text-decoration-none">Admin</a>
+                  </li>
+                  <li>
+                    <i class="ri-calendar-2-line text-warning"></i>
+                    25 December 2024
+                  </li>
+                  <li>
+                    <i class="ri-question-answer-line text-warning"></i>
+                    <NuxtLink to="/blog-details" class="text-decoration-none">
+                      03 Comments
+                    </NuxtLink>
+                  </li>
+                </ul>
+
+                <h2>
+                  <NuxtLink to="/blog-details">
+                    The Future of Tech: A Sneak Peek into Innovation
+                  </NuxtLink>
+                </h2>
+                <p>
+                  Express the excitement of looking ahead and exploring the
+                  innovations that will shape the future. Highlight real-world
+                  applications and potential impacts on various industries
+                </p>
+                <NuxtLink to="/blog-details" class="read-more">
+                  <span>Read More</span>
+                  <i class="ri-arrow-right-up-line"></i>
+                </NuxtLink>
+              </div>
+            </v-col>
+            <v-col cols="12" lg="12" md="6">
+              <div class="single-blog-item">
+                <NuxtLink to="/blog-details" class="blog-img">
+                  <img src="~/assets/images/blog-4.jpg" alt="blog" />
+                </NuxtLink>
+
+                <ul class="ps-0 list-unstyled d-flex gap-4 info flex-wrap">
+                  <li>
+                    By: <a href="#" class="text-decoration-none">Admin</a>
+                  </li>
+                  <li>
+                    <i class="ri-calendar-2-line text-warning"></i>
+                    25 December 2024
+                  </li>
+                  <li>
+                    <i class="ri-question-answer-line text-warning"></i>
+                    <NuxtLink to="/blog-details" class="text-decoration-none">
+                      03 Comments
+                    </NuxtLink>
+                  </li>
+                </ul>
+
+                <h2>
+                  <NuxtLink to="/blog-details">
+                    The Future of Tech: A Sneak Peek into Innovation
+                  </NuxtLink>
+                </h2>
+                <p>
+                  Express the excitement of looking ahead and exploring the
+                  innovations that will shape the future. Highlight real-world
+                  applications and potential impacts on various industries
+                </p>
+                <NuxtLink to="/blog-details" class="read-more">
+                  <span>Read More</span>
+                  <i class="ri-arrow-right-up-line"></i>
+                </NuxtLink>
+              </div>
+            </v-col>
+            <v-col cols="12" lg="12">
+              <div class="pagination-area">
+                <a href="#" class="next page-numbers">
+                  <i class="ri-arrow-left-s-line"></i>
+                </a>
+
+                <span class="page-numbers current" aria-current="page">1</span>
+                <a href="#" class="page-numbers">2</a>
+                <a href="#" class="page-numbers">3</a>
+
+                <a href="#" class="next page-numbers">
+                  <i class="ri-arrow-right-s-line"></i>
+                </a>
+              </div>
+            </v-col>
+          </v-row>
+        </v-col>
+        <v-col cols="12" lg="4" class="mt-4 mt-lg-0">
+          <div class="sidebar ms-78">
+            <div class="single-sidebar-widget">
+              <h3>Search</h3>
+              <form class="search-form position-relative">
+                <input
+                  type="text"
+                  class="form-control"
+                  placeholder="Search here"
+                />
+                <button
+                  type="submit"
+                  class="position-absolute top-50 end-0 translate-middle-y p-0 bg-transparent border-0 text-warning pe-3"
+                >
+                  <i class="ri-search-line"></i>
+                </button>
+              </form>
+            </div>
+            <div class="single-sidebar-widget">
+              <h3>Popular Posts</h3>
+
+              <div class="d-flex align-items-center popular-item">
+                <div class="flex-shrink-0">
+                  <NuxtLink to="/blog-details" class="d-block">
+                    <img src="~/assets/images/blog-5.jpg" alt="blog" />
+                  </NuxtLink>
+                </div>
+                <div class="flex-grow-1 ms-3">
+                  <h6>
+                    <NuxtLink to="/blog-details">
+                      The Art of Tech Gifting: Finding the Perfect Present
+                    </NuxtLink>
+                  </h6>
+                  <div class="d-flex align-items-center">
+                    <i class="ri-calendar-2-line"></i>
+                    <span>25 December 2024</span>
+                  </div>
+                </div>
+              </div>
+              <div class="d-flex align-items-center popular-item">
+                <div class="flex-shrink-0">
+                  <NuxtLink to="/blog-details" class="d-block">
+                    <img src="~/assets/images/blog-6.jpg" alt="blog" />
+                  </NuxtLink>
+                </div>
+                <div class="flex-grow-1 ms-3">
+                  <h6>
+                    <NuxtLink to="/blog-details">
+                      Mastering the Art of Wearables: A Comprehensive Guide
+                    </NuxtLink>
+                  </h6>
+                  <div class="d-flex align-items-center">
+                    <i class="ri-calendar-2-line"></i>
+                    <span>27 December 2024</span>
+                  </div>
+                </div>
+              </div>
+              <div class="d-flex align-items-center popular-item">
+                <div class="flex-shrink-0">
+                  <NuxtLink to="/blog-details" class="d-block">
+                    <img src="~/assets/images/blog-7.jpg" alt="blog" />
+                  </NuxtLink>
+                </div>
+                <div class="flex-grow-1 ms-3">
+                  <h6>
+                    <NuxtLink to="/blog-details">
+                      Tech Trends 2023: What's Shaping the Digital Landscape?
+                    </NuxtLink>
+                  </h6>
+                  <div class="d-flex align-items-center">
+                    <i class="ri-calendar-2-line"></i>
+                    <span>28 December 2024</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="single-sidebar-widget">
+              <h3>Categories</h3>
+
+              <ul class="ps-0 mb-0 list-unstyled categories">
+                <li>
+                  <NuxtLink to="/categories">Smartphone</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/categories">Laptop</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/categories">Headphone</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/categories">Smart Watch</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/categories">iPad</NuxtLink>
+                </li>
+              </ul>
+            </div>
+            <div class="single-sidebar-widget">
+              <h3>Tags</h3>
+
+              <ul class="ps-0 mb-0 list-unstyled tags">
+                <li>
+                  <NuxtLink to="/tags">Smartphone</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/tags">Laptop</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/tags">AirPod</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/tags">Tablet</NuxtLink>
+                </li>
+                <li>
+                  <NuxtLink to="/tags">Headphone</NuxtLink>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tags",
+};
+</script>

package/components/ChangePassword/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="authentication-area ptb-60">
+    <div class="container">
+      <div class="authentication-content">
+        <div class="row">
+          <div class="col-lg-5">
+            <div class="login h-100 text-center">
+              <img
+                src="~/assets/images/login.png"
+                class="h-100 object-fit-cover"
+                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="/change-password" class="nav-link active">
+                    Change Password
+                  </NuxtLink>
+                </li>
+              </ul>
+              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
+              <form>
+                <div class="form-group mb-4">
+                  <label class="label">Old Password *</label>
+                  <input
+                    type="password"
+                    class="form-control"
+                    placeholder="Enter your  password"
+                  />
+                </div>
+                <div class="form-group mb-4">
+                  <label class="label">New Password *</label>
+                  <input
+                    type="password"
+                    class="form-control"
+                    placeholder="Enter your  password"
+                  />
+                </div>
+                <div class="form-group mb-4">
+                  <label class="label">Confirm Password *</label>
+                  <input
+                    type="password"
+                    class="form-control"
+                    placeholder="Enter your  password"
+                  />
+                </div>
+                <div class="form-group mb-0">
+                  <button
+                    type="submit"
+                    class="btn btn-warning btn-pill text-white w-100 d-block"
+                  >
+                    Save Password
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChangePassword",
+};
+</script>

package/components/Checkout/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="ptb-60">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-5">
+          <div class="checkout-content">
+            <h3>Billing Details</h3>
+            <div class="form-group mb-4">
+              <label class="label">First Name</label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="First Name"
+              />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Last Name</label>
+              <input type="text" class="form-control" placeholder="Last Name" />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Email Address</label>
+              <input
+                type="email"
+                class="form-control"
+                placeholder="Email Address"
+              />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Company Name</label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Company Name (Optional)"
+              />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Country/Region</label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Company Name (Optional)"
+              />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Finding Source</label>
+              <select
+                class="form-select form-control"
+                aria-label="Default select example"
+              >
+                <option selected>Canada</option>
+                <option value="1">United States</option>
+                <option value="2">United Kingdom</option>
+              </select>
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Street Address</label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Address line 1"
+              />
+            </div>
+            <div class="form-group mb-4">
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Address line 2"
+              />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Town/City</label>
+              <input type="text" class="form-control" placeholder="Town/City" />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Postal Code</label>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Postal Code"
+              />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Phone</label>
+              <input type="text" class="form-control" placeholder="Phone" />
+            </div>
+            <div class="form-group mb-4">
+              <label class="label">Additional Info</label>
+              <textarea
+                class="form-control"
+                placeholder="Notes (Optional)"
+                cols="30"
+                rows="5"
+              ></textarea>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-7">
+          <div class="your-order">
+            <h3>Your Order</h3>
+
+            <div class="your-order-form table-responsive bg-fffbf5">
+              <table class="table table-bordered">
+                <thead>
+                  <tr>
+                    <th scope="col">Product</th>
+                    <th scope="col">Quantity</th>
+                    <th scope="col">Subtotal</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="title">
+                      <span class="text-truncate">
+                        Multiplatform Wireless Noise-Cancelling Gaming Headset
+                      </span>
+                    </td>
+                    <td class="price">$79 <sub class="text-body">x1</sub></td>
+                    <td class="price">$79</td>
+                  </tr>
+                  <tr>
+                    <td class="title">
+                      <span class="text-truncate">
+                        GPS Smartwatch with Bright Touchscreen Display
+                      </span>
+                    </td>
+                    <td class="price">$59 <sub class="text-body">x2</sub></td>
+                    <td class="price">$119</td>
+                  </tr>
+                  <tr>
+                    <td class="title">
+                      <span class="text-truncate">
+                        SAMSUNG 32-Inch Class QLED 4K Q60C Series Quantum HDR
+                      </span>
+                    </td>
+                    <td class="price">$398 <sub class="text-body">x1</sub></td>
+                    <td class="price">$398</td>
+                  </tr>
+                  <tr>
+                    <td class="sub-title">Subtotal</td>
+                    <td class="sub-price"></td>
+                    <td class="sub-price">$595</td>
+                  </tr>
+                  <tr class="total">
+                    <td class="sub-title">Total</td>
+                    <td class="sub-price"></td>
+                    <td class="sub-price">$595</td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <h3>Payment Option</h3>
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  value=""
+                  id="flexCheckDefault"
+                />
+                <label class="form-check-label" for="flexCheckDefault">
+                  Card Payment
+                </label>
+              </div>
+              <div class="form-check mb-0">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  value=""
+                  id="flexCheckChecked"
+                  checked
+                />
+                <label class="form-check-label" for="flexCheckChecked">
+                  Cash on Delivery
+                </label>
+              </div>
+
+              <div class="mt-5">
+                <button class="btn btn-warning text-white">Place Order</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Checkout",
+};
+</script>

package/components/Common/DashboardNavigation.vue

@@ -0,0 +1,37 @@
+<template>
+  <ul class="dashboard-navigation">
+    <li>
+      <h3>Navigation</h3>
+    </li>
+    <li>
+      <NuxtLink to="/dashboard">Dashboard</NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/edit-profile">Edit Profile</NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/edit-address">Edit Address</NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/order-history">Order History</NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/order-details">Order Details</NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/address">Address</NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/password">Password</NuxtLink>
+    </li>
+    <li>
+      <NuxtLink to="/my-account">Log Out</NuxtLink>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "DashboardNavigation",
+};
+</script>

package/components/Common/PageBanner.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="page-banner bg-gray4 py-3">
+    <div class="container">
+      <div class="d-flex justify-content-between align-items-center">
+        <ul class="d-flex align-content-center list-unstyled mb-0 page-content">
+          <li>
+            <NuxtLink to="/" class="text-decoration-none">Home</NuxtLink>
+          </li>
+          <li>
+            <span>{{ pageTitle }}</span>
+          </li>
+        </ul>
+        <div class="d-flex align-items-center">
+          <i class="ri-arrow-left-s-line"></i>
+          <i class="ri-layout-grid-line"></i>
+          <i class="ri-arrow-right-s-line"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PageBanner",
+  props: ["pageTitle"],
+};
+</script>