Add landing page content and a courses page, restyle both

Turn the home page into a single-column feature: a lead image, the
opening statement as the page's sole h1, a second image, and the body
copy, with the existing latest-articles section still below. Add a new
static page for the crypto courses pitch ("come difendersi dal
corralito"), styled like an article with a cover image and a contact
CTA (email + Telegram) instead of the referenced but nonexistent
contact form. Link the new page from the header nav and footer.

frontend/app/layouts/default.vue

@@ -30,6 +30,7 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
                 {{ category.name }}
               </NuxtLink>
             </li>
+            <li><NuxtLink to="/come-difendersi-dal-corralito">Come difendersi dal corralito</NuxtLink></li>
           </ul>
         </div>
       </nav>
@@ -67,6 +68,7 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
           <ul>
             <li><NuxtLink to="/">Home</NuxtLink></li>
             <li><NuxtLink to="/blog">Tutti gli articoli</NuxtLink></li>
+            <li><NuxtLink to="/come-difendersi-dal-corralito">Come difendersi dal corralito</NuxtLink></li>
           </ul>
         </nav>
 

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

@@ -0,0 +1,132 @@
+<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>
+</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/index.vue

@@ -33,6 +33,45 @@ useSeoMeta({
 
 <template>
   <div>
+    <section class="landing">
+      <img
+        class="landing-image"
+        src="/protesta-bancaria.jpg"
+        alt="Manifesti e scritte contro le banche durante una crisi bancaria"
+        width="770"
+        height="420"
+      >
+
+      <h1>La fine dell'Unione Europea per come l'abbiamo conosciuta.</h1>
+
+      <img
+        class="landing-image"
+        src="/eurozona-crisi.jpg"
+        alt="Bandiera dell'Unione Europea incrinata"
+        width="1000"
+        height="736"
+      >
+
+      <div class="landing-text">
+        <p>
+          La fine della nostra moneta come moneta forte: la fine di quella moneta che ci ha
+          dato la vera libertà di viaggiare, consumare e fare.
+        </p>
+        <p>
+          Una fine che avverrà a seguito di un "incidente" nucleare, al quale farà seguito un
+          corralito bancario, ossia l'impossibilità, da parte dei cittadini europei, di
+          disporre liberamente dei propri depositi.
+        </p>
+        <p>
+          Le monete fiduciarie sono per loro natura cannibalizzanti. Oggi tocca all'euro.
+          Anche perché le altre hanno praticamente perso tutte tutto.
+        </p>
+        <p class="landing-cta">
+          <NuxtLink to="/come-difendersi-dal-corralito">Come difendersi dal corralito</NuxtLink>
+        </p>
+      </div>
+    </section>
+
     <p v-if="error">Non è stato possibile caricare gli articoli. Riprova più tardi.</p>
 
     <p v-else-if="!featured">Non è stato ancora pubblicato nulla.</p>
@@ -58,9 +97,9 @@ useSeoMeta({
           <p class="kicker">
             {{ featured.category ? featured.category.name : 'Ultimo' }}
           </p>
-          <h1>
+          <h2>
             <NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
-          </h1>
+          </h2>
           <p class="kicker date">
             <time :datetime="isoDate(featured.publishedAt)">
               {{ formatDate(featured.publishedAt) }}
@@ -92,6 +131,59 @@ useSeoMeta({
 </template>
 
 <style scoped>
+.landing {
+  max-width: var(--width-prose);
+  margin-inline: auto;
+  margin-bottom: var(--gap-section);
+  padding-bottom: var(--gap-section);
+  border-bottom: 1px solid var(--color-border);
+  text-align: center;
+}
+
+.landing-image {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  background: var(--color-surface);
+}
+
+.landing h1 {
+  margin-block: 1.75rem;
+  font-size: clamp(2rem, 4.5vw, 3.1rem);
+}
+
+.landing-text {
+  margin-top: 1.75rem;
+  text-align: left;
+}
+
+.landing-text p {
+  margin-top: 1.1rem;
+}
+
+.landing-cta {
+  margin-top: 1.75rem;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.landing-cta a {
+  padding: 0.85rem 2.5rem;
+  text-decoration: none;
+  border: 1px solid var(--color-ink);
+  color: var(--color-ink);
+  display: inline-block;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.landing-cta a:hover {
+  background: var(--color-ink);
+  color: var(--color-bg);
+}
+
 .featured {
   display: grid;
   gap: 1.5rem;
@@ -127,16 +219,16 @@ useSeoMeta({
   background: var(--color-surface);
 }
 
-.featured h1 {
+.featured h2 {
   margin-top: 0.6rem;
   font-size: clamp(2rem, 4.5vw, 3.1rem);
 }
 
-.featured h1 a {
+.featured h2 a {
   text-decoration: none;
 }
 
-.featured h1 a:hover {
+.featured h2 a:hover {
   text-decoration: underline;
   text-underline-offset: 0.12em;
 }