feat: add Hackathon section

wackerow · wackerow · commit f1b9466471a9 · 2025-07-11T19:28:04.000-07:00
diff --git a/app/[locale]/developers/_components/HackathonCard.tsx b/app/[locale]/developers/_components/HackathonCard.tsx
@@ -0,0 +1,55 @@
+import { CommunityConference } from "@/lib/types"
+
+import { Image } from "@/components/Image"
+import CardImage from "@/components/Image/CardImage"
+import {
+  Card,
+  CardBanner,
+  CardContent,
+  CardHighlight,
+  CardSubTitle,
+  CardTitle,
+} from "@/components/ui/card"
+
+import EventFallback from "@/public/images/events/event-placeholder.png"
+
+type HackathonCardProps = {
+  event: CommunityConference
+  className?: string
+  eventCategory: string
+}
+
+const HackathonCard = ({
+  event,
+  className,
+  eventCategory = "Developers",
+}: HackathonCardProps) => {
+  const { title, href, description, imageUrl, formattedDate, location } = event
+  return (
+    <Card
+      href={href}
+      key={title + description}
+      customEventOptions={{
+        eventCategory,
+        eventAction: "hackathons",
+        eventName: title,
+      }}
+      className={className}
+    >
+      <CardBanner className="h-36 w-full sm:w-[270px] 2xl:w-full">
+        {imageUrl ? (
+          <CardImage src={imageUrl} />
+        ) : (
+          <Image src={EventFallback} alt="" sizes="276px" />
+        )}
+      </CardBanner>
+      <CardContent>
+        <CardTitle>{title}</CardTitle>
+        <CardSubTitle>{formattedDate} </CardSubTitle>
+        <CardHighlight>{location}</CardHighlight>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default HackathonCard
diff --git a/app/[locale]/developers/_components/HackathonSwiper/index.tsx b/app/[locale]/developers/_components/HackathonSwiper/index.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import type { CommunityConference } from "@/lib/types"
+
+import { Swiper, SwiperSlide } from "@/components/ui/swiper"
+
+import HackathonCard from "../HackathonCard"
+
+type HackathonSwiperProps = {
+  events: CommunityConference[]
+  eventCategory: string
+}
+
+const HackathonSwiper = ({ events, eventCategory }: HackathonSwiperProps) => (
+  <Swiper spaceBetween={16} slidesPerView={1.25}>
+    {events.map((event, idx) => (
+      <SwiperSlide key={idx} className="max-2xl:first:ms-8 max-2xl:last:pe-16">
+        <HackathonCard event={event} eventCategory={eventCategory} />
+      </SwiperSlide>
+    ))}
+  </Swiper>
+)
+
+export default HackathonSwiper
diff --git a/app/[locale]/developers/_components/HackathonSwiper/lazy.tsx b/app/[locale]/developers/_components/HackathonSwiper/lazy.tsx
@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })
diff --git a/app/[locale]/developers/_components/HackathonSwiper/loading.tsx b/app/[locale]/developers/_components/HackathonSwiper/loading.tsx
@@ -0,0 +1,5 @@
+import { SkeletonCardGrid } from "@/components/ui/skeleton"
+
+const Loading = () => <SkeletonCardGrid />
+
+export default Loading
diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx
@@ -14,18 +14,19 @@ import { VStack } from "@/components/ui/flex"
 import Link from "@/components/ui/Link"
 import InlineLink from "@/components/ui/Link"
 import { Section } from "@/components/ui/section"
-import { SkeletonCardGrid } from "@/components/ui/skeleton"
 
 import { cn } from "@/lib/utils/cn"
 import { getMetadata } from "@/lib/utils/metadata"
 import { screens } from "@/lib/utils/screen"
 
 import BuilderCard from "./_components/BuilderCard"
 import BuilderSwiper from "./_components/BuilderSwiper/lazy"
+import HackathonCard from "./_components/HackathonCard"
+import HackathonSwiper from "./_components/HackathonSwiper/lazy"
 import SpeedRunCard from "./_components/SpeedRunCard"
 import VideoCourseCard from "./_components/VideoCourseCard"
 import VideoCourseSwiper from "./_components/VideoCourseSwiper/lazy"
-import { getBuilderPaths, getVideoCourses } from "./utils"
+import { getBuilderPaths, getHackathons, getVideoCourses } from "./utils"
 
 import resourcesBanner from "@/public/images/developers/resources-banner.png"
 import scaffoldDebugScreenshot from "@/public/images/developers/scaffold-debug-screenshot.png"
