318 lines
12 KiB
Vue
318 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<section class="container-fluid bg3 shadow-2xl">
|
||
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
|
||
<div class="flex flex-col px-6 w-full justify-center">
|
||
<h1 class="text-blue-700 hero-text font-bold">Check out our Premium Plans</h1>
|
||
<p class="font-20px text-color-2">We have plans according to everyone's needs.</p>
|
||
<p class="font-20px text-color-2">Check out our plans and what work's for you the best</p>
|
||
</div>
|
||
<div class="flex w-fit justify-center place-items-center">
|
||
<img class="w-fit h-fit rounded-3xl cursor-none" src="/img/price1.png" alt="">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto px-4 xl:px-24">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 place-items-center my-24 gap-16">
|
||
<div class="grid box1 relative">
|
||
<div id="d-wrapper">
|
||
<div class="zig-zag-bottom absolute inset-x-0 top-0 ">
|
||
<h1 class="text-center text-4xl text-white ">Educator’s License</h1>
|
||
</div>
|
||
</div>
|
||
<h1 class="text-center mt-48 text-2xl text3">For Individual Educators</h1>
|
||
<h1 class="text-center mt-4 text-3xl text3">1 Teacher’s Account</h1>
|
||
<h1 class="text-center mt-4 text-3xl text3">Free Resources</h1>
|
||
<div class="mt-28 flex justify-center">
|
||
<a href="/educators-license"><h1 class="text-center text-3xl bg2 rounded-3xl py-4 text-white font-semibold w-fit px-16">GET QUOTE</h1></a>
|
||
</div>
|
||
</div>
|
||
<div class="grid box2 relative">
|
||
<div id="d-wrapper2" class="bg3">
|
||
<div class="zig-zag-bottom absolute inset-x-0 top-0">
|
||
<h1 class="text-center text-4xl text-white">School License</h1>
|
||
|
||
</div>
|
||
</div>
|
||
<h1 class="text-center mt-40 text-2xl text3">For Preschools</h1>
|
||
<h1 class="text-center mt-4 text-3xl text3">Multiple Teacher’s Accounts</h1>
|
||
<h1 class="text-center mt-4 text-2xl text3">10 Children Accounts/ Teacher</h1>
|
||
<h1 class="text-center mt-4 text-3xl text3">Free Resources</h1>
|
||
<div class="mt-10 flex justify-center">
|
||
<a href="/teachers-license"><h1 class="text-center text-3xl bg4 rounded-3xl py-4 text-white font-semibold w-fit px-16">GET QUOTE</h1></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="container mx-auto px-4 xl:px-24 mb-16">
|
||
<details>
|
||
<summary>
|
||
<div class="grid grid-cols-3 place-items-center ">
|
||
<div class="grid text1 text-xl ">Educator's License</div>
|
||
<div class="grid text-black">VS</div>
|
||
<div class="grid text2 text-xl">School License</div>
|
||
</div>
|
||
</summary>
|
||
<div class="grid grid-cols-2 place-items-center ">
|
||
<div class="grid">
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
</div>
|
||
<div class="grid">
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
<span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
</section>
|
||
<section class="container mx-auto px-4 xl:px-24">
|
||
<div class="flex flex-col lg:flex-row place-items-center justify-center">
|
||
<div class="flex flex-col justify-center md:px-28 lg:px-0">
|
||
<div class="bg-gray-100 text-center border-radius px-20 lg:px-20">
|
||
<h1 class="text-3xl md:text-4xl text-center pt-32 p-3 text-blue-700 font-semibold">Talk to Us ></h1>
|
||
<h1 class="text-xl lg:text-2xl lg:w-96">If you want to know which plan works for you the best, write to us and we’ll get back to you with best advice</h1>
|
||
</div>
|
||
<!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
|
||
</div>
|
||
<div class="flex flex-col ">
|
||
<div class="block p-6 rounded-xl shadow-lg bg-white w-96 border-2 py-14 text-xl">
|
||
<div v-if="isLoading">
|
||
<div class="form-group mb-1">
|
||
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
|
||
<input type="text" v-model="name" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
|
||
</div>
|
||
<div class="form-group mb-1">
|
||
<label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
|
||
<input type="email" v-model="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
|
||
</div>
|
||
<div class="form-group mb-1">
|
||
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
|
||
<input type="text" v-model="phone" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
|
||
</div>
|
||
<div class="form-group mb-1"><label for="exampleInputYourAddress" class="form-label inline-block mb-2 text-gray-700">Your Address</label>
|
||
<input type="text" v-model="address" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
|
||
</div>
|
||
<div class="form-group form-check mb-6"><input v-model="flag" type="checkbox" value="whatsapp" class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
|
||
<label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
|
||
</div>
|
||
<button @click="saveContactForm" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact Us</button>
|
||
</div>
|
||
<div v-else>
|
||
<h2 class="text-center py-40 text-4xl">Thank You!</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
<style scoped>
|
||
details {
|
||
border: 1px solid #d4d4d4;
|
||
padding: .75em .75em 0;
|
||
/* margin-top: 10px; */
|
||
/* box-shadow:0 0 8px #d4d4d4; */
|
||
}
|
||
|
||
summary {
|
||
font-weight: bold;
|
||
margin: -.75em -.75em 0;
|
||
padding: .75em;
|
||
background-color: #F9F9F9;
|
||
color: #fff;
|
||
}
|
||
|
||
details[open] {
|
||
padding: .75em;
|
||
border-bottom: 1px solid #d4d4d4;
|
||
}
|
||
|
||
details[open] summary {
|
||
border-bottom: 1px solid #d4d4d4;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.font-20px {
|
||
font-size: 20px;
|
||
}
|
||
@media screen and (min-width: 801px) {
|
||
.hero-text {
|
||
font-size: 50px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 800px) {
|
||
.hero-text {
|
||
font-size: 30px;
|
||
|
||
}
|
||
}
|
||
.bg3 {
|
||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||
}
|
||
.bg0 {
|
||
background-color: #00CD08;
|
||
}
|
||
.text {
|
||
color: #00CD08;
|
||
}
|
||
.border-radius{
|
||
border-top-left-radius: 200px;
|
||
height: 400px;
|
||
}
|
||
.text1 {
|
||
color: #FFA25F;
|
||
}
|
||
.text2{
|
||
color:#5F008C;
|
||
}
|
||
.text3 {
|
||
color: #666666;
|
||
}
|
||
|
||
.bg2 {
|
||
background-color: #FFA25F;
|
||
}
|
||
.bg4 {
|
||
background-color: #5F008C;
|
||
}
|
||
|
||
.box {
|
||
background-color: #dfdedf;
|
||
border-top-left-radius: 200px;
|
||
|
||
}
|
||
#d-wrapper {
|
||
background-color: #fff;
|
||
}
|
||
#d-wrapper * {
|
||
|
||
margin:0;
|
||
padding:0;}
|
||
|
||
#d-wrapper div.sep {
|
||
min-height: 200px;
|
||
}
|
||
#d-wrapper div > * {
|
||
margin: 0 40px;
|
||
}
|
||
#d-wrapper .zig-zag-bottom{
|
||
margin: 32px 0;
|
||
margin-top: 0;
|
||
background: #FFA25F;
|
||
width: 100%;
|
||
}
|
||
#d-wrapper .zig-zag-bottom,
|
||
#d-wrapper .zig-zag-top{
|
||
padding: 32px 0;
|
||
}
|
||
#d-wrapper2 .zig-zag-bottom,
|
||
#d-wrapper2 .zig-zag-top{
|
||
padding: 32px 0;
|
||
}
|
||
#d-wrapper .zig-zag-bottom:after{
|
||
background:
|
||
linear-gradient(-45deg, transparent 16px, #FFA25F 0),
|
||
linear-gradient(45deg, transparent 16px, #FFA25F 0);
|
||
background-size: 24px 32px;
|
||
content: "";
|
||
display: block;
|
||
|
||
width: 100%;
|
||
height: 32px;
|
||
|
||
position: relative;
|
||
top:50px;
|
||
left:0px;
|
||
}
|
||
#d-wrapper2 .zig-zag-bottom:after{
|
||
background:
|
||
linear-gradient(-45deg, transparent 16px, #9B00FA 0),
|
||
linear-gradient(45deg, transparent 16px, #9B00FA 0);
|
||
background-size: 24px 32px;
|
||
content: "";
|
||
display: block;
|
||
|
||
width: 100%;
|
||
height: 32px;
|
||
|
||
position: relative;
|
||
top:50px;
|
||
left:0px;
|
||
}
|
||
#d-wrapper2 .zig-zag-bottom{
|
||
margin: 32px 0;
|
||
margin-top: 0;
|
||
background: #9B00FA;
|
||
width: 100%;
|
||
}
|
||
.box1 {
|
||
width: 90%;
|
||
height: 550px;
|
||
/* padding: 25px; */
|
||
border: 1px solid #FFA25F;
|
||
}
|
||
.box2 {
|
||
width: 90%;
|
||
height: 550px;
|
||
/* padding: 25px; */
|
||
border: 1px solid #9B00FA;
|
||
}
|
||
</style>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isLoading: true,
|
||
name:null,
|
||
email:null,
|
||
phone:null,
|
||
address:null,
|
||
flag:null,
|
||
contact_form:{}
|
||
}
|
||
},
|
||
mounted: function () {
|
||
// this.getItemByCategory()
|
||
// console.log(this.smProducts)
|
||
// console.log(this.$route.query.cat)
|
||
// console.log(this.fruits)
|
||
},
|
||
methods: {
|
||
saveContactForm() {
|
||
let formData={
|
||
"name":this.name,
|
||
"email":this.email,
|
||
"phone":this.phone,
|
||
"address":this.address,
|
||
"flag":this.flag,
|
||
}
|
||
let dataToSave = {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
// 'Authorization': 'Bearer my-token',
|
||
// 'My-Custom-Header': 'foobar'
|
||
},
|
||
body: JSON.stringify(formData)
|
||
};
|
||
fetch('https://curriculum-app-api.beanstalkedu.com/items/contact_form', dataToSave)
|
||
.then(response => response.json())
|
||
.then(data => this.contact_form = data.data);
|
||
// console.log(this.contact_form)
|
||
this.isLoading=false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|