init: Vite+React+Tailwind v2 site with HTML content from WP, RSS feed, external feed aggregator, prerender

src/components/Header.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+const NAV = [
+  { href: '/', label: 'Главная' },
+  { href: '/history/', label: 'История' },
+  { href: '/news/', label: 'Новости' },
+  { href: '/foto/', label: 'Фото' },
+  { href: 'https://forum.pushkinohistory.ru/', label: 'Форум', external: true },
+];
+
+export default function Header() {
+  return (
+    <header className="border-b border-rule bg-paper">
+      <div
+        className="relative overflow-hidden"
+        style={{
+          backgroundImage:
+            'linear-gradient(rgba(248,244,236,0.85), rgba(248,244,236,0.78)), url(/uploads/IMG_2156.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center 60%',
+          backgroundColor: '#f8f4ec',
+        }}
+      >
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
+          <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
+            <a href="/" className="block no-underline hover:no-underline">
+              <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-ink leading-tight drop-shadow-[0_1px_0_rgba(248,244,236,0.6)]">
+                История города Пушкино
+              </h1>
+              <p className="font-serif italic text-sm sm:text-base text-muted mt-1">
+                от давних времён до наших дней
+              </p>
+            </a>
+            <a
+              href="/feed/"
+              className="text-xs uppercase tracking-wider text-muted hover:text-accent self-start sm:self-end"
+              title="RSS-фид"
+            >
+              RSS
+            </a>
+          </div>
+        </div>
+      </div>
+      <nav className="border-t border-rule">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-wrap gap-x-6 gap-y-2 py-3 text-sm">
+          {NAV.map((n) => (
+            <a
+              key={n.href}
+              href={n.href}
+              target={n.external ? '_blank' : undefined}
+              rel={n.external ? 'noopener noreferrer' : undefined}
+              className="text-ink hover:text-accent no-underline font-medium"
+            >
+              {n.label}
+              {n.external ? ' ↗' : ''}
+            </a>
+          ))}
+        </div>
+      </nav>
+    </header>
+  );
+}