@@ -84,6 +85,10 @@ const DevelopersPage = async ({
 
   const courses = await getVideoCourses()
 
+  const hackathons = (await getHackathons()).slice(0, 5)
+
+  const eventCategory = `Developers - ${locale}`
+
   return (
     <VStack className="mx-auto my-0 w-full">
       <HubHero
@@ -407,7 +412,26 @@ const DevelopersPage = async ({
         <Section id="hackathons" className="space-y-4 py-10 md:py-12">
           <h2>{t("page-developers-hackathons-title")}</h2>
           <p>{t("page-developers-hackathons-desc")}</p>
-          <SkeletonCardGrid />
+
+          {/* DESKTOP */}
+          <Scroller>
+            {hackathons.map((event, idx) => (
+              <HackathonCard
+                key={idx}
+                event={event}
+                eventCategory={eventCategory}
+                className="flex-1"
+              />
+            ))}
+          </Scroller>
+          {/* MOBILE */}
+          <div className="-mx-8 sm:hidden">
+            <HackathonSwiper
+              events={hackathons}
+              eventCategory={eventCategory}
+            />
+          </div>
+
           <div className="flex justify-center">
             <ButtonLink href="https://ethglobal.com/">
               {t("page-developers-visit-ethglobal")}
diff --git a/app/[locale]/developers/utils.ts b/app/[locale]/developers/utils.ts
@@ -1,5 +1,11 @@
 import { getLocale, getTranslations } from "next-intl/server"
 
+import { CommunityConference } from "@/lib/types"
+
+import events from "@/data/community-events.json"
+
+import { getUpcomingEvents } from "../utils"
+
 import type { DevelopersPath, VideoCourse } from "./types"
 
 import cyfrinBasicBanner from "@/public/images/developers/cyfrin-basic-banner.webp"
@@ -99,3 +105,9 @@ export const getVideoCourses = async (): Promise<VideoCourse[]> => {
     },
   ]
 }
+
+export const getHackathons = async (): Promise<CommunityConference[]> => {
+  const locale = await getLocale()
+  const allUpcomingEvents = getUpcomingEvents(events, locale)
+  return allUpcomingEvents.filter((e) => e.hackathon) as CommunityConference[]
+}
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -8,7 +8,6 @@ import type {
   CommunityBlog,
   ValuesPairing,
 } from "@/lib/types"
-import type { EventCardProps } from "@/lib/types"
 import type { Lang } from "@/lib/types"
 import { CodeExample } from "@/lib/interfaces"
 
@@ -82,7 +81,7 @@ import {
 } from "@/lib/constants"
 
 import TenYearHomeBanner from "./10years/_components/TenYearHomeBanner"
-import { getActivity } from "./utils"
+import { getActivity, getUpcomingEvents } from "./utils"
 
 import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
 import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
@@ -402,18 +401,8 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
     },
   ]
 
-  const upcomingEvents = events
-    .filter((event) => {
-      const isValid = isValidDate(event.endDate)
-      const beginningOfEndDate = new Date(event.endDate).getTime()
-      const endOfEndDate = beginningOfEndDate + 24 * 60 * 60 * 1000
-      const isUpcoming = endOfEndDate >= new Date().getTime()
-      return isValid && isUpcoming
-    })
-    .sort(
-      (a, b) => new Date(a.endDate).getTime() - new Date(b.endDate).getTime()
-    )
-    .slice(0, 3) as EventCardProps[] // Show 3 events ending soonest
+  const allUpcomingEvents = getUpcomingEvents(events, locale)
+  const upcomingEvents = allUpcomingEvents.slice(0, 3)
 
   const metricResults: AllHomepageActivityData = {
     ethPrice,
@@ -906,9 +895,9 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
                           className="max-w-full object-cover object-center"
                         />
                       ) : (
-                        <Image src={EventFallback} alt="" />
+                        <Image src={EventFallback} alt="" sizes="276px" />
                       )}
-                      <Image src={EventFallback} alt="" />
+                      <Image src={EventFallback} alt="" sizes="276px" />
                     </CardBanner>
                     <CardContent>
                       <CardTitle>{title}</CardTitle>
diff --git a/app/[locale]/utils.ts b/app/[locale]/utils.ts
@@ -5,10 +5,18 @@
 
 import { getTranslations } from "next-intl/server"
 
-import type { AllHomepageActivityData, Lang, StatsBoxMetric } from "@/lib/types"
+import type {
+  AllHomepageActivityData,
+  CommunityConference,
+  Lang,
+  StatsBoxMetric,
+} from "@/lib/types"
 
+import { isValidDate } from "@/lib/utils/date"
 import { getLocaleForNumberFormat } from "@/lib/utils/translations"
 
