новый лендинг

2026-04-26 16:09:08 +04:00
parent 103e2bc4cf
commit 7701aa16c0
24 changed files with 6368 additions and 341 deletions
@@ -0,0 +1,151 @@
+import { useReveal, Icons } from './atoms.jsx';
+
+const items = [
+    {
+        icon: Icons.path,
+        num: 'I',
+        tag: 'Сигнатурная фича',
+        title: 'Индивидуальный прогресс по эпохам',
+        desc: 'Пока твой герой не увидел финал Классики — Outland закрыт. Пока не закрыт Illidan — Нортренд в тумане. Каждый идёт в своём темпе, без скипов.',
+        span: 'span-6',
+    },
+    {
+        icon: Icons.solo,
+        num: 'II',
+        tag: '',
+        title: 'Соло-данжи',
+        desc: 'Любое подземелье проходимо в одиночку: мы скейлим боссов и механики под размер отряда — от 1 до 5.',
+        span: 'span-3',
+    },
+    {
+        icon: Icons.mask,
+        num: 'III',
+        tag: '',
+        title: 'Режим «Предатель»',
+        desc: 'При создании персонаж Альянса может встать на сторону Орды (и наоборот). Отдельные сюжеты, NPC, репутации.',
+        span: 'span-3',
+    },
+    {
+        icon: Icons.wolf,
+        num: 'IV',
+        tag: 'В разработке',
+        title: 'Ликантропия',
+        desc: 'Воргены как болезнь: заражайся, сопротивляйся, или прими форму. Твой выбор — твой путь.',
+        span: 'span-4',
+    },
+    {
+        icon: Icons.mythic,
+        num: 'V',
+        tag: '',
+        title: 'Mythic+ без потолка',
+        desc: 'Бесконечное масштабирование уровня ключа. Каждую неделю — новые аффиксы.',
+        span: 'span-4',
+    },
+    {
+        icon: Icons.pass,
+        num: 'VI',
+        tag: 'В разработке',
+        title: 'Боевой пропуск · магазин наград',
+        desc: 'Ежедневные и еженедельные задания, ежедневные награды за вход, косметика в магазине.',
+        span: 'span-4',
+    },
+    {
+        icon: Icons.collection,
+        num: 'VII',
+        tag: 'В разработке',
+        title: 'Коллекции',
+        desc: 'Питомцы, ездовые животные, трансмогрификация — всё в одном журнале, с фильтрами и прогрессом.',
+        span: 'span-6',
+    },
+    {
+        icon: Icons.kart,
+        num: 'VIII',
+        tag: 'Side Project',
+        title: 'MoonWell Karts',
+        desc: 'Отдельная мини-игра в нашей инфраструктуре — аркадные гонки с персонажами сервера. В разработке.',
+        span: 'span-6',
+    },
+];
+
+const onMove = (e) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    e.currentTarget.style.setProperty('--mx', `${((e.clientX - r.left) / r.width) * 100}%`);
+    e.currentTarget.style.setProperty('--my', `${((e.clientY - r.top) / r.height) * 100}%`);
+};
+
+function FeatureCard({ icon, num, tag, title, desc, span }) {
+    const ref = useReveal();
+    return (
+        <article
+            className={`feature ${span} reveal`}
+            ref={ref}
+            onMouseMove={onMove}
+            style={{ transitionDelay: '0ms' }}
+        >
+            <div className="feature-num">
+                <span>{num}</span>
+                {tag && <span className="tag">{tag}</span>}
+            </div>
+            <div className="feature-icon">{icon}</div>
+            <h3 className="feature-title">{title}</h3>
+            <p className="feature-desc">{desc}</p>
+        </article>
+    );
+}
+
+function Progression() {
+    const ref = useReveal();
+    const steps = [
+        { name: 'Classic', lvl: '1–60', status: 'Активно', state: 'live' },
+        { name: 'The Burning Crusade', lvl: '60–70', status: 'Следующая эпоха', state: 'current' },
+        { name: 'Wrath of the Lich King', lvl: '70–80', status: 'Закрыто за туманом', state: 'locked' },
+    ];
+    return (
+        <div id="progression" className="progression reveal" ref={ref}>
+            <div className="progression-title">
+                <h3>Путь через эпохи</h3>
+                <span className="meta">Твой герой · Aranthel, Хранитель рощи · 47 ур.</span>
+            </div>
+            <div className="progression-track">
+                {steps.map((s, i) => (
+                    <div key={i} className={`progression-step ${s.state}`}>
+                        <div className="name">
+                            {s.name}
+                            <small>{s.lvl}</small>
+                        </div>
+                        <div className="status">{s.status}</div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default function Features() {
+    const ref = useReveal();
+    return (
+        <section id="features" data-screen-label="03 Features">
+            <div className="wrap">
+                <div className="section-head reveal" ref={ref}>
+                    <span className="eyebrow">Особенности сервера</span>
+                    <div style={{ height: 20 }} />
+                    <h2 className="h-display" style={{ fontSize: 'clamp(36px, 5vw, 60px)' }}>
+                        То, чего ты не найдёшь у других
+                    </h2>
+                    <div className="divider-ornament">✦</div>
+                    <p className="lead">
+                        Восемь систем, которые делают MoonWell не клоном, а отдельной игрой поверх знакомого мира.
+                    </p>
+                </div>
+
+                <div className="features-grid">
+                    {items.map((f, i) => (
+                        <FeatureCard key={i} {...f} />
+                    ))}
+                </div>
+
+                <Progression />
+            </div>
+        </section>
+    );
+}