add: Onchain gaming page

public/content/gaming/index.md

@@ -0,0 +1,71 @@
+---
+title: Onchain Gaming
+lang: en
+template: use-cases
+image: /images/heroes/ai_agent.png
+sidebarDepth: 2
+summaryPoint1: Second generation of Play-to-Earn games is emerging
+summaryPoint2: Higher quality games are starting to leverage blockchain
+summaryPoint3: In game assets can be used across several game modes
+buttons:
+  - content: Learn more
+    toId: how-onchain-gaming-works
+  - content: Explore apps
+    toId: popular-games-built-on-ethereum
+    isSecondary: false
+---
+
+## How onchain gaming works {#how-onchain-gaming-works}
+
+Onchain games give players true ownership of in‑game assets. No central servers, no intermediaries—just transparent, player‑driven experiences and economy. Ethereum gives players true ownership of their in‑game items. These items exist as NFTs (non‑fungible tokens) on the Ethereum blockchain. That means:
+
+- Players own their assets as NFTs.
+- Items can be freely traded, gifted, or sold.
+- Blockchain ensures assets remain accessible forever.
+- Players can earn real‑world value from Play‑to‑Earn (P2E) gaming.
+
+Play‑to‑earn (P2E) is also possible. Instead of just playing for fun, gamers can earn crypto rewards by playing Ethereum‑based games.
+
+## The current state of gaming {#the-current-state-of-gaming}
+
+- **Frustration Over Locked Assets:** [51% of gamers feel frustrated](https://www.starknet.io/blog/blockchain-gaming/) that they can’t gift or re‑sell in‑game items they buy, and 23% are annoyed by how difficult it is to recover money from in‑game purchases.
+- **Frequent Game Shutdowns:** In 2023 alone, [60+ games were shut down](https://tech4gamers.com/game-studios-shut-down-2023/), and 11 game studios closed entirely, leaving players with nothing to show for their in‑game investments.
+- **High Spending with No Return:** [Gamers spend an average of \$6,425](https://www.starknet.io/blog/blockchain-gaming/) on virtual items over their lifetime, with \$8.74 spent per month or \$104 per year.
+
+## Popular games built on Ethereum {#popular-games-built-on-ethereum}
+
+Developers are exploring new ways to make P2E more engaging and go beyond simple reward mechanics to deepen, skill‑based gameplay.
+
+<OnchainGamingProductList list="game" />
+
+## Play-to-earn (P2E) {#play-to-earn-p2e}
+
+With Play‑to‑Earn (P2E) games, you can earn assets with real value. Unlike early P2E models that relied on unsustainable rewards, newer games focus on long‑term value. For example, [Wolf Game](https://gam3s.gg/wolf-game/) combines strategic gameplay with real asset ownership. Players manage virtual sheep and wolves, earning the in‑game currency WOOL, which can be traded or sold.
+
+<OnchainGamingProductList list="p2e" />
+
+## Interoperability & cross‑chain play {#interoperability-and-cross-chain-play}
+
+While this is still in development, some game networks are already interoperable, where in‑game items (NFTs) can be used across multiple games.
+
+For instance, in Illuvium, [players can collect creatures called Illuvials](https://gam3s.gg/news/illuvium-three-web3-games/), which are NFTs. These Illuvials can be used across various games within the Illuvium universe. An Illuvial captured in Illuvium Overworld can also be used in Illuvium Arena for battles.
+
+Another example is Galaxy Fight Club. In this game, [players can use different NFT collections](https://gam3s.gg/galaxy-fight-club/) to participate in battles, meaning NFTs from various projects can be used within the game.
+
+## Scalability & gas fee improvements {#scalability-and-gas-fee-improvements}
+
+The challenge with most Ethereum gaming is high gas fees and slow transactions, which makes in‑game transactions costly. But this is changing thanks to Ethereum scaling networks (L2):
+
+- Immutable X; Enables gas‑free NFT trading.
+- Arbitrum & Optimism; Reduce fees and improve transaction speed.
+- zkEVM solutions; Help process game‑related transactions faster.
+
+## Get started with Ethereum gaming {#get-started-with-ethereum-gaming}
+
+Getting into Ethereum gaming is easier than you might think. With just a few steps, you can start playing and enjoying your progress:
+
+- Set up a wallet.
+- Find Ethereum games on [ChainPlay](https://chainplay.gg/chain/ethereum/), [Gam3s.GG](https://gam3s.gg/), [DappRadar](https://dappradar.com/rankings/protocol/ethereum/category/games), [OpenSea](https://opensea.io/), and [PlayToEarn.net](https://playtoearn.com/blockchaingames).
+- Understand the game economy.
+- Start playing and exploring.
+- Choose a game, connect your wallet, and start playing.

src/components/Content/gaming/OnchainGamingProductList.tsx

@@ -0,0 +1,158 @@
+import ProductListComponent from "@/components/ProductList"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import { Tag } from "@/components/ui/tag"
+
+import axie from "@/public/images/gaming/axie.png"
+import dimensionals from "@/public/images/gaming/Dimensionals.png"
+import godsUnchained from "@/public/images/gaming/gods_unchained.png"
+import guildOfGuardians from "@/public/images/gaming/guildOfGuardians.png"
+import illuvium from "@/public/images/gaming/illuvium.png"
+import parallel from "@/public/images/gaming/parallel.png"
+import sandbox from "@/public/images/gaming/sandbox.png"
+import wagmiDefense from "@/public/images/gaming/wagmi_defense.png"
+import worldShards from "@/public/images/gaming/worldShards.png"
+
+const OnchainGamingProductList = ({ list }: { list: string }) => {
+  const productListSets = {
+    game: [
+      {
+        title: (
+          <>
+            <div className="text-xl font-bold">WAGMI Defense</div>
+            <Tag status="warning" size="small">
+              Tower defense
+            </Tag>
+          </>
+        ),
+        description:
+          "WAGMI Defense is a futuristic tower defense game where you protect your base from alien invaders. You can earn NFTs for in-game assets, which you can keep or trade.",
+        image: wagmiDefense,
+        alt: "WAGMI Defense logo",
+        contentItems: [
+          <ul key="wagmi-features">
+            <li>Deploy various units and defenses to thwart enemy attacks.</li>
+            <li>Each unit is an NFT you can upgrade, trade, or sell.</li>
+            <li>
+              Engage in player-versus-player battles to climb the leaderboards.
+            </li>
+          </ul>,
+          <div key="wagmi-button">
+            <ButtonLink
+              href="https://www.wagmigames.com/en"
+              target="_blank"
+              variant="outline"
+            >
+              Try WAGMI
+            </ButtonLink>
+          </div>,
+        ],
+      },
+      {
+        title: (
+          <>
+            <div className="text-xl font-bold">Illuvium</div>
+            <Tag status="error" size="small">
+              RPG
+            </Tag>
+          </>
+        ),
+        description:
+          "Open world RPG with arena mode. Illuvium is considered one of the first AAA games within the blockchain gaming community, due to its high production values, use of Unreal Engine, and substantial team and funding.",
+        image: illuvium,
+        alt: "Illuvium logo",
+        contentItems: [
+          <div key="illuvium-button">
+            <ButtonLink
+              href="https://illuvium.io/"
+              target="_blank"
+              variant="outline"
+            >
+              Try Illuvium
+            </ButtonLink>
+          </div>,
+        ],
+      },
+      {
+        title: (
+          <>
+            <div className="text-xl font-bold">Gods Unchained</div>
+            <Tag status="success" size="small">
+              Card game
+            </Tag>
+          </>
+        ),
+        description:
+          "Gods Unchained is a free-to-play, trading card game where players own their cards as NFTs and battle in strategic matches to earn rewards.",
+        image: godsUnchained,
+        alt: "Gods Unchained logo",
+        contentItems: [
+          <div key="gods-unchained-button">
+            <ButtonLink
+              href="https://godsunchained.com/"
+              target="_blank"
+              variant="outline"
+            >
+              Try Gods Unchained
+            </ButtonLink>
+          </div>,
+        ],
+      },
+    ],
+    p2e: [
+      {
+        title: "Parallel",
+        description:
+          "Parallel is a sci-fi trading card game where you collect and own cards as NFT.",
+        image: parallel,
+        alt: "Parallel logo",
+        link: "https://parallel.life/",
+      },
+      {
+        title: "Axie Infinity",
+        description:
+          "Collect, breed, and battle NFT creatures called Axies, earning crypto rewards.",
+        image: axie,
+        alt: "Axie Infinity logo",
+        link: "https://axieinfinity.com/",
+      },
+      {
+        title: "WorldShards",
+        description:
+          "MMORPG where players build, explore, and trade in a fantasy world of floating islands.",
+        image: worldShards,
+        alt: "WorldShards logo",
+        link: "https://www.worldshards.online/en",
+      },
+      {
+        title: "Sandbox",
+        description:
+          "This is a virtual world where you can create, own, and monetize your gaming experiences. It uses NFTs to ensure you have true ownership of your creations.",
+        image: sandbox,
+        alt: "Sandbox logo",
+        link: "https://chainplay.gg/games/the-sandbox/",
+      },
+      {
+        title: "Guild of Guardians",
+        description:
+          "A mobile RPG on Immutable X. Focusing on quick, team-based play and NFT heroes suggests.",
+        image: guildOfGuardians,
+        alt: "Guild of Guardians logo",
+        link: "https://www.guildofguardians.com/",
+      },
+      {
+        title: "Dimensionals",
+        description:
+          "Dimensionals is a turn-based role-playing game where you assemble a team of heroes, each represented as NFTs on the Ethereum blockchain.",
+        image: dimensionals,
+        alt: "Dimensionals logo",
+        link: "https://dimensionals.com/",
+      },
+    ],
+  }
+
+  return (
+    <ProductListComponent content={productListSets[list]} actionLabel="Go" />
+  )
+}
+
+export default OnchainGamingProductList

src/components/Nav/useNavigation.ts

@@ -223,6 +223,11 @@ export const useNavigation = () => {
                   description: t("nav-ai-agents-description"),
                   href: "/ai-agents/",
                 },
+                {
+                  label: t("onchain-gaming"),
+                  description: t("nav-gaming-description"),
+                  href: "/gaming/",
+                },
                 {
                   label: t("prediction-markets"),
                   description: t("nav-prediction-markets-description"),

src/components/ProductList.tsx

@@ -68,6 +68,7 @@ const ProductList = ({ actionLabel, content, category }: ProductListProps) => {
                     src={image}
                     alt={alt}
                     width={66}
+                    height={66}
                     className="rounded-xl shadow-lg dark:shadow-body-light"
                   />
                 )}

src/intl/en/common.json

@@ -271,6 +271,7 @@
   "nav-events-online-description": "Hundreds of thousands of Ethereum enthusiasts gather in these online communities",
   "nav-find-wallet-description": "Wallets allow you to use crypto",
   "nav-find-wallet-label": "Choose your wallet",
+  "nav-gaming-description": "Games built on blockchain where assets and gameplay are fully decentralized and transparent.",
   "nav-gas-fees-description": "How are ETH transaction fees calculated",
   "nav-gas-fees-label": "Gas fees",
   "nav-get-eth-description": "You need ether (ETH) to use Ethereum applications",
@@ -363,6 +364,7 @@
   "nfts": "NFTs",
   "no": "No",
   "on-this-page": "On this page",
+  "onchain-gaming": "Onchain Gaming",
   "open": "Open",
   "open-research": "Open research",
   "page-developers-aria-label": "Developers' Menu",

src/intl/en/template-usecase.json

@@ -13,5 +13,6 @@
   "template-usecase-banner": "Uses of Ethereum are always developing and evolving. Add any info you think will make things clearer or more up to date.",
   "template-usecase-edit-link": "Edit page",
   "template-usecase-dropdown-aria": "Use case dropdown menu",
+  "template-usecase-dropdown-onchain-gaming": "Onchain Gaming",
   "template-usecase-dropdown-rwa": "Real-world assets (RWAs)"
 }

src/layouts/md/UseCases.tsx

@@ -5,6 +5,7 @@ import BannerNotification from "@/components/Banners/BannerNotification"
 import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
 import AiAgentProductLists from "@/components/Content/ai-agents/AiAgentProductLists"
 import BuildYourOwnAIAgent from "@/components/Content/ai-agents/BuildYourOwnAIAgent"
+import OnchainGamingProductList from "@/components/Content/gaming/OnchainGamingProductList"
 import PredictionMarketLists from "@/components/Content/prediction-markets/PredictionMarketLists"
 import Emoji from "@/components/Emoji"
 import { ContentHero } from "@/components/Hero"
@@ -30,6 +31,7 @@ export const useCasesComponents = {
   CardGrid,
   AiAgentProductLists,
   BuildYourOwnAIAgent,
+  OnchainGamingProductList,
   PredictionMarketLists,
 }
 
@@ -144,6 +146,15 @@ export const UseCasesLayout = ({
           eventName: "ai-agents",
         },
       },
+      {
+        text: t("template-usecase:template-usecase-dropdown-onchain-gaming"),
+        href: "/gaming/",
+        matomo: {
+          eventCategory: "use cases menu",
+          eventAction: "click",
+          eventName: "onchain-gaming",
+        },
+      },
       {
         text: t(
           "template-usecase:template-usecase-dropdown-prediction-markets"