diff --git a/public/img/audiobook.png b/public/img/audiobook.png
new file mode 100644
index 0000000..9777991
Binary files /dev/null and b/public/img/audiobook.png differ
diff --git a/public/img/fire-fighter.png b/public/img/fire-fighter.png
new file mode 100644
index 0000000..8863625
Binary files /dev/null and b/public/img/fire-fighter.png differ
diff --git a/public/img/jane-martina.png b/public/img/jane-martina.png
new file mode 100644
index 0000000..aae3c86
Binary files /dev/null and b/public/img/jane-martina.png differ
diff --git a/public/img/nirmal-singh.png b/public/img/nirmal-singh.png
new file mode 100644
index 0000000..77cda09
Binary files /dev/null and b/public/img/nirmal-singh.png differ
diff --git a/public/img/occasions.png b/public/img/occasions.png
new file mode 100644
index 0000000..acf9ae1
Binary files /dev/null and b/public/img/occasions.png differ
diff --git a/public/img/owner.png b/public/img/owner.png
new file mode 100644
index 0000000..3b7c046
Binary files /dev/null and b/public/img/owner.png differ
diff --git a/public/img/sharmistha-mishra.png b/public/img/sharmistha-mishra.png
new file mode 100644
index 0000000..8b225d9
Binary files /dev/null and b/public/img/sharmistha-mishra.png differ
diff --git a/public/img/sudha-gosavi.png b/public/img/sudha-gosavi.png
new file mode 100644
index 0000000..00c18fe
Binary files /dev/null and b/public/img/sudha-gosavi.png differ
diff --git a/public/img/teacher.png b/public/img/teacher.png
new file mode 100644
index 0000000..2065495
Binary files /dev/null and b/public/img/teacher.png differ
diff --git a/public/img/theme.png b/public/img/theme.png
new file mode 100644
index 0000000..8bbfea3
Binary files /dev/null and b/public/img/theme.png differ
diff --git a/public/img/videos.png b/public/img/videos.png
new file mode 100644
index 0000000..a0edb3e
Binary files /dev/null and b/public/img/videos.png differ
diff --git a/public/img/workshet.png b/public/img/workshet.png
new file mode 100644
index 0000000..2cba08c
Binary files /dev/null and b/public/img/workshet.png differ
diff --git a/src/components/Blog.vue b/src/components/Blog.vue
index bf4460b..50faab9 100644
--- a/src/components/Blog.vue
+++ b/src/components/Blog.vue
@@ -1,166 +1,150 @@
 <template>
