154 lines
4.3 KiB
Vue
154 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<section class="gamepad-spotlight-container">
|
|
<div class="gamepad-spotlight-content">
|
|
<div class="image-wrapper">
|
|
<img
|
|
src="/gamepad.png"
|
|
alt="Wii U GamePad"
|
|
class="gamepad-image"
|
|
>
|
|
</div>
|
|
<div class="text-wrapper">
|
|
<h1 class="archivo-black title">
|
|
We do justice to the Wii <span class="text-wiiu-blue">U</span>.
|
|
</h1>
|
|
<!-- NOT FINALIZED!!! check #dev for context -->
|
|
<p class="subtext">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</p>
|
|
<p class="hint-text">
|
|
Pssst.. our codebase is open source! Check out our Forgejo repository to see how we bring the Wii U back to life, and maybe even contribute yourself: <a
|
|
href="https://git.spbr.net/spacebar"
|
|
target="_blank"
|
|
class="text-blue-400 underline"
|
|
>https://git.spbr.net/spacebar</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<UPageSection
|
|
id="features"
|
|
title="Everything you miss about the Wii U online experience"
|
|
description="Spacebar Network is built from the ground up, and we use everything in our power to make the experience fast."
|
|
:features="[{
|
|
icon: 'i-octicon-cpu-24',
|
|
title: 'Stable Experience',
|
|
description: 'Unlike other services, ours aims to be lightweight and efficient, allowing us to support more players than ever seen before.'
|
|
}, {
|
|
icon: 'i-octicon-shield-check-24',
|
|
title: 'Safe & Secure',
|
|
description: 'Active moderation and robust server architecture keep the community friendly, toxic-free, and safe for all.'
|
|
}, {
|
|
icon: 'i-octicon-code-24',
|
|
title: 'Open Source Spirit',
|
|
description: 'Built by fans, for fans. Our server frameworks are transparent, community-reviewed, and open for contributions from fellow developers.'
|
|
}]"
|
|
/>
|
|
|
|
<UPageSection>
|
|
<UPageCTA
|
|
title="Dust off your GamePad"
|
|
description="The Wii U era doesn't have to end. Join Spacebar Network today and help build a thriving, nostalgic community of active players."
|
|
variant="subtle"
|
|
:links="[{
|
|
label: 'Setup Guide',
|
|
to: '/docs/connect',
|
|
trailingIcon: 'i-octicon-arrow-right-24',
|
|
color: 'neutral'
|
|
}, {
|
|
label: 'Forgejo Repository',
|
|
to: 'https://git.spbr.net/spacebar',
|
|
target: '_blank',
|
|
icon: 'i-simple-icons-gitea',
|
|
color: 'neutral',
|
|
variant: 'outline'
|
|
}]"
|
|
/>
|
|
</UPageSection>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
|
|
|
|
.archivo-black {
|
|
font-family: "Archivo Black", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.text-wiiu-blue {
|
|
color: #00aeef;
|
|
}
|
|
|
|
.gamepad-spotlight-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 6rem 2rem 4rem 2rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.gamepad-spotlight-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 3rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.image-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.gamepad-image {
|
|
width: 100%;
|
|
max-width: 650px;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.text-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: left;
|
|
}
|
|
|
|
.title {
|
|
font-size: 3.5rem;
|
|
line-height: 1.1;
|
|
margin-bottom: 1.5rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.subtext {
|
|
font-size: 1.125rem;
|
|
line-height: 1.6;
|
|
opacity: 0.85;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hint-text {
|
|
opacity: 0.5;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.gamepad-spotlight-content {
|
|
flex-direction: row;
|
|
gap: 4rem;
|
|
}
|
|
|
|
.title {
|
|
font-size: 4.5rem;
|
|
}
|
|
}
|
|
</style>
|