From ec909ae84337906d0948c610e5e96172fb20b33b Mon Sep 17 00:00:00 2001
From: Maisam Afshar <maisam.afshar@gmail.com>
Date: Thu, 18 Aug 2022 11:11:18 +0430
Subject: [PATCH] remove unused components

---
 .../backgroundCards/ColoredBackgroundCard.vue |  64 ---------
 .../backgroundCards/DefaultBackgroundCard.vue |  50 -------
 .../backgroundCards/InfoBackgroundCard.vue    |  45 -------
 .../backgroundCards/SimpleBackgroundCard.vue  |  36 -----
 .../cards/blogCards/DefaultBlogCard.vue       |  74 -----------
 .../cards/blogCards/RaisedBlogCard.vue        |  54 --------
 .../cards/blogCards/SimpleBlogCard.vue        |  54 --------
 .../cards/bookingCards/SimpleBookingCard.vue  |  57 --------
 .../cards/infoCards/SimpleInfoCard.vue        |  64 ---------
 .../cards/pricingCards/DefaultPricingCard.vue |  89 -------------
 .../cards/pricingCards/MiniPricingCard.vue    |  64 ---------
 .../pricingCards/SimpleInfoPricingCard.vue    |  95 -------------
 .../cards/pricingCards/SimplePricingCard.vue  |  92 -------------
 .../cards/reviewCards/ComplexReviewCard.vue   |  77 -----------
 .../cards/reviewCards/MiniReviewCard.vue      | 125 ------------------
 .../cards/reviewCards/SimpleReviewCard.vue    |  63 ---------
 .../cards/teamCards/TransparentTeamCard.vue   |  57 --------
 src/examples/footers/FooterDetailed.vue       |  81 ------------
 src/examples/footers/SimpleFooter.vue         |  61 ---------
 19 files changed, 1302 deletions(-)
 delete mode 100644 src/examples/cards/backgroundCards/ColoredBackgroundCard.vue
 delete mode 100644 src/examples/cards/backgroundCards/DefaultBackgroundCard.vue
 delete mode 100644 src/examples/cards/backgroundCards/InfoBackgroundCard.vue
 delete mode 100644 src/examples/cards/backgroundCards/SimpleBackgroundCard.vue
 delete mode 100644 src/examples/cards/blogCards/DefaultBlogCard.vue
 delete mode 100644 src/examples/cards/blogCards/RaisedBlogCard.vue
 delete mode 100644 src/examples/cards/blogCards/SimpleBlogCard.vue
 delete mode 100644 src/examples/cards/bookingCards/SimpleBookingCard.vue
 delete mode 100644 src/examples/cards/infoCards/SimpleInfoCard.vue
 delete mode 100644 src/examples/cards/pricingCards/DefaultPricingCard.vue
 delete mode 100644 src/examples/cards/pricingCards/MiniPricingCard.vue
 delete mode 100644 src/examples/cards/pricingCards/SimpleInfoPricingCard.vue
 delete mode 100644 src/examples/cards/pricingCards/SimplePricingCard.vue
 delete mode 100644 src/examples/cards/reviewCards/ComplexReviewCard.vue
 delete mode 100644 src/examples/cards/reviewCards/MiniReviewCard.vue
 delete mode 100644 src/examples/cards/reviewCards/SimpleReviewCard.vue
 delete mode 100644 src/examples/cards/teamCards/TransparentTeamCard.vue
 delete mode 100644 src/examples/footers/FooterDetailed.vue
 delete mode 100644 src/examples/footers/SimpleFooter.vue

