This commit is contained in:
f4ilji
2025-01-30 00:31:40 +05:00
parent bad611eb84
commit 3385dc5807
60 changed files with 1811 additions and 825 deletions
+10 -3
View File
@@ -106,8 +106,11 @@ export default {
<!-- Icon Block -->
<div class="text-center">
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="10" height="14" x="3" y="8" rx="2"/><path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4"/><path d="M8 18h.01"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
</svg>
</div>
<div class="mt-3">
<h3 class="text-lg font-semibold text-gray-800">Направление подготовки</h3>
<p class="mt-1 text-gray-600">{{ program.data.directionStudy.name }} {{ program.data.directionStudy.code }}</p>
@@ -118,7 +121,9 @@ export default {
<!-- Icon Block -->
<div class="text-center">
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
</svg>
</div>
<div class="mt-3">
<h3 class="text-lg font-semibold text-gray-800">Срок обучения</h3>
@@ -148,7 +153,9 @@ export default {
<!-- Icon Block -->
<div class="text-center">
<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
<svg class="flex-shrink-0 size-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
</div>
<div class="mt-3">
<h3 class="text-lg font-semibold text-gray-800">Количество мест на прием</h3>
+143 -162
View File
@@ -5,23 +5,34 @@ import { debounce } from "lodash";
import { Link } from "@inertiajs/vue3";
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
import ClientScheduleFilter from "@/Components/BuilderUi/Schedules/ClientScheduleFilter.vue";
export default {
name: "Index",
data() {
return {
searchInput: this.searchRequest,
favoriteGroups: JSON.parse(localStorage.getItem('favoriteGroups')) || [],
searchInput: this.filters.search_filter.value,
favoriteGroups: JSON.parse(localStorage.getItem('favoriteGroups')),
showFavorites: false,
loading: false,
};
},
components: {BaseIcon, MainPageNavBar, ClientFooterDown, MainNavbar, Link},
props: [
'educationalGroups',
'mainSections',
'searchRequest',
'navigation',
],
components: {ClientScheduleFilter, BaseIcon, MainPageNavBar, ClientFooterDown, MainNavbar, Link},
props: {
navigation: {
type: Object
},
filters: {
type: Object
},
forms_education: {
type: Object
},
schedulesByFaculty: {
type: Object
}
},
methods: {
search: debounce(function () {
this.$inertia.reload({
@@ -34,7 +45,7 @@ export default {
});
}, 300),
toggleFavorite(group) {
const index = this.favoriteGroups.findIndex(g => g.id === group.id);
const index = this.favoriteGroups.findIndex(g => g === group);
if (index === -1) {
this.favoriteGroups.push(group);
} else {
@@ -43,18 +54,65 @@ export default {
localStorage.setItem('favoriteGroups', JSON.stringify(this.favoriteGroups));
},
isFavorite(group) {
return this.favoriteGroups.some(g => g.id === group.id);
return this.favoriteGroups.some(g => g === group);
},
toggleShowFavorites() {
this.showFavorites = !this.showFavorites;
},
},
computed: {
filteredGroups() {
if (this.showFavorites) {
return this.educationalGroups.data.filter(group => this.favoriteGroups.some(g => g.id === group.id));
this.loading = true; // Включаем состояние загрузки
if (this.filters.favorite_filter.value === null) {
this.filterFavorite(() => {
this.loading = false; // Выключаем состояние загрузки после завершения
});
} else {
this.clearFilterFavorite(() => {
this.loading = false; // Выключаем состояние загрузки после завершения
});
}
return this.educationalGroups.data;
},
filterFavorite: debounce(function (callback) {
let url = new URL(window.location.href);
// Создаем массив для хранения всех ключей, которые нужно удалить
const keysToDelete = [];
// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
for (const [key] of url.searchParams) {
if (key.startsWith('favorite')) {
keysToDelete.push(key);
}
}
// Удаляем все ключи из массива
keysToDelete.forEach(key => url.searchParams.delete(key));
let newUrl = url.toString();
this.$inertia.visit(newUrl, {
method: 'get',
preserveState: true,
data: {
favorite: (this.favoriteGroups.length !== 0) ? this.favoriteGroups : "",
},
onFinish: callback, // Вызываем колбэк после завершения запроса
});
}, 500),
clearFilterFavorite(callback) {
let url = new URL(window.location.href);
// Создаем массив для хранения всех ключей, которые нужно удалить
const keysToDelete = [];
// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
for (const [key] of url.searchParams) {
if (key.startsWith('favorite')) {
keysToDelete.push(key);
}
}
// Удаляем все ключи из массива
keysToDelete.forEach(key => url.searchParams.delete(key));
let newUrl = url.toString();
this.$inertia.visit(newUrl, {
method: 'get',
preserveState: true,
onFinish: callback, // Вызываем колбэк после завершения запроса
});
},
},
};
@@ -69,14 +127,13 @@ export default {
<article class="w-full min-w-0 mt-4 px-1 md:px-6">
<div class="relative overflow-hidden">
<div class="max-w-[85rem] mx-auto sm:px-6 lg:px-8 py-10 sm:pb-12 sm:py-5">
<div class="text-center">
<h1 class="text-2xl sm:text-4xl font-bold text-gray-800 dark:text-gray-200">
<div class="">
<h1 class="text-2xl sm:text-4xl font-bold text-gray-800 text-center">
Расписание занятий
</h1>
<div class="text-center">
<p class="mt-3 text-gray-600 dark:text-gray-400">
<div class="">
<p class="mt-3 text-gray-600 text-center">
Просто введите название группы
</p>
</div>
@@ -100,7 +157,7 @@ export default {
id="hs-search-article-1"
class="py-2.5 px-4 block w-full border-transparent rounded-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100"
placeholder="Поиск"
:disabled="showFavorites"
:disabled="filters.favorite_filter.value !== null"
>
</div>
</div>
@@ -108,24 +165,20 @@ export default {
</form>
<div class="">
<div class="grid grid-cols-2 gap-3">
<button @click="toggleShowFavorites" type="button"
:class="showFavorites ? 'bg-primaryBlue text-white hover:bg-secondDarkBlue' : 'text-gray-700 hover:bg-gray-100'"
class="flex w-full py-2 px-4 items-center gap-x-2 text-xs font-medium rounded-lg border border-gray-200 focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<button
@click="toggleShowFavorites"
type="button"
:disabled="favoriteGroups.length === 0 || loading"
:class="
filters.favorite_filter.value !== null ? 'bg-primaryBlue text-white hover:bg-secondDarkBlue': 'text-gray-700 hover:bg-gray-100',
loading ? 'animate-pulse' : ''
"
class="flex w-full py-2 px-4 items-center gap-x-2 text-xs font-medium rounded-lg border border-gray-200 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
>
<BaseIcon name="heart" class="shrink-0 size-4"/>
<span>Избранные расписания</span>
</button>
<button type="button"
class="flex w-full py-2 px-4 items-center gap-x-2 text-xs font-medium rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-primaryBlue focus:text-white disabled:opacity-50 disabled:pointer-events-none">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<line x1="19" x2="19" y1="8" y2="14"/>
<line x1="22" x2="16" y1="11" y2="11"/>
</svg>
<span>Follow</span>
<span>Избранное</span>
</button>
<ClientScheduleFilter :forms_educational="this.forms_education" :form-edu_filter="this.filters.form_education_filter" />
</div>
</div>
</div>
@@ -133,131 +186,59 @@ export default {
</div>
</div>
<div class="mx-auto max-w-2xl hs-accordion-group grid grid-cols-1 lg:grid-cols-2 gap-3">
<div v-if="!showFavorites">
<div class="mx-auto max-w-2xl hs-accordion-group grid gap-3">
<div class="space-y-4">
<transition-group name="fade">
<template v-for="educationalGroup in filteredGroups" :key="educationalGroup.id">
<div
class="hs-accordion hs-accordion-active:border-gray-200 bg-white border-b dark:hs-accordion-active:border-gray-700 dark:bg-gray-800 dark:border-transparent"
id="hs-active-bordered-heading-one">
<div class="flex">
<button @click="toggleFavorite(educationalGroup)">
<transition name="heart" mode="out-in">
<BaseIcon
v-if="isFavorite(educationalGroup)"
name="heart_filled"
class="shrink-0 size-4 text-red-500"
key="filled"
/>
<BaseIcon
v-else
name="heart"
class="shrink-0 size-4"
key="outline"
/>
</transition>
<template v-for="(faculty, title) in schedulesByFaculty">
<div class="">
<h2 class="text-center text-gray-800 font-medium">{{ title }}</h2>
<hr class="mt-2 mb-4">
<template v-for="educationalGroup in faculty" :key="educationalGroup.data.id">
<div class="hs-accordion hs-accordion-active:border-gray-200 bg-white border border-transparent rounded-xl" id="hs-active-bordered-heading-one">
<div class="flex py-4 px-5 gap-x-3">
<button @click="toggleFavorite(educationalGroup.data.id)">
<transition name="heart" mode="out-in">
<BaseIcon
v-if="isFavorite(educationalGroup.data.id)"
name="heart_filled"
class="shrink-0 size-4 text-red-500"
key="filled"
/>
<BaseIcon
v-else
name="heart"
class="shrink-0 size-4"
key="outline"
/>
</transition>
</button>
</button>
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-basic-active-bordered-collapse-one">
<span class="flex items-center gap-x-2">{{ educationalGroup.data.title }}</span>
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
</button>
</div>
<button
class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:text-gray-400"
aria-controls="hs-basic-active-bordered-collapse-one">
<div class="flex items-center gap-x-2"><span>{{ educationalGroup.title }}</span> <span
class="font-light text-sm uppercase text-gray-500">{{ educationalGroup.faculty }}</span></div>
<svg class="hs-accordion-active:hidden block w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="M12 5v14"/>
</svg>
<svg class="hs-accordion-active:block hidden w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
</svg>
</button>
</div>
<div id="hs-basic-active-bordered-collapse-one"
class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
aria-labelledby="hs-active-bordered-heading-one">
<div class="pb-4 px-5 grid gap-3 grid-cols-1">
<template v-for="schedule in educationalGroup.schedules" :key="schedule.id">
<template v-for="file in schedule.file">
<a :href="'storage/' + file.path" target="_blank"
class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
{{ file.title }}
</a>
</template>
</template>
<div id="hs-basic-active-bordered-collapse-one" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-active-bordered-heading-one">
<div class="pb-4 px-5 grid gap-3 grid-cols-1">
<template v-for="schedule in educationalGroup.data.schedules" :key="schedule.id">
<template v-for="file in schedule.file">
<a :href="'storage/' + file.path" target="_blank"
class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
{{ file.title }}
</a>
</template>
</template>
</div>
</div>
</div>
</div>
</div>
</template>
</transition-group>
</div>
<div v-else>
<transition-group name="fade">
<template v-for="educationalGroup in favoriteGroups" :key="educationalGroup.id">
<div
class="hs-accordion hs-accordion-active:border-gray-200 bg-white border-b dark:hs-accordion-active:border-gray-700 dark:bg-gray-800 dark:border-transparent"
id="hs-active-bordered-heading-one">
<div class="flex">
<button @click="toggleFavorite(educationalGroup)">
<transition name="heart" mode="out-in">
<BaseIcon
v-if="isFavorite(educationalGroup)"
name="heart_filled"
class="shrink-0 size-4 text-red-500"
key="filled"
/>
<BaseIcon
v-else
name="heart"
class="shrink-0 size-4"
key="outline"
/>
</transition>
</button>
<button
class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:text-gray-400"
aria-controls="hs-basic-active-bordered-collapse-one">
<div class="flex items-center gap-x-2"><span>{{ educationalGroup.title }}</span> <span
class="font-light text-sm uppercase text-gray-500">{{ educationalGroup.faculty }}</span></div>
<svg class="hs-accordion-active:hidden block w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
<path d="M12 5v14"/>
</svg>
<svg class="hs-accordion-active:block hidden w-3.5 h-3.5"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/>
</svg>
</button>
</div>
<div id="hs-basic-active-bordered-collapse-one"
class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
aria-labelledby="hs-active-bordered-heading-one">
<div class="pb-4 px-5 grid gap-3 grid-cols-1">
<template v-for="schedule in educationalGroup.schedules" :key="schedule.id">
<template v-for="file in schedule.file">
<a :href="'storage/' + file.path" target="_blank"
class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
{{ file.title }}
</a>
</template>
</template>
</div>
</div>
</template>
</div>
</template>
</transition-group>
+9 -6
View File
@@ -4,12 +4,13 @@
<MainPageNavBar :sections="$page.props.navigation" :slider-ref="sliderRef" />
<ClientMainSlider @slider-mounted="setSliderRef" :slidersCarousel="sliders" />
<section class="max-w-screen-xl w-full mx-auto px-4 py-3 pb-10">
<h2 class="text-brand-primary my-6 md:mb-[50px] md:mt-[80px] text-2xl font-semibold tracking-tight text-black lg:text-[32px] lg:leading-tight">Последние новости</h2>
<div class="grid gap-10 pb-10 md:grid-cols-2 lg:gap-10 xl:grid-cols-3">
<template v-for="post in posts.data" :key="post.id">
<ClientPost :post="post" />
</template>
</div>
<h2 class="text-brand-primary my-6 md:mb-[50px] md:mt-[80px] text-2xl font-semibold tracking-tight text-black lg:text-[32px] lg:leading-tight bvi-show">Последние новости</h2>
<div class="grid gap-10 pb-10 md:grid-cols-2 lg:gap-10 xl:grid-cols-3 bvi-no-styles">
<template v-for="post in posts.data" :key="post.id">
<ClientPost :post="post" />
</template>
</div>
<div class="flex justify-center">
@@ -184,6 +185,7 @@ import BaseMetaHead from "@/Components/BaseComponents/BaseMetaHead.vue";
import PageResourceList from "@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue";
import AppHead from "@/Components/AppHead.vue";
import ContactSectionBlock from "@/Components/BaseComponents/BaseBuilderUi/Blocks/Contacts/ContactSectionBlock.vue";
import Cookies from "js-cookie";
@@ -238,6 +240,7 @@ export default {
},
methods: {
Cookies,
setSliderRef(ref) {
this.sliderRef = ref;
},
+1 -1
View File
@@ -5,7 +5,7 @@
</Head>
<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
<div class="w-full h-[67px] fixed pointer-events-none" id="visor"></div>
<div class="w-full h-[67px] fixed pointer-events-none bvi-no-styles" id="visor"></div>
<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">