Merge pull request #429 from threefoldfoundation/development

Updates from latest project

config.toml

@@ -51,6 +51,9 @@ external_links_no_referrer = true
 # For example, `...` into `…`, `"quote"` into `“curly”` etc
 smart_punctuation = true
 
+[build]
+not_found = "404.md"
+
 [[taxonomies]]
 name = "categories"
 feed = true

content/404.md

@@ -0,0 +1,8 @@
+---
+title: "404"
+description: ""
+insert_anchor_links: "left"
+template: "404.html"
+
+---
+

content/blog/introducing_project_inca/index.md

@@ -13,6 +13,10 @@ extra:
     isFeatured: true
 ---
 
+*Please note the information below is subject to change as the project evolves and will be updated as is appropriate.*
+
+<br>
+
 ThreeFold’s journey over the past years has been one of deep, collaborative commitment, marked by significant technological advancements and milestones in building a new cloud infrastructure from the ground up, as well as the global expansion of the grid to its current state. Throughout this journey, we have learned, adapted, and evolved, leading us to a strong strategy for the next chapter and achieving our collective vision.
 
 ### **Meet Project Internet Capacity**

content/community/index.md

@@ -0,0 +1,205 @@
+---
+title: "community"
+description: "community a decade ago, a group of passionate Internet & Cloud veterans came together to build a system." # quotation marks to allow colons where used
+template: "page.html"
+insert_anchor_links: "left"
+extra:
+  author: Your name here
+  imgPath: about/deploy_hero.png
+---
+
+<!-- section 1 (header) -->
+
+<div class="container mx-auto">
+
+
+{% row( style="center mtop semiNarrow") %}
+
+
+## **Join the <span class="blue">Community</span>**
+
+{% end %}
+
+{% row( style="center semiNarrow") %}
+
+<div class="myscale">
+
+[![Image](discourse.png#social)](https://forum.threefold.io/)
+
+</div>
+
+###### **Forum**
+
+<p class="text-base leading-snug">Ask Questions<p>
+
+|||
+
+<div class="myscale">
+
+[![Image](gh.png#social)](https://github.com/threefoldfoundation)
+
+</div>
+
+###### **GitHub | Tech**
+
+<p class="text-base leading-snug">Open-Source Collaboration for Tech Development<p>
+
+|||
+
+<div class="myscale">
+
+[![Image](gh.png#social)](https://github.com/threefoldtech)
+
+</div>
+
+###### **GitHub | Foundation**
+
+<p class="text-base leading-snug">Open-source Collaboration for Websites and Online Info<p>
+
+|||
+
+<div class="myscale">
+
+[![Image](x.png#social)](https://x.com/threefold_io)
+
+</div>
+
+###### **X | Twitter**
+
+<p class="text-base leading-snug">"Tweet" With Us<p>
+
+{% end %}
+
+{% row( style="center semiNarrow") %}
+
+<div class="myscale">
+
+[![Image](telegram.png#social)](https://t.me/threefoldnews)
+
+</div>
+
+###### **Telegram News**
+
+<p class="text-base leading-snug">Stay Updated<p>
+
+|||
+
+<div class="myscale">
+
+[![Image](telegram.png#social)](https://t.me/threefold)
+
+</div>
+
+###### **Telegram Main Chat**
+
+<p class="text-base leading-snug">Community Conversation<p>
+
+|||
+
+<div class="myscale">
+
+[![Image](telegram.png#social)](https://t.me/threefoldfarmers)
+
+</div>
+
+###### **Telegram Farmers Chat**
+
+<p class="text-base leading-snug">Farming Community<p>
+
+|||
+
+<div class="myscale">
+
+[![Image](telegram.png#social)](https://t.me/threefoldtesting)
+
+</div>
+
+###### **Telegram Grid User Chat**
+
+<p class="text-base leading-snug">Grid User Community<p>
+
+{% end %}
+
+
+
+{% row( style="center mbottom semiNarrow") %}
+
+<div class="myscale">
+
+[![Image](reddit.png#social)](https://www.reddit.com/r/threefold/)
+
+</div>
+
+###### **Reddit**
+
+<p class="text-base leading-snug">Join In<p>
+
+|||
+
+<div class="myscale">
+
+[![Image](youtube.png#social)](https://www.youtube.com/@ThreeFoldFoundation)
+
+</div>
+
+###### **YouTube**
+
+<p class="text-base leading-snug">Watch Things Unfold<p>
+
+|||
+
+<div class="myscale">
+
+<a target="_self" href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')">
+
+![Image](mail.png#social)
+
+</a>
+
+</div>
+
+###### **E-mail Newsletter**
+
+<p class="text-base leading-snug">Updates in Your Inbox<p>
+
+
+|||
+
+<div class="myscale">
+
+[![Image](linkedin.png#social)](https://www.linkedin.com/company/threefold-foundatiooon/)
+
+</div>
+
+###### **LinkedIn**
+
+<p class="text-base leading-snug">Lets Network<p>
+
+{% end %}
+
+
+{% row( style="center mtop semiNarrow") %}
+
+
+## **Keep up with <span class="blue">ThreeFold Events</span>**
+
+{% end %}
+
+<br>
+
+<iframe class="mx-auto w-full" src="https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Europe%2FBrussels&bgcolor=%23ffffff&title&showTitle=0&showPrint=0&showCalendars=0&src=Y185OGMwNTEwZDVlMmMzMGY1MGM1NTNmZmUxZDNiOTRjMTliMzRmNTNiNDhhNzY3NjdkNDEyNTU3ZjVhYzc1ODAyQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&color=%2333B679" style="border:solid 1px #777"  frameborder="0" height="800px"></iframe>
+
+
+</div>
+
+
+<style>
+
+.myscale{
+  transition: transform .5s; 
+}
+
+.myscale:hover{
+  transform: scale(1.2); 
+}
+  </style>

content/footer/_index.md

@@ -48,12 +48,14 @@ extra:
 
 <h6><a target="_self" onclick="window.location.href='/about'">About</a></h6>
 
-<h6><a target="_self" onclick="window.location.href='/newsroom'">NewsRoom</a></h6>
-
-<h6><a target="_self" onclick="window.location.href='/people'">People</a></h6>
-
-<h6><a target="_self" onclick="window.location.href='/partners'">Partners</a></h6>
-
 <h6><a target="_self" onclick="window.location.href='/blog'">Blog</a></h6>
 
+<h6><a target="_self" onclick="window.location.href='/newsroom'">NewsRoom</a></h6>
+
+<h6><a target="_self" href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')">Newsletter</a></h6>
+
+<h6><a target="_self" onclick="window.location.href='/community'">Community</a></h6>
+
+
+
 {% end %}

content/home/index.md

@@ -457,7 +457,7 @@ Get assistance from our support team
 
 <div class="border rounded-md mb-4">
 
-[![](join1.png#icon)](https://t.me/threefold)
+[![](join1.png#icon)](/community)
 
 </div>
 

content/newsroom/july_community_calls/index.md

@@ -0,0 +1,58 @@
+---
+id: july_community_calls
+title: "🗓 Announcing: July Community Calls"
+image_caption: July Community calls
+description: Check out the schedule for our July community calls and see what's on the agenda. Save the date!
+date: 2024-06-28
+taxonomies:
+    people: [bernadette_amanda_caster]
+    tags: [technology,update,threefold_grid,community,news]
+    news-category: [foundation]
+extra:
+    imgPath: july_community_calls.png
+
+---
+
+Friends, take a look at the line-up of calls for the month of July (plus the first of August).  
+
+<br/>
+
+**Project Update** <br>
+Wednesday July 03 @ 17:00 CEST | 11:00 EDT (*Rescheduled from June 27*) <br>
+
+The team will update the community on their latest updates on strategy, tech development, partners, on-the-ground activities, and other such topics.
+
+<br/>
+
+**Discussion & Demo: Nextcloud** <br>
+Tuesday July 09 @ 19:00 CEST | 13:00 EDT <br>
+
+[Nextcloud](https://nextcloud.com/) is an open-source content collaboration platform with a mission to develop software for decentralized and federated clouds, and over 400,000 deployments. During this session, the team will show how to deploy Nextcloud on the ThreeFold Grid.
+
+<br/>
+
+**Community Discussion** <br>
+Thursday July 18 @ 17:00 CEST | 11:00 EDT (*Pending enough interest from the community*) <br>
+
+Pending enough interest from the community, we will hold a Q&A / two-way discussion. We will check in ahead of this date to pre-seed questions and discussion topics.
+
+<br/>
+
+**Discussion & Demo: TFROBOT** <br>
+Tuesday July 23 @ 19:00 CEST | 13:00 EDT <br>
+
+During this session, the team will discuss and demo [TFROBOT](https://manual.grid.tf/documentation/developers/tfrobot/tfrobot.html), a command line interface tool that offers simultaneous mass deployment of groups of VMs on the grid.
+
+<br/>
+
+**Project Update** <br>
+Thursday August 01 @ 17:00 CEST | 11:00 EDT <br>
+
+The team will update the community on their latest updates on strategy, tech development, partners, on-the-ground activities, and other such topics.
+
+<br/>
+
+Find the full details [here](https://forum.threefold.io/t/july-2024-threefold-community-call-schedule/4380). We look forward to seeing you there!
+
+
+

content/newsroom/june_project_update/index.md

@@ -0,0 +1,39 @@
+---
+id: june_project_call
+title: ☕️ Watch June's Project Update
+image_caption: June Project call
+description: This month's update covered highlights of Grid v3.14, a preview of v3.15, Internet Capacity updates, demos, and more.
+date: 2024-07-05
+taxonomies:
+    people: [bernadette_amanda_caster]
+    tags: [technology,update,threefold_grid,community,news]
+    news-category: [foundation]
+extra:
+    imgPath: june_project_update.png
+
+---
+
+We hosted a general project update this Wednesday covering a range of topics. Kristof started off with a general state of things to set the stage for the coming summer (northern hemisphere) months. Then, Sam reviewed ThreeFold positioning and TF Grid vs TF Grid 4, and Scott detailed the highlights of TF Grid v3.14 (heading to mainnet thanks to a successful DAO vote this week).
+
+<br>
+
+Next, Theo from Project Internet Capacity / Zonaris spoke briefly, and Kristof showed the investor-focused presentation being prepared by the team. Kristof continued with some behind the scenes info about conversations we are having with partners and potential partners and showed some demos, and then covered what’s coming with the next grid release (v3.15).
+
+<br>
+
+Finally, Mik discussed recent documentation updates, and Sam covered on the ground highlights from the past month, before answering a question from the community, and signing off.
+
+<br>
+
+Dig into the latest from the team [here](https://youtu.be/Cgak5Zy52vI?si=js1STSiaJNGPk3lA).
+
+<br/>
+
+Take note of [calls coming up this july](https://forum.threefold.io/t/july-2024-threefold-community-call-schedule/4380).
+
+<br/>
+
+*Please note the content of this call is for information purposes only and is subject to change as the project evolves.*
+
+
+

content/newsroom/mainnet_upgrade_314/index.md

@@ -0,0 +1,24 @@
+---
+id: mainnet_upgrade_314
+title: "🗳 Vote: Bring v3.14 to Mainnet"
+image_caption: mainnet_upgrade_314
+description: Calling all farmers to vote on the GEP to bring grid version 3.14 to mainnet!
+date: 2024-06-24
+taxonomies:
+    people: [bernadette_amanda_caster]
+    tags: [technology,update,threefold_grid,community,news]
+    news-category: [foundation]
+extra:
+    imgPath: mainnet_upgrade_314.png
+
+---
+
+Calling ThreeFold Farmers to vote on the Grid Enhancement Proposal to bring TF Grid v3.14 to mainnet. The vote ends tomorrow Tuesday June 25 at 10am CEST. This release is focused on stability and reliability and includes improvements and upgrades to Zero OS, TF Chain, Grid-Proxy, Farmerbot, Pulumi, and SDK-Go. Find the details [here](https://forum.threefold.io/t/gep-tf-grid-mainnet-release-3-14/4372).
+
+<br/>
+
+To vote, visit the [Dashboard](https://dashboard.grid.tf/) >>> DAO Section >>> Vote.
+
+<br/>
+
+Have a great week ahead, ThreeFold community!

content/partners/_index.md

@@ -1,6 +1,6 @@
 ---
 title: "Our Partners"
-paginate_by: 6
+paginate_by: 9
 
 # paginate_reversed: false
 

content/partners/holochain/index.md

@@ -0,0 +1,71 @@
+---
+id: holochain
+title: Holochain
+description: Holochain is a P2P alternative to the blockchain, giving developers a framework for creating decentralized applications
+template: partnerPage.html
+taxonomies:
+  partners-category: [foundation]
+  tags: []
+date: 2024-07-05
+extra:
+    countries: [Global]
+    cities: []
+    rank: 1
+    imgPath: holochain3.png
+    image_caption: holochain
+    partner_logo: holochain.png
+    websites: https://www.holochain.org/
+    private: 0
+---
+
+<br/>
+
+### **An end-to-end open source P2P app framework**
+
+[Holochain](https://www.holochain.org) is a framework for developing and running decentralized applications (dApps) designed to be scalable, efficient and adaptable, featuring a peer-to-peer content distribution protocol, cryptography and hash tables. Unlike traditional blockchain architectures, Holochain uses a distributed hash table (DHT) to enable peer-to-peer communication and data storage, offering greater flexibility and performance for decentralized applications. It addresses effectively scalability challenges and is highly environmentally friendly.
+
+<br/>
+
+![holochain](holochain3.png)
+
+<br/>
+
+A significant change enabling Holochain's innovation is its shift from a data-dependent blockchain to an agent-centric system. Unlike blockchain's need for global consensus, Holochain employs an agent system where each agent maintains a private fork, managed on the blockchain in a limited manner using a distributed hash table. This approach eliminates the scalability issues common to blockchain solutions, allowing decentralized applications (dApps) on Holochain to achieve more with fewer resources.
+
+<br/>
+
+![holochain](holochain2.png)
+
+<br/>
+
+ThreeFold and Holochain will together go to market, Holochain as application layer being hosted on the ThreeFold Grid.
+
+### **Partnership with ThreeFold**
+
+The partnership between ThreeFold and Holochain merges decentralized infrastructure with advanced application development frameworks. By combining the strengths of both platforms, this collaboration seeks to drive innovation and expedite the adoption of decentralized technologies.
+
+<br/>
+
+#### **How the Partnership Works**
+
+<br/>
+
+**Integration of Services:** ThreeFold's TF Grid will integrate with Holochain's framework, providing decentralized hosting and storage solutions for Holochain-based applications. This integration will enable developers to deploy their dApps on a scalable and resilient infrastructure, enhancing performance and reliability for end-users.
+
+<br/>
+
+**Benefits for Users:**
+
+- **Enhanced Performance:** Users of Holochain-based applications hosted on the TF Grid will experience improved performance and responsiveness, thanks to the scalable and distributed nature of ThreeFold's infrastructure.
+
+- **Increased Reliability:** By leveraging ThreeFold's decentralized hosting solutions, users will benefit from enhanced reliability and uptime for Holochain applications, reducing the risk of downtime and service interruptions.
+
+- **Data Sovereignty:** Users will have greater control over their data and digital assets, as Holochain applications hosted on the TF Grid will adhere to principles of data sovereignty and privacy.
+
+<br/>
+
+**Conclusion:** The partnership between ThreeFold and Holochain represents a strategic alignment of decentralized infrastructure and application development frameworks, aimed at empowering developers and users to build and deploy scalable, efficient, and resilient decentralized applications. By leveraging each other's strengths and capabilities, the partnership holds the promise of driving innovation and accelerating the adoption of decentralized technologies across various industries and use cases.
+
+<br/>
+
+For more information about Holochain, visit [Holochain](holochain.org).

content/support/index.md

@@ -19,7 +19,7 @@ insert_anchor_links: "left"
 Need help? We've got you covered. The support team is available Monday through Friday 08:00am - 12:00am CET. Click on the blue chat icon at the bottom of this page or follow the button below to talk to one of our support team members.
 
 <button>[Talk to a Human](https://threefoldfaq.crisp.help/en/)</button>
-<button>[Other Channels](/home#join-in)</button>
+<button>[Other Channels](/community)</button>
 
 {% end %}
 

css/index.css

@@ -48,7 +48,7 @@ img[src*="#icon"] {
 }
 
 img[src*="#social"] {
-  width: 100px;
+  width: 80px;
   margin: auto;
 }
 

templates/404.html

@@ -0,0 +1,20 @@
+{% extends "_default/base.html" %}
+
+{% block content %}
+
+<main class="container mx-auto text-center">
+
+<div class="lg:pt-20 pt-8">
+    <div>
+        <img class="w-64 md:w-80 mx-auto" src="/images/404_text.png" alt="404_image">
+    </div>
+    <div class="max-w-5xl mx-auto">
+     <h3 class="text-2xl md:text-5xl font-semibold">You seem to have ended up on <span class="blue">a missing page!</span></h3>
+     <p class="font-normal">This could mean that you’ve entered the wrong URL or you’ve clicked on content which has moved locations or is no longer live. If you need assistance, click on the blue chat icon at the bottom of the screen to speak with real humans on our support team. Or go back to <a href="/">home</a>.</p>
+    </div>
+  
+</div>
+
+</main>
+
+{% endblock content %}

templates/partials/header.html

@@ -40,7 +40,7 @@
                             {{link_label}}
                         </a>
                         {% endif %}
-                      {% elif current == current_url %}
+                      {% elif current_url and current == current_url %}
                           <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                             {{link_label}}
                           </a>
@@ -83,7 +83,7 @@
                       </a>
                     </li>
         
-                    <li class="ml-4">
+                    {# <li class="ml-4">
                       <a
                         href="javascript:;"
                         onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
@@ -105,7 +105,7 @@
                           ></path>
                         </svg>
                       </a>
-                    </li>
+                    </li> #}
                   </ul>
                   <div class="rounded-full border-2 mt-1 border-gray-400">
                     <a href="https://www.manual.grid.tf/documentation/threefold_token/buy_sell_tft/tft_lobstr/tft_lobstr_short_guide.html" target="_blank" class="mt-2">

templates/people/single.html

@@ -1,58 +1,54 @@
-{% extends "_default/base.html" %}
-{% block content %}
+{% extends "_default/base.html" %} {% block content %} {% set page_path =
+term.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/")
+%} {% set people = get_section(path="people/_index.md") %} {% set pages_str =
+people.pages | json_encode() | as_str %} {% if pages_str is
+containing(term.name) %} {% set page = get_page(path=page_path) %}
 
-{% set page_path = term.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %}
-{% set people = get_section(path="people/_index.md") %}
-{% set pages_str = people.pages | json_encode() | as_str %}
-{% if pages_str is containing(term.name) %}
-    {% set page = get_page(path=page_path) %}
-
-
-<div class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24">
+<div
+  class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24"
+>
   <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0">
     <div class="w-full md:w-1/6 mx-auto sm:mx-0">
-            <img src="{{page.extra.imgPath}}" alt="" class="aspect-[14/13] w-full rounded-2xl object-cover g-image g-image--lazy g-image--loaded my-4 lg:my-0">
+      <img
+        src="{{page.extra.imgPath}}"
+        alt=""
+        class="aspect-[14/13] w-full rounded-2xl object-cover g-image g-image--lazy g-image--loaded my-4 lg:my-0"
+      />
     </div>
     <div class="w-full md:w-5/6 text-center md:text-left md:pl-8">
       <div class="flex flex-row items-center lg:justify-start justify-center">
         <h2 class="pb-0 mb-0 mt-0 text-3xl font-normal tracking-wide my-1">
           {{page.title}}
         </h2>
-                <div class="ml-4">
-                    {% include "partials/socialLinks.html" %}
-                </div>
-            </div>
-            <div class="text-gray-700 my-4">
-                {{page.content | safe }}
+        <div class="ml-4">{% include "partials/socialLinks.html" %}</div>
       </div>
+      <div class="text-gray-700 my-4">{{page.content | safe }}</div>
       <div class="flex items-center">
         <div class="flex justify-between items-center">
           <ul class="list-none flex author-list m-0 py-2">
             {% for org in page.extra.organizations %}
             <li>
               <a href="">
-                                    <img src="" alt="">
+                <img src="" alt="" />
               </a>
             </li>
             {% endfor %}
           </ul>
         </div>
       </div>
-            {% if page.taxonomies.memberships %}
-            {% for tag in page.taxonomies.memberships %}
-                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 font-normal text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+      {% if page.taxonomies.memberships %} {% for tag in
+      page.taxonomies.memberships %}
+      <a
+        href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}"
+        class="border-1 font-normal text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
+      >
         {{tag}}
       </a>
-            {% endfor %}
-            {% endif %}
+      {% endfor %} {% endif %}
     </div>
   </div>
   <div class="my-8">
-        <hr/>
-        <br/>
-        <hr/>
+    <hr />
   </div>
 </div>
-{% endif %}
-
-{% endblock content %}
+{% endif %} {% endblock content %}

templates/shortcodes/grid_stats.html

@@ -5,7 +5,8 @@
             {{body | markdown | safe }}
             <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
                 <!-- capacity -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-08.png"
@@ -16,7 +17,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">capacity</span>
                 </div>
                 <!-- cores -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-11.png"
@@ -27,7 +29,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">cores</span>
                 </div>
                 <!-- Nodes -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-09.png"
@@ -38,7 +41,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">nodes</span>
                 </div>
                 <!-- countries -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/V3-10.png"
@@ -49,7 +53,8 @@
                     <span class="block text-md mt-4 font-normal capitalize">countries</span>
                 </div>
                  <!-- farms -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
                     <img
                         class="mx-auto p-4"
                         src="images/farm.png"
@@ -103,6 +108,49 @@
       background-color:#5596f5 !important;
     }
 
+ 
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 14px;
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: -60px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+@media (max-width: 480px) {
+    .tooltip .tooltiptext {
+        position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: 0px !important;
+    }
+
+}
+
+
 </style>