-    <div>
-        <div class="container-fluid z-0" style="background: linear-gradient(360deg, rgba(18, 75, 189, 0.08) 0%, rgba(18, 75, 189, 0) 100%);">
-            <div class="flex justify-center">
-                <div class="mt-9 inline-flex p-2">
-                    
-                </div>
-            </div>
-            <div class="flex justify-center">
-                <div class="mt-9 inline-flex p-2 font-serif text-2xl italic text-red-800 font-semibold">
-                  <span class="text-blue-600">Teeny Beans Curriculum</span> &nbsp; <span class=" text-yellow-900" > Blog </span>
-                </div>
-            </div>
-            <div class="flex justify-center">
-                <div class="mb-9 inline-flex p-1">
-                    <form>   
-                        <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
-                        <div class="relative w-96">
-                            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-                                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
-                            </div>
-                            <input type="search" id="default-search" class="block p-4  pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 " placeholder="Search our articles" required>
-                            <button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 ">Search</button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <div class="flex justify-center">
-                <div class="mt-9 inline-flex p-2">
-                    
-                </div>
-            </div>
-        </div>
-        <section class="container mx-auto">
-        <div class="flex justify-center pt-2 pb-2 m-5 overflow-x-auto">
-            <div class="ml-12 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
-            <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
-            <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
-            <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
-            <div class="ml-9 mr-9   md:hidden"> &nbsp;</div>
-            <a  to="/blog/?category=classroom-solution"   class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Classroom Solution</a>
-            <a  to="/blog/?category=preschool-solution"   class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Preschool Solution</a>
-            <a  to="/blog/?category=technology"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Technology        </a>
-            <a  to="/blog/?category=curriculum"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Curriculum        </a>
-            <a  to="/blog/?category=marketting"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Marketing         </a>
-            <a  to="/blog/?category=lesson-plans"         class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Lesson Plans      </a>
-            <a  to="/blog/?category=video-articles"       class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Video Articles    </a>
-            <a  to="/blog/?category=occassion"            class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 "> Occassion                   </a>
-        </div>
-        <div class="p-5">
-            <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://curriculum-app-api.beanstalkedu.com/assets/'+item.img+'?width=420&amp;height=280'" alt="" >
-                    <div class="flex 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">
-                        <blockquote>
-                        <p class="text-3xl font-medium text-color-1 line-clamp-1">{{ item.title }}</p>
-                        </blockquote>
-                        <figcaption class="font-medium">
-                        <!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> -->
-                        <div class="text-color-2 line-clamp-3 text-xl" v-html="item.preview_text"></div>
-                        <div class="text-slate-700 p-2 shadow-md rounded text-center">
-                            <a :href="'/blog/' + item.slug" class="text-blue-600 "> Read More >> </a>
-                        </div>
-                        </figcaption>
-                    </div>
-                    </figure>
-                </div>
-            </div>
-        </div>
-    </section>
-    
-    </div>
-        
-    </template>
-    <style>
-.line-clamp-1 {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;  
-  overflow: hidden;
-}
-    .line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;  
-  overflow: hidden;
-}
-        .text-color-1 {
-            color: #7C4C23;
-            
-        }
-        .text-color-2 {
-            color: #333333;
-            line-clamp: 2;
-            
-        }
-        .line-clamp-3 {
-            /* display: -webkit-box; */
--webkit-line-clamp: 2;
-        }
-    </style>
-    
-    <script is:inline>
-    export default {
-    //     setup(){
-    //     // const route = useRoute();
-    //     useHead({
-    //         title: 'Teenybeans Preschool Curriculum - Blog',
-    //         meta: [
-    //             {
-    //                 name: `title`,
-    //                 content: `Blogs - Teeny Beans Preschool Curriculum`
-    //             },
-    //             {
-    //                 name: `description`,
-    //                 content: `Get detailed information about the preschool industry and the challenges it faces.`
-    //             },
-    //         ],
-    //     })
-    // },
-      data() {
-        return {
-          isLoading: true,
-          tbBlog: {},
-          tbBlog_classroom_solution: [],
-          tbBlog_preschool_solution: {},
-          tbBlog_technology: {},
-          tbBlog_curriculum: {},
-          tbBlog_marketting: {},
-          tbBlog_lession_plan: {},
-          tbBlog_video_articles: {},
-          tbBlog_occassion: {}
-        }
-      },
-      mounted: function () {
-        this.getItemByCategory()
-        // console.log(this.smProducts)
-        // console.log(this.$route.query.cat)
-        // console.log(this.fruits)
-      },
-      methods: {
-        getItemByCategory() {
-          fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=teenybeans_curriculum')
-            .then(response => response.json())
-            .then(data => {
-              this.tbBlog = data.data
-            //   console.log(data)
-              
-              this.tbBlog_classroom_solution = data.data.filter(item => { if (item.category == "classroom-solution ") return item });
-              this.tbBlog_preschool_solution = data.data.filter(item => { if (item.category == "preschool-solution") return item });
-              this.tbBlog_technology = data.data.filter(item => { if (item.category == "technology") return item });
-              this.tbBlog_curriculum = data.data.filter(item => { if (item.category == "curriculum") return item });
-              this.tbBlog_marketting = data.data.filter(item => { if (item.category == "marketting") return item });
-              this.tbBlog_lession_plan = data.data.filter(item => { if (item.category == "lession-plan") return item });
-              this.tbBlog_video_articles = data.data.filter(item => { if (item.category == "video-articles") return item });
-              this.tbBlog_occassion = data.data.filter(item => { if (item.category == "occassion") return item });
-              
-              this.isLoading = false
-            })
+  <div>
+      <div class="container-fluid z-0" style="background: linear-gradient(360deg, rgba(18, 75, 189, 0.08) 0%, rgba(18, 75, 189, 0) 100%);">
+          <div class="flex justify-center">
+              <div class="mt-9 inline-flex p-2">
+                  
+              </div>
+          </div>
+          <div class="flex justify-center">
+              <div class="mt-9 inline-flex p-2 font-serif text-2xl italic text-red-800 font-semibold">
+                <span class="text-blue-600" >Teeny Beans Curriculum </span> &nbsp; <span class=" text-yellow-900" > Blog </span>
+              </div>
+          </div>
+          <div class="flex justify-center">
+              <div class="mb-9 inline-flex p-1">
+                  <form>   
+                      <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
+                      <div class="relative w-96">
+                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                              <svg aria-hidden="true" class="w-5 h-5 text-gray-500 " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                          </div>
+                          <input type="search" id="default-search" class="block p-4  pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 " placeholder="Search our articles" required>
+                          <button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 ">Search</button>
+                      </div>
+                  </form>
+              </div>
+          </div>
+          <div class="flex justify-center">
+              <div class="mt-9 inline-flex p-2">
+                  
+              </div>
+          </div>
+      </div>
+      <section class="container mx-auto">
+      <div class="flex justify-center pt-2 pb-2 m-5 overflow-x-auto">
+          <div class="ml-12 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
+          <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
+          <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
+          <div class="ml-9 mr-9 pl-9 pr-9 md:hidden"> &nbsp;</div>
+          <div class="ml-9 mr-9   md:hidden"> &nbsp;</div>
+          <a href="/blog/?category=classroom-solution"    class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Classroom Solution </a >
+          <a  href="/blog/?category=preschool-solution"   class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Preschool Solution </a>
+          <a  href="/blog/?category=technology"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Technology </a>
+          <a  href="/blog/?category=curriculum"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Curriculum </a>
+          <a  href="/blog/?category=marketting"           class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Marketing </a>
+          <a  href="/blog/?category=lesson-plans"         class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Lesson Plans </a>
+          <a  href="/blog/?category=video-articles"       class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 border-r-0"> Video Articles </a>
+          <a  href="/blog/?category=occassion"            class="h-12 flex-none p-3 text-blue-700 hover:text-white hover:bg-blue-700 border-2 border-blue-700 "> Occassion </a>
+      </div>
+      <div class="xl:px-24">
+          <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://curriculum-app-api.beanstalkedu.com/assets/'+item.img" alt="" 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">
+                      <blockquote>
+                          <p class="text-3xl font-medium text-color-1">{{ item.title }}</p>
+                      </blockquote>
+                      <figcaption class="font-medium">
+                          <!-- <div class="text-color-2 text-justify line-clamp-3">{{ item.preview_text }}</div> -->
+                          <div class="text-color-2 text-xl position-fixed line-clamp-4" v-html="item.meta_description"></div>
+                          <div class="text-slate-700 p-2 shadow-md rounded text-center">
+                              <a :href="'/blog/' + item.slug" class="text-blue-600"> Read More >> </a>
+                          </div>
+                      </figcaption>
+                  </div>
+                  </figure>
+              </div>
+          </div>
+          <FaqSection />
+      </div>
+  </section>
+  
+  </div>
+      
+  </template>
+  <style>
+      .text-color-1 {
+          color: #7C4C23;
           
-        }
+      }
+      .text-color-2 {
+          color: #333333;
+          
+      }
+  </style>
+  
+  <script>
+  export default {
+      setup(){
+      // const route = useRoute();
+      // useHead({
+      //     title: 'Teenybeans Preschool Curriculum',
+      //     meta: [
+      //         {
+      //         name: `title`,
+      //         content: `Blogs - Teeny Beans Preschool Curriculum`
+      //         },
+      //         {
+      //         name: `description`,
+      //         content: `Get detailed information about the preschool industry and the challenges it faces.`
+      //         },
+      //     ],
+      // }) 
+  },
+    data() {
+      return {
+        isLoading: true,
+        tbBlog: {},
+        tbBlog_classroom_solution: [],
+        tbBlog_preschool_solution: {},
+        tbBlog_technology: {},
+        tbBlog_curriculum: {},
+        tbBlog_marketting: {},
+        tbBlog_lession_plan: {},
+        tbBlog_video_articles: {},
+        tbBlog_occassion: {}
+      }
+    },
+    mounted: function () {
+      this.getItemByCategory()
+      // console.log(this.smProducts)
+      // console.log(this.$route.query.cat)
+      // console.log(this.fruits)
+    },
+    methods: {
+      getItemByCategory() {
+        fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=teenybeans_curriculum&sort=sort,-date_created')
+          .then(response => response.json())
+          .then(data => {
+            this.tbBlog = data.data
+          //   console.log(data)
+            this.tbBlog_classroom_solution = data.data.filter(item => { if (item.category == "classroom-solution ") return item });
+            this.tbBlog_preschool_solution = data.data.filter(item => { if (item.category == "preschool-solution") return item });
+            this.tbBlog_technology = data.data.filter(item => { if (item.category == "technology") return item });
+            this.tbBlog_curriculum = data.data.filter(item => { if (item.category == "curriculum") return item });
+            this.tbBlog_marketting = data.data.filter(item => { if (item.category == "marketting") return item });
+            this.tbBlog_lession_plan = data.data.filter(item => { if (item.category == "lession-plan") return item });
+            this.tbBlog_video_articles = data.data.filter(item => { if (item.category == "video-articles") return item });
+            this.tbBlog_occassion = data.data.filter(item => { if (item.category == "occassion") return item });
+            
+            this.isLoading = false
+          })
+        
       }
     }
-    </script>
\ No newline at end of file
+  }
+  </script>
\ No newline at end of file
diff --git a/src/components/BlogFaq.vue b/src/components/BlogFaq.vue
new file mode 100644
index 0000000..dcd54e4
--- /dev/null
+++ b/src/components/BlogFaq.vue
@@ -0,0 +1,99 @@
+<template>
+    <section v-if="faqBlog" 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="faqBlog in faqBlog" :key="faqBlog.id" class="">
+                    <div class="grid h-fit text-color-2">
+                        <div tabindex="0" class="collapse collapse-arrow border-b">
+                            <div v-if="faqBlog" class="collapse-title md:text-xl ">&#43; &nbsp;{{ faqBlog.title }}</div>
+                            <div class="collapse-content md:text-lg"> 
+                                <p class="list-disc" v-html="faqBlog.content"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> 
+        </div>
+    </section>
+</template>
+<script>
+export default {
+setup(){
+// // const siteData = reactive({
+//   title: 'Blogs - Teeny Beans Preschool Curriculum',
+//   description: `My beautiful website`,
+  
+// })
+
+
+
+},
+    data() {
+        return {
+            page: null,
+            faqBlog: null,
+            isLoading: true,
+            bname: null,
+            bemail: null,
+            bnumber: null,
+            BlogQry: true,
+            metaname: "KKKK",
+            metadescription: "Description",
+            items:null
+        }
+    },
+    
+    mounted: function () {
+        fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
+          .then(response => response.json())
+          .then(data => {
+            this.page = data.data
+            this.isLoading = false
+            this.metaTitle=this.page[0].title
+            const descEl = document.querySelector('head meta[name="description"]');
+            const titleEl = document.querySelector('head title');
+            descEl.setAttribute('content', this.page[0].title);
+            titleEl.textContent = this.page[0].title;
+            
+        })
+        fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
+        .then(resp => resp.json())
+        .then(data => {
+            this.faqBlog=data.data
+            console.log(this.faqBlog)
+        })
+
+    },
+    
+        
+        
+    methods: { 
+        saveBlogQry(){
+        let formData = new FormData();
+        formData.append('Name', this.bname);
+        formData.append('Email', this.bemail);
+        formData.append('Phone', this.bnumber);
+        formData.append('formName', 'tb-blog');
+        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
+    }
+   
+
+
+},
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/BlogGetinTouch.vue b/src/components/BlogGetinTouch.vue
new file mode 100644
index 0000000..8d53c83
--- /dev/null
+++ b/src/components/BlogGetinTouch.vue
@@ -0,0 +1,116 @@
+<template>
+    <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-2xl 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="bname" 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="bemail" 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="bnumber" 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="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>
+</template>
+<script>
+export default {
+setup(){
+// const siteData = reactive({
+//   title: 'Blogs - Teeny Beans Preschool Curriculum',
+//   description: `My beautiful website`,
+  
+// })
+
+
+// useHead({
+//     title: computed(() => siteData.title),
+//     meta: [
+//         {
+//             name: 'title',
+//             content: `Blogs - Teeny Beans Preschool Curriculum`
+//         },
+//         {
+//             name: `description`,
+//             content: `Get detailed information about the preschool industry and the challenges it faces.`
+//         },
+//     ],
+// })
+},
+    data() {
+        return {
+            page: null,
+            faqBlog: null,
+            isLoading: true,
+            bname: null,
+            bemail: null,
+            bnumber: null,
+            BlogQry: true,
+            metaname: "KKKK",
+            metadescription: "Description",
+            items:null
+        }
+    },
+    
+    mounted: function () {
+        fetch('https://curriculum-app-api.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
+          .then(response => response.json())
+          .then(data => {
+            this.page = data.data
+            this.isLoading = false
+            this.metaTitle=this.page[0].title
+            const descEl = document.querySelector('head meta[name="description"]');
+            const titleEl = document.querySelector('head title');
+            descEl.setAttribute('content', this.page[0].title);
+            titleEl.textContent = this.page[0].title;
+            
+        })
+        fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=' + this.$route.params.id)
+        .then(resp => resp.json())
+        .then(data => {
+            this.faqBlog=data.data
+            // console.log(this.faqBlog)
+        })
+
+    },
+    
+        
+        
+    methods: { 
+        saveBlogQry(){
+        let formData = new FormData();
+        formData.append('Name', this.bname);
+        formData.append('Email', this.bemail);
+        formData.append('Phone', this.bnumber);
+        formData.append('formName', 'tb-blog');
+        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
+    }
+   
+
+
+},
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/EducatorsLicense.vue b/src/components/EducatorsLicense.vue
new file mode 100644
index 0000000..931e7fa
--- /dev/null
+++ b/src/components/EducatorsLicense.vue
@@ -0,0 +1,167 @@
+<template>
+    <div>
+        <section class="container mx-auto ">
+            <h1 class="text-color-3 text-5xl text-center py-16">Educator's License</h1>
+            <div class="flex justify-center">
+                <div class="grid ">
+                    <div class="wrapper flex flex-col lg:flex-row text-lg gap-4 place-items-center">
+                        <!-- <h1 class="justify-center">Teacher Accounts</h1> -->
+                        <!-- <input class="flex w-96 slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue">  -->
+                        <!-- <div class="flex flex-row"><span class="border-2 border-black px-1" v-text="sliderValue"></span></div> -->
+                    </div>
+                    <div class="grid grid-cols-2 py-3">
+                        <h1 class="grid ">Student Accounts</h1>
+                        <div class="grid place-items-end"><strong class="">(30)</strong></div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-col lg:flex-row justify-center gap-4 px-4">
+                <div class="form-group mb-1">
+                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                    <input type="text" v-model="gtname" 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="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
+                    <input type="text" v-model="gtname" 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>
+            <div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
+        </section>  
+        <section class="container mx-auto px-4 my-16">
+            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-6">
+                <div class="grid grid-rows-2 w-full ">
+                    <div class="grid background place-items-center rounded-lg py-8">
+                        <h1 class="text-3xl text-white ">Monthly</h1>
+                    </div>
+                    <div class="grid shadow-2xl rounded-b-xl">
+                        <h1 class="text-4xl p-1 text-center">&#36;100</h1>
+                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                    </div>
+                </div>
+                <div class="grid grid-rows-2 w-full">
+                    <div class="grid background place-items-center rounded-lg">
+                        <h1 class="text-3xl text-white ">Bi-Yearly</h1>
+                    </div>
+                    <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                        <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1>
+                        <span class="text-lg text-color-2">(10% Discount)</span>
+                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                    </div>
+                </div>
+                <div class="grid grid-rows-2 w-full">
+                    <div class="grid background place-items-center rounded-lg">
+                        <h1 class="text-3xl text-white ">Yearly</h1>
+                    </div>
+                    <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                        <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
+                        <span class="text-lg text-color-2">(15% Discount)</span>
+                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div>
+        </section>
+        <section class="container mx-auto my-16 px-4">
+                <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
+                    <div class="flex flex-col justify-center">
+                        <div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
+                                <h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
+                                <h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
+                        </div> 
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
+                                <div class="form-group mb-1">
+                                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                                    <input 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 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="flex flex-col form-control place-content-center">
+                                    <div class="text-left py-2">Your Message</div>
+                                    <textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
+                                </div>
+                                <div class="form-group form-check mb-6 pt-4">
+                                    <input type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
+                                    <label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
+                                </div>
+                                <button @click="" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded 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">Contact us</button>
+                        </div>
+                    </div>
+                </div>
+        </section>
+    </div>
+</template>
+<style scoped>
+
+
+.slider {
+  -webkit-appearance: none;
+  height: 6px;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.3);
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+
+
+/* .slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 2px;
+  height: 2px;
+  background: rgba(0, 102, 255, 1);
+  border-radius: 50px;
+  cursor: pointer;
+} */
+
+.slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: rgba(0, 102, 255, 1);
+    border-radius: 50px;
+    cursor: pointer;
+}
+.slider:hover::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: rgb(0, 102, 255, 1);
+    border-radius: 50px;
+    border-width: 6px;
+    border-color: rgba(217, 214, 214, 1);
+    cursor: pointer;
+}
+
+.border-radius{
+    border-top-left-radius: 200px;
+    height: 400px;
+}
+    .background {
+        background-color: #00CD08;
+    }
+    .text-color-1 {
+        color:  #333333;
+    }
+    .text-color-2 {
+        color: #00CD08;
+    }
+    .text-color-3 {
+        color: #00CD08;
+    }
+    
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        sliderValue: 55,
+      }
+    },
+  }
+  </script>
\ No newline at end of file
diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index 4b60683..ba07a41 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -56,8 +56,8 @@
                         </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">Popular Curriculum</h1>
