From fc4bfa575b1f6853b539f08a226d659e3cf1d956 Mon Sep 17 00:00:00 2001
From: suvodip ghosh <suvo@siliconpin.com>
Date: Fri, 12 May 2023 21:24:33 +0530
Subject: [PATCH] mainmenu

---
 src/components/DocumentsPage.vue              |   44 +
 src/components/Header.astro                   |    6 +-
 src/components/MainMenu.astro                 |  300 ++++
 .../{MainMenu.vue => MenuFinal.astro}         |    0
 src/components/NoticePage.vue                 |   42 +
 src/components/NoticeSlug.vue                 |   89 ++
 src/components/temp.vue                       | 1349 +++++++++++++++++
 src/pages/contact-us.astro                    |   44 +
 src/pages/documents/[id].astro                |    4 +-
 src/pages/documents/index.astro               |   10 +-
 src/pages/gallery.astro                       |  242 +++
 src/pages/index.astro                         |   13 +-
 src/pages/notice/[id].astro                   |    6 +-
 src/pages/notice/index.astro                  |   14 +-
 14 files changed, 2139 insertions(+), 24 deletions(-)
 create mode 100644 src/components/DocumentsPage.vue
 create mode 100644 src/components/MainMenu.astro
 rename src/components/{MainMenu.vue => MenuFinal.astro} (100%)
 create mode 100644 src/components/NoticePage.vue
 create mode 100644 src/components/NoticeSlug.vue
 create mode 100644 src/components/temp.vue
 create mode 100644 src/pages/contact-us.astro
 create mode 100644 src/pages/gallery.astro

diff --git a/src/components/DocumentsPage.vue b/src/components/DocumentsPage.vue
new file mode 100644
index 0000000..5091730
--- /dev/null
+++ b/src/components/DocumentsPage.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="container bg-white mx-auto  text-blue-900 leading-loose text-xl">
+        <!-- <h2 class="text-2xl text-blue-900">All pages having Documents / file Attachments are listed below:</h2> -->
+        <br>
+        <br>
+        <br>
+        <div v-if="isLoading">
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Loading ...</h2>
+        </div>
+        <div v-else>
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Documents</h2>
+            <div  v-for="(item, index) in page" >
+                <a :href="'/documents/'+item.slug"> <h3> {{item.title}}</h3> </a>
+                
+
+           
+                
+
+            </div>
+            <!-- <div v-html="page[0].content" class="container mx-auto"></div> -->
+        </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+            }
+        },
+        mounted: function () {
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=documents&limit=-1')
+            // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
+                .then(response => response.json())
+                .then(data => {
+              this.page = data.data
+            //   console.log(data)
+              this.isLoading = false
+            })
+        }
+    }
+    </script>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 8a4786b..6c991ea 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,13 +1,13 @@
 <main>
     <header>
         <div class="lg:hidden grid grid-cols-6 bg-blue-700 place-items-center text-white">
-            <div class="grid col-span-1 "> <img class="w-16" src="/img/logo3.png" alt=""></div>
+            <div class="grid col-span-1 "> <a href="/"><img class="w-16" src="/img/logo3.png" alt="Sree Chaitanya College,Habra "/></a> </div>
             <div class="grid col-span-4 ">SREE CHAITANYA COLLEGE</div>
-            <div class="grid col-span-1 "><button class="hover:bg-white hover:text-blue-700 rounded-md p-1">Log In</button></div>
+            <!-- <div class="grid col-span-1 "><button class="hover:bg-white hover:text-blue-700 rounded-md p-1">Log In</button></div> -->
         </div>
         <div
             class="hidden lg:block flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
-            <img src="/img/logo3.png" alt="/img/logo3.png" class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14"
+            <img src="/img/logo3.png" alt="Sree Chaitanya College,Habra" class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14 text-base "
             />
             Estd.-1956
             <br />Sree Chaitanya College,Habra
