Skip to content

Commit

Permalink
[fix]bg
Browse files Browse the repository at this point in the history
  • Loading branch information
@keerthan-ns
keerthan-ns committed Jan 31, 2024
1 parent 3b828e0 commit a1a447b
Show file tree
Hide file tree
Showing 6 changed files with 704 additions and 359 deletions.
432 changes: 432 additions & 0 deletions public/assets/eventSlug/flare.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/eventSlug/flare.webp
View file
Binary file not shown.
221 changes: 58 additions & 163 deletions src/pages/event/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
PublishedEventsSlugDocument,
} from "@/src/generated/generated";
import { client } from "@/src/lib/apollo";
import styles from "./eventSlug.module.css";

import Image from "next/image";
import Link from "next/link";
Expand Down Expand Up @@ -75,151 +76,80 @@ function event({ event, error }: { event: Event; error: String }) {
};

return (
// <div className="bg-gradient-to-bl from-[#41acc9] via-[#075985] to-[#2d6aa6]">
// <div className="bg-[url('/assets/eventSlug/desertbg1.svg')] bg-cover bg-no-repeat bg-right-bottom">
// <div className=" bg-gradient-to-t from-primary-900 via-primary-800 to-primary-600 max-h-screen overflow-y-scroll no-scrollbar">
<div className="bg-[url('/assets/eventSlug/cover.svg')] bg-cover ">
{/* <img className="top-0 left-0 fixed h-screen w-full" src="/assets/eventslug/slugBg.svg" alt="bg"/> */}
<div className={`relative`}>
<Image
alt="events-bg"
src="/assets/eventSlug/cover.svg"
height={1920}
width={1080}
priority
className={`w-screen h-screen object-cover object-center top-0 left-0 absolute -z-10`}
/>
<div className={`absolute pointer-events-none h-full w-full opacity-90 bg-blue-600/30 backdrop-brightness-80 z-50 top-0 right-0`} />
{event ? (
// <section className="flex lg:flex-row flex-col gap-5 py-20 px-5 max-w-7xl mx-auto text-white">
// <section className="flex lg:flex-row flex-col gap-5 py-20 px-5 max-w-7xl mx-auto text-amber-900">
// <section className="sticky place-self-center grid grid-cols-1 lg:grid-cols-2 py-20 px-5 max-w-7xl mx-auto text-amber-900 h-screen overflow-y-hidden">
<section className="flex lg:flex-row flex-col gap-5 pt-20 px- max-w-7xl mx-auto text-amber-900 h-screen overflow-y-scroll lg:overflow-y-hidden">

{/* <section className="grid grid-flow-row lg:grid-flow-col gap-5 py-20 sm:px-5 max-w-7xl mx-auto text-amber-900 "> */}
{/* <div className="basis-3/4 grow-0 space-y-4 sm:space-y-10 bg-black/20 backdrop-blur-sm p-0 sm:p-7 rounded-md"> */}
<div className="lg:h-full lg:overflow-y-scroll lg:no-scrollbar px-3 lg:pb-8">
<div className="main">
<div className="parchment"/>
<div className="contain">
{/* <div className="basis-3/4 grow-0 space-y-4 sm:space-y-10 p-0 sm:p-7 rounded-md"> */}
{/* <div className="basis-3/4 grow-0 space-y-4 sm:space-y-10 rounded-md mapicon"> */}
<div className=" grow-0 space-y-4 sm:space-y-10 rounded-md mapicon">
<section className={`flex lg:flex-row flex-col gap-5 pt-20 md:pt-24 px- max-w-7xl mx-auto text-amber-900 h-screen overflow-y-scroll lg:overflow-y-hidden`}>
<div className={`overflow-x-visible lg:h-full lg:overflow-y-scroll lg:no-scrollbar px-3 lg:pb-8`}>
<div className={`${styles.main}`}>
<div className={`${styles.parchment}`} />
<div className={`${styles.contain}`}>
<div className={` grow-0 space-y-4 sm:space-y-10 rounded-md ${styles.mapicon}`}>
{event.image && (
<Image
src={event.image as string}
className="w-full sm:rounded-md rounded-t-md"
className={`w-full sm:rounded-md rounded-t-md`}
alt={event.name}
width={1000}
height={1000}
/>
)}
<h1
// className={`titleFont capitalize text-2xl sm:text-4xl px-4 pb-0 sm:p-0 font-bold text-white`}
className={`font-VikingHell capitalize text-2xl sm:text-4xl px-4 pb-0 sm:p-0 font-bold`}
>
{event.name}
</h1>
<div className="px-4 pb-4 sm:p-0">
<div className={`px-4 pb-4 sm:p-0`}>
<EventDetails details={event.description as string} />
</div>
</div>
</div>
</div>
</div>
{/* <div className="basis-1/4 shrink-0 flex flex-col gap-5 items-center rounded-md sm:bg-black/20 backdrop-blur-sm p-0 sm:p-7"> */}
<div className="lg:h-full lg:overflow-y-scroll lg:no-scrollbar px-3 pb-8 w-auto shrink-0 flex flex-col gap-5 items-center rounded-md">
{/* <div className="space-y-1.5 order-2 max-w-2xl sm:w-[300px]">
<h2 className={`titleFont mb-2 text-2xl`}>Details</h2>
<div className="flex flex-wrap mt-2 gap-1.5 w-full bodyFont">
{getEventAttributes().map((attr) =>
attr.text ? (
<div
key={attr.name}
className="max-w-[100%] flex flex-wrap break-words text-semibold px-3 py-2 text-white bg-black/20 shrink-0 text-sm rounded-sm grow gap-1 items-center"
>
{<attr.Icon />}
<p>
{attr.name} {': '}
</p>
<p className="leading-4">{attr.text}</p>
</div>
) : (
<></>
)
)}
</div>
<div className="text-sm">
<div className="grid grid-cols-1 gap-1.5">
{event.rounds.map((round) => (
<div
key={round.roundNo}
className="py-2 text-white rounded-sm bg-black/20 space-y-2 px-3 items-center bodyFont"
>
<div className=" font-semibold ">
Round {round.roundNo}
</div>
<div className="space-y-2">
<p className="flex gap-2 items-center">
<BsFillCalendar2WeekFill />
{round.date &&
new Date(round.date).toLocaleDateString("en-IN", {
day: "numeric",
month: "short",
})}
</p>
<p className="flex gap-2 items-center">
<BiTimeFive />
{round.date &&
new Date(round.date).toLocaleTimeString('en-IN', {
hour: 'numeric',
minute: 'numeric',
hour12: true,
})}
</p>
</div>
</div>
))}
</div>
</div>
</div>
<div className='w-full order-1'>
{event.name.toLowerCase() !== 'lazzerena' ? <EventRegistration
fees={event.fees}
eventId={event.id}
type={event.eventType}
/> : <div className='bg-black/20 px-3 p-2.5 font-semibold italic text-white/60 rounded-sm '>
On-spot registrations only
</div>}
</div> */}
<div className="main">
<div className="parchment"/>
<div className="contain">
<div className="space-y-1.5 order-2 max-w-2xl sm:w-[300px] mapicon">
</div>
<div className={`lg:h-full lg:overflow-y-scroll lg:no-scrollbar px-3 pb-8 w-auto shrink-0 flex flex-col gap-5 items-center rounded-md`}>
<div className={`${styles.main}`}>
<div className={`${styles.parchment}`} />
<div className={`${styles.contain}`}>
<div className={`space-y-1.5 order-2 max-w-2xl sm:w-[300px] ${styles.mapicon}`}>
<h2 className={`font-VikingHell mb-2 text-2xl`}>Details</h2>
<div className="flex flex-wrap mt-2 gap-1.5 w-full bodyFont">
<div className={`flex flex-wrap mt-2 gap-1.5 w-full bodyFont`}>
{getEventAttributes().map((attr) =>
attr.text ? (
<div
key={attr.name}
// className="max-w-[100%] flex flex-wrap break-words text-semibold px-3 py-2 text-white bg-black/20 shrink-0 text-sm rounded-sm grow gap-1 items-center"
className="max-w-[100%] flex flex-wrap break-words text-semibold px-3 py-2 text-amber-900 font-medium bg-white/20 shrink-0 text-sm rounded-sm grow gap-1 items-center"
// className="max-w-[100%] flex flex-wrap break-words text-semibold px-3 py-1 text-amber-900 font-medium shrink-0 text-sm rounded-sm grow items-center"
className={`max-w-[100%] flex flex-wrap break-words text-semibold px-3 py-2 text-amber-900 font-medium bg-white/20 shrink-0 text-sm rounded-sm grow gap-1 items-center`}
>
{<attr.Icon />}
<p>
{attr.name} {": "}
</p>
<p className="leading-4">{attr.text}</p>
<p className={`leading-4`}>{attr.text}</p>
</div>
) : (
<></>
)
)}
</div>
<div className="text-sm">
<div className="grid grid-cols-1 gap-1.5">
<div className={`text-sm`}>
<div className={`grid grid-cols-1 gap-1.5`}>
{event.rounds.map((round) => (
<div
key={round.roundNo}
// className="py-2 text-white rounded-sm bg-black/20 space-y-2 px-3 items-center bodyFont"
className="py-2 text-amber-900 rounded-sm bg-white/20 space-y-2 px-3 items-center bodyFont"
className={`py-2 text-amber-900 rounded-sm bg-white/20 space-y-2 px-3 items-center bodyFont`}
>
<div className=" font-semibold ">
<div className={` font-semibold `}>
Round {round.roundNo}
</div>
<div className="space-y-2">
<p className="flex gap-2 items-center">
<div className={`space-y-2`}>
<p className={`flex gap-2 items-center`}>
<BsFillCalendar2WeekFill />
{round.date &&
new Date(round.date).toLocaleDateString(
Expand All @@ -230,7 +160,7 @@ function event({ event, error }: { event: Event; error: String }) {
}
)}
</p>
<p className="flex gap-2 items-center">
<p className={`flex gap-2 items-center`}>
<BiTimeFive />
{round.date &&
new Date(round.date).toLocaleTimeString(
Expand All @@ -248,52 +178,53 @@ function event({ event, error }: { event: Event; error: String }) {
</div>
</div>
</div>
<div className="w-full order-1">
<div className={`w-full order-1`}>
{event.name.toLowerCase() !== "lazzerena" ? (
<EventRegistration
fees={event.fees}
eventId={event.id}
type={event.eventType}
/>
) : (
<div className="bg-black/20 px-3 p-2.5 font-semibold italic text-white/60 rounded-sm ">
<div className={`bg-black/20 px-3 p-2.5 font-semibold italic text-white/60 rounded-sm `}>
On-spot registrations only
</div>
)}
</div>
</div>
</div>
<div className="main">
<div className="parchment"/>
<div className="contain">
<div className="w-full order-3">
<h2 className={`font-VikingHell mb-2 text-2xl`}>Organizers</h2>
<div className="space-y-1.5 w-full bodyFont">
<div className={`${styles.main}`}>
<div className={`${styles.parchment}`} />
<div className={`${styles.contain}`}>
<div className={`w-full order-3`}>
<h2 className={`font-VikingHell mb-2 text-2xl`}>
Organizers
</h2>
<div className={`space-y-1.5 w-full bodyFont`}>
{event.organizers.map((organizer) => (
<div
key={organizer.user.id}
// className="text-white w-full p-2.5 rounded-sm bg-black/20 px-3 text-md "
className="text-amber-900 w-full p-2.5 rounded-sm bg-gray-300/20 px-3 text-md "
className={`text-amber-900 w-full p-2.5 rounded-sm bg-gray-300/20 px-3 text-md `}
>
<h3 className="text-lg font-semibold mb-2">
<h3 className={`text-lg font-semibold mb-2`}>
{organizer.user.name}
</h3>
<div className="flex gap-1 flex-col">
<div className={`flex gap-1 flex-col`}>
{organizer.user.email && (
<Link
href={`mailto:${organizer.user.email}`}
className="text-sm inline-flex overflow-x-auto items-center gap-2"
className={`text-sm inline-flex overflow-x-auto items-center gap-2`}
>
<MdOutlineMailOutline className="text-lg" />{" "}
<MdOutlineMailOutline className={`text-lg`} />{" "}
{organizer.user.email}
</Link>
)}
{organizer.user.phoneNumber && (
<Link
href={`tel:${organizer.user.phoneNumber}`}
className="text-sm inline-flex items-center gap-2"
className={`text-sm inline-flex items-center gap-2`}
>
<BsFillTelephoneFill className="text-lg" />{" "}
<BsFillTelephoneFill className={`text-lg`} />{" "}
{organizer.user.phoneNumber}
</Link>
)}
Expand All @@ -304,7 +235,7 @@ function event({ event, error }: { event: Event; error: String }) {
</div>
</div>
</div>
<svg className="hidden">
<svg className={`hidden`}>
<filter id="wavy2">
<feTurbulence
x="0"
Expand All @@ -316,58 +247,22 @@ function event({ event, error }: { event: Event; error: String }) {
<feDisplacementMap in="SourceGraphic" scale="20" />
</filter>
</svg>

{/* <div className="w-full order-3 bg-[url('/assets/eventSlug/cardbgg.png')] bg-contain bg-no-repeat">
<h2 className={`titleFont mb-2 text-2xl`}>Organizers</h2>
<div className="space-y-1.5 w-full bodyFont">
{event.organizers.map((organizer) => (
<div
key={organizer.user.id}
className="text-white w-full p-2.5 rounded-sm bg-black/20 px-3 text-md "
>
<h3 className="text-lg font-semibold mb-2">
{organizer.user.name}
</h3>
<div className="flex gap-1 flex-col">
{organizer.user.email && (
<Link
href={`mailto:${organizer.user.email}`}
className="text-sm inline-flex overflow-x-auto items-center gap-2"
>
<MdOutlineMailOutline className="text-lg" />{' '}
{organizer.user.email}
</Link>
)}
{organizer.user.phoneNumber && (
<Link
href={`tel:${organizer.user.phoneNumber}`}
className="text-sm inline-flex items-center gap-2"
>
<BsFillTelephoneFill className="text-lg" />{' '}
{organizer.user.phoneNumber}
</Link>
)}
</div>
</div>
))}
</div>
</div> */}
</div>
</section>
) : (
<div className="flex flex-col p-10 text-white justify-center gap-5 items-center h-screen">
<h1 className="text-3xl font-semibold ">Oops!</h1>
<div className="text-center">
<div className={`flex flex-col p-10 text-white justify-center gap-5 items-center h-screen`}>
<h1 className={`text-3xl font-semibold `}>Oops!</h1>
<div className={`text-center`}>
<p>Looks like you&apos;ve wandered too deep and gotten lost!</p>
<p>
Click{" "}
<Link className="underline" href={"/events"}>
<Link className={`underline`} href={"/events"}>
here
</Link>{" "}
to head back to the events page
</p>
</div>
<p className="px-4 py-2 rounded-md bg-red-200 text-red-800">
<p className={`px-4 py-2 rounded-md bg-red-200 text-red-800`}>
<b>Error message:</b> {error}
</p>
</div>
Expand Down
Loading

0 comments on commit a1a447b

Please sign in to comment.