s1

src/components/MainHeader.astro

@@ -16,6 +16,7 @@
         <!-- <li><a href="#">Services</a></li> -->
         <li><a href="/about">About</a></li>
         <li><a href="/overview">Overview</a></li>
+        <li><a href="/gallery">Gallery</a></li>
         <li><a href="/admission">Admission</a></li>
         <li><a href="/contact">Contact</a></li>
 

src/components/SliderHomepage.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="">
-            <swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
+            <swiper  class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
                 :modules="modules"
                 :slides-per-view="1"
                 :space-between="50"
@@ -11,6 +11,8 @@
                 :autoplay=" { delay: 2500, disableOnInteraction: false}"
                 @swiper="onSwiper"
                 @slideChange="onSlideChange">
+                
+                <swiper-slide v-for="(item, index) in img3DResInter" :key="index"> <img class="aspect-video"  :src="item.image_src" alt="" /></swiper-slide>
                 <swiper-slide> <img class=""  src="/img/school1.jpg" alt="" /></swiper-slide>
                 <swiper-slide> <img class=""  src="/img/school2.jpg" alt="" /></swiper-slide>
                 <swiper-slide> <img class=""  src="/img/school3.jpg" alt="" /></swiper-slide>
@@ -65,6 +67,7 @@
          page: null,
          lessonplan:null,
          isLoading: true,
+         img3DResInter: [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }]
   
      }
   },

src/pages/contact.astro

@@ -10,9 +10,9 @@ import Layout from "../layouts/Layout.astro";
 						<img class="lg:max-w-2xl" src="/img/rec_girl.png" alt="">
 					</div>
 					<div class="flex flex-col w-full">
-						<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Get in Touch with Holywisdom Preschool!</h1>
-						<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2>
-						<h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3>
+						<h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Get in Touch with Holywisdom Public School!</h1>
+						<h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Public School!</h2>
+						<h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Public School – your gateway to educational excellence!</h3>
 						<!-- <div class="flex flex-row place-content-between">
 							<a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
 						</div> -->
@@ -21,8 +21,8 @@ import Layout from "../layouts/Layout.astro";
 			</section>
             <section class="container mx-auto px-4 my-10">
                 <div class="">
-                    <h1 class="text-2xl">Reach Out to Holywisdom Preschool</h1>
-                    <p class="">Contacting Holywisdom Preschool is your first step toward a seamless connection with our dedicated team. Whether you have inquiries about our programs, enrollment details, or simply want to learn more about our unique approach to early childhood education, we're here to help. Your child's journey with us begins with a conversation. Reach out through the provided contact information, and let's embark on the path of educational discovery together. We look forward to hearing from you and welcoming your family into the Holywisdom community.</p>
+                    <h1 class="text-2xl">Reach Out to Holywisdom Public School</h1>
+                    <p class="">Contacting Holywisdom Public School is your first step toward a seamless connection with our dedicated team. Whether you have inquiries about our programs, enrollment details, or simply want to learn more about our unique approach to early childhood education, we're here to help. Your child's journey with us begins with a conversation. Reach out through the provided contact information, and let's embark on the path of educational discovery together. We look forward to hearing from you and welcoming your family into the Holywisdom community.</p>
                 </div>
             </section>
             <section class="container mx-auto px-4 my-16">

src/pages/curriculum.astro

