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

faq_page

master
Suvodip Ghosh 2023-02-28 13:39:56 +05:30
parent 38233c24e6
commit fb1c2efdc3
5 changed files with 121 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/frequentlyw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

8
src/components/Administrators.vue
View File

@ -54,8 +54,8 @@
<p class="text-justify text-xl lg:text-2xl 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>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-10 place-items-center">
<div class="grid w-fit" v-for="marketing in marketing" :key="marketing">
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="marketing.img" :src="'https://management.beanstalkedu.com/assets/'+marketing.img+'?width=420&amp;height=280'" :alt="marketing.alt_text">
<div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ marketing.date}}</div>
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="marketing.img" :src="'https://management.beanstalkedu.com/assets/'+marketing.img" style="width:100%; height: 205px;" :alt="marketing.alt_text">
<div class="flex bg-yellow-200 absolute mt-32 lg:mt-36 place-items-center ml-8 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ marketing.date}}</div>
<h2 class="text-color-1 text-3xl font-semibold pt-10 px-4 line-clamp-2">{{ marketing.meta}}</h2>
<div class="text-justify line-clamp-4 font-20px text-color-2 px-4" v-html="marketing.meta_description"></div>
<a href="'/blog/' + marketing.slug" class="text-blue-600 font-20px px-4">Read More >> </a>
@ -135,8 +135,8 @@
<p class="text-xl lg:text-3xl pt-2 text-color-2">Read the most suitable administration preschool solutions and be familiar with all necessary information for your management decisions. </p>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 mt-20 place-items-center">
<div class="grid w-fit" v-for="adminstration in adminstration" :key="adminstration">
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="adminstration.img" :src="'https://management.beanstalkedu.com/assets/'+adminstration.img+'?width=420&amp;height=280'" :alt="adminstration.alt_text" >
<div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ adminstration.date}}</div>
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="adminstration.img" :src="'https://management.beanstalkedu.com/assets/'+adminstration.img" style="width:100%; height: 205px;" :alt="adminstration.alt_text" >
<div class="flex bg-yellow-200 absolute mt-32 lg:mt-36 ml-8 text-lg leading-tight place-items-center w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ adminstration.date}}</div>
<h1 class="text-color-1 text-2xl pt-4 px-4 line-clamp-2 font-semibold">{{ adminstration.meta}}</h1>
<div class="font-20px text-justify text-color-2 px-4 line-clamp-4" v-html="adminstration.meta_description"></div>
<a href="'/blog/' + adminstration.slug" class="text-blue-600 font-20px px-4"> Read More >> </a>

2
src/components/Blog.vue
View File

@ -54,7 +54,7 @@
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
<div v-for="(item, index) in tbBlog" class="shadow-md rounded p-2 m-2">
<figure class=" p-4 ">
<img class="w-full" v-if="item.img" :src="'https://management.beanstalkedu.com/assets/'+item.img" alt="" style="width:100%; height: 205px;">
<img class="w-full" v-if="item.img" :src="'https://management.beanstalkedu.com/assets/'+item.img" :alt="item.alt_text" style="width:100%; height: 205px;">
<!-- '?width=420&amp;height=280' -->
<div class="flex place-items-center bg-yellow-200 absolute -mt-12 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{item.date}}</div>
<div class="pt-6 space-y-4">

27
src/components/Educators.vue
View File

