Shay/ticketchain
1
0
Fork 0
mirror of https://github.com/0xShay/ticketchain.git synced 2026-01-11 21:23:24 +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

52
app/Home.tsx
View File

@@ -3,26 +3,38 @@ import Footer from '../components/custom/footer';
export default function Home() { export default function Home() {
return ( return (
<div className="container mx-auto p-4"> <>
<div> <Header />
<Header /> <div className="bg-gradient-to-b from-blue-900 to-gray-900 min-h-screen pt-16">
{/* Other page content */} <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> </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>
); );
} }

0
app/TicketListings.tsx Normal file
View File

6
app/page.tsx
View File

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

98
components/custom/header.tsx
View File

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