mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
Удалил ненужные файлы
This commit is contained in:
FEARmeR
parent
10ec49ce17
commit
1fa8566059
@ -1,104 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted } from "vue";
|
||||
|
||||
//example components
|
||||
import DefaultNavbar from "../../../examples/navbars/NavbarDefault.vue";
|
||||
import DefaultFooter from "../../../examples/footers/FooterDefault.vue";
|
||||
|
||||
//image
|
||||
import bg0 from "@/assets/img/bg9.jpg";
|
||||
|
||||
//dep
|
||||
import Typed from "typed.js";
|
||||
|
||||
//sections
|
||||
import Information from "./Sections/AboutInformation.vue";
|
||||
import AboutTeam from "./Sections/AboutTeam.vue";
|
||||
import Featuring from "./Sections/AboutFeaturing.vue";
|
||||
import Newsletter from "./Sections/AboutNewsletter.vue";
|
||||
|
||||
const body = document.getElementsByTagName("body")[0];
|
||||
//hooks
|
||||
onMounted(() => {
|
||||
body.classList.add("about-us");
|
||||
body.classList.add("bg-gray-200");
|
||||
|
||||
if (document.getElementById("typed")) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var typed = new Typed("#typed", {
|
||||
stringsElement: "#typed-strings",
|
||||
typeSpeed: 90,
|
||||
backSpeed: 90,
|
||||
backDelay: 200,
|
||||
startDelay: 500,
|
||||
loop: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
body.classList.remove("about-us");
|
||||
body.classList.remove("bg-gray-200");
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<DefaultNavbar
|
||||
:action="{
|
||||
route: 'javascript:;',
|
||||
label: 'Buy Now',
|
||||
color: 'btn-white',
|
||||
}"
|
||||
transparent
|
||||
/>
|
||||
<header class="bg-gradient-dark">
|
||||
<div
|
||||
class="page-header min-vh-75"
|
||||
:style="{ backgroundImage: `url(${bg0})` }"
|
||||
>
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center mx-auto my-auto">
|
||||
<h1 class="text-white">
|
||||
We have no <span class="text-white" id="typed"></span>
|
||||
</h1>
|
||||
<div id="typed-strings">
|
||||
<h1>team</h1>
|
||||
<h1>design</h1>
|
||||
<h1>tool</h1>
|
||||
</div>
|
||||
<p class="lead mb-4 text-white opacity-8">
|
||||
We’re constantly trying to express ourselves and actualize our
|
||||
dreams. If you have the opportunity to play this game
|
||||
</p>
|
||||
<button type="submit" class="btn bg-white text-dark">
|
||||
Create Account
|
||||
</button>
|
||||
<h6 class="text-white mb-2 mt-5">Find us on</h6>
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="javascript:;"
|
||||
><i class="fab fa-facebook text-lg text-white me-4"></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i class="fab fa-instagram text-lg text-white me-4"></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i class="fab fa-twitter text-lg text-white me-4"></i
|
||||
></a>
|
||||
<a href="javascript:;"
|
||||
><i class="fab fa-google-plus text-lg text-white"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card card-body shadow-xl mx-3 mx-md-4 mt-n6">
|
||||
<Information />
|
||||
<AboutTeam />
|
||||
<Featuring />
|
||||
<Newsletter />
|
||||
</div>
|
||||
<DefaultFooter />
|
||||
</template>
|
||||
@ -1,82 +0,0 @@
|
||||
<script setup>
|
||||
// example component
|
||||
import DefaultCounterCard from "../../../../examples/cards/counterCards/DefaultCounterCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<section class="pt-4 pb-6" id="count-stats">
|
||||
<div class="container">
|
||||
<div class="row mb-7">
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-coinbase.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-nasa.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-netflix.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-pinterest.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-spotify.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 col-6 mb-4">
|
||||
<img
|
||||
class="w-100 opacity-7"
|
||||
src="@/assets/img/logos/gray-logos/logo-vodafone.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center text-center">
|
||||
<div class="col-md-3">
|
||||
<DefaultCounterCard
|
||||
title="Projects"
|
||||
description="Of “high-performing” level are led by a certified project manager"
|
||||
:count="5234"
|
||||
:duration="3000"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<DefaultCounterCard
|
||||
title="Hours"
|
||||
description="That meets quality standards required by our users"
|
||||
:count="3400"
|
||||
suffix="+"
|
||||
:duration="3000"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<DefaultCounterCard
|
||||
title="Support"
|
||||
description="Actively engage team members that finishes on time"
|
||||
:count="24"
|
||||
suffix="/7"
|
||||
:duration="4000"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,54 +0,0 @@
|
||||
<script setup>
|
||||
// example components
|
||||
import DefaultInfoCard from "../../../../examples/cards/infoCards/DefaultInfoCard.vue";
|
||||
import CenteredBlogCard from "../../../../examples/cards/blogCards/CenteredBlogCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-7">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="row justify-content-start">
|
||||
<DefaultInfoCard
|
||||
color="info"
|
||||
icon="public"
|
||||
title="Fully integrated"
|
||||
description="We get insulted by others, lose trust for those We get back
|
||||
freezes"
|
||||
/>
|
||||
<DefaultInfoCard
|
||||
color="info"
|
||||
icon="payments"
|
||||
title="Payments functionality"
|
||||
description="We get insulted by others, lose trust for those We get back
|
||||
freezes"
|
||||
/>
|
||||
</div>
|
||||
<div class="row justify-content-start mt-4">
|
||||
<DefaultInfoCard
|
||||
color="info"
|
||||
icon="apps"
|
||||
title="Prebuilt components"
|
||||
description="We get insulted by others, lose trust for those We get back
|
||||
freezes"
|
||||
/>
|
||||
<DefaultInfoCard
|
||||
color="info"
|
||||
icon="3p"
|
||||
title="Improved platform"
|
||||
description="We get insulted by others, lose trust for those We get back
|
||||
freezes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 ms-auto mt-lg-0 mt-6">
|
||||
<CenteredBlogCard
|
||||
image="https://images.unsplash.com/photo-1544717302-de2939b7ef71?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
|
||||
title="Get insights on Search"
|
||||
description="Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,54 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<section class="my-5 pt-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 m-auto">
|
||||
<h4>Be the first to see the news</h4>
|
||||
<p class="mb-4">
|
||||
Your company may not be in the software business, but eventually, a
|
||||
software company will be in your business.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<MaterialInput
|
||||
class="input-group-outline"
|
||||
id="email"
|
||||
:label="{ text: 'Email Here...', class: 'form-label' }"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4 ps-0">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
class="mb-0 h-100 position-relative z-index-2"
|
||||
>Subscribe</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 ms-auto mt-6 md-mt-0">
|
||||
<div class="position-relative">
|
||||
<img
|
||||
class="max-width-50 w-100 position-relative z-index-2"
|
||||
src="@/assets/img/macbook.png"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,72 +0,0 @@
|
||||
<script setup>
|
||||
// example component
|
||||
import HorizontalTeamCard from "@/examples/cards/teamCards/HorizontalTeamCard.vue";
|
||||
|
||||
// images
|
||||
import emma from "@/assets/img/team-5.jpg";
|
||||
import william from "@/assets/img/bruce-mars.jpg";
|
||||
import ivana from "@/assets/img/ivana-squares.jpg";
|
||||
import marquez from "@/assets/img/ivana-square.jpg";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="pb-5 position-relative bg-gradient-dark mx-n3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 text-start mb-5 mt-5">
|
||||
<h3 class="text-white z-index-1 position-relative">
|
||||
The Executive Team
|
||||
</h3>
|
||||
<p class="text-white opacity-8 mb-0">
|
||||
There’s nothing I really wanted to do in life that I wasn’t able to
|
||||
get good at. That’s my skill.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-12">
|
||||
<HorizontalTeamCard
|
||||
class="mt-4"
|
||||
:image="emma"
|
||||
:profile="{ name: 'Emma Roberts', link: 'javascript:;' }"
|
||||
:position="{ label: 'UI Designer', color: 'success' }"
|
||||
description="Artist is a term applied to a person who engages in an
|
||||
activity deemed to be an art."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<HorizontalTeamCard
|
||||
class="mt-lg-4 mt-5"
|
||||
:image="william"
|
||||
:profile="{ name: 'William Pearce', link: 'javascript:;' }"
|
||||
:position="{ label: 'Boss', color: 'success' }"
|
||||
description="Artist is a term applied to a person who engages in an
|
||||
activity deemed to be an art."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 col-12">
|
||||
<HorizontalTeamCard
|
||||
class="mt-4 z-index-2"
|
||||
:image="ivana"
|
||||
:profile="{ name: 'Ivana Flow', link: 'javascript:;' }"
|
||||
:position="{ label: 'Athlete', color: 'success' }"
|
||||
description="Artist is a term applied to a person who engages in an
|
||||
activity deemed to be an art."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-12">
|
||||
<HorizontalTeamCard
|
||||
class="mt-lg-4 mt-5 z-index-2"
|
||||
:image="marquez"
|
||||
:profile="{ name: 'Marquez Garcia', link: 'javascript:;' }"
|
||||
:position="{ label: 'JS Developer', color: 'success' }"
|
||||
description="Artist is a term applied to a person who engages in an
|
||||
activity deemed to be an art."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,32 +0,0 @@
|
||||
<script setup>
|
||||
// example components
|
||||
import DefaultNavbar from "../../../examples/navbars/NavbarDefault.vue";
|
||||
import Header from "../../../examples/Header.vue";
|
||||
|
||||
// sections
|
||||
import Footer from "./Sections/AuthorFooter.vue";
|
||||
import Profile from "./Sections/AuthorProfile.vue";
|
||||
import Posts from "./Sections/AuthorPosts.vue";
|
||||
import Contact from "./Sections/AuthorContact.vue";
|
||||
|
||||
// image
|
||||
import image from "@/assets/img/city-profile.jpg";
|
||||
</script>
|
||||
<template>
|
||||
<DefaultNavbar transparent />
|
||||
<Header>
|
||||
<div
|
||||
class="page-header min-height-400"
|
||||
:style="{ backgroundImage: `url(${image})` }"
|
||||
loading="lazy"
|
||||
>
|
||||
<span class="mask bg-gradient-dark opacity-8"></span>
|
||||
</div>
|
||||
</Header>
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 mb-4">
|
||||
<Profile />
|
||||
<Posts />
|
||||
</div>
|
||||
<Contact />
|
||||
<Footer />
|
||||
</template>
|
||||
@ -1,172 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialTextArea from "@/components/MaterialTextArea.vue";
|
||||
|
||||
// image
|
||||
import bgContact from "@/assets/img/examples/blog2.jpg";
|
||||
|
||||
// tooltip
|
||||
import setTooltip from "@/assets/js/tooltip";
|
||||
|
||||
// store
|
||||
import { useAppStore } from "@/stores";
|
||||
const store = useAppStore();
|
||||
|
||||
onMounted(() => {
|
||||
setTooltip(store.bootstrap);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-lg-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card box-shadow-xl overflow-hidden mb-5">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-lg-5 position-relative bg-cover px-0"
|
||||
:style="{ backgroundImage: `url(${bgContact})` }"
|
||||
loading="lazy"
|
||||
>
|
||||
<div
|
||||
class="z-index-2 text-center d-flex h-100 w-100 d-flex m-auto justify-content-center"
|
||||
>
|
||||
<div class="mask bg-gradient-dark opacity-8"></div>
|
||||
<div
|
||||
class="p-5 ps-sm-8 position-relative text-start my-auto z-index-2"
|
||||
>
|
||||
<h3 class="text-white">Contact Information</h3>
|
||||
<p class="text-white opacity-8 mb-4">
|
||||
Fill up the form and our Team will get back to you within
|
||||
24 hours.
|
||||
</p>
|
||||
<div class="d-flex p-2 text-white">
|
||||
<div>
|
||||
<i class="fas fa-phone text-sm"></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<span class="text-sm opacity-8">(+40) 772 100 200</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex p-2 text-white">
|
||||
<div>
|
||||
<i class="fas fa-envelope text-sm"></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<span class="text-sm opacity-8"
|
||||
>hello@creative-tim.com</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex p-2 text-white">
|
||||
<div>
|
||||
<i class="fas fa-map-marker-alt text-sm"></i>
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<span class="text-sm opacity-8"
|
||||
>Dyonisie Wolf Bucharest, RO 010458</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<MaterialButton
|
||||
color="none"
|
||||
size="lg"
|
||||
class="btn-icon-only btn-link text-white mb-0"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-original-title="Log in with Facebook"
|
||||
>
|
||||
<i class="fab fa-facebook"></i>
|
||||
</MaterialButton>
|
||||
<MaterialButton
|
||||
color="none"
|
||||
size="lg"
|
||||
class="btn-icon-only btn-link text-white mb-0"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-original-title="Log in with Twitter"
|
||||
>
|
||||
<i class="fab fa-twitter"></i>
|
||||
</MaterialButton>
|
||||
<MaterialButton
|
||||
color="none"
|
||||
size="lg"
|
||||
class="btn-icon-only btn-link text-white mb-0"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-original-title="Log in with Dribbble"
|
||||
>
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</MaterialButton>
|
||||
<MaterialButton
|
||||
color="none"
|
||||
size="lg"
|
||||
class="btn-icon-only btn-link text-white mb-0"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-original-title="Log in with Instagram"
|
||||
>
|
||||
<i class="fab fa-instagram"></i>
|
||||
</MaterialButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<form class="p-3" id="contact-form" method="post">
|
||||
<div class="card-header px-4 py-sm-5 py-3">
|
||||
<h2>Say Hi!</h2>
|
||||
<p class="lead">We'd like to talk with you.</p>
|
||||
</div>
|
||||
<div class="card-body pt-1">
|
||||
<div class="row">
|
||||
<div class="col-md-12 pe-2 mb-3">
|
||||
<MaterialInput
|
||||
class="input-group-static mb-4"
|
||||
label="My name is"
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-12 pe-2 mb-3">
|
||||
<MaterialInput
|
||||
class="input-group-static mb-4"
|
||||
label="I'm looking for"
|
||||
type="text"
|
||||
placeholder="What you love"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-12 pe-2 mb-3">
|
||||
<MaterialTextArea
|
||||
class="input-group-static mb-4"
|
||||
placeholder="I want to say that..."
|
||||
:rows="6"
|
||||
>Your message</MaterialTextArea
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-end ms-auto">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
type="submit"
|
||||
class="mb-0"
|
||||
>Send Message</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,88 +0,0 @@
|
||||
<script setup></script>
|
||||
<template>
|
||||
<footer class="footer py-5">
|
||||
<div class="container z-index-1 position-relative">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 me-auto mb-lg-0 mb-4 text-lg-start text-center">
|
||||
<h6 class="text-dark font-weight-bolder text-uppercase mb-lg-4 mb-3">
|
||||
Material Design
|
||||
</h6>
|
||||
<ul
|
||||
class="nav flex-row ms-n3 justify-content-lg-start justify-content-center mb-4 mt-sm-0"
|
||||
>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link text-dark opacity-8"
|
||||
href="https://www.creative-tim.com"
|
||||
target="_blank"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link text-dark opacity-8"
|
||||
href="https://www.creative-tim.com/presentation"
|
||||
target="_blank"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link text-dark opacity-8"
|
||||
href="https://www.creative-tim.com/blog"
|
||||
target="_blank"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
class="nav-link text-dark opacity-8"
|
||||
href="https://www.creative-tim.com"
|
||||
target="_blank"
|
||||
>
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-sm text-dark opacity-8 mb-0">
|
||||
Copyright © {{ new Date().getFullYear() }} Material Design by
|
||||
Creative Tim.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6 ms-auto text-lg-end text-center">
|
||||
<p class="mb-5 text-lg text-dark font-weight-bold">
|
||||
The reward for getting on the stage is fame. The price of fame is
|
||||
you can’t get off the stage.
|
||||
</p>
|
||||
<a
|
||||
href="javascript:;"
|
||||
target="_blank"
|
||||
class="text-dark me-xl-4 me-4 opacity-5"
|
||||
>
|
||||
<span class="fab fa-dribbble"></span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:;"
|
||||
target="_blank"
|
||||
class="text-dark me-xl-4 me-4 opacity-5"
|
||||
>
|
||||
<span class="fab fa-twitter"></span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:;"
|
||||
target="_blank"
|
||||
class="text-dark me-xl-4 me-4 opacity-5"
|
||||
>
|
||||
<span class="fab fa-pinterest"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-dark opacity-5">
|
||||
<span class="fab fa-github"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@ -1,52 +0,0 @@
|
||||
<script setup>
|
||||
// example components
|
||||
import TransparentBlogCard from "../../../../examples/cards/blogCards/TransparentBlogCard.vue";
|
||||
import BackgroundBlogCard from "../../../../examples/cards/blogCards/BackgroundBlogCard.vue";
|
||||
|
||||
//Vue Material Kit 2 components
|
||||
import post1 from "@/assets/img/examples/testimonial-6-2.jpg";
|
||||
import post2 from "@/assets/img/examples/testimonial-6-3.jpg";
|
||||
import post3 from "@/assets/img/examples/blog-9-4.jpg";
|
||||
import post4 from "@/assets/img/examples/blog2.jpg";
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h3 class="mb-5">Check my latest blogposts</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<TransparentBlogCard
|
||||
:image="post1"
|
||||
title="Rover raised $65 million"
|
||||
description="Finding temporary housing for your dog should be as easy as renting an Airbnb. That’s the idea behind Rover ..."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<TransparentBlogCard
|
||||
:image="post2"
|
||||
title="MateLabs machine learning"
|
||||
description="If you’ve ever wanted to train a machine learning model and integrate it with IFTTT, you now can with ..."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<TransparentBlogCard
|
||||
:image="post3"
|
||||
title="MateLabs machine learning"
|
||||
description="If you’ve ever wanted to train a machine learning model and integrate it with IFTTT, you now can with ..."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-12 col-12">
|
||||
<BackgroundBlogCard
|
||||
:image="post4"
|
||||
title="Flexible work hours"
|
||||
description="Rather than worrying about switching offices every couple years, you stay in the same place."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,82 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialAvatar from "@/components/MaterialAvatar.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
// image
|
||||
import profilePic from "@/assets/img/bruce-mars.jpg";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-sm-7 py-5 position-relative">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 mx-auto">
|
||||
<div class="mt-n8 mt-md-n9 text-center">
|
||||
<div class="blur-shadow-avatar">
|
||||
<MaterialAvatar
|
||||
size="xxl"
|
||||
class="shadow-xl position-relative z-index-2"
|
||||
:image="profilePic"
|
||||
alt="Avatar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row py-7">
|
||||
<div
|
||||
class="col-lg-7 col-md-7 z-index-2 position-relative px-md-2 px-sm-5 mx-auto"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-between align-items-center mb-2"
|
||||
>
|
||||
<h3 class="mb-0">Michael Roven</h3>
|
||||
<div class="d-block">
|
||||
<MaterialButton
|
||||
class="text-nowrap mb-0"
|
||||
variant="outline"
|
||||
color="success"
|
||||
size="sm"
|
||||
>Follow</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto">
|
||||
<span class="h6 me-1">323</span>
|
||||
<span>Posts</span>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="h6 me-1">3.5k</span>
|
||||
<span>Followers</span>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="h6 me-1">260</span>
|
||||
<span>Following</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg mb-0">
|
||||
Decisions: If you can’t decide, the answer is no. If two equally
|
||||
difficult paths, choose the one more painful in the short term
|
||||
(pain avoidance is creating an illusion of equality). Choose the
|
||||
path that leaves you more equanimous.
|
||||
<br /><a
|
||||
href="javascript:;"
|
||||
class="text-success icon-move-right"
|
||||
>More about me
|
||||
<i class="fas fa-arrow-right text-sm ms-1"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,123 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
|
||||
//example components
|
||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||
import DefaultFooter from "@/examples/footers/FooterDefault.vue";
|
||||
|
||||
//image
|
||||
import image from "@/assets/img/illustrations/illustration-signin.jpg";
|
||||
|
||||
//material components
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialTextArea from "@/components/MaterialTextArea.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<DefaultNavbar
|
||||
:sticky="true"
|
||||
:action="{
|
||||
route: 'https://www.creative-tim.com/product/vue-material-kit-pro',
|
||||
color: 'bg-gradient-success',
|
||||
label: 'Buy Now',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<div class="page-header min-vh-100">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column"
|
||||
>
|
||||
<div
|
||||
class="position-relative h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center"
|
||||
:style="{
|
||||
backgroundImage: `url(${image})`,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
loading="lazy"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-8 col-xl-5 col-lg-6 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5"
|
||||
>
|
||||
<div
|
||||
class="card d-flex blur justify-content-center shadow-lg my-sm-0 my-sm-6 mt-8 mb-5"
|
||||
>
|
||||
<div
|
||||
class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent"
|
||||
>
|
||||
<div
|
||||
class="bg-gradient-success shadow-success border-radius-lg p-3"
|
||||
>
|
||||
<h3 class="text-white text-success mb-0">Contact us</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="pb-3">
|
||||
For further questions, including partnership opportunities,
|
||||
please email hello@creative-tim.com or contact using our
|
||||
contact form.
|
||||
</p>
|
||||
<form id="contact-form" method="post" autocomplete="off">
|
||||
<div class="card-body p-0 my-3">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<MaterialInput
|
||||
class="input-group-static mb-4"
|
||||
type="text"
|
||||
label="Full Name"
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 ps-md-2">
|
||||
<MaterialInput
|
||||
class="input-group-static mb-4"
|
||||
type="email"
|
||||
label="Email"
|
||||
placeholder="hello@creative-tim.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-0 mt-md-0 mt-4">
|
||||
<MaterialTextArea
|
||||
id="message"
|
||||
class="input-group-static mb-4"
|
||||
:rows="6"
|
||||
placeholder="Describe your problem in at least 250 characters"
|
||||
>How can we help you?</MaterialTextArea
|
||||
>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
class="mt-3 mb-0"
|
||||
>Send Message</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<DefaultFooter />
|
||||
</template>
|
||||
@ -1,171 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
|
||||
// example components
|
||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||
import Header from "@/examples/Header.vue";
|
||||
|
||||
//Vue Material Kit 2 components
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialSwitch from "@/components/MaterialSwitch.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
setMaterialInput();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<DefaultNavbar transparent />
|
||||
<Header>
|
||||
<div
|
||||
class="page-header align-items-start min-vh-100"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
'url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80)'
|
||||
}"
|
||||
loading="lazy"
|
||||
>
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container my-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||
<div
|
||||
class="card-header p-0 position-relative mt-n4 mx-3 z-index-2"
|
||||
>
|
||||
<div
|
||||
class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1"
|
||||
>
|
||||
<h4
|
||||
class="text-white font-weight-bolder text-center mt-2 mb-0"
|
||||
>
|
||||
Sign in
|
||||
</h4>
|
||||
<div class="row mt-3">
|
||||
<div class="col-2 text-center ms-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-facebook text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center px-1">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-github text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center me-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-google text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form role="form" class="text-start">
|
||||
<MaterialInput
|
||||
id="email"
|
||||
class="input-group-outline my-3"
|
||||
:label="{ text: 'Email', class: 'form-label' }"
|
||||
type="email"
|
||||
/>
|
||||
<MaterialInput
|
||||
id="password"
|
||||
class="input-group-outline mb-3"
|
||||
:label="{ text: 'Password', class: 'form-label' }"
|
||||
type="password"
|
||||
/>
|
||||
<MaterialSwitch
|
||||
class="d-flex align-items-center mb-3"
|
||||
id="rememberMe"
|
||||
labelClass="mb-0 ms-3"
|
||||
checked
|
||||
>Remember me</MaterialSwitch
|
||||
>
|
||||
|
||||
<div class="text-center">
|
||||
<MaterialButton
|
||||
class="my-4 mb-2"
|
||||
variant="gradient"
|
||||
color="success"
|
||||
fullWidth
|
||||
>Sign in</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Don't have an account?
|
||||
<a
|
||||
href="#"
|
||||
class="text-success text-gradient font-weight-bold"
|
||||
>Sign up</a
|
||||
>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer position-absolute bottom-2 py-2 w-100">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-lg-between">
|
||||
<div class="col-12 col-md-6 my-auto">
|
||||
<div
|
||||
class="copyright text-center text-sm text-white text-lg-start"
|
||||
>
|
||||
© {{ new Date().getFullYear() }}, made with
|
||||
<i class="fa fa-heart" aria-hidden="true"></i> by
|
||||
<a
|
||||
href="https://www.creative-tim.com"
|
||||
class="font-weight-bold text-white"
|
||||
target="_blank"
|
||||
>Creative Tim</a
|
||||
>
|
||||
for a better web.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-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-white"
|
||||
target="_blank"
|
||||
>Creative Tim</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://www.creative-tim.com/presentation"
|
||||
class="nav-link text-white"
|
||||
target="_blank"
|
||||
>About Us</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://www.creative-tim.com/blog"
|
||||
class="nav-link text-white"
|
||||
target="_blank"
|
||||
>Blog</a
|
||||
>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="https://www.creative-tim.com/license"
|
||||
class="nav-link pe-0 text-white"
|
||||
target="_blank"
|
||||
>License</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</Header>
|
||||
</template>
|
||||
@ -1,55 +0,0 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
default: "gradient",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "success",
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "md",
|
||||
},
|
||||
icon: {
|
||||
type: [String, Object],
|
||||
required: true,
|
||||
component: String,
|
||||
color: String,
|
||||
},
|
||||
content: {
|
||||
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="p-3 info-horizontal d-flex align-items-center">
|
||||
<div
|
||||
class="icon icon-shape text-center border-radius-xl"
|
||||
: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>
|
||||
<div class="description ps-3">
|
||||
<p class="mb-0" v-html="content" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,70 +0,0 @@
|
||||
<script setup>
|
||||
import RotatingCard from "../../../examples/cards/rotatingCards/RotatingCard.vue";
|
||||
import RotatingCardFront from "../../../examples/cards/rotatingCards/RotatingCardFront.vue";
|
||||
import RotatingCardBack from "../../../examples/cards/rotatingCards/RotatingCardBack.vue";
|
||||
import DefaultInfoCard from "../../../examples/cards/infoCards/DefaultInfoCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<section class="my-5 py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-4 ms-auto me-auto p-lg-4 mt-lg-0 mt-4">
|
||||
<RotatingCard>
|
||||
<RotatingCardFront
|
||||
image="https://images.unsplash.com/photo-1569683795645-b62e50fbf103?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
icon="touch_app"
|
||||
title="Feel the <br /> Material Kit"
|
||||
description="All the Bootstrap components that you need in a development have been
|
||||
re-design with the new look."
|
||||
/>
|
||||
|
||||
<RotatingCardBack
|
||||
image="https://images.unsplash.com/photo-1498889444388-e67ea62c464b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1365&q=80"
|
||||
title="Discover More"
|
||||
description="You will save a lot of time going from prototyping to full-functional
|
||||
code because all elements are implemented."
|
||||
:action="[
|
||||
{
|
||||
route: './/sections/page-sections/hero-sections.html',
|
||||
label: 'Start with Headers',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</RotatingCard>
|
||||
</div>
|
||||
<div class="col-lg-6 ms-auto">
|
||||
<div class="row justify-content-start">
|
||||
<DefaultInfoCard
|
||||
icon="content_copy"
|
||||
title="Full Documentation"
|
||||
description="Built by developers for developers. Check the foundation and
|
||||
you will find everything inside our documentation."
|
||||
/>
|
||||
<DefaultInfoCard
|
||||
icon="flip_to_front"
|
||||
title="Bootstrap 5 Ready"
|
||||
description="The world’s most popular front-end open source toolkit,
|
||||
featuring Sass variables and mixins."
|
||||
/>
|
||||
</div>
|
||||
<div class="row justify-content-start mt-5">
|
||||
<DefaultInfoCard
|
||||
class="mt-3"
|
||||
icon="price_change"
|
||||
title="Save Time & Money"
|
||||
description="Creating your design from scratch with dedicated designers can
|
||||
be very expensive. Start with our Design System."
|
||||
/>
|
||||
<DefaultInfoCard
|
||||
class="mt-3"
|
||||
icon="devices"
|
||||
title="Fully Responsive"
|
||||
description="Regardless of the screen size, the website content will
|
||||
naturally fit the given resolution."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,80 +0,0 @@
|
||||
<script setup>
|
||||
import ExampleCard from "../Components/ExampleCard.vue";
|
||||
import MaterialBadge from "../../../components/MaterialBadge.vue";
|
||||
|
||||
// images
|
||||
import imgSigninCover from "@/assets/img/signin-cover.png";
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="row text-center my-sm-5 mt-5">
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<MaterialBadge color="success" class="mb-3"
|
||||
>Boost creativity</MaterialBadge
|
||||
>
|
||||
<h2 class="">With our coded pages</h2>
|
||||
<p class="lead">
|
||||
The easiest way to get started is to use one of our <br />
|
||||
pre-built example pages.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6 mt-md-0 mt-5">
|
||||
<ExampleCard
|
||||
class="shadow-lg"
|
||||
title="About Us Page"
|
||||
image="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/pages/about-us.jpg"
|
||||
route="about"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 mt-md-0 mt-5">
|
||||
<ExampleCard
|
||||
class="shadow-lg"
|
||||
title="Contact Us Page"
|
||||
image="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/pages/contact.jpg"
|
||||
route="contactus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6 mt-md-0 mt-5">
|
||||
<ExampleCard
|
||||
classes="mt-5"
|
||||
title="Sign In Page"
|
||||
:image="imgSigninCover"
|
||||
route="signin-basic"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 mt-md-0 mt-5">
|
||||
<ExampleCard
|
||||
classes="shadow-lg"
|
||||
title="Author Page"
|
||||
image="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/presentation/pages/author.jpg"
|
||||
route="author"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mx-auto mt-md-0 mt-3">
|
||||
<div class="position-sticky" style="top: 100px !important">
|
||||
<h3>
|
||||
Presentation Pages for Company, Landing Pages, Blogs and Support
|
||||
</h3>
|
||||
<h6 class="text-secondary font-weight-normal">
|
||||
These is just a small selection of the multiple possibitilies you
|
||||
have. Focus on the business, not on the design.
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -1,123 +0,0 @@
|
||||
<script setup>
|
||||
import SimplePricingCard from "@/examples/cards/pricingCards/SimplePricingCard.vue";
|
||||
</script>
|
||||
<template>
|
||||
<section class="py-sm-7" id="pricing-soft-ui">
|
||||
<div class="bg-gradient-success position-relative mx-n3 overflow-hidden">
|
||||
<img
|
||||
src="@/assets/img/shapes/pattern-lines.svg"
|
||||
alt="pattern-lines"
|
||||
class="position-absolute start-0 top-md-0 w-100 opacity-6"
|
||||
/>
|
||||
<div
|
||||
class="container pb-lg-8 pb-7 pt-5 postion-relative z-index-2 position-relative"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-md-7 mx-auto text-center">
|
||||
<span class="badge bg-gradient-dark mb-2">Pricing</span>
|
||||
<h3 class="text-white">Ready to get Material Kit?</h3>
|
||||
<p class="text-white">
|
||||
Based on the license you get, you will have direct access to our
|
||||
team <br />
|
||||
of developers who built the product.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-lg-n8 mt-n6">
|
||||
<div class="container">
|
||||
<div class="row mt-5">
|
||||
<SimplePricingCard
|
||||
title="Freelancer"
|
||||
description="Good for a personal or client web/mobile app."
|
||||
:price="{ currency: '$', amount: '79' }"
|
||||
:action="{
|
||||
route: '/',
|
||||
label: 'Buy now',
|
||||
color: 'bg-gradient-dark',
|
||||
}"
|
||||
:specifications="[
|
||||
'Complete documentation',
|
||||
'Full code',
|
||||
'Projects - 1',
|
||||
'Team size - 1',
|
||||
'Support',
|
||||
'Free Updates - 6 months',
|
||||
]"
|
||||
/>
|
||||
|
||||
<SimplePricingCard
|
||||
title="Startup"
|
||||
description="Build your startup or client web/mobile app."
|
||||
:price="149"
|
||||
:specifications="[
|
||||
'Complete documentation',
|
||||
'Full code',
|
||||
'Projects - 1',
|
||||
'Team size - up to 5',
|
||||
'Support',
|
||||
'Free Updates - 12 months',
|
||||
]"
|
||||
/>
|
||||
|
||||
<SimplePricingCard
|
||||
color="bg-gradient-dark"
|
||||
title="Company"
|
||||
description="Perfect for web/mobile apps or SaaS projects."
|
||||
:price="249"
|
||||
:action="{ route: '', label: 'Buy now', color: 'btn-white' }"
|
||||
:specifications="[
|
||||
'Complete documentation',
|
||||
'Full code',
|
||||
'Use in SaaS',
|
||||
'Projects - unlimited',
|
||||
'Team Size - up to 20',
|
||||
'Priority support',
|
||||
'Free Updates - 12 months',
|
||||
]"
|
||||
/>
|
||||
|
||||
<SimplePricingCard
|
||||
title="Enterprise"
|
||||
description="Deploy large-scale projects which include redistribution
|
||||
rights."
|
||||
:price="599"
|
||||
:action="{
|
||||
route:
|
||||
'https://secure.avangate.com/order/checkout.php?PRODS=37189144&OPTIONS37189144=ENTERPRISE&CART=1&CARD=2&CLEAN_CART=1&SHORT_FORM=1',
|
||||
label: 'Buy now',
|
||||
color: 'bg-gradient-dark',
|
||||
}"
|
||||
:specifications="[
|
||||
'Complete documentation',
|
||||
'Full code',
|
||||
'Use in SaaS',
|
||||
'Projects - unlimited',
|
||||
'Team Size - more than 20',
|
||||
'Priority support',
|
||||
'Free Updates - 24 months',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p class="text-center mt-5">
|
||||
<i class="fa fa-lock" aria-hidden="true"></i> Secured Payment by
|
||||
<b> 2Checkout </b> with: <br /><br />
|
||||
<i class="fa fa-cc-paypal fa-2x me-1" aria-hidden="true"></i>
|
||||
<i class="fa fa-cc-visa fa-2x" aria-hidden="true"></i>
|
||||
<i class="fa fa-cc-mastercard fa-2x mx-1" aria-hidden="true"></i>
|
||||
<i class="fa fa-cc-amex fa-2x" aria-hidden="true"></i>
|
||||
</p>
|
||||
<p class="text-center max-width-500 mx-auto">
|
||||
<b>Info:</b> If you are a Registered Company inside the European
|
||||
Union you will be able to add your VAT ID after your Press "Buy
|
||||
Now"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user