mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 21:04:21 +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