-                            <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
+                            <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>
                             <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
                             <router-link to="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
                         </div>
@@ -72,7 +72,7 @@
                     <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 for your Classroom</h1>
+                            <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>
                             <!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
                             <router-link to="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
@@ -95,49 +95,62 @@
                 </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 m-8 w-auto">
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between">
-                            <div class="grid"><a href="/audio-books"><img draggable="false" src="/img/Audiobooks.png" alt=""></a></div>
-                            <div class="grid"><a href="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></a></div>
-                            <div class="grid"><a href="/videos"><img draggable="false" src="/img/Videos.png" alt=""></a></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 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 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 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-4 place-items-between">
-                            <div class="grid"><a href="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></a></div>
-                            <div class="grid"><a href=""><img draggable="false" src="/img/Reference-Links.png" alt=""></a></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 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 href="/themes"><img class="flex inline-flex" draggable="false" src="/img/theme.png" alt="Themes">Themes</a></div>
                         </div>
                     </div>
                 </section>
-                <section class="container mx-auto  mt-12 xl:px-24">
-                    <div class="grid lg:grid-cols-2 grid-cols-1 grid-rows-3 ">   
-                        <div class="grid row-span-1 h-fit px-4">
-                            <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 href="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div>
-                        </div>
-                        <div class="grid row-span-2 place-items-center lg:place-items-end cursor-pointer">
-                            <swiper class="w-96"
-                                :modules="modules"
-                                :slides-per-view="1"
-                                :space-between="0"
-                                navigation
-                                :autoplay=" { delay: 25000, disableOnInteraction: false}"
-                                @swiper="onSwiper"
-                                @slideChange="onSlideChange">
-                                <swiper-slide v-for="lesson in lessonplan" :key="lesson.id"> 
-                                    <img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
-                                </swiper-slide>      
-                            </swiper>
-                        </div>
+                <section class="container mx-auto my-16 px-4 xl:px-24">
+                  <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center 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 href="/lesson-plan/dailyplan" class="text-2xl bg-blue-700 px-6 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" 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>
-                <section class="container mx-auto xl:px-24">
+                <!-- <section class="container mx-auto xl:px-24">
                     <div class="grid grid-cols-1 md:grid-cols-2 bg-gray-200">
                         <div class="grid place-items-start p-10 h-fit">
                             <p class="text-color-1 hero-text font-bold mt-20">Discover Our Preschool Solutions</p>
                             <router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white text-2xl px-6 py-2">Discover All</button></router-link>
                         </div>
