mirror of
https://github.com/0xShay/ticketchain.git
synced 2026-01-11 05:03:26 +00:00
ash was here part 4
This commit is contained in:
@@ -44,13 +44,36 @@ const ListingPage: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
{eventDetails ? (
|
<video
|
||||||
<EventDescription eventDetails={eventDetails} />
|
autoPlay
|
||||||
) : (
|
loop
|
||||||
<p>Loading...</p>
|
muted
|
||||||
)}
|
className="w-full h-full object-cover z-0"
|
||||||
<Footer />
|
style={{ position: 'absolute', top: 0, left: 0 }}
|
||||||
|
>
|
||||||
|
<source src="/BGVid3.mp4" type="video/mp4" />
|
||||||
|
<source src="/BGVid3.webm" type="video/webm" />
|
||||||
|
Your browser does not support the video tag.
|
||||||
|
</video>
|
||||||
|
<div className="absolute inset-0 bg-black opacity-50 z-10" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-20">
|
||||||
|
<Header />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-10">
|
||||||
|
{eventDetails ? (
|
||||||
|
<EventDescription eventDetails={eventDetails} />
|
||||||
|
) : (
|
||||||
|
<p>Loading...</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-20">
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
'use client';
|
'use client';
|
||||||
import React, { useEffect, useState, useRef, Suspense } from 'react';
|
import React, { Suspense, useEffect, useState } from 'react';
|
||||||
import { useRouter } from 'next/navigation'; // Import useRouter for routing
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
import Header from '../../components/custom/header';
|
import Header from '../../components/custom/header';
|
||||||
import Footer from '../../components/custom/footer';
|
import Footer from '../../components/custom/footer';
|
||||||
import { useSearchParams } from 'next/navigation';
|
import { p } from 'framer-motion/client';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
interface Event {
|
interface Event {
|
||||||
EventID: number;
|
EventID: number;
|
||||||
@@ -60,9 +62,14 @@ const fetchEvents = (): Event[] => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const EventsPage: React.FC = () => {
|
const EventsPage: React.FC = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const initialQuery = searchParams?.get('q') || '';
|
||||||
|
const sortRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
const filterRef = React.useRef<HTMLDivElement>(null);
|
||||||
const [events, setEvents] = useState<Event[]>([]);
|
const [events, setEvents] = useState<Event[]>([]);
|
||||||
const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
|
const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
|
||||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
const [searchQuery, setSearchQuery] = useState<string>(initialQuery);
|
||||||
const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
|
const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
|
||||||
const [sortOption, setSortOption] = useState<string>('');
|
const [sortOption, setSortOption] = useState<string>('');
|
||||||
const [filterOptions, setFilterOptions] = useState<string[]>([]);
|
const [filterOptions, setFilterOptions] = useState<string[]>([]);
|
||||||
@@ -70,28 +77,24 @@ const EventsPage: React.FC = () => {
|
|||||||
const [showSortMenu, setShowSortMenu] = useState<boolean>(false);
|
const [showSortMenu, setShowSortMenu] = useState<boolean>(false);
|
||||||
const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);
|
const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);
|
||||||
|
|
||||||
const sortRef = useRef<HTMLDivElement>(null);
|
|
||||||
const filterRef = useRef<HTMLDivElement>(null);
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const eventsData = fetchEvents();
|
const eventsData = fetchEvents();
|
||||||
setEvents(eventsData);
|
setEvents(eventsData);
|
||||||
setFilteredEvents(eventsData);
|
setFilteredEvents(eventsData);
|
||||||
}, []);
|
|
||||||
|
|
||||||
const SearchBox = () => {
|
if (initialQuery) {
|
||||||
setSearchQuery(useSearchParams().get('q') || '');
|
setFilteredEvents(
|
||||||
return (
|
eventsData.filter((event) =>
|
||||||
<input
|
['name', 'date', 'location', 'description', 'host'].some((key) =>
|
||||||
type="text"
|
event[key as keyof Event]
|
||||||
placeholder="Search events..."
|
.toString()
|
||||||
value={searchQuery}
|
.toLowerCase()
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
.includes(initialQuery.toLowerCase())
|
||||||
className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
|
)
|
||||||
/>
|
)
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
}, [initialQuery]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let filtered = events.filter((event) =>
|
let filtered = events.filter((event) =>
|
||||||
@@ -160,41 +163,35 @@ const EventsPage: React.FC = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleEventClick = (eventID: number) => {
|
const handleEventClick = (eventID: number) => {
|
||||||
router.push(`/events/${eventID}`); // Route to the specific event page
|
router.push(`/events/${eventID}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative min-h-screen overflow-hidden">
|
<Suspense fallback={<p>Loading...</p>}>
|
||||||
<Header />
|
<div className="relative min-h-screen overflow-hidden">
|
||||||
<video
|
<Header />
|
||||||
autoPlay
|
<video
|
||||||
loop
|
autoPlay
|
||||||
muted
|
loop
|
||||||
className="absolute inset-0 w-full h-full object-cover z-0"
|
muted
|
||||||
src="BGVid1.mp4"
|
className="absolute inset-0 w-full h-full object-cover z-0"
|
||||||
>
|
src="BGVid1.mp4"
|
||||||
Your browser does not support the video tag.
|
>
|
||||||
</video>
|
Your browser does not support the video tag.
|
||||||
<div className="absolute inset-0 bg-black opacity-50 z-10"></div>
|
</video>
|
||||||
|
<div className="absolute inset-0 bg-black opacity-50 z-10"></div>
|
||||||
|
|
||||||
<div className="relative z-20 container mx-auto p-4 pt-16">
|
<div className="relative z-20 container mx-auto p-4 pt-16">
|
||||||
<div className="mb-6">
|
<Suspense fallback={<p>Loading...</p>}>
|
||||||
<Suspense
|
<input
|
||||||
fallback={
|
type="text"
|
||||||
<input
|
placeholder="Search events..."
|
||||||
type="text"
|
value={searchQuery}
|
||||||
placeholder="Search events..."
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
disabled={true}
|
className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
|
||||||
value="loading..."
|
/>
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
|
||||||
className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SearchBox />
|
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<div className="flex mt-4 space-x-4">
|
<div className="flex mt-4 space-x-4">
|
||||||
{/* Sort Button and Dropdown */}
|
|
||||||
<div className="relative" ref={sortRef}>
|
<div className="relative" ref={sortRef}>
|
||||||
<button
|
<button
|
||||||
className="bg-blue-500 text-white px-4 py-2 rounded"
|
className="bg-blue-500 text-white px-4 py-2 rounded"
|
||||||
@@ -204,43 +201,22 @@ const EventsPage: React.FC = () => {
|
|||||||
</button>
|
</button>
|
||||||
{showSortMenu && (
|
{showSortMenu && (
|
||||||
<div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
|
<div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
|
||||||
<button
|
<button onClick={() => setSortOption('price-asc')}>
|
||||||
onClick={() => {
|
|
||||||
setSortOption('price-asc');
|
|
||||||
setShowSortMenu(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Price Ascending
|
Price Ascending
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button onClick={() => setSortOption('price-desc')}>
|
||||||
onClick={() => {
|
|
||||||
setSortOption('price-desc');
|
|
||||||
setShowSortMenu(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Price Descending
|
Price Descending
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button onClick={() => setSortOption('date-asc')}>
|
||||||
onClick={() => {
|
|
||||||
setSortOption('date-asc');
|
|
||||||
setShowSortMenu(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Date Ascending
|
Date Ascending
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button onClick={() => setSortOption('date-desc')}>
|
||||||
onClick={() => {
|
|
||||||
setSortOption('date-desc');
|
|
||||||
setShowSortMenu(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Date Descending
|
Date Descending
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Filter Button and Dropdown */}
|
|
||||||
<div className="relative" ref={filterRef}>
|
<div className="relative" ref={filterRef}>
|
||||||
<button
|
<button
|
||||||
className="bg-blue-500 text-white px-4 py-2 rounded"
|
className="bg-blue-500 text-white px-4 py-2 rounded"
|
||||||
@@ -254,14 +230,13 @@ const EventsPage: React.FC = () => {
|
|||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={filterOptions.includes('limited')}
|
checked={filterOptions.includes('limited')}
|
||||||
onChange={(e) => {
|
onChange={(e) =>
|
||||||
const newFilters = e.target.checked
|
setFilterOptions(
|
||||||
? [...filterOptions, 'limited']
|
e.target.checked
|
||||||
: filterOptions.filter(
|
? [...filterOptions, 'limited']
|
||||||
(filter) => filter !== 'limited'
|
: filterOptions.filter((opt) => opt !== 'limited')
|
||||||
);
|
)
|
||||||
setFilterOptions(newFilters);
|
}
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<span className="ml-2">Limited Tickets</span>
|
<span className="ml-2">Limited Tickets</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -269,14 +244,13 @@ const EventsPage: React.FC = () => {
|
|||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={filterOptions.includes('future')}
|
checked={filterOptions.includes('future')}
|
||||||
onChange={(e) => {
|
onChange={(e) =>
|
||||||
const newFilters = e.target.checked
|
setFilterOptions(
|
||||||
? [...filterOptions, 'future']
|
e.target.checked
|
||||||
: filterOptions.filter(
|
? [...filterOptions, 'future']
|
||||||
(filter) => filter !== 'future'
|
: filterOptions.filter((opt) => opt !== 'future')
|
||||||
);
|
)
|
||||||
setFilterOptions(newFilters);
|
}
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<span className="ml-2">Future Events</span>
|
<span className="ml-2">Future Events</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -284,85 +258,58 @@ const EventsPage: React.FC = () => {
|
|||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={filterOptions.includes('past')}
|
checked={filterOptions.includes('past')}
|
||||||
onChange={(e) => {
|
onChange={(e) =>
|
||||||
const newFilters = e.target.checked
|
setFilterOptions(
|
||||||
? [...filterOptions, 'past']
|
e.target.checked
|
||||||
: filterOptions.filter((filter) => filter !== 'past');
|
? [...filterOptions, 'past']
|
||||||
setFilterOptions(newFilters);
|
: filterOptions.filter((opt) => opt !== 'past')
|
||||||
}}
|
)
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<span className="ml-2">Past Events</span>
|
<span className="ml-2">Past Events</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
{/* Filter by Host */}
|
|
||||||
<select
|
|
||||||
value={selectedHost}
|
|
||||||
onChange={(e) => setSelectedHost(e.target.value)}
|
|
||||||
className="mt-1 block w-full border-gray-300 rounded"
|
|
||||||
>
|
|
||||||
<option value="">All Hosts</option>
|
|
||||||
{Array.from(new Set(events.map((event) => event.host))).map(
|
|
||||||
(host) => (
|
|
||||||
<option key={host} value={host}>
|
|
||||||
{host}
|
|
||||||
</option>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<h2 className="text-2xl font-semibold text-white mb-4">
|
<h2 className="text-2xl font-semibold text-white mb-4">
|
||||||
Available Events
|
Available Events
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-1 gap-6">
|
<div className="grid grid-cols-1 gap-6">
|
||||||
{filteredEvents.map((event) => (
|
{filteredEvents.map((event) => (
|
||||||
<button
|
<button
|
||||||
key={event.EventID}
|
key={event.EventID}
|
||||||
className="relative flex bg-white p-4 rounded-lg shadow-lg text-left"
|
className="relative flex bg-white p-4 rounded-lg shadow-lg text-left"
|
||||||
onClick={() => handleEventClick(event.EventID)}
|
onClick={() => handleEventClick(event.EventID)}
|
||||||
onMouseEnter={() => setHoveredEventId(event.EventID)}
|
onMouseEnter={() => setHoveredEventId(event.EventID)}
|
||||||
onMouseLeave={() => setHoveredEventId(null)}
|
onMouseLeave={() => setHoveredEventId(null)}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={event.imageUrl}
|
src={event.imageUrl}
|
||||||
alt={event.name}
|
alt={event.name}
|
||||||
className="w-1/4 rounded-lg"
|
className="w-1/4 rounded-lg"
|
||||||
/>
|
/>
|
||||||
<div className="ml-4 relative">
|
<div className="ml-4 relative">
|
||||||
<h3 className="text-xl font-bold">{event.name}</h3>
|
<h3 className="text-xl font-bold">{event.name}</h3>
|
||||||
<p className="text-gray-600">{event.date}</p>
|
<p className="text-gray-600">{event.date}</p>
|
||||||
<p className="text-gray-600">{event.location}</p>
|
<p className="text-gray-600">{event.location}</p>
|
||||||
<p className="text-gray-800 font-semibold">
|
<p className="text-gray-800 font-semibold">
|
||||||
${event.ticketPrice.toFixed(2)}
|
${event.ticketPrice.toFixed(2)}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-gray-600">Host: {event.host}</p>
|
<p className="text-gray-600">Host: {event.host}</p>
|
||||||
{event.ticketsSold / event.capacity >= 0.9 && (
|
</div>
|
||||||
<div className="mt-2 p-2 bg-yellow-300 text-black rounded">
|
</button>
|
||||||
Limited Tickets Remaining!
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</section>
|
||||||
</div>
|
</main>
|
||||||
<div className="absolute top-0 right-0 flex items-center space-x-2">
|
</div>
|
||||||
{hoveredEventId === event.EventID && (
|
<Footer />
|
||||||
<div className="top-0 left-4 w-full bg-white p-4 shadow-lg rounded-lg z-10">
|
|
||||||
<p>{event.description}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
</Suspense>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
73
app/page.tsx
73
app/page.tsx
@@ -1,43 +1,59 @@
|
|||||||
'use client';
|
'use client';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import Header from '../components/custom/header';
|
import Header from '../components/custom/header';
|
||||||
import Footer from '../components/custom/footer';
|
import Footer from '../components/custom/footer';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import FeaturedEvent from '@/components/custom/FeaturedEvent';
|
import FeaturedEvent from '@/components/custom/FeaturedEvent';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { FlipWords } from '@/components/ui/flip-words';
|
import { FlipWords } from '@/components/ui/flip-words';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [isClient, setIsClient] = useState(false);
|
const [isClient, setIsClient] = useState(false);
|
||||||
const inputRef: any = useRef(null);
|
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsClient(true);
|
setIsClient(true);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
function searchForEvents() {
|
function searchForEvents() {
|
||||||
if (inputRef.current.value == '') return;
|
if (inputRef.current?.value === '') {
|
||||||
router.replace('/events?q=' + encodeURIComponent(inputRef.current.value));
|
alert('Please enter a search term.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (inputRef.current) {
|
||||||
|
router.replace('/events?q=' + encodeURIComponent(inputRef.current.value));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Handler to check if the Enter key is pressed
|
||||||
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
searchForEvents();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const words = [
|
const words = [
|
||||||
|
'event',
|
||||||
'adventure',
|
'adventure',
|
||||||
'concert',
|
'concert',
|
||||||
'outing',
|
'outing',
|
||||||
'journey',
|
'journey',
|
||||||
'hackathon',
|
'hackathon',
|
||||||
'conference',
|
'conference',
|
||||||
|
'festival',
|
||||||
|
'workshop',
|
||||||
|
'seminar',
|
||||||
|
'experience',
|
||||||
|
'activity',
|
||||||
|
'gathering',
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
<div className="relative min-h-screen overflow-hidden">
|
<div className="relative min-h-screen overflow-hidden">
|
||||||
{/* Video Background */}
|
|
||||||
{isClient && (
|
{isClient && (
|
||||||
<video
|
<video
|
||||||
autoPlay
|
autoPlay
|
||||||
@@ -49,11 +65,7 @@ export default function Home() {
|
|||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Dark Overlay for Enhanced Readability */}
|
|
||||||
<div className="absolute inset-0 bg-black opacity-50 z-10"></div>
|
<div className="absolute inset-0 bg-black opacity-50 z-10"></div>
|
||||||
|
|
||||||
{/* Page Content Over the Video */}
|
|
||||||
<div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-20">
|
<div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-20">
|
||||||
<div className="container mx-auto p-4">
|
<div className="container mx-auto p-4">
|
||||||
<div className="container mx-auto justify-center items-center p-4">
|
<div className="container mx-auto justify-center items-center p-4">
|
||||||
@@ -63,16 +75,19 @@ export default function Home() {
|
|||||||
words={words}
|
words={words}
|
||||||
className="text-pink-500 text-opacity-75 pl-3.5"
|
className="text-pink-500 text-opacity-75 pl-3.5"
|
||||||
/>
|
/>
|
||||||
on the Flare blockchain.
|
<br />
|
||||||
|
<p className="text-lg text-white text-opacity-75 mt-3">
|
||||||
|
Book securely with our leading Blockchain technology.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-center mt-6 flex-col gap-4">
|
<div className="flex items-center justify-center mt-6 flex-col gap-4">
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search for your next experience..."
|
placeholder="Search for your next experience..."
|
||||||
className="flex w-full rounded-md border border-input bg-white bg-opacity-50 placeholder:text-black px-4 py-6 text-lg shadow-sm"
|
className="flex w-full rounded-md border border-input bg-white bg-opacity-50 placeholder:text-black px-4 py-6 text-lg shadow-sm"
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
|
onKeyDown={handleKeyDown} // Add key event handler here
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
className="bg-pink-600 bg-opacity-50 text-white px-4 py-6 text-lg w-full hover:bg-pink-500"
|
className="bg-pink-600 bg-opacity-50 text-white px-4 py-6 text-lg w-full hover:bg-pink-500"
|
||||||
@@ -82,16 +97,14 @@ export default function Home() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<main>
|
<main>
|
||||||
<section className="mb-8 mt-4 mx-auto grid grid-cols-4 gap-4">
|
<section className="mb-8 mt-4 mx-auto grid grid-cols-4 col-span-4 gap-4 place-content-center">
|
||||||
<FeaturedEvent
|
<FeaturedEvent
|
||||||
name="FAB XO Halloween"
|
name="FAB XO Halloween"
|
||||||
description="Halloween is upon us and is one of the biggest nights of the FAB XO calendar. Fancy dress is encouraged! So have your fancy dress ready and we look forward to seeing who have the best fancy dress on the night! As a special treat we will be serving our very own witches brew!!!"
|
description="Halloween is upon us and is one of the biggest nights of the FAB XO calendar. Fancy dress is encouraged! So have your fancy dress ready and we look forward to seeing who have the best fancy dress on the night! As a special treat we will be serving our very own witches brew!!!"
|
||||||
location="Birmingham, UK"
|
location="Birmingham, UK"
|
||||||
eventStartDate={1729980000}
|
eventStartDate={1729980000}
|
||||||
eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
|
eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
|
||||||
imageURL={
|
imageURL="https://www.guildofstudents.com/asset/Event/7572/Halloween-Fab-XO-Web-Event.jpg"
|
||||||
'https://www.guildofstudents.com/asset/Event/7572/Halloween-Fab-XO-Web-Event.jpg'
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<FeaturedEvent
|
<FeaturedEvent
|
||||||
name="Halls Halloween Spooktacular"
|
name="Halls Halloween Spooktacular"
|
||||||
@@ -99,9 +112,23 @@ export default function Home() {
|
|||||||
location="Birmingham, UK"
|
location="Birmingham, UK"
|
||||||
eventStartDate={1730307600}
|
eventStartDate={1730307600}
|
||||||
eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
|
eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
|
||||||
imageURL={
|
imageURL="https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png"
|
||||||
'https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png'
|
/>
|
||||||
}
|
<FeaturedEvent
|
||||||
|
name="Halls Halloween Spooktacular"
|
||||||
|
description="Put on your spookiest costume and head on down to Pritchatts Park and join your Event Activators for our ResLife SPOOKTACULAR on Wednesday 30th October 5-8pm."
|
||||||
|
location="Birmingham, UK"
|
||||||
|
eventStartDate={1730307600}
|
||||||
|
eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
|
||||||
|
imageURL="https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png"
|
||||||
|
/>
|
||||||
|
<FeaturedEvent
|
||||||
|
name="Halls Halloween Spooktacular"
|
||||||
|
description="Put on your spookiest costume and head on down to Pritchatts Park and join your Event Activators for our ResLife SPOOKTACULAR on Wednesday 30th October 5-8pm."
|
||||||
|
location="Birmingham, UK"
|
||||||
|
eventStartDate={1730307600}
|
||||||
|
eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
|
||||||
|
imageURL="https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png"
|
||||||
/>
|
/>
|
||||||
<FeaturedEvent
|
<FeaturedEvent
|
||||||
name="Housing Fair"
|
name="Housing Fair"
|
||||||
@@ -109,9 +136,7 @@ export default function Home() {
|
|||||||
location="Birmingham, UK"
|
location="Birmingham, UK"
|
||||||
eventStartDate={1730804400}
|
eventStartDate={1730804400}
|
||||||
eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
|
eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
|
||||||
imageURL={
|
imageURL="https://www.guildofstudents.com/asset/Event/41111/Housing-Fair-Web-Event.png"
|
||||||
'https://www.guildofstudents.com/asset/Event/41111/Housing-Fair-Web-Event.png'
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ const EventDescription: React.FC<EventDescriptionProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="pt-10 pb-16 px-6 bg-gradient-to-r from-blue-50 to-gray-50 rounded-xl shadow-lg max-w-4xl mx-auto">
|
<Card className="pt-5 px-6 bg-gradient-to-r from-slate-400 to-slate-200 rounded-xl shadow-lg max-w-4xl mt-20 mx-auto">
|
||||||
<CardHeader className="flex flex-col items-start space-y-4">
|
<CardHeader className="flex flex-col items-start space-y-4">
|
||||||
<h1 className="text-3xl font-semibold text-gray-800">
|
<h1 className="text-3xl font-semibold text-gray-800">
|
||||||
{eventDetails.name}
|
{eventDetails.name}
|
||||||
|
|||||||
@@ -36,7 +36,10 @@ const Header = () => {
|
|||||||
></div>
|
></div>
|
||||||
<div className="container mx-auto px-6 py-4 flex justify-between items-center">
|
<div className="container mx-auto px-6 py-4 flex justify-between items-center">
|
||||||
<Link href="/" legacyBehavior>
|
<Link href="/" legacyBehavior>
|
||||||
<a className="text-2xl font-semibold text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300">
|
<a
|
||||||
|
className="text-2xl font-semibold text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
|
||||||
|
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
|
||||||
|
>
|
||||||
TicketChain
|
TicketChain
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
@@ -72,7 +75,7 @@ const Header = () => {
|
|||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li className="relative bottom-1">
|
||||||
<MetaMask />
|
<MetaMask />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -97,7 +97,11 @@ function MetaMaskConnect() {
|
|||||||
{isConnected ? (
|
{isConnected ? (
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button variant="link" className="text-white">
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-white"
|
||||||
|
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
|
||||||
|
>
|
||||||
{account && `${account.slice(0, 6)}...${account.slice(-4)}`}
|
{account && `${account.slice(0, 6)}...${account.slice(-4)}`}
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
@@ -116,7 +120,11 @@ function MetaMaskConnect() {
|
|||||||
onClick={connect}
|
onClick={connect}
|
||||||
className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
|
className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
|
||||||
>
|
>
|
||||||
<WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
|
<WalletIcon
|
||||||
|
className="mr-2 h-4 w-4"
|
||||||
|
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
|
||||||
|
/>{' '}
|
||||||
|
Connect Wallet
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,8 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {};
|
const nextConfig = {
|
||||||
|
experimental: {
|
||||||
|
missingSuspenseWithCSRBailout: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|||||||
10
package-lock.json
generated
10
package-lock.json
generated
@@ -6794,6 +6794,7 @@
|
|||||||
"integrity": "sha512-bdM5cEGCOhDSwminryHJbRmXc1x7dPKg6Pqns3qyTwFlxsqUgxE29lsERS3PlIW1HTjoIGMUqsk1zQQwST1Yxw==",
|
"integrity": "sha512-bdM5cEGCOhDSwminryHJbRmXc1x7dPKg6Pqns3qyTwFlxsqUgxE29lsERS3PlIW1HTjoIGMUqsk1zQQwST1Yxw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
|
"optional": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"node-gyp-build": "4.3.0"
|
"node-gyp-build": "4.3.0"
|
||||||
},
|
},
|
||||||
@@ -6806,6 +6807,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.3.0.tgz",
|
||||||
"integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==",
|
"integrity": "sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"node-gyp-build": "bin.js",
|
"node-gyp-build": "bin.js",
|
||||||
"node-gyp-build-optional": "optional.js",
|
"node-gyp-build-optional": "optional.js",
|
||||||
@@ -19793,6 +19795,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-5.0.1.tgz",
|
||||||
"integrity": "sha512-lDFs9AAIaWP9UCdtWrotXWWF9t8PWgQDcxqgAnpM9rMqxb3Oaq2J0thzPVSxBwdJgyQtkU/sYtFtbM1RSt/iYA==",
|
"integrity": "sha512-lDFs9AAIaWP9UCdtWrotXWWF9t8PWgQDcxqgAnpM9rMqxb3Oaq2J0thzPVSxBwdJgyQtkU/sYtFtbM1RSt/iYA==",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"elliptic": "^6.5.7",
|
"elliptic": "^6.5.7",
|
||||||
"node-addon-api": "^5.0.0",
|
"node-addon-api": "^5.0.0",
|
||||||
@@ -19805,12 +19808,14 @@
|
|||||||
"node_modules/secp256k1/node_modules/bn.js": {
|
"node_modules/secp256k1/node_modules/bn.js": {
|
||||||
"version": "4.12.0",
|
"version": "4.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
|
||||||
"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
|
"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
|
||||||
|
"peer": true
|
||||||
},
|
},
|
||||||
"node_modules/secp256k1/node_modules/elliptic": {
|
"node_modules/secp256k1/node_modules/elliptic": {
|
||||||
"version": "6.6.0",
|
"version": "6.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.0.tgz",
|
||||||
"integrity": "sha512-dpwoQcLc/2WLQvJvLRHKZ+f9FgOdjnq11rurqwekGQygGPsYSK29OMMD2WalatiqQ+XGFDglTNixpPfI+lpaAA==",
|
"integrity": "sha512-dpwoQcLc/2WLQvJvLRHKZ+f9FgOdjnq11rurqwekGQygGPsYSK29OMMD2WalatiqQ+XGFDglTNixpPfI+lpaAA==",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bn.js": "^4.11.9",
|
"bn.js": "^4.11.9",
|
||||||
"brorand": "^1.1.0",
|
"brorand": "^1.1.0",
|
||||||
@@ -19824,7 +19829,8 @@
|
|||||||
"node_modules/secp256k1/node_modules/node-addon-api": {
|
"node_modules/secp256k1/node_modules/node-addon-api": {
|
||||||
"version": "5.1.0",
|
"version": "5.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
|
||||||
"integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
|
"integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==",
|
||||||
|
"peer": true
|
||||||
},
|
},
|
||||||
"node_modules/seedrandom": {
|
"node_modules/seedrandom": {
|
||||||
"version": "3.0.5",
|
"version": "3.0.5",
|
||||||
|
|||||||
BIN
public/BGVid3.mp4
Normal file
BIN
public/BGVid3.mp4
Normal file
Binary file not shown.
Reference in New Issue
Block a user