@@ -237,7 +237,7 @@ let inSportsData = [
                         {outSportsData.map((data) => (
                             <div class="drop-shadow-2xl flex flex-col justify-center place-items-center items-center hover:bg-[#3084b530] p-2 rounded-lg duration-[1s] cursor-pointer">
                                 <img class="" src={data.image} alt="" />
-                                <h2 class="pt-3">{data.name}</h2>
+                                <h2 class="pt-3 text-center">{data.name}</h2>
                             </div>
                         ))}
                     </div>
@@ -246,7 +246,7 @@ let inSportsData = [
                         {inSportsData.map((data) => (
                             <div class="drop-shadow-2xl flex flex-col justify-center place-items-center items-center hover:bg-[#3084b530] p-2 rounded-lg duration-[1s] cursor-pointer">
                                 <img class="" src={data.image} alt="" />
-                                <h2 class="pt-3">{data.name}</h2>
+                                <h2 class="pt-3 ">{data.name}</h2>
                             </div>
                         ))}
                     </div>                    

src/pages/form.astro

@@ -0,0 +1,40 @@
+<div>
+    <input type="text" name="name" id="name" style="border: 1px solid #000"><br>
+    <input type="text" name="mobile" id="mobile" style="border: 1px solid #000"><br>
+    <input type="text" name="email" id="email" style="border: 1px solid #000"><br>
+    <textarea name="message" id="message" style="border: 1px solid #000"></textarea><br>
+    <button onclick="saveForm(event)" type="submit" style="border: 1px solid #000">Submit</button>
+</div>
+
+<script is:inline>
+    function saveForm(event){
+        event.preventDefault();
+        let userName = document.getElementById('name').value;
+        let userMobile = document.getElementById('mobile').value;
+        let userEmail = document.getElementById('email').value;
+        let userMessage = document.getElementById('message').value;
+
+        let userData = {
+            name : userName,
+            mobile: userMobile,
+            email: userEmail,
+            message: userMessage 
+        }
+
+
+        fetch(`https://game-du.teachertrainingkolkata.in/items/contact`, {
+            method: 'POST',
+            headers:{
+                'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+        .then(response => response.json())
+        .then(data => {
+            console.log(data)
+        })
+        .then(error => {
+            console.error(error)
+        })
+    }
+</script>

src/pages/gallery.astro

@@ -0,0 +1,185 @@
+---
+import Layout from "../layouts/Layout.astro";
+const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }];
+
+---
+
+<Layout title="">
+    <div>
+        <section class="container-fluid gradintBack">
+            <div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row  place-items-center">
+                <div class="w-full">
+                    <img class="lg:max-w-2xl aspect-video" src="/assets/school_image/hps-image8.jpg" alt="">
+                </div>
+                <div class="flex flex-col w-full">
+                    <h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Holy Wisdom Paublic School Gallery!</h1>
+                    <!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2> -->
+                    <!-- <h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3> -->
+                    <!-- <div class="flex flex-row place-content-between">
+                        <a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
+                    </div> -->
+                </div>
+            </div>
+        </section>
+        <section class="container mx-auto px-4 mt-8">
+            <div class="demo-gallery">
+                <ul id="lightgallery4">
+                    {img3DResInter.map((data) => (
+                        <li class="w-full md:w-[300px] aspect-video" data-responsive={`${data.image_src} 375, ${data.image_src} 480, ${data.image_src} 800`} data-src={data.image_src} data-sub-html=" " >
+                            <a href="#">
+                                <div class="w-full md:w-[400px] aspect-video">
+                                    <img class="img-responsive aspect-video" src={data.image_src} alt="Gallery item" />
+                                </div>
+                                <div class="demo-gallery-poster">
+                                    <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png" alt="Zoom icon" />
+                                </div>
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+              </div>
+              
+        </section>
+    </div>
+</Layout>
+<script is:inline src="/assets/lightgallery.min.js"></script>
+<link rel="stylesheet" href="/assets/lightgallery.min.css">
+
+<script is:inline>
+  lightGallery(document.getElementById('lightgallery4'))
+</script>
+<style>
+.gradintBack {
+    background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
+}
+.demo-gallery > ul {
+    margin-bottom: 0;
+    padding-left: 15px;
+    padding-right: 15px;
+    }
+
+    .demo-gallery > ul > li {
+    margin-bottom: 15px;
+    display: inline-block;
+    list-style: outside none none;
+    }
+
+    .demo-gallery > ul > li a {
+    border: 3px solid #FFF;
+    border-radius: 3px;
+    display: block;
+    overflow: hidden;
+    position: relative;
+    background-color: #fff;
+    }
+
+    .demo-gallery > ul > li a > img {
+    -webkit-transition: -webkit-transform 0.15s ease 0s;
+    -moz-transition: -moz-transform 0.15s ease 0s;
+    -o-transition: -o-transform 0.15s ease 0s;
+    transition: transform 0.15s ease 0s;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+    height: 100%;
+    width: 100%;
+    }
+
+    .demo-gallery > ul > li a:hover > img {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
+    opacity: 1;
+    }
+
+    .demo-gallery > ul > li a .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.1);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    -webkit-transition: background-color 0.15s ease 0s;
+    -o-transition: background-color 0.15s ease 0s;
+    transition: background-color 0.15s ease 0s;
+    }
+
+    .demo-gallery > ul > li a .demo-gallery-poster > img {
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    -webkit-transition: opacity 0.3s ease 0s;
+    -o-transition: opacity 0.3s ease 0s;
+    transition: opacity 0.3s ease 0s;
+    }
+
+    .demo-gallery > ul > li a:hover .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .demo-gallery .justified-gallery > a > img {
+    -webkit-transition: -webkit-transform 0.15s ease 0s;
+    -moz-transition: -moz-transform 0.15s ease 0s;
+    -o-transition: -o-transform 0.15s ease 0s;
+    transition: transform 0.15s ease 0s;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+    height: 100%;
+    width: 100%;
+    }
+
+    .demo-gallery .justified-gallery > a:hover > img {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
+    opacity: 1;
+    }
+
+    .demo-gallery .justified-gallery > a .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.1);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    -webkit-transition: background-color 0.15s ease 0s;
+    -o-transition: background-color 0.15s ease 0s;
+    transition: background-color 0.15s ease 0s;
+    }
+
+    .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    -webkit-transition: opacity 0.3s ease 0s;
+    -o-transition: opacity 0.3s ease 0s;
+    transition: opacity 0.3s ease 0s;
+
+
+    }
+
+    .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .demo-gallery .video .demo-gallery-poster img {
+    height: 48px;
+    margin-left: -24px;
+    margin-top: -24px;
+    opacity: 0.8;
+    width: 48px;
+    }
+
+    .demo-gallery.dark > ul > li a {
+    border: 3px solid #04070a;
+    }
+</style>

src/pages/login.astro

@@ -5,15 +5,37 @@
             <div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
                 <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
                 <form action="" class="p-6">
-                    <input v-model="name" id="name" name="name" type="text" placeholder="User ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-                    <input v-model="name" id="name" name="name" type="password" placeholder="Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-6" required/>
-                    <button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Login</button>
+                    <input id="email" name="email" type="text" placeholder="User ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
+                    <input id="password" name="password" type="password" placeholder="Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-6" required/>
+                    <button onclick="myFunction(event)" class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Login</button>
                 </form>
                 <p class="">Not Registerd? <a href="/sign-up" class="text-[#FFFFFF] font-bold">Register Now</a></p>
             </div>
         </section>
     </div>
 </main>
+<script is:inline>
+    function myFunction(event){
+        event.preventDefault();
+        let emailId = document.getElementById('email').value;
+        let password = document.getElementById('password').value;
+        let userData = {
+            email : emailId,
+            password : password
+        }
+        fetch(`https://game-du.teachertrainingkolkata.in/auth/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+        })
+    }
+</script>
 <style>
     .content {
         position: absolute;

src/pages/sign-up.astro

@@ -2,23 +2,64 @@
     <div class="content">
         <section class="container mx-auto max-w-lg bg-[url(/img/hps_logo.png)] rounded-2xl">
             <div class="flex flex-col w-full justify-center place-items-center border-[1px] border-[#0e0f0420] rounded-[20px] shadow-2xl py-10">
-                <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="">
-                <form action="" class="p-6 space-y-4">
-                    <input v-model="name" id="name" name="name" type="text" placeholder="Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-                    <input v-model="name" id="name" name="name" type="text" placeholder="Email ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-                    <input v-model="name" id="name" name="name" type="text" placeholder="Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-                    <input v-model="name" id="name" name="name" type="password" placeholder="New Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-                    <input v-model="name" id="name" name="name" type="password" placeholder="Confirm Passsord" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/>
-                    <button class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Register</button>
+                <img class="max-w-[150px] shadow-lg p-2 py-6 border-[1px] rounded-full" src="/img/hps_logo.png" alt="Logo">
+                <form action="" class="p-6 space-y-4" onsubmit="signUp(event)">
+                    <input id="name" name="name" type="text" placeholder="Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <input id="email" name="email" type="email" placeholder="Email ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <input id="mobile" name="mobile" type="text" placeholder="Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <input id="password" name="password" type="password" placeholder="New Password" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <input id="con_password" name="con_password" type="password" placeholder="Confirm Password" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
+                    <button type="submit" class="border-2 border-[#3084b5] text-white bg-[#3084b5] focus:outline-none rounded-lg w-full p-2 mt-4">Register</button>
                 </form>
-                <div class="flex flex-col place-content-between float-left">
-                    <p class="">Back to <a href="/login" class="text-[#3084b5] font-bold">Login</a></p>
-                    <p class="">Continue Without <a href="/" class="text-[#3084b5] font-bold">Login</a></p>
+                <div class="flex flex-col">
+                    <p>Back to <a href="/login" class="text-[#3084b5] font-bold">Login</a></p>
+                    <p><a href="/" class="text-[#3084b5] font-bold">Continue</a> Without Login</p>
                 </div>
             </div>
         </section>
     </div>
 </main>
+
+<script is:inline>
+    function signUp(event) {
+        event.preventDefault(); // Prevent form submission
+        let password = document.getElementById('password').value;
+        let conPassword = document.getElementById('con_password').value;
+
+        if (password !== conPassword) {
+            alert('Passwords do not match. Please try again.');
+            return;
+        }
+
+        let userName = document.getElementById('name').value;
+        let userEmail = document.getElementById('email').value;
+        let userMobile = document.getElementById('mobile').value;
+
+        let userSignData = {
+            name: userName,
+            email: userEmail,
+            mobile: userMobile,
+            password: password
+        };
+        console.log(userSignData)
+
+        fetch('https://game-du.teachertrainingkolkata.in/users', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userSignData)
+        })
+        .then(res => res.json())
+        .then(data => {
+            console.log(data)
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+    }
+</script>
+
 <style>
     .content {
         position: absolute;
@@ -26,4 +67,4 @@
         left: 50%;
         transform: translate(-50%, -50%);
     }
-</style>
+</style>

src/pages/test.astro

@@ -0,0 +1,20 @@
+<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
+    <div class="h-[200px] text-center bg-[#f59e0b]">
+        Grid - 1
+    </div>
+    <div class="h-[200px] text-center bg-[#84cc16]">
+        Grid - 2
+    </div>
+    <div class="h-[200px] text-center bg-[#84cc16]">
+        Grid - 3
+    </div>
+    <div class="h-[200px] text-center bg-[#4f46e5]">
+        Grid - 4
+    </div>
+    <div class="h-[200px] text-center bg-[#db2777]">
+        Grid - 5
+    </div>
+    <div class="h-[200px] text-center bg-[#b91c1c]">
+        Grid - 6
+    </div>
+</div>