61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import LandingSiteMenu from '@/features/landing/components/LandingSiteMenu.vue';
|
|
import { usePublicPageMeta } from '@/features/landing/publicPageMeta.js';
|
|
|
|
const { t } = useI18n();
|
|
|
|
usePublicPageMeta({
|
|
title: computed(() => t('public.blogs.meta.title')),
|
|
description: computed(() => t('public.blogs.meta.description')),
|
|
path: '/blogs',
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="public-page">
|
|
<LandingSiteMenu />
|
|
|
|
<main class="public-page-content">
|
|
<section class="public-page-panel">
|
|
<div class="eyebrow">{{ t('public.blogs.eyebrow') }}</div>
|
|
<h1>{{ t('public.blogs.title') }}</h1>
|
|
<p>{{ t('public.blogs.description') }}</p>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.public-page {
|
|
@apply min-h-screen w-full;
|
|
}
|
|
|
|
.public-page-content {
|
|
@apply mx-auto flex w-full max-w-7xl flex-col px-5 py-8 md:px-8 md:py-12;
|
|
}
|
|
|
|
.public-page-panel {
|
|
@apply rounded-[2rem] p-6 md:p-10;
|
|
background: rgba(255, 255, 255, 0.84);
|
|
border: 1px solid rgba(23, 32, 51, 0.08);
|
|
box-shadow: 0 18px 40px rgba(23, 32, 51, 0.06);
|
|
}
|
|
|
|
.eyebrow {
|
|
@apply text-xs font-bold uppercase tracking-[0.26em];
|
|
color: #ff8a3d;
|
|
}
|
|
|
|
h1 {
|
|
@apply mt-4 max-w-4xl text-4xl font-black leading-tight md:text-6xl;
|
|
color: #172033;
|
|
}
|
|
|
|
p {
|
|
@apply mt-5 max-w-3xl text-base leading-7 md:text-lg;
|
|
color: #44516a;
|
|
}
|
|
</style>
|