feat: add video section with YouTube embed to homepage

Author: ivictbor

adminforth/documentation/src/pages/index.module.css

@@ -45,6 +45,25 @@
   background: #000;
 }
 
+.videoSection {
+  width: min(100% - 2rem, 960px);
+  margin: 2rem auto 1.5rem;
+}
+
+.videoWrapper {
+  overflow: hidden;
+  border-radius: 1rem;
+  background: #000;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
+}
+
+.videoFrame {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 0;
+}
+
 .cardsWrapper {
   display: grid;
   grid-template-columns: repeat(2, minmax(300px, 500px));

adminforth/documentation/src/pages/index.tsx

@@ -7,6 +7,7 @@ import Heading from '@theme/Heading';
 import styles from './index.module.css';
 
 const LIVE_DEMO_IFRAME_URL = `https://demo.adminforth.dev/overview?autologin=${encodeURIComponent('demo@adminfoth.dev:demo')}&embedZoom=0.7`;
+const YOUTUBE_VIDEO_EMBED_URL = 'https://www.youtube-nocookie.com/embed/4tB8uzY__uk';
 
 
 const images = [
@@ -203,6 +204,20 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
 
+        <div className={styles.videoSection}>
+          <div className={styles.videoWrapper}>
+            <iframe
+              className={styles.videoFrame}
+              src={YOUTUBE_VIDEO_EMBED_URL}
+              title="AdminForth overview video"
+              loading="lazy"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowFullScreen
+            />
+          </div>
+        </div>
+
 
       <Heading as="h2" className="hero__title text--center">
         What it can do for you