-                        <div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
+                        <div class="grid place-items-center md:place-items-end h-fit w-fit"><img class="h-fit w-fit" src="/img/fire-fighter.png" alt=""/></div>
                     </div>
+                </section> -->
+                <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 class="container mx-auto">
                         <div class="grid place-content-center text-color-1 text-2xl font-bold py-20"> EYFS Curriculum & Its Impact</div>
@@ -212,39 +225,54 @@
                         <div class="grid"><router-link to="/administrators"><img src="/img/right-slid.png" alt=""></router-link></div>
                     </div>
                 </section>
-                <section class="container mx-auto xl:px-24">
-                    <h1 class="hero-text text-center text-blue-700 py-20">We are a 360 degree preschool curriculum solution <br>for your preschool</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">
-                                <img class=" w-full rounded-t-2xl" src="/img/person1.png" alt="">
-                                <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
-                                <p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
-                            </div>
-                        </div>
-                        <div class="grid background border0 rounded-xl shadow-xl">
-                            <div class="bottombar cursor-pointer">
-                                <img class=" w-full rounded-t-2xl" src="/img/person2.png" alt="">
-                                <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
-                                <p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
-                            </div>
-                        </div>
-                        <div class="grid background border0 rounded-xl shadow-xl">
-                            <div class="bottombar cursor-pointer">
-                                <img class=" w-full rounded-t-2xl" src="/img/person3.png" alt="">
-                                <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
-                                <p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
-                            </div>
-                        </div>
-                        <div class="grid background border0 rounded-xl shadow-xl">
-                            <div class="bottombar cursor-pointer">
-                                <img class=" w-full rounded-t-2xl" src="/img/person4.png" alt="">
-                                <h1 class="text-2xl text-blue-700 font-semibold text-center p-2">"Quote the client here" </h1>
-                                <p class="text-color-2 font-20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus placeat vitae, quas debitis commodi illum ad recusandae? Dolore aspernatur maxime nam ipsum! Exercitationem, laudantium blanditiis aspernatur aut magni harum cumque?</p>
-                            </div>
+                <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> <br>
+                                    Stepping Stones International Preschool<br>
+                                    Director
+                                </strong>  </p>
                         </div>
                     </div>
