Add an English translation of the corralito training-courses page

It was deliberately left Italian-only when /en support was first added;
now translated and following the same thin-page + shared-view pattern
as every other route, with the nav link and language switch no longer
special-casing it.

frontend/app/components/views/CorralitoView.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { Locale } from '#shared/utils/locale'
+import { STRINGS } from '#shared/utils/i18n'
+
+const props = defineProps<{ locale: Locale }>()
+
+const strings = computed(() => STRINGS[props.locale])
+const { public: config } = useRuntimeConfig()
+
+useSeo({
+  locale: props.locale,
+  path: '/come-difendersi-dal-corralito',
+  title: strings.value.corralito.metaTitle,
+  description: strings.value.corralito.metaDescription,
+  image: `${config.siteUrl}/protesta-bancaria.jpg`,
+})
+</script>
+
+<template>
+  <article>
+    <header class="article-header">
+      <h1>{{ strings.navCorralito }}</h1>
+    </header>
+
+    <img
+      class="cover"
+      src="/protesta-bancaria.jpg"
+      :alt="strings.corralito.coverAlt"
+      width="770"
+      height="420"
+    >
+
+    <div class="prose">
+      <p>{{ strings.corralito.p1 }}</p>
+      <p>{{ strings.corralito.p2 }}</p>
+      <p>{{ strings.corralito.topicsIntro }}</p>
+
+      <ul>
+        <li v-for="topic in strings.corralito.topics" :key="topic">{{ topic }}</li>
+      </ul>
+
+      <p>{{ strings.corralito.disclaimer }}</p>
+    </div>
+
+    <div class="contact-cta">
+      <p class="kicker">{{ strings.corralito.contactKicker }}</p>
+      <p class="contact-links">
+        <a :href="`mailto:${SITE_EMAIL}`">{{ strings.corralito.emailLink }}</a>
+        <span aria-hidden="true">·</span>
+        <a href="https://t.me/Ito1505" target="_blank" rel="noopener">{{ strings.corralito.telegramLink }}</a>
+      </p>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.article-header {
+  max-width: 46rem;
+  margin: 0 auto 2rem;
+  text-align: center;
+}
+
+@media (min-width: 48rem) {
+  .article-header {
+    margin-bottom: 3rem;
+  }
+}
+
+.cover {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  margin-block: 0 3rem;
+  background: var(--color-surface);
+}
+
+.prose {
+  margin-inline: auto;
+}
+
+.contact-cta {
+  max-width: var(--width-prose);
+  margin: 3rem auto 0;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+  text-align: center;
+}
+
+.contact-links {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.6rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.contact-links a {
+  padding-bottom: 0.35rem;
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-ink);
+}
+
+.contact-links a:hover {
+  color: var(--color-ink);
+}
+</style>

frontend/app/layouts/default.vue

@@ -27,8 +27,8 @@ const strings = computed(() => STRINGS[locale.value])
           <ul>
             <li><NuxtLink :to="localePath(locale, '/')">{{ strings.navHome }}</NuxtLink></li>
             <li><NuxtLink :to="localePath(locale, '/blog')">{{ strings.navBlog }}</NuxtLink></li>
-            <li v-if="locale === 'it'">
-              <NuxtLink to="/come-difendersi-dal-corralito">{{ strings.navCorralito }}</NuxtLink>
+            <li>
+              <NuxtLink :to="localePath(locale, '/come-difendersi-dal-corralito')">{{ strings.navCorralito }}</NuxtLink>
             </li>
           </ul>
         </div>
@@ -55,8 +55,8 @@ const strings = computed(() => STRINGS[locale.value])
           <ul>
             <li><NuxtLink :to="localePath(locale, '/')">{{ strings.navHome }}</NuxtLink></li>
             <li><NuxtLink :to="localePath(locale, '/blog')">{{ strings.navBlog }}</NuxtLink></li>
-            <li v-if="locale === 'it'">
-              <NuxtLink to="/come-difendersi-dal-corralito">{{ strings.navCorralito }}</NuxtLink>
+            <li>
+              <NuxtLink :to="localePath(locale, '/come-difendersi-dal-corralito')">{{ strings.navCorralito }}</NuxtLink>
             </li>
           </ul>
         </nav>

frontend/app/middleware/lang-switch.global.ts

@@ -38,10 +38,5 @@ export default defineNuxtRouteMiddleware(async (to) => {
     return
   }
 
-  if (bare === '/come-difendersi-dal-corralito') {
-    langSwitch.value = { available: false, fallback: '/en' }
-    return
-  }
-
   langSwitch.value = { available: true, fallback: '/en' }
 })

