fix: repurpose featured flag to ensure resources render above fold

app/components/ui/Cards/EventCardSection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { EventCard } from "./EventCard";
 import styles from "./EventCardSection.module.scss";
 import { Loader } from "../Loader";
@@ -11,12 +11,24 @@ export const EventCardSection = ({
 }) => {
   const [showAll, setShowAll] = useState(false);
 
-  if (!events) {
+  // Sort events so featured events come first
+  const sortedEvents = useMemo(() => {
+    if (!events) return null;
+
+    return [...events].sort((a, b) => {
+      // Featured items first (true > false, so we reverse the comparison)
+      if (a.featured && !b.featured) return -1;
+      if (!a.featured && b.featured) return 1;
+      return 0;
+    });
+  }, [events]);
+
+  if (!sortedEvents) {
     return <Loader />;
   }
 
-  const displayedEvents = showAll ? events : events.slice(0, 4);
-  const hasMoreEvents = events.length > 4;
+  const displayedEvents = showAll ? sortedEvents : sortedEvents.slice(0, 4);
+  const hasMoreEvents = sortedEvents.length > 4;
 
   return (
     <>

app/hooks/StrapiAPI.ts

@@ -82,7 +82,7 @@ export function useNavigationData() {
  */
 export function useHomePageFeaturedResourcesData() {
   const path =
-    "events?populate[address]=*&populate[calendar_event]=*&populate[page_link]=*&populate[image][populate]=*&filters[featured][$eq]=true";
+    "events?populate[address]=*&populate[calendar_event]=*&populate[page_link]=*&populate[image][populate]=*";
 
   const dataFetcher = () =>
     fetcher<{ data: Array<StrapiDatumResponse<EventResponse>> }>(
@@ -370,6 +370,7 @@ export interface EventResponse extends BaseDatumAttributesResponse {
   image: {
     data: { id: number; attributes: ImageResponse };
   };
+  featured: boolean;
   page_link: LinkResponse;
   registration_link?: LinkResponse | null;
   event_categories?: { data: Array<StrapiDatumResponse<CategoryResponse>> };