diff --git a/src/examples/cards/backgroundCards/ColoredBackgroundCard.vue b/src/examples/cards/backgroundCards/ColoredBackgroundCard.vue
deleted file mode 100644
index 99ed23e..0000000
--- a/src/examples/cards/backgroundCards/ColoredBackgroundCard.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup>
-//Vue Material Kit 2 Pro components
-import MaterialButton from "@/components/MaterialButton.vue";
-defineProps({
-  color: {
-    type: String,
-    default: "success",
-  },
-  image: {
-    type: String,
-    default: "",
-  },
-  label: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  action: {
-    type: Object,
-    color: String,
-    variant: String,
-    label: String,
-    default: () => ({
-      variant: "contained",
-      color: "white",
-      label: "Read more",
-    }),
-  },
-});
-</script>
-<template>
-  <div class="card card-background align-items-start h-100">
-    <div
-      class="full-background"
-      :style="{ backgroundImage: `url(${image})` }"
-    ></div>
-    <div class="card-body text-center z-index-3">
-      <p class="text-uppercase font-weight-bold opacity-8 text-xs mt-7">
-        {{ label }}
-      </p>
-      <h4 class="text-white mb-1">{{ title }}</h4>
-      <p class="text-white opacity-8">
-        {{ description }}
-      </p>
-      <MaterialButton
-        :variant="action.variant"
-        :color="action.color"
-        size="sm"
-        >{{ action.label }}</MaterialButton
-      >
-    </div>
-    <span
-      class="mask border-radius-xl z-index-2 opacity-7"
-      :class="`bg-gradient-${color}`"
-    ></span>
-  </div>
-</template>
diff --git a/src/examples/cards/backgroundCards/DefaultBackgroundCard.vue b/src/examples/cards/backgroundCards/DefaultBackgroundCard.vue
deleted file mode 100644
index 6dcd61b..0000000
--- a/src/examples/cards/backgroundCards/DefaultBackgroundCard.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup>
-defineProps({
-  image: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  button: {
-    type: Object,
-    label: String,
-    color: String,
-    default: () => ({
-      label: "Get started",
-      color: "btn-white",
-    }),
-  },
-});
-</script>
-<template>
-  <div class="cursor-pointer">
-    <div class="card card-background">
-      <div
-        class="full-background"
-        :style="{ backgroundImage: `url(${image})` }"
-        loading="lazy"
-      ></div>
-      <div class="card-body pt-7 text-center">
-        <p class="text-white text-uppercase">{{ label }}</p>
-        <h3 class="text-white mb-0">{{ title }}</h3>
-        <p class="text-white opacity-8">
-          {{ description }}
-        </p>
-        <button type="button" class="btn btn-sm mt-3" :class="button.color">
-          {{ button.label }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/backgroundCards/InfoBackgroundCard.vue b/src/examples/cards/backgroundCards/InfoBackgroundCard.vue
deleted file mode 100644
index a1d4098..0000000
--- a/src/examples/cards/backgroundCards/InfoBackgroundCard.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup>
-defineProps({
-  color: {
-    type: String,
-    default: "dark",
-  },
-  image: {
-    type: String,
-    required: true,
-  },
-  icon: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-<template>
-  <div class="card h-100 card-background align-items-start">
-    <div
-      class="full-background"
-      :style="{ backgroundImage: `url(${image})` }"
-    ></div>
-    <div class="card-body z-index-3">
-      <i class="material-icons text-white text-3xl">{{ icon }}</i>
-    </div>
-    <div class="card-footer pb-3 pt-2 z-index-3">
-      <h4 class="text-white mb-1 cursor-pointer">{{ title }}</h4>
-      <p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">
-        {{ label }}
-      </p>
-    </div>
-    <span
-      class="mask border-radius-xl z-index-2 opacity-6"
-      :class="`bg-gradient-${color}`"
-    ></span>
-  </div>
-</template>
diff --git a/src/examples/cards/backgroundCards/SimpleBackgroundCard.vue b/src/examples/cards/backgroundCards/SimpleBackgroundCard.vue
deleted file mode 100644
index be57fa6..0000000
--- a/src/examples/cards/backgroundCards/SimpleBackgroundCard.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-defineProps({
-  image: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  route: {
-    type: String,
-    default: "javascript:;",
-  },
-});
-</script>
-<template>
-  <a :href="route">
-    <div class="card card-background">
-      <div
-        class="full-background"
-        :style="{ backgroundImage: `url(${image})` }"
-      ></div>
-      <div class="card-body pt-12">
-        <h4 class="text-white">{{ title }}</h4>
-        <p class="text-white">
-          {{ description }}
-        </p>
-      </div>
-    </div>
-  </a>
-</template>
diff --git a/src/examples/cards/blogCards/DefaultBlogCard.vue b/src/examples/cards/blogCards/DefaultBlogCard.vue
deleted file mode 100644
index 45e9513..0000000
--- a/src/examples/cards/blogCards/DefaultBlogCard.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup>
-defineProps({
-  image: {
-    type: String,
-    require: true,
-  },
-  category: {
-    type: Object,
-    required: true,
-    color: String,
-    label: String,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  author: {
-    type: Object,
-    require: true,
-    image: String,
-    name: String,
-    date: String,
-  },
-  route: {
-    type: String,
-    default: "javascript:;",
-  },
-});
-</script>
-<template>
-  <div class="card">
-    <div class="card-header p-0 mx-3 mt-n4 position-relative z-index-1">
-      <a :href="route" class="d-block blur-shadow-image">
-        <img
-          :src="image"
-          class="img-fluid border-radius-md"
-          :alt="title"
-          loading="lazy"
-        />
-      </a>
-    </div>
-    <div class="card-body">
-      <span
-        class="text-gradient text-uppercase text-xs font-weight-bold"
-        :class="`text-${category.color}`"
-        >{{ category.label }}</span
-      >
-      <a :href="route" class="card-title mt-3 h5 d-block text-darker">
-        {{ title }}
-      </a>
-      <p class="card-description mb-4">
-        {{ description }}
-      </p>
-      <div class="author align-items-center">
-        <img
-          :src="author.image"
-          :alt="author.name"
-          class="avatar shadow"
-          loading="lazy"
-        />
-        <div class="name ps-2">
-          <span>{{ author.name }}</span>
-          <div class="stats">
-            <small>{{ author.date }}</small>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/blogCards/RaisedBlogCard.vue b/src/examples/cards/blogCards/RaisedBlogCard.vue
deleted file mode 100644
index be724c6..0000000
--- a/src/examples/cards/blogCards/RaisedBlogCard.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup>
-defineProps({
-  image: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  action: {
-    type: Object,
-    label: String,
-    route: String,
-    color: String,
-    default: () => ({
-      label: "",
-      route: "#",
-      color: "success",
-    }),
-  },
-});
-</script>
-<template>
-  <div class="card shadow-lg">
-    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
-      <a class="d-block blur-shadow-image">
-        <img
-          :src="image"
-          alt="img-blur-shadow"
-          class="img-fluid shadow border-radius-lg"
-        />
-      </a>
-    </div>
-    <div class="card-body">
-      <h4>{{ title }}</h4>
-      <p>
-        {{ description }}
-      </p>
-      <a
-        :href="action.route"
-        class="icon-move-right"
-        :class="`text-${action.color}`"
-      >
-        {{ action.label }}
-        <i class="fas fa-arrow-right text-xs ms-1" aria-hidden="true"></i>
-      </a>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/blogCards/SimpleBlogCard.vue b/src/examples/cards/blogCards/SimpleBlogCard.vue
deleted file mode 100644
index 021717c..0000000
--- a/src/examples/cards/blogCards/SimpleBlogCard.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup>
-defineProps({
-  image: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  action: {
-    type: Object,
-    color: String,
-    label: String,
-    default: () => ({
-      color: "dark",
-      label: "More info",
-    }),
-  },
-});
-</script>
-<template>
-  <!-- Start Card Raised Header -->
-  <div class="card">
-    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
-      <a class="d-block blur-shadow-image">
-        <img
-          :src="image"
-          alt="img-blur-shadow"
-          class="img-fluid shadow border-radius-lg"
-          loading="lazy"
-        />
-      </a>
-    </div>
-    <div class="card-body">
-      <h5 class="font-weight-normal">{{ title }}</h5>
-      <p>
-        {{ description }}
-      </p>
-      <button
-        class="btn btn-outline-dark btn-sm mb-0"
-        :class="`btn-outline-${action.color}`"
-        name="button"
-      >
-        {{ action.label }}
-      </button>
-    </div>
-  </div>
-  <!-- End Card Raised Header -->
-</template>
diff --git a/src/examples/cards/bookingCards/SimpleBookingCard.vue b/src/examples/cards/bookingCards/SimpleBookingCard.vue
deleted file mode 100644
index ec04860..0000000
--- a/src/examples/cards/bookingCards/SimpleBookingCard.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-defineProps({
-  image: {
-    type: String,
-    required: true,
-  },
-  categories: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  action: {
-    type: Object,
-    color: String,
-    label: String,
-    default: () => ({
-      color: "success",
-      label: "From / Night",
-    }),
-  },
-});
-</script>
-<template>
-  <div class="card">
-    <div class="card-header p-0 mx-3 mt-n4 position-relative z-index-2">
-      <a class="d-block blur-shadow-image">
-        <img
-          :src="image"
-          alt="img-blur-shadow"
-          class="img-fluid border-radius-lg"
-          loading="lazy"
-        />
-      </a>
-    </div>
-    <div class="card-body pt-3">
-      <p class="text-dark mb-2 text-sm">
-        {{ categories }}
-      </p>
-      <a href="javascript:;">
-        <h5>{{ title }}</h5>
-      </a>
-      <p>
-        {{ description }}
-      </p>
-      <button class="btn btn-sm mb-0" :class="`btn-outline-${action.color}`">
-        {{ action.label }}
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/infoCards/SimpleInfoCard.vue b/src/examples/cards/infoCards/SimpleInfoCard.vue
deleted file mode 100644
index 7723969..0000000
--- a/src/examples/cards/infoCards/SimpleInfoCard.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup>
-defineProps({
-  direction: {
-    type: String,
-    default: "text-start",
-  },
-  variant: {
-    type: String,
-    default: "gradient",
-  },
-  size: {
-    type: String,
-    default: "md",
-  },
-  color: {
-    type: String,
-    default: "success",
-  },
-  icon: {
-    type: [String, Object],
-    required: true,
-    component: String,
-    color: String,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-});
-
-function backgroundColor(variant, color) {
-  let colorValue;
-
-  if (variant === "gradient") {
-    colorValue = "bg-gradient-" + color;
-  } else if (variant === "contained") {
-    colorValue = "bg-" + color;
-  }
-
-  return colorValue;
-}
-</script>
-<template>
-  <div :class="direction">
-    <div
-      class="icon icon-shape text-center border-radius-xl mt-n4"
-      :class="`icon-${size} ${backgroundColor(variant, color)} shadow-${color}`"
-    >
-      <i
-        class="material-icons opacity-10"
-        :class="typeof icon == 'object' ? icon.color : ''"
-        >{{ typeof icon == "string" ? icon : icon.component }}</i
-      >
-    </div>
-    <h5 class="mt-3">{{ title }}</h5>
-    <p>
-      {{ description }}
-    </p>
-  </div>
-</template>
diff --git a/src/examples/cards/pricingCards/DefaultPricingCard.vue b/src/examples/cards/pricingCards/DefaultPricingCard.vue
deleted file mode 100644
index f11ac0c..0000000
--- a/src/examples/cards/pricingCards/DefaultPricingCard.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup>
-import MaterialBadge from "../../../components/MaterialBadge.vue";
-defineProps({
-  color: {
-    type: String,
-    default: "",
-  },
-  badge: {
-    type: Object,
-    color: String,
-    label: String,
-    required: true,
-  },
-  price: {
-    type: Object,
-    currency: String,
-    amount: String,
-    charged: String,
-    required: true,
-  },
-  specifications: {
-    type: Array,
-    label: String,
-    includes: Boolean,
-    required: true,
-  },
-  action: {
-    type: Object,
-    route: String,
-    label: String,
-    color: String,
-    default: () => ({
-      route: "/",
-      label: "Join",
-      color: "success",
-    }),
-  },
-  colored: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-<template>
-  <div class="card shadow-lg" :class="`bg-gradient-${color}`">
-    <MaterialBadge
-      :class="[
-        ` w-30 mt-n2 mx-auto bg-${badge.color}`,
-        colored ? 'text-white' : 'text-dark',
-      ]"
-      :color="badge.color"
-      rounded
-      >{{ badge.label }}</MaterialBadge
-    >
-    <div class="card-header text-center pt-4 pb-3 bg-transparent">
-      <h1
-        class="font-weight-bold mt-2"
-        :class="colored ? 'text-white' : 'text-dark'"
-      >
-        <small class="text-lg align-top me-1">{{ price.currency }}</small
-        >{{ price.amount }}<small class="text-lg">/{{ price.charged }}</small>
-      </h1>
-    </div>
-    <div
-      class="card-body text-lg-start text-center pt-0"
-      :class="colored ? 'text-white' : 'text-dark'"
-    >
-      <div
-        class="d-flex justify-content-lg-start justify-content-center p-2"
-        v-for="({ label, includes }, index) of specifications"
-        :key="index"
-      >
-        <i class="material-icons my-auto">{{
-          includes === true ? "done" : "remove"
-        }}</i>
-        <span class="ps-3">{{ label }}</span>
-      </div>
-
-      <a
-        :href="action.route"
-        class="btn btn-icon d-lg-block mt-3 mb-0"
-        :class="`bg-gradient-${action.color}`"
-      >
-        {{ action.label }}
-        <i class="fas fa-arrow-right ms-1"></i>
-      </a>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/pricingCards/MiniPricingCard.vue b/src/examples/cards/pricingCards/MiniPricingCard.vue
deleted file mode 100644
index 7976041..0000000
--- a/src/examples/cards/pricingCards/MiniPricingCard.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  price: {
-    type: [Number, Object],
-    currency: String,
-    amount: String,
-    required: true,
-  },
-  specifications: {
-    type: Array,
-    required: true,
-  },
-  action: {
-    type: Object,
-    route: String,
-    label: String,
-    color: String,
-    class: String,
-    default: () => ({
-      route: "/",
-      label: "Buy now",
-      color: "dark",
-    }),
-  },
-});
-</script>
-<template>
-  <div class="card">
-    <div class="card-header text-center pt-4 pb-3">
-      <h6 class="text-dark opacity-8 mb-0">{{ title }}</h6>
-      <h1 class="font-weight-bolder">
-        <small>{{ price.currency ?? $ }}</small
-        >{{ price.amount }}
-      </h1>
-    </div>
-    <div class="card-body mx-auto pt-0">
-      <div
-        class="justify-content-start d-flex px-2 py-1"
-        v-for="specification of specifications"
-        :key="specification"
-      >
-        <div>
-          <i class="fas fa-check text-dark opacity-6 text-sm"></i>
-        </div>
-        <div class="ps-2">
-          <span class="text-sm">{{ specification }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="card-footer pt-0">
-      <a
-        :href="action.route"
-        class="btn w-100 mb-0"
-        :class="`bg-gradient-${action.color} ${action.class}`"
-        v-html="action.label"
-      >
-      </a>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/pricingCards/SimpleInfoPricingCard.vue b/src/examples/cards/pricingCards/SimpleInfoPricingCard.vue
deleted file mode 100644
index 0d20d31..0000000
--- a/src/examples/cards/pricingCards/SimpleInfoPricingCard.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup>
-defineProps({
-  variant: {
-    validator(val) {
-      return ["gradient", "fill"].includes(val);
-    },
-  },
-  color: {
-    type: String,
-    default: "",
-  },
-  image: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  price: {
-    type: [Number, Object],
-    currency: String,
-    amount: String,
-    charged: String,
-    required: true,
-  },
-  specifications: {
-    type: Array,
-    required: true,
-  },
-  action: {
-    type: Object,
-    label: String,
-    color: String,
-    default: () => ({
-      label: "Buy now",
-      color: "bg-gradient-success",
-    }),
-  },
-});
-
-function getColor(variant, color) {
-  let colorValue;
-
-  // Setting the button variant and color
-  if (variant === "gradient") {
-    colorValue = `bg-gradient-${color}`;
-  } else if (variant === "fill") {
-    colorValue = `bg-${color}`;
-  }
-
-  return colorValue;
-}
-</script>
-<template>
-  <div
-    class="card card-pricing border-0 text-center mb-4 overflow-hidden"
-    :class="getColor(variant, color)"
-  >
-    <img
-      v-if="image"
-      :src="image"
-      alt="pattern-lines"
-      class="position-absolute opacity-6 h-100"
-    />
-    <div class="card-header bg-transparent">
-      <h6
-        class="text-uppercase ls-1 py-3 mb-0"
-        :class="variant == 'gradient' ? 'text-white' : 'text-dark'"
-      >
-        {{ title }}
-      </h6>
-    </div>
-    <div
-      class="card-body position-relative"
-      :class="variant == 'gradient' ? 'text-white' : 'text-dark'"
-    >
-      <p class="display-2 font-weight-bold mb-0">
-        {{ price.currency ? price.currency : "$" }}{{ price.amount }}
-      </p>
-      <span>{{ price.charged }}</span>
-      <ul class="list-unstyled my-4">
-        <li
-          class="align-items- mb-2"
-          v-for="specification of specifications"
-          :key="specification"
-          v-html="specification"
-        ></li>
-      </ul>
-    </div>
-    <div class="card-footer bg-transparent position-relative">
-      <button class="btn" :class="action.color">{{ action.label }}</button>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/pricingCards/SimplePricingCard.vue b/src/examples/cards/pricingCards/SimplePricingCard.vue
deleted file mode 100644
index 6669287..0000000
--- a/src/examples/cards/pricingCards/SimplePricingCard.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script setup>
-defineProps({
-  color: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  price: {
-    type: [Number, Object],
-    currency: String,
-    amount: String,
-    charged: String,
-    required: true,
-  },
-  specifications: {
-    type: Array,
-    required: true,
-  },
-  action: {
-    type: Object,
-    route: String,
-    label: String,
-    color: String,
-    default: () => ({
-      route: "/",
-      label: "Buy now",
-      color: "bg-gradient-dark",
-    }),
-  },
-  col: {
-    type: String,
-    default: "col-lg-3 col-sm-6",
-  },
-});
-</script>
-<template>
-  <div class="mb-lg-0 mb-4" :class="`${col ?? ''}`">
-    <div class="card h-100" :class="color ?? ''">
-      <div
-        class="text-sm-start text-center pt-4 pb-3 px-4"
-        :class="color ? 'bg-transparent' : 'card-header'"
-      >
-        <h5 class="mb-1" :class="{ 'text-white': color }">{{ title }}</h5>
-        <p class="mb-3 text-sm" :class="{ 'text-white': color }">
-          {{ description }}
-        </p>
-        <h3 class="font-weight-bolder mt-3" :class="{ 'text-white': color }">
-          {{
-            typeof price === "number"
-              ? `$${price}`
-              : `${price.currency ?? ""}${price.amount}`
-          }}
-          <small
-            class="text-sm text-secondary font-weight-bold"
-            :class="{ 'text-white': color }"
-            >/{{ price.charged ?? "mo" }}</small
-          >
-        </h3>
-        <a
-          :href="action.route"
-          class="btn btn-sm w-100 border-radius-md mt-4 mb-2"
-          :class="action.color"
-          >{{ action.label }}</a
-        >
-      </div>
-      <hr class="horizontal dark my-0" />
-      <div class="card-body">
-        <div
-          class="d-flex pb-3"
-          v-for="specification of specifications"
-          :key="specification"
-        >
-          <i
-            class="material-icons my-auto text-dark"
-            :class="{ 'text-white': color }"
-            >done</i
-          >
-          <span class="text-sm ps-3" :class="{ 'text-white': color }">{{
-            specification
-          }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/reviewCards/ComplexReviewCard.vue b/src/examples/cards/reviewCards/ComplexReviewCard.vue
deleted file mode 100644
index d086873..0000000
--- a/src/examples/cards/reviewCards/ComplexReviewCard.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup>
-defineProps({
-  image: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  review: {
-    type: String,
-    required: true,
-  },
-  author: {
-    type: Object,
-    required: true,
-    logo: String,
-    name: String,
-    role: String,
-  },
-});
-</script>
-<template>
-  <div class="row align-items-center">
-    <div class="col-md-5 p-lg-5 ms-lg-auto">
-      <div class="p-3">
-        <img
-          class="w-100 border-radius-md shadow-lg"
-          :src="image"
-          :alt="title"
-          loading="lazy"
-        />
-      </div>
-    </div>
-    <div class="col-lg-5 col-md-7 me-lg-auto position-relative">
-      <p class="text-sm font-weight-bold mb-1">- Customer Story</p>
-      <h3 class="text-dark">
-        {{ title }}
-      </h3>
-      <p class="my-4">
-        <i>{{ review }}</i>
-      </p>
-      <div class="author align-items-center">
-        <div class="avatar rounded-circle shadow bg-gradient-dark">
-          <img :src="author.logo" alt="logo" loading="lazy" />
-        </div>
-        <div class="name ps-2">
-          <span>{{ author.name }}</span>
-          <div>
-            <small>{{ author.role }}</small>
-          </div>
-        </div>
-      </div>
-      <div class="w-25 ms-auto opacity-2 mt-n8">
-        <svg
-          width="110px"
-          height="110px"
-          viewBox="0 0 270 270"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-        >
-          <title>quote-down</title>
-          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <path
-              d="M107.000381,49.033238 C111.792099,48.01429 115.761022,48.6892564 116.625294,50.9407629 C117.72393,53.8028077 113.174473,58.3219079 107.017635,60.982801 C107.011653,60.9853863 107.00567,60.9879683 106.999688,60.990547 C106.939902,61.0219589 106.879913,61.0439426 106.820031,61.0659514 C106.355389,61.2618887 105.888177,61.4371549 105.421944,61.5929594 C88.3985192,68.1467602 80.3242628,76.9161885 70.3525495,90.6906738 C60.0774843,104.884196 54.9399518,119.643717 54.9399518,134.969238 C54.9399518,138.278158 55.4624127,140.716309 56.5073346,142.283691 C57.2039492,143.328613 57.9876406,143.851074 58.8584088,143.851074 C59.7291771,143.851074 61.0353294,143.241536 62.7768659,142.022461 C68.3497825,138.016927 75.4030052,136.01416 83.9365338,136.01416 C93.8632916,136.01416 102.658051,140.063232 110.320811,148.161377 C117.983572,156.259521 121.814952,165.88151 121.814952,177.027344 C121.814952,188.695638 117.417572,198.970703 108.622813,207.852539 C99.828054,216.734375 89.1611432,221.175293 76.6220807,221.175293 C61.9931745,221.175293 49.3670351,215.166992 38.7436627,203.150391 C28.1202903,191.133789 22.8086041,175.024577 22.8086041,154.822754 C22.8086041,131.312012 30.0359804,110.239421 44.490733,91.6049805 C58.2196377,73.906272 74.3541002,59.8074126 102.443135,50.4450748 C102.615406,50.3748509 102.790055,50.3058192 102.966282,50.2381719 C104.199241,49.7648833 105.420135,49.3936487 106.596148,49.1227802 L107,49 Z M233.000381,49.033238 C237.792099,48.01429 241.761022,48.6892564 242.625294,50.9407629 C243.72393,53.8028077 239.174473,58.3219079 233.017635,60.982801 C233.011653,60.9853863 233.00567,60.9879683 232.999688,60.990547 C232.939902,61.0219589 232.879913,61.0439426 232.820031,61.0659514 C232.355389,61.2618887 231.888177,61.4371549 231.421944,61.5929594 C214.398519,68.1467602 206.324263,76.9161885 196.352549,90.6906738 C186.077484,104.884196 180.939952,119.643717 180.939952,134.969238 C180.939952,138.278158 181.462413,140.716309 182.507335,142.283691 C183.203949,143.328613 183.987641,143.851074 184.858409,143.851074 C185.729177,143.851074 187.035329,143.241536 188.776866,142.022461 C194.349783,138.016927 201.403005,136.01416 209.936534,136.01416 C219.863292,136.01416 228.658051,140.063232 236.320811,148.161377 C243.983572,156.259521 247.814952,165.88151 247.814952,177.027344 C247.814952,188.695638 243.417572,198.970703 234.622813,207.852539 C225.828054,216.734375 215.161143,221.175293 202.622081,221.175293 C187.993174,221.175293 175.367035,215.166992 164.743663,203.150391 C154.12029,191.133789 148.808604,175.024577 148.808604,154.822754 C148.808604,131.312012 156.03598,110.239421 170.490733,91.6049805 C184.219638,73.906272 200.3541,59.8074126 228.443135,50.4450748 C228.615406,50.3748509 228.790055,50.3058192 228.966282,50.2381719 C230.199241,49.7648833 231.420135,49.3936487 232.596148,49.1227802 L233,49 Z"
-              fill="#48484A"
-              fill-rule="nonzero"
-              transform="translate(135.311778, 134.872794) scale(-1, -1) translate(-135.311778, -134.872794) "
-            ></path>
-          </g>
-        </svg>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/reviewCards/MiniReviewCard.vue b/src/examples/cards/reviewCards/MiniReviewCard.vue
deleted file mode 100644
index a0ee372..0000000
--- a/src/examples/cards/reviewCards/MiniReviewCard.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script setup>
-defineProps({
-  variant: {
-    validator(val) {
-      return ["gradient", "contained", "plain"].includes(val);
-    },
-    default: "plain",
-  },
-  color: {
-    validator(color) {
-      return [
-        "primary",
-        "secondary",
-        "info",
-        "success",
-        "warning",
-        "error",
-        "light",
-        "dark",
-        "",
-      ].includes(color);
-    },
-    default: "",
-  },
-  rating: {
-    type: Number,
-    required: true,
-  },
-  review: {
-    type: String,
-    required: true,
-  },
-  author: {
-    type: Object,
-    image: String,
-    name: String,
-    date: String,
-    required: true,
-  },
-});
-function getColor(variant, color) {
-  let colorVal;
-  if (variant == "gradient") {
-    colorVal = "bg-gradient-" + color;
-  } else if (variant == "contained") {
-    colorVal = "bg-" + color;
-  } else if (variant == "plain" && !color) {
-    colorVal = "card-plain";
-  }
-
-  return colorVal;
-}
-</script>
-<template>
-  <div :class="`card ${getColor(variant, color)}`">
-    <div class="card-body">
-      <div class="rating float-none">
-        <i
-          :class="[
-            { 'text-white': color },
-            {
-              'fas fa-star': rating >= 1,
-              'fas fa-star-half': rating === 0.5,
-              'far fa-star': rating < 0.5 || !rating,
-            },
-          ]"
-        ></i>
-        <i
-          class="mx-1"
-          :class="[
-            { 'text-white': color },
-            {
-              'fas fa-star': rating >= 2,
-              'fas fa-star-half': rating === 1.5,
-              'far fa-star': rating < 1.5,
-            },
-          ]"
-        ></i>
-        <i
-          :class="[
-            { 'text-white': color },
-            {
-              'fas fa-star': rating >= 3,
-              'fas fa-star-half': rating === 2.5,
-              'far fa-star': rating < 2.5,
-            },
-          ]"
-        ></i>
-        <i
-          class="mx-1"
-          :class="[
-            { 'text-white': color },
-            {
-              'fas fa-star': rating >= 4,
-              'fas fa-star-half': rating === 3.5,
-              'far fa-star': rating < 3.5,
-            },
-          ]"
-        ></i>
-        <i
-          :class="[
-            { 'text-white': color },
-            {
-              'fas fa-star': rating === 5,
-              'fas fa-star-half': rating === 4.5,
-              'far fa-star': rating < 4.5,
-            },
-          ]"
-        ></i>
-      </div>
-      <p class="mt-3" :class="color ? 'text-white' : ''">
-        {{ review }}
-      </p>
-      <div class="author mt-4">
-        <img :src="author.image" :alt="author.name" class="avatar shadow" />
-        <div class="name ps-2">
-          <span :class="color ? 'text-white' : ''">{{ author.name }}</span>
-          <div class="stats" :class="color ? 'text-white' : ''">
-            <small><i class="far fa-clock"></i> {{ author.date }}</small>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/reviewCards/SimpleReviewCard.vue b/src/examples/cards/reviewCards/SimpleReviewCard.vue
deleted file mode 100644
index 278349d..0000000
--- a/src/examples/cards/reviewCards/SimpleReviewCard.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup>
-import MaterialAvatar from "@/components/MaterialAvatar.vue";
-
-defineProps({
-  image: {
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  username: {
-    type: String,
-    required: true,
-  },
-  review: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-<template>
-  <div class="card">
-    <div class="text-center mt-n5 z-index-1">
-      <div class="position-relative">
-        <div class="blur-shadow-avatar">
-          <MaterialAvatar :image="image" :alt="name" />
-        </div>
-      </div>
-    </div>
-    <div class="card-body text-center pb-0">
-      <h4 class="mb-0">{{ name }}</h4>
-      <p>@{{ username }}</p>
-      <p class="mt-2">
-        {{ review }}
-      </p>
-    </div>
-    <div class="card-footer text-center pt-2">
-      <div class="mx-auto">
-        <svg
-          class="opacity-2"
-          width="60px"
-          height="60px"
-          viewBox="0 0 270 270"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-        >
-          <title>quote-down</title>
-          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <path
-              d="M107.000381,49.033238 C111.792099,48.01429 115.761022,48.6892564 116.625294,50.9407629 C117.72393,53.8028077 113.174473,58.3219079 107.017635,60.982801 C107.011653,60.9853863 107.00567,60.9879683 106.999688,60.990547 C106.939902,61.0219589 106.879913,61.0439426 106.820031,61.0659514 C106.355389,61.2618887 105.888177,61.4371549 105.421944,61.5929594 C88.3985192,68.1467602 80.3242628,76.9161885 70.3525495,90.6906738 C60.0774843,104.884196 54.9399518,119.643717 54.9399518,134.969238 C54.9399518,138.278158 55.4624127,140.716309 56.5073346,142.283691 C57.2039492,143.328613 57.9876406,143.851074 58.8584088,143.851074 C59.7291771,143.851074 61.0353294,143.241536 62.7768659,142.022461 C68.3497825,138.016927 75.4030052,136.01416 83.9365338,136.01416 C93.8632916,136.01416 102.658051,140.063232 110.320811,148.161377 C117.983572,156.259521 121.814952,165.88151 121.814952,177.027344 C121.814952,188.695638 117.417572,198.970703 108.622813,207.852539 C99.828054,216.734375 89.1611432,221.175293 76.6220807,221.175293 C61.9931745,221.175293 49.3670351,215.166992 38.7436627,203.150391 C28.1202903,191.133789 22.8086041,175.024577 22.8086041,154.822754 C22.8086041,131.312012 30.0359804,110.239421 44.490733,91.6049805 C58.2196377,73.906272 74.3541002,59.8074126 102.443135,50.4450748 C102.615406,50.3748509 102.790055,50.3058192 102.966282,50.2381719 C104.199241,49.7648833 105.420135,49.3936487 106.596148,49.1227802 L107,49 Z M233.000381,49.033238 C237.792099,48.01429 241.761022,48.6892564 242.625294,50.9407629 C243.72393,53.8028077 239.174473,58.3219079 233.017635,60.982801 C233.011653,60.9853863 233.00567,60.9879683 232.999688,60.990547 C232.939902,61.0219589 232.879913,61.0439426 232.820031,61.0659514 C232.355389,61.2618887 231.888177,61.4371549 231.421944,61.5929594 C214.398519,68.1467602 206.324263,76.9161885 196.352549,90.6906738 C186.077484,104.884196 180.939952,119.643717 180.939952,134.969238 C180.939952,138.278158 181.462413,140.716309 182.507335,142.283691 C183.203949,143.328613 183.987641,143.851074 184.858409,143.851074 C185.729177,143.851074 187.035329,143.241536 188.776866,142.022461 C194.349783,138.016927 201.403005,136.01416 209.936534,136.01416 C219.863292,136.01416 228.658051,140.063232 236.320811,148.161377 C243.983572,156.259521 247.814952,165.88151 247.814952,177.027344 C247.814952,188.695638 243.417572,198.970703 234.622813,207.852539 C225.828054,216.734375 215.161143,221.175293 202.622081,221.175293 C187.993174,221.175293 175.367035,215.166992 164.743663,203.150391 C154.12029,191.133789 148.808604,175.024577 148.808604,154.822754 C148.808604,131.312012 156.03598,110.239421 170.490733,91.6049805 C184.219638,73.906272 200.3541,59.8074126 228.443135,50.4450748 C228.615406,50.3748509 228.790055,50.3058192 228.966282,50.2381719 C230.199241,49.7648833 231.420135,49.3936487 232.596148,49.1227802 L233,49 Z"
-              fill="#48484A"
-              fill-rule="nonzero"
-              transform="translate(135.311778, 134.872794) scale(-1, -1) translate(-135.311778, -134.872794) "
-            ></path>
-          </g>
-        </svg>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/examples/cards/teamCards/TransparentTeamCard.vue b/src/examples/cards/teamCards/TransparentTeamCard.vue
deleted file mode 100644
index 149bfaf..0000000
--- a/src/examples/cards/teamCards/TransparentTeamCard.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
-defineProps({
-  image: {
-    type: String,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  position: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  socials: {
-    type: Array,
-    component: String,
-    route: String,
-    default: () => [],
-  },
-});
-</script>
-<template>
-  <div class="card card-profile card-plain">
-    <div class="text-start mt-n5 z-index-1">
-      <div class="position-relative w-25">
-        <div class="blur-shadow-avatar">
-          <img class="avatar avatar-xxl border-radius-xl" :src="image" />
-        </div>
-      </div>
-    </div>
-    <div class="card-body ps-0">
-      <h5 class="mb-0">{{ name }}</h5>
-      <p class="text-muted">{{ position }}</p>
-      <p>
-        {{ description }}
-      </p>
-      <MaterialSocialButton
-        v-for="{ component, route } of socials"
-        :key="component"
-        type="button"
-        class="btn-icon-only btn-simple btn-lg"
-        data-toggle="tooltip"
-        data-placement="bottom"
-        title="Follow me!"
-        :component="component"
-        :color="component"
-        :route="route"
-      />
-    </div>
-  </div>
-</template>
diff --git a/src/examples/footers/FooterDetailed.vue b/src/examples/footers/FooterDetailed.vue
deleted file mode 100644
index 59a711e..0000000
--- a/src/examples/footers/FooterDetailed.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup>
-defineProps({
-  brand: {
-    type: Object,
-    name: String,
-    description: String,
-    default: () => ({
-      name: "MATERIAL UI DESIGN",
-      description: "The next generation of design systems.",
-    }),
-  },
-  socials: {
-    type: Array,
-    icon: String,
-    link: String,
-    required: true,
-  },
-  menus: {
-    type: Array,
-    name: String,
-    items: {
-      type: Array,
-      name: String,
-      href: String,
-    },
-  },
-  copyright: {
-    type: String,
-    default: "Material Design by Creative Tim.",
-  },
-});
-</script>
-<template>
-  <footer class="footer p-5">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-3 mb-5 mb-lg-0">
-          <h6 class="text-uppercase mb-2">{{ brand.name }}</h6>
-          <p class="mb-4 pb-2">{{ brand.description }}</p>
-          <a
-            v-for="{ icon, link } of socials"
-            :key="link"
-            :href="link"
-            target="_blank"
-            class="text-secondary me-xl-4 me-3"
-            v-html="icon"
-          >
-          </a>
-        </div>
-        <div
-          class="col-md-2 col-6 ms-lg-auto mb-md-0 mb-4"
-          v-for="{ name, items } of menus"
-          :key="name"
-        >
-          <h6 class="text-sm">{{ name }}</h6>
-          <ul class="flex-column ms-n3 nav">
-            <li class="nav-item" v-for="item of items" :key="item.name">
-              <a
-                class="nav-link text-secondary"
-                :href="item.href"
-                target="_blank"
-              >
-                {{ item.name }}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <hr class="horizontal dark mt-lg-5 mt-4 mb-sm-4 mb-1" />
-      <div class="row">
-        <div class="col-8 mx-lg-auto text-lg-center">
-          <p class="text-sm text-secondary">
-            Copyright ©
-            {{ new Date().getFullYear() }}
-            {{ copyright }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
diff --git a/src/examples/footers/SimpleFooter.vue b/src/examples/footers/SimpleFooter.vue
deleted file mode 100644
index 889211b..0000000
--- a/src/examples/footers/SimpleFooter.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup></script>
-<template>
-  <footer class="footer">
-    <div class="container-fluid">
-      <div class="row align-items-center justify-content-lg-between">
-        <div class="col-lg-6 mb-lg-0 mb-4">
-          <div class="copyright text-center text-sm text-muted text-lg-start">
-            ©
-            {{ new Date().getFullYear() }}
-            , made with <i class="fa fa-heart"></i> by
-            <a
-              href="https://www.creative-tim.com"
-              class="font-weight-bold"
-              target="_blank"
-              >Creative Tim</a
-            >
-            for a better web.
-          </div>
-        </div>
-        <div class="col-lg-6">
-          <ul
-            class="nav nav-footer justify-content-center justify-content-lg-end"
-          >
-            <li class="nav-item">
-              <a
-                href="https://www.creative-tim.com"
-                class="nav-link text-muted"
-                target="_blank"
-                >Creative Tim</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                href="https://www.creative-tim.com/presentation"
-                class="nav-link text-muted"
-                target="_blank"
-                >About Us</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                href="https://www.creative-tim.com/blog"
-                class="nav-link text-muted"
-                target="_blank"
-                >Blog</a
-              >
-            </li>
-            <li class="nav-item">
-              <a
-                href="https://www.creative-tim.com/license"
-                class="nav-link pe-0 text-muted"
-                target="_blank"
-                >License</a
-              >
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>