From 7d4b68b55b3c75696c76738bc8652237b465f2ae Mon Sep 17 00:00:00 2001
From: Suvodip Ghosh <suvo@ns9b.siliconpin.com>
Date: Fri, 17 Feb 2023 13:47:24 +0530
Subject: [PATCH] update

---
 src/components/Blog.vue           |   9 +-
 src/components/BlogFilter.vue     |  19 +++
 src/components/BlogHeroSearch.vue |  40 ++++++
 src/components/Menu.astro         | 119 +++++++++--------
 src/components/Menu2.astro        | 200 ++++++++++++++++++++++++++++
 src/components/WhatsNew.vue       | 211 ++++++++++++++++++++++++++++++
 src/pages/blog/index.astro        |   4 +
 src/pages/educators.astro         |   2 +
 src/pages/sample-pae.astro        |  11 ++
 src/pages/whats-new.astro         |  12 ++
 10 files changed, 572 insertions(+), 55 deletions(-)
 create mode 100644 src/components/BlogFilter.vue
 create mode 100644 src/components/BlogHeroSearch.vue
 create mode 100644 src/components/Menu2.astro
 create mode 100644 src/components/WhatsNew.vue
 create mode 100644 src/pages/sample-pae.astro
 create mode 100644 src/pages/whats-new.astro

diff --git a/src/components/Blog.vue b/src/components/Blog.vue
index 7b869b5..a042874 100644
--- a/src/components/Blog.vue
+++ b/src/components/Blog.vue
@@ -1,6 +1,6 @@
 <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="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">
                   
@@ -30,9 +30,10 @@
                   
               </div>
           </div>
-      </div>
+      </div> -->
       <section class="container mx-auto">
-      <div class="flex justify-center pt-2 pb-2 m-5 overflow-x-auto">
+        <!-- <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>
@@ -47,6 +48,8 @@
           <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>
+        </section> -->
+      
       <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">
diff --git a/src/components/BlogFilter.vue b/src/components/BlogFilter.vue
new file mode 100644
index 0000000..e96f205
--- /dev/null
+++ b/src/components/BlogFilter.vue
@@ -0,0 +1,19 @@
+<template>
+    <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>
+        </section>
+</template>
\ No newline at end of file
diff --git a/src/components/BlogHeroSearch.vue b/src/components/BlogHeroSearch.vue
new file mode 100644
index 0000000..cbfe263
--- /dev/null
+++ b/src/components/BlogHeroSearch.vue
@@ -0,0 +1,40 @@
+<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>
+    </div>
+</template>
+<style>
+    .text-color-1 {
+          color: #7C4C23;
+      }
+</style>
\ No newline at end of file
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
index b7e6798..ed37730 100644
--- a/src/components/Menu.astro
+++ b/src/components/Menu.astro
@@ -1,48 +1,52 @@
-<main class="container-fluid navbar">
+<main class="container-fluid  bg-base-100 shadow-md">
     <!-- Desktop Menu -->
-<div class="container mx-auto flex justify-center">
-    <div class="hidden md:block  py-4">
-        <div class="navbar">
-            <a href="#home">Educators</a>
-            <a href="#news">Administrators</a>
+<div class="container mx-auto xl:px-24 hidden md:flex place-content-between w-full">
+    <div class="flex place-items-center w-fit"> 
+        <a href="/"><img class="w-36 h-12 lg:w-fit lg:h-fit hover:bg-none" src="/img/tb-logo.png" alt="Teeny Beans Logo"/></a>
+    </div>
+    <div class="flex flex-col"></div>
+    <div class="flex place-items-center py-4">
+        <div class="navbar w-full">
+            <a href="/educators">Educators</a>
+            <a href="/administrators">Administrators</a>
             <div class="dropdownDesktop">
-                <button class="dropbtnDesktop">Recources 
+                <button class="dropbtnDesktop">Recources ▼
                 <i class="fa fa-caret-downDesktop"></i>
                 </button>
                 <div class="dropdown-contentDesktop">
-                    <a href="#">Worksheets</a>
-                    <a href="#">Videos</a>
-                    <a href="#">Audio Books</a>
-                    <a href="#">Lesson Plan</a>
+                    <a class="" href="/worksheets">Worksheets</a>
+                    <a href="/videos">Videos</a>
+                    <a href="/audio-books">Audio Books</a>
+                    <a href="/lesson-plan/dailyplan">Lesson Plan</a>
                 </div>
             </div> 
