add farm page

content/build/index.md

@@ -24,6 +24,7 @@ extra:
 ) }}
 
 
+
 <!--section 2 (tabs)-->
 
 <div class="lg:pb-24 pb-12 mx-auto max-w-7xl px-4 lg:px-8">
@@ -45,17 +46,13 @@ extra:
 
 
 
-
 <!-- section 3 (Build With ThreeFold) -->
 
 <div class="lg:py-24 py12 ">
 <div class="container max-w-7xl mx-auto">
 
- 
-
 ## Build with ThreeFold
 
-
 <div class="max-w-7xl mx-4 md:mx-10 lg:mx-20 mt-16 xl:mx-auto">
     <div class="flex lg:flex-row flex-col">
     
@@ -93,8 +90,7 @@ extra:
 
 
 
-
-<!--section 2 (horizontal_features)-->
+<!--section 4 (Deploy with ThreeFold)-->
 
  <div class="lg:py-24 py-12 mx-auto max-w-7xl px-4 g:px-8">
 
@@ -111,10 +107,11 @@ extra:
 <div class="mt-6 lg:mt-10 flex items-center justify-center gap-x-6">
         <a href="https://dashboard.grid.tf/#/deploy/labs/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2 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">Discover Labs</a>
 </div> 
-
-  
 </div>
 
+
+
+
  <!--section 2 (horizontal_features)-->
 
 <!-- <div class="lg:py-24 py-12 mx-auto max-w-7xl px-4 g:px-8">
@@ -160,8 +157,8 @@ extra:
 </div> -->
 
 
-<!--section 5 (ThreeFold Stack)-->
 
+<!--section 5 (ThreeFold Stack)-->
 
 <div class="lg:py-24 py-12 mx-auto max-w-7xl lg:px-8">
 
@@ -238,7 +235,7 @@ extra:
 </div>
 
 
