refactor: update gradient direction in styles for consistency across documentation

Author: ErwanDecoster

src/modules/helloWorld/GrantAccess.vue

@@ -42,7 +42,7 @@
 
     <div
       v-if="grantedAccess"
-      class="mt-8 w-full rounded-md bg-gradient-to-br from-green-400/10 to-green-400/5 p-6 text-center"
+      class="mt-8 w-full rounded-md bg-gradient-to-r from-green-400/10 to-green-400/5 p-6 text-center"
     >
       <div
         class="mb-2 flex items-center justify-center gap-3 text-xl font-medium text-green-500"

src/modules/helloWorld/ProtectData.vue

@@ -53,7 +53,7 @@
 
     <div
       v-if="protectedDataAddress"
-      class="mt-8 w-full rounded-md bg-gradient-to-br from-green-400/10 to-green-400/5 p-6 text-center"
+      class="mt-8 w-full rounded-md bg-gradient-to-r from-green-400/10 to-green-400/5 p-6 text-center"
     >
       <div
         class="mb-2 flex items-center justify-center gap-3 text-xl font-medium text-green-500"

src/overview/helloWorld.md

@@ -68,7 +68,7 @@ import InfoIcon from '../components/InfoIcon.vue'
     </div>
   </a>
 
-  <a href="helloWorld/5-bonusChapter" class="bg-gradient-to-br from-[#ce2c68] to-[#3f0d3f] text-white rounded-[6px] p-6 shadow-md hover:shadow-lg transition-all! duration-300 hover:-translate-y-1 flex gap-4 no-underline! relative overflow-hidden before:absolute before:top-0 before:left-0 before:w-full before:h-1 before:bg-gradient-to-br before:from-[#ce2c68] before:to-[#3f0d3f] before:transform before:scale-x-0 before:origin-left before:transition-transform before:duration-300 hover:before:scale-x-100">
+  <a href="helloWorld/5-bonusChapter" class="bg-gradient-to-r from-[#ce2c68] to-[#3f0d3f] text-white rounded-[6px] p-6 shadow-md hover:shadow-lg transition-all! duration-300 hover:-translate-y-1 flex gap-4 no-underline! relative overflow-hidden before:absolute before:top-0 before:left-0 before:w-full before:h-1 before:bg-gradient-to-r before:from-[#ce2c68] before:to-[#3f0d3f] before:transform before:scale-x-0 before:origin-left before:transition-transform before:duration-300 hover:before:scale-x-100">
     <div class="text-3xl">✨</div>
     <div class="flex flex-col h-full min-h-[120px]">
       <h3 class="m-0 text-lg leading-tight text-white">Bonus Chapter</h3>
@@ -116,6 +116,6 @@ Before you begin, make sure you have:
   </div>
 </div>
 
-<div class="bg-gradient-to-br from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
-  <p class="m-0 font-medium">Need help setting up or got some questions? Join our <a target="_blank" href="https://discord.gg/6yrgRH6ATD">Discord Community</a> for support!</p>
+<div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
+  <p class="m-0! font-medium">Need help setting up or got some questions? Join our <a target="_blank" href="https://discord.gg/6yrgRH6ATD">Discord Community</a> for support!</p>
 </div>

src/overview/helloWorld/1-overview.md

@@ -59,8 +59,8 @@ description:
   </div>
 </div>
 
-<div class="bg-gradient-to-br from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>This is where <span class="text-fuchsia-700 font-semibold">iExec</span> comes in! We provide tools to easily add <span class="text-fuchsia-700 font-semibold">privacy</span> and <span class="text-fuchsia-700 font-semibold">monetization</span> features into your dApp.</p>
+<div class="bg-gradient-to-r from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">This is where <span class="text-fuchsia-700 font-semibold">iExec</span> comes in! We provide tools to easily add <span class="text-fuchsia-700 font-semibold">privacy</span> and <span class="text-fuchsia-700 font-semibold">monetization</span> features into your dApp.</p>
 </div>
 
 ## 👷 How do we solve it?
@@ -75,8 +75,8 @@ Execution Environment (TEE)</a></span> and
 <span class="text-fuchsia-700 font-semibold"><a target="_blank" href="https://www.iex.ec/academy/iexec-decentralized-confidential-computing">Confidential
 Computing</a></span> technologies.
 
-<div class="bg-gradient-to-br from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>Our technology allows users to control the <span class="text-fuchsia-700 font-semibold">ownership</span>,
+<div class="bg-gradient-to-r from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">Our technology allows users to control the <span class="text-fuchsia-700 font-semibold">ownership</span>,
   <span class="text-fuchsia-700 font-semibold">confidentiality</span>, and <span class="text-fuchsia-700 font-semibold">monetization</span> of their data and digital assets within the <span class="text-fuchsia-700 font-semibold">Web3</span> ecosystem.</p>
 </div>
 
@@ -103,8 +103,8 @@ iExec combines three fundamental elements that work together seamlessly:
 - Regain ownership of your data
 - Provides transparent governance rules for data access
 
