update desgine

package.json

@@ -18,6 +18,7 @@
     "@headlessui/vue": "^1.7.13",
     "@heroicons/vue": "1.0.6",
     "astro": "^1.7.2",
+    "js-cookie": "^3.0.5",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45"
   },

src/components/Footer.astro

@@ -6,14 +6,5 @@ import FooterComponent from "./FooterComponent.vue"
     <FooterComponent client:visible />
 </section>
 <style>
-    .shape {
+
-        -webkit-animation: shape 3ss forwards;
-        animation: shape 2s infinite;
-        color: rgb(255, 0, 0);
-    }
-    @keyframes shape {
-        50%{color: red(187, 224, 85); }
-        50%{color: rgb(255, 255, 255); }
-        /* 50%{color: rgb(0, 255, 34);} */
-    }
 </style>

src/components/Header.astro

@@ -1,19 +0,0 @@
-<main>
-    <header>
-        <div class="lg:hidden grid grid-cols-6 bg-blue-700 place-items-center text-white">
-            <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>
-        <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">
-            <a href="/"><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 "
-                /></a>
-            Estd.-1956
-            <br />Sree Chaitanya College,Habra
-            <br />(Arts and Science)
-            <br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
-        </div>
-        <!-- <Menu /> -->
-    </header>
-</main>

src/components/MainMenu.astro

@@ -1,5 +1,43 @@
 
 <main>
+  <div>
+    <div class="topBar1 flex flex-col bg-blue-700 border-b shadow-lg w-full py-3 place-items-center justify-center">
+      <div class="flex flex-row gap-x-4 place-items-center">
+        <a href="/"><img class="w-10 h-10" src="/img/logo3.png" alt="Sreechaitanya College Logo" /></a>
+        <h1 class="text-xl font-bold text-white uppercase">sreechaitanya college</h1>
+      </div>
+      <h3 class="text-md text-white text-center">Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B</h3>
+    </div>
+
+    <div class="topBar2 container-fluid bg-blue-700 py-4">
+      <div class="container mx-auto px-4 flex flex-row gap-x-4 place-content-between place-items-center text-white">
+        <a href="/"><img src="/img/logo3.png" alt="Sreechaitanya College Logo" /></a>
+        <div>
+          <h1 class="text-3xl lg:text-4xl xl:text-5xl font-bold">Sree Chaitanya College,Habra</h1>
+          <h2 class="text-3xl font-bold">(Arts and Science)</h2>
+          <h3  class="text-2xl font-bold">Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B</h3>
+        </div>
+      </div>
+    </div>
+    <!-- <div>
+      <div class="lg:hidden flex flex-col bg-blue-700 place-items-center text-white">
+        
+          <div class=" "> <a href="/"><img class="w-16" src="/img/logo3.png" alt="Sree Chaitanya College,Habra "/></a></div>
+          <div class="">SREE CHAITANYA COLLEGE</div>
+          <div class=" "><button class="hover:bg-white hover:text-blue-700 rounded-md p-1">Log In</button></div>
+      </div>
+
+      <div
+          class="hidden lg:flex bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
+          <a href="/">
+            <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 "/></a>
+          Estd.-1956
+          <br />
+          <br />
+          <br />
+      </div> -->
+  </div>
+  </div>
   <section class="container-fluid" style="background-color: #173382;"> 
     <div class="navbar shadow-xl zindex xl:container xl:mx-auto">
  
@@ -118,6 +156,26 @@
 <script is:inline>
 </script>
 <style>