-<!-- section 8 Cta -->
+<!-- section 6 Cta -->
 
 {{ cta(
     title_1="Building a",

content/farm/index.md

@@ -0,0 +1,243 @@
+---
+title: "Farm"
+description: "TF offers a secure, sovereign infrastructure layer for Web4, delivering unparalleled scalability, incorruptible and permanent data storage, AI and Web2/Web3/Edge compatibility, and 100% uptime for a resilient digital future." # quotation marks to allow colons where used
+template: "page.html"
+insert_anchor_links: "left"
+extra:
+ author: ThreeFold
+ imgPath: tf.png
+---
+
+<!-- section 1 (Become a Farmer) -->
+
+{{ hero_text_center(
+    image_src="/images/become_farmer.png",
+    image_alt="",
+    title="Become a Farmer",
+    subtitle="",
+    description="and provide storage, compute & network capacity to the ThreeFold Grid",
+    button1_text="Get Started",
+    button1_link="hhttps://docs.threefold.io/docs/category/become-a-farmer"
+    target="_blank"
+) }}
+
+<!-- ------------------------------------------------------------------------------------- -->
+
+<!--section 2 (What is Farming)-->
+
+<div class="lg:pb-24 pb-12 mx-auto max-w-7xl px-4 lg:px-8">
+
+## What is Farming?
+
+ThreeFold Farming is a unique concept in the ThreeFold ecosystem where individuals (farmers) can:
+
+<br>
+ 
+- Deploy nodes (3Nodes) that connect to the ThreeFold Grid
+- Contribute computing resources (data, cloud and network) to the decentralized ThreeFold Grid
+- Earn rewards whenever your nodes provide capacity and are actively utilized on the grid.
+- Support a peer-to-peer cloud infrastructure alternative to centralized providers
+
+</div>
+
+<!-- ------------------------------------------------------------------------------------- -->
+
+<!-- section 3 (The Farming Process ) -->
+
+<div class="lg:py-24 py12 ">
+<div class="container max-w-7xl mx-auto">
+
+## The Farming Process 
+
+Anyone can become a ThreeFold Farmer by running nodes that contribute capacity to the grid. 
+
+<br>
+
+### **3NODES**
+
+The ThreeFold Nodes are self-healing and autonomous. They provide data, network and cloud resources to the ThreeFold Platform, becoming active contributors to a decentralized digital infrastructure. 
+While rewards are now based on actual usage, each node still delivers a powerful combination of modern technology and thoughtfully crafted design.
+
+<br>
+
+<div class="px-4 lg:px-16">
+
+<blockquote class=" fade-in px-6">
+
+**A new bare metal operating system**
+Zero-OS supports all required Web2 and Web3 workloads and allows millions of nodes to operate in full autonomous mode providing lower cost, better energy efficiency, more reliability and security.
+
+<br>
+
+**A Quantum Safe Storage System**
+The Quantum Safe Storage System is capable of storing data indestructible, efficient, and ultra-scalable. Previous versions of this system are widely used to store Zetabytes of information by large organizations.
+
+<br>
+
+**A Quantum Safe Network System**
+Mycelium can look for the shortest path, has a built-in naming & CDN (Content Delivery) system, can survive disaster and network cuts much more efficiently as is possible today.
+
+</blockquote>
+</div>
+</div>
+</div>
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- section 4 (Get Started) -->
+
+<div class="lg:py-24 py12 ">
+<div class="container max-w-7xl mx-auto">
+
+## Get Started
+
+Start providing capacity to others and join our Farmers community
+
+<div class="max-w-7xl mt-16">
+    <div class="flex lg:flex-row flex-col">
+    
+{{ image_card(
+    header="Create a Farm",
+    target="_blank",
+    tooltip=" ",
+    card_link="https://docs.threefold.io/docs/become-a-farmer/create_a_farm"
+) }}
+
+{{ image_card(
+    header="Get a 3Node",
+        target="_blank",
+    tooltip=" ",
+    card_link="https://docs.threefold.io/docs/become-a-farmer/get_started"
+) }}
+
+{{ image_card(
+    header="Farmers community",
+    tooltip=" ",
+    card_link="/community"
+) }}
+
+</div>
+</div>
+</div>
+</div>
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- section 5 (The Evolution of Farming) -->
+
+<div class="lg:py-24 py12 ">
+<div class="container max-w-7xl mx-auto">
+
+## The Evolution of Farming
+
+The upcoming ThreeFold Marketplace (expected late Summer 2025) introduces a new chapter for farmers in the ecosystem, making it easier to share resources and earn through a transparent, peer-to-peer platform.
+
+</div>
+</div>
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- section 6 (Join the Movement) -->
+
+<div class="lg:py-24 py12 ">
+<div class="container max-w-7xl mx-auto">
+
+## Discover ThreeFold’s Ecosystem
+
+<div class="max-w-4xl">
+
+There are many ways to join our journey and help build a new internet infrastructure. 
+Farming is just one core part of our ecosystem, here are all the products driving us toward a more open, autonomous, and interconnected digital future.
+
+</div>
+
+<div class="max-w-7xl mx-4 md:mx-10 lg:mx-20 mt-16 xl:mx-auto">
+    <div class="flex lg:flex-row flex-col">
+
+{{ image_card(
+    image_src="/images/3node.png",
+    image_alt="3node",
+    title="3Node",
+    tooltip="The backbone of storage and infrastructure, providing compute and data resources.",
+    card_link="Dashboard"
+) }}
+
+{{ image_card(
+    image_src="/images/mycelium.png",
+    image_alt="mycelium",
+    title="MYCELIUM",
+    tooltip="End-to-end encrypted overlay network, always looking for the shortest possible path between participants ",
+    card_link="Dashboard"
+) }}
+
+{{ image_card(
+    image_src="/images/aibox.png",
+    image_alt="aibox",
+    title="AIBOX",
+    tooltip="A self-hosted AI compute solution powered by ThreeFold. ",
+    card_link="Dashboard"
+) }}
+
+{{ image_card(
+    image_src="/images/3phone.png",
+    image_alt="3phone",
+    title="3PHONE",
+    tooltip="OwnPhone is the first secure device in the 3Phone family designed to work seamlessly with the ThreeFold Grid.",
+    card_link="Dashboard"
+) }}
+
+{{ image_card(
+    image_src="/images/3router.png",
+    image_alt="ThreeFold Cloud",
+    title="3ROUTER",
+    tooltip="Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.",
+    card_link="Dashboard"
+) }}
+</div>
+</div>
+
+<div class="mt-6 lg:mt-10 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 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">Join ThreeFold’s Ecosystem</a>
+  </div>
+</div>
+</div>
+
+
+
+<!-- section 6 Cta -->
+
+{{ cta(
+    title_1="Building a",
+    title_2="New Internet,",
+    title_3="Together",  
+    button_text_1="Participate",
+    button_link_1="https://form.typeform.com/to/GO9G8ZBa",
+    button_text_2="Stay Updated",
+    button_link_2="https://t.me/threefoldnews",
+    button_text_3="Chat",
+    button_link_3="https://t.me/threefold"
+) }}
+
+
+
+<style>
+  ul li {
+    color:rgb(229 231 235);
+    font-size: 1.25rem;
+  }
+  .blockquote::before {
+        content: open-quote;
+        font-size: 4rem;
+        position: absolute;
+        top: -1rem;
+        left: -1rem;
+        color: #8d1212;
+    }
+</style>
+
+
+
+
+
+
+

content/header/index.md

@@ -9,6 +9,7 @@ extra:
 
 - [About]("/about")
 - [Build]("/build")
+- [Farm]("/farm")
 - [Take Action]("/action")
 - Info
 

templates/shortcodes/hero_text_center.html

@@ -18,10 +18,10 @@
     <div class="mx-auto max-w-3xl text-center">
       <h1 class="fade-in">
         {{ title }}</h1>
-      <p class="mx-auto mt-8 max-w-3xl fade-in">{{ description }}</p>
+      <p class="mx-auto mt-4 max-w-3xl fade-in">{{ description }}</p>
       <!-- <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>  -->
       {% if image_src %}
-      <div class="mx-auto max-w-7xl px-4 py-8">
+      <div class="mx-auto max-w-7xl px-4 py-8 grayscale">
         <img src="{{ image_src }}" alt="{{ image_alt }}" class="w-full fade-in">
       </div>
       {% endif %}

templates/shortcodes/image_card.html

@@ -19,7 +19,7 @@
          
         <div class="fade-in-box flex flex-col p-6 rounded-2xl  bg-white/5">
           {% if header %}
-          <h2 class="flex justify-center items-center text-white">{{ header }}</h2>
+          <h2 class="lg:text-4xl text-3xl flex justify-center items-center text-white">{{ header }}</h2>
           {% endif %}
 
           {% if image_src %}