48 lines
2.5 KiB
Vue
48 lines
2.5 KiB
Vue
<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>
|