added basic template to position main elements in the page

app/Filament/Components/Forms/ItemForm/Blocks/HeadingBlock.php

@@ -14,7 +14,7 @@ class HeadingBlock implements BlockSchema
             TextInput::make('id')
                 ->hidden()
                 ->integer()
-                ->default(rand(2335235, 324634264263426)),
+                ->default('anchor-link-' . base64_encode(rand(2335235, 324634264263426))),
             TextInput::make('content')
                 ->label('Текст заголовка')
                 ->placeholder('Введите текст заголовка')

resources/js/Navbars/MainPageNavbar.vue

@@ -130,7 +130,6 @@ export default {
   computed: {
     ...mapGetters(['lastSlider', 'isBviActive']),
     currentLogo() {
-      console.log(this.isBviActive)
       if (this.isBviActive) {
         return this.logos.default
       }

resources/js/Pages/Client/AcademicJournals/Index.vue

@@ -5,10 +5,30 @@ import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
 import BasicFooter from "@/footers/BasicFooter.vue";
 import AcademicJournalsListBreadcrumbs
   from "@/componentss/features/academicJournals/components/AcademicJournalsListBreadcrumbs.vue.vue";
+import LevelEduFilter from "@/componentss/features/additionalEducationPrograms/components/LevelEduFilter.vue";
+import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import AdditionalProgramListBreadcrumbs
+  from "@/componentss/features/additionalEducationPrograms/components/AdditionalProgramListBreadcrumbs.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import AdditionalProgramTitle
+  from "@/componentss/features/additionalEducationPrograms/components/AdditionalProgramTitle.vue";
+import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
 
 export default {
   name: "Index",
   components: {
+    FormEducationalFilter,
+    AdditionalProgramTitle,
+    BasicListFilter,
+    AdditionalProgramListBreadcrumbs,
+    BasicListBadge,
+    BasicPageWrapper,
+    BasicPageContainer,
+    CategoryFilter,
+    LevelEduFilter,
     AcademicJournalsListBreadcrumbs,
     BasicFooter,
     MetaTags,
@@ -43,24 +63,15 @@ export default {
 
 
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-5 md:flex md:flex-row">
-				<div class="px-4 pb-12 sm:px-6 lg:px-8 mx-auto">
-					<div>
-						<!-- Avatar Media -->
-						<!-- End Avatar Media -->
-						<!-- Content -->
-						<div class="space-y-5 md:space-y-4">
-							<div class="space-y-5 md:space-y-4">
-								<!-- Card Section -->
-								<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
-                  <AcademicJournalsListBreadcrumbs />
 
+  <BasicPageWrapper>
+    <BasicPageContainer>
+      <div class="max-w-[85rem] px-4 py-5 sm:px-6 md:px-8 md:py-5 mx-auto">
         <div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
           <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Научные периодические издания НТГСПИ</h2>
         </div>
         <!-- Grid -->
+        <AcademicJournalsListBreadcrumbs />
         <div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
           <template v-for="journal in journals.data">
             <Link :href="route('client.academicJournals.show', journal.slug)" class="group flex items-center bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" >
@@ -82,17 +93,9 @@ export default {
         </div>
         <!-- End Grid -->
       </div>
-								<!-- End Card Section -->
-							</div>
-						</div>
-						<!-- End Content -->
-					</div>
-				</div>
-			</div>
-		</main>
-
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
 </template>
 
 <style scoped></style>

resources/js/Pages/Client/AcademicJournals/Show.vue

@@ -8,10 +8,30 @@ import AcademicJournalsTitle from "@/componentss/features/academicJournals/compo
 import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
 import AcademicJournalsItemBreadcrumbs
   from "@/componentss/features/academicJournals/components/AcademicJournalsItemBreadcrumbs.vue";
+import BudgetFilter from "@/componentss/shared/filter/filters/BudgetFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import DirectionFilter from "@/componentss/shared/filter/filters/DirectionFilter.vue";
+import ProgramLevelEduFilter from "@/componentss/features/educationalPrograms/components/ProgramLevelEduFilter.vue";
+import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
+import ProgramListBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramListBreadcrumbs.vue";
+import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
+import BackButton from "@/componentss/ui/buttons/BackButton.vue";
 
 export default {
   name: "Show",
   components: {
+    BackButton,
+    FormEducationalFilter,
+    ProgramListBreadcrumbs,
+    ProgramTitle,
+    ProgramLevelEduFilter,
+    DirectionFilter,
+    BasicListFilter,
+    BasicPageWrapper,
+    BasicPageContainer,
+    BudgetFilter,
     AcademicJournalsItemBreadcrumbs,
     BasicPagination,
     MetaTags,
@@ -62,18 +82,16 @@ export default {
 
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:py-10">
-				<div class="w-100">
-					<div>
-						<!-- Avatar Media -->
-						<!-- End Avatar Media -->
-						<!-- Content -->
 
-            <div class="container max-w-6xl px-2 xl:px-5 lg:py-4 mx-auto space-y-5 md:space-y-8">
+  <BasicPageWrapper>
+    <BasicPageContainer>
+      <div class=" space-y-5 md:space-y-8">
+        <div class="space-y-3">
+          <BackButton link="client.academicJournals.index" title="К списку журналов" />
           <AcademicJournalsItemBreadcrumbs :title="journal.data.title" />
           <AcademicJournalsTitle class="text-center" :header="journal.data.title" />
+        </div>
+
         <div>
           <nav class="flex flex-col md:flex-row justify-center gap-x-6" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
             <button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none active"
@@ -95,7 +113,7 @@ export default {
 
           </nav>
         </div>
-							<div class="">
+        <div>
           <div id="horizontal-alignment-1" role="tabpanel" aria-labelledby="horizontal-alignment-item-1">
             <Builder :blocks="journal.data.main_info" />
           </div>
@@ -191,16 +209,9 @@ export default {
         </div>
       </div>
 
-
-
-						<!-- End Content -->
-					</div>
-				</div>
-			</div>
-		</main>
-
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
 </template>
 
 <style>

resources/js/Pages/Client/Additional-educations/Index.vue

@@ -14,10 +14,18 @@ import LevelEduFilter from "@/componentss/features/additionalEducationPrograms/c
 import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
 import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
 import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
+import AdditionalProgramItemBreadcrumbs
+  from "@/componentss/features/additionalEducationPrograms/components/AdditionalProgramItemBreadcrumbs.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BackButton from "@/componentss/ui/buttons/BackButton.vue";
+import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
+import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
 
 export default {
   name: "Index",
   components: {
+    ProgramTitle, Builder, BackButton, BasicPageWrapper, BasicPageContainer, AdditionalProgramItemBreadcrumbs,
     BasicListBadge,
     AdditionalProgramBadge,
     FormEducationalFilter, CategoryFilter,
@@ -96,16 +104,11 @@ export default {
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
 
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:py-10">
-				<div class="">
-					<div class="">
+  <BasicPageWrapper>
+    <BasicPageContainer>
       <div class="space-y-5 md:space-y-4">
         <AdditionalProgramTitle class="text-center" header="Дополнительное образование" />
         <div class="space-y-5 md:space-y-4 mx-auto max-w-3xl w-full">
-								<div>
-									<div class="">
           <div class="my-10 w-full">
             <AdditionalProgramListBreadcrumbs :breadcrumbs="breadcrumbs" />
             <div class="flex items-center gap-x-2">
@@ -121,9 +124,9 @@ export default {
             <div class="flex-wrap flex gap-3 md:items-center">
               <BasicListBadge :filters="filters" />
             </div>
-                    </div>									</div>
+          </div>
           <div class="container py-5 lg:py-4">
-										<div class="w-full mx-auto flex flex-wrap lg:justify-between">
+            <div class="w-full mx-auto flex flex-wrap md:justify-between">
               <template v-for="educations in transformToColumns(additionalEducations.data)">
                 <div class="flex flex-col">
                   <template v-for="education in educations">
@@ -142,14 +145,11 @@ export default {
           </div>
         </div>
       </div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</main>
-
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
+
 </template>
 
 <style scoped></style>

resources/js/Pages/Client/Additional-educations/Show.vue

@@ -10,11 +10,15 @@ import BasicFooter from "@/footers/BasicFooter.vue";
 import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
 import AdditionalProgramItemBreadcrumbs
   from "@/componentss/features/additionalEducationPrograms/components/AdditionalProgramItemBreadcrumbs.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramItemBreadcrumbs.vue";
 
 
 export default {
   name: "Show",
   components: {
+    ProgramItemBreadcrumbs, BasicPageWrapper, BasicPageContainer,
     AdditionalProgramItemBreadcrumbs,
     BasicFooter,
     Builder,
@@ -59,26 +63,16 @@ export default {
 <template>
 	<MetaTags :seo="seo" />
 
-	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
+	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
-				<div class="px-0 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-2xl">
-					<div>
-						<div class="space-y-5 md:space-y-4">
-							<div class="space-y-5 md:space-y-4">
-								<div>
-									<div class="container mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
-										<div class="space-y-10">
+  <BasicPageWrapper>
+    <BasicPageContainer>
       <div class="space-y-3">
         <BackButton link="client.additionalEducation.index" title="Все программы"/>
         <AdditionalProgramItemBreadcrumbs :breadcrumbs="breadcrumbs" :additional-education-title="additionalEducation.data.title" />
-											</div>
         <ProgramTitle :header="additionalEducation.data.title" class="text-center" />
       </div>
 
-										<!-- Icon Blocks -->
       <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
         <div class="grid sm:grid-cols-2 lg:grid-cols-3 items-start gap-12">
           <!-- Icon Block -->
@@ -175,20 +169,10 @@ export default {
           <Builder :blocks="additionalEducation.data.content" />
         </div>
       </div>
-										<!-- End Icon Blocks -->
-
-									</div>
-								</div>
-							</div>
-						</div>
-						<!-- End Content -->
-					</div>
-				</div>
-			</div>
-		</main>
-
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
 
 </template>
 

resources/js/Pages/Client/Departments/Show.vue

@@ -4,10 +4,10 @@
 
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
-	<div class="flex flex-col h-screen justify-between">
+  <BasicPageWrapper>
     <div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
 
-			<div class="w-full h-[67px] pointer-events-none fixed" id="visor"></div>
+      <NavigateVisor />
 
       <div class="sticky top-[110px] hidden h-[calc(100vh-110px)] max-w-[20%] md:flex md:shrink-0 md:flex-col md:justify-between">
         <nav v-if="departments"
@@ -133,10 +133,9 @@
 
     </div>
 
-
     <BasicFooter />
+  </BasicPageWrapper>
 
-	</div>
 
 </template>
 
@@ -154,6 +153,17 @@ import DepartmentWorkerCard from "@/componentss/features/departments/components/
 import DepartmentTeacherCard from "@/componentss/features/departments/components/DepartmentTeacherCard.vue";
 import BasicFooter from "@/footers/BasicFooter.vue";
 import {helpers} from "@/mixins/Helpers.js";
+import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import EventArchiveListBreadcrumbs from "@/componentss/features/events/components/EventArchiveListBreadcrumbs.vue";
+import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
+import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
+import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
+import NavigateVisor from "@/componentss/shared/visor/NavigateVisor.vue";
 
 
 export default {
@@ -182,6 +192,17 @@ export default {
 	},
 
 	components: {
+    NavigateVisor,
+    SortingByFilter,
+    EventListSearch,
+    BasicListFilter,
+    IsOnlineFilter,
+    BasicPagination,
+    EventArchiveListBreadcrumbs,
+    BasicListBadge,
+    BasicPageWrapper,
+    BasicPageContainer,
+    CategoryFilter,
     BasicFooter,
     DepartmentTeacherCard,
     DepartmentWorkerCard,

resources/js/Pages/Client/Events/Archive.vue

@@ -14,11 +14,18 @@ import EventArchiveListBreadcrumbs from "@/componentss/features/events/component
 import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
 import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
 import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BackButton from "@/componentss/ui/buttons/BackButton.vue";
+import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
+import BasicTitle from "@/componentss/ui/titles/BasicTitle.vue";
+import EventItemBreadcrumbs from "@/componentss/features/events/components/EventItemBreadcrumbs.vue";
 
 
 export default {
 	name: "Archive",
 	components: {
+    EventItemBreadcrumbs, BasicTitle, Builder, BackButton, BasicPageWrapper, BasicPageContainer,
     BasicPagination,
     SortingByFilter,
     EventListSearch,
@@ -75,10 +82,9 @@ export default {
 	<MetaTags :seo="seo" />
 
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
-  <div class="flex flex-col h-screen">
-    <main class="flex-grow">
-      <div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
-        <div class="pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-md"> <!-- Добавлен w-full -->
+
+  <BasicPageWrapper>
+    <BasicPageContainer breakpoint="md">
       <div>
         <EventArchiveListBreadcrumbs :breadcrumbs="breadcrumbs" />
         <div class="space-y-5 md:space-y-4">
@@ -125,11 +131,12 @@ export default {
         </div>
         <BasicPagination :links="events.links" />
       </div>
-        </div>
-      </div>
-    </main>
+
+    </BasicPageContainer>
     <BasicFooter />
-  </div>
+  </BasicPageWrapper>
+
+
 </template>
 
 <style scoped>

resources/js/Pages/Client/Events/Index.vue

@@ -10,11 +10,18 @@ import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
 import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
 import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
 import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BackButton from "@/componentss/ui/buttons/BackButton.vue";
+import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
+import BasicTitle from "@/componentss/ui/titles/BasicTitle.vue";
+import EventItemBreadcrumbs from "@/componentss/features/events/components/EventItemBreadcrumbs.vue";
 
 
 export default {
 	name: "Index",
 	components: {
+    EventItemBreadcrumbs, BasicTitle, Builder, BackButton, BasicPageWrapper, BasicPageContainer,
     BasicListBadge,
     CategoryFilter,
     IsOnlineFilter,
@@ -66,10 +73,9 @@ export default {
 	<MetaTags :seo="seo" />
 
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
-				<div class="pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-md">
+
+  <BasicPageWrapper>
+    <BasicPageContainer breakpoint="md">
       <div>
         <EventListBreadcrumbs :breadcrumbs="breadcrumbs" />
         <div class="space-y-5 md:space-y-4">
@@ -128,11 +134,9 @@ export default {
           </template>
         </div>
       </div>
-				</div>
-			</div>
-		</main>
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
 
 </template>
 

resources/js/Pages/Client/Events/Show.vue

@@ -7,10 +7,15 @@ import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
 import BasicFooter from "@/footers/BasicFooter.vue";
 import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
 import EventItemBreadcrumbs from "@/componentss/features/events/components/EventItemBreadcrumbs.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
+import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramItemBreadcrumbs.vue";
 
 export default {
 	name: "Show",
 	components: {
+    ProgramItemBreadcrumbs, ProgramTitle, BasicPageWrapper, BasicPageContainer,
     MetaTags,
     BasicFooter,
     Builder,
@@ -56,17 +61,14 @@ export default {
 
 <template>
 	<MetaTags :seo="seo" />
-
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mx-auto mt-[67px] max-w-screen-xl py-10 md:flex md:flex-row md:py-10">
-				<div class="max-w-4xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full">
-					<div>
+
+  <BasicPageWrapper>
+    <BasicPageContainer>
       <div class="space-y-5 md:space-y-10">
         <div class="space-y-3">
-								<EventItemBreadcrumbs :breadcrumbs="breadcrumbs" :event-title="event.data.title" />
           <BackButton link="client.event.index" title="Все мероприятия" />
+          <EventItemBreadcrumbs :breadcrumbs="breadcrumbs" :event-title="event.data.title" />
           <BasicTitle :header="event.data.title" />
         </div>
 
@@ -99,14 +101,11 @@ export default {
           <Builder :blocks="event.data.content"/>
         </div>
       </div>
-						<!-- End Content -->
-					</div>
-				</div>
 
-			</div>
-		</main>
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
 </template>
 
 <style>

resources/js/Pages/Client/Faculties/Index.vue

@@ -6,10 +6,30 @@ import FacultyListBreadcrumbs from "@/componentss/features/faculties/components/
 import BasicFooter from "@/footers/BasicFooter.vue";
 import BasicTitle from "@/componentss/ui/titles/BasicTitle.vue";
 import FacultyListTitle from "@/componentss/features/faculties/components/FacultyListTitle.vue";
+import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import EventArchiveListBreadcrumbs from "@/componentss/features/events/components/EventArchiveListBreadcrumbs.vue";
+import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
+import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
+import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
 
 export default {
   name: "Index",
   components: {
+    SortingByFilter,
+    EventListSearch,
+    BasicListFilter,
+    IsOnlineFilter,
+    BasicPagination,
+    EventArchiveListBreadcrumbs,
+    BasicListBadge,
+    BasicPageWrapper,
+    BasicPageContainer,
+    CategoryFilter,
     FacultyListTitle,
     BasicTitle,
     BasicFooter,
@@ -43,20 +63,10 @@ export default {
 <template>
 	<MetaTags :seo="seo" />
 
-	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
+	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mx-auto mt-[67px] max-w-screen-xl py-10 md:flex md:flex-row md:py-10">
-				<div class="px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-xl">
-					<div>
-						<!-- Avatar Media -->
-						<!-- End Avatar Media -->
-						<!-- Content -->
-						<div class="space-y-5 md:space-y-4">
-							<div class="space-y-5 md:space-y-4">
-								<!-- Card Section -->
-								<div class="max-w-[85rem] px-0 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+  <BasicPageWrapper>
+    <BasicPageContainer>
       <FacultyListTitle
           bottom-text="Информация о наших факультетах и кафедрах"
           header="Факультеты и кафедры" />
@@ -85,18 +95,10 @@ export default {
         </template>
 
       </div>
-									<!-- End Grid -->
-								</div>
-								<!-- End Card Section -->
-							</div>
-						</div>
-						<!-- End Content -->
-					</div>
-				</div>
-			</div>
-		</main>
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
 </template>
 
 <style scoped></style>

resources/js/Pages/Client/Faculties/Show.vue

@@ -1,14 +1,12 @@
 <template>
 	<MetaTags :seo="seo" />
 
-
-	<div class="flex flex-col h-screen justify-between">
   <MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
+  <BasicPageWrapper>
     <div class="relative mx-auto mb-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
 
-			<div class="w-full h-[67px] pointer-events-none fixed" id="visor"></div>
-
+      <NavigateVisor />
 
       <div class="sticky top-[110px] hidden h-[calc(100vh-110px)] max-w-[20%] md:flex md:shrink-0 md:flex-col md:justify-between">
         <nav v-if="faculties"
@@ -129,9 +127,9 @@
         </div>
       </article>
     </div>
-
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
 
 
 
@@ -150,6 +148,17 @@ import BasicFooter from "@/footers/BasicFooter.vue";
 import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
 import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
 import FacultyItemBreadcrumbs from "@/componentss/features/faculties/components/FacultyItemBreadcrumbs.vue";
+import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import EventArchiveListBreadcrumbs from "@/componentss/features/events/components/EventArchiveListBreadcrumbs.vue";
+import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
+import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
+import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
+import NavigateVisor from "@/componentss/shared/visor/NavigateVisor.vue";
 
 
 export default {
@@ -174,6 +183,17 @@ export default {
 	},
 
 	components: {
+    NavigateVisor,
+    SortingByFilter,
+    EventListSearch,
+    BasicListFilter,
+    IsOnlineFilter,
+    BasicPagination,
+    EventArchiveListBreadcrumbs,
+    BasicListBadge,
+    BasicPageWrapper,
+    BasicPageContainer,
+    CategoryFilter,
     MetaTags,
     Builder,
     BasicFooter,

resources/js/Pages/Client/Persons/Show.vue

@@ -1,16 +1,14 @@
 <template>
 	<MetaTags :seo="seo" />
 
+  <MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
-	<div class="flex flex-col h-screen">
-		<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
 
+  <BasicPageWrapper>
     <main class="flex-grow">
       <div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
 
         <NavigateLinks :header-navs="headerNavs" />
-
-
         <section class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
           <div class="w-full mx-auto sm:px-6 lg:px-8">
 
@@ -24,7 +22,10 @@
     </main>
 
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
+
+
 
 
 </template>
@@ -41,6 +42,16 @@ import NavigateLinks from "@/componentss/shared/navigate/NavigateLinks.vue";
 import PersonBreadcrumbs from "@/componentss/features/persons/components/PersonBreadcrumbs.vue";
 import BasicFooter from "@/footers/BasicFooter.vue";
 import InfoSection from "@/componentss/features/persons/components/sections/InfoSection.vue";
+import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import EventArchiveListBreadcrumbs from "@/componentss/features/events/components/EventArchiveListBreadcrumbs.vue";
+import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
+import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
+import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
 
 
 export default {
@@ -63,6 +74,16 @@ export default {
 	},
 
 	components: {
+    SortingByFilter,
+    EventListSearch,
+    BasicListFilter,
+    IsOnlineFilter,
+    BasicPagination,
+    EventArchiveListBreadcrumbs,
+    BasicListBadge,
+    BasicPageWrapper,
+    BasicPageContainer,
+    CategoryFilter,
     InfoSection,
     BasicFooter,
     NavigateLinks,

resources/js/Pages/Client/Posts/Index.vue

@@ -13,9 +13,16 @@ import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter
 import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
 import TagFilter from "@/componentss/shared/filter/filters/TagFilter.vue";
 import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import EventArchiveListBreadcrumbs from "@/componentss/features/events/components/EventArchiveListBreadcrumbs.vue";
+import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
+import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
+import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
 export default {
   name: "Index",
   components: {
+    EventListSearch, IsOnlineFilter, BasicPagination, EventArchiveListBreadcrumbs, BasicPageWrapper, BasicPageContainer,
     BasicListBadge,
     TagFilter,
     CategoryFilter,
@@ -73,10 +80,9 @@ export default {
 	<MetaTags :seo="seo" />
 
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mx-auto mt-[67px] max-w-screen-xl py-10 md:flex md:flex-row md:py-10">
-				<div class="pt-6 px-4 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-lg">
+
+  <BasicPageWrapper>
+    <BasicPageContainer>
       <div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
         <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Новости НТГСПИ</h2>
         <p class="mt-1 text-gray-600 dark:text-neutral-400">Узнайте последние новости любимого вуза</p>
@@ -109,36 +115,16 @@ export default {
                     <PostListItem :post="post" />
                   </template>
                 </div>
-										<div class="mt-10 flex items-center justify-center">
-											<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
-												<Link as="button" :href="posts.links.prev" :disabled="$props.posts.links.prev === null"
-															class="relative inline-flex items-center gap-1 rounded-l-md border border-gray-300 bg-white px-3 py-2 pr-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
-													<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-															 stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
-														<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path>
-													</svg>
-													<span>Предыдущая</span></Link>
-												<Link as="button" :href="posts.links.next" :disabled="$props.posts.links.next === null"
-															class="relative inline-flex items-center gap-1 rounded-r-md border border-gray-300 bg-white px-3 py-2 pl-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300">
-													<span>Следующая</span>
-													<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-															 stroke="currentColor" aria-hidden="true" data-slot="icon" class="h-3 w-3">
-														<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
-													</svg>
-												</Link>
-											</nav>
-										</div>
+                <BasicPagination :links="posts.links" />
               </div>
             </div>
           </div>
         </div>
         <!-- End Content -->
       </div>
-				</div>
-			</div>
-		</main>
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
 </template>
 
 <style scoped></style>

resources/js/Pages/Client/Posts/Show.vue

@@ -11,11 +11,31 @@ import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
 import BasicFooter from "@/footers/BasicFooter.vue";
 import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
 import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
+import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import EventArchiveListBreadcrumbs from "@/componentss/features/events/components/EventArchiveListBreadcrumbs.vue";
+import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
+import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
+import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
 
 
 export default {
 	name: "Show",
 	components: {
+    SortingByFilter,
+    EventListSearch,
+    BasicListFilter,
+    IsOnlineFilter,
+    BasicPagination,
+    EventArchiveListBreadcrumbs,
+    BasicListBadge,
+    BasicPageWrapper,
+    BasicPageContainer,
+    CategoryFilter,
     MetaTags,
     MainPageNavBar,
     BasicFooter,
@@ -64,16 +84,13 @@ export default {
 
 	<ScrollTimeline />
 
-	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
-				<div class="max-w-3xl lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full">
-					<div>
+	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
+  <BasicPageWrapper>
+    <BasicPageContainer breakpoint="md">
       <div class="space-y-5 md:space-y-10">
         <div class="space-y-3">
-								<PostItemBreadcrumbs :breadcrumbs="breadcrumbs" :post-title="post.data.title" />
           <BackButton link="client.post.index" title="Все новости"/>
+          <PostItemBreadcrumbs :breadcrumbs="breadcrumbs" :post-title="post.data.title" />
           <BasicTitle :header="post.data.title"/>
         </div>
 
@@ -99,15 +116,9 @@ export default {
           </a>
         </div>
       </div>
-
-					</div>
-				</div>
-
-
-			</div>
-		</main>
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
 </template>
 
 <style>

resources/js/Pages/Client/Programs/Index.vue

@@ -10,10 +10,15 @@ import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
 import ProgramListBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramListBreadcrumbs.vue";
 import BasicFooter from "@/footers/BasicFooter.vue";
 import ProgramLevelEduFilter from "@/componentss/features/educationalPrograms/components/ProgramLevelEduFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import AcademicJournalsListBreadcrumbs
+  from "@/componentss/features/academicJournals/components/AcademicJournalsListBreadcrumbs.vue.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
 
 export default {
   name: "Index",
   components: {
+    BasicPageWrapper, AcademicJournalsListBreadcrumbs, BasicPageContainer,
     ProgramLevelEduFilter,
     FormEducationalFilter,
     DirectionFilter,
@@ -86,12 +91,8 @@ export default {
 
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
-
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:py-10">
-				<div class="">
-					<div class="">
+  <BasicPageWrapper>
+    <BasicPageContainer>
       <div class="space-y-5 md:space-y-4">
         <ProgramTitle class="text-center" :header="this.campaignName" />
         <div class="space-y-5 md:space-y-4 mx-auto max-w-3xl w-full">
@@ -133,13 +134,10 @@ export default {
           </div>
         </div>
       </div>
-					</div>
-				</div>
-			</div>
-		</main>
-
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
 
 </template>
 

resources/js/Pages/Client/Programs/Show.vue

@@ -11,6 +11,8 @@ import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/c
 import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
 import BudgetEducation from "@/Enum/BudgetEducation.js";
 import TypeExam from "@/Enum/TypeExam.js";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
 
 
 export default {
@@ -47,6 +49,8 @@ export default {
     }
   },
   components: {
+    BasicPageContainer,
+    BasicPageWrapper,
     ProgramTitle,
     BasicTitle,
     MetaTags,
@@ -76,25 +80,13 @@ export default {
 
 	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
-	<div class="flex flex-col h-screen">
-		<main class="flex-grow">
-			<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
-				<div class="px-0 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-2xl">
-					<div>
-
-						<div class="space-y-5 md:space-y-4">
-							<div class="space-y-5 md:space-y-4">
-
-								<div>
-									<div class="container mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
+  <BasicPageWrapper>
+    <BasicPageContainer>
       <div class="space-y-3">
         <BackButton link="client.program.index" title="Все программы" />
         <ProgramItemBreadcrumbs :program-title="program.data.name" />
         <ProgramTitle class="text-center" :header="program.data.name" />
-
       </div>
-
-										<!-- Icon Blocks -->
       <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
         <div class="grid sm:grid-cols-2 lg:grid-cols-3 items-start gap-12">
           <!-- Icon Block -->
@@ -153,7 +145,6 @@ export default {
           <!-- End Icon Block -->
         </div>
       </div>
-
       <div>
         <div class="hs-accordion-group">
           <div class="hs-accordion bg-white border -mt-px first:rounded-t-lg last:rounded-b-lg" id="hs-bordered-heading-one">
@@ -225,20 +216,10 @@ export default {
           </div>
         </div>
       </div>
-										<!-- End Icon Blocks -->
-
-									</div>
-								</div>
-							</div>
-						</div>
-						<!-- End Content -->
-					</div>
-				</div>
-			</div>
-		</main>
-
+    </BasicPageContainer>
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
 
 </template>
 

resources/js/Pages/Page.vue

@@ -1,10 +1,10 @@
 <template>
 	<MetaTags :seo="seo" />
 
-	<div class="flex flex-col h-screen justify-between">
+
   <MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
-
+  <BasicPageWrapper>
     <div class="relative mx-auto mb-auto mt-[67px] max-w-screen-xl w-full px-4 py-10 md:flex md:flex-row md:py-10">
       <PageSubSectionLinks v-if="!settings?.hide_page_sub_section_links" :sub-section-pages="subSectionPages" :current-section="page.data.section"/>
       <NavigateLinks v-if="!settings?.hide_page_navigate_links"  :header-navs="headerNavs"/>
@@ -20,7 +20,8 @@
     </div>
 
     <BasicFooter />
-	</div>
+  </BasicPageWrapper>
+
 
 
 </template>
@@ -37,6 +38,16 @@ import BasicTitle from "@/componentss/ui/titles/BasicTitle.vue";
 import PageSubSectionLinks from "@/componentss/features/pages/components/PageSubSectionLinks.vue";
 import PageBreadcrumbs from "@/componentss/features/pages/components/PageBreadcrumbs.vue";
 import NavigateLinks from "@/componentss/shared/navigate/NavigateLinks.vue";
+import CategoryFilter from "@/componentss/shared/filter/filters/CategoryFilter.vue";
+import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
+import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
+import BasicListBadge from "@/componentss/shared/badge/BasicListBadge.vue";
+import EventArchiveListBreadcrumbs from "@/componentss/features/events/components/EventArchiveListBreadcrumbs.vue";
+import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
+import IsOnlineFilter from "@/componentss/shared/filter/filters/IsOnlineFilter.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import EventListSearch from "@/componentss/features/events/components/EventListSearch.vue";
+import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter.vue";
 
 
 export default {
@@ -70,6 +81,16 @@ export default {
 		}
 	},
 	components: {
+    SortingByFilter,
+    EventListSearch,
+    BasicListFilter,
+    IsOnlineFilter,
+    BasicPagination,
+    EventArchiveListBreadcrumbs,
+    BasicListBadge,
+    BasicPageWrapper,
+    BasicPageContainer,
+    CategoryFilter,
     NavigateLinks,
     BasicTitle,
     Builder,

resources/js/componentss/shared/builder/pageBuilder/blocks/HeadingBlock.vue

@@ -1,6 +1,6 @@
 <template>
 	<div >
-		<h2 :id="generateSlug(block.data.content)" class="font-bold text-xl">{{ block.data.content }}</h2>
+		<h2 :id="'anchor-link-' + generateSlug(block.data.content)" class="font-bold text-xl">{{ block.data.content }}</h2>
 	</div>
 </template>
 

resources/js/componentss/shared/navigate/NavigateLinks.vue

@@ -1,14 +1,13 @@
 <template>
-	<div class="w-full h-[67px] fixed pointer-events-none bvi-no-styles" id="visor"></div>
-
+  <NavigateVisor />
 	<nav class="order-last hidden w-56 shrink-0 lg:block">
 		<div v-if="headerNavs.length > 0" class="sticky top-[100px] h-[calc(100vh-121px)]">
 			<div class="text-gray-1000 mb-2 text-md font-medium">На этой странице</div>
 			<ul class="max-h-[70vh] space-y-1.5 overflow-hidden py-2 text-sm">
 				<li class="anchor-li" v-for="pageNav in headerNavs" :key="pageNav.id">
-					<a :class="{ 'translate-x-2 text-primary' : currentNavSection === generateSlug(pageNav.text), 'bg-transperant text-gray-600 hover:text-gray-900' : currentNavSection !== generateSlug(pageNav.text) }"
+					<a :class="{ 'translate-x-2 text-primary' : currentNavSection === 'anchor-link-' + generateSlug(pageNav.text), 'bg-transperant text-gray-600 hover:text-gray-900' : currentNavSection !== 'anchor-link-' + generateSlug(pageNav.text) }"
 						 class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
-						 :href="'#' + generateSlug(pageNav.text)">{{ pageNav.text }}</a>
+						 :href="'#anchor-link-' + generateSlug(pageNav.text)">{{ pageNav.text }}</a>
 				</li>
 				<transition name="fade">
 					<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
@@ -28,10 +27,11 @@
 <script>
 import { Link } from "@inertiajs/vue3";
 import slugify from "slugify";
+import NavigateVisor from "@/componentss/shared/visor/NavigateVisor.vue";
 
 export default {
 	name: "NavigateLinks",
-	components: { Link },
+	components: {NavigateVisor, Link },
 	data() {
 		return {
 			currentNavSection: null,
@@ -39,14 +39,6 @@ export default {
 		};
 	},
 	methods: {
-		textLimit(text, symbols) {
-			if (text.length > symbols) {
-				let LimitedText;
-				LimitedText = text.substring(0, symbols);
-				return LimitedText + "...";
-			}
-			return text;
-		},
 		generateSlug(text) {
 			return slugify(text, {
 				lower: true,

resources/js/componentss/shared/visor/NavigateVisor.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+	name: "NavigateVisor"
+}
+</script>
+
+<template>
+  <div class="w-full h-[67px] pointer-events-none fixed" id="visor" />
+</template>
+
+<style scoped>
+
+
+
+</style>

resources/js/componentss/ui/templates/BasicPageContainer.vue

@@ -0,0 +1,27 @@
+<template>
+  <main class="flex-grow">
+    <div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
+      <div class="px-0 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-2xl">
+        <div>
+          <div :class="'max-w-screen-' + breakpoint"  class="container mx-auto xl:px-5">
+            <slot/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+
+export default {
+	name: "BasicPageContainer",
+  props: {
+    breakpoint: {
+      type: String,
+      default: "lg"
+    }
+  }
+}
+
+</script>

resources/js/componentss/ui/wrappers/BasicPageWrapper.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col h-screen">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import BasicFooter from "@/footers/BasicFooter.vue";
+import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
+import BackButton from "@/componentss/ui/buttons/BackButton.vue";
+import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
+import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramItemBreadcrumbs.vue";
+
+export default {
+	name: "BasicPageWrapper",
+}
+
+</script>