-<div class="bg-gradient-to-br from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>By merging <span class="text-fuchsia-700 font-semibold">blockchain technology</span> with <span class="text-fuchsia-700 font-semibold">confidential computing</span>, we've pioneered <span class="text-fuchsia-700 font-semibold"><a target="_blank" href="https://www.iex.ec/academy/iexec-decentralized-confidential-computing">DeCC</a></span> (Decentralized Confidential Computing) to take <span class="text-fuchsia-700 font-semibold">privacy</span> and <span class="text-fuchsia-700 font-semibold">security</span> to the next level in <span class="text-fuchsia-700 font-semibold">Web3</span> ecosystems.</p>
+<div class="bg-gradient-to-r from-purple-400/10 to-purple-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">By merging <span class="text-fuchsia-700 font-semibold">blockchain technology</span> with <span class="text-fuchsia-700 font-semibold">confidential computing</span>, we've pioneered <span class="text-fuchsia-700 font-semibold"><a target="_blank" href="https://www.iex.ec/academy/iexec-decentralized-confidential-computing">DeCC</a></span> (Decentralized Confidential Computing) to take <span class="text-fuchsia-700 font-semibold">privacy</span> and <span class="text-fuchsia-700 font-semibold">security</span> to the next level in <span class="text-fuchsia-700 font-semibold">Web3</span> ecosystems.</p>
 </div>
 
 ### 🧸 DeCC explained like you're 5
@@ -221,8 +221,8 @@ And many other use cases...
   </div>
 </div>
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>In the next chapters, we'll follow Alice and Bob's journey step by step, starting with how Alice can <span class="text-fuchsia-700 font-semibold">protect her sensitive data</span> and then how Bob can <span class="text-fuchsia-700 font-semibold">build and deploy a confidential app</span> to process it.</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">In the next chapters, we'll follow Alice and Bob's journey step by step, starting with how Alice can <span class="text-fuchsia-700 font-semibold">protect her sensitive data</span> and then how Bob can <span class="text-fuchsia-700 font-semibold">build and deploy a confidential app</span> to process it.</p>
 </div>
 
 ## 🎯 Key takeaways
@@ -251,6 +251,6 @@ And many other use cases...
   </div>
 </div>
 
-<div class="bg-gradient-to-br from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
-  <p>Now that you understand the fundamentals, let's dive into protecting your first piece of data! With Alice!</p>
+<div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
+  <p class="m-0!">Now that you understand the fundamentals, let's dive into protecting your first piece of data! With Alice!</p>
 </div>

src/overview/helloWorld/2-protectData.md

@@ -11,8 +11,8 @@ import ProtectData from '../../modules/helloWorld/ProtectData.vue';
   <p>Let's follow Alice as she learns how to protect her data using DataProtector on Bob's dApp, our developer tool for protecting data creation and management.</p>
 </div>
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p><strong>Protected data</strong> is encrypted data that remains confidential throughout its entire lifecycle - during storage, transfer and processing.</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!"><strong>Protected data</strong> is encrypted data that remains confidential throughout its entire lifecycle - during storage, transfer and processing.</p>
 </div>
 
 ## 🧩 DataProtector, key features
@@ -37,8 +37,8 @@ their dApps with these key features:
   Features an SDK for easy integration into your DApp, enhancing functionality
   and user experience.
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p> DataProtector interacts with iExec's <a href="https://chainlist.org/?search=bellecour" target="_blank">Bellecour sidechain</a>, which is gasless, meaning you can use it completely free without needing any tokens!</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">DataProtector interacts with iExec's <a href="https://chainlist.org/?search=bellecour" target="_blank">Bellecour sidechain</a>, which is gasless, meaning you can use it completely free without needing any tokens!</p>
 </div>
 
 ## 🧩 Let's create protected data
@@ -47,8 +47,8 @@ their dApps with these key features:
 
 ## 🧩 What happened under the hood
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>You won't believe how easy it is to protect your data with DataProtector. Just a few lines of code, and you're done!</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">You won't believe how easy it is to protect your data with DataProtector. Just a few lines of code, and you're done!</p>
 </div>
 
 To use it, simply call the `protectData` method from the **DataProtector SDK**
