UI/video player (#218)

## Summary
- Themify the VideoSection
- Include Video for Index (JSConf is coming)
https://media.giphy.com/media/l4FGqpVoc9JE7rAS4/giphy.gif

## Media
### Screenshots

![video_desktop_jsconf](https://user-images.githubusercontent.com/238259/215293678-c20ac06a-1a98-43c6-b42b-ed6cea8e42d2.png)

![video_desktop_previa](https://user-images.githubusercontent.com/238259/215293680-fe8d9648-1643-4eab-9953-f63bb81102fe.png)

![nav_desktop_jsconf](https://user-images.githubusercontent.com/238259/215293686-6523bdf8-d9a1-437f-86f9-2e7120a511ad.png)

![nav_desktop_previa](https://user-images.githubusercontent.com/238259/215293688-69cf817b-cd22-4f58-9f17-de9e2e6e69e5.png)

![video_mobile_jsconf](https://user-images.githubusercontent.com/238259/215293681-0aa04255-68ff-4182-9aee-9599afea376a.png)

![video_mobile_previa](https://user-images.githubusercontent.com/238259/215293684-f82af500-15db-413e-8d46-e29e17dc41c7.png)

Author: joseglego

pages/index.tsx

@@ -1,9 +1,11 @@
 import styled from "@emotion/styled";
 import type { NextPage } from "next";
+import dynamic from "next/dynamic";
 import { lazy, Suspense } from "react";
 
 import Banner from "../src/Components/BannerComponent";
 import FlagMessage, { Message } from "../src/Components/FlagMessage";
+import { StyledWrapperSuspense } from "../src/Components/NavBar/components";
 import Seo from "../src/Components/Seo";
 import StickContainer from "../src/Components/StickContainer";
 import EventSchema from "../src/Components/schema/event";
@@ -42,6 +44,20 @@ const FriendSection = lazy(
   async () => await import("../src/Components/sections/FriendSection")
 );
 
+const VideoSection = dynamic(
+  async () => await import("../src/Components/sections/VideoSection"),
+  {
+    ssr: false,
+  }
+);
+
+const NavBar = dynamic(
+  async () => await import("../src/Components/NavBar/NavBar"),
+  {
+    ssr: false,
+  }
+);
+
 type Page = ParseQuery<HomeQueryQuery["page"]>;
 
 export interface PageProps {
@@ -70,11 +86,30 @@ const StyledBlackWrapp = styled.section`
   background-color: ${({ theme }) => theme.elements.global.backgroundColor};
 `;
 
+const NavBarWrapper = styled.div`
+  height: 100px;
+  background-color: ${({ theme }) => theme.elements.navBar.bgColor};
+`;
+
 const Home: NextPage<PageProps> = (props: PageProps) => {
   return (
     <Container>
       <Seo {...props.seo} />
       <EventSchema />
+      <NavBarWrapper>
+        <Suspense fallback={<StyledWrapperSuspense />}>
+          <NavBar />
+        </Suspense>
+      </NavBarWrapper>
+      <Suspense fallback={null}>
+        <div id="player">
+          <VideoSection
+            url=""
+            title="JSConf Chile"
+            videoId={props.flags?.videoId ?? ""}
+          />
+        </div>
+      </Suspense>
       <Suspense fallback={null}>
         <Hero heroData={props.heroData} />
       </Suspense>

pages/laprevia.tsx

@@ -182,7 +182,11 @@ const Home: NextPage<PageProps> = (props: PageProps) => {
       </Suspense>
       <Suspense fallback={null}>
         <div id="player">
-          <VideoSection videoId={props.flags?.videoId ?? ""} />
+          <VideoSection
+            url="laprevia"
+            title="La Previa"
+            videoId={props.flags?.videoId ?? ""}
+          />
         </div>
       </Suspense>
       <Suspense fallback={null}>

src/Components/NavBar/InternalNavBar.tsx

@@ -38,6 +38,7 @@ const StyledNav = styled(motion.nav)`
   width: 100%;
   display: flex;
   overflow: hidden;
+  background: ${({ theme }) => theme.elements.navBar.bgColor};
   color: ${({ theme }) => theme.elements.navBar.textColor};
 `;
 

src/Components/sections/Hero.tsx

@@ -1,18 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 import styled from "@emotion/styled";
-import dynamic from "next/dynamic";
 import { lazy, Suspense } from "react";
 
 import { PageProps } from "../../../pages";
 import { SecondaryStyledLink, TertiaryStyledLink } from "../Links";
-import { StyledWrapperSuspense } from "../NavBar/components";
 
 const Particles = lazy(async () => await import("../Particles"));
 
-const NavBar = dynamic(async () => await import("../NavBar/NavBar"), {
-  ssr: false,
-});
-
 const StyledWrapper = styled.section(({ theme }) => ({
   width: "100%",
   position: "relative",
@@ -203,9 +197,6 @@ export const Hero = ({ heroData }: { heroData: PageProps["heroData"] }) => {
           alt={heroData.background.title}
         />
       </Suspense>
-      <Suspense fallback={<StyledWrapperSuspense />}>
-        <NavBar />
-      </Suspense>
       <Suspense>
         <Particles />
       </Suspense>