ui alternative using shortcodes

content/_index.md

@@ -9,86 +9,85 @@ extra:
   imgPath: /images/threefold_globe.png
 ---
 
-{% row() %}
+{% row(style="center narrow") %}
 
-# Reimagine your world
+## WELCOME TO THE <br> **PEOPLE’S INTERNET**
 
-<br/>
+### Join the peer-to-peer revolution
 
-Through simple, secure, and scalable technology,
+Powered by the ThreeFold blockchain the People’s Internet is the layer 0 infrastructure for an open source P2P Internet owned by humanity.
-OurWorld empowers millions to invent and explore
-new experiences. Business, creativity, and
-community are being reimagined for a more
-sustainable and inclusive future.
-
-|||
-
-![Image](/images/ourworld_mycellium.png#large)
 
 {% end %}
 
 {% row(style="lean") %}
 
-![Image](/images/threefold_img2.png)
+![Image](/images/threefold_img.jpg)
 
 {% end %}
 
-{% row() %}
+{% row(style="center") %}
 
-## Foundation for Creation
+### EXPAND THE PEOPLE’S INTERNET <br> AND EARN TFT
 
-<br>
+By connecting hardware at your home or office, support the growth of a decentralized Internet and earn a new digital currency, TFT.
 
-The Creator Economy requires robust infrastructure
+<button>[Become a farmer](/become-farmer)</button>
-including a set of intuitive developer tools, and an
-engaged, decentralized community.
 
-<br>
+![Image](/images/become_farmer_new.jpg)
-
-[Learn about the Creator Economy on OurWorld]("/")
 
 |||
 
-![Image](/images/threefold_globe.png#large)
+### DECENTRALIZE YOUR
+
+### DATA AND WORKLOADS
+
+Companies and developers have already started using ThreeFold for it’s autonomous, decentralization and privacy features.
+
+<button>[Deploy](/deploy)</button>
+
+![Image](/images/network_new.jpg)
 
 {% end %}
 
-{% row() %}
+{% row(style="center") %}
 
-## Solutions for Scaling
+![Image](/images/p4p_new.png#medium)
-
-<br>
-
-OurWorld is eliminating the barriers to Web 3
-adoption. With high speeds, low fees, and
-progressive UX, OurWord climate-neutral
-blockchain is ready for explosive growth.
-
-<br>
-
-[Link to something]("/")
 
 |||
 
-![Image](/images/landing_img2.jpg#large)
+## BUILT BY <br> THE PEOPLE <br> FOR HUMANITY
+
+The People’s Internet is formed by independent people from all around the world who connect Internet capacity to a new Planetary Network. Together they form a collective that brings a new paradigm – an open-source peer-to-peer Internet owned by humanity.
+
+<button>[Learn More](/learn-more)</button>
 
 {% end %}
 
-{% row() %}
+{% row(style="center") %}
 
-## For a multi-chain future
+## POWERED BY A
 
-<br>
+## DECENTRALIZED OS
 
-OurWorld runs in concert with Ethereum, Polkadot, Cosmos, and more, allowing for the free flow of assets and communication between networks for the betterment of all.
+Zero-OS is a stateless and lightweight operating system designed to host anything that runs on Linux in a decentralized way. Once installed, Zero-OS locks the hardware and dedicates its capacity to the People’s Internet via the ThreeFold Blockchain.
 
-<br>
+<button>[Learn More](/learn-more)</button>
-
-[Link to something]("/")
 
 |||
 
-![Image](/images/threefold_technology_home.jpg)
+![Image](/images/zero_os.jpg#large)
+
+{% end %}
+
+{% row(style="center moderate") %}
+
+## OUR GREATEST STRENGTH <br> COMES FROM OUR PARTNERS
+
+We are truly proud to be trusted by some of the biggest names in the industry.
+
+![Image](/images/ourpartners.png)
+
+<button>[Check All Partners](/learn-more)</button>
 
 {% end %}
 

css/index.css

@@ -30,7 +30,7 @@ img[src*="#small"] {
 }
 
 img[src*="#medium"] {
-  width: 150px;
+  width: 250px;
   margin: auto;
 }
 
@@ -75,6 +75,9 @@ img[src*="#large"] {
   li li {
     @apply text-sm lg:text-sm font-light;
   }
+  button a {
+    @apply inline-block lg:text-lg hover:bg-gray-400 px-12 py-1 mr-5 my-10 border-2 shadow border-black capitalize;
+  }
 }
 
 button:hover :is(:where(a)) {

templates/shortcodes/row.html

@@ -10,40 +10,48 @@ Parameters:
 -->
 
 {% set columns = body | safe | markdown | split(pat="|||") %}
-{% set classes =  "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-12 lg:py-16"%}
+{% set row_class =  "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-12 lg:py-16"%}
 
 <!-- aligns columns depending on col number-->
 {% if 2 < columns | length %}
-    {% set classes = classes ~ " lg:items-start" %}
+    {% set row_class = row_class ~ " lg:items-start" %}
 {% else %} 
-    {% set classes = classes ~ " lg:items-center" %}
+    {% set row_class = row_class ~ " lg:items-center" %}
 {% endif %}
 
-{% set column_classes = "flex-1 mb-8 md:mb-0 md:mx-8" %}
+{% set col_class = "flex-1 mb-8 md:mb-0 md:mx-8" %}
-
 
 {% if style %}
 
-    <!-- makes row full screen width, strips margins -->
+    {% if "center" in style %}
-    {% if "lean" in style %}
+        {% set row_class = row_class ~ " text-center mx-auto justify-center" %}
-        {% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
+        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
-        {% set column_classes = "flex-1 m-4 lg:m-0" %}
     {% endif %}
 
-    {% if "center" in style %}
+    <!-- makes row full screen width, strips margins -->
-        {% set classes = classes ~ " text-center" %}
+    {% if "lean" in style %}
+        {% set row_class = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
+        {% set col_class = "flex-1 m-4 lg:m-0" %}
     {% endif %}
 
+        <!-- makes row full screen width, strips margins -->
+    {% if "narrow" in style %}
+        {% set row_class = row_class ~ " lg:max-w-3xl" %}
+    {% elif "moderate" in style %}
+        {% set row_class = row_class ~ " lg:m-20" %}
+    {% endif %}
+
+
 {% endif %}
 
 <!-- makes row full screen width and adds background img -->
 {% set styles = ""  %}
 {% if bgPath %}
     {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover"  %}
-    {% set classes = classes ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
+    {% set row_class = row_class ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
 {% endif %}
 
-<div class="{{classes}}" style="{{styles}}">
+<div class="{{row_class}}" style="{{styles}}">
     {% for column in columns%} 
 
         <!-- Hides empty columns if displayed vertically in small screen -->
@@ -53,7 +61,7 @@ Parameters:
             </div>
 
         {% else %}
-            <div class="{{column_classes}}">
+            <div class="{{col_class}}">
                 <!-- handles mermaid markdown content display -->
                 {% if "{% mermaid() %}" in column %}
                     {% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
@@ -65,7 +73,6 @@ Parameters:
                     {{ column | safe }}
                 {% endif %}
             </div>
-            
         {% endif %}
     {% endfor %}
 </div>