update

src/components/SliderLessonplan.vue

@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <section class="container mx-auto my-16 px-4 xl:px-24">
+        <div class="flex flex-col lg:flex-row place-items-center place-content-between gap-y-10">
+        <div class="grid h-fit">
+            <h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
+                <h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today's popular lesson <br> plans specially curated for your classroom.</h1>
+                <div><a target="_blank" href="/lesson-plan/dailyplan" class="text-lg bg-blue-700 px-4 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div>
+        </div>
+        <div class="grid place-items-center">
+            <swiper class="slider-width cursor-pointer" draggable="false"
+                :modules="modules"
+                :slides-per-view="1"
+                :space-between="50"
+                navigation
+                pagination
+                :scrollbar="{ draggable: true }"
+                :autoplay=" { delay: 2500, disableOnInteraction: false}"
+                @swiper="onSwiper"
+                @slideChange="onSlideChange">
+                <swiper-slide v-for="lesson in lessonplan" :key="lesson.id"> 
+                <img class="" lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
+                </swiper-slide>      
+            </swiper>
+        </div>
+        </div>
+    </section>
+    </div>
+</template>
+<style>
+ .text-color-1 {
+        color: #7C4C23;
+        font-family: 'Quicksand';
+    }
+.slider-width {
+  width: 350px;
+}
+@media screen and (min-width: 1500px) {
+      .hero-text {
+        font-size: 50px;
+        
+        
+      }
+    }
+    
+    @media screen and (max-width: 1499px) {
+      .hero-text {
+        font-size: 40px;
+        
+      }
+    }
+    @media screen and (max-width: 1199px) {
+      .hero-text {
+        font-size: 30px;
+        
+      }
+    }
+</style>
+<script is:inline>
+     // Import Swiper Vue.js components
+     import { Swiper, SwiperSlide } from 'swiper/vue';
+    import 'swiper/css/navigation';
+    import 'swiper/css/pagination';
+    import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
+  
+    // Import Swiper styles
+    import 'swiper/css';
+    // const swiper = new Swiper('.swiper', {
+    //       autoplay: {
+    //         delay: 5000,
+    //       },
+    //     });
+  
+    export default {
+      components: {
+        Swiper,
+        SwiperSlide,
+      },
+      setup() {
+        const onSwiper = (swiper) => {
+          // console.log(swiper);
+        };
+        const onSlideChange = () => {
+          // console.log('slide change');
+        };
+        
+        
+        return {
+          onSwiper,
+          onSlideChange,
+          modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
+
+        };
+      },
+   data() {
+     return {
+         page: null,
+         lessonplan:null,
+         isLoading: true,
+
+     }
+ },
+   mounted: function () {
+     fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan')
+         .then(response => response.json())
+         .then(data => {
+             this.lessonplan = data.data
+             // this.isLoading = false
+             // console.log(this.lessonplan)
+             // return this.page[0].id
+         })
+     },
+ };
+</script>

src/components/Worksheets-literacy.vue

@@ -4,8 +4,8 @@
         <section class="container-fluid">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Literacy</span></div>
             <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
-                <div class="flex">
-                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                <div class="flex" style="font-family: quicksand; font-weight:bold;">
+                    <h1 class="py-4 font-semibold ">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
                         <option value="2">Select Age</option>
                         <option value="2">2-3 Year</option>
@@ -13,7 +13,7 @@
                         <option value="4">4-5 Year</option>
                         <option value="5">5-6 Year</option> 
                     </select>
-                </div> 
+                </div>
                 <!-- <div class="flex ">
                     <h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
                     <select class="select max-w-xs">

src/components/Worksheets-mathematics.vue

@@ -4,8 +4,8 @@
         <section class="container-fluid">
             <div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Mathematics</span></div>
             <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
-                <div class="flex">
-                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                <div class="flex" style="font-family: quicksand; font-weight:bold;">
+                    <h1 class="py-4 font-semibold ">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
                         <option value="2">Select Age</option>
                         <option value="2">2-3 Year</option>

src/components/Worksheets-world.vue

@@ -4,8 +4,8 @@
         <section class="container-fluid">
             <div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Worksheet for <span class="text-color-1">Understanding the World</span></div>
             <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
-                <div class="flex">
-                    <h1 class="  font-semibold py-4">Age:&nbsp;</h1>
+                <div class="flex" style="font-family: quicksand; font-weight:bold;">
+                    <h1 class="py-4 font-semibold ">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
                         <option value="2">Select Age</option>
                         <option value="2">2-3 Year</option>

src/components/Worksheets.vue

@@ -37,8 +37,8 @@
             <!-- <p class="font-20px text-color-2 text-justify py-4 container mx-auto px-4">Enrich learning experience and provide essential knowledge and practice with the professionally created worksheet for preschoolers that are designed to enhance comfortableness of teachers and parents. </p> -->
             <!-- <p class="font-20px text-color-2 text-justify container mx-auto px-4">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children.  </p> -->
             <div class="flex flex-col  bg3 md:flex-row justify-center md:justify-end lg:px-64 px-4  shadow-xl lg:gap-4">
-                <div class="flex">
-                    <h1 class="pt-3 font-semibold ">Age:&nbsp;</h1>
+                <div class="flex" style="font-family: quicksand; font-weight:bold;">
+                    <h1 class="py-4 font-semibold ">Age:&nbsp;</h1>
                     <select class="select max-w-xs bg3" @change="switchSelect($event)">
                         <option value="2">Select Age</option>
                         <option value="2">2-3 Year</option>