From 3b5f28804b55484dc2b0f208a335d1d028facdbc Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Sun, 1 Jun 2025 17:59:32 +0300
Subject: [PATCH] update section 5 and 6

---
 content/home/index.md                 | 45 ++++++++++++++++++--
 templates/shortcodes/center_text.html |  2 +-
 templates/shortcodes/farm_steps.html  | 60 +++++++++++++++++++++++++++
 templates/shortcodes/left_text.html   | 13 +++++-
 4 files changed, 113 insertions(+), 7 deletions(-)
 create mode 100644 templates/shortcodes/farm_steps.html

diff --git a/content/home/index.md b/content/home/index.md
index abf4c82c8..204725d0e 100644
--- a/content/home/index.md
+++ b/content/home/index.md
@@ -34,9 +34,9 @@ extra:
 
   {{ left_text( 
     title="ThreeFold is a Decentralized Infrastructure Layer for The Internet",
-      description="We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.",
-      button_text="Discover How It Works",
-      button_link="/what"
+    description_1="We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.",
+    button_text="Discover How It Works",
+    button_link="/what"
 
   ) }}
 
@@ -155,8 +155,45 @@ extra:
 
 <!-- section 5 -->
 
-{{ farmers() }}
+<div class="container mx-auto lg:max-w-7xl lg:py-24 py-12">
 
+  {{ left_text( 
+      title="How it works",
+      description_1="At the base, nodes form the physical foundation—distributed computers that provide processing power, storage, and networking capabilities. These nodes work together to create a global, community-powered infrastructure.",
+      description_2="Regardless of technical expertise, anyone can deploy nodes from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process 'farming.'",
+      button_text="",
+      button_link=""
+
+  ) }}
+
+<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
+  
+<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
+
+{{ farm_steps(
+    title="1. HOST A NODE",
+    description="All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node."    
+) }}
+
+{{ farm_steps(
+    title="2. OFFER CAPACITY",
+    description="After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid."    
+) }}
+
+{{ farm_steps(
+    title="3. EARN REWARDS",
+    description="The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud."    
+) }}
+
+
+   </dl>
+</div>
+
+  <div class="mt-6 flex items-center justify-center gap-x-6">
+        <a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
+      </div>
+      
+</div>
 
 <!-- section 6 -->
 
diff --git a/templates/shortcodes/center_text.html b/templates/shortcodes/center_text.html
index cb716807a..7abb0f748 100644
--- a/templates/shortcodes/center_text.html
+++ b/templates/shortcodes/center_text.html
@@ -10,7 +10,7 @@
     <p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
       {{ description }}
     </p>
-    {% if button %}
+    {% if button_link %}
     <a href="{{ button_link }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text }} <span aria-hidden="true">→</span></a>
     {% endif %}
 </div>
\ No newline at end of file
diff --git a/templates/shortcodes/farm_steps.html b/templates/shortcodes/farm_steps.html
new file mode 100644
index 000000000..46ca05240
--- /dev/null
+++ b/templates/shortcodes/farm_steps.html
@@ -0,0 +1,60 @@
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
+{% set title = title | default(value="") %}
+{% set subtitle = subtitle | default(value="") %}
+{% set description = description | default(value="") %}
+{% set button_text_1 = button_text_1 | default(value="") %}
+{% set button_link_1 = button_link_1 | default(value="") %}
+{% set button_text_2 = button_text_2 | default(value="") %}
+{% set button_link_2 = button_link_2 | default(value="") %}
+
+
+
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
+          <img class="fade-in blinking-effect relative mx-auto mb-4" width="30%" src="{{ image_src }}" alt="{{ image_alt }}">
+          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
+            {{ title }}
+          </dt>          
+          <dt class="text-lg font-normal text-white">{{ subtitle }}<dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">{{ description }}</p>
+            <div class="flex mt-6 justify-center fade-in">
+              {% if button_link_1 %}
+              <a href="{{ button_link_1 }}" class="mr-2 fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">{{ button_text_1 }}</a>
+              {% endif %}
+              {% if button_link_1 %}
+              <a href="{{ button_link_2 }}" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">{{ button_text_2 }}</a>
+              {% endif %}
+            </div>
+          </dd>
+        </div>
+
+
+
+<style>
+  /* Fade-in animation for the grid items */
+  .fade-in-box {
+    opacity: 0;
+    animation: fadeIn 0.6s ease-in-out forwards;
+  }
+
+  /* Fading in each grid item with a slight delay */
+  .fade-in-box:nth-child(1) { animation-delay: 0s; }
+  .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
+  .fade-in-box:nth-child(3) { animation-delay: 0.4s; }
+  .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
+  .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
+  .fade-in-box:nth-child(6) { animation-delay: 1s; }
+  .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
+  .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
+  .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
+  .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
+  .fade-in-box:nth-child(11) { animation-delay: 2s; }
+  .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/templates/shortcodes/left_text.html b/templates/shortcodes/left_text.html
index 788ec24f2..e879bd0b6 100644
--- a/templates/shortcodes/left_text.html
+++ b/templates/shortcodes/left_text.html
@@ -1,5 +1,6 @@
 {% set title = title | default(value="Built") %}
-{% set description = description | default(value="") %}
+{% set description_1 = description_1 | default(value="") %}
+{% set description_2 = description_2 | default(value="") %}
 {% set button_text = button_text | default(value="") %}
 {% set button_link = button_link | default(value="") %}
 
@@ -10,8 +11,16 @@
     <div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
       <h2 class="fade-in text-balance lg:text-5xl text-3xl leading-tight font-normal tracking-tight text-white">{{ title }}
       </h2>
-      <p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description }}</p>
+      <p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description_1 }}</p>
+
+      <p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description_2 }}</p>
+
+      {% if button_link %}
+
       <a href="{{ button_link }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text }} <span aria-hidden="true">→</span></a>
+
+      {% endif %}
+
     </div>