Add Ethereum World Fair banner on apps page

app/[locale]/apps/_components/AppCard.tsx

@@ -19,6 +19,7 @@ interface AppCardProps {
   hoverClassName?: string
   matomoCategory: string
   matomoAction: string
+  forceLightMode?: boolean
 }
 
 const AppCard = ({
@@ -31,17 +32,32 @@ const AppCard = ({
   hoverClassName,
   matomoCategory,
   matomoAction,
+  forceLightMode = false,
 }: AppCardProps) => {
   const cardContent = (
     <div
       className={cn(
         "flex text-body",
         isVertical ? "flex-col gap-3" : "flex-row gap-3"
       )}
+      style={
+        forceLightMode
+          ? ({
+              "--body": "var(--gray-900)",
+              "--body-medium": "var(--gray-500)",
+              "--body-light": "var(--gray-200)",
+              "--background": "var(--white)",
+              "--background-highlight": "var(--gray-50)",
+              "--primary": "var(--purple-600)",
+              "--primary-high-contrast": "var(--purple-800)",
+              "--primary-low-contrast": "var(--purple-100)",
+            } as React.CSSProperties)
+          : undefined
+      }
     >
       <div
         className={cn(
-          "flex overflow-hidden rounded-xl border",
+          "flex overflow-hidden rounded-xl",
           `w-${imageSize} h-${imageSize}`
         )}
       >

app/[locale]/apps/_components/DevconnectBanner.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import { AppData } from "@/lib/types"
+
+import { Image } from "@/components/Image"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import { breakpointAsNumber } from "@/lib/utils/screen"
+
+import AppCard from "./AppCard"
+
+import DevconnectBannerImage from "@/public/images/devconnect/devconnect-hero.png"
+import DevconnectLogo from "@/public/images/devconnect/devconnect-logo.png"
+
+const DevconnectBanner = ({ apps }: { apps: AppData[] }) => {
+  const cards = apps
+    .slice(0, 18)
+    .map((app, index) => (
+      <AppCard
+        key={index}
+        app={app}
+        imageSize={16}
+        showDescription={false}
+        matomoCategory="devconnect_apps"
+        matomoAction="click"
+        forceLightMode
+        hoverClassName="hover:bg-gray-50"
+      />
+    ))
+
+  return (
+    <div className="relative flex min-h-20 w-full rounded-2xl bg-gradient-to-b from-transparent via-[#A8E8FF] to-[#A8E8FF] p-8 md:bg-gradient-to-r">
+      <Image
+        src={DevconnectBannerImage}
+        alt="Devconnect Banner"
+        className="absolute inset-0 -z-10 h-full rounded-2xl object-cover"
+        sizes="100vw"
+      />
+      <div className="flex w-full flex-col justify-between gap-4 md:flex-row">
+        <div className="flex w-full flex-row items-center justify-between gap-4 md:w-1/3 md:flex-col">
+          <Image
+            src={DevconnectLogo}
+            alt="Devconnect Logo"
+            className="mx-auto h-auto max-w-[224px] object-contain sm:mx-0 md:mx-auto"
+            sizes="100vw"
+          />
+          <div className="hidden flex-col gap-5 rounded-xl bg-white p-2.5 shadow-[0_4px_0_0_rgba(0,0,0,0.35)] sm:flex">
+            <div>
+              <p className="font-bold text-black">17 - 22 Nov 2025</p>
+              <p className="font-bold text-black">Buenos Aires, Argentina</p>
+            </div>
+            <ButtonLink
+              href="https://devconnect.org/"
+              size="md"
+              hideArrow
+              className="min-h-0 whitespace-nowrap rounded-none border-b-2 border-b-[#B2820A] bg-[#F6B40E] px-4 text-md/none font-bold uppercase text-black hover:bg-[#B2820A] hover:!text-black active:text-black"
+            >
+              Get tickets
+            </ButtonLink>
+          </div>
+        </div>
+        <div className="flex w-full flex-col items-center gap-2 md:w-2/3">
+          <h2 className="text-black">Ethereum World Fair</h2>
+          <p className="text-black">
+            Discover some of the apps featuring in Buenos Aires this November.
+          </p>
+          <ButtonLink
+            href="https://devconnect.org/"
+            size="md"
+            hideArrow
+            className="min-h-0 whitespace-nowrap rounded-none border-b-2 border-b-[#B2820A] bg-[#F6B40E] px-4 text-md/none font-bold uppercase text-black hover:bg-[#B2820A] hover:!text-black active:text-black sm:hidden"
+          >
+            Get tickets
+          </ButtonLink>
+          <div className="relative w-full overflow-hidden">
+            <SwiperContainer>
+              <Swiper
+                slidesPerView={1}
+                grid={{
+                  rows: 2,
+                  fill: "row",
+                }}
+                breakpoints={{
+                  [breakpointAsNumber.sm]: {
+                    slidesPerView: 2,
+                    grid: {
+                      rows: 2,
+                      fill: "row",
+                    },
+                  },
+                  [breakpointAsNumber.md]: {
+                    slidesPerView: 2,
+                    grid: {
+                      rows: 3,
+                      fill: "row",
+                    },
+                  },
+                }}
+              >
+                {cards.map((card, index) => (
+                  <SwiperSlide key={index}>{card}</SwiperSlide>
+                ))}
+                <SwiperNavigation className="bg-transparent [&_.swiper-pagination-bullet-active]:!bg-purple-500 [&_.swiper-pagination-bullet]:!bg-purple-800" />
+              </Swiper>
+            </SwiperContainer>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DevconnectBanner

app/[locale]/apps/page.tsx

@@ -5,15 +5,19 @@ import {
   setRequestLocale,
 } from "next-intl/server"
 
-import type { CommitHistory, Lang, PageParams } from "@/lib/types"
+import { CommitHistory, Lang, PageParams } from "@/lib/types"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
 import { SimpleHero } from "@/components/Hero"
 import I18nProvider from "@/components/I18nProvider"
 import MainArticle from "@/components/MainArticle"
 import SubpageCard from "@/components/SubpageCard"
 
-import { getDiscoverApps, getHighlightedApps } from "@/lib/utils/apps"
+import {
+  getDevconnectApps,
+  getDiscoverApps,
+  getHighlightedApps,
+} from "@/lib/utils/apps"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
 import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { getMetadata } from "@/lib/utils/metadata"
@@ -26,6 +30,7 @@ import { BASE_TIME_UNIT } from "@/lib/constants"
 import AppCard from "./_components/AppCard"
 import AppsHighlight from "./_components/AppsHighlight"
 import CommunityPicks from "./_components/CommunityPicks"
+import DevconnectBanner from "./_components/DevconnectBanner"
 import SuggestAnApp from "./_components/SuggestAnApp"
 import TopApps from "./_components/TopApps"
 import AppsJsonLD from "./page-jsonld"
@@ -57,6 +62,9 @@ const Page = async ({ params }: { params: PageParams }) => {
   // Get 6 random staff pick apps
   const discoverApps = getDiscoverApps(appsData, 6)
 
+  // get devconnect apps
+  const devconnectApps = getDevconnectApps(appsData)
+
   // Get translations
   const t = await getTranslations({ locale, namespace: "page-apps" })
 
@@ -96,6 +104,10 @@ const Page = async ({ params }: { params: PageParams }) => {
             <AppsHighlight apps={highlightedApps} matomoCategory="apps" />
           </div>
 
+          <div className="flex flex-col gap-4 px-4 md:px-8">
+            <DevconnectBanner apps={devconnectApps} />
+          </div>
+
           <div className="flex flex-col gap-4 px-4 md:px-8">
             <h2>{t("page-apps-discover-title")}</h2>
             <div className="grid grid-cols-1 gap-7 md:grid-cols-2 lg:grid-cols-3">

src/components/ui/swiper.tsx

@@ -2,7 +2,13 @@
 
 import * as React from "react"
 import { cva, VariantProps } from "class-variance-authority"
-import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules"
+import {
+  EffectCards,
+  Grid,
+  Keyboard,
+  Navigation,
+  Pagination,
+} from "swiper/modules"
 import {
   Swiper as SwiperReact,
   type SwiperProps as SwiperReactProps,
@@ -20,6 +26,7 @@ import "swiper/css"
 import "swiper/css/navigation"
 import "swiper/css/pagination"
 import "swiper/css/effect-cards"
+import "swiper/css/grid"
 
 import { useTranslation } from "@/hooks/useTranslation"
 
@@ -147,7 +154,7 @@ const Swiper = React.forwardRef<SwiperRef, SwiperProps>(
           el: ".ui-swiper-pagination",
         }}
         keyboard
-        modules={[Navigation, Pagination, Keyboard, EffectCards]}
+        modules={[Navigation, Pagination, Keyboard, EffectCards, Grid]}
         slidesPerView={1}
         slidesPerGroup={1}
         lazyPreloadPrevNext={0}