Redesigned marketing/landing page
This commit is contained in:
@@ -23,18 +23,110 @@ const welcomeRef = ref<HTMLElement>(null);
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-if="user.state == 'guest'" class="flex flex-col items-center justify-center">
|
<div v-if="user.state == 'guest'" class="bg-background text-foreground px-6 py-12 selection:bg-primary/10">
|
||||||
<h1 class="text-4xl font-bold mb-4">Welcome to the 17th</h1>
|
<div class="max-w-5xl mx-auto space-y-8">
|
||||||
<p class="text-neutral-400 mb-8 max-w-md">
|
|
||||||
To join our unit, please fill out an application to continue.
|
<header class="space-y-4">
|
||||||
</p>
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||||
<Button @click="goToApplication" class="px-6 py-3 text-lg">
|
<div>
|
||||||
Begin Application
|
<h1 class="text-4xl font-semibold tracking-tight">17th Ranger Battalion</h1>
|
||||||
</Button>
|
</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>
|
||||||
<div v-else class="mt-10">
|
<div v-else class="mt-10">
|
||||||
<div ref="welcomeRef" class="bookstack-container">
|
<div ref="welcomeRef" class="bookstack-container">
|
||||||
<!-- LOA policy gets loaded here -->
|
<!-- bookstack -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user