update features

content/_index.md

@@ -215,18 +215,30 @@ template = "index.html"
     feature_card(
         title="Decentralization", 
         description="Designed to operate in a decentralized manner, it connects nodes and enables efficient data transfer and communication without relying on a single central authority.", 
-        icon="/images/decentralization.svg") }}
+        icon="/images/decentralization.svg",
+        link="/about",
+        link_name="Learn More"
+) }}
+        
 
 
 {{ feature_card(
     title="Efficiency", 
     description="Mycelium provides an efficient digital communication network where data travels along the most efficient paths, reducing latency and optimizing resource utilization.", 
-    icon="/images/efficiency.svg") }}
+    icon="/images/efficiency.svg",
+    link="/about",
+    link_name="Learn More"
+    
+    ) }}
 
 {{ feature_card(
     title="Resilience", 
     description="Inspired by nature's resilience, it creates a network that can adapt and continue to function even in the presence of challenges, ensuring uninterrupted communication.", 
-    icon="/images/resilience.svg") }}
+    icon="/images/resilience.svg",
+    link="/about",
+    link_name="Learn More"
+
+    ) }}
 
 
 </div>

templates/shortcodes/feature_card.html

@@ -1,5 +1,6 @@
 {% set title = title | default(value="Feature") %}
 {% set description = description | default(value="") %}
+{% set link = link | default(value="") %}
 {% set icon = icon | default(value="") %}
 {% set bg_color = bg_color | default(value="bg-white") %}
 {% set hover_color = hover_color | default(value="hover:bg-gray-50") %}
@@ -13,7 +14,10 @@
   {% endif %}
   <h3 class="text-md font-medium">{{ title }}</h3>
   {% if description %}
-  <p class="mt-2 text-base">{{ description }}</p>
+  <p class="my-2 font-extralight">{{ description }}</p>
+  {% endif %}
+  {% if link %}
+  <a href="{{ link }}" class="text-sm font-semibold text-black hover:text-gray-700">{{ link_name }} <span aria-hidden="true">→</span></a>
   {% endif %}
   {% if caller %}
     <div class="mt-4">
@@ -21,3 +25,10 @@
     </div>
   {% endif %}
 </div>
+
+<style scop>
+
+  p{
+    font-weight: 200;
+  }
+</style>