feat: Add new image assets and update components to use them, replacing the footer text logo with an image.

components/layout/Header.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { Menu, X, Phone } from "lucide-react";
 
 const navigation = [
@@ -22,9 +23,16 @@ export function Header() {
                     {/* Logo */}
                     <Link
                         href="/"
-                        className="text-xl font-semibold text-[var(--color-foreground)] hover:no-underline"
+                        className="hover:no-underline"
                     >
-                        <span className="text-[var(--color-primary)]">Tele</span>NetSystems
+                        <Image
+                            src="/images/logo/logo-systems-9fd0db14.png"
+                            alt="TeleNetSystems Logo"
+                            width={180}
+                            height={40}
+                            priority
+                            className="h-8 md:h-10 w-auto"
+                        />
                     </Link>
 
                     {/* Desktop Navigation */}