davide
ac536bd152
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.
111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<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>
|