Feature/events page (#402)

* event page build init

* past events build , finishing touches

* added image positioning

* simplified eventData strucutre, post filtering, rendering.

* added support for multiple featured posts

* updated events layout, image ratio, events data

* fixed icon position

* fix rendering of future and past events

* Update past-events.js

* Update events.js

* Update event-card.js

* added suport for multi day events, style fixes

* small updates

* Update event-data.js

* Add files via upload

* Update event-data.js

* Add files via upload

* Add files via upload

* Update event-data.js

* Add files via upload

* Update header.js

* Updated,  meta title, description, added submit event link

* spacing fixes on mobile for Past events page

---------

Co-authored-by: Alex Beckett <[email protected]>

.next/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

.next/routes-manifest.json

@@ -0,0 +1 @@
+{"version":3,"pages404":true,"caseSensitive":false,"basePath":"","redirects":[{"source":"/:path+/","destination":"/:path+","internal":true,"statusCode":308,"regex":"^(?:/((?:[^/]+?)(?:/(?:[^/]+?))*))/$"}],"headers":[],"dynamicRoutes":[],"staticRoutes":[{"page":"/","regex":"^/(?:/)?$","routeKeys":{},"namedRegex":"^/(?:/)?$"},{"page":"/404","regex":"^/404(?:/)?$","routeKeys":{},"namedRegex":"^/404(?:/)?$"},{"page":"/build","regex":"^/build(?:/)?$","routeKeys":{},"namedRegex":"^/build(?:/)?$"},{"page":"/careers","regex":"^/careers(?:/)?$","routeKeys":{},"namedRegex":"^/careers(?:/)?$"},{"page":"/community","regex":"^/community(?:/)?$","routeKeys":{},"namedRegex":"^/community(?:/)?$"},{"page":"/ecosystem","regex":"^/ecosystem(?:/)?$","routeKeys":{},"namedRegex":"^/ecosystem(?:/)?$"},{"page":"/events","regex":"^/events(?:/)?$","routeKeys":{},"namedRegex":"^/events(?:/)?$"},{"page":"/faq","regex":"^/faq(?:/)?$","routeKeys":{},"namedRegex":"^/faq(?:/)?$"},{"page":"/glossary","regex":"^/glossary(?:/)?$","routeKeys":{},"namedRegex":"^/glossary(?:/)?$"},{"page":"/glossary/block-header","regex":"^/glossary/block\\-header(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/block\\-header(?:/)?$"},{"page":"/glossary/block-producer","regex":"^/glossary/block\\-producer(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/block\\-producer(?:/)?$"},{"page":"/glossary/block-space","regex":"^/glossary/block\\-space(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/block\\-space(?:/)?$"},{"page":"/glossary/blockchain-cluster","regex":"^/glossary/blockchain\\-cluster(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/blockchain\\-cluster(?:/)?$"},{"page":"/glossary/composability","regex":"^/glossary/composability(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/composability(?:/)?$"},{"page":"/glossary/consensus","regex":"^/glossary/consensus(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/consensus(?:/)?$"},{"page":"/glossary/consensus-algorithm","regex":"^/glossary/consensus\\-algorithm(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/consensus\\-algorithm(?:/)?$"},{"page":"/glossary/consensus-layer","regex":"^/glossary/consensus\\-layer(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/consensus\\-layer(?:/)?$"},{"page":"/glossary/cosmos-sdk","regex":"^/glossary/cosmos\\-sdk(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/cosmos\\-sdk(?:/)?$"},{"page":"/glossary/cross-chain-interoperability","regex":"^/glossary/cross\\-chain\\-interoperability(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/cross\\-chain\\-interoperability(?:/)?$"},{"page":"/glossary/da","regex":"^/glossary/da(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/da(?:/)?$"},{"page":"/glossary/dac","regex":"^/glossary/dac(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/dac(?:/)?$"},{"page":"/glossary/das","regex":"^/glossary/das(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/das(?:/)?$"},{"page":"/glossary/data-availability","regex":"^/glossary/data\\-availability(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/data\\-availability(?:/)?$"},{"page":"/glossary/data-availability-committee","regex":"^/glossary/data\\-availability\\-committee(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/data\\-availability\\-committee(?:/)?$"},{"page":"/glossary/data-availability-layer","regex":"^/glossary/data\\-availability\\-layer(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/data\\-availability\\-layer(?:/)?$"},{"page":"/glossary/data-availability-sampling","regex":"^/glossary/data\\-availability\\-sampling(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/data\\-availability\\-sampling(?:/)?$"},{"page":"/glossary/data-throughput","regex":"^/glossary/data\\-throughput(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/data\\-throughput(?:/)?$"},{"page":"/glossary/data-withholding-attack","regex":"^/glossary/data\\-withholding\\-attack(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/data\\-withholding\\-attack(?:/)?$"},{"page":"/glossary/dispute-resolution","regex":"^/glossary/dispute\\-resolution(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/dispute\\-resolution(?:/)?$"},{"page":"/glossary/ee","regex":"^/glossary/ee(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/ee(?:/)?$"},{"page":"/glossary/execution","regex":"^/glossary/execution(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/execution(?:/)?$"},{"page":"/glossary/execution-environment","regex":"^/glossary/execution\\-environment(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/execution\\-environment(?:/)?$"},{"page":"/glossary/execution-layer","regex":"^/glossary/execution\\-layer(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/execution\\-layer(?:/)?$"},{"page":"/glossary/fee-market","regex":"^/glossary/fee\\-market(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/fee\\-market(?:/)?$"},{"page":"/glossary/fork","regex":"^/glossary/fork(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/fork(?:/)?$"},{"page":"/glossary/fork-choice-rule","regex":"^/glossary/fork\\-choice\\-rule(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/fork\\-choice\\-rule(?:/)?$"},{"page":"/glossary/full-node","regex":"^/glossary/full\\-node(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/full\\-node(?:/)?$"},{"page":"/glossary/honest-majority-assumption","regex":"^/glossary/honest\\-majority\\-assumption(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/honest\\-majority\\-assumption(?:/)?$"},{"page":"/glossary/honest-minority-assumption","regex":"^/glossary/honest\\-minority\\-assumption(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/honest\\-minority\\-assumption(?:/)?$"},{"page":"/glossary/inter-cluster-communication","regex":"^/glossary/inter\\-cluster\\-communication(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/inter\\-cluster\\-communication(?:/)?$"},{"page":"/glossary/intra-cluster-communication","regex":"^/glossary/intra\\-cluster\\-communication(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/intra\\-cluster\\-communication(?:/)?$"},{"page":"/glossary/isr","regex":"^/glossary/isr(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/isr(?:/)?$"},{"page":"/glossary/light-client","regex":"^/glossary/light\\-client(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/light\\-client(?:/)?$"},{"page":"/glossary/light-node","regex":"^/glossary/light\\-node(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/light\\-node(?:/)?$"},{"page":"/glossary/liveness","regex":"^/glossary/liveness(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/liveness(?:/)?$"},{"page":"/glossary/modular-blockchain","regex":"^/glossary/modular\\-blockchain(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/modular\\-blockchain(?:/)?$"},{"page":"/glossary/modular-stack","regex":"^/glossary/modular\\-stack(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/modular\\-stack(?:/)?$"},{"page":"/glossary/monolithic-blockchain","regex":"^/glossary/monolithic\\-blockchain(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/monolithic\\-blockchain(?:/)?$"},{"page":"/glossary/namespaced-merkle-tree","regex":"^/glossary/namespaced\\-merkle\\-tree(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/namespaced\\-merkle\\-tree(?:/)?$"},{"page":"/glossary/nmt","regex":"^/glossary/nmt(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/nmt(?:/)?$"},{"page":"/glossary/node","regex":"^/glossary/node(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/node(?:/)?$"},{"page":"/glossary/off-chain-data-availability","regex":"^/glossary/off\\-chain\\-data\\-availability(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/off\\-chain\\-data\\-availability(?:/)?$"},{"page":"/glossary/on-chain-data-availability","regex":"^/glossary/on\\-chain\\-data\\-availability(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/on\\-chain\\-data\\-availability(?:/)?$"},{"page":"/glossary/optimistic-rollup","regex":"^/glossary/optimistic\\-rollup(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/optimistic\\-rollup(?:/)?$"},{"page":"/glossary/oru","regex":"^/glossary/oru(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/oru(?:/)?$"},{"page":"/glossary/pay-for-data","regex":"^/glossary/pay\\-for\\-data(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/pay\\-for\\-data(?:/)?$"},{"page":"/glossary/peer-to-peer-network","regex":"^/glossary/peer\\-to\\-peer\\-network(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/peer\\-to\\-peer\\-network(?:/)?$"},{"page":"/glossary/pfb","regex":"^/glossary/pfb(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/pfb(?:/)?$"},{"page":"/glossary/proof-of-stake","regex":"^/glossary/proof\\-of\\-stake(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/proof\\-of\\-stake(?:/)?$"},{"page":"/glossary/qgb","regex":"^/glossary/qgb(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/qgb(?:/)?$"},{"page":"/glossary/rollup","regex":"^/glossary/rollup(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/rollup(?:/)?$"},{"page":"/glossary/safety","regex":"^/glossary/safety(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/safety(?:/)?$"},{"page":"/glossary/scalability","regex":"^/glossary/scalability(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/scalability(?:/)?$"},{"page":"/glossary/sequencer","regex":"^/glossary/sequencer(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/sequencer(?:/)?$"},{"page":"/glossary/settlement","regex":"^/glossary/settlement(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/settlement(?:/)?$"},{"page":"/glossary/settlement-layer","regex":"^/glossary/settlement\\-layer(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/settlement\\-layer(?:/)?$"},{"page":"/glossary/sharding","regex":"^/glossary/sharding(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/sharding(?:/)?$"},{"page":"/glossary/shared-security","regex":"^/glossary/shared\\-security(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/shared\\-security(?:/)?$"},{"page":"/glossary/slashing","regex":"^/glossary/slashing(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/slashing(?:/)?$"},{"page":"/glossary/smart-contract","regex":"^/glossary/smart\\-contract(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/smart\\-contract(?:/)?$"},{"page":"/glossary/social-consensus","regex":"^/glossary/social\\-consensus(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/social\\-consensus(?:/)?$"},{"page":"/glossary/sovereign-application","regex":"^/glossary/sovereign\\-application(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/sovereign\\-application(?:/)?$"},{"page":"/glossary/sovereign-blockchain","regex":"^/glossary/sovereign\\-blockchain(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/sovereign\\-blockchain(?:/)?$"},{"page":"/glossary/sovereign-rollup","regex":"^/glossary/sovereign\\-rollup(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/sovereign\\-rollup(?:/)?$"},{"page":"/glossary/state-transition-fraud-proof","regex":"^/glossary/state\\-transition\\-fraud\\-proof(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/state\\-transition\\-fraud\\-proof(?:/)?$"},{"page":"/glossary/synchrony-assumption","regex":"^/glossary/synchrony\\-assumption(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/synchrony\\-assumption(?:/)?$"},{"page":"/glossary/the-data-availability-problem","regex":"^/glossary/the\\-data\\-availability\\-problem(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/the\\-data\\-availability\\-problem(?:/)?$"},{"page":"/glossary/throughput","regex":"^/glossary/throughput(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/throughput(?:/)?$"},{"page":"/glossary/transaction-throughput","regex":"^/glossary/transaction\\-throughput(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/transaction\\-throughput(?:/)?$"},{"page":"/glossary/trust-minimized-bridge","regex":"^/glossary/trust\\-minimized\\-bridge(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/trust\\-minimized\\-bridge(?:/)?$"},{"page":"/glossary/trusted-bridge","regex":"^/glossary/trusted\\-bridge(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/trusted\\-bridge(?:/)?$"},{"page":"/glossary/validator","regex":"^/glossary/validator(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/validator(?:/)?$"},{"page":"/glossary/validator-set","regex":"^/glossary/validator\\-set(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/validator\\-set(?:/)?$"},{"page":"/glossary/validity-proof","regex":"^/glossary/validity\\-proof(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/validity\\-proof(?:/)?$"},{"page":"/glossary/validium","regex":"^/glossary/validium(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/validium(?:/)?$"},{"page":"/glossary/volition","regex":"^/glossary/volition(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/volition(?:/)?$"},{"page":"/glossary/zk-rollup","regex":"^/glossary/zk\\-rollup(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/zk\\-rollup(?:/)?$"},{"page":"/glossary/zkr","regex":"^/glossary/zkr(?:/)?$","routeKeys":{},"namedRegex":"^/glossary/zkr(?:/)?$"},{"page":"/learn","regex":"^/learn(?:/)?$","routeKeys":{},"namedRegex":"^/learn(?:/)?$"},{"page":"/press","regex":"^/press(?:/)?$","routeKeys":{},"namedRegex":"^/press(?:/)?$"},{"page":"/resources","regex":"^/resources(?:/)?$","routeKeys":{},"namedRegex":"^/resources(?:/)?$"},{"page":"/run-a-light-node","regex":"^/run\\-a\\-light\\-node(?:/)?$","routeKeys":{},"namedRegex":"^/run\\-a\\-light\\-node(?:/)?$"},{"page":"/technology","regex":"^/technology(?:/)?$","routeKeys":{},"namedRegex":"^/technology(?:/)?$"},{"page":"/what-is-celestia","regex":"^/what\\-is\\-celestia(?:/)?$","routeKeys":{},"namedRegex":"^/what\\-is\\-celestia(?:/)?$"},{"page":"/what-is-tia","regex":"^/what\\-is\\-tia(?:/)?$","routeKeys":{},"namedRegex":"^/what\\-is\\-tia(?:/)?$"},{"page":"/{MarkdownRemark.frontmatter__slug}","regex":"^/\\{MarkdownRemark\\.frontmatter__slug\\}(?:/)?$","routeKeys":{},"namedRegex":"^/\\{MarkdownRemark\\.frontmatter__slug\\}(?:/)?$"}],"dataRoutes":[],"rsc":{"header":"RSC","varyHeader":"RSC, Next-Router-State-Tree, Next-Router-Prefetch","prefetchHeader":"Next-Router-Prefetch","didPostponeHeader":"x-nextjs-postponed","contentTypeHeader":"text/x-component","suffix":".rsc","prefetchSuffix":".prefetch.rsc"},"rewrites":[]}

src/components/header.js

@@ -74,10 +74,35 @@ const navigation = [
 			},
 		],
 	},
