Files
moonwell-web/resources/js/Pages/Landing/Main.vue
T

66 lines
2.6 KiB
Vue

<script setup>
import { Head } from '@inertiajs/vue3';
import { computed, onBeforeUnmount, onMounted } from 'vue';
import About from './Components/About.vue';
import Background from './Components/Background.vue';
import Features from './Components/Features.vue';
import Footer from './Components/Footer.vue';
import Hero from './Components/Hero.vue';
import Join from './Components/Join.vue';
import Nav from './Components/Nav.vue';
import News from './Components/News.vue';
import Realm from './Components/Realm.vue';
import Tweaks from './Components/Tweaks.vue';
const props = defineProps({
realm: { type: Object, required: true },
playUrl: { type: String, required: true },
posts: { type: Array, default: () => [] },
tweaks: { type: Object, default: () => ({}) },
registerEndpoint: { type: String, required: true },
csrfToken: { type: String, required: true },
auth: { type: Object, default: () => ({}) },
flash: { type: Object, default: () => ({}) },
});
const pageTitle = computed(() => `${props.realm.server_name || 'MoonWell'} - Лунный Колодец`);
let revealObserver;
onMounted(() => {
document.documentElement.lang = 'ru';
revealObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
revealObserver.unobserve(entry.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
document.querySelectorAll('.reveal').forEach((el) => revealObserver.observe(el));
});
onBeforeUnmount(() => revealObserver?.disconnect());
</script>
<template>
<Head>
<title>{{ pageTitle }}</title>
<meta name="description" :content="realm.tagline || 'MoonWell - приватный сервер World of Warcraft 3.3.5a'" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
</Head>
<Background />
<Nav :auth="auth" :play-url="playUrl" :realm="realm" />
<Hero :play-url="playUrl" />
<Realm :realm="realm" />
<About />
<Features />
<Join :register-endpoint="registerEndpoint" :csrf-token="csrfToken" :auth="auth" :flash="flash" />
<News :posts="posts" />
<Footer :play-url="playUrl" />
<Tweaks :tweaks="tweaks" />
</template>