diff --git a/src/components/MainMenu.astro b/src/components/MainMenu.astro
new file mode 100644
index 0000000..b77841e
--- /dev/null
+++ b/src/components/MainMenu.astro
@@ -0,0 +1,300 @@
+
+<main>
+  <section class="container-fluid" style="background-color: #172554;"> 
+    <div class="navbar shadow-xl zindex xl:container xl:mx-auto">
+ 
+      <!-- Navbar logo -->
+      <div class="nav-header">
+        <div class="nav-logo">
+        </div>
+      </div>
+   
+      <!-- responsive navbar toggle button -->
+      <input type="checkbox" id="nav-check">
+      <div class="nav-btn">
+        <label for="nav-check">
+          <span></span>
+          <span></span>
+          <span></span>
+        </label>
+      </div>
+   
+      <!-- Navbar items -->
+      <div class="nav-links">
+        <a href="/">Home</a>
+        <a href="/about-us">About</a>
+        <a href="/contact-us">Contact Us</a>
+        <a href="/notice">Notice</a>
+        <a href="/library">Library</a>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Administration
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content" >
+            <a href="/governing-body">Governing Body</a>
+            <a href="/composition-of-gb">Composition of GB</a>
+            <a href="/staff">Staff</a>
+            <a href="/working-hour">Working Hour</a>
+          </div>
+        </div>
+        <!-- <a href="https://center.rgyci.org/center_list">Center List</a> -->
+        <!-- Dropdown menu -->
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Academics
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="/departments">Departments & Faculty</a>
+            <a href="/admission">Admission</a>
+            <a href="/librarians">Librarians</a>
+            <a href="/course-offered">Course Offered</a>
+            <a href="/subject-combinationhons">Subject Combination(Hons)</a>
+            <a href="/subject-combinationgen">Subject Combination(Gen)</a>
+            <a href="/intake-capacity">Intake Capacity</a>
+            <a href="/academic-calender">Academic Calendar</a>
+            <a href="/prospectus">Prospectus</a>
+            <a href="/Marks-Distribution">Marks Distribution</a>
+            <a href="/result">Result</a>             
+          </div>
+        </div>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Organizations
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="/iqac">IQAC</a>
+            <a href="/naac">NAAC</a>
+            <a href="/nirf-data">NIRF</a>
+            <a href="/aqar">AQAR</a>
+            <a href="/students-union">Student's Union</a>
+            <a href="/teachers-council">Teacher's Council</a>
+            <a href="/alumni-association">Alumni Association</a>
+            <a href="/gallery">Image Gallery</a>            
+          </div>
+        </div>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Facilities
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="/facilities">Facilities</a>
+            <a href="/rti">RTI</a>           
+          </div>
+        </div>
+        <div class="dropdown">
+            <a class="dropBtn" href="#">Students
+              <i class="fas fa-angle-down"></i>
+            </a>
+            <div class="drop-content">
+                <a href="/admission">Admission</a>
+                <a href="/activities">Activities</a>
+                <a href="/students-union">Student's Union</a>
+                <a href="/student-grievance">Students Suggestion / Grievance</a>
+                <a href="/students-feedback">Student's Feedback</a>
+                <a href="/students-health-home">Student's Health Home</a>
+                <a href="/code-of-conduct">Code of Conduct</a>
+                <a href="/holiday-list">Holiday List</a>
+                <a href="/gallery">Image Gallery</a>         
+            </div>
+        </div>
+
+        <!-- <div class="dropdown">
+          <a class="dropBtn" href="#">Login
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="https://center.rgyci.org/form/teacher_login">Teacer</a>
+            <a href="https://center.rgyci.org/form/center_login">Students</a>
+          </div>
+        </div> -->
+      </div>
+      
+    </div>
+  </section>
+    
+</main>
+<script is:inline>
+</script>
+<style>
+  .drop-content {
+    color: black;
+    width: fit-content;
+  }
+    .zindex {
+        z-index: 1;
+    }
+    *{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body{
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
+  background-image: url(background-img.jpg);
+  background-size: cover;
+  background-attachment: fixed;
+}
+.navbar{
+  height: 70px;
+  width: 100%;
+  padding: 25px 10px;
+  background-color: #172554;
+  position: relative;
+}
+.navbar .nav-header{
+  display: inline;
+}
+.navbar .nav-header .nav-logo{
+  display: inline-block;
+  margin-top: -7px;
+}
+.navbar .nav-links{
+  display: inline;
+  float: right;
+  font-size: 18px;
+}
+ 
+.navbar .nav-links .loginBtn{
+  display: inline-block;
+  padding: 5px 15px;
+  margin-left: 20px;
+  font-size: 17px;
+  color: rgb(255, 255, 255);
+}
+.navbar .nav-links a {
+  padding: 10px 6px;
+  width: fit-content;
+  text-decoration: none;
+  font-weight: 550;
+  color: white;
+}
+/* Hover effects */
+.navbar .nav-links a:hover{
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 100%;
+  border-radius: 10px;
+}
+ 
+/* responsive navbar toggle button */
+.navbar #nav-check, .navbar .nav-btn{
+  display: none;
+}
+ 
+@media (max-width:970px) {
+  .navbar .nav-btn{
+    display: inline-block;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+  .navbar .nav-btn label {
+    display: inline-block;
+    width: 80px;
+    height: 70px;
+    padding: 25px;
+  }
+  .navbar .nav-btn label span {
+    display: block;
+    height: 10px;
+    width: 25px;
+    border-top: 3px solid #eee;
+  }
+  .navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {
+    background-color: rgb(9, 14, 90);
+    transition: all 0.5s ease;
+  }
+  .navbar .nav-links{
+    position: absolute;
+    display: block;
+    text-align: center;
+    width: 100%;
+    background-color: rgb(9, 14, 90);
+    transition: all 0.3s ease-in;
+    overflow-y: hidden;
+    top: 70px;
+    right: 0px;
+  }
+  .navbar .nav-links a {
+    display: block;
+  }
+ 
+  /* when nav toggle button not checked */
+  .navbar #nav-check:not(:checked) ~ .nav-links {
+    height: 0px;
+  }
+ 
+  /* when nav toggle button is checked */
+  .navbar #nav-check:checked ~ .nav-links {
+    height: fit-content;
+    overflow-y: auto;
+  }
+  .navbar .nav-links .loginBtn {
+    padding: 10px 40px ;
+    margin: 20px;
+    font-size:  18px;
+    font-weight: bold;
+    color: rgb(9, 14, 90);
+  }
+  /* Responsive dropdown code */
+  .navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {
+    float: none;
+    width: 100%;
+  }
+  .navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {
+    position: relative;
+    background-color: rgb(220, 220, 250);
+    top: 0px;
+    left: 0px;
+  }
+  /* Text color */
+  .navbar .nav-links .drop-content a {
+    color: rgb(9, 14, 90);
+  }  
+ 
+}
+ 
+/* Dropdown menu CSS code */
+.dropdown{
+  position: relative;
+  display: inline-block;
+  color: black;
+}
+.drop-content, .drop-content2 {
+  display: none;
+  position: absolute;
+  background-color: #172554;
+  color: black;
+  min-width: 200px;
+  width: 100%;
+  font-size: 16px;
+  top: 34px;
+  z-index: 1;
+  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
+}
+/* on hover show dropdown */
+.dropdown:hover .drop-content, .dropdown2:hover .drop-content2 {
+  display: block;
+}
+/* drondown links */
+.drop-content a {
+  padding: 12px 10px;
+  /* width: 200px;
+  border-bottom: 1px solid rgb(197, 197, 250); */
+  display: block;
+  transition: all 0.5s ease !important;
+}
+.dropBtn .drop-content a:hover {
+  background-color: rgb(230, 230, 230);
+}
+.dropdown:hover .dropBtn, .dropdown2:hover .dropBtn2 {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.dropdown2 .drop-content2 {
+  position: absolute;
+  left: 120px;
+  top: 126px;
+}
+.dropBtn2 i {
+  margin-left: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/MainMenu.vue b/src/components/MenuFinal.astro
similarity index 100%
rename from src/components/MainMenu.vue
rename to src/components/MenuFinal.astro
diff --git a/src/components/NoticePage.vue b/src/components/NoticePage.vue
new file mode 100644
index 0000000..d7d6d17
--- /dev/null
+++ b/src/components/NoticePage.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="container bg-white mx-auto mt-3  p-4 text-blue-700 leading-loose">
+        <div v-if="isLoading">
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Loading ...</h2>
+        </div>
+        
+        <div v-else>
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Notice</h2>
+            <div  v-for="(item, index) in page" >
+                <a :href="'/notice/'+item.slug"> <h3> {{item.title}}</h3> </a>
+
+           
+                
+
+            </div>
+            <!-- <div v-html="page[0].content" class="container mx-auto">
+    
+            </div> -->
+        </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+            }
+        },
+        mounted: function () {
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+            // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
+                .then(response => response.json())
+                .then(data => {
+              this.page = data.data.reverse()
+            //   console.log(data)
+              this.isLoading = false
+            })
+        }
+    }
+    </script>
\ No newline at end of file
diff --git a/src/components/NoticeSlug.vue b/src/components/NoticeSlug.vue
new file mode 100644
index 0000000..678e8c0
--- /dev/null
+++ b/src/components/NoticeSlug.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="container bg-white mx-auto mt-3  p-4">
+        <div v-if="isLoading">
+            <h2>Loading ...</h2>
+        </div>
+        <div v-else>
+            <h2>{{page[0].title}}</h2>
+            <div v-html="page[0].content" ></div>
+            <div v-if="fileAttached">
+                <h2>Attachments.</h2>
+                <ul>
+                    <li v-for="(file, index) in files">
+                        {{index+1}}. 
+                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                          {{ file.filename_download }}
+                        </a>
+                    </li>
+
+                </ul>
+
+            </div>
+        </div>
+    </div>
+</template>
+    
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            fileAttached:false,
+            files: [],
+            isLoading: true
+        }
+    },
+    mounted: function () {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            throw new Error('Something went wrong');
+            })
+            .then(jsonPageData => {
+                this.page = jsonPageData.data
+                console.log(this.page)
+                this.isLoading = false
+                return jsonPageData.data[0].id
+                }
+            )
+            .then((pageID) => {
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+    },
+    methods: {
+        // getAttachments(att) {
+
+        //     console.log(att)
+        //     // fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
+        //     //     .then(response => response.json())
+        //     //     .then(data => this.itemByCategory = data)
+        //     // console.log(this.itemByCategory)
+
+        // }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/temp.vue b/src/components/temp.vue
new file mode 100644
index 0000000..bb3424a
--- /dev/null
+++ b/src/components/temp.vue
@@ -0,0 +1,1349 @@
+
+<template>
+    <div class="container-fluid bg-blue-900">
+      <div
+        id="hidden_mnu"
+        class="container mx-auto flex justify-center gap-1 bg-blue-900 shadow-md"
+      >
+  
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+           ring-1 ring-black ring-opacity-5 text-white
+            hover:text-blue-800
+          ">
+            <a
+              href="/"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50','block px-1 py-2 text-sm text-white',]">Home </a>
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/about-us"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              About </a
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/notice"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Notice </a
+            >
+          </MenuItem>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/library"
+              :class="[
+                active ? 'bg-gray-100 text-gray-100' : 'text-gray-50',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Library </a
+            >
+          </MenuItem>
+        </Menu>
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Administration
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/governing-body"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Governing Body</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/composition-of-gb"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Composition of GB</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/staff"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Staff</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/working-hour"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Working Hour</a
+                  >
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Academics
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/departments"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Departments and Faculty</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                        <a
+                          href="admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Admission</a
+                        >
+                      </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/librarians"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Librarians</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/course-offered"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Course Offered
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/subject-combinantionhons"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Subject Combinantion(Hons)</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/subject-combinantiongen"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Subject Combinantion(Gen)
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/intake-capacity"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Intake Capacity</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/academic-calendar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Academic Calendar
+                  </a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/prospectus"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Prospectus</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="Marks-Distribution"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Marks Distribution</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/result"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Result</a
+                  >
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Organizations
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/iqac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >IQAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/naac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NAAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF </a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/aqar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >AQAR</a
+                  >
+                </MenuItem>
+
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-union"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Union</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/teachers-council"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Teacher's Council</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/alumni-association"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Alumni Association</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href=""
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    ></a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Image Gallery</a
+                  >
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Facilities
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/facilities"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Facilities</a
+                  >
+                </MenuItem>
+  
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/rti"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >RTI</a
+                  >
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+  
+        <Menu as="div" class="relative inline-flex justify-center text-center">
+          <div>
+            <MenuButton
+              class="
+                inline-flex
+                justify-center
+                w-full
+                px-4
+                py-2
+                text-sm
+                font-medium
+                text-white
+                focus:outline-none
+              "
+            >
+              Students
+              <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+            </MenuButton>
+          </div>
+  
+          <div
+            enter-active-class="transition ease-out duration-100"
+            enter-from-class="transform opacity-0 scale-95"
+            enter-to-class="transform opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="transform opacity-100 scale-100"
+            leave-to-class="transform opacity-0 scale-95"
+          >
+            <MenuItems
+              class="
+                origin-top-right
+                absolute
+                top-10
+                left-0
+                mt-2
+                w-56
+                rounded-md
+                shadow-lg
+                bg-white
+                ring-1 ring-black ring-opacity-5
+                focus:outline-none
+              "
+            >
+              <div class="py-1">
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/admission"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Admission</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/activities"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Activities</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-union"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Union</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/student-grievance"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Student Suggestions/Grievance</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-feedback"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's feedback</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/students-health-home"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Student's Health Home</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/code-of-conduct"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                  >
+                    Code of Conduct</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/holidays-list"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Holiday List</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/gallery"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >Photo Gallery
+                  </a>
+                </MenuItem>
+              </div>
+            </MenuItems>
+          </div>
+        </Menu>
+        <Menu>
+          <MenuItem v-slot="{ active }"
+          class="
+            text-gray-100
+            ring-1 ring-black ring-opacity-5
+            hover:text-blue-800
+          ">
+            <a
+              href="/contact-us"
+              :class="[
+                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                'block px-1 py-2 text-sm',
+              ]"
+            >
+              Contact </a
+            >
+          </MenuItem>
+        </Menu>
+  
+      </div>
+
+
+
+
+
+      
+      <div class="w-full h-8 bg-blue-700 fixed bottom-0" id="hidden_large">
+        <div>
+          <p></p>
+        </div>
+        <div class="overflow-hidden">
+          <label
+            class="
+              block
+              cursor-pointer
+              text-2xl text-center
+              font-semibold
+              text-white
+              bottom-0
+              right-0
+            "
+            for="mobile_mnu"
+          >
+            Menu</label
+          >
+          <input class="hidden" type="checkbox" id="mobile_mnu" />
+          <div class="mobile_menu bg-cyan-200 transition duration-150">
+            
+            
+            
+            
+
+
+
+
+
+            <div class="bg-white">
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/">Home</a>
+                </button>
+              </div>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/about-us">About Us</a>
+                </button>
+              </div>
+              <Menu as="div" class="text-center">
+                <div>
+                  <MenuButton
+                    class="
+                      inline-flex
+                      justify-center
+                      w-full
+                      px-4
+                      py-2
+                      bg-white
+                      text-sm
+                      font-medium
+                      text-gray-700
+                      focus:outline-none
+                    "
+                  >
+                    Administration
+                    <ChevronDownIcon
+                      class="-mr-1 ml-2 h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </MenuButton>
+                </div>
+  
+                <div
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
+                    <div class="py-1">
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/governing-body"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Governing Body</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/composition-of-gb"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Composition of GB</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/staff"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Staff</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/working-hour"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Working Hour</a
+                        >
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <Menu as="div" class="text-center">
+                <div>
+                  <MenuButton
+                    class="
+                      inline-flex
+                      justify-center
+                      w-full
+                      px-4
+                      py-2
+                      bg-white
+                      text-sm
+                      font-medium
+                      text-gray-700
+                      focus:outline-none
+                    "
+                  >
+                    Academics
+                    <ChevronDownIcon
+                      class="-mr-1 ml-2 h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </MenuButton>
+                </div>
+  
+                <div
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
+                    <div class="py-1">
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="#"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Departments and Faculty</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="ug-admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >UG Admission</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/librarians"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Librarians</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/course-offered"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Course Offered
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/subject-combinantionhons"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Subject Combinantion(Hons)</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/Subject-combinantiongen"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Subject Combinantion(Gen)
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/intake-capacity"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Intake Capacity</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/academic-calendar"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Academic Calendar
+                        </a>
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/prospectus"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Prospectus</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="Marks-Distributionyarn"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Marks Distribution</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/result"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Result</a
+                        >
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <Menu as="div" class="text-center">
+                <div>
+                  <MenuButton
+                    class="
+                      inline-flex
+                      justify-center
+                      w-full
+                      px-4
+                      py-2
+                      bg-white
+                      text-sm
+                      font-medium
+                      text-gray-700
+                      focus:outline-none
+                    "
+                  >
+                    Organizations
+                    <ChevronDownIcon
+                      class="-mr-1 ml-2 h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </MenuButton>
+                </div>
+  
+                <div
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
+                    <div class="py-1">
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/iqac"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >IQAC</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                  <a
+                    href="/naac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NAAC</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF</a
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a
+                    href="/aqar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >AQAR</a
+                  >
+                </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-union"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Union</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/alumni-association"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Alumni Association</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/activity-gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Activity Gallery</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Image Gallery</a
+                        >
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/facilities">Facilities</a>
+                </button>
+              </div>
+  
+              <Menu as="div" class="text-center">
+                <div>
+                  <MenuButton
+                    class="
+                      inline-flex
+                      justify-center
+                      w-full
+                      px-4
+                      py-2
+                      bg-white
+                      text-sm
+                      font-medium
+                      text-gray-700
+                      focus:outline-none
+                    "
+                  >
+                    Students
+                    <ChevronDownIcon
+                      class="-mr-1 ml-2 h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </MenuButton>
+                </div>
+  
+                <div
+                  enter-active-class="transition ease-out duration-100"
+                  enter-from-class="transform opacity-0 scale-95"
+                  enter-to-class="transform opacity-100 scale-100"
+                  leave-active-class="transition ease-in duration-75"
+                  leave-from-class="transform opacity-100 scale-100"
+                  leave-to-class="transform opacity-0 scale-95"
+                >
+                  <MenuItems class="w-full rounded-md shadow-lg bg-cyan-200">
+                    <div class="py-1">
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/admission"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Admission</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/activities"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Activities</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-union"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Union</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/student-grievance"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Student Suggestions/Grievance</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-feedback"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's feedback</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/students-health-home"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Student's Health Home</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/code-of-conduct"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                        >
+                          Code of Conduct</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/holidays-list"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Holiday List</a
+                        >
+                      </MenuItem>
+                      <MenuItem v-slot="{ active }">
+                        <a
+                          href="/gallery"
+                          :class="[
+                            active
+                              ? 'bg-gray-100 text-gray-900'
+                              : 'text-gray-700',
+                            'block px-1 py-2 text-sm',
+                          ]"
+                          >Photo Gallery
+                        </a>
+                      </MenuItem>
+                    </div>
+                  </MenuItems>
+                </div>
+              </Menu>
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/library">Library</a>
+                </button>
+              </div>
+  
+              <div class="text-center">
+                <button class="text-sm font-medium py-2 px-4 rounded">
+                  <a href="/contact">Contact</a>
+                </button>
+              </div>
+            </div>
+            <div
+              class="
+                w-full
+                bg-blue-700
+                text-white text-2xl
+                font-semibold
+                text-center
+              "
+            >
+              <label
+                class="block cursor-pointer right-0 dark:text-white"
+                for="mobile_mnu"
+                >close</label
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <style scoped>
+  @media only screen and (max-width: 600px) {
+    #hidden_mnu {
+      display: none;
+    }
+  }
+  @media only screen and (min-width: 600px) {
+    #hidden_large {
+      display: none;
+    }
+  }
+  
+  .mobile_mnu {
+    color: red;
+  }
+  .mobile_menu {
+    display: none;
+    position: absolute;
+    width: 0;
+    bottom: -1000px;
+    transition-duration: 3s ease-in;
+    transition: width 2s;
+  }
+  #mobile_mnu:checked ~ .mobile_menu {
+    display: block;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+  </style>
+  <script setup>
+  import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+  import { ChevronDownIcon } from '@heroicons/vue/solid'
+  </script>
\ No newline at end of file
diff --git a/src/pages/contact-us.astro b/src/pages/contact-us.astro
new file mode 100644
index 0000000..6897570
--- /dev/null
+++ b/src/pages/contact-us.astro
@@ -0,0 +1,44 @@
+---
+import Layout from "../layouts/Layout.astro"
+import Header from "../components/Header.astro"
+import MainMenu from "../components/MainMenu.astro"
+import Footer from "../components/Footer.astro"
+---
+<Layout title="">
+    <Header />
+    <MainMenu />
+    <main>
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 lg:grid-cols-2 mt-8">
+                <div class="flex flex-col h-fit justify-center place-items-center">
+                    <p class="text-center text-3xl text-blue-900 mt-4 font-semibold pt-10">Contact Us</p>
+                    <div class="flex flex-col place-items-center">
+                        <h1 class="text-center text-3xl text-blue-900 mt-4 font-semibold">Sree Chaitanya College,Habra </h1>
+                        <span class="text-2xl font-bold">(Arts and Science) </span>
+                        <h2 class="text-xl font-bold pt-2 text-center">Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B </h2>
+                        <p class="text-2xl pt-4">Call to: +913216237020</p>
+                        <p class="text-lg md:text-2xl text-center">Mail to: <a href="" class="text-blue-700 font-bold underline">sreechaitanyacollege@rediffmail.com</a></p>
+                    </div>
+                   
+                </div>
+                <div class="flex flex-col place-items-center justify-center">
+                    <p class="text-center text-3xl text-blue-900 font-semibold mt-4">View College on Google Map</p>
+                    <!-- Google Map Copied Code -->
+                    <iframe class="mt-4 mb-8" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3677.0775585659544!2d88.64048451555165!3d22.83661988504755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f8b071c69b9933%3A0x5181c48a7b97726e!2sSree%20Chaitanya%20College%2C%20Habra!5e0!3m2!1sen!2sin!4v1667829054410!5m2!1sen!2sin"
+                            width="80%"
+                            height="400"
+                            frameborder="0"
+                            style="border:0;"
+                            
+                            aria-hidden="false"
+                            tabindex="0">
+                    </iframe>
+                </div>
+            </div>
+           
+        
+            
+        </div>
+    </main>
+    <Footer />
+</Layout>
diff --git a/src/pages/documents/[id].astro b/src/pages/documents/[id].astro
index e6b43e9..fc6fabf 100644
--- a/src/pages/documents/[id].astro
+++ b/src/pages/documents/[id].astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../../layouts/Layout.astro"
 import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.vue"
