Shay/ticketchain
1
0
Fork 0
mirror of https://github.com/0xShay/ticketchain.git synced 2026-01-11 13:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

asthetic header and body

Browse Source
This commit is contained in:
Adwit Mukherji
2024-10-25 16:44:07 +01:00
parent 2788783857
commit ed8e2b5016
4 changed files with 97 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
components/custom/header.tsx
View File

@@ -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;