RoutePage

src/components/Footer.astro

@@ -38,7 +38,7 @@ import FooterComponent from "./FooterComponent.vue"
 <section class="">
     <FooterComponent client:visible />
 </section>
-<div class="container-fluid bg-stone-600">
+<!-- <div class="container-fluid bg-stone-600">
     <div class="">
         <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 bg-stone-600">
             <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Other's Links<hr class="blue-400">
@@ -69,7 +69,7 @@ import FooterComponent from "./FooterComponent.vue"
             <a href=""><span class=""> Count 112964  | Site Performance  <hr> </span></a>
         </div>
     </div>
-</div>
+</div> -->
 <style>
     .shape {
         -webkit-animation: shape 3ss forwards;

src/components/MainMenu.astro

@@ -1,6 +1,6 @@
 
 <main>
-  <section class="container-fluid" style="background-color: #172554;"> 
+  <section class="container-fluid" style="background-color: #173382;"> 
     <div class="navbar shadow-xl zindex xl:container xl:mx-auto">
  
       <!-- Navbar logo -->
@@ -138,7 +138,7 @@ body{
   height: 70px;
   width: 100%;
   padding: 25px 10px;
-  background-color: #172554;
+  background-color: #173382;
   position: relative;
 }
 .navbar .nav-header{
@@ -162,6 +162,9 @@ body{
   color: rgb(255, 255, 255);
 }
 .navbar .nav-links a {
+  border-radius: 5px;
+  /* background-color: #0ea5e930; */
+  width: 100%;
   padding: 10px 6px;
   width: fit-content;
   text-decoration: none;
@@ -170,7 +173,7 @@ body{
 }
 /* Hover effects */
 .navbar .nav-links a:hover{
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: #0ea5e950;
   width: 100%;
   border-radius: 10px;
 }
@@ -180,7 +183,7 @@ body{
   display: none;
 }
  
-@media (max-width:970px) {
+@media (max-width:960px) {
   .navbar .nav-btn{
     display: inline-block;
     position: absolute;

src/components/RoutePage.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="container mx-auto px-4 text-justify">
+        <div v-if="content">
+            <div v-html="content"></div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            attachment:null,
+            content:null,
+            isLoading: true
+        }
+    },
+    mounted: function () {
+        
+        let path=window.location.pathname.split('/');
+        console.log(path[1]);
+
+        // fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+        let queryP='https://api8.siliconpin.com/items/scc22?filter[slug][_eq]='+path[1];
+        fetch(queryP)
+            .then(response => response.json())
+            .then(data => {
+          this.page = data.data[0]
+          this.content = this.page.content
+        //   console.log(data)
+          this.isLoading = false
+        })
+    }
+}
+</script>