From 449b185dff4763c6cb58d8f31f8689f89ec6d53e Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Thu, 6 Mar 2025 12:00:14 +0200
Subject: [PATCH] made images in seperated section

---
 templates/layouts/farmer.html              |  1 +
 templates/partials/farmer/farmers.html     | 91 ++++++++++------------
 templates/partials/farmer/show_images.html | 55 +++++++++++++
 3 files changed, 98 insertions(+), 49 deletions(-)
 create mode 100644 templates/partials/farmer/show_images.html

diff --git a/templates/layouts/farmer.html b/templates/layouts/farmer.html
index d525fe9..2746c22 100644
--- a/templates/layouts/farmer.html
+++ b/templates/layouts/farmer.html
@@ -3,6 +3,7 @@
 
 {% include "partials/farmer/hero_section.html" %}
 {% include "partials/farmer/farmers.html" %}
+{% include "partials/farmer/show_images.html" %}
 {% include "partials/farmer/about1.html" %}
 {% include "partials/farmer/cta.html" %}
 
diff --git a/templates/partials/farmer/farmers.html b/templates/partials/farmer/farmers.html
index fcbeeb1..58d95e5 100644
--- a/templates/partials/farmer/farmers.html
+++ b/templates/partials/farmer/farmers.html
@@ -5,58 +5,51 @@
       <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in">
         Regardless of technical expertise, anyone can deploy AIBOX (servers) 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.”
       </p>
-  </div>
-<section class="pb-12 lg:pb-24 bg-transparent">
-  <div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto">
-    <div class="mx-auto max-w-2xl  lg:max-w-none">
-      <dl class="grid max-w-xl grid-cols-1 gap-x-8  gap-y-8 lg:max-w-none lg:grid-cols-3">
-        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
-            1. HOST A NODE
-          </dt>
-          <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-gray-800 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
-            <p class="mt-6">
-            </p>
-          </dd>
+    </div>
+    <section class="bg-transparent">
+      <div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto">
+        <div class="mx-auto max-w-2xl  lg:max-w-none">
+          <dl class="grid max-w-xl grid-cols-1 gap-x-8  gap-y-8 lg:max-w-none lg:grid-cols-3">
+            <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
+              <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
+                1. HOST A NODE
+              </dt>
+              <dd class="mt-4 flex flex-auto flex-col">
+                <p class="flex-auto leading-normal font-light text-gray-800 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
+                <p class="mt-6">
+                </p>
+              </dd>
+            </div>
+            <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+              <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
+                2. OFFER CAPACITY
+              </dt>
+              <dd class="mt-4 flex flex-auto flex-col">
+                <p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
+                <p class="mt-6">
+                
+                </p>
+              </dd>
+            </div>
+            <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
+              <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
+                3. EARN REWARDS
+              </dt>
+              <dd class="mt-4 flex flex-auto flex-col">
+                <p class="flex-auto leading-normal font-light text-gray-800 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
+                </p>
+                <p class="mt-6">
+                
+                </p>
+              </dd>
+            </div>
+          </div>
         </div>
-        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
-            2. OFFER CAPACITY
-          </dt>
-          <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
-            <p class="mt-6">
-            
-            </p>
-          </dd>
-        </div>
-        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
-            3. EARN REWARDS
-          </dt>
-          <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-gray-800 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
-            </p>
-            <p class="mt-6">
-            
-            </p>
-          </dd>
+          </dl>
         </div>
       </div>
-
-      <div class="fade-in-box my-16 mx-auto text-center lg:flex lg:justify-center">
-        <img class="h-auto object-cover" src="/images/aibox_farming1.png" alt="AIBox Specifications">
-    </div>
-
-    <div class="fade-in-box mt-16 mx-auto text-center lg:flex lg:justify-center">
-      <img class="h-auto object-cover" src="/images/aibox_farming2.png" alt="AIBox Specifications">
-  </div>
-    </div>
-      </dl>
-    </div>
-  </div>
-</section>
+    </section>
+</div>
 
 <style>
   /* Fade-in animation for the grid items */
diff --git a/templates/partials/farmer/show_images.html b/templates/partials/farmer/show_images.html
new file mode 100644
index 0000000..4075cf1
--- /dev/null
+++ b/templates/partials/farmer/show_images.html
@@ -0,0 +1,55 @@
+<div class="relative isolate overflow-hidden bg-transparent">
+    <div class="px-6 pt-12 pb-12">
+      <div class="mx-auto max-w-7xl text-center">
+        {# <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2> #}
+        {# <p class="mx-auto mt-12  text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience 
+          building decentralized internet infrastructure.
+        </p> #}
+          <div class="fade-in-box mb-16 mx-auto text-center lg:flex lg:justify-center">
+            <img class="h-auto object-cover" src="/images/aibox_farming1.png" alt="AIBox Specifications">
+          </div>
+          <div class="fade-in-box mt-16 mx-auto text-center lg:flex lg:justify-center">
+            <img class="h-auto object-cover" src="/images/aibox_farming2.png" alt="AIBox Specifications">
+          </div>
+        {# <div  class="mt-10 flex items-center  gap-x-6 flex-wrap justify-center">
+          <a  href="https://threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+            Visit ThreeFold
+          </a>
+          <a href="https://dashboard.grid.tf/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <span aria-hidden="true">→</span></a>
+        </div> #}
+      </div>
+    </div>
+</div>
+  
+  <style>
+    /* Define the fade-in animation */
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    .fade-in-box {
+      opacity: 0;
+      animation: fadeIn 0.6s ease-in-out forwards;
+      margin-top: 2.5rem;
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+  </style>
+  
\ No newline at end of file