@@ -149,8 +149,8 @@ const { address: protectedDataAddress } = await dataProtectorCore.protectData({
 });
 ```
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>Check out our <a target="_blank" href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main?file=%2Fsrc%2Fmain.tsx%3A18%2C7">code sandbox</a> for ready-to-use examples!</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">Check out our <a target="_blank" href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main?file=%2Fsrc%2Fmain.tsx%3A18%2C7">code sandbox</a> for ready-to-use examples!</p>
 </div>
 
 ## 🎯 Key takeaways
@@ -163,6 +163,6 @@ const { address: protectedDataAddress } = await dataProtectorCore.protectData({
 
 - 🔌 **Integration** is simple with our developer tools
 
-<div class="bg-gradient-to-br from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
-  <p>In the next chapter, we'll show you how to build, deploy, and run an iApp to process your protected data. Let's go! 🚀</p>
+<div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
+  <p class="m-0!">In the next chapter, we'll show you how to build, deploy, and run an iApp to process your protected data. Let's go! 🚀</p>
 </div>

src/overview/helloWorld/3-buildIApp.md

@@ -42,8 +42,8 @@ Before getting started, make sure you have:
   </div>
 </div>
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>Don't worry! All secrets used in this tutorial stay on your machine and aren’t shared with anyone. You’ll only need them to run the <code>iApp run</code> command.</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">Don't worry! All secrets used in this tutorial stay on your machine and aren’t shared with anyone. You’ll only need them to run the <code>iApp run</code> command.</p>
 </div>
 
 ## 🚀 Types of iApps You Can Build
@@ -71,8 +71,8 @@ Transfer, sell or rent protected content to authorized users.
 [Github](https://github.com/iExecBlockchainComputing/dataprotector-sdk/tree/main/packages/protected-data-delivery-dapp)
 | [Documentation](../../tools/dataProtector/dataProtectorSharing)
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>These are just a few examples, the possibilities are endless. Want to explore iApp Generator? Check out our <a href="../../tools/iapp-generator" target="_blank">documentation</a> and see what you can build!</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">These are just a few examples, the possibilities are endless. Want to explore iApp Generator? Check out our <a href="../../tools/iapp-generator" target="_blank">documentation</a> and see what you can build!</p>
 </div>
 
 ## 💾 Installation (win / mac / linux)
@@ -158,8 +158,8 @@ You will be prompted with the following message:
     advanced
 ```
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>We recommend selecting <span class="text-fuchsia-700 font-semibold">"Hello World"</span> to quickly discover how iApp works! use <span class="text-fuchsia-700 font-semibold">advanced</span> only if you are familiar with iExec.</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">We recommend selecting <span class="text-fuchsia-700 font-semibold">"Hello World"</span> to quickly discover how iApp works! use <span class="text-fuchsia-700 font-semibold">advanced</span> only if you are familiar with iExec.</p>
 </div>
 
 ```txt
@@ -184,10 +184,10 @@ iapp test
 
 It uses your local docker to build and execute the app.
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>- If you have <code>Error: Docker daemon is not accessible</code> Make sure Docker is installed and running.</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">- If you have <code>Error: Docker daemon is not accessible</code> Make sure Docker is installed and running.</p>
   <br>
-  <p>- If you have <code>Error: Failed to locate iApp project root</code> error:  Ensure you are in your project folder before proceeding.</p>
+  <p class="m-0!">- If you have <code>Error: Failed to locate iApp project root</code> error:  Ensure you are in your project folder before proceeding.</p>
 </div>
 
 You can see the output of the computation by saying yes to the question:
@@ -218,8 +218,8 @@ default protectedData mock.
 iapp test --protectedData default
 ```
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>You can check how args and protectedData are processed in <code> src/app.js</code> or <code> src/app.py</code></p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">You can check how args and protectedData are processed in <code> src/app.js</code> or <code> src/app.py</code></p>
 </div>
 
 ## 🚀 Deploy Your iApp
@@ -256,8 +256,8 @@ Once you have your token, you can deploy your iApp using the following command:
 iapp deploy
 ```
 
-<div class="bg-gradient-to-br from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
-  <p>📝 Make sure to save your <span class="text-fuchsia-700 font-semibold">iApp address</span> after deployment - you'll need it later!</p>
+<div class="bg-gradient-to-r from-fuchsia-400/10 to-fuchsia-400/5 rounded-[6px] p-6 border-l-4 border-fuchsia-700 mb-6">
+  <p class="m-0!">📝 Make sure to save your <span class="text-fuchsia-700 font-semibold">iApp address</span> after deployment - you'll need it later!</p>
   <p>You can find your iApp address in the <code>iexec-app.json</code> file in your project folder.</p>
   <br>
   <p>⚠️  If you encounter issues during deployment, make sure Docker's BuildKit feature is enabled and supports AMD64 architecture:</p>
@@ -284,8 +284,8 @@ allowing it to run securely in a **Trusted Execution Environment (TEE)** for
 **confidential computing**. If you want to explore further, you can check the
 protocol documentation [here](https://protocol.docs.iex.ec/).
 
-<div class="bg-gradient-to-br from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
-  <p>🎉 Congratulations! You've successfully deployed and run your first iApp on iExec. This is a significant milestone - your application is now ready to securely process confidential data in a trusted environment.</p>
+<div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
+  <p class="m-0!">🎉 Congratulations! You've successfully deployed and run your first iApp on iExec. This is a significant milestone - your application is now ready to securely process confidential data in a trusted environment.</p>
 </div>
 
 ## 🎯 Key takeaways
@@ -296,6 +296,6 @@ protocol documentation [here](https://protocol.docs.iex.ec/).
 - ⛓️ **Deployment:** Apps are deployed on iExec protocol to run in trusted
   environments
 
-<div class="bg-gradient-to-br from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
-  <p>Next up: Alice will learn how to authorize the iApp and Bob to access and use her protected data!  🚀</p>
+<div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
+  <p class="m-0!">Next up: Alice will learn how to authorize the iApp and Bob to access and use her protected data!  🚀</p>
 </div>