chore: port assets, set up basic seo

.old/docs/es_ES/install/3ds.md

@@ -1,104 +0,0 @@
-# Familia 3DS/2DS
-
-<div class="tip red">
-	<strong>¡PRECAUCIÓN!</strong>
-	LAS TRANSFERENCIAS DE SISTEMA NO ESTÁN ACTUALMENTE SOPORTADAS POR NUESTROS SERVIDORES. INTENTAR REALIZAR UNA TRANSFERENCIA DE SISTEMA PUEDE EVITAR QUE PUEDAS CONECTARTE EN LÍNEA EN EL FUTURO. EL SOPORTE PARA LAS TRANSFERENCIAS DE SISTEMA ESTÁ EN DESARROLLO.
-</div>
-
-<div class="tip">
-	ℹ️ Esta guía asume que tienes un <b>Sistema con Homebrew ejecutando la última versión de Luma3DS (13+)</b>. Si no es así, por favor sigue esta <a href="https://3ds.hacks.guide/" target="_blank">guía</a> para hacer Homebrew en tu sistema primero.
-</div>
-
-Los siguientes pasos son necesarios para que te puedas conectar a la Red Pretendo:
-1. [Descargar Nimbus](#downloading-nimbus)
-2. [Habilitar parches de Luma](#luma-patches)
-3. [Nimbus](#using-nimbus)
-
-## Descargar Nimbus
-
-<div class="tip">
-	ℹ️ Nimbus también está disponible en <a href="https://db.universal-team.net/3ds/nimbus" target="_blank">Universal-Updater</a>. Si no tienes Universal-Updater, puedes seguir esta <a href="https://universal-team.net/projects/universal-updater.html" target="_blank">guía</a>. Puedes descargar los archivos requeridos desde allí en lugar de GitHub, o instalar/actualizar la aplicación directamente desde tu consola.
-	<br>
-	<br>
-	ℹ️ Si lo instalas directamente desde tu consola por primera vez, aún necesitarás instalar los parches IPS asociados desde GitHub. Una vez instalado, las actualizaciones pueden gestionarse exclusivamente desde Universal-Updater.
-</div>
-
-Antes de comenzar, apaga tu consola e inserta la tarjeta SD en tu computadora.
-
-Una vez insertada, descarga la última versión de [Nimbus](https://github.com/PretendoNetwork/Nimbus/releases/latest).
-
-Nimbus está disponible tanto como una aplicación 3DSX como un CIA instalable. La página de versiones ofrece descargas de ambas opciones. Selecciona la versión que prefieras utilizar, o selecciona el archivo `combined.[versión].zip` para utilizar ambos.
-
-<img src="/assets/images/docs/install/3ds/zip-highlight.png" width=100% height=auto/>
-
-Extrae el contenido del archivo zip a la raíz de tu tarjeta SD. Si se te pregunta si deseas fusionar o sobrescribir archivos, acepta los cambios.
-
-Asegúrate de que tu tarjeta SD tenga todos los siguientes archivos:
-
-- `SD:/luma/titles/000400300000BC02/code.ips` (Miiverse, JPN)
-- `SD:/luma/titles/000400300000BD02/code.ips` (Miiverse, USA)
-- `SD:/luma/titles/000400300000BE02/code.ips` (Miiverse, EUR)
-- `SD:/luma/sysmodules/0004013000002F02.ips` (SSL)
-- `SD:/luma/sysmodules/0004013000003202.ips` (FRD/Friends)
-- `SD:/luma/sysmodules/0004013000003802.ips` (ACT/NNID)
-- `SD:/3ds/juxt-prod.pem` (certificado de Juxtaposition)
-
-Si no lo instalaste a través de Universal-Updater, asegúrate de que al menos uno de los siguientes también esté presente:
-
-- `SD:/cias/nimbus.cia`
-- `SD:/3ds/nimbus.3dsx`
-
-Vuelve a insertar tu tarjeta SD en la consola.
-
-## Parches de Luma
-
-<div class="tip">
-ℹ️ <b>Salta este paso si ya has habilitado los parches necesarios en tu consola para la Red Pretendo.</b>
-</div>
-
-Para usar el servicio de Red Pretendo, necesitarás habilitar los parches de Luma en tu consola. Mantén presionado el botón `SELECT` en tu 3DS y enciéndela.
-
-En la pantalla que se muestra, asegúrate de que las siguientes opciones estén habilitadas:
-
-- `Habilitar carga de firmwares y módulos externos`
-- `Habilitar parcheo de juegos`
-
-Presiona `START` para guardar y continuar con estos cambios.
-
-## Instalación de Nimbus en el Menú HOME
-
-<div class="tip">
-ℹ️ <b>Salta este paso si solo descargaste el archivo zip de 3DSX.</b>
-</div>
-
-Si descargaste los archivos combinados o CIA, puedes instalar Nimbus en el Menú HOME para un acceso rápido y sencillo.
-
-Abre FBI. Si no tienes FBI, descarga la última versión desde [GitHub](https://github.com/lifehackerhansol/FBI/releases/latest). Selecciona `SD`, luego `cias`. Encuentra y selecciona `nimbus.cia`. Selecciona `Instalar CIA` o `Instalar y eliminar CIA`.
-
-Una vez que haya terminado la instalación, presiona el botón HOME y sal de FBI. Deberías ver un mensaje indicando que se ha añadido una nueva aplicación al Menú HOME. Haz clic en OK y ahora tendrás Nimbus en tu Menú HOME.
-
-## Usando Nimbus
-
-Dependiendo de cómo hayas instalado Nimbus, ábrelo a través del Homebrew Launcher o el Menú HOME de 3DS. Selecciona `Pretendo` o `Nintendo` para cambiar entre los servicios.
-
-Tu selección persistirá entre reinicios.
-
-## Iniciar sesión en tu PNID
-
-El 3DS no depende de los NNID para la gran mayoría de los servidores de juegos. Debido a esto, el uso de un PNID tampoco es necesario para la mayoría de los juegos<sup><a>[[1]](#footnote-1)</a></sup>.
-
-Configurar un PNID en el 3DS es similar a configurar un NNID. Puedes crear el PNID en tu consola o registrarlo desde una cuenta en [nuestro sitio web](/account/register) y vincularlo a tu consola en una fecha posterior.
-
-Se recomienda registrar el PNID en tu dispositivo en este momento, ya que registrar en el sitio web actualmente no te permite cambiar tus datos de usuario.
-
-## Otra información
-
-### ¿Cómo funciona Nimbus?
-Nimbus creará una segunda cuenta local establecida en el entorno `test` NASC. Los parches IPS establecerán que las URLs del entorno `test` NASC apunten a Pretendo. Puedes alternar libremente entre Pretendo y Nintendo. Tu modo seleccionado persistirá entre reinicios.
-
-### ¿Segunda cuenta local?
-Quizás te hayas preguntado: _"¿Segunda cuenta local? ¿Qué es eso? Pensé que la 3DS solo tenía una cuenta."_ Y estarías medio en lo correcto. La 3DS normalmente solo admite una cuenta, y solo puedes tener una cuenta activa a la vez. Sin embargo, Nintendo implementó soporte para múltiples cuentas locales en la 3DS/2DS que permanece sin usar en todas las unidades minoristas. En una unidad minorista normal, solo se crea una cuenta local, que se establece en el entorno `prod` NASC. Nimbus utiliza esta función no utilizada para crear cuentas locales en un entorno sandbox con diferentes entornos.
-
-<ul id="footnotes">
-	<li id="footnote-1"><sup>[1]</sup> Algunos juegos pueden requerir un PNID para ciertas acciones, como compras en eShop. El único juego conocido que requiere un PNID para uso general es Nintendo Badge Arcade, que aún no es compatible.</li>
-</ul>

.old/public/assets/images/arrow-right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>

.old/public/assets/images/down-arrow.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

content/docs/install/3ds.md

@@ -1,3 +1,7 @@
+---
+description: "Instructions on how to set up Pretendo on the 3DS/2DS family of consoles."
+---
+
 # 3DS/2DS Family
 
 <div class="tip red">

content/docs/install/azahar.md

@@ -1,3 +1,7 @@
+---
+description: "Instructions on how to set up Pretendo on Azahar, the 3DS/2DS emulator."
+---
+
 # Azahar
 
 <div class="tip red">

content/docs/install/cemu.md

@@ -1,3 +1,7 @@
+---
+description: "Instructions on how to set up Pretendo on Cemu, the Wii U emulator."
+---
+
 <div class="tip green">This Guide may be missing some info or incomplete.</div>
 
 # Cemu

content/docs/install/citra.md

@@ -1,3 +1,7 @@
+---
+description: "Citra is not supported. Please use Azahar instead."
+---
+
 # Citra
 
 Citra is not supported. Please use <a href="/docs/install/azahar" target="_blank">Azahar</a> instead.

content/docs/install/juxt.md

@@ -1,3 +1,7 @@
+---
+description: "Instructions on how to install Juxtaposition."
+---
+
 # Installing Juxtaposition
 
 <div class="tip">

content/docs/install/wiiu.md

@@ -1,3 +1,7 @@
+---
+description: "Instructions on how to set up Pretendo on the Wii U console."
+---
+
 # Wii U
 
 <div class="tip red">

content/docs/network-dumps.md

@@ -1,3 +1,7 @@
+---
+description: "Instructions on how to gather network dumps of games."
+---
+
 # Network Dumps
 One of the best ways to support the project is to help in gathering network dumps of games. These network dumps can be used by developers to help understand how the servers operate in a live environment. This kind of data greatly simplifies development of the servers, as it removes a large amount of guesswork and reverse engineering.
 

nuxt.config.ts

@@ -98,6 +98,88 @@ export default defineNuxtConfig({
 		}
 	},
 
+	app: {
+		head: {
+			link: [
+				{
+					rel: 'icon',
+					type: 'image/x-icon',
+					href: '/assets/images/icons/favicon.ico'
+				},
+				{
+					rel: 'apple-touch-icon',
+					sizes: '180x180',
+					href: '/assets/images/icons/apple-touch-icon.png'
+				},
+				{
+					rel: 'icon',
+					sizes: '32x32',
+					type: 'image/png',
+					href: '/assets/images/icons/favicon-32x32.png'
+				},
+				{
+					rel: 'icon',
+					sizes: '16x16',
+					type: 'image/png',
+					href: '/assets/images/icons/favicon-16x16.png'
+				},
+				{
+					rel: 'mask-icon',
+					href: '/assets/images/icons/safari-pinned-tab.svg',
+					color: '#1b1f3b'
+				},
+				{ rel: 'manifest', href: '/assets/site.webmanifest' },
+				{
+					rel: 'alternate',
+					type: 'application/rss+xml',
+					title: 'Pretendo Network Blog',
+					href: '/blog/feed.xml'
+				}
+			],
+			meta: [
+				{ name: 'msapplication-config', content: '/assets/browserconfig.xml' },
+				{ 'http-equiv': 'X-UA-Compatible', 'content': 'ie=edge' },
+				{ name: 'apple-mobile-web-app-title', content: 'Pretendo Network' },
+				{ name: 'application-name', content: 'Pretendo Network' },
+				{ name: 'msapplication-TileColor', content: '#1b1f3b' },
+				{ name: 'theme-color', content: '#1b1f3b' },
+				{
+					property: 'og:description',
+					content:
+						'An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles'
+				},
+				{ property: 'og:type', content: 'website' },
+				{ property: 'og:url', content: 'https://pretendo.network' },
+				{
+					property: 'og:image',
+					content:
+						'https://pretendo.network/assets/images/opengraph/opengraph-image.png'
+				},
+				{ property: 'og:image:alt', content: '' },
+				{ property: 'og:site_name', content: 'Pretendo Network' },
+				{ property: 'twitter:url', content: 'https://pretendo.network/' },
+				{ property: 'twitter:card', content: 'summary_large_image' },
+				{ property: 'twitter:site', content: '@PretendoNetwork' },
+				{
+					property: 'twitter:description',
+					content:
+						'An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles'
+				},
+				{
+					property: 'twitter:image',
+					content:
+						'https://pretendo.network/assets/images/opengraph/opengraph-image.png'
+				},
+				{
+					name: 'description',
+					content:
+						'An open source Nintendo Network replacement that aims to build custom servers for the WiiU and 3DS family of consoles'
+				},
+				{ property: 'robots', content: 'index, follow' }
+			]
+		}
+	},
+
 	i18n: {
 		compilation: {
 			strictMessage: false

package-lock.json

@@ -17,6 +17,7 @@
 				"@nuxt/icon": "^2.4.1",
 				"@nuxtjs/i18n": "^10.6.0",
 				"@pinia/nuxt": "^1.0.1",
+				"@pretendonetwork/error-codes": "^1.2.2",
 				"@pretendonetwork/grpc": "^2.5.4",
 				"@vueuse/core": "^14.4.0",
 				"better-sqlite3": "^12.11.1",
@@ -5286,6 +5287,12 @@
 			"integrity": "sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw==",
 			"license": "MIT"
 		},
+		"node_modules/@pretendonetwork/error-codes": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@pretendonetwork/error-codes/-/error-codes-1.2.2.tgz",
+			"integrity": "sha512-DFxKQ90ZGATcd/vu9ODD7czl1NTlvC43cTk2VKMH7lL4pmPXHMqDpYcnyDonVAoWPoG7oJzTNIyuQA0ul5tonQ==",
+			"license": "LGPL-3.0-only"
+		},
 		"node_modules/@pretendonetwork/eslint-config": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/@pretendonetwork/eslint-config/-/eslint-config-0.1.4.tgz",

package.json

@@ -21,6 +21,7 @@
 		"@nuxt/icon": "^2.4.1",
 		"@nuxtjs/i18n": "^10.6.0",
 		"@pinia/nuxt": "^1.0.1",
+		"@pretendonetwork/error-codes": "^1.2.2",
 		"@pretendonetwork/grpc": "^2.5.4",
 		"@vueuse/core": "^14.4.0",
 		"better-sqlite3": "^12.11.1",

src/layouts/default.vue

@@ -1,5 +1,16 @@
+<script setup lang="ts">
+useHead({
+	titleTemplate: (titleChunk) => {
+		return titleChunk ? `${titleChunk} | Pretendo Network` : 'Pretendo Network';
+	}
+});
+</script>
+
 <template>
-  <div id="root" class="main-body">
+  <div
+    id="root"
+    class="main-body"
+  >
     <Navbar />
     <div class="wrapper">
       <slot />

src/pages/blog/[slug].vue

@@ -9,20 +9,12 @@ if (!post.value) {
 }
 
 useHead({
-	title: `${post.value.title} | Pretendo Network Blog`,
+	title: `${post.value.title} | Blog`,
 	meta: [
 		{ property: 'description', content: post.value.caption },
-		{ property: 'og:title', content: `${post.value.title} | Pretendo Network Blog` },
 		{ property: 'og:description', content: post.value.caption },
-		{ property: 'og:type', content: 'website' },
-		{ property: 'og:url', content: 'https://pretendo.network/' },
 		{ property: 'og:image', content: post.value.cover_image },
-		{ property: 'og:image:alt', content: 'Pretendo Network' },
-		{ property: 'og:site_name', content: 'Pretendo Network' },
-		{ name: 'twitter:url', content: 'https://pretendo.network/' },
-		{ name: 'twitter:card', content: 'summary_large_image' },
-		{ name: 'twitter:site', content: '@PretendoNetwork' },
-		{ name: 'twitter:title', content: `${post.value.title} | Pretendo Network Blog` },
+		{ property: 'og:image:alt', content: '' },
 		{ name: 'twitter:description', content: post.value.caption },
 		{ name: 'twitter:image', content: post.value.cover_image }
 	]

src/pages/blog/index.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+useHead({
+	title: 'Blog'
+});
 /* eslint-disable vue/no-v-html -- we might wanna avoid this by rewriting the locales to use variables */
 const { data: allPosts } = await useAsyncData('blog', () => queryCollection('blog').all());
 

src/pages/index.vue

@@ -25,391 +25,390 @@ function titleSuffixHandler(path: string) {
 </script>
 
 <template>
-    <NuxtRouteAnnouncer />
+  <NuxtRouteAnnouncer />
 
-    <section class="hero">
-      <div class="hero-meta">
-        <h3 class="subtitle">
-          {{ $t("hero.subtitle") }}
-        </h3>
-        <h1
-          class="title dot"
-          :data-title-suffix="titleSuffixHandler('hero.titlesuffix')"
+  <section class="hero">
+    <div class="hero-meta">
+      <h3 class="subtitle">
+        {{ $t("hero.subtitle") }}
+      </h3>
+      <h1
+        class="title dot"
+        :data-title-suffix="titleSuffixHandler('hero.titlesuffix')"
+      >
+        {{ $t("hero.title") }}
+      </h1>
+      <p class="text">
+        {{ $t("hero.text") }}
+      </p>
+      <div class="buttons">
+        <a
+          href="/#about"
+          class="do-button-margin"
         >
-          {{ $t("hero.title") }}
-        </h1>
-        <p class="text">
-          {{ $t("hero.text") }}
+          <button class="button primary">
+            {{ $t("hero.buttons.readMore") }}
+          </button>
+        </a>
+        <a
+          href="https://discord.gg/pretendo"
+          class="do-button-margin"
+          target="_blank"
+          aria-label="Open Discord"
+        >
+          <button
+            class="button secondary discord icon-btn"
+            focusable="false"
+          >
+            <Icon
+              name="fa7-brands:discord"
+              size="32"
+            />
+          </button>
+        </a>
+        <a
+          href="https://github.com/PretendoNetwork/"
+          class="do-button-margin"
+          target="_blank"
+          aria-label="Open Github"
+        >
+          <button
+            class="button secondary github icon-btn"
+            focusable="false"
+          >
+            <Icon
+              name="fa7-brands:github"
+              size="32"
+            />
+          </button>
+        </a>
+        <a
+          href="/account/upgrade"
+          target="_blank"
+          aria-label="Upgrade account"
+        >
+          <button
+            class="button secondary github icon-btn"
+            focusable="false"
+          >
+            <Icon
+              name="ph:heart-fill"
+              size="32"
+            />
+          </button>
+        </a>
+      </div>
+    </div>
+    <div class="hero-image">
+      <div class="light-purple-circle">
+        <img
+          class="n2ds"
+          src="/assets/images/n2ds.png"
+          alt=""
+        >
+        <div class="deco">
+          <HeroDeco />
+        </div>
+      </div>
+    </div>
+    <div class="misc">
+      <div class="purple-circle" />
+    </div>
+  </section>
+
+  <section class="progress column-2">
+    <div class="left sect">
+      <div class="left-meta">
+        <h2
+          id="about"
+          class="dot title"
+          :data-title-suffix="titleSuffixHandler('aboutUs.titleSuffix')"
+        >
+          {{ $t("aboutUs.title") }}
+        </h2>
+        <p
+          v-for="i in computed(() => tm<string>('aboutUs.paragraphs') as string[]).value.length - 1"
+          :key="i"
+          class="text"
+        >
+          {{ $t(`aboutUs.paragraphs[${i}]`) }}
         </p>
-        <div class="buttons">
-          <a
-            href="/#about"
-            class="do-button-margin"
+      </div>
+    </div>
+    <div class="right sect">
+      <h2 class="title">
+        <a href="/progress">{{ $t("progress.title") }} ({{ progress.data.value?.completion ?? 0 }}%)</a>
+      </h2>
+      <div
+        v-for="project of progress.data.value?.items ?? []"
+        :key="project.title"
+      >
+        <p>{{ project.title }} [{{ project.completion }}%]</p>
+      </div>
+      <p v-if="(progress.data.value?.items ?? []).length === 0">
+        No projects
+      </p>
+    </div>
+  </section>
+
+  <section class="faq">
+    <div class="sect-top sect">
+      <h2
+        id="faq"
+        class="dot title"
+        :data-title-suffix="titleSuffixHandler('faq.titleSuffix')"
+      >
+        {{ $t("faq.title") }}
+      </h2>
+      <p class="text">
+        {{ $t("faq.text") }}
+      </p>
+    </div>
+    <div class="questions column-2">
+      <div class="left questions-left">
+        <details
+          v-for="i in even(nOfQAs)"
+          :key="i"
+          class="question-and-answer"
+        >
+          <summary>
+            {{ $t(`faq.QAs[${i}].question`) }}
+          </summary>
+          <p
+            class="text"
+            v-html="$t(`faq.QAs[${i}].answer`)"
+          />
+        </details>
+      </div>
+
+      <div class="right questions-right">
+        <details
+          v-for="i in odd(nOfQAs)"
+          :key="i"
+          class="question-and-answer"
+        >
+          <summary>
+            {{ $t(`faq.QAs[${i}].question`) }}
+          </summary>
+          <p
+            class="text"
+            v-html="$t(`faq.QAs[${i}].answer`)"
+          />
+        </details>
+      </div>
+    </div>
+  </section>
+
+  <section class="showcase">
+    <div class="sect-top sect">
+      <h2
+        id="showcase"
+        class="dot title"
+        :data-title-suffix="titleSuffixHandler('showcase.titleSuffix')"
+      >
+        {{ $t("showcase.title") }}
+      </h2>
+      <p class="text">
+        {{ $t("showcase.text") }}
+      </p>
+    </div>
+    <div class="grid">
+      <div class="item highlight">
+        <Icon
+          name="ph:hard-drives-fill"
+          size="48"
+          mode="svg"
+        />
+        <h1>{{ $t("showcase.cards.0.title") }}</h1>
+        <p>{{ $t("showcase.cards.0.caption") }}</p>
+      </div>
+      <div class="item">
+        <Icon
+          name="ph:users-fill"
+          size="48"
+          mode="svg"
+        />
+        <h1>{{ $t("showcase.cards.1.title") }}</h1>
+        <p>{{ $t("showcase.cards.1.caption") }}</p>
+      </div>
+      <div class="item">
+        <Icon
+          name="ph:game-controller-fill"
+          size="48"
+          mode="svg"
+        />
+        <h1>{{ $t("showcase.cards.2.title") }}</h1>
+        <p>{{ $t("showcase.cards.2.caption") }}</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="team">
+    <div class="sect-top sect team-top">
+      <h2
+        id="credits"
+        class="dot title"
+        :data-title-suffix="titleSuffixHandler('credits.titleSuffix')"
+      >
+        {{ $t("credits.title") }}
+      </h2>
+      <p class="text">
+        {{ $t("credits.text") }}
+      </p>
+    </div>
+    <div class="team-cards">
+      <div
+        v-for="i in array(maxCoreStaffIndex)"
+        :key="i"
+        class="card"
+      >
+        <div class="card-left">
+          <img
+            :src="$t(`credits.people[${i}].picture`)"
+            class="pfp"
+            alt=""
           >
-            <button class="button primary">
-              {{ $t("hero.buttons.readMore") }}
-            </button>
-          </a>
-          <a
-            href="https://discord.gg/pretendo"
-            class="do-button-margin"
-            target="_blank"
-            aria-label="Open Discord"
-          >
-            <button
-              class="button secondary discord icon-btn"
-              focusable="false"
-            >
-              <Icon
-                name="fa7-brands:discord"
-                size="32"
-              />
-            </button>
-          </a>
-          <a
-            href="https://github.com/PretendoNetwork/"
-            class="do-button-margin"
-            target="_blank"
-            aria-label="Open Github"
-          >
-            <button
-              class="button secondary github icon-btn"
-              focusable="false"
+        </div>
+        <div class="card-core">
+          <span
+            v-if="$te(`credits.people[${i}].special`)"
+            class="sub"
+          >{{ $t(`credits.people[${i}].special`) }}</span>
+          <h3 class="title">
+            <span>{{ $t(`credits.people[${i}].name`) }}</span>
+            <a
+              :href="$t(`credits.people[${i}].github`)"
+              class="github"
+              target="_blank"
+              aria-label="Open Github"
             >
               <Icon
                 name="fa7-brands:github"
-                size="32"
+                size="24"
               />
-            </button>
-          </a>
-          <a
-            href="/account/upgrade"
-            target="_blank"
-            aria-label="Upgrade account"
-          >
-            <button
-              class="button secondary github icon-btn"
-              focusable="false"
-            >
-              <Icon
-                name="ph:heart-fill"
-                size="32"
-              />
-            </button>
-          </a>
-        </div>
-      </div>
-      <div class="hero-image">
-        <div class="light-purple-circle">
-          <img
-            class="n2ds"
-            src="/assets/images/n2ds.png"
-            alt=""
-          >
-          <div class="deco">
-            <HeroDeco />
-          </div>
-        </div>
-      </div>
-      <div class="misc">
-        <div class="purple-circle" />
-      </div>
-    </section>
-
-    <section class="progress column-2">
-      <div class="left sect">
-        <div class="left-meta">
-          <h2
-            id="about"
-            class="dot title"
-            :data-title-suffix="titleSuffixHandler('aboutUs.titleSuffix')"
-          >
-            {{ $t("aboutUs.title") }}
-          </h2>
-          <p
-            v-for="i in computed(() => tm<string>('aboutUs.paragraphs') as string[]).value.length - 1"
-            :key="i"
-            class="text"
-          >
-            {{ $t(`aboutUs.paragraphs[${i}]`) }}
+            </a>
+          </h3>
+          <p class="text">
+            {{ $t(`credits.people[${i}].caption`) }}
           </p>
         </div>
       </div>
-      <div class="right sect">
-        <h2 class="title">
-          <a href="/progress">{{ $t("progress.title") }} ({{ progress.data.value?.completion ?? 0 }}%)</a>
-        </h2>
-        <div
-          v-for="project of progress.data.value?.items ?? []"
-          :key="project.title"
-        >
-          <p>{{ project.title }} [{{ project.completion }}%]</p>
-        </div>
-        <p v-if="(progress.data.value?.items ?? []).length === 0">
-          No projects
-        </p>
-      </div>
-    </section>
+    </div>
+  </section>
 
-    <section class="faq">
-      <div class="sect-top sect">
-        <h2
-          id="faq"
-          class="dot title"
-          :data-title-suffix="titleSuffixHandler('faq.titleSuffix')"
-        >
-          {{ $t("faq.title") }}
-        </h2>
-        <p class="text">
-          {{ $t("faq.text") }}
-        </p>
-      </div>
-      <div class="questions column-2">
-        <div class="left questions-left">
-          <details
-            v-for="i in even(nOfQAs)"
+  <section class="team-helpers">
+    <div class="sect-top sect">
+      <h2
+        id="special-thanks"
+        class="dot title"
+        :data-title-suffix="titleSuffixHandler('specialThanks.titleSuffix')"
+      >
+        {{ $t("specialThanks.title") }}
+      </h2>
+      <p class="text">
+        {{ $t("specialThanks.text") }}
+      </p>
+    </div>
+    <div class="animation-wrapper">
+      <div class="row first">
+        <div class="team-helpers-cards">
+          <a
+            v-for="i in [...even(maxContributorsIndex), ...even(maxContributorsIndex)]"
             :key="i"
-            class="question-and-answer"
+            :href="$te(`specialThanks.people[${i}].github`) ? $t(`specialThanks.people[${i}].github`) : undefined"
+            target="_blank"
+            :class="{ 'helper-card': true, 'special': $te(`specialThanks.people[${i}].special`) }"
           >
-            <summary>
-              {{ $t(`faq.QAs[${i}].question`) }}
-            </summary>
-            <p
-              class="text"
-              v-html="$t(`faq.QAs[${i}].answer`)"
-            />
-          </details>
-        </div>
-
-        <div class="right questions-right">
-          <details
-            v-for="i in odd(nOfQAs)"
-            :key="i"
-            class="question-and-answer"
-          >
-            <summary>
-              {{ $t(`faq.QAs[${i}].question`) }}
-            </summary>
-            <p
-              class="text"
-              v-html="$t(`faq.QAs[${i}].answer`)"
-            />
-          </details>
-        </div>
-      </div>
-    </section>
-
-    <section class="showcase">
-      <div class="sect-top sect">
-        <h2
-          id="showcase"
-          class="dot title"
-          :data-title-suffix="titleSuffixHandler('showcase.titleSuffix')"
-        >
-          {{ $t("showcase.title") }}
-        </h2>
-        <p class="text">
-          {{ $t("showcase.text") }}
-        </p>
-      </div>
-      <div class="grid">
-        <div class="item highlight">
-          <Icon
-            name="ph:hard-drives-fill"
-            size="48"
-            mode="svg"
-          />
-          <h1>{{ $t("showcase.cards.0.title") }}</h1>
-          <p>{{ $t("showcase.cards.0.caption") }}</p>
-        </div>
-        <div class="item">
-          <Icon
-            name="ph:users-fill"
-            size="48"
-            mode="svg"
-          />
-          <h1>{{ $t("showcase.cards.1.title") }}</h1>
-          <p>{{ $t("showcase.cards.1.caption") }}</p>
-        </div>
-        <div class="item">
-          <Icon
-            name="ph:game-controller-fill"
-            size="48"
-            mode="svg"
-          />
-          <h1>{{ $t("showcase.cards.2.title") }}</h1>
-          <p>{{ $t("showcase.cards.2.caption") }}</p>
-        </div>
-      </div>
-    </section>
-
-    <section class="team">
-      <div class="sect-top sect team-top">
-        <h2
-          id="credits"
-          class="dot title"
-          :data-title-suffix="titleSuffixHandler('credits.titleSuffix')"
-        >
-          {{ $t("credits.title") }}
-        </h2>
-        <p class="text">
-          {{ $t("credits.text") }}
-        </p>
-      </div>
-      <div class="team-cards">
-        <div
-          v-for="i in array(maxCoreStaffIndex)"
-          :key="i"
-          class="card"
-        >
-          <div class="card-left">
-            <img
-              :src="$t(`credits.people[${i}].picture`)"
-              class="pfp"
-              alt=""
-            >
-          </div>
-          <div class="card-core">
-            <span
-              v-if="$te(`credits.people[${i}].special`)"
-              class="sub"
-            >{{ $t(`credits.people[${i}].special`) }}</span>
-            <h3 class="title">
-              <span>{{ $t(`credits.people[${i}].name`) }}</span>
-              <a
-                :href="$t(`credits.people[${i}].github`)"
-                class="github"
-                target="_blank"
-                aria-label="Open Github"
+            <div class="img-wrapper">
+              <img
+                :src="$t(`specialThanks.people[${i}].picture`)"
+                class="pfp"
+                alt=""
               >
-                <Icon
-                  name="fa7-brands:github"
-                  size="24"
-                />
-              </a>
-            </h3>
-            <p class="text">
-              {{ $t(`credits.people[${i}].caption`) }}
-            </p>
-          </div>
+            </div>
+            <span>{{ $t(`specialThanks.people[${i}].name`) }}</span>
+            <p>{{ $t(`specialThanks.people[${i}].caption`) }}</p>
+          </a>
         </div>
       </div>
-    </section>
-
-    <section class="team-helpers">
-      <div class="sect-top sect">
-        <h2
-          id="special-thanks"
-          class="dot title"
-          :data-title-suffix="titleSuffixHandler('specialThanks.titleSuffix')"
-        >
-          {{ $t("specialThanks.title") }}
-        </h2>
-        <p class="text">
-          {{ $t("specialThanks.text") }}
-        </p>
-      </div>
-      <div class="animation-wrapper">
-        <div class="row first">
-          <div class="team-helpers-cards">
-            <a
-              v-for="i in [...even(maxContributorsIndex), ...even(maxContributorsIndex)]"
-              :key="i"
-              :href="$te(`specialThanks.people[${i}].github`) ? $t(`specialThanks.people[${i}].github`) : undefined"
-              target="_blank"
-              :class="{ 'helper-card': true, 'special': $te(`specialThanks.people[${i}].special`) }"
-            >
-              <div class="img-wrapper">
-                <img
-                  :src="$t(`specialThanks.people[${i}].picture`)"
-                  class="pfp"
-                  alt=""
-                >
-              </div>
-              <span>{{ $t(`specialThanks.people[${i}].name`) }}</span>
-              <p>{{ $t(`specialThanks.people[${i}].caption`) }}</p>
-            </a>
-          </div>
-        </div>
-        <div class="row second">
-          <div class="team-helpers-cards">
-            <a
-              v-for="i in [...odd(maxContributorsIndex), ...odd(maxContributorsIndex)]"
-              :key="i"
-              :href="$te(`specialThanks.people[${i}].github`) ? $t(`specialThanks.people[${i}].github`) : undefined"
-              target="_blank"
-              :class="{ 'helper-card': true, 'special': $te(`specialThanks.people[${i}].special`) }"
-            >
-              <div class="img-wrapper">
-                <img
-                  :src="$t(`specialThanks.people[${i}].picture`)"
-                  class="pfp"
-                  alt=""
-                >
-              </div>
-              <span>{{ $t(`specialThanks.people[${i}].name`) }}</span>
-              <p>{{ $t(`specialThanks.people[${i}].caption`) }}</p>
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section class="update-signup">
-      <div class="sect hero-meta reduced-margin">
-        <!-- keeping this one as is because i'd fix this using a logotype component and components are out of scope for now -->
-        <svg
-          alt=""
-          xmlns="http://www.w3.org/2000/svg"
-          width="48.87"
-          height="71.093"
-          viewBox="0 0 48.87 71.093"
-        >
-          <g
-            id="XMLID_6_"
-            transform="translate(0)"
+      <div class="row second">
+        <div class="team-helpers-cards">
+          <a
+            v-for="i in [...odd(maxContributorsIndex), ...odd(maxContributorsIndex)]"
+            :key="i"
+            :href="$te(`specialThanks.people[${i}].github`) ? $t(`specialThanks.people[${i}].github`) : undefined"
+            target="_blank"
+            :class="{ 'helper-card': true, 'special': $te(`specialThanks.people[${i}].special`) }"
           >
-            <path
-              id="XMLID_15_"
-              d="M69.581,29.593c-2.029,1.068-.249,4.129,1.78,3.061,5.162-2.67,11.463-2.6,16.981-1.1,4.735,1.282,9.5,3.845,12.246,8.045,1.246,1.922,4.307.142,3.061-1.78C96.921,27.386,80.3,24.04,69.581,29.593Z"
-              transform="translate(-60.112 -20.086)"
-              fill="#9d6ff3"
-            />
-            <path
-              id="XMLID_14_"
-              d="M103.359,21.045c-3.951-6.159-10.751-10-17.657-11.89C77.763,6.948,68.721,7.019,61.281,10.9c-2.029,1.068-.249,4.129,1.78,3.061,6.586-3.453,14.667-3.311,21.644-1.388,5.981,1.638,12.1,4.913,15.521,10.252C101.507,24.783,104.569,23,103.359,21.045Z"
-              transform="translate(-54.766 -7.693)"
-              fill="#9d6ff3"
-            />
-            <path
-              id="XMLID_9_"
-              d="M65.995,47.8a20.7,20.7,0,0,0-12.958,4.45H47.27a2.579,2.579,0,0,0-2.67,2.456v47.239a2.763,2.763,0,0,0,2.67,2.67h5.838a2.639,2.639,0,0,0,2.528-2.67V87.564A21.228,21.228,0,1,0,65.995,47.8Zm0,33.178a12,12,0,1,1,12-12A12,12,0,0,1,65.995,80.978Z"
-              transform="translate(-44.6 -33.522)"
-              fill="#9d6ff3"
-            />
-          </g>
-        </svg>
-        <h2
-          id="discord-join"
-          class="dot title"
-          :data-title-suffix="titleSuffixHandler('discordJoin.titleSuffix')"
-        >
-          {{ $t("discordJoin.title") }}
-        </h2>
-        <p class="text">
-          {{ $t("discordJoin.text") }}
-        </p>
+            <div class="img-wrapper">
+              <img
+                :src="$t(`specialThanks.people[${i}].picture`)"
+                class="pfp"
+                alt=""
+              >
+            </div>
+            <span>{{ $t(`specialThanks.people[${i}].name`) }}</span>
+            <p>{{ $t(`specialThanks.people[${i}].caption`) }}</p>
+          </a>
+        </div>
       </div>
-      <div class="floating-serverjoin">
-        <p>{{ $t("discordJoin.widget.text") }}</p>
-        <a
-          href="https://discord.gg/pretendo"
-          target="_blank"
-        >{{ $t("discordJoin.widget.button") }}</a>
-      </div>
-      <div class="circle" />
-    </section>
+    </div>
+  </section>
 
+  <section class="update-signup">
+    <div class="sect hero-meta reduced-margin">
+      <!-- keeping this one as is because i'd fix this using a logotype component and components are out of scope for now -->
+      <svg
+        alt=""
+        xmlns="http://www.w3.org/2000/svg"
+        width="48.87"
+        height="71.093"
+        viewBox="0 0 48.87 71.093"
+      >
+        <g
+          id="XMLID_6_"
+          transform="translate(0)"
+        >
+          <path
+            id="XMLID_15_"
+            d="M69.581,29.593c-2.029,1.068-.249,4.129,1.78,3.061,5.162-2.67,11.463-2.6,16.981-1.1,4.735,1.282,9.5,3.845,12.246,8.045,1.246,1.922,4.307.142,3.061-1.78C96.921,27.386,80.3,24.04,69.581,29.593Z"
+            transform="translate(-60.112 -20.086)"
+            fill="#9d6ff3"
+          />
+          <path
+            id="XMLID_14_"
+            d="M103.359,21.045c-3.951-6.159-10.751-10-17.657-11.89C77.763,6.948,68.721,7.019,61.281,10.9c-2.029,1.068-.249,4.129,1.78,3.061,6.586-3.453,14.667-3.311,21.644-1.388,5.981,1.638,12.1,4.913,15.521,10.252C101.507,24.783,104.569,23,103.359,21.045Z"
+            transform="translate(-54.766 -7.693)"
+            fill="#9d6ff3"
+          />
+          <path
+            id="XMLID_9_"
+            d="M65.995,47.8a20.7,20.7,0,0,0-12.958,4.45H47.27a2.579,2.579,0,0,0-2.67,2.456v47.239a2.763,2.763,0,0,0,2.67,2.67h5.838a2.639,2.639,0,0,0,2.528-2.67V87.564A21.228,21.228,0,1,0,65.995,47.8Zm0,33.178a12,12,0,1,1,12-12A12,12,0,0,1,65.995,80.978Z"
+            transform="translate(-44.6 -33.522)"
+            fill="#9d6ff3"
+          />
+        </g>
+      </svg>
+      <h2
+        id="discord-join"
+        class="dot title"
+        :data-title-suffix="titleSuffixHandler('discordJoin.titleSuffix')"
+      >
+        {{ $t("discordJoin.title") }}
+      </h2>
+      <p class="text">
+        {{ $t("discordJoin.text") }}
+      </p>
+    </div>
+    <div class="floating-serverjoin">
+      <p>{{ $t("discordJoin.widget.text") }}</p>
+      <a
+        href="https://discord.gg/pretendo"
+        target="_blank"
+      >{{ $t("discordJoin.widget.button") }}</a>
+    </div>
+    <div class="circle" />
+  </section>
 </template>
 
 <style lang="scss" scoped>

src/public/assets/images/arrow-right.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>