-                </section>
+                    <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> <br> <strong> <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> <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><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">
                     <div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
                         <div class="grid h-fit">
@@ -269,42 +297,41 @@
     </div>
 </template>
  <script>
- // 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 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],
 
- // Import Swiper styles
- import 'swiper/css';
- // const swiper = new Swiper('.swiper', {
- //       autoplay: {
- //         delay: 5000,
- //       },
- //     });
- import { computed, defineComponent, ref } from "vue";
-
- 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,
@@ -322,7 +349,7 @@
      }
  },
    mounted: function () {
-     fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
+     fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan')
          .then(response => response.json())
          .then(data => {
              this.lessonplan = data.data
@@ -337,24 +364,27 @@
              // console.log(this.faqHome)
          })
      },
-     name: "ExpandableBlockContent",
-  props: {
-    content: { type: String },
-  },
-  setup() {
-    const isExpanded = ref(true);
-    const toggleCtaLabel = computed(() =>
-      isExpanded.value ? "Read Less >" : "Read More >"
-    );
-    return {
-      isExpanded,
-      toggleCtaLabel,
-    };
-  },
+  //    name: "ExpandableBlockContent",
+  // props: {
+  //   content: { type: String },
+  // },
+  // setup() {
+  //   const isExpanded = ref(true);
+  //   const toggleCtaLabel = computed(() =>
+  //     isExpanded.value ? "Read Less >" : "Read More >"
+  //   );
+  //   return {
+  //     isExpanded,
+  //     toggleCtaLabel,
+  //   };
+  // },
  };
 </script>
 
 <style >
