From 580483a2bd8e353c190ada82059a2b11f2c5ae1d Mon Sep 17 00:00:00 2001
From: Suvodip Ghosh <suvo@ns9b.siliconpin.com>
Date: Tue, 28 Mar 2023 20:59:22 +0530
Subject: [PATCH] increase performance

---
 src/components/CourseAll.vue  | 280 ++++++++++++++++++++++++++++++++++
 src/pages/online-course.astro | 245 +----------------------------
 2 files changed, 284 insertions(+), 241 deletions(-)
 create mode 100644 src/components/CourseAll.vue

diff --git a/src/components/CourseAll.vue b/src/components/CourseAll.vue
new file mode 100644
index 0000000..3cf7be7
--- /dev/null
+++ b/src/components/CourseAll.vue
@@ -0,0 +1,280 @@
+    <template>
+        <section class="container mx-auto py-16">
+            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center gap-16 ">
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img7.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">CCLE (Computer Chip Level Engineering)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img8.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCAMS (Diploma In Computer Application & Multimedia Specialist)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img9.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCCTT (Diploma In Computer Teacher Training)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/10.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCNE (Diploma in computer Networking Engineering)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/11.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DWDDWD (Diploma in Web Designing and Web Development)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/12.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DM (Diploma in Multimedia)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/13.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DIA (Diploma in Industrial Accounts)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/14.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DSO Tailor (Diploma In Sewing Operating)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/15.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DITA Tailor (Diploma In Information Technology & Application)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/16.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">KIDS Tailor (Smart Computer Course)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/17.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">MRME (Mobile Repairing And templatetenance Engineering)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/18.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">PGDCA (Post Graduate Diploma In Computer Application)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/19.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">SE (Spoken English)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/20.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCAA (Diploma In Computer Accounting)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/21.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DIPWD (Diploma in Internet Programming& Web Designing)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/22.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">CICA (Certificate In Computer Application)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">05 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/23.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">CDEO (Certificate In Data Entry Operations)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">05 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/24.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">CCCA (Certificate course In computer Accounting)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/25.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DDTP (Diploma In Desktop Publishing)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/26.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCHE (Diploma In Computer Hardware Engineering)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/27.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DAC (Diploma in Auto Cad)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/28.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DCMS (Diploma In Computer Multimedia Specialist)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/29.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DVEE (Diploma In Video Editing Expert)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
+                    <div class="">
+                        <img class="rounded-t-2xl img-size" src="/img/30.jpg" alt="">
+                        <h1 class="h1-text font-bold p-4">DSWD (Diploma In Smart Web Designing)</h1>
+                        <div class="flex place-content-between p-4 button-place hr">
+                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
+                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+<style>
+    .img-size {
+        width: 300px;
+        height: 200px;
+    }
+    
+    .h1-text {
+        font-size: 24px;
+        color: black;
+    }
+    .h1-text:hover {
+        color: rgb(211, 162, 0);
+    }
+    .area {
+        width: 300px;
+        height: 450px;
+        /* background-color: rgb(215, 247, 244); */
+        border-radius: 16px;
+    }
+    .hr {
+        border-top: 2px solid red;
+    }
+    .img-size {
+        width: 300px;
+        height: 170px;
+    }
+    .button-place {
+        position: sticky;
+  width: 100%;
+  bottom: 0px;
+  position: fixed;
+    }
+</style>
+
diff --git a/src/pages/online-course.astro b/src/pages/online-course.astro
index 8eb0ea8..e6860fe 100644
--- a/src/pages/online-course.astro
+++ b/src/pages/online-course.astro
@@ -3,10 +3,12 @@ import Layout from "../layouts/Layout.astro";
 import Menu from "../components/Menu.astro";
 import Mainfooter from "../components/Mainfooter.astro";
 import Header from "../components/Header.astro";
+import CourseAll from "../components/CourseAll.vue";
 ---
 <Layout title="Welcome to RGYCI - Our Online Courses">
     <Header/>
     <Menu/>
+    
     <main>
         <section class="container mx-auto py-16">
             <p class="text-center text-4xl pb-8 2xl:pb-10 decoration-4 underline decoration-red-500 font-bold">Our Courses</p>
@@ -71,247 +73,8 @@ import Header from "../components/Header.astro";
                         </div>
                     </div>
                 </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img7.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">CCLE (Computer Chip Level Engineering)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img8.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DCAMS (Diploma In Computer Application & Multimedia Specialist)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/rgyci-img9.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DCCTT (Diploma In Computer Teacher Training)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/10.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DCNE (Diploma in computer Networking Engineering)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/11.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DWDDWD (Diploma in Web Designing and Web Development)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/12.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DM (Diploma in Multimedia)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/13.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DIA (Diploma in Industrial Accounts)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/14.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DSO Tailor (Diploma In Sewing Operating)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/15.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DITA Tailor (Diploma In Information Technology & Application)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/16.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">KIDS Tailor (Smart Computer Course)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/17.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">MRME (Mobile Repairing And Maintenance Engineering)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/18.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">PGDCA (Post Graduate Diploma In Computer Application)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/19.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">SE (Spoken English)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">12 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/20.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DCAA (Diploma In Computer Accounting)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/21.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DIPWD (Diploma in Internet Programming& Web Designing)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/22.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">CICA (Certificate In Computer Application)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">05 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/23.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">CDEO (Certificate In Data Entry Operations)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">05 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/24.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">CCCA (Certificate course In computer Accounting)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/25.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DDTP (Diploma In Desktop Publishing)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/26.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DCHE (Diploma In Computer Hardware Engineering)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/27.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DAC (Diploma in Auto Cad)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/28.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DCMS (Diploma In Computer Multimedia Specialist)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/29.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DVEE (Diploma In Video Editing Expert)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex relative shadow-xl area transition transform hover:-translate-y-4 motion-reduce:transition-none motion-reduce:hover:transform-none">
-                    <div class="">
-                        <img class="rounded-t-2xl img-size" src="/img/30.jpg" alt="">
-                        <h1 class="h1-text font-bold p-4">DSWD (Diploma In Smart Web Designing)</h1>
-                        <div class="flex place-content-between p-4 button-place hr">
-                            <button class="h-fit bg-blue-700 text-white p-2 text-xl rounded-lg">Register now</button>
-                            <button class="h-fit bg-yellow-500 text-white p-2 text-xl rounded-lg">10 Months</button>
-                        </div>
-                    </div>
-                </div>
             </div>
+            <CourseAll client:visible/>
         </section>
     </main>
     <Mainfooter/>
@@ -332,7 +95,7 @@ import Header from "../components/Header.astro";
     .area {
         width: 300px;
         height: 450px;
-        background-color: rgb(215, 247, 244);
+        /* background-color: rgb(215, 247, 244); */
         border-radius: 16px;
     }
     .hr {