+  @media only screen and (max-width: 750px) {
+    .topBar1{
+      display: flex;
+    }
+    .topBar2 {
+      display: none;
+    }
+  }
+  @media only screen and (min-width: 751px) {
+    .topBar1{
+      display: none;
+    }
+    .topBar2 {
+      display: flex;
+    }
+  }
+
+
+
+
     .drop-content {
       color: black;
       width: fit-content;

src/components/popUpWindow.vue

@@ -0,0 +1,86 @@
+<template>
+    <div>
+      <div v-for="item in fetchedData" :key="item.id" class="displayPosition mb-6">
+        <div :class="['flex', 'items-center', 'w-full', 'max-w-xs', 'p-4', 'mb-4', 'text-gray-500', 'bg-white', 'rounded-lg', 'shadow', 'dark:text-gray-400', 'dark:bg-gray-800', { 'hidden': !item.isVisible }]" :id="`toast-${item.id}`" role="alert">
+          <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-700 bg-blue-100 rounded-full dark:bg-green-800 dark:text-blue-700">
+            <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="blinking-icon">
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+                <path d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+              </g>
+            </svg>
+          </div>
+          <div class="ml-3 text-sm font-normal blinking-icon"><a target="_blank" :href="'/notice/'+item.slug" class="font-bold">{{ item.title }}</a></div>
+          <button @click="toggleDisplay(item)" type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" :data-dismiss-target="`#toast-${item.id}`" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <!-- Your close button icon here -->  
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+  import Cookies from 'js-cookie';
+  
+  export default {
+    data() {
+      return {
+        fetchedData: [],
+      };
+    },
+    methods: {
+      toggleDisplay(item) {
+        item.isVisible = !item.isVisible;
+        // Store the visibility state in a cookie
+        Cookies.set(`toast-${item.id}-visible`, item.isVisible ? '1' : '0');
+      },
+      fetchData() {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[position][_eq]=popup')
+          .then((response) => response.json())
+          .then((data) => {
+            this.fetchedData = data.data.reverse().map((item) => ({
+              ...item,
+              isVisible: Cookies.get(`toast-${item.id}-visible`) === '1' || !Cookies.get(`toast-${item.id}-visible`) ? true : false,
+            }));
+            this.isLoading = false;
+          });
+      },
+    },
+    mounted() {
+      this.fetchData();
+    },
+  };
+</script>
+  
+  <style>
+  .displayPosition {
+    position: fixed;
+    top: 50%;
+  }
+  @keyframes blink {
+    0% {
+      color: #1d4ed8;
+    }
+    25% {
+      color: #FF0000;
+    }
+    50% {
+      color: #1d4ed8;
+    }
+    100% {
+      color: #FF0000;
+    }
+  }
+  .blinking-icon {
+    animation: blink 2s infinite;
+    font-weight: bold;
+  }
+  .hidden {
+    display: none;
+  }
+  </style>
+  

src/layouts/Layout.astro

@@ -4,6 +4,9 @@ export interface Props {
 }
 
 const { title } = Astro.props;
+import PopUpWindow from '../components/popUpWindow.vue';
+import MainMenu from "../components/MainMenu.astro"
+import Footer from '../components/Footer.astro';
 ---
 
 <!DOCTYPE html>
@@ -22,10 +25,19 @@ const { title } = Astro.props;
 
 	</head> 
 	<body>
+		<div>
+			<PopUpWindow client:visible />
+			<MainMenu />
 			<slot />
+			<Footer />
+		</div>
 	</body>
 </html>
 <style is:global>
+	@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&display=swap');
+	body{
+		font-family: Quicksand;
+	}
 	/* :root {
 		--accent: 124, 58, 237;
 		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);

src/pages/404.astro

@@ -1,15 +1,11 @@
 ---
 import Layout from "../layouts/Layout.astro"
 import RoutePage from "../components/RoutePage.vue"
-import Header from "../components/Header.astro"
-import MainMenu from "../components/MainMenu.astro"
 import Footer from "../components/Footer.astro"
 console.log(Astro.url.pathname)
 ---
 <Layout title="">
 	<main>
-		<Header />
-		<MainMenu />
 		<RoutePage client:visible/>
 		<!-- <section class="container-fluid">
 			<div class="flex justify-center">
@@ -103,7 +99,6 @@ console.log(Astro.url.pathname)
 			  </div> -->
 		</div>
 	</main>
-	<Footer />
 </Layout>
 
   

src/pages/contact-us.astro

@@ -1,12 +1,7 @@
 ---
 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">
@@ -35,10 +30,6 @@ import Footer from "../components/Footer.astro"
                     </iframe>
                 </div>
             </div>
-           
-        
-            
         </div>
     </main>
-    <Footer />
 </Layout>

src/pages/documents/index.astro

@@ -1,8 +1,5 @@
 ---
 import Layout from "../../layouts/Layout.astro"
-import Header from "../../components/Header.astro"
-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();
@@ -10,8 +7,6 @@ const notice = data.data;
 // console.log(data)
 ---
 <Layout title="">
-    <Header />
-    <MainMenu  />
     <DocumentsPage client:visible />
     <!-- <main>
         <div class="container mx-auto mt-3 p-4 ">
@@ -29,7 +24,6 @@ const notice = data.data;
             </div>
         </div>
     </main> -->
-    <Footer />    
 </Layout>
 
    

src/pages/gallery.astro

@@ -1,12 +1,7 @@
 ---
 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>
@@ -237,5 +232,4 @@ import Footer from "../components/Footer.astro"
             </section>
         </div>
     </main>
-    <Footer />
 </Layout>

src/pages/index.astro

@@ -1,13 +1,8 @@
 ---
 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="">
 	<main>
-		<Header />
-		<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%"/>
@@ -100,7 +95,6 @@ import Footer from "../components/Footer.astro"
 			  </div> -->
 		</div>
 	</main>
-	<Footer />
 </Layout>
 
   

src/pages/notice/index.astro

@@ -1,8 +1,5 @@
 ---
 import Layout from "../../layouts/Layout.astro"
-import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.astro"
-import Footer from "../../components/Footer.astro"
 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();
@@ -10,8 +7,6 @@ import NoticePage from "../../components/NoticePage.vue"
 // console.log(data)
 ---
 <Layout title="">
-    <Header />
-    <MainMenu />
     <NoticePage client:visible />
     <!-- <main>
         <div class="container mx-auto mt-3 p-4 ">
@@ -29,6 +24,5 @@ import NoticePage from "../../components/NoticePage.vue"
             </div>
         </div>
     </main> -->
-    <Footer />    
 </Layout>
 

src/pages/video.astro

@@ -1,6 +1,5 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import MainHeader from '../components/MainHeader.vue';
 import VideoYt from '../components/VideoYt.html';
 
 import Footer from '../components/Footer.astro';

yarn.lock

@@ -2025,6 +2025,11 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"