+.slider-width {
+  width: 400px;
+}
 .block-content {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..3a885e6
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,127 @@
+<template>
+   <h2>Animated Modal with Header and Footer</h2>
+
+<!-- Trigger/Open The Modal -->
+<button id="myBtn">Open Modal</button>
+
+<!-- The Modal -->
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="close">&times;</span>
+      <h2>Modal Header</h2>
+    </div>
+    <div class="modal-body">
+      <p>Some text in the Modal Body</p>
+      <p>Some other text...</p>
+    </div>
+    <div class="modal-footer">
+      <h3>Modal Footer</h3>
+    </div>
+  </div>
+
+</div>
+</template>
+<script is:inline>
+// Get the modal
+var modal = document.getElementById("myModal");
+
+// Get the button that opens the modal
+var btn = document.getElementById("myBtn");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks the button, open the modal 
+btn.onclick = function() {
+  modal.style.display = "block";
+}
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() {
+  modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+}
+</script>
+<style>
+body {font-family: Arial, Helvetica, sans-serif;}
+
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop;
+  animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+  from {top:-300px; opacity:0} 
+  to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.close {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.modal-header {
+  padding: 2px 16px;
+  background-color: #5cb85c;
+  color: white;
+}
+
+.modal-body {padding: 2px 16px;}
+
+.modal-footer {
+  padding: 2px 16px;
+  background-color: #5cb85c;
+  color: white;
+}
+</style>
+
diff --git a/src/components/Premium.vue b/src/components/Premium.vue
new file mode 100644
index 0000000..a18f227
--- /dev/null
+++ b/src/components/Premium.vue
@@ -0,0 +1,317 @@
+<template>
+    <div>
+        <section class="container-fluid bg3 shadow-2xl">
+        <div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
+          <div class="flex flex-col px-6 w-full justify-center">
+            <h1 class="text-blue-700 hero-text font-bold">Check out our Premium Plans</h1>
+            <p class="font-20px text-color-2">We have plans according to everyone's needs.</p>
+            <p class="font-20px text-color-2">Check out our plans and what work's for you the best</p>
+          </div>
+          <div class="flex w-fit justify-center place-items-center">
+            <img class="w-fit h-fit  rounded-3xl py-4 cursor-none" src="/img/price1.png" alt="">
+          </div> 
+        </div>
+    </section>
+    <section class="container mx-auto px-4 xl:px-24">
+        <div class="grid grid-cols-1 md:grid-cols-2 place-items-center my-24 gap-16">
+            <div class="grid box1 relative">
+                <div id="d-wrapper">
+                    <div class="zig-zag-bottom absolute inset-x-0 top-0 ">
+                        <h1 class="text-center text-4xl text-white ">Educator’s License</h1>
+                    </div>
+                </div>
+                <h1 class="text-center mt-48 text-2xl text3">For Individual Educators</h1>
+                <h1 class="text-center mt-4 text-3xl text3">1 Teacher’s Account</h1>
+                <h1 class="text-center mt-4 text-3xl text3">Free Resources</h1>
+                <div class="mt-28 flex justify-center">
+                    <a href="/educators-license"><h1 class="text-center text-3xl bg2 rounded-3xl py-4 text-white font-semibold w-fit px-16">GET QUOTE</h1></a>
+                </div>
+            </div>
+            <div class="grid box2 relative">
+                <div id="d-wrapper2" class="bg3">
+                    <div class="zig-zag-bottom  absolute inset-x-0 top-0">
+                        <h1 class="text-center text-4xl text-white">School License</h1>
+                        
+                    </div>
+                </div>
+                <h1 class="text-center mt-40 text-2xl text3">For Preschools</h1>
+                <h1 class="text-center mt-4 text-3xl text3">Multiple Teacher’s Accounts</h1>
+                <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>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="container mx-auto px-4 xl:px-24 mb-16">
+        <details>
+            <summary> 
+                <div class="grid grid-cols-3 place-items-center ">
+                    <div class="grid  text1 text-xl ">Educator's License</div>
+                    <div class="grid  text-black">VS</div>
+                    <div class="grid  text2 text-xl">School License</div>
+                </div>
+            </summary>
+            <div class="grid grid-cols-2 place-items-center ">
+                <div class="grid">
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                </div>
+                <div class="grid">
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                    <span class="p-4 text-lg md:text-2xl">Dignissim ut vel senectus ac.</span>
+                </div>
+            </div>
+        </details>
+
+        </section>
+        <section class="container mx-auto px-4 xl:px-24">
+                <div class="flex flex-col lg:flex-row place-items-center justify-center">
+                    <div class="flex flex-col justify-center md:px-28 lg:px-0">
+                        <div class="bg-gray-100 text-center border-radius px-20 lg:px-20">
+                            <h1 class="text-3xl md:text-4xl text-center pt-32 p-3 text-blue-700">Talk to Us ></h1>
+                                <h1 class="text-xl lg:text-2xl  lg:w-96">If you want to know which plan works for you the best, write to us and we’ll get back to you with best advice</h1>
+                            </div> 
+                        <!-- <img class="h-auto" src="/img/get-in-touch.png" alt="" > -->
+                    </div>
+                    <div class="flex flex-col ">
+                        <div class="block p-6 rounded-xl shadow-lg bg-white w-96 border-2 py-14 text-xl">
+                            <div v-if="isLoading">
+                                <div class="form-group mb-1">
+                                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                                    <input type="text" v-model="name" 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 type="email" v-model="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 type="text" v-model="phone"  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="exampleInputYourAddress" class="form-label inline-block mb-2 text-gray-700">Your Address</label>
+                                    <input type="text" v-model="address"  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 form-check mb-6"><input v-model="flag" type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
+                                    <label  class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
+                                </div>
+                                <button @click="saveContactForm" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded 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">Contact us</button>
+                            </div>
+                            <div v-else>
+                                <h2 class="text-center py-40 text-4xl">Thank You!</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+    </div>
+</template>
+<style scoped>
+details {
+    border: 1px solid #d4d4d4;    
+    padding: .75em .75em 0;
+	/* margin-top: 10px; */
+	/* box-shadow:0 0 8px #d4d4d4; */
+}
+
+summary {	
+    font-weight: bold;
+    margin: -.75em -.75em 0;
+    padding: .75em;
+    background-color: #F9F9F9;
+    color: #fff;
+}
+
+details[open] {
+    padding: .75em;
+	border-bottom: 1px solid #d4d4d4;
+}
+
+details[open] summary {
+    border-bottom: 1px solid #d4d4d4;
+    margin-bottom: 10px;
+}
+
+.font-20px {
+    font-size: 20px;
+}
+@media screen and (min-width: 801px) {
+  .hero-text {
+    font-size: 50px;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .hero-text {
+    font-size: 30px;
+    
+  }
+}
+.bg3 {
+  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
+}
+    .bg0 {
+        background-color: #00CD08;
+    }
+    .text {
+        color: #00CD08;
+    }
+.border-radius{
+    border-top-left-radius: 200px;
+    height: 400px;
+}
+    .text1 {
+        color: #FFA25F;
+    }
+    .text2{
+        color:#5F008C;
+}
+.text3 {
+    color: #666666;
+}
+
+.bg2 {
+    background-color: #FFA25F;
+}
+.bg4 {
+    background-color: #5F008C;
+}
+
+.box {
+    background-color: #dfdedf;
+    border-top-left-radius: 200px;
+
+}
+#d-wrapper {
+background-color: #fff;
+}
+#d-wrapper * {
+
+margin:0;
+padding:0;}
+
+#d-wrapper	div.sep {
+		min-height: 200px;
+}
+#d-wrapper	div > * {
+		margin: 0 40px;
+	}
+#d-wrapper	.zig-zag-bottom{
+		margin: 32px 0;
+		margin-top: 0;
+		background: #FFA25F;
+        width: 100%;
+	}
+#d-wrapper	.zig-zag-bottom,
+#d-wrapper	.zig-zag-top{
+			  padding: 32px 0;
+	}
+#d-wrapper2	.zig-zag-bottom,
+#d-wrapper2	.zig-zag-top{
+			  padding: 32px 0;
+	}
+#d-wrapper	.zig-zag-bottom:after{
+		background: 
+        linear-gradient(-45deg, transparent 16px, #FFA25F 0), 
+        linear-gradient(45deg, transparent 16px, #FFA25F  0);
+        background-size: 24px 32px;
+        content: "";
+        display: block;
+
+		width: 100%;
+		height: 32px;
+
+ 	    position: relative;
+		top:50px;
+		left:0px;
+	}
+    #d-wrapper2	.zig-zag-bottom:after{
+		background: 
+        linear-gradient(-45deg, transparent 16px, #9B00FA 0), 
+        linear-gradient(45deg, transparent 16px, #9B00FA  0);
+        background-size: 24px 32px;
+        content: "";
+        display: block;
+
+		width: 100%;
+		height: 32px;
+
+ 	    position: relative;
+		top:50px;
+		left:0px;
+	}
+    #d-wrapper2	.zig-zag-bottom{
+		margin: 32px 0;
+		margin-top: 0;
+		background: #9B00FA;
+        width: 100%;
+	}
+    .box1 {
+    width: 100%;
+    height: 550px;
+    /* padding: 25px; */
+    border: 1px solid #FFA25F;
+}
+.box2 {
+  width: 100%;
+  height: 550px;
+  /* padding: 25px; */
+  border: 1px solid #9B00FA;
+}
+</style>
+<script>
+export default {
+  data() {
+    return {
+      isLoading: true,
+      name:null,
+      email:null,
+      phone:null,
+      address:null,
+      flag:null,
+      contact_form:{}
+    }
+  },
+  mounted: function () {
+    // this.getItemByCategory()
+    // console.log(this.smProducts)
+    // console.log(this.$route.query.cat)
+    // console.log(this.fruits)
+  },
+  methods: {
+    saveContactForm() {
+        let formData={
+            "name":this.name,
+            "email":this.email,
+            "phone":this.phone,
+            "address":this.address,
+            "flag":this.flag,
+        }
+        let dataToSave = {
+        method: 'POST',
+        headers: { 
+        'Content-Type': 'application/json',
+        // 'Authorization': 'Bearer my-token',
+        // 'My-Custom-Header': 'foobar'
+        },
+        body: JSON.stringify(formData)
+    };
+    fetch('https://curriculum-app-api.beanstalkedu.com/items/contact_form', dataToSave)
+        .then(response => response.json())
+        .then(data => this.contact_form = data.data);
+        // console.log(this.contact_form)
+        this.isLoading=false
+    }
+  }
+}
+</script>
+
diff --git a/src/components/SchoolLicense.vue b/src/components/SchoolLicense.vue
new file mode 100644
index 0000000..e6a1b2f
--- /dev/null
+++ b/src/components/SchoolLicense.vue
@@ -0,0 +1,166 @@
+<template>
+    <div>
+        <section class="container mx-auto px-4 xl:px-24">
+            <h1 class="text-color-3 text-5xl text-center py-16">Teacher's License </h1>
+                <div class="flex flex-row justify-center">
+                <h1 class="justify-center">Teacher Accounts: &nbsp;</h1>
+                <input class="flex slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue">  &nbsp;
+                    <span class="border border-black px-1 h-fit rounded-md" v-text="sliderValue"></span>
+            </div>
+            <div class="flex flex-row justify-center 2xl:gap-x-96 space-x-48 md:space-x-96 mt-8">
+                <div class="flex">Student Accounts</div>
+                <div class="flex">30</div>
+            </div>
+            <div class="flex flex-col lg:flex-row justify-center gap-4 xl:space-x-48 mt-10">
+                <div class="form-group mb-1">
+                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                    <input type="text" v-model="gtname" 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="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
+                    <input type="text" v-model="gtname" 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>
+            <div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
+            
+        </section>
+        <section class="container mx-auto my-16 px-4 xl:px-24">
+            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-x-16 gap-y-6">
+                <div class="grid grid-rows-2 w-full ">
+                    <div class="grid background place-items-center rounded-lg py-8">
+                        <h1 class="text-3xl text-white ">Monthly</h1>
+                    </div>
+                    <div class="grid shadow-2xl rounded-b-xl">
+                        <h1 class="text-4xl p-1 text-center">&#36;100</h1>
+                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                    </div>
+                </div>
+                <div class="grid grid-rows-2 w-full">
+                    <div class="grid background place-items-center rounded-lg">
+                        <h1 class="text-3xl text-white ">Bi-Yearly</h1>
+                    </div>
+                    <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                        <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1>
+                        <span class="text-lg text-color-2">(10% Discount)</span>
+                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                    </div>
+                </div>
+                <div class="grid grid-rows-2 w-full">
+                    <div class="grid background place-items-center rounded-lg">
+                        <h1 class="text-3xl text-white ">Yearly</h1>
+                    </div>
+                    <div class="grid shadow-2xl rounded-b-xl place-items-center">
+                        <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
+                        <span class="text-lg text-color-2">(15% Discount)</span>
+                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div>
+        </section>
+        <section class="container mx-auto my-16 px-4">
+                <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
+                    <div class="flex flex-col justify-center">
+                        <div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
+                                <h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
+                                <h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
+                        </div> 
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
+                                <div class="form-group mb-1">
+                                    <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
+                                    <input 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 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="flex flex-col form-control place-content-center">
+                                    <div class="text-left py-2">Your Message</div>
+                                    <textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
+                                </div>
+                                <div class="form-group form-check mb-6 pt-4">
+                                    <input type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
+                                    <label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
+                                </div>
+                                <button @click="" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight uppercase rounded 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">Contact us</button>
+                        </div>
+                    </div>
+                </div>
+        </section>
+    </div>
+</template>
+<style scoped>
+
+
+.slider {
+  -webkit-appearance: none;
+  height: 6px;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.3);
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+  width: 50%;
+}
+
+
+
+/* .slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 2px;
+  height: 2px;
+  background: rgba(0, 102, 255, 1);
+  border-radius: 50px;
+  cursor: pointer;
+} */
+
+.slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: rgba(0, 102, 255, 1);
+    border-radius: 50px;
+    cursor: pointer;
+}
+.slider:hover::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: rgb(0, 102, 255, 1);
+    border-radius: 50px;
+    border-width: 6px;
+    border-color: rgba(217, 214, 214, 1);
+    cursor: pointer;
+}
+
+.border-radius{
+    border-top-left-radius: 200px;
+    height: 400px;
+    width: 100%;
+}
+    .background {
+        background-color: #124BBD;
+    }
+    .text-color-1 {
+        color:  #333333;
+    }
+    .text-color-2 {
+        color: #124BBD;
+    }
+    .text-color-3 {
+        color: #124BBD;
+    }
+    
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        sliderValue: 55,
+      }
+    },
+  }
+  </script>
\ No newline at end of file
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
index 83ea767..3ee97a7 100644
--- a/src/components/Slider.vue
+++ b/src/components/Slider.vue
@@ -1,5 +1,5 @@
 <template>
