singleTheme

src/components/Educators.vue

@@ -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)
     })
       
     }

src/components/HeroButton.vue

@@ -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>

src/layouts/Layout.astro

@@ -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>
 		

src/pages/index.astro

@@ -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="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="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-lg col-span-1 font-bold text-color-2">OR</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-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 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> -->
+                        <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="">
@@ -226,14 +228,13 @@ import Footer from "../components/Footer.vue";
                     <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>
+                            <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>

src/pages/occasion/index.astro

@@ -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>

src/pages/themes/[id].astro

@@ -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;