-	{
-		text: "Run a node",
-		url: "/run-a-light-node/",
-		type: "internal",
+    {
+		text: "Community",
+		url: "",
+		submenus: [
+			{
+				text: "Run a node",
+				subtext: "Directly verify",
+				url: "/run-a-light-node/",
+				icon: "menu/technology-svg.svg",
+				type: "internal",
+				class: "plausible-event-name=Light_Node_Button--Header",
+			},
+			{
+				text: "Events",
+				subtext: "Celestia community events",
+				url: "/events/",
+				icon: "menu/documentation.svg",
+				type: "internal",
+				class: "plausible-event-name=Events_Button--Header",
+			},
+			{
+				text: "Social",
+				subtext: "Celestia community socials",
+				url: "/community/",
+				icon: "menu/forum.svg",
+				type: "external",
+				class: "",
+			},
+		],
 	},
 ];
 

src/components/imageComponent.js

@@ -38,7 +38,7 @@ const Image = (props) => {
 
 	const imageData = getImage(image.node.childImageSharp);
 
-	return <GatsbyImage image={imageData} alt={props.alt} />;
+	return <GatsbyImage className={props.className} image={imageData} alt={props.alt} />;
 };
 
 export default Image;

src/components/modules/event-card.js

@@ -0,0 +1,69 @@
+import React from "react";
+import Image from "../imageComponent";
+
+const EventCard = ({ title, description, date, location, url, image }) => {
+	const truncateDescription = (text, limit) => {
+		if (text.length <= limit) return text;
+		return text.slice(0, limit).trim() + "...";
+	};
+
+	return (
+		<article className={"event-card"}>
+			<Image className={`event-image`} alt={title} filename={image} />
+			<div className={"event-content small"}>
+				<div>
+					<h3 className={"event-title small"}>{title}</h3>
+					<p className={"event-description small"}>{truncateDescription(description, 240)}</p>
+				</div>
+				<div>
+					<div className={"divider small"} />
+					<div className={"event-details"}>
+						<div className={"event-meta"}>
+							<span className={"event-date"}>
+								<svg className='icon' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+									<path
+										d='M5.33333 1V3.66667M10.6667 1V3.66667M2 6.33333H14M3.33333 2.33333H12.6667C13.403 2.33333 14 2.93029 14 3.66667V13C14 13.7364 13.403 14.3333 12.6667 14.3333H3.33333C2.59695 14.3333 2 13.7364 2 13V3.66667C2 2.93029 2.59695 2.33333 3.33333 2.33333Z'
+										stroke='black'
+										stroke-width='1.4'
+										stroke-linecap='round'
+										stroke-linejoin='round'
+									/>
+								</svg>
+								{date}
+							</span>
+							<svg width='5' height='5' viewBox='0 0 5 5' fill='none' xmlns='http://www.w3.org/2000/svg'>
+								<circle cx='2.5' cy='2.5' r='2.5' fill='black' />
+							</svg>
+							<span className={"event-location"}>
+								<svg className='icon' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+									<path
+										d='M13.2001 6.60007C13.2001 10.0952 9.32279 13.7353 8.02078 14.8595C7.89948 14.9507 7.75183 15 7.60007 15C7.44831 15 7.30066 14.9507 7.17937 14.8595C5.87735 13.7353 2 10.0952 2 6.60007C2 5.11484 2.59001 3.69044 3.64022 2.64022C4.69044 1.59001 6.11484 1 7.60007 1C9.0853 1 10.5097 1.59001 11.5599 2.64022C12.6101 3.69044 13.2001 5.11484 13.2001 6.60007Z'
+										stroke='black'
+										stroke-width='1.5'
+										stroke-linecap='round'
+										stroke-linejoin='round'
+									/>
+									<path
+										d='M7.60007 8.7001C8.75988 8.7001 9.7001 7.75988 9.7001 6.60007C9.7001 5.44026 8.75988 4.50004 7.60007 4.50004C6.44026 4.50004 5.50004 5.44026 5.50004 6.60007C5.50004 7.75988 6.44026 8.7001 7.60007 8.7001Z'
+										stroke='black'
+										stroke-width='1.5'
+										stroke-linecap='round'
+										stroke-linejoin='round'
+									/>
+								</svg>
+								{location}
+							</span>
+						</div>
+						<div className='button button-simple small-button'>
+							<a className='link' href={url} target={"_blank"} rel={"noreferrer"} aria-label={title}>
+								View event
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</article>
+	);
+};
+
+export default EventCard;

