Merge branch 'development' of https://github.com/threefoldfoundation/www_threefold_io into development

content/home/index.md

@@ -301,13 +301,18 @@ Explore all the products that are driving this transformation.
 {{ accordion(
     id_accordion="accordion4"
     question="How can I get V4 nodes?",
-    description="Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes."
+    description="Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes.",
+    link="https://docs.threefold.io/docs/become-a-farmer/get_started/",
+    text_link="Click here to get V4 nodes."
 ) }}
 
 {{ accordion(
     id_accordion="accordion5"
     question="What can I do with the ThreeFold Grid?",
-    description="ThreeFold grid can be used to host any web2, web3 and future workload. For more details see our docs."
+    description="ThreeFold grid can be used to host any web2, web3 and future workload. For more details see ",
+    link="https://docs.threefold.io/docs/category/how-to-use/",
+    text_link="our docs."
+
 ) }}
 
 {{ accordion(

templates/shortcodes/accordion.html

@@ -1,6 +1,8 @@
 {% set question = question | default(value="") %}
 {% set id_accordion = id_accordion | default(value="") %}
 {% set description = description | default(value="") %}
+{% set link = link | default(value="") %}
+{% set text_link = text_link | default(value="") %}
 
 <div class="rounded-lg overflow-hidden my-2 border border-gray-500">
     <input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
@@ -11,9 +13,12 @@
         </svg>
     </label>
     <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
-        <div class="p-4">
+        <div class="p-4 flex">
             {% if description %} 
-            <p class="text-lg">{{ description }} </p>
+            <p class="text-lg">{{ description }}
+                {% if link %}
+            <a class="ml-1 text-white font-semibold"href="{{ link }}" target="_blank">{{ text_link }}</a> </p>
+            {% endif %}
             {% endif %}
         </div>
     </div>