add explore header

Author: ahmedsomaa

components/Header.tsx

@@ -1,23 +1,21 @@
-import Link from "next/link";
-import Github from "./Github";
+import Logo from "./Logo";
+import { Button } from "./ui/button";
 
 export default function Header() {
   return (
-    <header className="flex justify-between items-center w-full mt-5 border-b-2 pb-7 sm:px-4 px-2">
-      <Link href="/" className="flex space-x-3">
-        <h1 className="sm:text-3xl text-2xl font-bold ml-2 tracking-tight">
-          Theme Font Pair
-        </h1>
-      </Link>
-      <a
-        className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-4 py-2 text-sm text-gray-600 shadow-md transition-colors hover:bg-gray-100"
-        href="https://github.com/ahmedsomaa/theme-font-pair"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Github />
-        <p>Star on GitHub</p>
-      </a>
-    </header>
+    <nav className="w-full flex justify-center h-16">
+      <div className="w-full  flex justify-between items-center text-sm text-foreground">
+        <Logo color="text-[#007ACC]" />
+        <Button asChild size="default">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/ahmedsomaa"
+          >
+            Submit
+          </a>
+        </Button>
+      </div>
+    </nav>
   );
 }