src/components/modules/event-list.js

@@ -0,0 +1,59 @@
+import React from "react";
+import EventCard from "./event-card";
+import { eventData } from "../../datas/events/event-data";
+import { formatDateRange } from "../../utils/date-utils";
+
+const EventList = ({ eventsNumber, hasEventType, isNotFeatured, pastEvents }) => {
+	const getFilteredEvents = (count) => {
+		let filteredEvents = eventData;
+		const currentDate = new Date();
+		currentDate.setHours(0, 0, 0, 0); // Set to start of day for accurate comparison
+
+		// Filter events based on hasEventType if provided
+		if (hasEventType) {
+			filteredEvents = filteredEvents.filter((event) => event.eventType === hasEventType);
+		}
+
+		// Exclude featured events if isNotFeatured is true
+		if (isNotFeatured) {
+			filteredEvents = filteredEvents.filter((event) => !event.featured);
+		}
+
+		// Filter for past events or future/current events based on pastEvents prop
+		if (pastEvents) {
+			filteredEvents = filteredEvents.filter((event) => new Date(event.endDate || event.startDate) < currentDate);
+		} else {
+			filteredEvents = filteredEvents.filter((event) => new Date(event.startDate) >= currentDate);
+		}
+
+		// Sort events by date
+		const sortedEvents = filteredEvents.sort((a, b) => {
+			return pastEvents
+				? new Date(b.startDate) - new Date(a.startDate) // Descending order for past events
+				: new Date(a.startDate) - new Date(b.startDate); // Ascending order for future events
+		});
+
+		// Return the specified number of events, or all if count is not provided
+		return count ? sortedEvents.slice(0, count) : sortedEvents;
+	};
+
+	const filteredEvents = getFilteredEvents(eventsNumber || null);
+
+	return (
+		<div className={"event-list-container"}>
+			{filteredEvents.map((event) => (
+				<EventCard
+					key={event.id}
+					title={event.title}
+					image={event.image}
+					description={event.description}
+					date={formatDateRange(event.startDate, event.endDate)}
+					location={event.location}
+					url={event.url}
+				/>
+			))}
+		</div>
+	);
+};
+
+export default EventList;