generated from VLADIMIR/template_frontend
up
This commit is contained in:
+314
-23
@@ -1,41 +1,332 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton } from 'naive-ui'
|
||||
import { ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
import HeaderMenu from '@/components/HeaderMenu.vue'
|
||||
import MessagePaper from '@/components/MessagePaper.vue'
|
||||
|
||||
const howItWorks = ref<HTMLElement | null>(null)
|
||||
|
||||
const steps = [
|
||||
{ title: 'Выберите дело', text: 'Найдите в каталоге историю, которую хочется распутать.' },
|
||||
{
|
||||
title: 'Соберите компанию',
|
||||
text: 'Договоритесь о встрече и подготовьте сайт и бумажные материалы выбранного дела.',
|
||||
},
|
||||
{
|
||||
title: 'Следуйте за уликами',
|
||||
text: 'Изучайте материалы, замечайте детали и обсуждайте версии. Каждый может увидеть то, что упустили другие.',
|
||||
},
|
||||
{
|
||||
title: 'Найдите разгадку',
|
||||
text: 'Сопоставьте факты и сформулируйте общее решение. Какая версия объясняет всё?',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="center-block-custom content-block center-middle-block-custom height80">
|
||||
<div>
|
||||
<h1 class="font-text">Вечерний детектив</h1>
|
||||
<h3 class="font-text">Дело №0</h3>
|
||||
<p class="content-text">Поиграем?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<HeaderMenu active="main" />
|
||||
|
||||
<main class="center-block-custom home-scroll">
|
||||
<div class="width1200 home-content">
|
||||
<section class="hero" aria-labelledby="home-title">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Вечерний детектив · расследование своей компанией</p>
|
||||
<h1 id="home-title">Соберите друзей.<br /><span>Раскройте дело.</span></h1>
|
||||
<p class="hero-description">
|
||||
Изучайте материалы на сайте и на бумаге, сопоставляйте улики и обсуждайте версии. Вместе
|
||||
найдите разгадку детективной истории.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<RouterLink v-slot="{ href, navigate }" to="/catalog" custom>
|
||||
<n-button tag="a" :href="href" type="primary" size="large" @click="navigate">
|
||||
Выбрать дело
|
||||
</n-button>
|
||||
</RouterLink>
|
||||
<n-button
|
||||
size="large"
|
||||
secondary
|
||||
@click="howItWorks?.scrollIntoView({ block: 'start' })"
|
||||
>
|
||||
Как проходит игра
|
||||
</n-button>
|
||||
</div>
|
||||
<p class="hero-note">Ваша компания. Одна история. Множество версий.</p>
|
||||
</div>
|
||||
|
||||
<div class="dossier">
|
||||
<MessagePaper>
|
||||
<div class="dossier-content">
|
||||
<p class="dossier-label">Вечерний детектив / досье</p>
|
||||
<h2 class="dossier-title">Материалы дела</h2>
|
||||
<p class="dossier-intro">Истина складывается из деталей.</p>
|
||||
<dl class="dossier-list">
|
||||
<div>
|
||||
<dt>01 / Улики</dt>
|
||||
<dd>Изучите. Сопоставьте. Заметьте связь.</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>02 / Версии</dt>
|
||||
<dd>Обсудите, что могло произойти.</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>03 / Ваше решение</dt>
|
||||
<dd>Соберите факты в одну историю.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="dossier-footer">Дело ждёт своих детективов.</p>
|
||||
</div>
|
||||
</MessagePaper>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section ref="howItWorks" class="how-it-works" aria-labelledby="how-title">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">От первой улики до разгадки</p>
|
||||
<h2 id="how-title">Как проходит игра</h2>
|
||||
<p class="section-description">
|
||||
Сайт и бумажные материалы — части одного дела. А главное в расследовании — вы и ваши
|
||||
обсуждения.
|
||||
</p>
|
||||
</div>
|
||||
<ol class="steps">
|
||||
<li v-for="(step, index) in steps" :key="step.title" class="step">
|
||||
<span class="step-number" aria-hidden="true">0{{ index + 1 }}</span>
|
||||
<h3>{{ step.title }}</h3>
|
||||
<p>{{ step.text }}</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section class="closing" aria-labelledby="closing-title">
|
||||
<p class="eyebrow">Планы на вечер найдены</p>
|
||||
<h2 id="closing-title">Один вечер.<br />Общее расследование.</h2>
|
||||
<p>Соберите тех, с кем хочется спорить о версиях и радоваться найденной разгадке.</p>
|
||||
<RouterLink v-slot="{ href, navigate }" to="/catalog" custom>
|
||||
<n-button tag="a" :href="href" type="primary" size="large" @click="navigate">
|
||||
Выбрать дело
|
||||
</n-button>
|
||||
</RouterLink>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.font-text {
|
||||
font-family: 'font_old_typer', serif;
|
||||
.home-scroll {
|
||||
color: var(--vt-c-text-dark-1);
|
||||
}
|
||||
|
||||
.content-text {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 100px;
|
||||
.home-content {
|
||||
max-width: 100%;
|
||||
padding: 36px 24px 48px;
|
||||
}
|
||||
|
||||
@media (width >=1024px) {
|
||||
.font-text {
|
||||
left: -50px;
|
||||
position: relative;
|
||||
.hero {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 40px;
|
||||
padding: 16px 0 64px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--vt-c-text-dark-2);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.14em;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(36px, 5vw, 64px);
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
color: var(--vt-c-text-dark-2);
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
color: var(--vt-c-text-dark-2);
|
||||
font-size: 17px;
|
||||
line-height: 1.8;
|
||||
margin-top: 24px;
|
||||
max-width: 510px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.home-content .n-button:focus-visible {
|
||||
outline: 2px solid var(--vt-c-text-dark-1);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.hero-note {
|
||||
color: var(--vt-c-text-dark-2);
|
||||
font-size: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.dossier {
|
||||
margin: 0 auto;
|
||||
max-width: 420px;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dossier-content {
|
||||
padding: 12px 4px;
|
||||
}
|
||||
|
||||
.dossier-label {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dossier-title {
|
||||
font-size: 32px;
|
||||
line-height: 1.15;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.dossier-intro {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.dossier-list {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.dossier-list div {
|
||||
border-top: 1px solid var(--vt-c-divider-light-1);
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.dossier-list dt {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.dossier-list dd {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dossier-footer {
|
||||
border-top: 1px solid var(--vt-c-divider-light-1);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.how-it-works {
|
||||
border-top: 1px solid var(--vt-c-divider-dark-1);
|
||||
padding: 48px 0;
|
||||
scroll-margin-top: 24px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(28px, 3.5vw, 40px);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: var(--vt-c-text-dark-2);
|
||||
font-size: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
list-style: none;
|
||||
margin-top: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: var(--vt-c-black-soft);
|
||||
border: 1px solid var(--vt-c-divider-dark-2);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
color: var(--vt-c-text-dark-2);
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.12em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.step p {
|
||||
color: var(--vt-c-text-dark-2);
|
||||
line-height: 1.7;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.closing {
|
||||
border-top: 1px solid var(--vt-c-divider-dark-1);
|
||||
padding: 48px 0 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.closing > p:not(.eyebrow) {
|
||||
color: var(--vt-c-text-dark-2);
|
||||
margin: 20px auto 24px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
.home-content {
|
||||
padding: 64px 40px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
position: relative;
|
||||
right: -50px;
|
||||
top: 100px;
|
||||
.hero {
|
||||
gap: 56px;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
min-height: 590px;
|
||||
padding: 0 0 80px;
|
||||
}
|
||||
|
||||
.dossier-content {
|
||||
padding: 20px 12px;
|
||||
}
|
||||
|
||||
.how-it-works {
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
||||
.steps {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.closing {
|
||||
padding: 64px 0 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user