Add video feed feature with related components and hooks

- Implemented VideoFeed component to display sightings.
- Created useSightingList and useVideoFeed hooks for data fetching and state management.
- Added AppProviders for context management.
- Updated Dashboard to include VideoFeed.
- Introduced types for sightings in utils/types.tsx.
- Added Header and Footer components for layout.
- Configured React Query for data handling.

src/components/ui/Footer.tsx

@@ -0,0 +1,14 @@
+import Logo from "/MAV.svg";
+
+const Footer = () => {
+  return (
+    <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
+      <img src={Logo} alt="Logo" width={100} height={100} />
+      <p className="text-sm">
+        {new Date().getFullYear()} MAV Systems &copy; All rights reserved.
+      </p>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/ui/Header.tsx

@@ -0,0 +1,55 @@
+import { Link } from "@tanstack/react-router";
+import Logo from "/MAV.svg";
+import { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
+
+const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+  return (
+    <nav className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center md:flex-row flex-col">
+      <div className="flex flex-row justify-between w-full items-center">
+        <div className="w-28">
+          <Link to={"/"} onClick={() => setIsMenuOpen(false)}>
+            <img src={Logo} alt="Logo" width={150} height={150} />
+          </Link>
+        </div>
+
+        <div className="hover:cursor-pointer md:hidden" onClick={toggleMenu}>
+          <FontAwesomeIcon icon={faBars} />
+        </div>
+      </div>
+
+      <div className="md:flex hidden gap-4 text-lg items-center">
+        <Link
+          to="/"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
+        >
+          Dashboard
+        </Link>
+        <Link
+          to="/setup"
+          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700 text-nowrap"
+        >
+          Setup
+        </Link>
+      </div>
+      {/* desktop menu */}
+      {isMenuOpen && (
+        <div className="md:hidden flex flex-col w-full mt-4 gap-4 text-lg items-end">
+          <Link to="/" className="" onClick={toggleMenu}>
+            Dashboard
+          </Link>
+          <Link to="/setup" onClick={toggleMenu}>
+            Setup
+          </Link>
+        </div>
+      )}
+    </nav>
+  );
+};
+
+export default Header;