@ -107,8 +107,8 @@
<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">
<div class="grid w-fit h-fit" v-for="(item, index) in tbBlog">
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="item.img" :src="'https://management.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" :alt="item.alt_text" >
<div class="flex bg-yellow-200 absolute mt-48 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="item.img" :src="'https://management.beanstalkedu.com/assets/'+item.img" style="width:100%; height: 205px;" :alt="item.alt_text" >
<div class="flex bg-yellow-200 absolute mt-32 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ item.date}}</div>
<h1 class="text-color-1 text-2xl font-semibold pt-4 px-4 line-clamp-2 w-fit">{{ item.meta}}</h1>
<div class="text-lg text-justify font-light w-fit text-color-2 px-4 line-clamp-4" v-html="item.meta_description"></div>
<!-- <a class=" text-blue-800" href="">Read More>></a> -->
@ -182,26 +182,33 @@
<div class="grid">
<div class="flex relative justify-center text-xs">
<img class="" src="/img/frame1.png" alt="EYFS Curriculum & Its Impact">
<p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
<p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer">
<abbr title="The aim is to lay a strong foundation for children in literacy by introducing them to language during the early stages of their life, thereby preparing them for school.">
Literacy</abbr>
</p>
<p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
<p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer">
<abbr title="The objective is to teach appropriate behavioral patterns and develop skills in toddlers to enhance their confidence and facilitate smooth communication with others.">
Comunication <br>& Language</abbr>
</p>
<p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
<p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0 text-center cursor-pointer">
<abbr title=" Build a strong math foundation by starting with basics to enhance pre-math knowledge and boost performance in future learning.">
Mathematics</abbr>
</p>
<p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
<p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer">
<abbr title="Foster self-responsibility, independence, and positive character development in children to better understand societal phenomena.">
Understanding <br> the World </abbr>
</p>
<p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
<p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer">
<abbr title="Offering guidance and engaging in outdoor activities for fun to promote physical development at every stage.">
Physical <br> Development </abbr>
</p>
<p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
<p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer">
<abbr title="Stimulating the mind cells through extracurricular activities especially arts and designing to help children acquire new talents.">
Expressive Arts<br> & Desgine </abbr>
</p>
<p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Preschool, Social <br>& Emotional <br>Development</abbr>
<p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer">
<abbr title="The focus is on the comprehensive development of children, taking into consideration all aspects of their growth to ensure a better future.">
Personal, Social <br>& Emotional <br>Development</abbr>
</p>
</div>
</div>

99
src/pages/faq.astro Normal file
View File

@ -0,0 +1,99 @@
---
const faqResp = await fetch('https://management.beanstalkedu.com/items/FAQ?filter[slug][_eq]=faq&filter[property][_eq]=teenybeans_curriculum');
const faqRespJson = await faqResp.json();
const faqRespData = faqRespJson.data;
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Footer from "../components/Footer.vue";
---
<Layout title="">
<Menu />
<main>
<div>
<section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
<div class="flex flex-col xl:flex-row container mx-auto px-3 xl:px-24">
<div class="flex flex-col w-full justify-center ">
<div >
<h1 class="text-blue-700 hero-text font-bold">Teeny Beans <span class="text-color-1">FAQs</span> </h1>
</div>
</div>
<div class="flex justify-center place-items-center">
<img src="/img/frequentlyw.png" alt="Frequently Asked Questions">
</div>
</div>
</section>
<section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
<div class="grid grid-cols-1 ">
<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> -->
{faqRespData.map((data: { title: string | undefined; youtube_thumbnail: string | undefined; about_the_video: string | undefined; }) =>
<details>
<summary>
<div class="flex inline-flex cursor-pointer"> {data.title}</div>
</summary>
<div set:html="data.content"></div>
</details>
)}
</div>
<div class="grid place-items-center">
<!-- <img src="/img/frequently.png" alt="Frequently Asked Questions"> -->
</div>
</div>
</section>
</div>
</main>
<Footer client:visible/>
</Layout>
<style>
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
@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;
}
}
.text-color-1 {
color: #7c4c23;
}
details {
font-weight: lighter;
border-bottom: 1px solid #d4d4d4;
border-color: #d4d4d4;
padding: .75em .75em 0;
font-size: 17px;
width: 100%;
/* margin-top: 10px; */
/* box-shadow:0 0 8px #d4d4d4; */
}
summary {
margin: -.75em -.75em 0;
padding: .75em;
}
details[open] {
padding: .75em;
border-bottom: 1px solid #d4d4d4;
}
details[open] summary {
border-bottom: 1px solid #d4d4d4;
margin-bottom: 10px;
}
</style>