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

singleTheme

master
Suvodip Ghosh 2023-02-21 13:18:52 +05:30
parent b08a619f09
commit feb6d0d9e9
9 changed files with 175 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/header-worksheet.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 171 KiB

BIN
public/img/homepage.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 78 KiB

BIN
public/tb-logo.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

25
src/components/Educators.vue
View File

@ -279,9 +279,6 @@ details[open] summary {
.body {
font-family: 'Quicksand', sans-serif;
}
.h2 {
font-size: 40px;
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
.h1-text {
@ -463,21 +460,35 @@ font-family: 'Quicksand', sans-serif;
@media screen and (min-width: 1500px) {
.hero-text {
font-size: 50px;
}
}
@media screen and (max-width: 1499px) {
.hero-text {
font-size: 40px;
}
}
@media screen and (max-width: 1199px) {
.hero-text {
font-size: 30px;
}
}
@media screen and (min-width: 1500px) {
.h2 {
font-size: 40px;
}
}
@media screen and (max-width: 1499px) {
.h2 {
font-size: 30px;
}
}
@media screen and (max-width: 1199px) {
.h2 {
font-size: 25px;
}
}
</style>
@ -552,7 +563,7 @@ export default {
.then(resp => resp.json())
.then(data => {
this.faqEducators=data.data
console.log(this.faqEducators)
// console.log(this.faqEducators)
})
}

143
src/components/HeroButton.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<div>
<div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
<div @click="showAbModal('abModal')" class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <button>Speak with Us</button></div>
<div class="grid text-base xl:text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 text-white shadow-2xl px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><a href="/themes"><button>Check Out Event</button></a></div>
</div>
<!-- <div @click="showAbModal('abModal')"> Show Modal</div> -->
<!-- Modal -->
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
<div class="block p-6 shadow-lg bg-white border-2 2xl:w-96 text-xl" style="background-color: #f5f6d7;">
<p class="text-blue-700 text-3xl font-semibold p-1">Get in Touch</p>
<div v-if="BlogQry">
<div class="form-group mb-1">
<label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
<input v-model="indexname" 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 v-model="indexemail" 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="form-group mb-1">
<label for="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Your Phone Number</label>
<input v-model="indexnumber" 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="exampleInputPhoneNumber" class="form-label inline-block mb-2 text-gray-700">Write your Description....</label>
<textarea v-model="indexdescription" 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"></textarea>
</div>
<div class="flex justify-end pt-2">
<button @click="saveBlogQry" class="px-2 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded-tl-xl rounded-br-xl 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">Send</button>
</div>
</div>
<div v-else>
<h1 class="text-center p-16 py-32 text-3xl text-color-1">Thank You</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
abModal:false,
abID:'',
indexname: null,
indexemail: null,
indexnumber: null,
BlogQry: true,
indexdescription:null,
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
},
saveBlogQry(){
let formData = new FormData();
formData.append('Name', this.indexname);
formData.append('Email', this.indexemail);
formData.append('Phone', this.indexnumber);
formData.append('Message', this.indexdescription);
formData.append('formName', 'index-get-in-touch');
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/',
{
method: 'POST',
body: formData,
}
)
.then(response => response.json())
.then(data => {
// console.log(data)
});
// formData=""
this.BlogQry=false
}
},
mounted: function () {
// this.getVideos()
}
}
</script>
<style scoped>
.abModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
/* background-color: aliceblue; */
padding: 20px;
/* border: 1px solid #888; */
width: fit-content;
margin: 0 auto;
}
.close {
color: rgb(40, 99, 226);
float: right;
font-size: 28px;
padding: 10px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: rgb(40, 99, 226);
text-decoration: none;
padding: 10px;
cursor: pointer;
font-size: 28px;
background-color: rgb(237, 240, 239);
border-radius: 100%;
}
</style>

2
src/layouts/Layout.astro
View File

@ -12,7 +12,7 @@ const { title } = Astro.props;
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml/ico" href="/favicon-teeny-beans.ico" />
<link rel="icon" type="image/svg+xml/ico" href="/tb-logo.ico" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>

15
src/pages/index.astro
View File

@ -2,6 +2,7 @@
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import SliderLessonplan from "../components/SliderLessonplan.vue";
import HeroButton from "../components/HeroButton.vue";
import Roundchart from "../components/Roundchart.vue";
const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=home&filter[property][_eq]=teenybeans_curriculum');
@ -19,11 +20,12 @@ import Footer from "../components/Footer.vue";
<h1 class="text-color-1 hero-text font-bold w-12/12 px-4">Tech-First Preschool Curriculum</h1>
<h2 class="h2-text font-bold w-fit px-4">Start Planning Your Classroom Curriculum now</h2>
<p class="font-20px text-justify pt-8 px-4">Want your preschool curriculum to bring out the most learned and accomplished children? What is the delay then? With the right classroom curriculum, raise the elegance of teaching and set new levels for your competitors.</p>
<div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
<div class="rounded-tl-full text-sm xl:text-base rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Speak with Us</button></a></div>
<div class="grid text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="rounded-tl-full text-sm xl:text-base rounded-br-full col-span-3 text-white shadow-2xl px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><a href="/themes"><button>Check Out Event</button></a></div>
</div>
<!-- <div class="grid grid-cols-7 place-items-center pt-6 w-fit p-4">
<div class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 shadow-2xl text-blue-700 px-4 md:px-8 p-3 border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"> <a href="/educators#getintouch"><button>Speak with Us</button></a></div>
<div class="grid text-base xl:text-lg col-span-1 font-bold text-color-2">OR</div>
<div class="rounded-tl-full text-sm xl:text-lg rounded-br-full col-span-3 text-white shadow-2xl px-4 md:px-8 p-3 bg-blue-700 te border-2 border-blue-700 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"><a href="/themes"><button>Check Out Event</button></a></div>
</div> -->
<HeroButton client:visible/>
</div>
<div class="flex w-full justify-end place-items-end">
<img class="h-fit " src="/img/homepage1c.png" alt="">
@ -48,7 +50,7 @@ import Footer from "../components/Footer.vue";
<h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
<!-- <a href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
<a target="_blank" href="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
<a target="_blank" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt="">
@ -233,7 +235,6 @@ import Footer from "../components/Footer.vue";
<div set:html="data.content"></div>
</details>
)}
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>

2
src/pages/occasion/index.astro
View File

@ -52,7 +52,7 @@ import Footer from "../../components/Footer.vue";
<img class="w-fit h-fit" src={'https://curriculum-app-api.beanstalkedu.com/assets/'+data.data[0].occassion} alt={occassion[0].occassion_text }>
</div>
</div>
</section> <!-- hero section Ends ???set:html="data.meta_description" -->
</section> <!-- hero section Ends" -->
<section class="container mx-auto px-2 xl:px-24 pt-24">
<h1 class=" text-blue-700 h1-text px-4 font-semibold">Check Out Our Occasion Blog</h1>
<p class="text-justify text-xl lg:text-3xl pt-2 text-color-2 px-4">Find relevant helpful articles for marketing preschool solutions below and get to know more about the same. </p>

2
src/pages/themes/[id].astro
View File

@ -40,7 +40,7 @@ const ytvResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/t
const ytvRespJson = await ytvResp.json();
const ytvRespData = ytvRespJson.data.reverse();
const allthemesResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/themes?filter[status][_eq]=draft&limit=3');
const allthemesResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/themes?limit=3&filter[id][_neq]=' + thisThemesID);
const allthemesRespJson = await allthemesResp.json();
const allthemesRespData = allthemesRespJson.data;