158 lines
3.5 KiB
Vue
158 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
const { t } = useLocale()
|
|
</script>
|
|
|
|
<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">
|
|
{{ t.home?.spotlight?.titlePart1 }}<span class="text-wiiu-blue">{{ t.home?.spotlight?.titlePart2 }}</span>.
|
|
</h1>
|
|
<p class="subtext">
|
|
{{ t.home?.spotlight?.subtext }}
|
|
</p>
|
|
<p class="hint-text">
|
|
{{ t.home?.spotlight?.hintText }}
|
|
<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="t.home?.featuresSection?.title"
|
|
:description="t.home?.featuresSection?.description"
|
|
:features="[{
|
|
icon: 'i-octicon-cpu-24',
|
|
title: t.home?.featuresSection?.items?.stable?.title,
|
|
description: t.home?.featuresSection?.items?.stable?.description
|
|
}, {
|
|
icon: 'i-octicon-shield-check-24',
|
|
title: t.home?.featuresSection?.items?.secure?.title,
|
|
description: t.home?.featuresSection?.items?.secure?.description
|
|
}, {
|
|
icon: 'i-octicon-code-24',
|
|
title: t.home?.featuresSection?.items?.openSource?.title,
|
|
description: t.home?.featuresSection?.items?.openSource?.description
|
|
}]"
|
|
/>
|
|
|
|
<UPageSection>
|
|
<UPageCTA
|
|
:title="t.home?.ctaSection?.title"
|
|
:description="t.home?.ctaSection?.description"
|
|
variant="subtle"
|
|
:links="[{
|
|
label: t.home?.ctaSection?.links?.guide,
|
|
to: '/docs/connect',
|
|
trailingIcon: 'i-octicon-arrow-right-24',
|
|
color: 'neutral'
|
|
}, {
|
|
label: t.home?.ctaSection?.links?.repo,
|
|
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>
|