🧩 Converted header into separate component.

app/Home.tsx

@@ -1,33 +1,12 @@
+import Header from '../components/custom/header';
+
 export default function Home() {
   return (
     <div className="container mx-auto p-4">
-      <header className="header text-center mb-8">
+      <div>
-        <h1 className="text-4xl font-bold text-blue-700">Ticket Chain</h1>
+        <Header />
-        <nav className="nav mt-4">
+        {/* Other page content */}
-          <ul className="flex justify-center space-x-4">
+      </div>
-            <li>
-              <a href="/" className="text-blue-500 hover:text-blue-700">
-                Home
-              </a>
-            </li>
-            <li>
-              <a href="/events" className="text-blue-500 hover:text-blue-700">
-                Events
-              </a>
-            </li>
-            <li>
-              <a href="/contact" className="text-blue-500 hover:text-blue-700">
-                Contact
-              </a>
-            </li>
-          </ul>
-        </nav>
-        <input
-          type="text"
-          placeholder="Search events..."
-          className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
-        />
-      </header>
       <main>
         <section className="mb-8">
           <h2 className="text-2xl font-semibold mb-4">Featured Events</h2>

components/custom/header.tsx

@@ -0,0 +1,42 @@
+// components/Header.js
+import React from 'react';
+import Link from 'next/link';
+
+const Header = () => (
+  <div className="container mx-auto p-4">
+    <header className="header text-center mb-8">
+      <h1 className="text-4xl font-bold text-blue-700">Ticket Chain</h1>
+      <nav className="nav mt-4">
+        <ul className="flex justify-center space-x-4">
+          <li>
+            <Link href="/" className="text-blue-500 hover:text-blue-700">
+              Home
+            </Link>
+          </li>
+          <li>
+            <Link href="/events" className="text-blue-500 hover:text-blue-700">
+              Events
+            </Link>
+          </li>
+          <li>
+            <Link href="/contact" className="text-blue-500 hover:text-blue-700">
+              Contact
+            </Link>
+          </li>
+          <li>
+            <button className="bg-blue-500 text-white px-4 rounded hover:bg-blue-700">
+              Login
+            </button>
+          </li>
+        </ul>
+      </nav>
+      <input
+        type="text"
+        placeholder="Search events..."
+        className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
+      />
+    </header>
+  </div>
+);
+
+export default Header;

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {