feat: add logo

src/app/(auth)/(signin)/page.tsx

@@ -5,7 +5,7 @@ import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 export const metadata: Metadata = {
-  title: "Sign In",
+  title: "Sign In | Skilld",
   description: "Sign In to start your journey with Skilld.",
 };
 

src/components/layout/header.tsx

@@ -3,13 +3,29 @@ import { cn } from "@/lib/utils";
 import { MobileSidebar } from "./mobile-sidebar";
 import { UserNav } from "./user-nav";
 import Link from "next/link";
+import Image from "next/image";
 
 export default function Header() {
   return (
     <div className="fixed top-0 left-0 right-0 supports-backdrop-blur:bg-background/60 border-b bg-background/95 backdrop-blur z-20">
       <nav className="h-14 flex items-center justify-between px-4">
         <div className="hidden lg:block">
-          <Link href={"/dashboard"}>Skilld</Link>
+          <Link href="/dashboard" className="inline-block w-fit">
+          <Image
+            src="/Skilld AI Logos/Skilld Logo-colour on black.png"
+            alt="Skilld Logo"
+            width={100}
+            height={30}
+            className="hidden dark:block h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+          />
+          <Image
+            src="/Skilld AI Logos/Skilld Logo-colour.png"
+            alt="Skilld Logo"
+            width={100}
+            height={30}
+            className="dark:hidden h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+          />
+        </Link>
         </div>
         <div className={cn("block lg:!hidden")}>
           <MobileSidebar />

src/components/task/header.tsx

@@ -1,4 +1,5 @@
 import ThemeToggle from "@/components/layout/ThemeToggle/theme-toggle";
+import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
@@ -6,8 +7,21 @@ const Header = () => {
   return (
     <header className="border-b px-4 h-min">
       <nav className="flex justify-between items-center max-w-[1440px] mx-auto py-2">
-        <Link href="/">
-          <h2>Skilld</h2>
+        <Link href="/dashboard" className="inline-block w-fit">
+          <Image
+            src="/Skilld AI Logos/Skilld Logo-colour on black.png"
+            alt="Skilld Logo"
+            width={100}
+            height={30}
+            className="hidden dark:block h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+          />
+          <Image
+            src="/Skilld AI Logos/Skilld Logo-colour.png"
+            alt="Skilld Logo"
+            width={100}
+            height={30}
+            className="dark:hidden h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+          />
         </Link>
 
         <div className="flex items-center gap-8">