From 48a165c8c621e612dafa1f8d4f804d34e758d1b7 Mon Sep 17 00:00:00 2001
From: SeddikBellamine <bellamine.seddik@gmail.com>
Date: Tue, 28 Oct 2025 11:41:24 +0100
Subject: [PATCH] docs: align getting-started pages format with iApp Generator

- Update DataProtector, Web3mail, and Web3telegram getting-started pages
- Add modern flex layout with interactive download links for prerequisites
- Include emojis and consistent visual hierarchy matching iApp Generator format
---
 .../dataProtector/getting-started.md          | 40 +++++++++++++------
 src/references/web3mail/getting-started.md    | 40 +++++++++++++------
 .../web3telegram/getting-started.md           | 40 +++++++++++++------
 3 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/src/references/dataProtector/getting-started.md b/src/references/dataProtector/getting-started.md
index 233d77a0..0abf22f6 100644
--- a/src/references/dataProtector/getting-started.md
+++ b/src/references/dataProtector/getting-started.md
@@ -6,22 +6,36 @@ description:
   and access controls in minutes.
 ---
 
-# Getting Started
+# 🛡 Getting Started
 
 [![GitHub package.json version (branch)](https://img.shields.io/badge/npm-2.0.0--beta-green)](https://www.npmjs.com/package/@iexec/dataprotector)
 
-## Overview
-
-### Prerequisites
-
-Before getting started, ensure that you have the following installed on your
-system:
-
-\- [**Node.js**](https://nodejs.org/en/) version 18 or higher
-
-\- [**NPM**](https://docs.npmjs.com/) (Node.js package manager)
-
-### Installation
+## 🕕 Prerequisites
+
+Before using DataProtector, make sure you have:
+
+<div class="flex flex-col gap-2 my-4 pl-0">
+  <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      📦 Node.js v18+ (required)
+    </div>
+    <a target="_blank" href="https://nodejs.org/en/" class="no-underline! text-sm ml-auto hover:underline!">Download →</a>
+  </div>
+   <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      📦 NPM (Node.js package manager)
+    </div>
+    <a target="_blank" href="https://docs.npmjs.com/" class="no-underline! text-sm ml-auto hover:underline!">Learn More →</a>
+  </div>
+   <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      💰 RLC Tokens (for data protection)
+    </div>
+    <a href="/get-started/overview/rlc" class="no-underline! text-sm ml-auto hover:underline!">Learn More →</a>
+  </div>
+</div>
+
+### 📦 Installation
 
 ::: code-group
 
diff --git a/src/references/web3mail/getting-started.md b/src/references/web3mail/getting-started.md
index 70a2390f..884b6289 100644
--- a/src/references/web3mail/getting-started.md
+++ b/src/references/web3mail/getting-started.md
@@ -6,22 +6,36 @@ description:
   email communication.
 ---
 
-# Getting Started
+# 📧 Getting Started
 
 [![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/iExecBlockchainComputing/web3mail-sdk?color=green)](https://github.com/iExecBlockchainComputing/web3mail-sdk)
 
-## Overview
-
-### Prerequisites
-
-Before getting started, ensure that you have the following installed on your
-system:
-
-\- [**Node.js**](https://nodejs.org/en/) version 18 or higher
-
-\- [**NPM**](https://docs.npmjs.com/) (Node.js package manager)
-
-### Installation
+## 🕕 Prerequisites
+
+Before using Web3Mail, make sure you have:
+
+<div class="flex flex-col gap-2 my-4 pl-0">
+  <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      📦 Node.js v18+ (required)
+    </div>
+    <a target="_blank" href="https://nodejs.org/en/" class="no-underline! text-sm ml-auto hover:underline!">Download →</a>
+  </div>
+   <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      📦 NPM (Node.js package manager)
+    </div>
+    <a target="_blank" href="https://docs.npmjs.com/" class="no-underline! text-sm ml-auto hover:underline!">Learn More →</a>
+  </div>
+   <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      💰 RLC Tokens (for email operations)
+    </div>
+    <a href="/get-started/overview/rlc" class="no-underline! text-sm ml-auto hover:underline!">Learn More →</a>
+  </div>
+</div>
+
+### 📦 Installation
 
 ::: code-group
 
diff --git a/src/references/web3telegram/getting-started.md b/src/references/web3telegram/getting-started.md
index 75f15d6e..2a8f11b7 100644
--- a/src/references/web3telegram/getting-started.md
+++ b/src/references/web3telegram/getting-started.md
@@ -5,22 +5,36 @@ description:
   Telegram messages. Install the SDK and integrate it with your Web3 project.
 ---
 
-# Getting started
+# 📱 Getting Started
 
 [![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/iExecBlockchainComputing/web3telegram-sdk?color=green)](https://github.com/iExecBlockchainComputing/web3telegram-sdk)
 
-## Overview
-
-### Prerequisites
-
-Before getting started, ensure that you have the following installed on your
-system:
-
-\- [**Node.js**](https://nodejs.org/en/) version 18 or higher
-
-\- [**NPM**](https://docs.npmjs.com/) (Node.js package manager)
-
-### Installation
+## 🕕 Prerequisites
+
+Before using Web3Telegram, make sure you have:
+
+<div class="flex flex-col gap-2 my-4 pl-0">
+  <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      📦 Node.js v18+ (required)
+    </div>
+    <a target="_blank" href="https://nodejs.org/en/" class="no-underline! text-sm ml-auto hover:underline!">Download →</a>
+  </div>
+   <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      📦 NPM (Node.js package manager)
+    </div>
+    <a target="_blank" href="https://docs.npmjs.com/" class="no-underline! text-sm ml-auto hover:underline!">Learn More →</a>
+  </div>
+   <div class="flex items-center gap-4 text-left">
+    <div class="flex items-center gap-1 flex-1 text-sm font-medium">
+      💰 RLC Tokens (for Telegram operations)
+    </div>
+    <a href="/get-started/overview/rlc" class="no-underline! text-sm ml-auto hover:underline!">Learn More →</a>
+  </div>
+</div>
+
+### 📦 Installation
 
 ::: code-group