Suvodip Ghosh 2023-03-04 18:21:45 +05:30
parent 6337c4c96f
commit 6cdfe4e107
5 changed files with 256 additions and 22 deletions

View File

@ -1,5 +1,95 @@
<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">&#8377; 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">&#36;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">&#8377; 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">&#36;600</span>&nbsp;&nbsp;&#36;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">&#8377; 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">&#36;1200</span>&nbsp;&nbsp;&#36;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">
@ -35,14 +125,76 @@
</template>
<script>
export default {
data() {
return {
sliderValue: 55,
}
},
}
</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 {

View File

@ -85,21 +85,21 @@
<div v-else class="bg-white p-3 px-20 text-base rounded shadow text-slate-600"> Thank You!</div>
</div>
<div class="flex pt-2 ml-4 flex-inline gap-6 ">
<a href="">
<a href="https://www.facebook.com/teenybeanspreschoolsolution" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 50; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 51.358 90 c -0.238 0 -0.472 -0.086 -0.654 -0.244 c -0.22 -0.189 -0.346 -0.466 -0.346 -0.756 V 58.708 c 0 -0.553 0.447 -1 1 -1 h 9.733 l 1.332 -10.388 H 51.358 c -0.553 0 -1 -0.447 -1 -1 v -7.909 c 0 -3.477 0.845 -7.031 7.107 -7.031 l 5.524 -0.002 v -9.186 c -1.686 -0.165 -4.913 -0.383 -8.508 -0.383 c -9.298 0 -14.849 5.748 -14.849 15.375 v 9.136 c 0 0.553 -0.448 1 -1 1 h -9.64 v 10.388 h 9.64 c 0.552 0 1 0.447 1 1 v 30.291 c 0 0.29 -0.126 0.566 -0.346 0.757 c -0.22 0.188 -0.512 0.272 -0.798 0.232 C 16.547 86.79 0 67.549 0 45.233 C 0 20.292 20.187 0 45 0 c 24.813 0 45 20.292 45 45.233 c 0 22.321 -16.551 41.562 -38.498 44.756 C 51.454 89.996 51.406 90 51.358 90 z M 52.358 59.708 v 28.12 C 72.759 84.285 88 66.178 88 45.233 C 88 21.394 68.71 2 45 2 C 21.29 2 2 21.394 2 45.233 C 2 66.174 17.237 84.28 37.633 87.826 V 59.708 h -9.64 c -0.552 0 -1 -0.447 -1 -1 V 46.32 c 0 -0.552 0.448 -1 1 -1 h 9.64 v -8.136 c 0 -10.717 6.456 -17.375 16.849 -17.375 c 4.476 0 8.428 0.335 9.641 0.497 c 0.496 0.066 0.867 0.49 0.867 0.991 v 11.08 c 0 0.552 -0.447 1 -1 1 l -6.524 0.003 c -4.317 0 -5.107 1.694 -5.107 5.031 v 6.909 h 11.202 c 0.287 0 0.561 0.124 0.751 0.339 c 0.189 0.216 0.277 0.502 0.241 0.788 l -1.589 12.388 c -0.064 0.499 -0.489 0.873 -0.992 0.873 H 52.358 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
</a>
<a href="">
<a href="https://twitter.com/teeny_beans" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="35" height="35" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 30.318 79.749 c -9.466 0 -18.684 -2.702 -26.659 -7.812 L 0 69.591 L 4.317 70.1 c 1.291 0.152 2.62 0.23 3.947 0.23 c 6.65 0 12.969 -1.91 18.428 -5.548 c -6.56 -1.122 -12.061 -5.799 -14.136 -12.275 l -0.515 -1.605 l 1.656 0.318 c 1.046 0.2 2.109 0.305 3.146 0.289 c -6.164 -2.93 -10.31 -9.231 -10.31 -16.302 c 0 -0.094 0 -0.183 0.005 -0.272 l 0.087 -1.598 l 1.398 0.778 c 1.218 0.678 2.524 1.193 3.873 1.532 C 8.577 32.3 6.672 27.756 6.672 22.936 c 0 -3.184 0.845 -6.32 2.443 -9.067 l 0.727 -1.25 l 0.913 1.121 c 8.213 10.075 20.223 16.353 33.117 17.353 c -0.142 -0.918 -0.214 -1.857 -0.214 -2.804 c 0 -9.946 8.094 -18.038 18.042 -18.038 c 4.778 0 9.402 1.923 12.773 5.293 c 3.512 -0.751 6.865 -2.064 9.973 -3.906 l 2.266 -1.343 l -0.803 2.509 c -0.903 2.823 -2.487 5.36 -4.59 7.408 c 1.898 -0.464 3.745 -1.093 5.524 -1.884 L 90 16.926 l -1.917 2.872 c -2.26 3.384 -5.055 6.329 -8.312 8.759 c 0.019 0.568 0.027 1.139 0.027 1.711 C 79.798 54.591 61.29 79.749 30.318 79.749 z M 8.317 72.331 c 6.775 3.554 14.303 5.416 22.002 5.416 c 29.719 0 47.479 -24.141 47.479 -47.48 c 0 -0.723 -0.015 -1.442 -0.047 -2.158 l -0.024 -0.54 l 0.438 -0.317 c 2.329 -1.683 4.414 -3.639 6.228 -5.84 c -2.202 0.722 -4.48 1.226 -6.808 1.505 l -4.647 0.555 l 4.013 -2.407 c 2.569 -1.541 4.638 -3.743 5.999 -6.348 c -2.736 1.337 -5.624 2.309 -8.618 2.898 l -0.543 0.107 l -0.38 -0.404 c -3.023 -3.221 -7.291 -5.068 -11.707 -5.068 c -8.845 0 -16.041 7.194 -16.041 16.037 c 0 1.25 0.14 2.48 0.415 3.657 l 0.303 1.294 l -1.327 -0.067 c -13.439 -0.675 -26.065 -6.854 -34.876 -17.015 c -0.985 2.115 -1.501 4.431 -1.501 6.778 c 0 5.377 2.668 10.368 7.137 13.351 l 2.906 1.94 l -3.492 -0.107 c -2.276 -0.07 -4.536 -0.582 -6.627 -1.493 c 0.624 7.005 5.816 12.902 12.803 14.301 l 4.156 0.833 l -4.089 1.114 c -2.081 0.566 -4.249 0.76 -6.425 0.556 c 2.488 5.693 8.088 9.488 14.404 9.605 l 2.814 0.053 l -2.215 1.735 C 23.789 69.725 16.277 72.319 8.317 72.331 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
</a>
<a href="">
<a href="https://www.instagram.com/teenybeans.in/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 63.429 2 C 76.977 2 88 13.023 88 26.571 v 36.858 C 88 76.977 76.977 88 63.429 88 H 26.571 C 13.023 88 2 76.977 2 63.429 V 26.571 C 2 13.023 13.023 2 26.571 2 H 63.429 M 63.429 0 H 26.571 C 11.896 0 0 11.896 0 26.571 v 36.858 C 0 78.104 11.896 90 26.571 90 h 36.858 C 78.104 90 90 78.104 90 63.429 V 26.571 C 90 11.896 78.104 0 63.429 0 L 63.429 0 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
@ -109,7 +109,7 @@
</g>
</svg>
</a>
<a href="">
<a href="https://www.linkedin.com/showcase/teeny-beans" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="30" height="30" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 31.187 70.956 H 20.822 c -0.552 0 -1 -0.447 -1 -1 V 36.617 c 0 -0.552 0.448 -1 1 -1 h 10.365 c 0.552 0 1 0.448 1 1 v 33.339 C 32.187 70.509 31.739 70.956 31.187 70.956 z M 21.822 68.956 h 8.365 V 37.617 h -8.365 V 68.956 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
@ -119,7 +119,7 @@
</g>
</svg>
</a>
<a href="https://www.youtube.com/channel/UC4ppJKZgGaOxexol-zMwZDQ">
<a href="https://www.youtube.com/channel/UC4ppJKZgGaOxexol-zMwZDQ" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="33" height="33" viewBox="0 0 256 256" xml:space="preserve">
<g style="stroke: none; stroke-width: 5; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 45 15.5 L 45 15.5 c 0.279 0 27.959 0.021 34.646 1.813 c 3.184 0.851 5.69 3.357 6.542 6.542 C 87.978 30.537 88 44.856 88 45 c 0 0.144 -0.022 14.463 -1.813 21.146 c -0.851 3.184 -3.357 5.69 -6.542 6.542 C 72.959 74.479 45.279 74.5 45 74.5 c -0.279 0 -27.959 -0.021 -34.646 -1.813 c -3.184 -0.851 -5.69 -3.357 -6.542 -6.542 C 2.022 59.463 2 45.144 2 45 c 0 -0.144 0.022 -14.463 1.813 -21.146 c 0.851 -3.184 3.357 -5.69 6.542 -6.542 C 17.041 15.521 44.721 15.5 45 15.5 M 45 13.5 c 0 0 -28.144 0 -35.162 1.881 c -3.872 1.035 -6.922 4.085 -7.957 7.957 C 0 30.356 0 45 0 45 s 0 14.644 1.881 21.662 c 1.035 3.872 4.085 6.922 7.957 7.957 C 16.856 76.5 45 76.5 45 76.5 s 28.144 0 35.162 -1.881 c 3.872 -1.035 6.922 -4.085 7.957 -7.957 C 90 59.644 90 45 90 45 s 0 -14.644 -1.881 -21.662 c -1.035 -3.872 -4.085 -6.922 -7.957 -7.957 C 73.144 13.5 45 13.5 45 13.5 L 45 13.5 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />

View File

@ -23,6 +23,74 @@
</div>
<div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
</section>
<section class="container mx-auto my-16 px-4 xl:px-24">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center justify-center my-4 gap-x-16 gap-y-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 h-fit font-bold">Monthly</h1>
</div>
<div class="grid shadow-2xl rounded-b-lg place-items-center">
<div class="flex flex-col justify-center place-items-center">
<p class="text-4xl font-bold">&#8377; 100</p>
<p>(inclusive of all costs)</p>
<a style=" width: 135px; border-radius: 8px; background-color: #124BBD; 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">&#36;100</h1>
<h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
<!-- <button style="background-color:#124BBD;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 h-full">
<div class="grid background place-items-center rounded-lg">
<h1 class="text-3xl text-white font-bold">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">&#8377; 540</p>
<p>(inclusive of all costs)</p>
<a style=" width: 135px; border-radius: 8px; background-color: #124BBD; 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">&#36;600</span>&nbsp;&nbsp;&#36;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:#124BBD;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 h-full">
<div class="grid background place-items-center rounded-lg">
<h1 class="text-3xl text-white font-bold">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">&#8377; 1020</p>
<p>(inclusive of all costs)</p>
<a style=" width: 135px; border-radius: 8px; background-color: #124BBD; 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">&#36;1200</span>&nbsp;&nbsp;&#36;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:#124BBD;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 id="error-message"></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">Pay Now</button></div> -->
</section>
</div>
</template>
<script is:inline>
@ -75,4 +143,21 @@
border-color: rgba(217, 214, 214, 1);
cursor: pointer;
}
.border-radius{
border-top-left-radius: 200px;
height: 400px;
width: 100%;
}
.background {
background-color: #124BBD;
}
.text-color-1 {
color: #333333;
}
.text-color-2 {
color: #124BBD;
}
.text-color-3 {
color: #124BBD;
}
</style>

View File

@ -12,7 +12,7 @@ const country = data.country;
<Menu/>
<main>
<div>
<section class="container mx-auto px-4 xl:px-24">
<!-- <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 ">
@ -109,8 +109,7 @@ const country = data.country;
</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> -->
</div>
</main>
<EducatorsLicenseForm client:visible/>

View File

@ -15,7 +15,7 @@ const country = data.country;
<main>
<div>
<!-- <h1>{data.country}</h1> -->
<section class="container mx-auto my-16 px-4 xl:px-24">
<!-- <section class="container mx-auto my-16 px-4 xl:px-24">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center justify-center my-4 gap-x-16 gap-y-6">
<div class="grid grid-rows-2 w-full h-fit">
<div class="grid background place-items-center rounded-lg py-8">
@ -89,9 +89,7 @@ const country = data.country;
</div>
</div>
<div id="error-message"></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">Pay Now</button></div> -->
</section>
</section> -->
</div>
</main>
<SchoolLicenseForm client:visible/>