frontend/app/pages/come-difendersi-dal-corralito.vue

@@ -1,132 +1,3 @@
-<script setup lang="ts">
-const { public: config } = useRuntimeConfig()
-const route = useRoute()
-const canonical = computed(() => `${config.siteUrl}${route.path}`)
-
-const title = 'Corsi di formazione sulle criptovalute'
-const description = 'Corsi pratici, individuali o di gruppo, per capire come funzionano le criptovalute e difendersi dal corralito.'
-
-useSeoMeta({
-  title,
-  description,
-  ogTitle: title,
-  ogDescription: description,
-  ogType: 'website',
-  ogUrl: canonical,
-  ogImage: `${config.siteUrl}/protesta-bancaria.jpg`,
-})
-
-useHead({ link: [{ rel: 'canonical', href: canonical }] })
-</script>
-
 <template>
-  <article>
-    <header class="article-header">
-      <h1>Come difendersi dal corralito</h1>
-    </header>
-
-    <img
-      class="cover"
-      src="/protesta-bancaria.jpg"
-      alt="Manifesti e scritte contro le banche durante una crisi bancaria"
-      width="770"
-      height="420"
-    >
-
-    <div class="prose">
-      <p>
-        Stai pensando di avvicinarti al mondo delle criptovalute (un mercato parallelo al
-        mercato tradizionale finanziario), ma non sai da dove cominciare?
-      </p>
-
-      <p>
-        È possibile organizzare corsi individuali o di gruppo dedicati alla conoscenza e al
-        funzionamento delle criptovalute, con un approccio prevalentemente pratico e senza
-        fornire consigli o raccomandazioni finanziarie.
-      </p>
-
-      <p>Durante il corso possiamo affrontare, tra gli altri, questi argomenti:</p>
-
-      <ul>
-        <li>quali sono i principali tipi di criptovalute e quali differenze esistono tra loro;</li>
-        <li>come funziona una blockchain e cosa significa realmente effettuare una transazione;</li>
-        <li>dove e come vengono conservate le criptovalute: wallet, exchange e sistemi di custodia;</li>
-        <li>come acquistare e vendere criptovalute e quali sono le principali modalità disponibili;</li>
-        <li>come utilizzare un wallet e gestire correttamente le proprie chiavi;</li>
-        <li>quali sono i principali rischi legati alla sicurezza e alla custodia;</li>
-        <li>come orientarsi nel vastissimo universo delle criptovalute e dei token.</li>
-      </ul>
-
-      <p>
-        Non si tratta di consulenza finanziaria e non verranno fornite indicazioni su quali
-        criptovalute acquistare o vendere. L'obiettivo è fornire conoscenze e strumenti per
-        comprendere questo nuovo mondo e muoversi al suo interno con maggiore consapevolezza.
-      </p>
-    </div>
-
-    <div class="contact-cta">
-      <p class="kicker">Per informazioni sui corsi, modalità e disponibilità</p>
-      <p class="contact-links">
-        <a :href="`mailto:${SITE_EMAIL}`">Scrivimi via email</a>
-        <span aria-hidden="true">·</span>
-        <a href="https://t.me/Ito1505" target="_blank" rel="noopener">Scrivimi su Telegram</a>
-      </p>
-    </div>
-  </article>
+  <CorralitoView locale="it" />
 </template>
-
-<style scoped>
-.article-header {
-  max-width: 46rem;
-  margin: 0 auto 2rem;
-  text-align: center;
-}
-
-@media (min-width: 48rem) {
-  .article-header {
-    margin-bottom: 3rem;
-  }
-}
-
-.cover {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  object-fit: cover;
-  margin-block: 0 3rem;
-  background: var(--color-surface);
-}
-
-.prose {
-  margin-inline: auto;
-}
-
-.contact-cta {
-  max-width: var(--width-prose);
-  margin: 3rem auto 0;
-  padding-top: 2rem;
-  border-top: 1px solid var(--color-border);
-  text-align: center;
-}
-
-.contact-links {
-  margin-top: 0.75rem;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.6rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-.contact-links a {
-  padding-bottom: 0.35rem;
-  text-decoration: none;
-  border-bottom: 1px solid var(--color-ink);
-}
-
-.contact-links a:hover {
-  color: var(--color-ink);
-}
-</style>

frontend/app/pages/en/come-difendersi-dal-corralito.vue

@@ -0,0 +1,3 @@
+<template>
+  <CorralitoView locale="en" />
+</template>