136 lines
6.6 KiB
Vue
136 lines
6.6 KiB
Vue
<script setup lang="ts">
|
||
import { getWelcomeMessage } from '@/api/docs';
|
||
import { Button } from '@/components/ui/button'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { onMounted, ref } from 'vue';
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
|
||
const user = useUserStore();
|
||
|
||
function goToApplication() {
|
||
router.push('/join') // change to your form route
|
||
}
|
||
|
||
onMounted(async () => {
|
||
if (user.state == 'member') {
|
||
let policy = await getWelcomeMessage() as any;
|
||
welcomeRef.value.innerHTML = policy;
|
||
}
|
||
})
|
||
|
||
const welcomeRef = ref<HTMLElement>(null);
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<div v-if="user.state == 'member'" class="mt-10">
|
||
<div ref="welcomeRef" class="bookstack-container">
|
||
<!-- bookstack -->
|
||
</div>
|
||
</div>
|
||
<div v-else class="text-foreground px-6 py-12 selection:bg-primary/10">
|
||
<div class="max-w-5xl mx-auto space-y-8">
|
||
|
||
<header class="space-y-4">
|
||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||
<div>
|
||
<h1 class="text-4xl font-semibold tracking-tight">17th Ranger Battalion</h1>
|
||
</div>
|
||
</div>
|
||
<div class="h-px bg-border w-full"></div>
|
||
</header>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||
|
||
<div class="lg:col-span-7 space-y-6">
|
||
<div class="space-y-2">
|
||
<h2 class="text-sm font-medium uppercase tracking-wider text-primary">Unit Philosophy</h2>
|
||
<p class="text-lg leading-relaxed font-normal">
|
||
The 17th RBN emphasizes high-skill gameplay through real-world tactics, stripped of
|
||
traditional military formalities. We prioritize effective coordination over enforced
|
||
etiquette.
|
||
</p>
|
||
</div>
|
||
|
||
<p class="text-muted-foreground leading-relaxed">
|
||
Our "Real Life First" mindset ensures participation remains a hobby, not a second job. With
|
||
a consistent roster of 40–50 members for Saturday operations, we focus on effective
|
||
coordination and mission success without the requirement of "Yes sir, no sir" protocols.
|
||
</p>
|
||
|
||
<div class="flex flex-wrap items-center gap-6 pt-4">
|
||
<Button size="lg" @click="goToApplication" class="font-medium">
|
||
Begin Application
|
||
</Button>
|
||
<div class="flex flex-col">
|
||
<span class="text-xs uppercase tracking-tighter text-muted-foreground">Age
|
||
Requirement</span>
|
||
<span class="text-sm font-medium">18+</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lg:col-span-5 space-y-8">
|
||
<section class="space-y-3">
|
||
<h3 class="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
|
||
Operational Schedule</h3>
|
||
<div class="rounded-lg border bg-card p-4 shadow-sm">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-sm font-medium">Main Operation</span>
|
||
<span class="text-sm font-mono text-primary">Sat 19:00 CST</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="space-y-4">
|
||
<h3 class="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
|
||
Force Structure
|
||
</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start gap-4">
|
||
<span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span>
|
||
<div class="space-y-1">
|
||
<p class="text-sm font-medium leading-none">Alpha Company</p>
|
||
<p class="text-[13px] text-muted-foreground leading-relaxed">
|
||
Rifleman, Medic, CLS, Anti-Tank, RTO, Leadership
|
||
</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="flex items-start gap-4">
|
||
<span class="h-1.5 w-1.5 rounded-full bg-primary mt-2 shrink-0"></span>
|
||
<div class="space-y-1">
|
||
<p class="text-sm font-medium leading-none">Echo Company</p>
|
||
<p class="text-[13px] text-muted-foreground leading-relaxed">
|
||
Logistics, CAS Pilot, Armor, Artillery, JTAC, Forward Observer
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<p class="text-[12px] text-muted-foreground/70 border-t pt-2 border-border">
|
||
Roles are fluid; specialization or weekly rotation is supported.
|
||
</p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="space-y-4">
|
||
<div class="relative rounded-xl border bg-card shadow-sm overflow-hidden">
|
||
<div class="aspect-video">
|
||
<iframe class="w-full h-full"
|
||
src="https://www.youtube.com/embed/61L397HwmrU?si=oY9qf6vFv6hXo6Fk&controls=1&mute=1&start=102&end=152"
|
||
title="YouTube video player" frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|