+import MainMenu from "../../components/MainMenu.astro"
 import Footer from "../../components/Footer.astro"
 
 export async function getStaticPaths() {
@@ -27,7 +27,7 @@ const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===
                 <!-- <h2>Loading ...</h2> -->
             </div>
             <div>
-                <h2 class="text-center t-8">{data.data[idx].title}</h2>
+                <!-- <h2 class="text-center t-8">{data.data[idx].title}</h2> -->
                 <div></div>
                 <div >
                     <!-- <h2>Attachments.</h2> -->
diff --git a/src/pages/documents/index.astro b/src/pages/documents/index.astro
index 2b5744c..4ad62de 100644
--- a/src/pages/documents/index.astro
+++ b/src/pages/documents/index.astro
@@ -1,8 +1,9 @@
 ---
 import Layout from "../../layouts/Layout.astro"
 import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.vue"
+import MainMenu from "../../components/MainMenu.astro"
 import Footer from "../../components/Footer.astro"
+import DocumentsPage from "../../components/DocumentsPage.vue"
 const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents&sort=-date_created');
 const data = await response.json();
 const notice = data.data;
@@ -10,8 +11,9 @@ const notice = data.data;
 ---
 <Layout title="">
     <Header />
-    <MainMenu />
-    <main>
+    <MainMenu  />
+    <DocumentsPage client:visible />
+    <!-- <main>
         <div class="container mx-auto mt-3 p-4 ">
             <div>
                 <h1 class="text-center text-4xl font-bold underline decoration-4 decoration-blue-700 py-10">Documents</h1>
@@ -26,7 +28,7 @@ const notice = data.data;
                 </div>
             </div>
         </div>
-    </main>
+    </main> -->
     <Footer />    
 </Layout>
 
diff --git a/src/pages/gallery.astro b/src/pages/gallery.astro
new file mode 100644
index 0000000..638c60d
--- /dev/null
+++ b/src/pages/gallery.astro
@@ -0,0 +1,242 @@
+---
+import Layout from "../layouts/Layout.astro"
+import Header from "../components/Header.astro"
+import MainMenu from "../components/MainMenu.astro"
+import Footer from "../components/Footer.astro"
+---
+<Layout title="">
+    <Header />
+<MainMenu />
+    <main>
+        <div>
+            <div class="grid place-items-center bg-blue-700  w-48 text-4xl font-bold text-white rounded-full p-1 md:mt-8 absolute md:inset-x-2/4 top-56 md:-ml-28 -mt-40 inset-x-2/4 top-72 -ml-28 gap-4">Gallery</div>
+            <section class="overflow-hidden text-gray-700 mt-32">
+                <div class="container px-5 py-2 mx-auto lg:pt-12 lg:px-32 ">
+                    <div class="flex flex-wrap -m-1 md:-m-2">
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/1.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/2.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/3.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/4.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/5.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/6.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/7.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/8.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/9.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/11.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/12.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/13.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/14.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/15.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/16.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/17.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/18.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/19.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/20.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/21.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/22.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/23.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/24.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/25.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/26.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/27.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/28.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/29.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/30.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/31.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/32.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/32.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/33.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/34.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/35.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap w-1/3">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/36.jpg">
+                            </div>
+                        </div>
+    
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+    <Footer />
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a49b169..09a9b94 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,20 @@
 ---
 import Layout from "../layouts/Layout.astro"
 import Header from "../components/Header.astro"
-import MainMenu from "../components/MainMenu.vue"
+import MainMenu from "../components/MainMenu.astro"
 import Footer from "../components/Footer.astro"
 ---
 <Layout title="">
 	<main>
 		<Header />
-		<MainMenu client:visible />
-		<div class="container mx-auto px-4">
+		<MainMenu />
+		<section class="container-fluid">
 			<div class="flex justify-center">
-				  <img src="/img/clg.jpg" alt="clg" class="mb-5 rounded-b-2xl" width="100%"height="100%"/>
-			</div>
+				<img src="/img/clg.jpg" alt="clg" class="mb-5 rounded-b-2xl" width="100%"height="100%"/>
+		  </div>
+		</section>
+		<div class="container mx-auto px-4">
+			
 			<div class="flex justify-center">
 				<div class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full">Vision of The College</div>
 			</div>
diff --git a/src/pages/notice/[id].astro b/src/pages/notice/[id].astro
index 7342228..1b8bff4 100644
--- a/src/pages/notice/[id].astro
+++ b/src/pages/notice/[id].astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../../layouts/Layout.astro"
 import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.vue"
+import MainMenu from "../../components/MainMenu.astro"
 import Footer from "../../components/Footer.astro"
 
 export async function getStaticPaths() {
@@ -23,14 +23,12 @@ const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===
     <MainMenu />
     <main>
         <div class="container bg-white mx-auto mt-3  p-4">
-            <div v-if="isLoading">
-                <!-- <h2>Loading ...</h2> -->
+            <div>
             </div>
             <div>
                 <h2 class="text-center t-8">{data.data[idx].title}</h2>
                 <div></div>
                 <div >
-                    <!-- <h2>Attachments.</h2> -->
                     <div>
                         <div class="flex flex-col place-items-center justify-center" set:html={data.data[idx].content}></div>
                         <a href=""></a>
diff --git a/src/pages/notice/index.astro b/src/pages/notice/index.astro
index 6c72b0d..e408414 100644
--- a/src/pages/notice/index.astro
+++ b/src/pages/notice/index.astro
@@ -1,17 +1,19 @@
 ---
 import Layout from "../../layouts/Layout.astro"
 import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.vue"
+import MainMenu from "../../components/MainMenu.astro"
 import Footer from "../../components/Footer.astro"
-const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice&sort=-date_created');
-const data = await response.json();
-const notice = data.data;
+import NoticePage from "../../components/NoticePage.vue"
+// const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice&sort=-date_created');
+// const data = await response.json();
+// const notice = data.data;
 // console.log(data)
 ---
 <Layout title="">
     <Header />
     <MainMenu />
-    <main>
+    <NoticePage client:visible />
+    <!-- <main>
         <div class="container mx-auto mt-3 p-4 ">
             <div>
                 <h1 class="text-center text-4xl font-bold underline decoration-4 decoration-blue-700 py-10">Notice</h1>
@@ -26,7 +28,7 @@ const notice = data.data;
                 </div>
             </div>
         </div>
-    </main>
+    </main> -->
     <Footer />    
 </Layout>