add: Onchain gaming page

public/content/gaming/index.md

@@ -0,0 +1,68 @@
+---
+title: Onchain Gaming
+lang: en
+template: use-cases
+image: /images/robot-help-bar.png
+sidebarDepth: 2
+summaryPoint1: Game rules and state can be enforced by blockchain, not a studio’s servers
+summaryPoint2: Anyone can build mods, bots or entirely new games that plug into the same on‑chain data
+summaryPoint3: Purpose‑built L2s such as Redstone and frameworks like MUD cut costs enough to support real‑time gameplay
+buttons:
+  - content: Learn more
+    toId: how-gaming-on-ethereum-works
+  - content: Explore apps
+    toId: popular-games-built-on-ethereum
+    isSecondary: false
+---
+
+## How gaming on Ethereum works {#how-gaming-on-ethereum-works}
+
+Gaming on Ethereum comes in various forms, from games that integrate blockchain for specific features to those where the entire game world lives onchain. Many games utilize Ethereum to manage in-game assets as NFTs (Non-Fungible Tokens). This allows players to truly own unique digital items, which can be openly traded, sold, or gifted outside the confines of a single game developer's ecosystem. While these assets offer new forms of player agency, the core game logic often remains on centralized servers.
+
+True Onchain Games are games where the fundamental mechanics and often the entire game world are directly governed by smart contracts on the Ethereum blockchain (or its Layer 2s). This ensures unparalleled transparency. No central servers, no intermediaries—just transparent, player‑driven experiences and economy. 
+
+- Players own their assets as NFTs.
+- Items can be freely traded, gifted, or sold.
+- Blockchain ensures assets remain accessible forever.
+
+## The current state of gaming {#the-current-state-of-gaming}
+
+- **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. Onchain games, with their logic and assets on a decentralized network, can persist as long as the blockchain exists, offering a higher degree of permanence.
+- **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. Players invest significant time and money into acquiring in-game items, only to find they don't truly own them. Ethereum's NFT standard provides verifiable digital ownership, ensuring players control their assets.
+- **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 games 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}
+
+One of Ethereum's most powerful features for gaming is its native support for interoperability and composability. Unlike walled-garden traditional games, assets and even game logic built on Ethereum can potentially interact across different applications and chains without sacrificing security. 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}
+
+As Ethereum has matured, solutions exist to significantly reduce the cost of onchain gaming and enhance performance, making interactive and fast-paced experiences more viable. These advancements are primarily achieved through:
+
+- **Gas-less Transactions:** some platforms and protocols, including those leveraging Immutable X, offer the ability to conduct transactions like trading or minting NFTs without fees for the user, further streamlining the player experience
+- **Scaling Solutions:** Arbitrum, zkSync and Starknet are actively fostering ecosystems for onchain games due to their high throughput and low costs.
+- **[MUD ecosystem](https://mud.dev/)** optimizes for onchain game development to provide efficient state management for complex game logic.
+
+## 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:
+
+1. **Set up a Crypto Wallet:** You'll need a wallet to manage your digital assets and interact with decentralized applications. [Choose a Wallet](/wallets/find-wallet/)
+2. **Fund Your Wallet:** Acquire some Ether (ETH) or tokens relevant to the Layer 2 network you plan to use.
+3. **Explore Games:** Discover games on platforms like [Orden](https://orden.gg/),  [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).

src/components/Content/gaming/OnchainGamingProductList.tsx

@@ -0,0 +1,159 @@
+// TODO: Update for intl
+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"