Merge branch 'minh/update-event-page'

* Removes `Tabs` component of Skeleton UI from the event page:  events/+page.svelte, EventTabsContent.svelte, EventTabsTrigger.svelte
* Flip card feature
* Resolve #59 and resolve #72.
* Refactor rendering logic for EventTabContent and EventTabTrigger in events/+page.svelte
* Remove picture zoom in when hover on event banner since this creates a visual bug when the card also translate upward
* Front side contains the banner image, event title, date and location of the event
* Back side contains event description and other utility function such as calendar and registration

src/app.css

@@ -204,3 +204,32 @@ h2 {
 		@apply mt-3 text-sm leading-5;
 	}
 }
+
+/* Scrollbar Styles */
+*::-webkit-scrollbar {
+	@apply h-1 w-1;
+}
+
+*::-webkit-scrollbar-track {
+	@apply bg-ecsess-700 rounded;
+}
+
+*::-webkit-scrollbar-track:hover {
+	@apply bg-ecsess-900;
+}
+
+*::-webkit-scrollbar-track:active {
+	@apply bg-ecsess-900;
+}
+
+*::-webkit-scrollbar-thumb {
+	@apply bg-ecsess-100 rounded-md;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+	@apply bg-ecsess-300;
+}
+
+*::-webkit-scrollbar-thumb:active {
+	@apply bg-ecsess-300;
+}

src/components/RichText.svelte

@@ -4,6 +4,6 @@
 	let { value } = $props();
 </script>
 
-<div class="typography">
+<div class="flex flex-col justify-center-safe">
 	<PortableText {value} />
 </div>

src/components/event/EventBlock.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
-	import { PortableText } from '@portabletext/svelte';
+	import {
-	import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } from '@lucide/svelte';
+		CalendarDays,
+		MapPin,
+		Link as LinkIcon,
+		FilePen,
+		CalendarPlus,
+		ExternalLink as ExternalLinkIcon
+	} from '@lucide/svelte';
 	import RichText from 'components/RichText.svelte';
 
 	let {
@@ -9,12 +15,15 @@
 		location,
 		eventDescription,
 		thumbnail,
-		registrationLink,
+		registrationLink, //[LinkType]
-		paymentLink,
+		paymentLink, //[LinkType]
+		generalLink, //[LinkType]
 		eventCategory,
 		isPastEvent = false
 	} = $props();
 
+	let showDescription = $state(false);
+
 	// Function to generate .ics file for calendar
 	const addToCalendar = () => {
 		const eventDate = new Date(date);
@@ -48,56 +57,63 @@
 		document.body.removeChild(link);
 		URL.revokeObjectURL(url);
 	};
+
+	const flipCard = (e: MouseEvent) => {
+		showDescription = !showDescription;
+	};
 </script>
 
 <div
-	class="group bg-ecsess-950 shadow-ecsess-950/50 relative flex h-full flex-col overflow-hidden rounded-2xl shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
+	class="
+	flip-box
+	group relative flex flex-col rounded-2xl"
 >
+	<!--Flip Card container-->
+	<div class="flip-box-inner rounded-2xl" class:show-back={showDescription}>
+		<!--Front Side-->
+		<!--Opacity thing is to fix the visual bug on ios-->
+		<div
+			class="flip-box-front bg-ecsess-950 shadow-ecsess-950/60 flex flex-col rounded-2xl shadow-xl transition-opacity duration-500 {showDescription
+				? 'pointer-events-none opacity-0'
+				: 'opacity-100'}"
+		>
+			<!--Flip button-->
+			<div
+				class="
+				absolute inset-0 z-10 cursor-pointer rounded-2xl bg-transparent"
+				onclick={flipCard}
+			></div>
 			<!-- Image Container with Gradient Overlay -->
