From ed8e2b5016d7c01645897880a9d719603210f39a Mon Sep 17 00:00:00 2001
From: Adwit Mukherji <66975870+4dw1tz@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:44:07 +0100
Subject: [PATCH] asthetic header and body

---
 app/Home.tsx                 | 52 +++++++++++--------
 app/TicketListings.tsx       |  0
 app/page.tsx                 |  6 ++-
 components/custom/header.tsx | 98 ++++++++++++++++++++++--------------
 4 files changed, 97 insertions(+), 59 deletions(-)
 create mode 100644 app/TicketListings.tsx

diff --git a/app/Home.tsx b/app/Home.tsx
index 642da0f..d86a4e9 100644
--- a/app/Home.tsx
+++ b/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 */}
+    <>
+      <Header />
+      <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 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 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>
+          </main>
+          <Footer />
+        </div>
       </div>
-      <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>
-        </section>
-        <section>
-          <h2 className="text-2xl font-semibold mb-4">Upcoming Events</h2>
-          <ul className="list-disc list-inside">
-            <li>Event 1 - Date</li>
-            <li>Event 2 - Date</li>
-            <li>Event 3 - Date</li>
-          </ul>
-        </section>
-        <Footer />
-      </main>
-    </div>
+    </>
   );
 }
diff --git a/app/TicketListings.tsx b/app/TicketListings.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/page.tsx b/app/page.tsx
index 1ca9146..03b69a9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,9 @@
 import Home from './Home';
 
 export default function Page() {
-  return <Home />;
+  return (
+    <>
+      <Home />
+    </>
+  );
 }
diff --git a/components/custom/header.tsx b/components/custom/header.tsx
index b6ada36..134af8b 100644
--- a/components/custom/header.tsx
+++ b/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">
-          <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>
-);
+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="/" legacyBehavior>
+                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                  Home
+                </a>
+              </Link>
+            </li>
+            <li>
+              <Link href="/events" legacyBehavior>
+                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                  Events
+                </a>
+              </Link>
+            </li>
+            <li>
+              <Link href="/contact" legacyBehavior>
+                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                  Contact
+                </a>
+              </Link>
+            </li>
+            <li>
+              <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>
+      </div>
+    </div>
+  );
+};
 
 export default Header;