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

faq

Browse Source
This commit is contained in:
Suvodip Ghosh
2023-02-27 20:06:42 +05:30
parent 4d0e7be92d
commit b58c79de85
20 changed files with 217 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Audio-books.vue
View File

@@ -146,22 +146,21 @@
</div>
</div>
</section> -->
<section class="container mx-auto py-20">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48 px-4 xl:px-24">
<div class="grid h-fit">
<h1 class="text-4xl py-6 text-blue-700 font-bold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqAudio in faqAudio" :key="faqAudio.id" class="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
<div v-if="faqAudio" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqAudio.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqAudio.content"></p>
</div>
</div>
</div>
<section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit ">
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqAudio in faqAudio" :key="faqAudio.id">
<details>
<summary>
<div class="flex inline-flex cursor-pointer" v-if="faqAudio"> &nbsp; {{faqAudio.title}} </div>
</summary>
<div v-html="faqAudio.content"></div>
</details>
</div>
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
<div class="grid place-items-center"><img src="/img/frequentlycc.png" alt=""></div>
</div>
</section>
<div v-if="abModal" id="abModal" class="flex justify-center abModal">
@@ -185,6 +184,7 @@ export default {
abliteracy:null,
abworld:null,
abmath:null,
faqAudio: null,
abID:''
}
@@ -236,6 +236,30 @@ export default {
<style scoped>
details {
font-weight: lighter;
border-bottom: 1px solid #d4d4d4;
border-color: #d4d4d4;
padding: .75em .0 0;
font-size: 16px;
/* margin-top: 10px; */
/* box-shadow:0 0 8px #d4d4d4; */
}
summary {
margin: -.75em -.75em 0;
padding: .80em;
}
details[open] {
padding: .75em;
border-bottom: 1px solid #d4d4d4;
}
details[open] summary {
border-bottom: 1px solid #d4d4d4;
/* margin-bottom: 10px; */
}
.abModal {
/* display: none; */
position: fixed;

56
src/components/Educators.vue
View File

@@ -20,24 +20,24 @@
<p class="text-color-2 font-20px pb-16 pt-4 text-justify px-4">Specifically designed lesson plans are all you require this season! Created with the best strategies to invoke the right knowledge in children, these plans constitute a successful learning through a thoroughly constructed curriculum by providing worksheets, audio books, lessons, activities, games and much more associated with each plan. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 place-items-start px-4 " >
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4 flex flex-col place-items-center">
<img class="rounded-t-2xl" src="/img/dailylLesson-plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Daily Plan </h1>
<p class="text-white text-justify text-xl">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
<div class="bottombar cursor-pointer mt-4">
<img class=" w-fit rounded-t-2xl " src="/img/dailylesson-planw.jpg" alt="Daily Plan">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2 hover:underline"><a href="/lesson-plan/dailyplan">Daily Plan</a> </h1>
<p class="text-color-1 text-justify text-xl">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
</div>
</div>
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4">
<img class=" w-fit rounded-t-2xl " src="/img/weekly-lesson-plan.png" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Weekly Plan </h1>
<p class="text-white text-justify text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
<img class=" w-fit rounded-t-2xl " src="/img/weekly-lesson-planw.jpg" alt="Weekly Plan">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2 hover:underline"><a href="/lesson-plan/weeklyplan">Weekly Plan</a> </h1>
<p class="text-color-1 text-justify text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
</div>
</div>
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4">
<img class=" w-fit rounded-t-2xl" src="/img/monthly-lesson-plan.png" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Monthly Plan </h1>
<p class="text-white text-xl text-justify">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
<img class=" w-fit rounded-t-2xl" src="/img/monthly-lesson-planw.jpg" alt="Monthly Plan">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2 hover:underline"><a href="/lesson-plan/monthlyplan">Monthly Plan</a> </h1>
<p class="text-color-1 text-xl text-justify">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
</div>
</div>
</div>
@@ -46,9 +46,9 @@
<div class="flex justify-center hero-text text-color-1 font-semibold mt-20 py-4 text-center">Make your Ideal Lesson Plan</div>
<p class="font-20px text-color-2 text-justify">Create a plan yourself through customization and choose the resources you need to educate children correctly. There are plenty of options to choose from and create! We allow you to personify plans according to time. </p>
<div class="grid grid-cols-1 md:grid-cols-3 place-items-center">
<abbr class="" title="Create a plan for daily basis sum up with multiple subjects and activities essential for the growth needs as per the children’s understanding power."><a href="/lesson-plan/dailyplan"><img class="w-72 drop-shadow-xl" src="/img/daily.png" alt=""></a></abbr>
<abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><a href="/lesson-plan/weeklyplan"><img class="w-72 drop-shadow-xl" src="/img/weekly.png" alt=""></a></abbr>
<abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><a href="/lesson-plan/monthlyplan"><img class="w-72 drop-shadow-xl" src="/img/monthly.png" alt=""></a></abbr>
<abbr class="" title="Create a plan for daily basis sum up with multiple subjects and activities essential for the growth needs as per the children’s understanding power."><a href="/lesson-plan/dailyplan"><img class="w-72 drop-shadow-xl" src="/img/daily.png" alt="Daily Plan"></a></abbr>
<abbr class="" title="Design a plan for a weekly basis and come up with innovative ways to teach every week with new concepts."><a href="/lesson-plan/weeklyplan"><img class="w-72 drop-shadow-xl" src="/img/weekly.png" alt="Weekly Plan"></a></abbr>
<abbr class="" title="Customize a plan based on a month’s time and do not limit the knowledge of your children."><a href="/lesson-plan/monthlyplan"><img class="w-72 drop-shadow-xl" src="/img/monthly.png" alt="Monthly Plan"></a></abbr>
</div>
</section>
<section class="container mx-auto xl:px-24 mt-32">
@@ -90,19 +90,19 @@
</div>
</section>
<section class="container mx-auto px-4 xl:px-24">
<div class="flex flex-rows-2 justify-center font-semibold hero-text mt-16 text-color-1 py-4 px-4">Resources To Choose From</div>
<h2 class="text-justify text-2xl ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept.</h2>
<div class="grid place-items-center w-auto ">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-x-8 place-items-center">
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/audio-books"><img class="drop-shadow-2xl" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/worksheets"><img class="drop-shadow-2xl" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/videos"><img class="drop-shadow-2xl" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/occassion"><img class="drop-shadow-2xl" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" target="_blank" href="/themes"><img class="drop-shadow-2xl" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
</div>
<div class="flex flex-rows-2 justify-center font-semibold hero-text mt-16 text-color-1 py-4 px-4">Resources To Choose From</div>
<h2 class="text-justify text-2xl ">Access to all necessary resources and establish a strong foundation of toddlers while engaging them and teaching every accurate concept.</h2>
<div class="grid place-items-center w-auto ">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-x-8 place-items-center">
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" href="/audio-books"><img class="drop-shadow-2xl" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" href="/worksheets"><img class="drop-shadow-2xl" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" href="/videos"><img class="drop-shadow-2xl" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" href="/occassion"><img class="drop-shadow-2xl" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
<div class="grid text-2xl font-semibold text-slate-700"><a class="text-center" href="/themes"><img class="drop-shadow-2xl" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
</div>
<div class="flex justify-center mt-16"><a href="/lesson-plan/dailyplan" class="bg-blue-700 text-white px-4 py-2 text-base rounded-br-lg rounded-tl-lg shadow-xl">View Plans</a></div>
</section>
</div>
<div class="flex justify-center mt-16"><a href="/lesson-plan/dailyplan" class="bg-blue-700 text-white px-4 py-2 text-base rounded-br-lg rounded-tl-lg shadow-xl">View Plans</a></div>
</section>
<section class="container mx-auto pt-20 xl:px-24">
<div class="flex text-color-1 hero-text justify-center font-semibold">Curriculum Blogs</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 justify-center">
@@ -296,8 +296,8 @@ font-family: 'Quicksand', sans-serif;
bottom: 12;
line-clamp: 3;
width: auto;
padding: 0px;
background-color: #f9b8ce;
padding: 10px;
background-color: #fef9c3;
border-radius: 16px;
}
@@ -307,7 +307,7 @@ font-family: 'Quicksand', sans-serif;
width: auto;
height: auto;
padding: 10px;
background-color: #f9b8ce;
background-color: #fef9c3;
border-radius: 16px;
}
.literacy {

2
src/components/EducatorsHeroButton.vue
View File

@@ -11,7 +11,7 @@
</div>
</div>
<div class="flex w-fit justify-center place-items-center">
<img class="w-fit h-fit" src="/img/educators1e.png" alt="">
<img class="w-fit h-fit" src="/img/educators1e.png" alt="Educate Conveniently by">
</div>
</div>
</section>

4
src/components/Footer.vue
View File

@@ -7,9 +7,9 @@
<a href="/worksheets">&#60&nbsp; Preschool Worksheets &nbsp;|</a>
<a href="/audio-books">&nbsp; Preschool Audio Books &nbsp;|</a>
<a href="/videos">&nbsp; Preschool Videos &nbsp;|</a>
<a href="/occassion">&nbsp; Preschool Occasions &nbsp;|</a>
<a href="/occasion">&nbsp; Preschool Occasions &nbsp;|</a>
<a href="/themes">&nbsp; Preschool Themes &nbsp;|</a>
<a href="/occassion">&nbsp; Preschool Celebration Ideas &nbsp; &#62</a>
<a href="/lesson-plan/dailyplan">&nbsp; Preschool Lesson Plans &nbsp; &#62</a>
</div>
</div>
</div>

16
src/components/ModalIndexEventIdeas.vue
View File

@@ -1,22 +1,22 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<img draggable="false" src="/img/popular.png" alt="Audio Books">
<h1 class="text-3xl text-color-1 font-semibold py-2">Audio Books</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">Engage young minds with stories on-the-go! Audio books for preschoolers bring reading to life with narration, sound effects, and music.</p>
<!-- <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span> -->
<a class="pt-2" href="/worksheets"><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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
<!-- <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 class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
<p class="text-xl text-justify text-color-2 w-64">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<h1 class="text-3xl text-color-1 font-semibold py-2">Audio Books</h1>
<p class="text-xl text-justify text-color-2 w-64">Engage young minds with stories on-the-go! Audio books for preschoolers bring reading to life with narration, sound effects, and music.</p>
</div>
</div>
</div>
</div> -->
</div>
</template>

8
src/components/ModalIndexLesson.vue
View File

@@ -1,13 +1,13 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt="">
<img draggable="false" src="/img/report.png" alt="Lesson Plans">
<h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3">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>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<!-- <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span> -->
<a class="pt-2" 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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
<!-- <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 class="grid place-items-center pb-8 px-6 w-fit h-fit">
@@ -16,7 +16,7 @@
<p class="text-xl text-justify text-color-2 w-64">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>
</div>
</div>
</div>
</div> -->
</div>
</template>

8
src/components/ModalIndexThemes.vue
View File

@@ -1,13 +1,13 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt="">
<img draggable="false" src="/img/classroom.png" alt="Themes">
<h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<!-- <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span> -->
<a class="pt-2" href="/themes"><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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
<!-- <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 class="grid place-items-center pb-8 px-6 w-fit h-fit">
@@ -16,7 +16,7 @@
<p class="text-xl text-justify text-color-2 w-64">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
</div>
</div>
</div>
</div> -->
</div>
</template>

12
src/components/ModalIndexVideos.vue
View File

@@ -1,22 +1,22 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt="">
<img draggable="false" src="/img/event.png" alt="Videos">
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">Educational videos aligned with the Early Years Foundation Stage (EYFS) curriculum, supporting the development of young children's knowledge and skills.</p>
<!-- <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span> -->
<a class="pt-2" href="/videos"><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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
<!-- <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 class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class="text-xl text-justify text-color-2 w-64">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<p class="text-xl text-justify text-color-2 w-64">Educational videos aligned with the Early Years Foundation Stage (EYFS) curriculum, supporting the development of young children's knowledge and skills.</p>
</div>
</div>
</div>
</div> -->
</div>
</template>

8
src/components/ModalIndexWorksheet.vue
View File

@@ -1,13 +1,13 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<img draggable="false" src="/img/plan.png" alt="Worksheets">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<!-- <span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span> -->
<a class="pt-2" href="/worksheets"><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 v-if="abModal" id="ytModal" class="flex justify-center abModal">
<!-- <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 class="grid place-items-center pb-8 px-6 w-fit h-fit">
@@ -16,7 +16,7 @@
<p class="text-xl text-justify text-color-2 w-64">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
</div>
</div>
</div>
</div> -->
</div>
</template>

2
src/components/Premium.vue
View File

@@ -39,7 +39,7 @@
<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>
<a href="/school-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>

2
src/components/ThemesAudioBook.vue
View File

@@ -7,7 +7,7 @@
<div @click="showAbModal(audiobooks.file)">
<div class="grid place-items-center cursor-pointer">
<div class=" ">
<img class="w-56" v-if="audiobooks.audio_icon" :src="'https://management.beanstalkedu.com/assets/'+ audiobooks.audio_icon" alt=""/>
<img class="w-56" v-if="audiobooks.audio_icon" :src="'https://management.beanstalkedu.com/assets/'+ audiobooks.audio_icon" :alt=audiobooks.alt_text/>
</div>
<h1 class="pt-4 w-fit font-20px text-center">{{audiobooks.title}}</h1>
</div>

49
src/components/Videos.vue
View File

@@ -156,22 +156,21 @@
</div>
</div>
</section> -->
<section class="container mx-auto py-20 px-4">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48 px-4 xl:px-24">
<div class="grid h-fit">
<section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit ">
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqVideos in faqVideos" :key="faqVideos.id" class="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
<div v-if="faqVideos" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqVideos.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqVideos.content"></p>
</div>
</div>
</div>
<div v-for="faqVideos in faqVideos" :key="faqVideos.id">
<details>
<summary>
<div class="flex inline-flex cursor-pointer" v-if="faqVideos"> &nbsp; {{faqVideos.title}} </div>
</summary>
<div v-html="faqVideos.content"></div>
</details>
</div>
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
<div class="grid place-items-center"><img src="/img/frequentlycc.png" alt=""></div>
</div>
</section>
<!-- Youtube Modal -->
@@ -257,6 +256,30 @@ export default {
</script>
<style scoped>
details {
font-weight: lighter;
border-bottom: 1px solid #d4d4d4;
border-color: #d4d4d4;
padding: .75em .0 0;
font-size: 16px;
/* margin-top: 10px; */
/* box-shadow:0 0 8px #d4d4d4; */
}
summary {
margin: -.75em -.75em 0;
padding: .80em;
}
details[open] {
padding: .75em;
border-bottom: 1px solid #d4d4d4;
}
details[open] summary {
border-bottom: 1px solid #d4d4d4;
/* margin-bottom: 10px; */
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}

70
src/components/Worksheets.vue
View File

@@ -128,7 +128,7 @@
<div class="grid">
<div class="grid place-items-center">
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
<img class="w-56 h-72 rotate-6 relative" src="/img/rectangle1.png" alt=""/>
<img class="w-56 h-72 rotate-6 relative" src="/img/transport-matching-worksheet.png" alt=""/>
</div>
<h1 class="text-center pt-8 w-fit font-20px opacity-0">Click for View All</h1>
<a href="/worksheets/understanding-the-worlds" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8">View All</a>
@@ -152,24 +152,23 @@
</div>
</div>
</section> -->
<section class="container mx-auto py-20 px-4 ">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit">
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqWorksheets in faqWorksheets" :key="faqWorksheets.id" class="">
<div class="grid h-fit text-color-2">
<div tabindex="0" class="collapse collapse-arrow border-b">
<div v-if="faqWorksheets" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqWorksheets.title }}</div>
<div class="collapse-content md:text-lg">
<p class="" v-html="faqWorksheets.content"></p>
</div>
</div>
</div>
</div>
<section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
<div class="grid h-fit ">
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
<div v-for="faqWorksheets in faqWorksheets" :key="faqWorksheets.id">
<details>
<summary>
<div class="flex inline-flex cursor-pointer" v-if="faqWorksheets"> &nbsp; {{faqWorksheets.title}} </div>
</summary>
<div v-html="faqWorksheets.content"></div>
</details>
</div>
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section>
<div class="grid place-items-center"><img src="/img/frequentlycc.png" alt=""></div>
</div>
</section>
</div>
</template>
<script>
@@ -216,12 +215,7 @@ export default {
this.wsWorld=worksheets.data.reverse().slice(0, 3)
// console.log(this.wsWorld)
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=worksheets')
.then(resp => resp.json())
.then(data => {
this.faqWorksheets=data.data
// console.log(this.faqWorksheets)
})
// fetch('https://management.beanstalkedu.com/items/worksheet_menu?limit=3')
// .then(resp => resp.json())
@@ -237,11 +231,41 @@ export default {
},
mounted: function () {
this.getWorksheets()
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=worksheets')
.then(resp => resp.json())
.then(data => {
this.faqWorksheets=data.data
// console.log(this.faqWorksheets)
})
}
}
</script>
<style scoped>
details {
font-weight: lighter;
border-bottom: 1px solid #d4d4d4;
border-color: #d4d4d4;
padding: .75em .0 0;
font-size: 16px;
/* margin-top: 10px; */
/* box-shadow:0 0 8px #d4d4d4; */
}
summary {
margin: -.75em -.75em 0;
padding: .80em;
}
details[open] {
padding: .75em;
border-bottom: 1px solid #d4d4d4;
}
details[open] summary {
border-bottom: 1px solid #d4d4d4;
/* margin-bottom: 10px; */
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}