-	<div class="relative h-64 overflow-hidden">
+			<div class="relative h-80 overflow-hidden rounded-t-2xl">
 				{#if thumbnail}
-			<img
+					<img class="h-full w-full object-cover" src={thumbnail} alt={eventTitle} />
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src={thumbnail}
-				alt={eventTitle}
-			/>
 				{:else if eventCategory?.[0] === 'social'}
-			<img
+					<img class="h-full w-full object-cover" src="/Social.jpg" alt="Social Event" />
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/Social.jpg"
-				alt="Social Event"
-			/>
 				{:else if eventCategory?.[0] === 'technical'}
-			<img
+					<img class="h-full w-full object-cover" src="/Technical.jpg" alt="Technical Event" />
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/Technical.jpg"
-				alt="Technical Event"
-			/>
 				{:else if eventCategory?.[0] === 'professional'}
 					<img
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+						class="h-full w-full object-cover"
 						src="/Professional.jpg"
 						alt="Professional Event"
 					/>
 				{:else if eventCategory?.[0] === 'academic'}
-			<img
+					<img class="h-full w-full object-cover" src="/Academic.jpg" alt="Academic Event" />
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/Academic.jpg"
-				alt="Academic Event"
-			/>
 				{:else}
-			<img
+					<img class="h-full w-full object-cover" src="/ECSESS.png" alt="ECSESS Event" />
-				class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-				src="/ECSESS.png"
-				alt="ECSESS Event"
-			/>
 				{/if}
 
 				<!-- Gradient overlay -->
 				<div
-			class="via-ecsess-800/30 to-ecsess-950 absolute inset-0 bg-gradient-to-b from-transparent"
+					class="via-ecsess-800/30 to-ecsess-950 absolute inset-0 rounded-t-2xl bg-gradient-to-b from-transparent"
 				></div>
-
+				<!-- Event Title Overlay -->
+				<div class="absolute right-0 bottom-0 left-0 p-6">
+					<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
+						{eventTitle}
+					</h3>
+				</div>
+			</div>
 			<!-- Badges -->
 			<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
 				{#if isPastEvent}
@@ -127,25 +143,8 @@
 				{/if}
 			</div>
 
-		<!-- Event Title Overlay -->
-		<div class="absolute right-0 bottom-0 left-0 p-6">
-			<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
-				{eventTitle}
-			</h3>
-		</div>
-	</div>
-
-	<!-- Content Section -->
-	<div class="flex flex-1 flex-col p-6">
-		<!-- Description -->
-		{#if eventDescription}
-			<div class="text-ecsess-100 mb-6 line-clamp-5">
-				<RichText value={eventDescription} />
-			</div>
-		{/if}
-
 			<!-- Info Grid -->
-		<div class="bg-ecsess-900/40 mb-6 space-y-3 rounded-xl p-4">
+			<div class="bg-ecsess-900/40 m-5 space-y-3 rounded-xl p-4">
 				<div class="flex items-center gap-3">
 					<div
 						class="bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
@@ -170,53 +169,54 @@
 					</div>
 				</div>
 			</div>
-
+			<div class="relative z-100 flex-1 p-4 px-6">
 				<!-- Action Buttons -->
 				{#if !isPastEvent}
 					<div class="space-y-2">
-				<!-- Add to Calendar Button -->
+						<!-- Registration & Payment Row & Add to Calendar Button -->
-				<button
+						<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-2">
-					onclick={addToCalendar}
-					class="bg-ecsess-400 hover:bg-ecsess-500 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
-				>
-					<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
-					Add to Calendar
-				</button>
-
-				<!-- Registration & Payment Row -->
-				<div class="grid grid-cols-2 gap-2">
 							{#if registrationLink}
 								<a
-							href={registrationLink}
+									href={registrationLink[0].url}
 									target="_blank"
 									rel="noopener noreferrer"
-							class="bg-ecsess-500 hover:bg-ecsess-600 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
+									class="bg-ecsess-500 hover:bg-ecsess-600 p3 shadow-ecsess-300 flex flex-1 items-center justify-center gap-2 rounded-xl px-4 text-sm font-bold
+								text-white shadow-md transition-all hover:-translate-y-1 hover:shadow-lg
+								"
 								>
 									<FilePen class="h-4 w-4" strokeWidth={2.5} />
 									Register
 								</a>
 							{:else}
 								<div
-							class="bg-ecsess-900 text-ecsess-200 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold"
+									class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white"
 								>
 									<FilePen class="h-4 w-4" strokeWidth={2.5} />
 									Drop In
 								</div>
 							{/if}
-
+							<button
+								onclick={addToCalendar}
+								class="bg-ecsess-700 hover:bg-ecsess-800 shadow-ecsess-400 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white
+								shadow-md transition-all hover:-translate-y-1 hover:cursor-pointer hover:shadow-lg"
+							>
+								<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
+								Add to Calendar
+							</button>
 							{#if paymentLink}
 								<a
-							href={paymentLink}
+									href={paymentLink[0].url}
 									target="_blank"
 									rel="noopener noreferrer"
-							class="bg-ecsess-600 hover:bg-ecsess-700 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
+									class="bg-ecsess-800 hover:bg-ecsess-900 shadow-ecsess-500 col-span-2 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white
+									shadow-md transition-all hover:-translate-y-1 hover:shadow-lg sm:col-span-1"
 								>
 									<LinkIcon class="h-4 w-4" strokeWidth={2.5} />
 									Pay
 								</a>
 							{:else}
 								<div
-							class="bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md"
+									class="bg-ecsess-800 col-span-2 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white sm:col-span-1"
 								>
 									Free!
 								</div>
@@ -225,4 +225,106 @@
 					</div>
 				{/if}
 			</div>
+			<div class="p-4 lg:hidden">
+				<p>Click to view more</p>
 			</div>
+		</div>
+		<!-- Back Side -->
+		<div
+			class=" flip-box-back bg-ecsess-950 shadow-ecsess-950/60 flex flex-col rounded-2xl shadow-xl"
+		>
+			<!--Flip button-->
+			<div
+				class="
+				absolute inset-0 z-10 cursor-pointer rounded-2xl bg-transparent"
+				onclick={flipCard}
+			></div>
+			<!--Event Title-->
+			<div class="right-0 bottom-0 left-0 p-6">
+				<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
+					{eventTitle}
+				</h3>
+			</div>
+			<div class="relative z-20 my-2 flex h-56 flex-col md:h-64 xl:h-84" onclick={flipCard}>
+				<!-- Description -->
+				<div
+					class="text-ecsess-100 border-ecsess-800 flex flex-1 justify-center overflow-y-auto border-y p-6"
+				>
+					{#if eventDescription}
+						<RichText value={eventDescription} />
+					{:else}
+						<p>No description available for this event.</p>
+					{/if}
+				</div>
+			</div>
+
+			<!-- General Links -->
+			<!--add max-h-41 we decide to go back to scrollable-->
+			<div
+				class="relative z-20 flex w-full flex-1 flex-wrap items-center justify-center gap-4 overflow-auto p-6"
+			>
+				{#if generalLink}
+					{#each generalLink as link}
+						<a
+							href={link.url}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="bg-ecsess-600 hover:bg-ecsess-700 shadow-ecsess-400 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold
+							text-white shadow-md transition-all hover:-translate-y-1 hover:shadow-lg"
+						>
+							<ExternalLinkIcon class="h-4 w-4" strokeWidth={2.5} />
+							{link.title}
+						</a>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.flip-box {
+		@apply h-full w-full perspective-[1000px];
+	}
+
+	.flip-box-inner {
+		@apply grid h-full w-full text-center duration-800 transform-3d;
+	}
+
+	@keyframes rotate-and-back {
+		0% {
+			transform: rotateY(0);
+		}
+		33% {
+			transform: rotateY(5deg);
+		}
+		66% {
+			transform: rotateY(-5deg);
+		}
+		100% {
+			transform: rotateY(0);
+		}
+	}
+	@media (min-width: 448px) {
+		/* Apply hover effect only on screens wider than md*/
+		.flip-box:hover .flip-box-front {
+			@apply animate-[rotate-and-back_0.3s_ease-in-out];
+		}
+	}
+
+	.flip-box-front,
+	.flip-box-back {
+		@apply col-1 row-1 h-full w-full [-webkit-backface-visibility:hidden] backface-hidden;
+	}
+	.flip-box-front {
+		@apply z-2 rotate-y-0 transform-3d;
+	}
+
+	.flip-box-back {
+		@apply rotate-y-180;
+	}
+
+	.show-back {
+		@apply rotate-y-180;
+	}
+</style>

src/components/event/EventTabsContent.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">
-	import { Tabs } from '@skeletonlabs/skeleton-svelte';
 	import EventBlock from 'components/event/EventBlock.svelte';
-	import type { EventPost } from '$lib/schemas';
+	import { type EventPost, type EventCategory, EventLinkKind, type LinkType } from '$lib/schemas';
 
-	type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical';
+	let { category, events } = $props<{
-
+		category: EventCategory;
-	let { value, category, events } = $props<{
-		value: Category;
-		category: Category;
 		events: EventPost[];
 	}>();
 
@@ -66,18 +62,36 @@
 
 	const upcomingEvents = $derived(
 		filtered
-			.filter((e) => !isPastEvent(e.date))
+			.filter((e: { date: string }) => !isPastEvent(e.date))
-			.sort((a, b) => parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime())
+			.sort(
+				(a: { date: string }, b: { date: string }) =>
+					parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime()
+			)
 	);
 
 	const finishedEvents = $derived(
 		filtered
-			.filter((e) => isPastEvent(e.date))
+			.filter((e: { date: string }) => isPastEvent(e.date))
-			.sort((a, b) => parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime())
+			.sort(
+				(a: { date: string }, b: { date: string }) =>
+					parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime()
+			)
 	);
+
+	const getPaymentLink = (e: EventPost, type: EventLinkKind): LinkType[] | null => {
+		let generalLinks: LinkType[] = [];
+		for (const link of e.links ?? []) {
+			if (type == EventLinkKind.GENERAL && link.kind === EventLinkKind.GENERAL && link.url !== '') {
+				generalLinks.push(link);
+			} else if (link.kind === type && link.url !== '') {
+				return [link];
+			}
+		}
+		return generalLinks.length > 0 ? generalLinks : null;
+	};
 </script>
 
-<Tabs.Content {value}>
+<div>
 	<div class="space-y-12 px-4 py-8 lg:px-8">
 		<!-- Upcoming Events -->
 		{#if upcomingEvents.length > 0}
@@ -94,8 +108,9 @@
 							location={e.location}
 							eventDescription={e.description}
 							thumbnail={e.thumbnail}
-							registrationLink={e.reglink}
+							registrationLink={getPaymentLink(e, EventLinkKind.REGISTRATION)}
-							paymentLink={e.paylink}
+							paymentLink={getPaymentLink(e, EventLinkKind.PAYMENT)}
+							generalLink={getPaymentLink(e, EventLinkKind.GENERAL)}
 							eventCategory={e.category}
 							isPastEvent={false}
 						/>
@@ -119,8 +134,9 @@
 							location={e.location}
 							eventDescription={e.description}
 							thumbnail={e.thumbnail}
-							registrationLink={e.reglink}
+							registrationLink={getPaymentLink(e, EventLinkKind.REGISTRATION)}
-							paymentLink={e.paylink}
+							paymentLink={getPaymentLink(e, EventLinkKind.PAYMENT)}
+							generalLink={getPaymentLink(e, EventLinkKind.GENERAL)}
 							eventCategory={e.category}
 							isPastEvent={true}
 						/>
@@ -139,4 +155,4 @@
 			</div>
 		{/if}
 	</div>
-</Tabs.Content>
+</div>

src/components/event/EventTabsTrigger.svelte

@@ -1,15 +1,15 @@
 <script>
-	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+	let { value, selected, onclick, children } = $props();
-	let { value, children } = $props();
 </script>
 
-<Tabs.Trigger {value}>
+<div>
-	{#snippet element(attributes)}
 	<button
-			{...attributes}
+		{value}
-			class="hover:border-b-ecsess-200 data-[state=active]:border-b-ecsess-400 border-b-4 border-b-transparent px-2 pb-2 text-lg transition-all ease-in-out"
+		onclick={() => onclick(value)}
+		class="hover:border-b-ecsess-200 {selected
+			? 'border-b-ecsess-200'
+			: 'border-b-transparent'} border-b-4 px-2 pb-2 text-lg transition-all ease-in-out"
 	>
 		{@render children()}
 	</button>
-	{/snippet}
+</div>
-</Tabs.Trigger>

src/lib/schemas.ts

@@ -8,11 +8,29 @@ export type EventPost = {
 	time: string;
 	location: string;
 	thumbnail: string;
-	reglink: string;
+	category: EventCategory;
-	category: string;
+	links: LinkType[];
-	paylink: string; // event payment link (e.g., Zeffy)
 };
 
+export enum EventCategory {
+	ALL_EVENTS = 'allEvents',
+	ACADEMIC = 'academic',
+	PROFESSIONAL = 'professional',
+	SOCIAL = 'social',
+	TECHNICAL = 'technical'
+}
+
+export type LinkType = {
+	title: string;
+	kind: EventLinkKind;
+	url: string;
+};
+export enum EventLinkKind {
+	PAYMENT = 'payment',
+	REGISTRATION = 'registration',
+	GENERAL = 'general'
+}
+
 export type FAQ = {
 	question: string;
 	answer: string;

src/routes/events/+page.server.ts

@@ -7,8 +7,11 @@ const eventQuery = `*[_type == "events"]{
   date,
   location,
   description,
-  reglink,
+  "links": links[]{
-  paylink,
+    "kind": kind,
+    "title": title,
+    "url": url
+    },
   "thumbnail": thumbnail.asset->url+"?h=800&fm=webp",
   "lastUpdated": _updatedAt,
 }`;

src/routes/events/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { EventPost } from '$lib/schemas';
+	import { type EventPost, EventCategory } from '$lib/schemas';
-	import { Tabs } from '@skeletonlabs/skeleton-svelte';
 	import Section from 'components/layout/Section.svelte';
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import EventTabsTrigger from 'components/event/EventTabsTrigger.svelte';
@@ -9,7 +8,18 @@
 	let { data } = $props();
 
 	let events: EventPost[] = data.events ?? [];
-	let group = $state('allEvents');
+	let group = $state<EventCategory>(EventCategory.ALL_EVENTS);
+	let categories: { value: EventCategory; label: string }[] = [
+		{ value: EventCategory.ALL_EVENTS, label: 'All Events' },
+		{ value: EventCategory.ACADEMIC, label: 'Academic' },
+		{ value: EventCategory.PROFESSIONAL, label: 'Professional' },
+		{ value: EventCategory.SOCIAL, label: 'Social' },
+		{ value: EventCategory.TECHNICAL, label: 'Technical' }
+	];
+	// Handle tab change
+	function handleTabChange(selectedCategory: EventCategory) {
+		group = selectedCategory;
+	}
 </script>
 
 <SeoMetaTags
@@ -21,19 +31,17 @@
 <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-600" direction="to-b">
 	<p class="page-title">Events</p>
 
-	<Tabs value={group} onValueChange={(e) => (group = e.value)} composite={true}>
+	<div>
-		<Tabs.List>
+		<ul class="flex flex-wrap justify-center gap-2">
-			<EventTabsTrigger value="allEvents">All Events</EventTabsTrigger>
+			{#each categories as category}
-			<EventTabsTrigger value="academic">Academic</EventTabsTrigger>
+				<EventTabsTrigger
-			<EventTabsTrigger value="professional">Professional</EventTabsTrigger>
+					value={category.value}
-			<EventTabsTrigger value="social">Social</EventTabsTrigger>
+					selected={group === category.value}
-			<EventTabsTrigger value="technical">Technical</EventTabsTrigger>
+					onclick={handleTabChange}>{category.label}</EventTabsTrigger
-		</Tabs.List>
+				>
+			{/each}
+		</ul>
 
-		<EventTabsContent value="allEvents" category="allEvents" {events} />
+		<EventTabsContent category={group} {events} />
-		<EventTabsContent value="academic" category="academic" {events} />
+	</div>
-		<EventTabsContent value="professional" category="professional" {events} />
-		<EventTabsContent value="social" category="social" {events} />
-		<EventTabsContent value="technical" category="technical" {events} />
-	</Tabs>
 </Section>