From 7be17cfe6e959223177d3a0fa3bdbbd0f8a6ae69 Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Wed, 14 Oct 2026 10:19:54 +0700
Subject: [PATCH] up

---
 src/components/HomePage.vue | 337 +++++++++++++++++++++++++++++++++---
 1 file changed, 314 insertions(+), 23 deletions(-)

diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index b9bbb54..074d6e2 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -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>