+import { DEFAULT_LOCALE } from "@/lib/constants"
+
 const formatLargeUSD = (value: number, locale: string): string => {
   return new Intl.NumberFormat(locale, {
     style: "currency",
@@ -124,3 +132,38 @@ export const getActivity = async (
 
   return metrics
 }
+
+export const getUpcomingEvents = (
+  events: CommunityConference[],
+  locale = DEFAULT_LOCALE
+): CommunityConference[] =>
+  events
+    .filter((event) => {
+      const isValid = isValidDate(event.endDate)
+      const beginningOfEndDate = new Date(event.endDate).getTime()
+      const endOfEndDate = beginningOfEndDate + 24 * 60 * 60 * 1000
+      const isUpcoming = endOfEndDate >= new Date().getTime()
+      return isValid && isUpcoming
+    })
+    .sort(
+      (a, b) => new Date(a.endDate).getTime() - new Date(b.endDate).getTime()
+    )
+    .map(({ startDate, endDate, ...event }) => {
+      const formattedDate =
+        isValidDate(startDate) || isValidDate(endDate)
+          ? new Intl.DateTimeFormat(locale, {
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+            }).formatRange(
+              new Date(isValidDate(startDate) ? startDate : endDate),
+              new Date(isValidDate(endDate) ? endDate : startDate)
+            )
+          : ""
+      return {
+        ...event,
+        startDate,
+        endDate,
+        formattedDate,
+      }
+    })
diff --git a/src/data/community-events.json b/src/data/community-events.json
@@ -15,7 +15,8 @@
     "href": "https://ethglobal.com/events/pragma-newyork2025",
     "location": "New York, NYC, USA",
     "description": "Bringing developers onchain to build the future of the internet.",
-    "imageUrl": "https://ethglobal.com/og.png"
+    "imageUrl": "https://ethglobal.com/og.png",
+    "hackathon": true
   },
   {
     "title": "SBC (The Science of Blockchain Conference 2025)",
@@ -33,7 +34,8 @@
     "href": "https://ethglobal.com/events/newyork2025",
     "location": "New York, NYC, USA",
     "description": "Bringing developers onchain to build the future of the internet.",
-    "imageUrl": "https://ethglobal.com/og.png"
+    "imageUrl": "https://ethglobal.com/og.png",
+    "hackathon": true
   },
   {
     "title": "ProdFest Jos",
@@ -87,7 +89,8 @@
     "href": "https://ethglobal.com/events/pragma-newdelhi",
     "location": "New Delhi, IND",
     "description": "Bringing developers onchain to build the future of the internet.",
-    "imageUrl": "https://ethglobal.com/og.png"
+    "imageUrl": "https://ethglobal.com/og.png",
+    "hackathon": true
   },
   {
     "title": "ETHGlobal New Delhi",
@@ -96,7 +99,8 @@
     "href": "https://ethglobal.com/events/newdelhi",
     "location": "New Delhi, IND",
     "description": "Bringing developers onchain to build the future of the internet.",
-    "imageUrl": "https://ethglobal.com/og.png"
+    "imageUrl": "https://ethglobal.com/og.png",
+    "hackathon": true
   },
   {
     "title": "EthAccra",
@@ -123,7 +127,8 @@
     "href": "https://ethsafari.xyz/",
     "location": "Nairobi, Kenya",
     "description": "ETHSafari 2025 - web3 builders conference East Africa Kenya",
-    "imageUrl": "https://ethsafari.xyz/_next/image?url=%2FHackathon.png&w=640&q=75"
+    "imageUrl": "https://ethsafari.xyz/_next/image?url=%2FHackathon.png&w=640&q=75",
+    "hackathon": true
   },
   {
     "title": "ETH Boston",
@@ -168,7 +173,8 @@
     "href": "https://ethistanbul.io/",
     "location": "Istanbul, TR",
     "description": "ETHIstanbul is a conference and hackathon connecting you with global talents, industry professionals, and web3 companies advancing technology.",
-    "imageUrl": "https://ethistanbul.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fistanbul-background.99d6ad2a.webp&w=3840&q=75"
+    "imageUrl": "https://ethistanbul.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fistanbul-background.99d6ad2a.webp&w=3840&q=75",
+    "hackathon": true
   },
   {
     "title": "ETHSofia",
diff --git a/src/intl/en/page-developers-index.json b/src/intl/en/page-developers-index.json
@@ -90,7 +90,7 @@
   "page-developers-video-courses-title": "Video courses",
   "page-developers-video-courses-desc": "Want to kickstart your professional career in blockchain? These courses will prepare you to get hired as blockchain developer.",
   "page-developers-docs-section-desc": "Understand the core concepts of Ethereum and blockchains",
-  "page-developers-hackathons-title": "Join hackathons (TODO)",
+  "page-developers-hackathons-title": "Join hackathons",
   "page-developers-hackathons-desc": "Hackathons are great opportunities to network and learn from others as well as start projects and earn prizes",
   "page-developers-visit-ethglobal": "Visit EthGlobal",
   "page-developers-founders-title": "Are you a founder?",
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -609,6 +609,8 @@ export type CommunityConference = {
   startDate: string
   endDate: string
   imageUrl: string
+  hackathon?: boolean
+  formattedDate?: string
 }
 
 // Chains
