Initialer Laravel Commit für BetiX
This commit is contained in:
258
resources/js/components/ui/Footer.vue
Normal file
258
resources/js/components/ui/Footer.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="main-footer">
|
||||
<div class="bg-grid"></div>
|
||||
<div class="footer-content">
|
||||
<div class="footer-top">
|
||||
<div class="footer-section about">
|
||||
<h3 class="footer-title">Beti<span class="highlight">X</span></h3>
|
||||
<p>The ultimate crypto gaming protocol. Experience fair play, instant withdrawals, and exclusive rewards. Join the revolution of decentralized gambling.</p>
|
||||
</div>
|
||||
<div class="footer-section links">
|
||||
<h3 class="footer-title">Quick Links</h3>
|
||||
<Link href="/vip-levels">VIP Club</Link>
|
||||
<Link href="/bonuses">Promotions</Link>
|
||||
<Link href="/guilds">Guilds</Link>
|
||||
<Link href="/trophy">Trophy Room</Link>
|
||||
</div>
|
||||
<div class="footer-section links">
|
||||
<h3 class="footer-title">Help & Support</h3>
|
||||
<Link href="/faq">Help Center</Link>
|
||||
<Link href="/self-exclusion">Responsible Gaming</Link>
|
||||
<Link href="/legal/aml">Fairness & AML</Link>
|
||||
<Link href="/legal/disputes">Disputes</Link>
|
||||
</div>
|
||||
<div class="footer-section links">
|
||||
<h3 class="footer-title">Legal</h3>
|
||||
<Link href="/legal/terms">{{ $t('footer.legal.terms') }}</Link>
|
||||
<Link href="/legal/cookies">{{ $t('footer.legal.cookies') }}</Link>
|
||||
<Link href="/legal/privacy">{{ $t('footer.legal.privacy') }}</Link>
|
||||
<Link href="/legal/bonus-policy">{{ $t('footer.legal.bonusPolicy') }}</Link>
|
||||
<Link href="/legal/disputes">{{ $t('footer.legal.disputes') }}</Link>
|
||||
<Link href="/legal/responsible-gaming">{{ $t('footer.legal.responsible') }}</Link>
|
||||
<Link href="/legal/aml">{{ $t('footer.legal.aml') }}</Link>
|
||||
<Link href="/legal/risk-warnings">{{ $t('footer.legal.risks') }}</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-middle">
|
||||
<h3 class="footer-title text-center">Our Partners & Providers</h3>
|
||||
<div class="partner-logos">
|
||||
<div class="logo-item">Pragmatic Play</div>
|
||||
<div class="logo-item">Nolimit City</div>
|
||||
<div class="logo-item">Hacksaw</div>
|
||||
<div class="logo-item">Push Gaming</div>
|
||||
<div class="logo-item">Evolution</div>
|
||||
<div class="logo-item">Play'n GO</div>
|
||||
</div>
|
||||
<div class="crypto-logos">
|
||||
<span class="crypto-icon">₿</span>
|
||||
<span class="crypto-icon">Ξ</span>
|
||||
<span class="crypto-icon">Ł</span>
|
||||
<span class="crypto-icon">₮</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<div class="licenses">
|
||||
<div class="license-badge">18+</div>
|
||||
<div class="license-badge">GC</div>
|
||||
<div class="license-badge">RNG Certified</div>
|
||||
<div class="license-text">
|
||||
Betix.io is operated by Betix Group N.V., registered under No. 123456, Curacao. Licensed and regulated by the Government of Curacao.
|
||||
<br>Gambling can be addictive. Please play responsibly. <a href="#" class="text-link">BeGambleAware.org</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© {{ new Date().getFullYear() }} Betix Protocol. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main-footer {
|
||||
background: #050505;
|
||||
border-top: 1px solid #151515;
|
||||
padding: 60px 30px 30px;
|
||||
margin-top: 80px;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
gap: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.highlight { color: #ff007a; }
|
||||
|
||||
.footer-section p {
|
||||
line-height: 1.6;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
display: block;
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.footer-section a:hover {
|
||||
color: #00f2ff;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.footer-middle {
|
||||
border-top: 1px solid #151515;
|
||||
border-bottom: 1px solid #151515;
|
||||
padding: 40px 0;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.partner-logos {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logo-item {
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.logo-item:hover {
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
text-shadow: 0 0 10px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.crypto-logos {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.crypto-icon {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.crypto-icon:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
text-shadow: 0 0 10px #fff;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.licenses {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.license-badge {
|
||||
display: inline-block;
|
||||
border: 1px solid #333;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
color: #666;
|
||||
margin: 0 5px;
|
||||
transition: all 0.3s;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.license-badge:hover {
|
||||
border-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.license-text {
|
||||
font-size: 11px;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: #888;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 11px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.footer-top {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.footer-top {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-section p {
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user