feat(web): switch roadmap images by release tab

apps/web/components/sections/roadmap/release.tsx

@@ -130,7 +130,7 @@ export function RoadmapRelease({ data }: RoadmapReleaseProps) {
             <ReleaseModuleTable modules={activeRelease.modules} />
           </div>
 
-          <ReleaseFeature feature={data.feature} />
+          <ReleaseFeature image={activeRelease.image} />
         </div>
       </ContentWidth>
     </section>
@@ -267,17 +267,18 @@ function ModuleActionLink({
 }
 
 function ReleaseFeature({
-  feature,
+  image,
 }: {
-  feature: RoadmapCopySection['release']['feature']
+  image: RoadmapCopySection['release']['items'][number]['image']
 }) {
   return (
     <div className="relative order-2 aspect-[702/521] w-full overflow-hidden rounded-xl min-[1025px]:order-none min-[1025px]:aspect-auto min-[1025px]:h-full">
       <Image
-        src={feature.image.src}
-        alt={feature.image.alt}
-        width={feature.image.width}
-        height={feature.image.height}
+        key={image.src}
+        src={image.src}
+        alt={image.alt}
+        width={image.width}
+        height={image.height}
         sizes="(min-width: 1025px) 50vw, 100vw"
         className="h-full w-full object-cover object-[62%_center]"
         loading="eager"

content/pages/en/roadmap.json

@@ -30,17 +30,17 @@
         "activeTab": "TESTNET V0.2",
         "feature": {
           "eyebrow": "Build",
-          "body": "Operate early. Help harden a private-by-default network that protects civil liberties and strengthens trust in our communities.",
-          "image": {
-            "src": "/images/roadmap/release-roadmap.png",
-            "alt": "",
-            "width": 1916,
-            "height": 821
-          }
+          "body": "Operate early. Help harden a private-by-default network that protects civil liberties and strengthens trust in our communities."
         },
         "items": [
           {
             "tab": "TESTNET V0.1",
+            "image": {
+              "src": "/images/roadmap/releases/testnet-v0-1.png",
+              "alt": "",
+              "width": 1916,
+              "height": 821
+            },
             "status": "LIVE",
             "dateLabel": "Date Released",
             "date": "March 7, 2026",
@@ -160,6 +160,12 @@
           },
           {
             "tab": "TESTNET V0.2",
+            "image": {
+              "src": "/images/roadmap/releases/testnet-v0-2.png",
+              "alt": "",
+              "width": 1916,
+              "height": 821
+            },
             "status": "LIVE",
             "dateLabel": "Date Released",
             "date": "June 30, 2026",
@@ -279,6 +285,12 @@
           },
           {
             "tab": "TESTNET V0.3",
+            "image": {
+              "src": "/images/roadmap/releases/testnet-v0-3.png",
+              "alt": "",
+              "width": 1916,
+              "height": 821
+            },
             "status": "IN DEVELOPMENT",
             "dateLabel": "Expected Release",
             "date": "H2 2026",
@@ -393,6 +405,12 @@
           },
           {
             "tab": "MAINNET",
+            "image": {
+              "src": "/images/roadmap/releases/mainnet.png",
+              "alt": "",
+              "width": 1916,
+              "height": 821
+            },
             "status": "IN DEVELOPMENT",
             "dateLabel": "Expected Release",
             "date": "H1 2027",

packages/content/src/schemas/pages/page-copy-sections.ts

@@ -448,6 +448,7 @@ const roadmapReleaseModuleSchema = z.object({
 
 const roadmapReleaseItemSchema = z.object({
   tab: z.string().min(1),
+  image: mediaRefSchema,
   status: z.string().min(1).optional(),
   dateLabel: z.string().min(1),
   date: z.string().min(1),
@@ -506,7 +507,6 @@ export const roadmapCopySectionSchema = z.object({
     feature: z.object({
       eyebrow: z.string().min(1),
       body: z.string().min(1),
-      image: mediaRefSchema,
     }),
     items: z.array(roadmapReleaseItemSchema).min(1),
   }),