Merge branch 'main' into feature/homepage-carousel

src/app/events/page.js

@@ -1,14 +1,13 @@
-import * as React from "react";
+import Container from "@/components/Container/Container";
+import EventCard from "@/components/EventList/EventCard";
 import meta from "@/components/Meta/Meta";
-import seo from "@/data/events/seo";
 import { eventData } from "@/data/events/event";
-import EventCard from "@/components/EventList/EventCard";
-import Container from "@/components/Container/Container";
-import { Row, Col } from "@/macros/Grids";
-import { Display, Body, Heading } from "@/macros/Copy";
+import seo from "@/data/events/seo";
+import { Body, Display, Heading } from "@/macros/Copy";
+import { Col, Row } from "@/macros/Grids";
 import Icon from "@/macros/Icons/Icon";
-import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
 import Link from "@/macros/Link/Link";
+import ArrowLongSVG from "@/macros/SVGs/ArrowLongSVG";
 
 export const metadata = meta(seo);
 
@@ -21,8 +20,19 @@ const EventsPage = () => {
 			// Handle date-based events
 			try {
 				if (!event.startDate.includes("-")) return true;
-				const eventDate = new Date(event.startDate);
-				return eventDate >= new Date();
+				const eventStartDate = new Date(event.startDate);
+				const eventEndDate = event.endDate ? new Date(event.endDate) : eventStartDate;
+
+				// Normalize current date to remove time component
+				const currentDate = new Date();
+				currentDate.setHours(0, 0, 0, 0);
+				eventStartDate.setHours(0, 0, 0, 0);
+				eventEndDate.setHours(0, 0, 0, 0);
+
+				// Event is upcoming/ongoing if:
+				// - Current date is within the event date range (inclusive) OR
+				// - Start date is in the future
+				return (currentDate >= eventStartDate && currentDate <= eventEndDate) || eventStartDate >= currentDate;
 			} catch (e) {
 				console.error("Invalid date format:", event.startDate);
 				return false;

src/app/past-events/page.js

@@ -1,11 +1,10 @@
-import * as React from "react";
+import Container from "@/components/Container/Container";
+import EventCard from "@/components/EventList/EventCard";
 import meta from "@/components/Meta/Meta";
-import seo from "@/data/events/past-events-seo";
 import { eventData } from "@/data/events/event";
-import EventCard from "@/components/EventList/EventCard";
-import Container from "@/components/Container/Container";
-import { Row, Col } from "@/macros/Grids";
-import { Display, Body } from "@/macros/Copy";
+import seo from "@/data/events/past-events-seo";
+import { Body, Display } from "@/macros/Copy";
+import { Col, Row } from "@/macros/Grids";
 
 export const metadata = meta(seo);
 
@@ -18,7 +17,17 @@ const PastEventsPage = () => {
 			// Handle date-based events
 			try {
 				if (!event.startDate.includes("-")) return false;
-				return new Date(event.startDate) < new Date();
+				const eventStartDate = new Date(event.startDate);
+				const eventEndDate = event.endDate ? new Date(event.endDate) : eventStartDate;
+
+				// Normalize current date to remove time component
+				const currentDate = new Date();
+				currentDate.setHours(0, 0, 0, 0);
+				eventStartDate.setHours(0, 0, 0, 0);
+				eventEndDate.setHours(0, 0, 0, 0);
+
+				// Event is past only if it's completely over
+				return currentDate > eventEndDate;
 			} catch (e) {
 				console.error("Invalid date format:", event.startDate);
 				return false;

src/app/run-a-light-node/page.js

@@ -91,18 +91,18 @@ export default async function RunALightNode() {
 				<Container size={"lg"}>
 					<div className={`pb-40 lg:flex`}>
 						<div className='w-full mx-auto lg:w-2/3'>
-							<Heading size={"md"} className={"mb-4 lg:mb-6"} tag={"p"}>
+							<Heading size={"md"} className={"!font-untitledSans mb-4 lg:mb-6"} tag={"p"}>
 								What is a light node?
 							</Heading>
-							<Heading size={"md"} className={"mb-4 lg:mb-6"} tag={"p"}>
+							<Heading size={"md"} className={"!font-untitledSans mb-4 lg:mb-6"} tag={"p"}>
 								Light nodes allow anyone to directly verify data availability and interact with Celestia without centralized gateways
 								or RPC providers.
 							</Heading>
-							<Heading size={"md"} className={"mb-4 lg:mb-6"} tag={"p"}>
+							<Heading size={"md"} className={"!font-untitledSans mb-4 lg:mb-6"} tag={"p"}>
 								Data availability sampling enables Celestia to securely increase throughput for rollups as new light nodes join the
 								network over time.
 							</Heading>
-							<Heading size={"md"} className={""} tag={"p"}>
+							<Heading size={"md"} className={"!font-untitledSans"} tag={"p"}>
 								Each rollup on Celestia uses a light node to directly publish and retrieve transaction data.
 							</Heading>
 						</div>

src/components/EventList/EventCard.js

@@ -16,9 +16,6 @@ const EventCard = ({ title, startDate, endDate, location, url, image, category =
 
 	const categoryCheck = category.filter((item) => item !== "");
 
-	// Normalize image path
-	const imagePath = image.startsWith("/images/events/") ? image : `/images/events/${image}`;
-
 	// Fix "Comming soon!" typo
 	const normalizedStartDate = startDate?.toLowerCase().includes("comming") ? "Coming soon!" : startDate;
 
@@ -36,7 +33,7 @@ const EventCard = ({ title, startDate, endDate, location, url, image, category =
 		<article className={`${cardClasses} ${className}`}>
 			<div className={imageClasses}>
 				<Image
-					src={imagePath}
+					src={image}
 					alt={truncateDescription(title, 50)}
 					fill
 					className='object-cover'

src/data/events/event.js

@@ -2,7 +2,7 @@ export const eventData = [
 	{
 		id: 1,
 		eventType: "celestia", // celestia, community
-		image: "rejected.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/rejected.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Rejected",
 		description: "",
 		startDate: "2024-11-11", // date format: yy/mm/dd
@@ -15,7 +15,7 @@ export const eventData = [
 	{
 		id: 2,
 		eventType: "celestia", // celestia, community
-		image: "modular-bangkok.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-bangkok.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Modular Bangkok",
 		description: "",
 		startDate: "2024-11-10",
@@ -28,7 +28,7 @@ export const eventData = [
 	{
 		id: 3,
 		eventType: "celestia", // celestia, community
-		image: "coworking.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/coworking.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Celestia co-working cafe",
 		description: "",
 		startDate: "2024-11-12",
@@ -41,7 +41,7 @@ export const eventData = [
 	{
 		id: 4,
 		eventType: "celestia", // celestia, community
-		image: "modular-summit-3.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-summit-3.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Modular Summit 3.0",
 		description: "",
 		startDate: "2024-07-11",
@@ -54,7 +54,7 @@ export const eventData = [
 	{
 		id: 7,
 		eventType: "celestia", // celestia, community
-		image: "modular-day-2.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-day-2.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Modular Day",
 		description: "",
 		startDate: "2024-02-28",
@@ -67,7 +67,7 @@ export const eventData = [
 	{
 		id: 8,
 		eventType: "celestia", // celestia, community
-		image: "mod-acc.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/mod-acc.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Modular Acceleration",
 		description: "",
 		startDate: "2024-03-01",
@@ -80,7 +80,7 @@ export const eventData = [
 	{
 		id: 10,
 		eventType: "community", // celestia, community
-		image: "modular-meetup-istanbul-4.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-meetup-istanbul-4.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Celestia Modular Meetup | Istanbul - 4",
 		description: "",
 		startDate: "2024-06-07",
@@ -93,7 +93,7 @@ export const eventData = [
 	{
 		id: 11,
 		eventType: "community", // celestia, community
-		image: "modular-meetup-istanbul-3.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-meetup-istanbul-3.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Celestia Modular Meetup | Istanbul - 3",
 		description: "",
 		startDate: "2024-05-03",
@@ -106,7 +106,7 @@ export const eventData = [
 	{
 		id: 12,
 		eventType: "community", // celestia, community
-		image: "modular-meetup-istanbul-2.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-meetup-istanbul-2.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Celestia Modular Meetup | Istanbul - 2",
 		description: "",
 		startDate: "2024-03-30",
@@ -119,7 +119,7 @@ export const eventData = [
 	{
 		id: 13,
 		eventType: "community", // celestia, community
-		image: "modular-meetup-istanbul.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-meetup-istanbul.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Celestia Modular Meetup | Istanbul",
 		description: "",
 		startDate: "2024-02-25",
@@ -132,7 +132,7 @@ export const eventData = [
 	{
 		id: 14,
 		eventType: "community", // celestia, community
-		image: "modular-meetup-santiago-de-compostela.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-meetup-santiago-de-compostela.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Modular Meetup Santiago de Compostela",
 		description: "",
 		startDate: "2024-06-28",
@@ -145,7 +145,7 @@ export const eventData = [
 	{
 		id: 15,
 		eventType: "community", // celestia, community
-		image: "modular-meetup-rio-de-janeiro.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-meetup-rio-de-janeiro.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Modular Meetup Rio de Janeiro",
 		description: "",
 		startDate: "2024-02-14",
@@ -158,7 +158,7 @@ export const eventData = [
 	{
 		id: 16,
 		eventType: "celestia", // celestia, community
-		image: "modular-day.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/modular-day.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Modular Day",
 		description: "",
 		startDate: "2023-11-13",
@@ -171,7 +171,7 @@ export const eventData = [
 	{
 		id: 17,
 		eventType: "celestia", // celestia, community
-		image: "game-space.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/game-space.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "B3 Game Space",
 		description: "",
 		startDate: "2024-11-12",
@@ -184,7 +184,7 @@ export const eventData = [
 	{
 		id: 18,
 		eventType: "celestia", // celestia, community
-		image: "biconomy.png", // use 1200x800px image for cover image (3:2 ratio)
+		image: "/images/app/events/biconomy.png", // use 1200x800px image for cover image (3:2 ratio)
 		title: "Show and Tell - App Edition",
 		description: "",
 		startDate: "2024-11-13",
@@ -199,7 +199,7 @@ export const eventData = [
 	{
 		id: 19,
 		eventType: "celestia",
-		image: "mammothon-image.png",
+		image: "/images/app/events/mammothon-image.png",
 		title: "Mammothon",
 		description: "",
 		startDate: "2025-02-01",