-    <swiper
+    <swiper class="w-40 "
       :modules="modules"
       :slides-per-view="3"
       :space-between="50"
@@ -23,7 +23,7 @@
     import { Swiper, SwiperSlide } from 'swiper/vue';
   
     // Import Swiper styles
-    import 'swiper/css';
+    // import 'swiper/css';
     import 'swiper/css/navigation';
     import 'swiper/css/pagination';
     import 'swiper/css/scrollbar';
diff --git a/src/components/TestSwiper.vue b/src/components/TestSwiper.vue
index df45ac2..6c327e0 100644
--- a/src/components/TestSwiper.vue
+++ b/src/components/TestSwiper.vue
@@ -1,5 +1,5 @@
 <template>
-    <swiper
+    <swiper class="width"
     :modules="modules"
     :slides-per-view="1"
     :space-between="0"
@@ -82,4 +82,12 @@
             })
         },
     };
-  </script>
\ No newline at end of file
+  </script>
+<style>
+  .width {
+    width: 400px;
+    display: flex;
+    justify-items: flex-end;
+  }
+  
+</style>
\ No newline at end of file
diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro
index 051d19a..821f8f4 100644
--- a/src/pages/blog/[id].astro
+++ b/src/pages/blog/[id].astro
@@ -1,21 +1,89 @@
 ---
+  import Layout from "../../layouts/Layout.astro";
+  import BlogGetinTouch from "../../components/BlogGetinTouch.vue";
+  import BlogFaq from "../../components/BlogFaq.vue";
+  const imgPrefix='https://curriculum-app-api.beanstalkedu.com/assets/';
   const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog');
   const data = await response.json();
