mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 12:14:22 +08:00
105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<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">
|
||
Work with an amazing <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>
|