From b08a619f09537b52de88460f01a7e38dca5046b7 Mon Sep 17 00:00:00 2001
From: Suvodip Ghosh <suvo@ns9b.siliconpin.com>
Date: Tue, 21 Feb 2023 11:10:56 +0530
Subject: [PATCH] update

---
 src/components/SliderLessonplan.vue       | 114 +++++
 src/components/Worksheets-literacy.vue    |   6 +-
 src/components/Worksheets-mathematics.vue |   4 +-
 src/components/Worksheets-world.vue       |   4 +-
 src/components/Worksheets.vue             |   4 +-
 src/pages/index.astro                     | 526 +++++++++++++++++++++-
 src/pages/occasion/index.astro            |   2 +-
 7 files changed, 645 insertions(+), 15 deletions(-)
 create mode 100644 src/components/SliderLessonplan.vue

diff --git a/src/components/SliderLessonplan.vue b/src/components/SliderLessonplan.vue
new file mode 100644
index 0000000..dc1fb5f
--- /dev/null
+++ b/src/components/SliderLessonplan.vue
@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <section class="container mx-auto my-16 px-4 xl:px-24">
+        <div class="flex flex-col lg:flex-row place-items-center place-content-between gap-y-10">
+        <div class="grid h-fit">
+            <h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
+                <h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today's popular lesson <br> plans specially curated for your classroom.</h1>
+                <div><a target="_blank" href="/lesson-plan/dailyplan" class="text-lg bg-blue-700 px-4 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div>
+        </div>
+        <div class="grid place-items-center">
+            <swiper class="slider-width cursor-pointer" draggable="false"
+                :modules="modules"
+                :slides-per-view="1"
+                :space-between="50"
+                navigation
+                pagination
+                :scrollbar="{ draggable: true }"
+                :autoplay=" { delay: 2500, disableOnInteraction: false}"
+                @swiper="onSwiper"
+                @slideChange="onSlideChange">
+                <swiper-slide v-for="lesson in lessonplan" :key="lesson.id"> 
+                <img class="" lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
+                </swiper-slide>      
+            </swiper>
+        </div>
+        </div>
+    </section>
+    </div>
+</template>
+<style>
+ .text-color-1 {
+        color: #7C4C23;
+        font-family: 'Quicksand';
+    }
+.slider-width {
+  width: 350px;
+}
+@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;
+        
+      }
+    }
+</style>
+<script is:inline>
+     // 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,
+         lessonplan:null,
+         isLoading: true,
+
+     }
+ },
+   mounted: function () {
+     fetch('https://curriculum-app-api.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
+         })
+     },
+ };
+</script>
\ No newline at end of file
diff --git a/src/components/Worksheets-literacy.vue b/src/components/Worksheets-literacy.vue
index 9c40039..5919c44 100644
--- a/src/components/Worksheets-literacy.vue
+++ b/src/components/Worksheets-literacy.vue
@@ -4,8 +4,8 @@
         <section class="container-fluid">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Literacy</span></div>
             <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
-                <div class="flex">
-                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                <div class="flex" style="font-family: quicksand; font-weight:bold;">
+                    <h1 class="py-4 font-semibold ">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
                         <option value="2">Select Age</option>
                         <option value="2">2-3 Year</option>
@@ -13,7 +13,7 @@
                         <option value="4">4-5 Year</option>
                         <option value="5">5-6 Year</option> 
                     </select>
-                </div> 
+                </div>
                 <!-- <div class="flex ">
                     <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
                     <select class="select max-w-xs">
diff --git a/src/components/Worksheets-mathematics.vue b/src/components/Worksheets-mathematics.vue
index 60aaab7..62be6f3 100644
--- a/src/components/Worksheets-mathematics.vue
+++ b/src/components/Worksheets-mathematics.vue
@@ -4,8 +4,8 @@
         <section class="container-fluid">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Mathematics</span></div>
             <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
-                <div class="flex">
-                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                <div class="flex" style="font-family: quicksand; font-weight:bold;">
+                    <h1 class="py-4 font-semibold ">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
                         <option value="2">Select Age</option>
                         <option value="2">2-3 Year</option>
