257 lines
14 KiB
Vue
257 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<section class="container mx-auto px-4 xl:px-24">
|
||
<h1 class="text-color-3 text-5xl text-center py-16 font-semibold">Educator's License</h1>
|
||
<div class="flex justify-center">
|
||
<div class="grid ">
|
||
<div class="wrapper flex flex-col lg:flex-row text-lg gap-4 place-items-center">
|
||
</div>
|
||
<div class="grid grid-cols-2 py-3">
|
||
<h1 class="grid ">Student Accounts</h1>
|
||
<div class="grid place-items-end"><strong class="">(30)</strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col lg:flex-row justify-center gap-4 px-4">
|
||
<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="gtname" 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="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
|
||
<input type="text" v-model="gtname" 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>
|
||
<div class="flex justify-center my-10"><button class="background text-white py-3 px-4 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
|
||
</section>
|
||
<section class="container mx-auto px-4 xl:px-24 my-16">
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-6">
|
||
<div class="grid grid-rows-2 w-full h-full">
|
||
<div class="grid background place-items-center rounded-lg py-8">
|
||
<h1 class="text-3xl text-white ">Monthly</h1>
|
||
</div>
|
||
<div class="grid shadow-2xl rounded-b-xl place-items-center">
|
||
<div class="flex flex-col justify-center place-items-center">
|
||
<p class="text-4xl font-bold">₹ 100</p>
|
||
<p>(inclusive of all costs)</p>
|
||
<a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
|
||
<span class="py-4"></span>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-4xl p-1 text-center">$100</h1>
|
||
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
|
||
<!-- <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button> -->
|
||
<span class="py-4"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-rows-2 w-full">
|
||
<div class="grid background place-items-center rounded-lg">
|
||
<h1 class="text-3xl text-white ">Bi-Yearly</h1>
|
||
</div>
|
||
<div class="grid shadow-2xl rounded-b-xl place-items-center">
|
||
<div class="flex flex-col justify-center place-items-center">
|
||
<p class="text-4xl font-bold">₹ 540</p>
|
||
<p>(inclusive of all costs)</p>
|
||
<a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
|
||
<span class="py-4"></span>
|
||
</div>
|
||
<div class="flex flex-col justify-center place-items-center">
|
||
<h1 class="text-4xl p-1">
|
||
<span class="line-through text-slate-400">$600</span> $540
|
||
</h1>
|
||
<span class="text-lg text-color-2">(10% Discount)</span>
|
||
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
|
||
<!-- <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button> -->
|
||
<span class="py-4"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-rows-2 w-full">
|
||
<div class="grid background place-items-center rounded-lg">
|
||
<h1 class="text-3xl text-white ">Yearly</h1>
|
||
</div>
|
||
<div class="grid shadow-2xl rounded-b-xl place-items-center">
|
||
<div class="flex flex-col justify-center place-items-center">
|
||
<p class="text-4xl font-bold">₹ 1020</p>
|
||
<p>(inclusive of all costs)</p>
|
||
<a style=" width: 135px; border-radius: 8px; background-color: #00CD08; text-align: center; font-weight: 800; padding: 11px 0px; color: white; font-size: 18px; display: inline-block; text-decoration: none; " href='https://pmny.in/DJx35l8vrQAH' > Pay Now </a>
|
||
<span class="py-4"></span>
|
||
</div>
|
||
<div class="flex flex-col justify-center place-items-center">
|
||
<h1 class="text-4xl p-1"><span class="line-through text-slate-400">$1200</span> $1020 </h1>
|
||
<span class="text-lg text-color-2">(15% Discount)</span>
|
||
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
|
||
<!-- <button style="background-color:#00CD08;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em;cursor:pointer"id="checkout-button-price_1MUNBLSJqIKN8UICnyrOswxg"role="link" type="button"> Checkout</button> -->
|
||
<span class="py-4"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> -->
|
||
</section>
|
||
<section class="container mx-auto my-16 px-4">
|
||
<div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
|
||
<div class="flex flex-col justify-center">
|
||
<div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
|
||
<h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
|
||
<h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
|
||
<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" 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" 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="flex flex-col form-control place-content-center">
|
||
<div class="text-left py-2">Your Message</div>
|
||
<textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
|
||
</div>
|
||
<div class="form-group form-check mb-6 pt-4">
|
||
<input 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="" 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>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// Import Swiper Vue.js components
|
||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||
import 'swiper/css/navigation';
|
||
import 'swiper/css/pagination';
|
||
import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
|
||
|
||
// Import Swiper styles
|
||
import 'swiper/css';
|
||
// const swiper = new Swiper('.swiper', {
|
||
// autoplay: {
|
||
// delay: 5000,
|
||
// },
|
||
// });
|
||
|
||
export default {
|
||
components: {
|
||
Swiper,
|
||
SwiperSlide,
|
||
},
|
||
setup() {
|
||
const onSwiper = (swiper) => {
|
||
// console.log(swiper);
|
||
};
|
||
const onSlideChange = () => {
|
||
// console.log('slide change');
|
||
};
|
||
|
||
|
||
return {
|
||
onSwiper,
|
||
onSlideChange,
|
||
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
|
||
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
page: null,
|
||
faqHome: null,
|
||
themes:null,
|
||
lessonplan:null,
|
||
stories: null,
|
||
ideas: null,
|
||
worksheets: null,
|
||
videos: null,
|
||
youtube: null,
|
||
audio: null,
|
||
isLoading: true,
|
||
|
||
}
|
||
},
|
||
mounted: function () {
|
||
fetch('https://management.beanstalkedu.com/items/lesson_plan')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
this.lessonplan = data.data
|
||
// this.isLoading = false
|
||
// console.log(this.lessonplan)
|
||
// return this.page[0].id
|
||
})
|
||
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
|
||
.then(resp => resp.json())
|
||
.then(data => {
|
||
this.faqHome=data.data
|
||
// console.log(this.faqHome)
|
||
})
|
||
},
|
||
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
.slider {
|
||
-webkit-appearance: none;
|
||
height: 6px;
|
||
border-radius: 16px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
outline: none;
|
||
opacity: 0.7;
|
||
-webkit-transition: .2s;
|
||
transition: opacity .2s;
|
||
}
|
||
|
||
|
||
|
||
/* .slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 2px;
|
||
height: 2px;
|
||
background: rgba(0, 102, 255, 1);
|
||
border-radius: 50px;
|
||
cursor: pointer;
|
||
} */
|
||
|
||
.slider::-moz-range-thumb {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: rgba(0, 102, 255, 1);
|
||
border-radius: 50px;
|
||
cursor: pointer;
|
||
}
|
||
.slider:hover::-moz-range-thumb {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: rgb(0, 102, 255, 1);
|
||
border-radius: 50px;
|
||
border-width: 6px;
|
||
border-color: rgba(217, 214, 214, 1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.border-radius{
|
||
border-top-left-radius: 200px;
|
||
height: 400px;
|
||
}
|
||
.background {
|
||
background-color: #00CD08;
|
||
}
|
||
.text-color-1 {
|
||
color: #333333;
|
||
}
|
||
.text-color-2 {
|
||
color: #00CD08;
|
||
}
|
||
.text-color-3 {
|
||
color: #00CD08;
|
||
}
|
||
|
||
</style> |