Add video showcase section and tighten hero-to-video spacing.

Embed VK Video demo between audience and benefits blocks, with RU/EN copy and a fallback link. Reduce vertical padding by 30% between hero, audience, and video sections.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/App.tsx

@@ -2,6 +2,7 @@ import { Header } from "./components/layout/Header";
 import { Footer } from "./components/layout/Footer";
 import { Hero } from "./components/sections/Hero";
 import { Audience } from "./components/sections/Audience";
+import { VideoShowcase } from "./components/sections/VideoShowcase";
 import { Benefits } from "./components/sections/Benefits";
 import { Features } from "./components/sections/Features";
 import { Steps } from "./components/sections/Steps";
@@ -20,6 +21,7 @@ export function App() {
       <main>
         <Hero />
         <Audience />
+        <VideoShowcase />
         <Benefits />
         <Features />
         <Steps />

src/components/sections/Audience.module.css

@@ -1,3 +1,8 @@
+.section {
+  padding-top: calc(88px * 0.7);
+  padding-bottom: calc(88px * 0.7);
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -36,3 +41,10 @@
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 640px) {
+  .section {
+    padding-top: calc(64px * 0.7);
+    padding-bottom: calc(64px * 0.7);
+  }
+}

src/components/sections/Audience.tsx

@@ -8,7 +8,11 @@ export function Audience() {
   const { copy } = useLocale();
 
   return (
-    <Section eyebrow={copy.audience.eyebrow} title={copy.audience.title}>
+    <Section
+      eyebrow={copy.audience.eyebrow}
+      title={copy.audience.title}
+      className={styles.section}
+    >
       <div className={styles.grid}>
         {AUDIENCE_CARD_IDS.map((id) => {
           const card = copy.audience.cards[id];

src/components/sections/Hero.module.css

@@ -1,5 +1,5 @@
 .hero {
-  padding: 48px 24px 80px;
+  padding: 48px 24px calc(80px * 0.7);
 }
 
 .inner {

src/components/sections/VideoShowcase.module.css

@@ -0,0 +1,80 @@
+.section {
+  padding-top: calc(88px * 0.7);
+}
+
+.section :global(.subtitle) {
+  max-width: 720px;
+  margin-bottom: 36px;
+}
+
+.frame {
+  position: relative;
+  width: 100%;
+}
+
+.glow {
+  position: absolute;
+  inset: 8% 4%;
+  background: radial-gradient(
+    ellipse at 50% 50%,
+    rgba(124, 58, 237, 0.35),
+    transparent 70%
+  );
+  filter: blur(36px);
+  pointer-events: none;
+}
+
+.player {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  background: #050408;
+  box-shadow:
+    var(--shadow-glow),
+    0 24px 56px rgba(0, 0, 0, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.caption {
+  margin: 16px 0 0;
+  font-size: 13px;
+  text-align: center;
+  color: var(--color-text-dim);
+}
+
+.link {
+  color: var(--color-gold);
+  text-decoration: underline;
+  text-decoration-color: var(--color-gold-dim);
+  text-underline-offset: 3px;
+  transition: color 0.15s ease;
+}
+
+.link:hover {
+  color: var(--color-gold-bright);
+}
+
+@media (max-width: 640px) {
+  .section {
+    padding-top: calc(64px * 0.7);
+  }
+
+  .section :global(.subtitle) {
+    margin-bottom: 28px;
+  }
+
+  .player {
+    border-radius: var(--radius-md);
+  }
+}

src/components/sections/VideoShowcase.tsx

@@ -0,0 +1,43 @@
+import { SHOWCASE_VIDEO } from "../../data/siteContent";
+import { useLocale } from "../../i18n/LocaleProvider";
+import { Section } from "../layout/Section";
+
+import styles from "./VideoShowcase.module.css";
+
+export function VideoShowcase() {
+  const { copy } = useLocale();
+
+  return (
+    <Section
+      id="video"
+      eyebrow={copy.videoShowcase.eyebrow}
+      title={copy.videoShowcase.title}
+      subtitle={copy.videoShowcase.subtitle}
+      className={styles.section}
+    >
+      <div className={styles.frame}>
+        <div className={styles.glow} aria-hidden="true" />
+        <div className={styles.player}>
+          <iframe
+            className={styles.iframe}
+            src={SHOWCASE_VIDEO.embedUrl}
+            title={copy.videoShowcase.iframeTitle}
+            allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen wake lock"
+            allowFullScreen
+            loading="lazy"
+          />
+        </div>
+      </div>
+      <p className={styles.caption}>
+        <a
+          className={styles.link}
+          href={SHOWCASE_VIDEO.pageUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {copy.videoShowcase.openOnVk}
+        </a>
+      </p>
+    </Section>
+  );
+}

src/data/siteContent.ts

@@ -10,6 +10,12 @@ export const SITE_LINKS = {
   support: "mailto:fontosh.ivan@gmail.com",
 } as const;
 
+/** VK Video showcase — https://vkvideo.ru/video-238917656_456239017 */
+export const SHOWCASE_VIDEO = {
+  pageUrl: "https://vkvideo.ru/video-238917656_456239017",
+  embedUrl: "https://vk.com/video_ext.php?oid=-238917656&id=456239017&hd=2",
+} as const;
+
 /** Same feed as electron-builder `publish.url` in dnd_player/package.json */
 export const UPDATE_FEED_BASE = "https://updates.mailib.ru/";
 

src/i18n/messages.ts

@@ -79,6 +79,14 @@ const ru = {
       },
     },
   },
+  videoShowcase: {
+    eyebrow: "Видео",
+    title: "Посмотрите, как это работает за столом",
+    subtitle:
+      "Короткий обзор редактора, пульта и экрана для игроков — от подготовки кампании до живой сессии.",
+    iframeTitle: "Видеообзор TTRPG Player",
+    openOnVk: "Открыть видео на VK Video",
+  },
   benefits: {
     title: "Ведите партию, а не переключайте вкладки",
     cards: {
@@ -333,6 +341,14 @@ const en: SiteCopy = {
       },
     },
   },
+  videoShowcase: {
+    eyebrow: "Video",
+    title: "See it in action at your table",
+    subtitle:
+      "A quick tour of the editor, control panel and player screen — from campaign prep to a live session.",
+    iframeTitle: "TTRPG Player video overview",
+    openOnVk: "Open video on VK Video",
+  },
   benefits: {
     title: "Run the session, don’t juggle tabs",
     cards: {