diff --git a/src/components/Worksheets-world.vue b/src/components/Worksheets-world.vue
index 1e63689..989b143 100644
--- a/src/components/Worksheets-world.vue
+++ b/src/components/Worksheets-world.vue
@@ -4,8 +4,8 @@
         <section class="container-fluid">
             <div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Understanding the World</span></div>
             <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
-                <div class="flex">
-                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                <div class="flex" style="font-family: quicksand; font-weight:bold;">
+                    <h1 class="py-4 font-semibold ">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
                         <option value="2">Select Age</option>
                         <option value="2">2-3 Year</option>
diff --git a/src/components/Worksheets.vue b/src/components/Worksheets.vue
index 7b75b52..7f2fcc7 100644
--- a/src/components/Worksheets.vue
+++ b/src/components/Worksheets.vue
@@ -37,8 +37,8 @@
             <!-- <p class="font-20px text-color-2 text-justify py-4 container mx-auto px-4">Enrich learning experience and provide essential knowledge and practice with the professionally created worksheet for preschoolers that are designed to enhance comfortableness of teachers and parents. </p> -->
             <!-- <p class="font-20px text-color-2 text-justify container mx-auto px-4">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children.  </p> -->
             <div class="flex flex-col  bg3 md:flex-row justify-center md:justify-end lg:px-64 px-4  shadow-xl lg:gap-4">
-                <div class="flex">
-                    <h1 class="pt-3 font-semibold ">Age:&nbsp;</h1>
+                <div class="flex" style="font-family: quicksand; font-weight:bold;">
+                    <h1 class="py-4 font-semibold ">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
                         <option value="2">Select Age</option>
                         <option value="2">2-3 Year</option>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 60d02eb..96bd2bb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,13 +1,529 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Menu from "../components/Menu.astro";
-import Header from "../components/Header.vue";
-import Footer from "../components/Footer.vue";
+import SliderLessonplan from "../components/SliderLessonplan.vue";
 import Roundchart from "../components/Roundchart.vue";
-import Homepage from "../components/Homepage.vue";
+
+const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=home&filter[property][_eq]=teenybeans_curriculum');
+const faqRespJson = await faqResp.json();
+const faqRespData = faqRespJson.data;
+import Footer from "../components/Footer.vue";
 ---
 <Layout title="Welcome to Teenybeans">
     <Menu/>
