Added the free or paid badge to each developer bootcamp card

app/[locale]/developers/learning-tools/_components/learning-tools.tsx

@@ -275,6 +275,9 @@ const LearningToolsPage = () => {
       ),
       background: "#f6f7f9",
       subjects: ["Solidity", "web3"],
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-paid"
+      ),
     },
     {
       name: "BloomTech",
@@ -288,6 +291,9 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-paid"
+      ),
     },
     {
       name: "Questbook",
@@ -301,6 +307,9 @@ const LearningToolsPage = () => {
       ),
       background: "#141236",
       subjects: ["Solidity", "web3"],
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "Metaschool",
@@ -314,6 +323,9 @@ const LearningToolsPage = () => {
       ),
       background: "#f6f7f9",
       subjects: ["Solidity", "web3"],
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "Speed Run Ethereum",
@@ -327,6 +339,9 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "Alchemy University",
@@ -340,6 +355,9 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "LearnWeb3",
@@ -353,6 +371,9 @@ const LearningToolsPage = () => {
       ),
       background: "#ffffff",
       subjects: ["Solidity", "web3"],
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
     {
       name: "Cyfrin Updraft",
@@ -366,6 +387,9 @@ const LearningToolsPage = () => {
       ),
       background: "#000000",
       subjects: ["Solidity", "web3"],
+      priceType: t(
+        "page-developers-learning-tools:page-learning-tools-price-free"
+      ),
     },
   ]
 
@@ -389,7 +413,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>
@@ -401,7 +425,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>
@@ -410,7 +434,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

src/components/LearningToolsCardGrid.tsx

@@ -1,29 +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 }) => (
-          <ProductCard
-            key={name}
-            background={background}
-            url={url}
-            alt={alt}
-            image={image}
-            name={name}
-            subjects={subjects}
-          >
-            {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

src/components/ProductCard.tsx

@@ -60,6 +60,7 @@ export type ProductCardProps = {
   githubRepoStars?: number
   githubRepoLanguages?: Array<string>
   hideStars?: boolean
+  priceType?: string
 }
 
 const ProductCard = ({
@@ -76,6 +77,7 @@ const ProductCard = ({
   githubRepoStars = 0,
   githubRepoLanguages = [],
   hideStars = false,
+  priceType,
 }: ProductCardProps) => {
   const { t } = useTranslation("common")
 
@@ -120,6 +122,9 @@ const ProductCard = ({
               {subject}
             </SubjectBadge>
           ))}
+        {priceType && (
+          <SubjectBadge subject={priceType}>{priceType}</SubjectBadge>
+        )}
         {githubRepoLanguages.length > 0 &&
           githubRepoLanguages.map((name, idx: number) => (
             <SubjectBadge key={idx} subject={name}>

src/data/wallets/wallet-data.ts

@@ -2578,7 +2578,7 @@ export const walletsData: WalletData[] = [
     supported_chains: [
       "Ethereum Mainnet",
       "Arbitrum One",
-      "Base", 
+      "Base",
       "OP Mainnet",
       "zkSync Mainnet",
     ],

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",
@@ -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"
 }

src/lib/types.ts

@@ -492,10 +492,11 @@ export interface LearningTool {
   background: string
   subjects: Array<string>
   locales?: Array<Lang>
+  priceType?: string
 }
 
 export interface LearningToolsCardGridProps {
-  category: Array<LearningTool>
+  products: Array<LearningTool>
 }
 
 // Staking stats data fetching