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/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;
 }