mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-22 19:44:21 +08:00
remove unused components
This commit is contained in:
Maisam Afshar
parent
8130df9db7
commit
ec909ae843
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user