feat: add intro video to home

Author: roslovets

website/src/css/custom.css

@@ -2612,6 +2612,37 @@ html[data-theme='dark'] .home .translated-note__image {
   }
 }
 
+.home .home-video__content {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 2rem;
+}
+
+.home .home-video__frame {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid var(--border-neutral-tertiary);
+  background: var(--bg-neutral-secondary-subtle);
+}
+
+.home .home-video__frame iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+@media (max-width: 996px) {
+  .home .home-video__content {
+    grid-template-columns: 1fr;
+  }
+}
+
 .docswiper .swiper {
   padding: 0 40px 10px;
 }

website/src/pages/index.js

@@ -10,6 +10,7 @@ import { getInzhenerkaPromo } from '../utils/get-inzhenerka-promo';
 import Link from '@docusaurus/Link';
 import BlogPostCard from '@site/src/components/blogPostCard';
 import StructuredData from '@site/src/components/StructuredData';
+import YoutubeVideo from '@site/src/components/youtube';
 
 const bannerAnimation = require('@site/static/img/banner-white.svg');
 
@@ -254,6 +255,22 @@ function Home() {
             </div>
           </section>
 
+          <section className="section--compact home-video">
+            <div className="container">
+              <div className="home-video__content">
+                <div>
+                  <span className="eyebrow">Ознакомительное видео</span>
+                  <h2 className="heading-2">Введение в dbt: основы моделирования данных</h2>
+                  <p>Практический разбор dbt: как уйти от хаотичных SQL и ETL к управляемому хранилищу данных.
+Без теории — реальные решения, подводные камни и лайфхаки, как dbt помогает команде и бизнесу.</p>
+                </div>
+                <div className="home-video__frame">
+                  <YoutubeVideo id="BSge0lPJeHk" />
+                </div>
+              </div>
+            </div>
+          </section>
+
           <section className="baton-1 section--compact">
             <div className="container">
               <div>