update header

content/about/index.md

@@ -5,7 +5,7 @@ insert_anchor_links: "left"
 ---
 <!-- section 1 (header) -->
 
-<div class="text-gray-900 bg-cover bg-no-repeat">
+<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
     <div class="h-full">
       <div class="flex flex-col items-center md:flex-row">
        <div class="w-full md:w-1/2">
@@ -22,8 +22,22 @@ insert_anchor_links: "left"
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 
+<div class="container mx-auto">
+
+{% row(style="header") %}
+
+![Image](about_header_geometric.png#mx-auto)
+
+|||
+
+## It All Started a Decade Ago
+
+When we saw how the Internet's existing infrastructure was becoming increasingly centralized, controlled by a handful of tech giants, and posed a threat to privacy and sovereignty, we knew it was time for a change. That's why we founded ThreeFold.
+
+
+{% end %}
 
 
 <!-- section 2 -->
@@ -159,24 +173,7 @@ Our mission is to realize the vision of a decentralized, self-sovereign digital
 ### <i>**"Never doubt that a small group of thoughtful, committed citizens <br> can change the world; indeed, it's the only thing that ever has."**</i> 
 ### - Margaret Mead
 
+</div>
+
 {% end %}
 
-<style>
-
-.bgtest{
-
-  background-image: url("checkerboard.png");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.bgtest2{
-
-  background-image: url("checker4.png");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-  
-  </style>

content/home/index.md

@@ -11,13 +11,13 @@ extra:
 
 <!-- section 1 (header) -->
 
-<div class="text-gray-900 bg-cover bg-no-repeat">
+<!-- <div class="text-gray-900 bg-cover bg-no-repeat">
     <div class="h-full">
       <div class="flex flex-col items-center md:flex-row">
        <div class="w-full md:w-1/2">
           <div class="block">
             <img
-                src="home/home_geometric_header.png" class="w-full h-full"/>
+                src="home/home_header_geometric.png" class="w-full h-full"/>
           </div>
         </div>
         <div class="flex flex-col items-start justify-center w-full lg:py-24 py-6 md:w-1/2">
@@ -29,7 +29,25 @@ extra:
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
+
+<div class="container mx-auto">
+
+{% row(style="header") %}
+
+![Image](home_header_geometric.png#mx-auto)
+
+|||
+
+## Decentralized. Autonomous. Internet Infrastructure.
+
+ThreeFold is a globally-distributed grid of storage, compute, and network capacity, acting as "no middleman" Internet resources between independent capacity providers and users.
+
+<button>[Get Started](#take_action)</button>
+
+{% end %}
+
+
 
 <!-- section 2 -->
 
@@ -79,6 +97,8 @@ Your digital life depends on hyperscale data centers controlled by a handful of
 
 {% end %}
 
+</div>
+
 <br>
 
 <br>
@@ -140,7 +160,7 @@ The stack was built around open-source and simplicity, and to be compatibile wit
 
 {% end %}
 
-{% row(style="center mtop narrow") %}
+{% row(style="center mtop narrow" id="take_action") %}
 
 ## Take Action Today
 

templates/shortcodes/row.html

@@ -83,6 +83,12 @@ Parameters:
         {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
     {% endif %}
 
+    <!-- makes row with margins -->
+    {% if "header" in style %}
+        {% set row_class = row_class ~ " h-screen" %}
+        {% set col_class = col_class ~ " m-4 lg:m-0" %}
+    {% endif %}
+
     {% if "mtop" in style %}
         {% set row_class = row_class ~ " lg:pt-28 pt-2" %}
         {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}