Merge branch 'dev' into morpher-refactor

Author: wackerow

app/[locale]/10years/_components/AdoptionSwiper.tsx

@@ -24,7 +24,7 @@ const AdoptionSwiper = ({
   return (
     <div className="flex flex-1 flex-col gap-6 md:hidden">
       <SwiperContainer className="mx-auto w-full max-w-[550px]">
-        <Swiper>
+        <Swiper spaceBetween={32}>
           {adoptionCards.map((card, index) => (
             <SwiperSlide key={card.title}>
               <div

app/[locale]/10years/_components/InnovationSwiper.tsx

@@ -14,7 +14,10 @@ export default function InnovationSwiper() {
   return (
     <div className="w-[100%]">
       <SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
-        <Swiper className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
+        <Swiper
+          className="mx-auto w-full max-w-[550px] xl:max-w-[700px]"
+          spaceBetween={32}
+        >
           {innovationCards.map((card, index) => (
             <SwiperSlide
               key={index}

app/[locale]/10years/_components/TenYearGlobe.tsx

@@ -48,7 +48,7 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
   const atmosphereColor = resolvedTheme === "dark" ? "#B38DF0" : "#945AF4"
 
   const width = useBreakpointValue({
-    base: 260,
+    base: window?.innerWidth - 64 || 260, // Full width on mobile with padding
     sm: 400,
     md: 500,
     lg: 600,
@@ -237,8 +237,8 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
   return (
     <div
       ref={globeContainerRef}
-      className="relative cursor-grab active:cursor-grabbing"
-      style={{ width: width, height: width }}
+      className="relative w-full max-w-full cursor-grab active:cursor-grabbing"
+      style={{ height: width }}
     >
       {MemoizedGlobe}
       {hoveredEvent && tooltipPos && (

app/[locale]/10years/_components/TenYearHomeBanner.tsx

@@ -15,11 +15,11 @@ const TenYearHomeBanner = () => {
         <ParallaxImage
           src={TenYearGraphicImage}
           alt=""
-          className="mx-auto -mb-2 -mt-16 max-w-[500px] object-contain sm:-mt-24 md:-mt-32"
+          className="mx-auto -mb-2 -mt-16 max-w-[min(100%,500px)] object-contain sm:-mt-24 md:-mt-32"
         />
-        <div className="flex justify-center">
+        <div className="mt-4 flex justify-center">
           <TenYearDesktopText className="mb-4 hidden object-contain text-body md:block" />
-          <TenYearMobileText className="mb-4 block object-contain text-body md:hidden" />
+          <TenYearMobileText className="mb-4 block object-contain text-5xl text-body md:hidden" />
         </div>
         <div className="mb-4 flex flex-col gap-2">
           <p>

public/images/10-year-anniversary/10yeartext-mobile.svg

@@ -189,8 +189,8 @@
       }
     ]
   },
-  "central & south ameirca": {
-    "label": "Central & South Ameirca",
+  "central & south america": {
+    "label": "Central & South America",
     "events": [
       {
         "host": "Nodo Serrano",
@@ -201,7 +201,7 @@
         "city": "Tandil",
         "country": "Argentina",
         "region": "Central & South America",
-        "continent": "Central & South Ameirca",
+        "continent": "Central & South America",
         "lat": "-37.3288",
         "lng": "-59.1367",
         "readyToShow": "TRUE",
@@ -216,7 +216,7 @@
         "city": "Monterrey",
         "country": "Mexico",
         "region": "Central & South America",
-        "continent": "Central & South Ameirca",
+        "continent": "Central & South America",
         "lat": "25.6866",
         "lng": "-100.3161",
         "readyToShow": "TRUE",
@@ -231,7 +231,7 @@
         "city": "Cochabamba",
         "country": "Bolivia",
         "region": "Central & South America",
-        "continent": "Central & South Ameirca",
+        "continent": "Central & South America",
         "lat": "-17.382",
         "lng": "-66.1596",
         "readyToShow": "TRUE",
@@ -246,7 +246,7 @@
         "city": "Florianópolis",
         "country": "Brazil",
         "region": "Central & South America",
-        "continent": "Central & South Ameirca",
+        "continent": "Central & South America",
         "lat": "-27.5969",
         "lng": "-48.5468",
         "readyToShow": "TRUE",
@@ -389,4 +389,4 @@
       }
     ]
   }
-}
+}

src/data/mocks/fetched10YearEvents.json

@@ -0,0 +1,39 @@
+"use client"
+
+import { type RefObject, useEffect, useState } from "react"
+
+import { useEventListener } from "./useEventListener"
+
+export const useRefWidth = (
+  ref: RefObject<HTMLElement>,
+  padding: number = 0
+): number => {
+  const [width, setWidth] = useState(0)
+
+  const updateWidth = () => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect()
+      setWidth(Math.max(0, rect.width - padding))
+    }
+  }
+
+  // Use the internal useEventListener for window resize
+  useEventListener("resize", updateWidth)
+
+  useEffect(() => {
+    // Initial measurement
+    updateWidth()
+
+    // Create ResizeObserver for more accurate monitoring
+    const resizeObserver = new ResizeObserver(updateWidth)
+    if (ref.current) {
+      resizeObserver.observe(ref.current)
+    }
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [ref, padding])
+
+  return width
+}