Add livestream video in home page.

Author: PoojaB26

docs/index.md

@@ -22,8 +22,10 @@ import BranchIcon from '@site/static/icons/branch_New.png';
 
 <FlutterFlowLogo></FlutterFlowLogo>
 
-# Visual Development Platform
-FlutterFlow is a visual development platform that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing quality or features. 
+# Visual Development Environment
+FlutterFlow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing quality or features. 
+
+<div class="video-container small"><iframe src="https://www.youtube.com/embed/gYOrgBrX4jM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
 <InfoCards>
     <InfoCard title="Before You Begin" description="Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow." pagePath="/before-you-begin/setup-flutterflow" />

src/css/custom.css

@@ -174,6 +174,22 @@ html[data-theme='dark'] {
   height: 100%;
 }
 
+.video-container.small {
+  position: relative;
+  width: 75%;
+  padding-bottom: 42.1875%; /* 16:9 ratio of 75% width */
+  height: 0;
+  overflow: hidden;
+}
+
+.video-container.small iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 /* table {
   max-height: 20px;
 } */
@@ -204,4 +220,18 @@ code {
 /* Override styles for inline code within admonitions */
 .theme-admonition code {
   background-color: inherit; /* Ensures the background color is inherited */
+}
+
+.navbar-flutterflow-button {
+  background-color: #4B39EFFF; /* Use your preferred purple */
+  color: white !important;
+  border-radius: 6px;
+  padding: 6px 12px;
+  margin-left: 12px;
+  font-weight: 600;
+  transition: background-color 0.3s ease;
+}
+
+.navbar-flutterflow-button:hover {
+  background-color: #3B39EFFF; /* Slightly darker purple on hover */
 }