Adding video poster loading animation so user

knows that the background video is coming.

Will likely change the animation.

Components/Layout/navbar.jsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
 import React, { useState } from "react";
-//import Logo from "./Logo";
 import NavItem from "./nav-item"; 
 
 const MENU_LIST = [

Components/Layout/section.jsx

@@ -52,6 +52,7 @@ const Section = ({
         muted
         loop
         autoPlay={isPlaying}
+        poster="/loading1.gif" // loading animation
       />
       <div className="relative z-10 flex flex-col items-center justify-center h-full">
         <div className="relative flex justify-center items-end w-full mb-20">
@@ -68,4 +69,4 @@ const Section = ({
   );
 };
 
-export default Section;
+export default Section;

styles/globals.css

@@ -4,8 +4,8 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background-start-rgb: 39,40,34;
+  --background-end-rgb:117,113,94;
 }
 
 @media (prefers-color-scheme: dark) {