Add toc to restaking pages

components/StakingIntroCards.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { GrNodes } from "react-icons/gr";
+import { BetweenVerticalEnd } from "lucide-react";
+import Link from "next/link";
+
+const StakingIntroCards = () => {
+  const cards = [
+    {
+      icon: <BetweenVerticalEnd className="text-blue-500" size={24} />,
+      title: "Validator Staking",
+      description:
+        "Learn about Tangle's Nominated Proof of Stake (NPoS) system for validator selection and rewards.",
+      link: "../restake/staking-intro",
+    },
+    {
+      icon: <GrNodes className="text-blue-500" size={24} />,
+      title: "Restaking",
+      description:
+        "Discover Tangle's permissionless and asset-configurable restaking system for Blueprints and shared security.",
+      link: "../restake/restake-introduction",
+    },
+    {
+      icon: <BetweenVerticalEnd className="text-blue-500" size={24} />,
+      title: "Liquid Staking",
+      description:
+        "Explore Tangle's liquid staking protocols for validator-specific staking operations and liquid staked tokens (LSTs).",
+      link: "../restake/lst-concepts",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 my-12">
+      {cards.map((card, index) => (
+        <Link href={card.link} key={index} className="block">
+          <div className="border border-black p-4 h-full flex flex-col transition-colors duration-300 hover:bg-purple-100">
+            <div className="flex-shrink-0 mb-2">{card.icon}</div>
+            <h3 className="text-xl font-bold mb-4">{card.title}</h3>
+            <p className="text-sm flex-grow">{card.description}</p>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default StakingIntroCards;

pages/developers/getting-started.mdx

@@ -57,11 +57,11 @@ Let's look at the key files:
 
 This file contains the core logic of your Blueprint, including job definitions, report structures, and event listeners. Here's an example of a simple "Hello World" job:
 
-1. **Jobs**: Define the main computational tasks of your Blueprint. For more details on creating jobs, see our [Blueprint Job Documentation](../developers/blueprint-macros/jobs).
+1. **Jobs**: Define the main computational tasks of your Blueprint. For more details on creating jobs, see our [Blueprint Job Documentation](/developers/blueprint-macros/jobs).
 
-2. **Reports**: Define offchain reporting logic for the custom slashing functionality of your Blueprint. Learn more about reports in our [Blueprint Report Documentation](../developers/blueprint-macros/reports).
+2. **Reports**: Define offchain reporting logic for the custom slashing functionality of your Blueprint. Learn more about reports in our [Blueprint Report Documentation](/developers/blueprint-macros/reports).
 
-3. **Event Listeners**: Set up listeners to react to on-chain events, offchain events, cron-job like listeners, and even custom event triggers. For a deep dive into event listeners, check out our [Event Listener Documentation](../developers/blueprint-event-listeners/introduction).
+3. **Event Listeners**: Set up listeners to react to on-chain events, offchain events, cron-job like listeners, and even custom event triggers. For a deep dive into event listeners, check out our [Event Listener Documentation](/developers/blueprint-event-listeners/introduction).
 
 Here's a basic example incorporating these elements:
 

pages/restake/_meta.json

@@ -9,27 +9,27 @@
     "title": "Validator Staking"
   },
   "staking-intro": "Introduction to Staking",
+  "-- restaking": {
+    "type": "separator",
+    "title": "Restaking"
+  },
+  "restake-introduction": "Introduction to Restaking",
+  "restake-concepts": "Core Concepts",
+  "incentives": "Incentives",
+  "join_operator": "Operator Docs",
+  "how_to_restake": "How to Restake",
+  "assets": "Supported Assets",
+  "restake_developers": "Developer Docs",
   "nominator": "Nominating your TNT",
   "-- liquid staking": {
     "type": "separator",
     "title": "Liquid Staking"
   },
-  "lst-concepts": "Introduction",
+  "lst-concepts": "Introduction to Liquid Staking",
   "lst-working": "How Liquid Staking Works",
   "create_a_pool": "Create a Liquid Staking Pool",
   "join_a_pool": "Join a Liquid Staking Pool",
   "lst-rewards": "Incentives",
   "lst-assets": "Supported Assets",
-  "lst_developers": "Developer Docs",
-  "-- restaking": {
-    "type": "separator",
-    "title": "Restaking"
-  },
-  "restake-introduction": "Intro to Restaking",
-  "restake-concepts": "Core Concepts",
-  "incentives": "Incentives",
-  "join_operator": "Operator Docs",
-  "how_to_restake": "How to Restake",
-  "assets": "Supported Assets",
-  "restake_developers": "Developer Docs"
+  "lst_developers": "Developer Docs"
 }

pages/restake/introduction.mdx

@@ -1,8 +1,10 @@
+import StakingIntroCards from "../../components/StakingIntroCards";
+
 # Staking & Restaking
 
-Tangle's core staking infrastructure is composed of two major pieces. The first is the base nominator proof of stake (NPos) mechanism for validator selection. The second is the shared security restaking infrastructure for Tangle Blueprints.
+Tangle's core staking infrastructure is composed of three major pieces. The first is the base nominator proof of stake (NPos) mechanism for validator selection. The second is a native liquid staking protocol for validator specific staking operations and liquid staked tokens (LSTs). The third is the shared security restaking infrastructure for Tangle Blueprints that leverages any asset, especially the LSTs.
 
-Tangle's ecosystem also encompasses a wide variety of liquid staking tokens (LSTs), which are liquid assets that represent a unique staking operation. The motivation for deploying Tangle specific LSTs is to provide direct usage in the restaking infrastructure, using assets and protocols managed and governed by the Tangle community.
+<StakingIntroCards />
 
 ## Nominated Staking
 

pages/restake/lst-working.mdx

@@ -1,8 +1,10 @@
+import ExpandableImage from "../../components/ExpandableImage";
+
 # Liquid Staking on Tangle Network
 
 ## Liquid Staking Workflow
 
-![Liquid Staking Workflow](./images/lst-workflow.png)
+<ExpandableImage src="./images/lst-workflow.png" alt="Liquid Staking Workflow" />
 
 ### **Creating a Pool**
 

pages/restake/restake-introduction.mdx

@@ -1,21 +1,23 @@
-# Introduction to Restaking
+import ExpandableImage from "../../components/ExpandableImage";
 
-Restaking is an innovative concept in blockchain technology that allows validators to reuse their staked tokens to provide additional services and earn rewards without unstaking from the original network. This enhances the efficiency and utility of staked assets.
+# Introduction to Tangle Restaking
 
-In a typical proof-of-stake blockchain, validators lock up tokens to participate in block production and earn staking rewards. Those staked tokens cannot be used for any other purpose. Restaking changes this by enabling those same staked tokens to be "restaked" to provide other services and earn additional rewards on top of the base staking rewards.
+Restaking is an innovative concept in blockchain technology that allows validators to reuse their staked tokens to provide additional services and earn rewards without unstaking from the original network. This enhances the efficiency and utility of staked assets. Restaking can be provided through native staking mechanisms or through staking of existing liquid staked tokens, exposing the stake to additional rewards and slashing conditions.
 
-This is achieved by the validator opting-in to restake a portion of their staked tokens into a restaking protocol or application, becoming an "operator". The staked tokens still remain staked on the original chain and earn their base rewards. But they are now also being used to provide security, computation, or other services to the restaking protocol, allowing the now-operator to earn additional restaking rewards.
+Tangle provides permissionless asset restaking to developers and customers building Blueprints and deploying Blue service instances. Any asset created on and bridged to Tangle can be used as collateral to stake in our restaking infrastructure. These restaked assets, commonly in the form of LSTs, act as security collateral for service instances that are requested on-demand. The restaking providers (the restakers) earn rewards proportional to the rewards issued to the services and Blueprints on Tangle, depending on the usage and utility of the services themselves.
+
+The restaking infrastructure divides assets into pools, which can be created to represent a single asset or a basket of similarly valued assets. Pools of assets are used to secure Tangle Blueprint service instances and are rewarded collectively as pools. This is beneficial when integrating many liquid staked tokens of a single protocol, such as validator-specific liquid staking protocols, or when bundling lots of different LSTs of a single ecosystem such as a basket of ETH LSTs.
 
 ## Benefits of restaking include:
 
-- Increased efficiency of staked capital
-- Additional revenue streams for stakers
-- Boosted security for restaking protocols by leveraging security of the underlying chain
+- Increased efficiency of staked capital by sharing it across instances
+- Additional revenue streams for stakers and operators
+- Boosted security for protocols leveraging new assets as security capital
 - Innovation in new blockchain services by harnessing decentralized resources
 
 ## How Tangle Network Uses Restaking
 
-![Restaking Workflow](./images/restake-workflow.png)
+<ExpandableImage src="./images/restake-workflow.png" alt="Restaking Workflow" />
 
 Tangle Network has implemented a unique restaking system to allow its validator set to provide Actively Validated Services (AVS) to power advanced decentralized applications. Users can restake their TNT tokens to run service instances based on blueprints created by developers.