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

2026-04-26 16:09:08 +04:00
parent 103e2bc4cf
commit 7701aa16c0
24 changed files with 6368 additions and 341 deletions
@@ -0,0 +1,90 @@
+import { useReveal, Icons, getBootstrap } from './atoms.jsx';
+
+function NewsCard({ tag, tagType, date, title, excerpt, featured, image_url }) {
+    const ref = useReveal();
+    return (
+        <article className={`news-card reveal ${featured ? 'featured' : ''}`} ref={ref}>
+            <div className="news-meta">
+                <span className={`news-tag ${tagType || 'patch'}`}>{tag}</span>
+                {date && <span>{date}</span>}
+            </div>
+            {featured && image_url && (
+                <div
+                    className="news-placeholder"
+                    style={{
+                        backgroundImage: `url(${image_url})`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        color: 'transparent',
+                    }}
+                >
+                    {title}
+                </div>
+            )}
+            {featured && !image_url && (
+                <div className="news-placeholder">[ placeholder ] · 1600×800</div>
+            )}
+            <h3 className="news-title">{title}</h3>
+            <p className="news-excerpt">{excerpt}</p>
+        </article>
+    );
+}
+
+export default function News() {
+    const ref = useReveal();
+    const posts = getBootstrap().posts || [];
+
+    return (
+        <section id="news" data-screen-label="04 News">
+            <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>
+                </div>
+
+                {posts.length === 0 ? (
+                    <NewsEmpty />
+                ) : (
+                    <div className="news-grid">
+                        {posts.map((p) => (
+                            <NewsCard key={p.id ?? p.title} {...p} />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}
+
+function NewsEmpty() {
+    const ref = useReveal();
+    return (
+        <div
+            className="news-empty reveal"
+            ref={ref}
+            style={{
+                textAlign: 'center',
+                padding: '80px 24px',
+                border: '1px dashed var(--panel-border-strong)',
+                borderRadius: 'var(--radius)',
+                background: 'rgba(127, 184, 212, 0.02)',
+            }}
+        >
+            <div style={{ fontSize: 28, color: 'var(--moon)', marginBottom: 14 }}>✦</div>
+            <h3
+                className="h-display"
+                style={{ fontSize: 24, marginBottom: 10 }}
+            >
+                Пока новостей нет
+            </h3>
+            <p className="lead" style={{ fontStyle: 'italic', maxWidth: 520, margin: '0 auto' }}>
+                Хроники сервера ещё не открыли первую страницу. Загляни позже — здесь
+                появятся патчноуты, события и девблоги.
+            </p>
+        </div>
+    );
+}