Merge branch 'main' into pete/add-LF-course

Author: moredip

src/pages/index.tsx

@@ -6,11 +6,14 @@ import QuestionBlocks from '../partials/question-blocks';
 import FeaturesZigZag from '../partials/features-zigzag';
 import HeroHome from '../partials/hero-home';
 import PageIllustration from '../partials/page-illustration';
+import VideoEmbed from '../partials/video-embed';
 
 import { useLocation } from '@docusaurus/router';
 import 'aos/dist/aos.css';
 import '../css/style.css';
 
+const WHAT_IS_OPENFEATURE_VIDEO_ID = 'heQ83k15ZE4';
+
 export default function Home(): JSX.Element {
   const location = useLocation();
   const { siteConfig } = useDocusaurusContext();
@@ -42,6 +45,7 @@ export default function Home(): JSX.Element {
           {/*  Page sections */}
           <HeroHome />
           <QuestionBlocks />
+          <VideoEmbed videoId={WHAT_IS_OPENFEATURE_VIDEO_ID} />
           <FeaturesZigZag />
         </main>
       </div>

src/partials/video-embed.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
+interface VideoEmbedProps {
+  videoId: string;
+  title?: string;
+}
+
+function VideoEmbed({ videoId, title = "YouTube video player" }: VideoEmbedProps) {
+  return (
+    <section>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="py-12 md:py-20 border-t border-gray-800">
+          <div className="max-w-3xl mx-auto">
+            <LiteYouTubeEmbed id={videoId} title={title} poster="maxresdefault" webp />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default VideoEmbed;