asthetic header and body

app/Home.tsx

@@ -3,26 +3,38 @@ import Footer from '../components/custom/footer';
 
 export default function Home() {
   return (
-    <div className="container mx-auto p-4">
-      <div>
+    <>
       <Header />
-        {/* Other page content */}
-      </div>
+      <div className="bg-gradient-to-b from-blue-900 to-gray-900 min-h-screen pt-16">
+        <div className="container mx-auto p-4">
+          <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"
+          />
           <main>
             <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">Featured Events</h2>
-          <p className="text-gray-600">No events available at the moment.</p>
+              <h2 className="text-2xl font-semibold text-white mb-4">
+                Featured Events
+              </h2>
+              <p className="text-gray-300">
+                No events available at the moment.
+              </p>
             </section>
             <section>
-          <h2 className="text-2xl font-semibold mb-4">Upcoming Events</h2>
-          <ul className="list-disc list-inside">
+              <h2 className="text-2xl font-semibold text-white mb-4">
+                Upcoming Events
+              </h2>
+              <ul className="list-disc list-inside text-gray-300">
                 <li>Event 1 - Date</li>
                 <li>Event 2 - Date</li>
                 <li>Event 3 - Date</li>
               </ul>
             </section>
-        <Footer />
           </main>
+          <Footer />
         </div>
+      </div>
+    </>
   );
 }

app/page.tsx

@@ -1,5 +1,9 @@
 import Home from './Home';
 
 export default function Page() {
-  return <Home />;
+  return (
+    <>
+      <Home />
+    </>
+  );
 }

components/custom/header.tsx

@@ -1,42 +1,64 @@
-// components/Header.js
-import React from 'react';
+'use client';
+import React, { useState } 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">
+const Header = () => {
+  const [mouseX, setMouseX] = useState(0);
+  const [mouseY, setMouseY] = useState(0);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    setMouseX(e.clientX);
+    setMouseY(e.clientY);
+  };
+
+  return (
+    <div
+      className="fixed top-0 left-0 right-0 backdrop-blur-md bg-opacity-60 z-50"
+      onMouseMove={handleMouseMove}
+    >
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          border: '1px solid transparent',
+          background: `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`,
+          backgroundClip: 'padding-box, border-box',
+        }}
+      ></div>
+      <div className="container mx-auto px-6 py-5 flex justify-between items-center">
+        <h1 className="text-2xl font-bold text-white">Ticket Chain</h1>
+        <nav className="nav">
+          <ul className="flex space-x-6">
             <li>
-            <Link href="/" className="text-blue-500 hover:text-blue-700">
+              <Link href="/" legacyBehavior>
+                <a className="text-white hover:text-blue-500 transition-colors duration-300">
                   Home
+                </a>
               </Link>
             </li>
             <li>
-            <Link href="/events" className="text-blue-500 hover:text-blue-700">
+              <Link href="/events" legacyBehavior>
+                <a className="text-white hover:text-blue-500 transition-colors duration-300">
                   Events
+                </a>
               </Link>
             </li>
             <li>
-            <Link href="/contact" className="text-blue-500 hover:text-blue-700">
+              <Link href="/contact" legacyBehavior>
+                <a className="text-white hover:text-blue-500 transition-colors duration-300">
                   Contact
+                </a>
               </Link>
             </li>
             <li>
-            <button className="bg-blue-500 text-white px-4 rounded hover:bg-blue-700">
+              <button className="bg-gradient-to-r from-blue-500 to-indigo-700 text-white px-4 py-1 rounded-full transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl">
                 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>
     </div>
   );
+};
 
 export default Header;