dwd-projects/teenybeanspreschoolcurriculum.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Suvodip Ghosh
2023-02-11 17:03:21 +05:30
parent ff82456c67
commit af529f802c
27 changed files with 1407 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
src/components/Premium.vue Normal file
View File

@@ -0,0 +1,317 @@
<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 py-4 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">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 uppercase 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: 100%;
height: 550px;
/* padding: 25px; */
border: 1px solid #FFA25F;
}
.box2 {
width: 100%;
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>