-            <a href="occassion">Occassion</a>
-            <a href="themes">Themes</a>
-            <a href="blog">Blog</a>
+            <a href="/occassion">Occassion</a>
+            <a href="/themes">Themes</a>
+            <a href="/blog">Blog</a>
         </div>
     </div>
+    
 </div>
 
 <!-- Mobile Menu -->
 <div class="mobileTopMenu block md:hidden">
     <div class="topnavMobile">
-        <a href="#home" class="active">Logo</a>
-        <div id="mobileMenu" class="hidden">
-            <a href="#news">Educators</a>
-            <a href="#contact">Administrators</a>
+        <a href="/" class=""><img src="/img/tb-logo.png" alt="Teeny Beans Logo"></a>
+        <div id="mobileMenu" class="hidden active">
+            <a class="hover:bg-gray-200" href="/educators">Educators</a>
+            <a class="hover:bg-gray-200" href="/administrators">Administrators</a>
         <div class="dropdown">
-            <button class="dropbtn">Dropdown &#11183</button>
+            <button class="dropbtn">Recources ▼</button>
             <div class="dropdown-content">
-                <a href="#">Link 1</a>
-                <a href="#">Link 2Link 2Link 2</a>
-                <a href="#">Link 3</a>
+                <a href="/worksheets" style="color: white;">Worksheets</a>
+                <a href="/videos" style="color: white;">Videos</a>
+                <a href="/audio-books" style="color: white;">Audio Books</a>
+                <a href="/lesson-plan/dailyplan" style="color: white;">Lesson Plan</a>
             </div>
             </div> 
-            <a href="#about">About</a>
-            <a href="#about">About</a>
-            <a href="#about">About</a>
-            <a href="#about">About</a>
-
+            <a class="hover:bg-gray-200" href="/occassion">Occassion</a>
+            <a class="hover:bg-gray-200" href="/themes">Themes</a>
+            <a class="hover:bg-gray-200" href="/blog">Blog</a>
         </div>
         <a  class="icon" onclick="openMobileMenu()">
         &#9776;
@@ -63,7 +67,7 @@ element.classList.toggle("hidden");
 <style>
 .navbar {
 overflow: hidden;
-background-color: rgb(150, 39, 39);
+/* background-color: rgb(150, 39, 39); */
 /* position: absolute;
 width: 100%;
 left: 0;
@@ -71,12 +75,14 @@ top: 0; */
 }
 
 .navbar a {
-float: left;
-font-size: 16px;
-color: white;
-text-align: center;
-padding: 14px 16px;
-text-decoration: none;
+    float: left;
+    font-size: 16px;
+    color: #7c4c23;
+    font-weight: bold;
+    text-align: center;
+    padding: 14px 12px;
+    font-family: quicksand;
+    text-decoration: none;
 }
 
 .dropdownDesktop {
@@ -89,29 +95,32 @@ overflow: hidden;
 font-size: 16px;  
 border: none;
 outline: none;
-color: white;
-padding: 14px 16px;
+color: #7c2d23;
+font-weight: bold;
+padding: 14px 10px;
 background-color: inherit;
 font-family: inherit;
 margin: 0;
 }
 
 .navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
