add apex to past events, add zone seoul as spotlight event, rm non used images, fix info session bug

community/events.page.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useMemo } from "react";
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeHooks } from "@redocly/theme/core/hooks";
 const moment = require("moment");
-const amaImage = require("../static/img/events/AMAs.png")
-const hackathon = require("../static/img/events/Hackathons.png")
-const sanDiego = require("../static/img/events/event-meetup-san-diego@2x.jpg")
-const miami = require("../static/img/events/event-meetup-miami@2x.jpg")
-const conference = require("../static/img/events/Conference.png")
-const zone = require("../static/img/events/XRPLZone.png")
-const calls = require("../static/img/events/CommunityCalls.png")
-const brazil = require("../static/img/events/event-meetup-brazil.png")
-const korea = require("../static/img/events/SouthKoreaMeetup.png")
+const amaImage = require("../static/img/events/AMAs.png");
+const hackathon = require("../static/img/events/Hackathons.png");
+const sanDiego = require("../static/img/events/event-meetup-san-diego@2x.jpg");
+const miami = require("../static/img/events/event-meetup-miami@2x.jpg");
+const conference = require("../static/img/events/Conference.png");
+const zone = require("../static/img/events/XRPLZone.png");
+const calls = require("../static/img/events/CommunityCalls.png");
+const brazil = require("../static/img/events/event-meetup-brazil.png");
+const korea = require("../static/img/events/SouthKoreaMeetup.png");
 const infoSession = require("../static/img/events/InfoSessions.png");
 export const frontmatter = {
   seo: {
@@ -640,7 +640,6 @@ const events = [
     image: conference,
     end_date: "June 1, 2024",
   },
-
   {
     name: "Permissionless",
     description:
@@ -762,10 +761,21 @@ const events = [
     image: infoSession,
     end_date: "August 23, 2024",
   },
+  {
+    name: "APEX 2024: The XRPL Developer Summit",
+    description:
+      "Apex XRPL Developer Summit is the annual event where developers, contributors, and thought leaders come together to learn, build, share, network, and celebrate all things XRP Ledger.",
+    type: "conference",
+    link: "https://www.youtube.com/playlist?list=PLl-QsmXvjodqeHPgq1UrKVcRPoNJe12Wv",
+    location: "Amsterdam",
+    date: "June 11 - 13, 2024",
+    image: conference,
+    end_date: "June 13, 2024",
+  },
 ];
 
 export default function Events() {
-  const { useTranslate} = useThemeHooks();
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { past, upcoming } = useMemo(() => categorizeDates(events), []);
 
@@ -794,11 +804,13 @@ export default function Events() {
       (event) => upcomingFilters[event.type.split("-")[0]] !== false
     );
   }, [upcoming, upcomingFilters]);
-  
+
   const filteredPast = useMemo(() => {
-    return past.filter((event) => pastFilters[event.type.split("-")[0]] !== false);
+    return past.filter(
+      (event) => pastFilters[event.type.split("-")[0]] !== false
+    );
   }, [past, pastFilters]);
-  
+
   const handleUpcomingFilterChange = (event) => {
     const { name, checked } = event.target;
     setUpcomingFilters((prevFilters) => ({
@@ -806,7 +818,7 @@ export default function Events() {
       [name.split("-")[0]]: checked,
     }));
   };
-  
+
   const handlePastFilterChange = (event) => {
     const { name, checked } = event.target;
     setPastFilters((prevFilters) => ({
@@ -814,7 +826,7 @@ export default function Events() {
       [name.split("-")[0]]: checked,
     }));
   };
-  
+
   return (
     <div className="landing page-events">
       <div>
@@ -847,26 +859,26 @@ export default function Events() {
             <div className="pt-5 pr-2 col">
               <div className="d-flex flex-column-reverse">
                 <h2 className="mb-8 h4 h2-sm">
-                  {translate("XRP Ledger Apex")}
+                  {translate("XRPL Zone Seoul")}
                 </h2>
                 <h6 className="mb-3 eyebrow">{translate("Save the Date")}</h6>
               </div>
               <p className="mb-4">
                 {translate(
-                  "XRP Ledger Apex 2024 is the official global community summit that unites developers, innovators, businesses, and investors who are building the future of finance on the XRP Ledger blockchain."
+                  "Join us at XRPL Zone Seoul where developers, corporates, fintechs, banks, VCs, academia, and the XRP community come together under one roof for the biggest XRPL event in South Korea!"
                 )}
               </p>
               <div className=" my-3 event-small-gray">
-                Location: Amsterdam
+                Location: Seongdong-su, Seoul
               </div>
               <div className="py-2 my-3 event-small-gray">
-                Date: June 11-13, 2024
+                September 4th, 2024
               </div>
               <div className="d-lg-block">
                 <a
                   className="btn btn-primary btn-arrow-out"
                   target="_blank"
-                  href="https://register.xrpledgerapex.com/2024/?utm_source=xrplorg&utm_medium=web&utm_campaign=events"
+                  href="https://ripple.swoogo.com/xrpl-zone-seoul"
                 >
                   {translate("Register Now")}
                 </a>
@@ -897,7 +909,9 @@ export default function Events() {
                   checked={upcomingFilters.conference}
                   onChange={handleUpcomingFilterChange}
                 />
-                <label htmlFor="conference-upcoming">{translate("Conference")}</label>
+                <label htmlFor="conference-upcoming">
+                  {translate("Conference")}
+                </label>
               </div>
               <div className="form-check form-check-inline">
                 <input
@@ -921,7 +935,9 @@ export default function Events() {
                   checked={upcomingFilters.hackathon}
                   onChange={handleUpcomingFilterChange}
                 />
-                <label htmlFor="hackathon-upcoming">{translate("Hackathons")}</label>
+                <label htmlFor="hackathon-upcoming">
+                  {translate("Hackathons")}
+                </label>
               </div>
               <div className="form-check form-check-inline">
                 <input
@@ -945,7 +961,9 @@ export default function Events() {
                   checked={upcomingFilters.cc}
                   onChange={handleUpcomingFilterChange}
                 />
-                <label htmlFor="cc-upcoming">{translate("Community Calls")}</label>
+                <label htmlFor="cc-upcoming">
+                  {translate("Community Calls")}
+                </label>
               </div>
               <div className="form-check form-check-inline">
                 <input
@@ -969,7 +987,9 @@ export default function Events() {
                   checked={upcomingFilters["info-session"]}
                   onChange={handleUpcomingFilterChange}
                 />
-                <label htmlFor="info-session-upcoming">{translate("Info Session")}</label>
+                <label htmlFor="info-session-upcoming">
+                  {translate("Info Session")}
+                </label>
               </div>
             </div>
           </div>
@@ -989,7 +1009,9 @@ export default function Events() {
                     background: `url(${event.image}) no-repeat`,
                   }}
                 >
-                  <div className="event-card-title">{translate(event.name)}</div>
+                  <div className="event-card-title">
+                    {translate(event.name)}
+                  </div>
                 </div>
                 <div className="event-card-body">
                   <p>{translate(event.description)}</p>
@@ -1025,7 +1047,9 @@ export default function Events() {
                   checked={pastFilters.conference}
                   onChange={handlePastFilterChange}
                 />
-                <label htmlFor="conference-past">{translate("Conference")}</label>
+                <label htmlFor="conference-past">
+                  {translate("Conference")}
+                </label>
               </div>
               <div className="form-check form-check-inline">
                 <input
@@ -1049,7 +1073,9 @@ export default function Events() {
                   checked={pastFilters.hackathon}
                   onChange={handlePastFilterChange}
                 />
-                <label htmlFor="hackathon-past">{translate("Hackathons")}</label>
+                <label htmlFor="hackathon-past">
+                  {translate("Hackathons")}
+                </label>
               </div>
               <div className="form-check form-check-inline">
                 <input
@@ -1097,7 +1123,9 @@ export default function Events() {
                   checked={pastFilters["info-session"]}
                   onChange={handlePastFilterChange}
                 />
-                <label htmlFor="info-session-past">{translate("Info Session")}</label>
+                <label htmlFor="info-session-past">
+                  {translate("Info Session")}
+                </label>
               </div>
             </div>
           </div>
@@ -1115,7 +1143,9 @@ export default function Events() {
                     background: `url(${event.image}) no-repeat`,
                   }}
                 >
-                  <div className="event-card-title">{translate(event.name)}</div>
+                  <div className="event-card-title">
+                    {translate(event.name)}
+                  </div>
                 </div>
                 <div className="event-card-body">
                   <p>{translate(event.description)}</p>