Neuaufbau des Repositories
This commit is contained in:
@@ -0,0 +1,205 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { onMounted, ref, onUnmounted } from 'vue';
|
||||
|
||||
import BackgroundStars from '@/components/Welcome/BackgroundStars.vue';
|
||||
import BonusSection from '@/components/Welcome/BonusSection.vue';
|
||||
import HeroCanvas from '@/components/Welcome/HeroCanvas.vue';
|
||||
import LeaderboardBanner from '@/components/Welcome/LeaderboardBanner.vue';
|
||||
import SocialSection from '@/components/Welcome/SocialSection.vue';
|
||||
|
||||
defineProps<{
|
||||
canRegister?: boolean;
|
||||
bonuses?: any[];
|
||||
}>();
|
||||
|
||||
const isScrolled = ref(false);
|
||||
const mobileMenuOpen = ref(false);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
isScrolled.value = window.scrollY > 80;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
mobileMenuOpen.value = !mobileMenuOpen.value;
|
||||
};
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
mobileMenuOpen.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Welcome">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
<div
|
||||
class="bratanbonus-theme relative min-h-screen overflow-x-hidden scroll-smooth font-sans text-white"
|
||||
>
|
||||
<BackgroundStars />
|
||||
|
||||
<nav
|
||||
:class="[
|
||||
'fixed z-100 flex w-full items-center justify-between border-b border-transparent px-6 py-5 shadow-lg transition-all duration-400 ease-in-out md:px-8',
|
||||
isScrolled || mobileMenuOpen
|
||||
? 'border-white/10 bg-[#0f172a]/80 pt-3 pb-3 backdrop-blur-md hover:bg-gradient-to-r hover:from-purple-500 hover:to-blue-500 hover:backdrop-blur-none'
|
||||
: 'bg-gradient-to-r from-purple-500 to-blue-500',
|
||||
]"
|
||||
>
|
||||
<div class="z-50 text-xl font-black tracking-tighter uppercase italic md:text-2xl">
|
||||
<Link href="/" @click="closeMobileMenu">BRATANBONUS.NET</Link>
|
||||
</div>
|
||||
|
||||
<!-- Hamburger Button -->
|
||||
<button
|
||||
class="z-50 flex items-center justify-center p-2 text-white focus:outline-none md:hidden"
|
||||
@click="toggleMobileMenu"
|
||||
>
|
||||
<i :class="mobileMenuOpen ? 'fa-solid fa-xmark text-2xl' : 'fa-solid fa-bars text-2xl'"></i>
|
||||
</button>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div
|
||||
class="hidden items-center gap-8 text-xs font-bold tracking-widest uppercase md:flex lg:gap-10"
|
||||
>
|
||||
<a href="#bonuses" class="transition hover:opacity-70"
|
||||
>Bonus Deals</a
|
||||
>
|
||||
<a href="#find-me" class="transition hover:opacity-70"
|
||||
>Community</a
|
||||
>
|
||||
<Link href="/leaderboard" class="transition hover:opacity-70 text-purple-200 hover:text-white"
|
||||
>Leaderboard <i class="fa-solid fa-trophy ml-1"></i></Link
|
||||
>
|
||||
|
||||
<template v-if="!$page.props.auth?.user">
|
||||
<Link
|
||||
href="/login"
|
||||
class="rounded-full bg-white px-6 py-2 text-black transition hover:scale-105"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
v-if="canRegister"
|
||||
href="/register"
|
||||
class="rounded-full border border-white/30 bg-white/20 px-6 py-2 text-white transition hover:scale-105 hover:bg-white hover:text-black"
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div
|
||||
v-if="mobileMenuOpen"
|
||||
class="absolute left-0 top-0 flex w-full flex-col items-center justify-center gap-8 border-b border-white/10 bg-[#0f172a]/95 pb-8 pt-24 backdrop-blur-xl transition-all duration-300 md:hidden"
|
||||
>
|
||||
<a href="#bonuses" class="text-lg font-bold tracking-widest uppercase transition hover:opacity-70" @click="closeMobileMenu"
|
||||
>Bonus Deals</a
|
||||
>
|
||||
<a href="#find-me" class="text-lg font-bold tracking-widest uppercase transition hover:opacity-70" @click="closeMobileMenu"
|
||||
>Community</a
|
||||
>
|
||||
<Link href="/leaderboard" class="text-lg font-bold tracking-widest text-purple-300 uppercase transition hover:text-white" @click="closeMobileMenu"
|
||||
>Leaderboard <i class="fa-solid fa-trophy ml-1"></i></Link
|
||||
>
|
||||
|
||||
<div class="mt-4 flex w-full flex-col gap-4 px-12" v-if="!$page.props.auth?.user">
|
||||
<Link
|
||||
href="/login"
|
||||
class="w-full rounded-full bg-white px-6 py-3 text-center font-bold tracking-wider text-black uppercase transition hover:scale-105"
|
||||
@click="closeMobileMenu"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
v-if="canRegister"
|
||||
href="/register"
|
||||
class="w-full rounded-full border border-white/30 bg-white/20 px-6 py-3 text-center font-bold tracking-wider text-white uppercase transition hover:scale-105 hover:bg-white hover:text-black"
|
||||
@click="closeMobileMenu"
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<HeroCanvas />
|
||||
|
||||
<LeaderboardBanner />
|
||||
|
||||
<div
|
||||
class="h-[1px] bg-gradient-to-r from-transparent via-purple-500/30 to-blue-500/30 to-transparent"
|
||||
></div>
|
||||
|
||||
<BonusSection :bonuses="bonuses" />
|
||||
|
||||
<div
|
||||
class="h-[1px] bg-gradient-to-r from-transparent via-purple-500/30 to-blue-500/30 to-transparent"
|
||||
></div>
|
||||
|
||||
<SocialSection />
|
||||
|
||||
<footer
|
||||
class="relative z-10 border-t border-white/5 bg-black/50 py-16 text-center"
|
||||
>
|
||||
<div class="container mx-auto px-6">
|
||||
<div
|
||||
class="mb-8 text-2xl font-black text-white italic opacity-60"
|
||||
>
|
||||
BRATANBONUS.NET
|
||||
</div>
|
||||
<div
|
||||
class="mb-10 flex flex-wrap justify-center gap-8 text-sm text-gray-500"
|
||||
>
|
||||
<Link
|
||||
href="/datenschutz"
|
||||
class="transition hover:text-white"
|
||||
>Datenschutz</Link
|
||||
>
|
||||
<Link href="/agb" class="transition hover:text-white"
|
||||
>AGB</Link
|
||||
>
|
||||
<Link href="/impressum" class="transition hover:text-white"
|
||||
>Impressum</Link
|
||||
>
|
||||
<Link
|
||||
href="/verantwortungsbewusstes-spielen"
|
||||
class="transition hover:text-white"
|
||||
>Verantwortungsbewusstes Spielen</Link
|
||||
>
|
||||
</div>
|
||||
<p class="mb-4 text-xs tracking-widest text-gray-700 uppercase">
|
||||
© 2026 | Alle Rechte vorbehalten
|
||||
</p>
|
||||
<p
|
||||
class="mx-auto max-w-lg rounded-xl border border-red-500/20 p-4 text-[10px] text-red-500/50"
|
||||
>
|
||||
Glücksspiel kann süchtig machen. Bitte spiele
|
||||
verantwortungsbewusst. Teilnahme erst ab 18 Jahren.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Base theme variables to override whatever tailwind might inherit */
|
||||
.bratanbonus-theme {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user