перевод лендинга на vue, добавление поддержки inertia

2026-06-27 22:15:17 +04:00
parent d72650bbdc
commit 8bf1b852f0
25 changed files with 1451 additions and 162 deletions
@@ -0,0 +1,47 @@
+<script setup>
+import { features, iconPaths, steps } from './symbols';
+
+function onMove(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    event.currentTarget.style.setProperty('--mx', `${((event.clientX - rect.left) / rect.width) * 100}%`);
+    event.currentTarget.style.setProperty('--my', `${((event.clientY - rect.top) / rect.height) * 100}%`);
+}
+</script>
+
+<template>
+    <section id="features" data-screen-label="03 Features">
+        <div class="wrap">
+            <div class="section-head reveal">
+                <span class="eyebrow">Особенности сервера</span>
+                <div style="height: 20px"></div>
+                <h2 class="h-display" style="font-size: clamp(36px, 5vw, 60px)">То, чего ты не найдешь у других</h2>
+                <div class="divider-ornament">✦</div>
+                <p class="lead">Восемь систем, которые делают MoonWell не клоном, а отдельной игрой поверх знакомого мира.</p>
+            </div>
+
+            <div class="features-grid">
+                <article v-for="feature in features" :key="feature.num" :class="['feature', feature.span, 'reveal']" @mousemove="onMove">
+                    <div class="feature-num"><span>{{ feature.num }}</span><span v-if="feature.tag" class="tag">{{ feature.tag }}</span></div>
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" v-html="iconPaths[feature.icon]"></svg>
+                    </div>
+                    <h3 class="feature-title">{{ feature.title }}</h3>
+                    <p class="feature-desc">{{ feature.desc }}</p>
+                </article>
+            </div>
+
+            <div id="progression" class="progression reveal">
+                <div class="progression-title">
+                    <h3>Путь через эпохи</h3>
+                    <span class="meta">Твой герой · Aranthel, Хранитель рощи · 47 ур.</span>
+                </div>
+                <div class="progression-track">
+                    <div v-for="step in steps" :key="step.name" :class="['progression-step', step.state]">
+                        <div class="name">{{ step.name }}<small>{{ step.lvl }}</small></div>
+                        <div class="status">{{ step.status }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>