-background-color: red;
+background-color: #f1f5f9;
+border-radius: 8px;
 }
 
 .dropdown-contentDesktop {
 display: none;
 position: absolute;
-background-color: #f9f9f9;
-min-width: 160px;
+/* background-color: #f9f9f9; */
+/* min-width: 160px; */
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
+background-color: #1d4ed8;
 }
 
 .dropdown-contentDesktop a {
 float: none;
-color: black;
+color: rgb(255, 255, 255);
 padding: 12px 16px;
 text-decoration: none;
 display: block;
@@ -119,7 +128,7 @@ text-align: left;
 }
 
 .dropdown-contentDesktop a:hover {
-background-color: #ddd;
+background-color: #1e40af;
 }
 
 .dropdownDesktop:hover .dropdown-contentDesktop {
@@ -137,10 +146,12 @@ width:100%;
 } */
 .dropdown:hover .dropdown-content {
 display: block;
-background-color: #ddd;
+background-color: #1d4ed8;
+color: white;
 }
 .dropdown-content a:hover {
-background-color: #ddd;
+background-color: #1e40af;
+color: white;
 }
 .dropdown-content {
 display: none;
@@ -160,35 +171,39 @@ text-align: left;
 
 
 .topnavMobile {
-overflow: hidden;
-background-color: #333;
+overflow: visible;
+background-color: rgb(255, 255, 255);
 position: relative;
 }
 
 
 .topnavMobile a, .topnavMobile >div > div {
-color: white;
-padding: 14px 16px;
+color: #7c4c23;
+font-weight: bold;
+padding: 10px 16px;
 text-decoration: none;
-font-size: 17px;
+font-size: 16px;
 display: block;
 }
 
 .topnavMobile a.icon {
-background: black;
+color: white;
+background: #1d4ed8;
 display: block;
 position: absolute;
 right: 0;
 top: 0;
+cursor: pointer;
 }
 
 .topnavMobile a:hover {
-background-color: #ddd;
-color: black;
+/* background-color: #1e40af; */
+/* color: hsl(0, 0%, 100%); */
+background-color: ;
 }
 
 .active {
-background-color: #aa6204;
+/* background-color: #1e40af; */
 color: white;
 }
 
diff --git a/src/components/Menu2.astro b/src/components/Menu2.astro
new file mode 100644
index 0000000..e2bac6e
--- /dev/null
+++ b/src/components/Menu2.astro
@@ -0,0 +1,200 @@
+<main class="container-fluid navbar">
+    <!-- Desktop Menu -->
+<div class="container mx-auto flex justify-center">
+    <div class="hidden md:block  py-4">
+        <div class="navbar">
+            <a href="#home">Educators</a>
+            <a href="#news">Administrators</a>
+            <div class="dropdownDesktop">
+                <button class="dropbtnDesktop">Recources 
+                <i class="fa fa-caret-downDesktop"></i>
+                </button>
+                <div class="dropdown-contentDesktop">
+                    <a href="#">Worksheets</a>
+                    <a href="#">Videos</a>
+                    <a href="#">Audio Books</a>
+                    <a href="#">Lesson Plan</a>
+                </div>
+            </div> 
+            <a href="occassion">Occassion</a>
+            <a href="themes">Themes</a>
+            <a href="blog">Blog</a>
+        </div>
+    </div>
+</div>
+
+<!-- Mobile Menu -->
+<div class="mobileTopMenu block md:hidden">
+    <div class="topnavMobile">
+        <a href="#home" class="active">Logo</a>
+        <div id="mobileMenu" class="hidden flex flex-col ">
+            <a href="#news">Educators</a>
+            <a href="#contact">Administrators</a>
+            <div class="dropdown ">
+                <h2 class="dropbtn text-center" >Dropdown &#11183</h2>
+                <div class="dropdown-content">
+                    <a href="#">Link 1</a>
+                    <a href="#">Link 2Link 2Link 2</a>
+                    <a href="#">Link 3</a>
+                </div>
+            </div> 
+            <a href="#about">About</a>
+            <a href="#about">About</a>
+            <a href="#about">About</a>
+            <a href="#about">About</a>
+
+        </div>
+        <a  class="icon" onclick="openMobileMenu()">
+        &#9776;
+        </a>
+    </div>
+</div>
+</main>
+
+
+
+<script is:inline>
+function openMobileMenu() {
+var element = document.getElementById("mobileMenu");
+element.classList.toggle("hidden");
+}
+
+</script>
+
+<style>
+.dropbtn{
+    margin: 0 auto;
+}
+.navbar {
+overflow: hidden;
+background-color: rgb(150, 39, 39);
+/* position: absolute;
+width: 100%;
+left: 0;
+top: 0; */
+}
+
+.navbar a {
+float: left;
+font-size: 16px;
+color: white;
+text-align: center;
+padding: 14px 16px;
+text-decoration: none;
+}
+
+.dropdownDesktop {
+float: left;
+overflow: hidden;
+
+}
+
+.dropdownDesktop .dropbtnDesktop {
+font-size: 16px;  
+border: none;
+outline: none;
+color: white;
+padding: 14px 16px;
+background-color: inherit;
+font-family: inherit;
+margin: 0;
+}
+
+.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
+background-color: red;
+}
+
+.dropdown-contentDesktop {
+display: none;
+position: absolute;
+background-color: #f9f9f9;
+min-width: 160px;
+box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+z-index: 1;
+}
+
+.dropdown-contentDesktop a {
+float: none;
+color: black;
+padding: 12px 16px;
+text-decoration: none;
+display: block;
+text-align: left;
+}
+
+.dropdown-contentDesktop a:hover {
+background-color: #ddd;
+}
+
+.dropdownDesktop:hover .dropdown-contentDesktop {
+display: block;
+}
+
+
+
+
+/* .mobileTopMenu{
+position: absolute;
+top:0;
+left:0;
+width:100%;
+} */
+.dropdown:hover .dropdown-content {
+display: block;
+background-color: #ddd;
+}
+.dropdown-content a:hover {
+background-color: #ddd;
+}
+.dropdown-content {
+display: none;
+position: absolute;
+z-index: 1;
+}
+
+.dropdown-content a {
+float: none;
+text-decoration: none;
+display: block;
+text-align: left;
+}
+
+
+
+
+
+.topnavMobile {
+overflow: hidden;
+background-color: #333;
+position: relative;
+}
+
+
+.topnavMobile a, .topnavMobile >div > div {
+color: white;
+padding: 14px 16px;
+text-decoration: none;
+font-size: 17px;
+display: block;
+}
+
+.topnavMobile a.icon {
+background: black;
+display: block;
+position: absolute;
+right: 0;
+top: 0;
+}
+
+.topnavMobile a:hover {
+background-color: #ddd;
+color: black;
+}
+
+.active {
+background-color: #aa6204;
+color: white;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/WhatsNew.vue b/src/components/WhatsNew.vue
new file mode 100644
index 0000000..e11ebf2
--- /dev/null
+++ b/src/components/WhatsNew.vue
@@ -0,0 +1,211 @@
+<template>
+    <div>
+        <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
+            <div class="flex flex-col xl:flex-row container mx-auto px-4 xl:px-24">
+            <div class="flex flex-col px-6 justify-center w-fit">
+                <h1 class="text-color-1 hero-text font-bold">What’s New In Preschool Education ?</h1>
+                <p class="font-20px text-justify">What’s more exciting and effective than young children’s introduction to technology and its wonders in the foundation laying stage of their lives? The escalating technological practices demand everyone to be advanced, even toddlers because that’s how their interests and skills grow! Instill new skills with the ‘What’s New’ feature by Teeny Beans Preschool Curriculum and bring in the newest teaching trend in preschool education to your little ones.</p>
+            </div>
+            <div class="flex w-full justify-center place-items-center">
+                <img class="w-full  rounded-3xl" src="/img/whats_new1.png" alt="">
+            </div> 
+            </div>
+        </section>
+        
+        <!-- <section class="container-fluid">
+            <div class="bg-gradient-to-t from-blue-200 px-4">
+                <h1 class="text-center py-24 md:pt-24 text-color-1 hero-text font-bold">What’s New In Preschool Education ?</h1>
+            </div>
+            <div class="container-fluid shadow-xl">
+                <p class="container mx-auto font-20px  text-justify p-4">What’s more exciting and effective than young children’s introduction to technology and its wonders in the foundation laying stage of their lives? 
+                    The escalating technological practices demand everyone to be advanced, even toddlers because that’s how their interests and skills grow! Instill new skills with the ‘What’s New’ feature by Teeny Beans Preschool Curriculum and bring in the newest teaching trend in preschool education to your little ones. </p>
+            </div>
+        </section> -->
+        <!-- <section class="container mx-auto px-4">
+            <div class="grid grid-rows-2">
+                <div class="flex flex-col lg:flex-row place-items-center gap-6 ">
+                    <div @click="showDescription('tabDetails')" class="flex relative"><img draggable="false" src="/img/robot.png" alt="">
+                        <h1 class="absolute inset-20 left-40 text-4xl text-white">Robotics</h1>
+                    </div>
+                    
+                    <div class="flex relative"><img draggable="false" src="/img/group.png" alt="">
+                        <h1 class="absolute inset-20 left-40 text-4xl text-white">Coding</h1>
+                    </div>            
+                </div>
+                
+            </div>
+        </section> -->
+        <section class="container mx-auto mt-16 px-4">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div class="grid place-items-center"><img class="shadow-xl" src="/img/robot.png" alt="robot"></div>
+                <div class="grid h-fit">
+                    <h2 class="hero-text text-color-1 font-semibold">Robotics</h2>
+                    <p class="font-20px text-color-2 py-3 text-justify">Boost children’s interest and skills in robotics at the earliest stage of life and introduce them to a world of technology and opportunities. As a sub head of STEM, robotics induces creativity into children and makes their minds active.</p>
+                    <p class="font-20px text-justify pl-6">
+                        &#8226; With our platform for Robotics, add the subject to your curriculum and inject out of the box thoughts in your kids. <br> 
+                        &#8226; Begin the first step to the enlightenment journey in early childhood education. <br>
+                        &#8226; The right way to instill skills is through the right practise of Robotics, with right revision and resources that we supply! <br>
+                        &#8226; Teach while disguising it as a play. <br>
+                        &#8226; Preparation of a better and technologically advanced future commences with Robotics and Teeny Beans Preschool Curriculum. </p>
+                        <p class="font-20px py-4">Implant the seeds of innovation and ideas with the introduction of ‘Robotics’ to your preschool curriculum. </p>
+                </div>
+            </div>
+        </section>
+        <!-- <section class="conatiner-fluid shadow">1</section> -->
+        <hr>
+        <section class="container mx-auto mt-16 px-4">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div class="grid place-items-center"><img class="shadow-xl" src="/img/group.png" alt="group"></div>
+                <div class="grid h-fit">
+                    <h2 class="hero-text text-color-1 font-semibold">Coding</h2>
+                    <p class="font-20px text-color-2 py-3 text-justify">A digital world with digitally advanced youngsters sounds like a great plan? Making toddlers acquainted with coding to make them think as a computer programmer is a kick start to their future. </p>
+                    <p class="font-20px text-justify pl-6">
+                        &#8226; Disguised Fun-activities and games that make children learn without their notice.<br> 
+                        &#8226; Generate logical thinking with problem solving skills at the accurate age for laying a better educational foundation. <br>
+                        &#8226; Children develop resilience and get competitive with Coding. <br>
+                        &#8226; With Teeny Beans Preschool Curriculum, access easy coding resources such as fun games, activities, worksheets, quizzes and much more to make them learn and grow simultaneously. <br>
+                    </p>
+                    <p class="font-20px py-4">Educate children with the newest preschool education trends and give a boost to their journey of a better version of themselves and open a door to wider opportunities of growth for them.  </p>
+                </div>
+            </div>
+        </section>
+        <hr>
+        <section class="my-16"></section>
+
+        <!-- <section>
+            <div v-if="tab">
+                <div id="robottext" class="flex flex-col">
+                    <h1 class="text-color-3 text-4xl font-semibold pt-12 pb-2">Why should you  include Robotics in your Preschool Curriculum?</h1>
+                    <p class="text-2xl text-justify text-color-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas magna non senectus orci ultrices. Neque, mollis mauris est blandit mi at tincidunt vehicula. Nunc, in egestas senectus pharetra massa dignissim massa. Eu mi a risus ullamcorper sed consectetur fermentum praesent egestas. Sit aliquet tellus gravida lorem scelerisque. Volutpat sit arcu orci, lorem vel. Cras pellentesque odio libero, sed pellentesque facilisis ut rhoncus. Pellentesque purus quam erat vulputate. Sit pulvinar tempus tortor ultrices. In nulla cras.</p>
+                </div>
+            </div>
+
+            <div v-if="robot">
+                <div id="robottext" class="flex flex-col">
+                    <h1 class="text-color-3 text-4xl font-semibold pt-12 pb-2">Why should you  include Robotics in your Preschool Curriculum?</h1>
+                    <p class="text-2xl text-justify text-color-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas magna non senectus orci ultrices. Neque, mollis mauris est blandit mi at tincidunt vehicula. Nunc, in egestas senectus pharetra massa dignissim massa. Eu mi a risus ullamcorper sed consectetur fermentum praesent egestas. Sit aliquet tellus gravida lorem scelerisque. Volutpat sit arcu orci, lorem vel. Cras pellentesque odio libero, sed pellentesque facilisis ut rhoncus. Pellentesque purus quam erat vulputate. Sit pulvinar tempus tortor ultrices. In nulla cras.</p>
+                </div>
+            </div>
+        </section> -->
+        <section class="container mx-auto px-4">
+                <div class="grid csbg grid-cols-1 md:grid-cols-2 mt-32 mb-16 ">
+                    <div class="grid place-items-center">
+                        <div class="grid text-color-1 text-4xl pt-10 font-semibold">Case Study</div>
+                        <div class="w-full max-w-lg pb-16">
+                            <h3 class="text-center text-xl p-4">You can download the case study here</h3>
+                            <div v-if="wnQry">
+                                <div  class="flex flex-wrap mb-6">
+                                    <div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
+                                        <input v-model="wnname" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" type="text" placeholder="Your Name">
+                                    </div>
+                                </div>
+                                <div class="flex flex-wrap mb-6">
+                                    <div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
+                                        <input v-model="wnemail" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" type="text" placeholder="Your E-mail Id">
+                                    </div>
+                                </div>
+                                <div class="flex justify-center -mt-4">
+                                    <button @click="saveWhatsnewQry" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg mb-8 h-9" >Download Now</button>
+                                </div>
+                            </div>
+                            <div v-else="saveWhatsnewQry"> <h1 class="text-center text-xl">Thank You!</h1></div>
+                        </div>
+                    </div>
+                    <div class="grid place-items-center">
+                        <div class="grid bg-gray-200 ml-0 w-72 -rotate-12 rounded-tl-3xl rounded-br-3xl shadow-2xl">
+                            <img class=" rotate-6 rounded-tl-3xl rounded-br-3xl" src="/img/case_study.png" alt="Case Study Image"></div>
+                    </div>
+                </div>
+        </section>
+    </div>
+</template>
+
+<script>
+    export default {
+  data() {
+    return {
+      isLoading: true,
+      wnQry:true,
+      wnname: null,
+      wnemail: null,
+      robot:true,
+      tab:false
+
+    //   contact_form:{}
+    }
+  },
+  mounted: function () {
+    // this.getItemByCategory()
+    // console.log(this.smProducts)
+    // console.log(this.$route.query.cat)
+    // console.log(this.fruits)
+    
+  },
+ 
+  methods: {
+    saveWhatsnewQry() {
+        let formData = new FormData();
+        formData.append('Name', this.wnname);
+        formData.append('Phone', this.wnemail);
+        formData.append('formName', 'tb-whatsnew-case-study');
+        fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', 
+            {
+                method: 'POST',
+                // headers: { 
+                // 'Content-Type': 'multipart/form-data',
+                // // 'Authorization': 'Bearer my-token',
+                // // 'My-Custom-Header': 'foobar'
+                // },
+                body: formData,
+            }
+        )
+        .then(response => response.json())
+        .then(data => {
+            // console.log(this.scsOccetion)
+            // console.log(data)
+        });
+        // formData=""
+        this.wnQry=false
+    },
+    showDescription(div){
+        this.tab=false
+        this.robot=false
+        this.div
+    }
+    }
+  }
+</script>
+
+<style scoped>
+.text-color-1 {
+    color: #7c4c23;
+}
+.bg3 {
+  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
+}
+.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: 25px;
+    
+  }
+}
+.text-color-3 {
+    color: #063F78;
+}
+.csbg {
+    background: rgba(18, 75, 189, 0.1);
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index a892470..3e6b0c8 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,12 +1,16 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import Menu from "../../components/Menu.astro";
+import BlogHeroSearch from "../../components/BlogHeroSearch.vue";
+import BlogFilter from "../../components/BlogFilter.vue";
 import Blog from "../../components/Blog.vue";
 import Footer from "../../components/Footer.vue";
 ---
 
 <Layout  title="Welcome to Astro.">
     <Menu/>
+    <BlogHeroSearch client:visible/>
+    <BlogFilter client:visible/>
     <Blog client:visible/>
     <Footer/>
 
diff --git a/src/pages/educators.astro b/src/pages/educators.astro
index 65ae451..34bcf94 100644
--- a/src/pages/educators.astro
+++ b/src/pages/educators.astro
@@ -1,10 +1,12 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Header from "../components/Header.vue";
+import Menu from "../components/Menu.astro";
 import Educators from "../components/Educators.vue";
 import Footer from "../components/Footer.vue";
 ---
 <Layout title="Welcome">
+    <Menu clint:visible/>
     <Educators client:visible/>
     <Footer client:visible/>
 </Layout>
\ No newline at end of file
diff --git a/src/pages/sample-pae.astro b/src/pages/sample-pae.astro
new file mode 100644
index 0000000..48ab5e8
--- /dev/null
+++ b/src/pages/sample-pae.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Menu from "../components/Menu2.astro";
+import Footer from "../components/Footer.vue";
+import Homepage from "../components/Homepage.vue";
+---
+<Layout title="Welcome to Teenybeans">
+    <Menu/>
+    <Homepage client:visible/>
+<Footer/>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/whats-new.astro b/src/pages/whats-new.astro
new file mode 100644
index 0000000..d512f46
--- /dev/null
+++ b/src/pages/whats-new.astro
@@ -0,0 +1,12 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Menu from "../components/Menu.astro";
+import Header from "../components/Header.vue";
+import WhatsNew from "../components/WhatsNew.vue";
+import Footer from "../components/Footer.vue";
+---
+<Layout title="">
+    <Menu clint:visible/>
+    <WhatsNew client:visible/>
+
+</Layout>
\ No newline at end of file