-    <Homepage client:visible/>
+    <main>
+        <div class="" style="font-family: quicksand;">
+            <section class="bg3 shadow-2xl container-fluid h-fit">
+                <div class="flex flex-col xl:flex-row container mx-auto lg:px-24">
+                    <div class="flex flex-col justify-center">
+                        <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>
+                    <div class="flex w-full justify-end place-items-end">
+                        <img class="h-fit " src="/img/homepage1c.png" alt="">
+                    </div> 
+                </div>
+            </section>
+            <div class="container-fluid mt-10">
+                <div class="container mx-auto px-4 xl:px-24 font-20px  text-justify">Our play school curriculum, Your progress. Teeny Beans Preschool Curriculum brings to you a well-organized and thoroughly laid British EYFS curriculum enriched with the finest subjects to assist children in their holistic development. A curriculum that makes every child prepared to understand the world.</div>
+            </div>
+            <section class="container mx-auto xl:px-24">
+                <div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
+                <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
+                    <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+                        <img draggable="false" src="/img/plan.png" alt="">
+                        <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
+                        <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
+                        <!-- <a href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
+                        <a target="_blank" 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 class="grid place-items-center pb-8 px-6 w-fit h-fit">
+                        <img draggable="false" src="/img/report.png" alt="">
+                        <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>
+                    </div>
+                    <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
+                        <img draggable="false" src="/img/classroom.png" alt="">
+                        <h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
+                        <p class="  font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
+                        <!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
+                        <a target="_blank" 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>
+                <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2  mt-12">
+                    <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 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">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>
+                        <!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
+                        <a target="_blank" href="/celebrationstories#submitCelebration"><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/event.png" alt="">
+                        <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
+                        <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
+                        <!-- <a target="_blank" href="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></a> -->
+                        <a target="_blank" 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>
+            </section>
+            <section class="container mx-auto xl:px-24">
+                <div class="mt-10 px-4 font-20px pb-20 px-6">
+                    <p class="text-justify text-color-2">Enrich every learning experience with your preschool’s best performance through the right  preschool curriculumsolutions that Teeny Beans provide. Embellish your early education institution and provide a higher standing to your play school.</p>
+                    <div class="mt-4"></div>
+                    <p class="text-justify text-color-2">Plan your play school curriculum with us and give the highest quality service and receive enormous enrollments in return. Your success has no bounds with the correct preschool curriculum provided by our right guidance and support.</p>
+                </div>
+            </section>
+            <section class="container mx-auto xl:px-24">
+                <div class="flex flex-rows-2 justify-center font-semibold hero-text mt-8 text-color-1 py-10 px-4">Resources To Choose From</div>
+                <div class="grid grid-rows-1 md:grid-rows-2 place-items-center my-8 w-auto">
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-x-4 place-items-center">
+                        <div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/audio-books"><img class="flex inline-flex" draggable="false" src="/img/audiobook.png" alt="Audio-Books">Audio Books</a></div>
+                        <div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/worksheets"><img class="flex inline-flex" draggable="false" src="/img/workshet.png" alt="Worksheets">Worksheets</a></div>
+                        <div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/videos"><img class="flex inline-flex" draggable="false" src="/img/videos.png" alt="Videos">Videos</a></div>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 place-items-center">
+                      <div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/occassion"><img class="flex inline-flex" draggable="false" src="/img/occasions.png" alt="Occassion">Occassion</a></div>
+                        <div class="grid text-2xl font-semibold text-slate-700"><a target="_blank" href="/themes"><img class="flex inline-flex" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
+                    </div>
+                </div>
+            </section>
+            <SliderLessonplan client:visible/>
+            <section class="container mx-auto px-4 xl:px-24 bg-gray-200">
+                <div class="flex flex-row place-content-between">
+                    <div class="flex flex-col justify-center ">
+                    <h2 class="text-color-1 hero-text font-bold 2xl:w-8/12">Discover our Worksheets for Preschoolers</h2>
+                    <button class="bg-blue-700 text-white text-lg rounded-tl-lg rounded-br-lg shadow-xl w-fit px-6 py-2">Discover All</button>
+                    </div>
+                    <div class="flex ">
+                    <img class="w-80" src="/img/fire-fighter.png" alt=""/>
+                    </div>
+                </div>
+            </section>
+            <section id="EYFSCurriculum" class="container mx-auto pt-16 xl:px-24">
+                <h1 class="text-color-1 hero-text font-bold text-center">EYFS Curriculum & Its Impact</h1>
+                <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center px-4">
+                    <div class="grid">
+                        <div class="text-justify text-color-2">
+                            <p class="py-8 font-20px">The Early Years Foundation Stage British Curriculum is formulated as per the NEP 2020 which provides for a well-structured preschool curriculum essential for every preschool. It focuses on all aspects of development and allows children to grow intellectually by granting them accurate learning.</p>
+                            <p class="py-8 font-20px">The play school Curriculum will add elegance to your preschool’s image and will smoothen the rise in enrollments. Shape the future with flawless teaching and present a world full of opportunities to your toddlers. The EYFS playschool curriculum is the best learning you can provide to preschoolers. Refined with appropriate subjects as per the development needs of toddlers, the curriculum will enhance every learning experience through its essential components.</p>
+                            <p class="py-8 font-20px">The British kindergarten curriculum will ensure development of mind cells perfectly while focussing on Prime, Specific and Augmented areas of learning, essential for every child during this phase.</p>
+                        </div>
+                    </div>
+                    <div class="grid ">
+                        <img src="/img/legends.png" alt="" class="p-8"> 
+                        <div class="flex relative justify-center text-xs ">
+                            <div class="grid">
+                                <div class="flex relative justify-center text-xs">
+                                    <img class="" src="/img/frame1.png" alt="">
+                                    <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.">
+                                        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.">
+                                        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.">
+                                        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.">
+                                        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.">
+                                        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.">
+                                        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>
+                                </div>
+                            </div>
+                        </div>
+                        <h1 class="h1-text font-bold text-color-2 pl-8">Discover in Preschool Education</h1>
+                        <p class="text-xl md:text-3xl text-color-2 pl-8">Mentions are going to implemented Preschool Education System</p>
+                        <div class="pl-8"><button class="bg-blue-700 text-white px-4 shadow-2xl py-2 rounded-tl-lg rounded-br-lg text-lg">Discover All</button></div>
+                    </div>
+                </div>
+            </section>
+            <section class="container mx-auto px-4 xl:px-24 mt-8 xl:mt-16">
+                <div class="flex flex-col lg:flex-row place-content-between  gap-y-16">
+                    <a href="/educators">
+                        <div class="flex rotate1 rounded-xl place-items-center">
+                        <div class="rotate2 width bg-gray-200 width rotate-6 rounded-xl"><img class="rotate3 rounded-xl -rotate-6" src="/img/teacherb.png" alt=""></div>
+                        <h1 class=" pl-8 text-2xl w-80">Teeny Beans for Educators & Teachers</h1>
+                    </div>
+                    </a>
+                    <a href="/administrators">
+                        <div class="flex rotate1 rounded-xl place-items-center">
+                        <div class="rotate2 width bg-gray-200 width rotate-6 rounded-xl"><img class="rotate3 rounded-xl -rotate-6" src="/img/ownersb.png" alt=""></div>
+                        <h1 class=" pl-8 text-2xl w-80">Teeny Beans for Owners & Administrators</h1>
+                    </div>
+                    </a>
+                </div>
+            </section>
+            <section class="container mx-auto px-4 xl:px-24">
+                <h1 class="hero-text text-center text-blue-700 py-20">What people are Saying!</h1>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 place-items-start" style="font-family:Quicksand">
+                    <div class="grid background border0 rounded-xl shadow-xl">
+                        <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
+                            <img class=" w-full rounded-t-2xl" src="/img/sudha-gosavi.png" alt="">
+                            <h1 class="text-2xl text-blue-700 font-semibold text-center py-2">"Sudha Mangesh Gosavi" </h1>
+                            <p class="text-color-2 font-20px">I'm very thankful to Teeny Beans, because when I planned to open a preschool in Nagpur, I was very confused about how to start and what to do and things were going very messy. When I found Teeny Beans, I was completely happy since there was no royalty, no deposit, and no franchise fee, but I received complete help to open my preschool.
+                                <br>
+                                <strong> 
+                                  <br>Stepping Stones International Preschool
+                                  <br>Director
+                                </strong> 
+                              </p>
+                        </div>
+                    </div>
+                    <div class="grid background border0 rounded-xl shadow-xl">
+                        <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
+                            <img class=" w-full rounded-t-2xl" src="/img/nirmal-singh.png" alt="">
+                            <h1 class="text-2xl text-blue-700 font-semibold text-center py-2">"Nirmal Singh" </h1>
+                            <p class="text-color-2 font-20px">As many other preschool service providers do not give us an opportunity to create our own brand, Teeny Beans does. Building our own brand is beneficial for us in the long run as we are not only targeting preschool education but also high-level eucation (secondary) in the long run. It’s also a matter of pride for pre school owners to operate their own brand.
+                                <br> <strong class=""> <br>Dakshya International Preschool
+                                <br>Director</strong>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="grid background border0 rounded-xl shadow-xl">
+                        <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
+                            <img class=" w-full rounded-t-2xl" src="/img/sharmistha-mishra.png" alt="">
+                            <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Sharmistha Mishra" </h1>
+                            <p class="text-color-2 font-20px">Being a beginner in this business, I was a bit tense about opening up the PRE-SCHOOL. But the continuous support and guidance regarding the whole training process, benefits, selection of area, pre-advertising, etc., made me confident and satisfied to start with it.
+                                <br> <strong> <br>NEST International Preschool
+                                <br>Founder and Director
+                                </strong>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="grid background border0 rounded-xl shadow-xl">
+                        <div class="bottombar cursor-pointer line-clamp-2 hover:line-clamp-none">
+                            <img class=" w-full rounded-t-2xl" src="/img/jane-martina.png" alt="">
+                            <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Ms. Jane Martina" </h1>
+                            <p class="text-color-2 font-20px">You need the right partner to support you in establishing your school. Teeny Beans was extremely supportive, right from choosing the teaching aids, play items, and furniture, and they said that a friendly ambiance is much more preferred than a very expensive outlook. "You need to trust your partner. Every communication was very supportive, even when you doubted yourself. Teeny beans were giving options."
+                                <br> <strong> 
+                                <br>Chinchilla International Preschool
+                                <br>Founder and Director
+                                </strong>
+                            </p>
+                        </div>
+                    </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 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>
+                        {faqRespData.map((data: { title: string | undefined; youtube_thumbnail: string | undefined; about_the_video: string | undefined; }) => 
+                        <details>
+                                <summary> 
+                                    <div class="flex inline-flex cursor-pointer" v-if="faqHome"> &nbsp; { data.title }</div>
+                                </summary>
+                                    <div  set:html="data.content"></div>
+                            </details>
+                        )}    
+                        
+                    </div>
+                    <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> 
+                </div>
+            </section>
+        </div>
+    </main>
 <Footer/>
