From dc5fb83469706e5dc73cdc50e845a6a400caf626 Mon Sep 17 00:00:00 2001
From: Samarth Jindal <samarth.jindal2004@gmail.com>
Date: Tue, 21 Jan 2025 02:41:54 +0530
Subject: [PATCH 1/3] added the free or paid badge to each developer bootcamp
 card

---
 src/components/LearningToolsCardGrid.tsx      | 38 ++++++++++++-------
 src/components/ProductCard.tsx                |  5 +++
 .../en/page-developers-learning-tools.json    |  2 +-
 src/lib/types.ts                              |  1 +
 src/pages/developers/learning-tools.tsx       | 10 +++++
 5 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/components/LearningToolsCardGrid.tsx b/src/components/LearningToolsCardGrid.tsx
index 747579abdfd..599b399e5b8 100644
--- a/src/components/LearningToolsCardGrid.tsx
+++ b/src/components/LearningToolsCardGrid.tsx
@@ -10,19 +10,31 @@ const LearningToolsCardGrid = ({ category }: LearningToolsCardGridProps) => {
     <div className="mb-8 grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-8">
       {category
         .sort(({ locales }) => (locales?.length ? -1 : 0))
-        .map(({ name, description, background, url, alt, image, subjects }) => (
-          <ProductCard
-            key={name}
-            background={background}
-            url={url}
-            alt={alt}
-            image={image}
-            name={name}
-            subjects={subjects}
-          >
-            <Translation id={description} />
-          </ProductCard>
-        ))}
+        .map(
+          ({
+            name,
+            description,
+            background,
+            url,
+            alt,
+            image,
+            subjects,
+            priceType,
+          }) => (
+            <ProductCard
+              key={name}
+              background={background}
+              url={url}
+              alt={alt}
+              image={image}
+              name={name}
+              subjects={subjects}
+              priceType={priceType}
+            >
+              <Translation id={description} />
+            </ProductCard>
+          )
+        )}
     </div>
   )
 }
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
index 36385aca23c..ae8f99af944 100644
--- a/src/components/ProductCard.tsx
+++ b/src/components/ProductCard.tsx
@@ -63,6 +63,7 @@ export type ProductCardProps = {
   githubRepoStars?: number
   githubRepoLanguages?: Array<string>
   hideStars?: boolean
+  priceType?: string
 }
 
 const ProductCard = ({
@@ -79,6 +80,7 @@ const ProductCard = ({
   githubRepoStars = 0,
   githubRepoLanguages = [],
   hideStars = false,
+  priceType,
 }: ProductCardProps) => {
   const { t } = useTranslation("common")
 
@@ -123,6 +125,9 @@ const ProductCard = ({
               {subject}
             </SubjectBadge>
           ))}
+        {priceType && (
+          <SubjectBadge subject={priceType}>{priceType}</SubjectBadge>
+        )}
         {githubRepoLanguages.length > 0 &&
           githubRepoLanguages.map((name, idx: number) => (
             <SubjectBadge key={idx} subject={name}>
diff --git a/src/intl/en/page-developers-learning-tools.json b/src/intl/en/page-developers-learning-tools.json
index 29577942719..8786b714e12 100644
--- a/src/intl/en/page-developers-learning-tools.json
+++ b/src/intl/en/page-developers-learning-tools.json
@@ -2,7 +2,7 @@
   "page-learning-tools-bloomtech-description": "The BloomTech Web3 course will teach you the skills employers look for in engineers.",
   "page-learning-tools-bloomtech-logo-alt": "BloomTech logo",
   "page-learning-tools-bootcamps": "Developer bootcamps",
-  "page-learning-tools-bootcamps-desc": "Paid online courses to get you up to speed, fast.",
+  "page-learning-tools-bootcamps-desc": "Free or paid online courses to get you up to speed, fast.",
   "page-learning-tools-browse-docs": "Browse docs",
   "page-learning-tools-capture-the-ether-description": "Capture the Ether is a game in which you hack Ethereum smart contracts to learn about security.",
   "page-learning-tools-capture-the-ether-logo-alt": "Capture the Ether logo",
diff --git a/src/lib/types.ts b/src/lib/types.ts
index f79699248e2..515ae7f84fa 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -489,6 +489,7 @@ export interface LearningTool {
   background: string
   subjects: Array<string>
   locales?: Array<Lang>
+  priceType?: string
 }
 
 export interface LearningToolsCardGridProps {
diff --git a/src/pages/developers/learning-tools.tsx b/src/pages/developers/learning-tools.tsx
index 161dcaa6e8e..f151ed6277c 100644
--- a/src/pages/developers/learning-tools.tsx
+++ b/src/pages/developers/learning-tools.tsx
@@ -307,6 +307,7 @@ const LearningToolsPage = () => {
       ),
       background: "#f6f7f9",
       subjects: ["Solidity", "web3"],
+      priceType: "Paid",
     },
     {
       name: "BloomTech",
@@ -320,6 +321,7 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
+      priceType: "Paid",
     },
     {
       name: "Questbook",
@@ -333,6 +335,7 @@ const LearningToolsPage = () => {
       ),
       background: "#141236",
       subjects: ["Solidity", "web3"],
+      priceType: "Free",
     },
     {
       name: "Metaschool",
@@ -346,6 +349,7 @@ const LearningToolsPage = () => {
       ),
       background: "#f6f7f9",
       subjects: ["Solidity", "web3"],
+      priceType: "Free",
     },
     {
       name: "NFT School",
@@ -359,6 +363,7 @@ const LearningToolsPage = () => {
       ),
       background: "#111f29",
       subjects: ["Solidity", "web3"],
+      priceType: "Free",
     },
     {
       name: "Platzi",
@@ -373,6 +378,7 @@ const LearningToolsPage = () => {
       background: "#121f3d",
       subjects: ["Solidity", "web3"],
       locales: ["es"],
+      priceType: "Paid",
     },
     {
       name: "Speed Run Ethereum",
@@ -386,6 +392,7 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
+      priceType: "Free",
     },
     {
       name: "Alchemy University",
@@ -399,6 +406,7 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
+      priceType: "Free",
     },
     {
       name: "LearnWeb3",
@@ -412,6 +420,7 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
+      priceType: "Free",
     },
     {
       name: "Cyfrin Updraft",
@@ -425,6 +434,7 @@ const LearningToolsPage = () => {
       ),
       background: "#000000",
       subjects: ["Solidity", "web3"],
+      priceType: "Free",
     },
   ]
 

From 8f386d8ad4b640a5adce3f0613762d3807cbeb55 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 13 Sep 2025 12:38:46 +0100
Subject: [PATCH 2/3] patch: rm react import

---
 .../_components/learning-tools.tsx            |  6 +--
 src/components/LearningToolsCardGrid.tsx      | 46 +++++--------------
 src/lib/types.ts                              |  2 +-
 3 files changed, 15 insertions(+), 39 deletions(-)

diff --git a/app/[locale]/developers/learning-tools/_components/learning-tools.tsx b/app/[locale]/developers/learning-tools/_components/learning-tools.tsx
index 5771e783552..b744612b7e8 100644
--- a/app/[locale]/developers/learning-tools/_components/learning-tools.tsx
+++ b/app/[locale]/developers/learning-tools/_components/learning-tools.tsx
@@ -397,7 +397,7 @@ const LearningToolsPage = () => {
           <p>
             <Translation id="page-developers-learning-tools:page-learning-tools-sandbox-desc" />
           </p>
-          <LearningToolsCardGrid category={randomizedSandboxes} />
+          <LearningToolsCardGrid products={randomizedSandboxes} />
           <InfoBanner emoji=":point_up:" shouldCenter>
             <Translation id="page-developers-learning-tools:page-learning-tools-remix-description-2" />
           </InfoBanner>
@@ -409,7 +409,7 @@ const LearningToolsPage = () => {
           <p>
             <Translation id="page-developers-learning-tools:page-learning-tools-game-tutorials-desc" />
           </p>
-          <LearningToolsCardGrid category={games} />
+          <LearningToolsCardGrid products={games} />
         </StackContainer>
         <StackContainer>
           <SubtitleTwo>
@@ -418,7 +418,7 @@ const LearningToolsPage = () => {
           <p>
             <Translation id="page-developers-learning-tools:page-learning-tools-bootcamps-desc" />
           </p>
-          <LearningToolsCardGrid category={bootcamps} />
+          <LearningToolsCardGrid products={bootcamps} />
         </StackContainer>
         <ContentBox>
           <CalloutBanner
diff --git a/src/components/LearningToolsCardGrid.tsx b/src/components/LearningToolsCardGrid.tsx
index f92f128f3f1..66f01211b9e 100644
--- a/src/components/LearningToolsCardGrid.tsx
+++ b/src/components/LearningToolsCardGrid.tsx
@@ -1,41 +1,17 @@
-import React from "react"
-
 import { LearningToolsCardGridProps } from "@/lib/types"
 
 import ProductCard from "./ProductCard"
 
-const LearningToolsCardGrid = ({ category }: LearningToolsCardGridProps) => {
-  return (
-    <div className="mb-8 grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-8">
-      {category
-        .sort(({ locales }) => (locales?.length ? -1 : 0))
-        .map(
-          ({
-            name,
-            description,
-            background,
-            url,
-            alt,
-            image,
-            subjects,
-            priceType,
-          }) => (
-            <ProductCard
-              key={name}
-              background={background}
-              url={url}
-              alt={alt}
-              image={image}
-              name={name}
-              subjects={subjects}
-              priceType={priceType}
-            >
-              {description}
-            </ProductCard>
-          )
-        )}
-    </div>
-  )
-}
+const LearningToolsCardGrid = ({ products }: LearningToolsCardGridProps) => (
+  <div className="mb-8 grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-8">
+    {products
+      .sort(({ locales }) => (locales?.length ? -1 : 0))
+      .map(({ description, ...product }) => (
+        <ProductCard key={product.name} {...product}>
+          {description}
+        </ProductCard>
+      ))}
+  </div>
+)
 
 export default LearningToolsCardGrid
diff --git a/src/lib/types.ts b/src/lib/types.ts
index e67d81e87e9..ee4f29afc9b 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -496,7 +496,7 @@ export interface LearningTool {
 }
 
 export interface LearningToolsCardGridProps {
-  category: Array<LearningTool>
+  products: Array<LearningTool>
 }
 
 // Staking stats data fetching

From d253a25a147c55d973670924650e9fa1e5134c53 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 14 Sep 2025 10:17:50 +0100
Subject: [PATCH 3/3] intl: extract strings

---
 .../_components/learning-tools.tsx            | 32 ++++++++++++++-----
 .../en/page-developers-learning-tools.json    |  2 ++
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/app/[locale]/developers/learning-tools/_components/learning-tools.tsx b/app/[locale]/developers/learning-tools/_components/learning-tools.tsx
index b744612b7e8..47923a7323b 100644
--- a/app/[locale]/developers/learning-tools/_components/learning-tools.tsx
+++ b/app/[locale]/developers/learning-tools/_components/learning-tools.tsx
@@ -275,7 +275,9 @@ const LearningToolsPage = () => {
       ),
       background: "#f6f7f9",
       subjects: ["Solidity", "web3"],
-      priceType: "Paid",
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-paid"
+      ),
     },
     {
       name: "BloomTech",
@@ -289,7 +291,9 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
-      priceType: "Paid",
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-paid"
+      ),
     },
     {
       name: "Questbook",
@@ -303,7 +307,9 @@ const LearningToolsPage = () => {
       ),
       background: "#141236",
       subjects: ["Solidity", "web3"],
-      priceType: "Free",
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "Metaschool",
@@ -317,7 +323,9 @@ const LearningToolsPage = () => {
       ),
       background: "#f6f7f9",
       subjects: ["Solidity", "web3"],
-      priceType: "Free",
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "Speed Run Ethereum",
@@ -331,7 +339,9 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
-      priceType: "Free",
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "Alchemy University",
@@ -345,7 +355,9 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
-      priceType: "Free",
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "LearnWeb3",
@@ -359,7 +371,9 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
-      priceType: "Free",
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "Cyfrin Updraft",
@@ -373,7 +387,9 @@ const LearningToolsPage = () => {
       ),
       background: "#000000",
       subjects: ["Solidity", "web3"],
-      priceType: "Free",
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
   ]
 
diff --git a/src/intl/en/page-developers-learning-tools.json b/src/intl/en/page-developers-learning-tools.json
index 8786b714e12..9cbeac6fcdb 100644
--- a/src/intl/en/page-developers-learning-tools.json
+++ b/src/intl/en/page-developers-learning-tools.json
@@ -58,5 +58,7 @@
   "page-learning-tools-learnweb3-logo-alt": "LearnWeb3 logo",
   "page-learning-tools-cyfrin-updraft-description": "Learn smart contract development for all skill levels and security audits.",
   "page-learning-tools-cyfrin-updraft-logo-alt": "Cyfrin Updraft logo",
+  "page-learning-tools-price-free": "Free",
+  "page-learning-tools-price-paid": "Paid",
   "alt-eth-blocks": "Illustration of blocks being organized like an ETH symbol"
 }