ok

content/hero/cta/index.md

@@ -15,7 +15,7 @@ id: cta
 
 <p>By eliminating the need for centralized servers, Hero allows you to be the only central point of data accumulation, communication and execution of digital capabilities.</p>
 
-
+<br>
 
 <div class="border-t border-gray-200 dark:border-gray-700">
 </div>
@@ -27,3 +27,50 @@ id: cta
 
 
 {% end %}
+
+<!-- section 4 (header) -->
+
+<div class="container mx-auto"> 
+
+{% row(style="center" margin="hero" padding="bottom") %}
+
+## Why Join Hero
+
+<p>Hero is designed to benefit everyone by offering a new internet where members can engage in a community dedicated to inclusivity and growth.</p>
+
+{% end %}
+
+{% row(style="center" margin="narrow" padding="bottom") %}
+
+<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6  shadow-md">
+
+![Image](img/hero1.svg#4col)
+
+#### Inclusivity
+<h6>Everyone gains equal network access with no barriers to entry.</h6>
+
+</div>
+
+|||
+
+<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
+
+![Image](img/hero2.svg#4col)
+
+#### Sovereignty
+<h6>Only you have control of your data and decide who has access to it.</h6>
+</div>
+
+|||
+
+<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
+
+![Image](img/hero3.svg#4col)
+
+#### Equality
+<h6>Anyone can attain the opportunity to earn and to better their lives.</h6>
+
+</div>
+
+{% end %}
+