Dolo/bratanbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit
linter / quality (push) Has been cancelled
Details
tests / ci (8.3) (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Kevin Geiger
2026-04-09 19:53:31 +02:00
commit c178fab470
307 changed files with 30669 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Welcome/SocialSection.vue
+200
View File
@@ -0,0 +1,200 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
const isTwitchLive = ref(false);
const isKickLive = ref(false);
const checkLiveStatus = async () => {
try {
const { data } = await axios.get('/api/live-status');
isTwitchLive.value = data.twitch;
isKickLive.value = data.kick;
} catch (e) {
console.error('Status-Check fehlgeschlagen', e);
}
};
const trackSocial = async (platform: string) => {
try {
await axios.post('/api/track-social', { platform });
} catch (e) {
console.error('Tracking failed', e);
}
};
onMounted(() => {
checkLiveStatus();
// Alle 5 Minuten im Hintergrund aktualisieren
setInterval(checkLiveStatus, 300000);
});
</script>
<template>
<section
id="find-me"
class="social-section relative z-30 bg-gray-950/20 py-32"
>
<div class="container mx-auto px-6">
<h2
class="mb-24 text-center text-5xl font-black tracking-tighter text-white uppercase italic"
>
Join the <span class="text-purple-500">Squad</span>
</h2>
<div
class="mx-auto grid max-w-7xl grid-cols-1 gap-8 md:grid-cols-3"
>
<a
href="https://www.twitch.tv/bratander1ste"
target="_blank"
@click="trackSocial('twitch')"
class="social-card group twitch flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#9146FF] hover:bg-white/10"
:class="{ 'live-active-twitch': isTwitchLive }"
>
<div v-if="isTwitchLive" class="live-indicator">
<span class="pulse-dot"></span> LIVE
</div>
<i
class="fab fa-twitch text-6xl text-[#9146FF] drop-shadow-[0_0_15px_rgba(145,70,255,0.4)] transition-transform duration-500 group-hover:scale-110"
></i>
<div class="text-center">
<h4
class="mb-2 text-2xl font-black tracking-tight text-white"
>
TWITCH
</h4>
<p class="text-sm font-medium text-gray-400">
Action jeden Abend live
</p>
</div>
</a>
<a
href="#"
@click="trackSocial('instagram')"
class="social-card group instagram flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#E1306C] hover:bg-white/10"
>
<i
class="fab fa-instagram text-6xl text-pink-500 drop-shadow-[0_0_15px_rgba(236,72,153,0.4)] transition-transform duration-500 group-hover:scale-110"
></i>
<div class="text-center">
<h4
class="mb-2 text-2xl font-black tracking-tight text-white"
>
INSTAGRAM
</h4>
<p class="text-sm font-medium text-gray-400">
News & Giveaways
</p>
</div>
</a>
<a
href="https://kick.com/Bratander1ste"
target="_blank"
@click="trackSocial('kick')"
class="social-card group kick flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#53FC18] hover:bg-white/10"
:class="{ 'live-active-kick': isKickLive }"
>
<div v-if="isKickLive" class="live-indicator">
<span class="pulse-dot"></span> LIVE
</div>
<i
class="fas fa-bolt text-6xl text-[#53FC18] drop-shadow-[0_0_15px_rgba(83,252,24,0.4)] transition-transform duration-500 group-hover:scale-110"
></i>
<div class="text-center">
<h4
class="mb-2 text-2xl font-black tracking-tight text-[#53FC18]"
>
KICK
</h4>
<p class="text-sm font-medium text-gray-400">
The home of high stakes
</p>
</div>
</a>
</div>
</div>
</section>
</template>
<style scoped>
.social-section {
perspective: 2000px;
}
.social-card {
transform-style: preserve-3d;
position: relative;
}
/* Initiale 3D Lage */
.social-card.twitch {
transform: rotateY(-10deg) rotateX(5deg);
}
.social-card.kick {
transform: rotateY(10deg) rotateX(5deg);
}
.social-card:hover {
transform: rotateY(0deg) rotateX(0deg) translateZ(20px) !important;
}
/* LIVE INDICATOR */
.live-indicator {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 0, 0, 0.15);
border: 1px solid #ff0000;
color: #ff4d4d;
padding: 4px 12px;
border-radius: 99px;
font-size: 11px;
font-weight: 900;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
z-index: 50;
}
.pulse-dot {
width: 8px;
height: 8px;
background: #ff0000;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 1;
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}
70% {
transform: scale(1);
opacity: 0.8;
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
}
100% {
transform: scale(0.9);
opacity: 1;
}
}
/* LIVE HIGHLIGHTS */
.live-active-twitch {
border-color: rgba(145, 70, 255, 0.8) !important;
box-shadow: 0 0 40px rgba(145, 70, 255, 0.2);
background: rgba(145, 70, 255, 0.05) !important;
}
.live-active-kick {
border-color: rgba(83, 252, 24, 0.8) !important;
box-shadow: 0 0 40px rgba(83, 252, 24, 0.2);
background: rgba(83, 252, 24, 0.05) !important;
}
</style>