-</Layout>
\ No newline at end of file
+</Layout>
+
+<style >
+    details {
+        font-weight: lighter;
+        border-bottom: 1px solid #d4d4d4;
+        border-color: #d4d4d4;    
+        padding: .75em .75em 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;
+    }
+    .slider-width {
+      width: 350px;
+    }
+    .block-content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .block-content__button {
+      color: #1d4ed8;
+      text-decoration: underline;
+    }
+        .position {
+            position: relative;
+            width: 100%;
+            bottom: 0px;
+        }
+        @media screen and (min-width: 1500px) {
+          .h2-text {
+            font-size: 30px;
+          } 
+        }
+        @media screen and (max-width: 1499px) {
+          .h2-text {
+            font-size: 24px;
+          }
+        }
+        @media screen and (max-width: 1199px) {
+          .h2-text {
+            font-size: 20px;
+          }
+        }
+        
+        .bg3 {
+          background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
+        .load-wraper{
+          position: relative;
+          height: 100%;
+          width: 100%;
+          background-color: rgb(211,211,211);
+          z-index: 44;
+          overflow: hidden;
+          border-radius: 5px;
+        }
+        .activity{
+          position: absolute;
+          left: -45%;
+          height: 100%;
+          width: 45%;
+          background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+          background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+          background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+          animation: loading 1s infinite;
+          z-index: 45;
+        }
+        
+        @keyframes loading {
+          0%{
+            left: -45%;
+          }
+          100%{
+            left: 100%;
+          }
+        }
+        .literacy {
+            top: 110px;
+            transform: rotate(25deg);
+        }
+        .comunication {
+        transform: rotate(80deg);
+        /* left: 360px; */
+        top: 170px;
+    }
+    .mathematics {
+        transform: rotate(-50deg);
+        top: 373px;
+    }
+    .world {
+        transform: rotate(-10deg);
+        top: 420px;
+    }
+    .physical {
+        transform: rotate(44deg);
+        top: 340px;
+    }
+    .expressive {
+        transform: rotate(-90deg);
+        top: 225px;
+    }
+        .preschool {
+            transform: rotate(-35deg);
+            top: 95px;
+        }
+        .border0 {
+            border-color: #F2F2F2;
+            border-width: 20px;
+            border-radius: 20px;
+        }
+        .border0:hover {
+            border-color: #FCFCFC;
+            border-width: 20px;
+            border-radius: 20px;
+        }
+        .background {
+            background-color: #F2F2F2;    
+        }
+        .background:hover {
+            background-color: #FCFCFC;
+        }
+        /* # The Rotating Marker # */
+        details summary::-webkit-details-marker { display: none; }
+          summary::before {
+            font-family: "Hiragino Mincho ProN", "Open Sans", sans-serif;
+            content: "▶";
+            position: absolute;
+            top: 1rem;
+            left: 0.8rem;
+            transform: rotate(0);
+            transform-origin: center;
+            transition: 0.2s transform ease;
+          }
+          details[open] > summary:before {
+            transform: rotate(90deg);
+            transition: 0.45s transform ease;
+          }
+          
+          /* # The Sliding Summary # */
+          details { overflow: hidden; }
+          details summary {
+            position: relative;
+            z-index: 10;
+          }
+          @keyframes details-show {
+            from {
+              margin-bottom: -80%;
+              opacity: 0;
+              transform: translateY(-100%);
+            }
+          }
+          details > *:not(summary) {
+            animation: details-show 500ms ease-in-out;
+            position: relative;
+            z-index: 1;
+            transition: all 0.3s ease-in-out;
+            color: transparent;
+            overflow: hidden;
+          }
+          details[open] > *:not(summary) { color: inherit; }
+          
+          /* # Style 2 # */
+          details.style2 summary::before {
+            content: "×";
+            font-size: 2rem;
+            line-height: 1rem;
+            transform: rotate(-45deg);
+            top: 1.2rem;
+            left: 0.5rem;
+          }
+          details[open].style2 > summary:before {
+            transform: rotate(90deg);
+            color: rgb(0, 0, 0) !important;
+            transition: color ease 2s, transform ease 1s;
+          }
+          
+          /* # Style 3 # */
+          
+        
+          details .moon-new { display: inline; }
+          details .moon-full { display: none; }
+          details[open] .moon-new { display: none; }
+          details[open] .moon-full { display: inline; }
+          details.style7 .content { background: #DDD; }
+          
+          /* # Just Some Pretty Styles # */
+          body { font-family: "Open Sans", sans-serif; padding-bottom: 400px; }
+          img { max-width: 100%; }
+          p { margin: 0; padding-bottom: 10px; }
+          p:last-child { padding: 0; }
+          details {
+            max-width: 800px; 
+            box-sizing: border-box;
+            margin-top: 5px;
+            background: rgb(255, 255, 255);
+          }
+          summary {
+            border: 4px solid transparent;
+            outline: none;
+            padding: 8px;
+            display: block;
+            padding-left: 2.2rem;
+            position: relative;
+            cursor: pointer;
+          }
+          details[open] summary,
+          summary:hover {
+            color: #1e293b;
+          }
+          summary:hover strong,
+          details[open] summary strong,
+          summary:hover::before,
+          details[open] summary::before {
+            color: #1e293b;
+          }
+          .content {
+            padding: 10px;
+          }
+            .bottombar {
+          font-size: large;
+          /* width: 42px; */
+          overflow: hidden;
+          white-space: nowrap;
+          /* position: fixed; */
+          bottom: 12;
+          line-clamp: 3;
+          width: auto;
+        }
+        
+        .bottombar:hover{
+          overflow: visible; 
+          white-space: normal; 
+          width: auto;
+          height: auto;
+        }
+        .text-color-1 {
+            color: #7C4C23;
+            font-family: 'Quicksand';
+        }
+        
+        .text-color-2 {
+            color: #333333;
+            font-family: 'Quicksand';
+        }
+        .font-20px {
+            font-size: 18px;
+        }
+        .h1-text {
+            font-size: 30px;
+        }
+        @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;
+            
+          }
+        }
+        </style>
\ No newline at end of file
diff --git a/src/pages/occasion/index.astro b/src/pages/occasion/index.astro
index 034c974..e38f180 100644
--- a/src/pages/occasion/index.astro
+++ b/src/pages/occasion/index.astro
@@ -28,7 +28,7 @@ const ytResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/oc
 const ytRespJson = await ytResp.json();
 const ytRespData = ytRespJson.data;
 
-const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=occassion');
+const faqResp = await fetch('https://curriculum-app-api.beanstalkedu.com/items/FAQ?filter[slug][_eq]=occassion&filter[property][_eq]=teenybeans_curriculum');
 const faqRespJson = await faqResp.json();
 const faqRespData = faqRespJson.data;