153 lines
4.1 KiB
Vue
153 lines
4.1 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>
|
|
<p class="subtext">
|
|
Our service is designed to give the Wii U the treatment it deserves: pure royalty. We are dedicated to providing a stable, secure, and authentic online experience that recaptures the original magic of the Nintendo Network. By prioritizing reliability and nostalgia, we ensure that your favorite console remains a vibrant portl to the games and communities you love.
|
|
</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>
|