-export async function getStaticPaths() {
+  const faq = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog');
+  const faqJson = await faq.json();
+  export async function getStaticPaths() {
   const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog');
   const data = await response.json();
   const finalData = data.data.map((n: { slug: any; })=>{
       return {params: {id:n.slug}}
   })
-  // console.log(finalData)
+//   console.log(finalData)
   return finalData;
 }
 
+
 const { id } = Astro.params;
 const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
+const mainImg='https://curriculum-app-api.beanstalkedu.com/assets/'+data.data[idx].img;
+
 ---
-<h1>{id}</h1>
-{data.data[idx].slug} <br>
-{data.data[idx].status} <br>
-{data.data[idx].title} <br>
-{data.data[idx].property} <br>
\ No newline at end of file
+<Layout title="">
+    <main>
+        <div class="grid grid-cols-1 xl:grid-cols-6 xl:px-24">
+          <div class="grid xl:col-span-4 container mx-auto">
+            <div class="bg-white mt-3">
+              <!-- <h2 class="ml-28 text-4xl">Loading ...</h2> -->
+              <div>
+                <div  ></div>
+                <!-- <p>{{ page[0].meta }}</p> -->
+                <figure class=" p-4 xl:pl-20 2xl:pl-32">
+                    <h1 class="text-3xl lg:text-4xl font-semibold text-color-1 py-4">{data.data[idx].title}</h1>
+                    <!-- <img class="w-full" v-if="page[0].img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+page[0].img" alt="" style="width:100%;"> -->
+                    <!-- <img src="" alt="">{data.data[idx].img} -->
+                    <img src={ mainImg} alt="image description" style="width:100%;"/>
+                    <div class="pt-6 space-y-4">
+                        <blockquote>
+                        </blockquote>
+                        <figcaption class="font-medium">
+                            <!-- <div class="text-color-2 text-justify text-lg" >{{page[0].preview_text }}</div> -->
+                            <div class="text-color-2 text-lg text-justify" set:html={data.data[idx].preview_text}></div>
+                        </figcaption>
+                    </div>
+                </figure>
+                <!-- <div v-html="page[0].content" class="container mx-auto">
+                </div> -->
+            </div>
+            </div>
+          </div>
+          <section class="z-50">
+            <div>
+                <a href="#" target="_blank" style="  position: fixed; top: 200px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
+                    <img class="" src="/img/svg/link.svg" alt="">
+                </a>
+                <a href="https://api.whatsapp.com/send/?phone=919163646431&text&app_absent=0" target="_blank" style="  position: fixed; top: 260px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
+                    <img class="" src="/img/svg/whatsapp.svg" alt="">
+                </a>
+                <a href="#" target="_blank" style="  position: fixed; top: 320px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
+                    <img class="" src="/img/svg/facebook.svg" alt="">
+                </a>
+                <a href="#" target="_blank" style="  position: fixed; top: 380px; right: 10px; background-color: #7C4C23; width: 50px; height: 50px; border-radius: 50%; text-align: center;">
+                    <img class="" src="/img/svg/twitterw.svg" alt="">
+                </a>
+            </div>
+            </section>
+            <section class="container z-40">
+              <div class="grid xl:col-span-2 place-items-center">
+                  <div class="xl:fixed top-40 xl:right-24">
+                      <BlogGetinTouch client:visible/>
+                  </div>
+              </div>
+          </section>
+        </div>
+        <BlogFaq client:visible/>
+      </main>
+</Layout>
+  
+<style scoped>
+  .text-color-1 {
+      color: #7C4C23;
+  }
+  .text-color-2 {
+      color: #333333
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/educators-license.astro b/src/pages/educators-license.astro
new file mode 100644
index 0000000..540dd7f
--- /dev/null
+++ b/src/pages/educators-license.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Menu from "../components/Menu.astro";
+import EducatorsLicense from "../components/EducatorsLicense.vue";
+import Footer from "../components/Footer.vue";
+---
+<Layout title="">
+    <Menu/>
+    <EducatorsLicense client:visible/>
+    <Footer client:visible/>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/modal.astro b/src/pages/modal.astro
index a9bbd92..87e42c0 100644
--- a/src/pages/modal.astro
+++ b/src/pages/modal.astro
@@ -1,110 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import Modal from "../components/Modal.vue";
 ---
-<Layout title="modal">
-    <h2>Modal Example</h2>
-
-    <!-- Trigger/Open The Modal -->
-    <button id="myBtn">Open Modal</button>
-    
-    <!-- The Modal -->
-    <div id="myModal" class="modal">
-    
-      <!-- Modal content -->
-      <div class="modal-content">
-        <span class="close">&times;</span>
-        <p>njhnjhnhnhn</p>
-      </div>
-    
-    </div>
-</Layout>
-
-<script is:inline>
-    export default {
-    
-    data() {
-        return {
-            page: null,
-            isLoading: true,
-
-        }
-    },
-    mounted: function () {
-            fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=occassion')
-            .then(resp => resp.json())
-            .then(data => {
-            this.faqOccassion=data.data
-            console.log(this.faqOccassion)
-            })
-      
-            
-    }
-}
-    // Get the modal
-    var modal = document.getElementById("myModal");
-    
-    // Get the button that opens the modal
-    var btn = document.getElementById("myBtn");
-    
-    // Get the <span> element that closes the modal
-    var span = document.getElementsByClassName("close")[0];
-    
-    // When the user clicks the button, open the modal 
-    btn.onclick = function() {
-      modal.style.display = "block";
-    }
-    
-    // When the user clicks on <span> (x), close the modal
-    span.onclick = function() {
-      modal.style.display = "none";
-    }
-    
-    // When the user clicks anywhere outside of the modal, close it
-    window.onclick = function(event) {
-      if (event.target == modal) {
-        modal.style.display = "none";
-      }
-    }
-    </script>
-<style>
-    body {font-family: Arial, Helvetica, sans-serif;}
-    
-    /* The Modal (background) */
-    .modal {
-      display: none; /* Hidden by default */
-      position: fixed; /* Stay in place */
-      z-index: 1; /* Sit on top */
-      padding-top: 100px; /* Location of the box */
-      left: 0;
-      top: 0;
-      width: 100%; /* Full width */
-      height: 100%; /* Full height */
-      overflow: auto; /* Enable scroll if needed */
-      background-color: rgb(0,0,0); /* Fallback color */
-      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-    }
-    
-    /* Modal Content */
-    .modal-content {
-      background-color: #fefefe;
-      margin: auto;
-      padding: 20px;
-      border: 1px solid #888;
-      width: 80%;
-    }
-    
-    /* The Close Button */
-    .close {
-      color: #aaaaaa;
-      float: right;
-      font-size: 28px;
-      font-weight: bold;
-    }
-    
-    .close:hover,
-    .close:focus {
-      color: #000;
-      text-decoration: none;
-      cursor: pointer;
-    }
-    </style>
\ No newline at end of file
+<Layout title="">
+  <Modal client:visible/>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/premium.astro b/src/pages/premium.astro
new file mode 100644
index 0000000..fae2882
--- /dev/null
+++ b/src/pages/premium.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Menu from "../components/Menu.astro";
+import Premium from "../components/Premium.vue";
+import Footer from "../components/Footer.vue";
+---
+<Layout title="">
+    <Menu/>
+    <Premium client:visible/>
+    <Footer client:visible/>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/school-license.astro b/src/pages/school-license.astro
new file mode 100644
index 0000000..24ea40f
--- /dev/null
+++ b/src/pages/school-license.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Menu from "../components/Menu.astro";
+import SchoolLicense from "../components/SchoolLicense.vue";
+import Footer from "../components/Footer.vue";
+---
+<Layout title="">
+    <Menu/>
+    <SchoolLicense client:visible/>
+    <Footer client:visible/>
+</Layout>
\ No newline at end of file