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

content/home/_index.md

@@ -0,0 +1,3 @@
+---
+template: "index.html"
+---

content/home/partenerships/_index.md

@@ -0,0 +1,3 @@
+---
+transparent: true
+---

content/home/partenerships/partner1/index.md

@@ -0,0 +1,11 @@
+---
+title: "Expand the People’s Internet"
+
+extra:
+    subtitle: "and earn TFT"
+    button: Become a Farmer
+    link: /farm
+    imgPath: become_farmer_new.jpg
+---
+
+By connecting hardware at your home or office, support the growth of a decentralized Internet and earn a new digital currency, TFT.

content/home/partenerships/partner2/index.md

@@ -0,0 +1,11 @@
+---
+title: DECENTRALIZE YOUR
+
+extra:
+    subtitle: "DATA AND WORKLOADS"
+    imgPath: network_new.jpg
+    button: Deploy
+    link: /cloud
+---
+
+Companies and developers have already started using ThreeFold for it’s autonomous, decentralization and privacy features.

templates/index.html

@@ -1,8 +1,19 @@
 {% extends "_default/base.html" %}
 {% block content %}
-
+<style>
+    .container-fluid {
+        width: 100%;
+        /* padding-right: 15px;
+        padding-left: 15px; */
+        margin-right: auto;
+        margin-left: auto;
+      }
+</style>
 <!-- Landing page template, has a banner and rows of page summaries -->
 <main>
-    {{section.content | safe}}
+    <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
+
+        {% include "partials/partnerships.html" %}
+    </div>
 </main>
 {% endblock content %}

templates/partials/header.html

@@ -1,15 +1,13 @@
 {%- set section = get_section(path="header/_index.md") %}
 {% set header_items = section.content | safe | split(pat="<li>") %}
-{% set base = config.base_url %}
-{% set logo_path = base ~ '/' ~ section.extra.logoPath %}
 
 <header id="header-container">
     <div class="z-10 bg-white fixed w-full top-0">
         <div class="relative z-50 shadow">
         <div class="mx-auto flex z-50 shadow justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             <div>
-                <a href="{{base}}" class="flex">
-                    <img class="w-20 h-auto sm:w-15" style="max-width: none;" src="{{logo_path}}" alt="ThreeFold Logo" />
+                <a href="{{get_url(path='/')}}" class="flex">
+                    <img class="w-20 h-auto sm:w-15" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
                 </a>
             </div>
             <div class="-mr-2 -my-2 lg:hidden">
@@ -40,13 +38,8 @@
                     <a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                         {{link_label}}
                     </a>
-                    {% elif base is containing("www_threefold_io") %}
-                    {% set path = base ~ link_path[1] %}
-                    <a href="{{path}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                      {{link_label}}
-                    </a>
                     {% else %}
-                    <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                    <a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                       {{link_label}}
                     </a>
                     {% endif %}
@@ -110,9 +103,8 @@
                   </ul>
                   <div class="rounded-full border-2 mt-1 border-gray-400">
                     <a href="https://gettft.com/gettft/" target="_blank" class="mt-2">
-                      {% set btn_path = base ~ section.extra.button_Path %}
                       <img
-                        src="{{ btn_path }}"
+                        src="{{ get_url(path=section.extra.button_Path) }}"
                         class="mr-5"
                         style="max-width: none;"
                         alt=""
@@ -174,13 +166,8 @@
                                 <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                     {{link_label}}
                                 </a>
-                                {% elif base is containing("www_threefold_io") %}
-                                {% set path = base ~ link_path[1] %}
-                                <a href="{{path}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
-                                    {{link_label}}
-                                </a>
                                 {% else %}
-                                <a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                     {{link_label}}
                                 </a>
                                 {% endif %}
@@ -203,7 +190,7 @@
                     {%- set logoPath = section.extra.logoPath %}
                     <div class="mx-8 mt-8">
                         <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
-                          <img class="w-32 h-auto" src="{{logoPath}}" alt="Company name" />
+                          <img class="w-32 h-auto" src="{{get_url(path=logoPath)}}" alt="Company name" />
                           <p class="text-gray-500 text-base leading-6 ">
                             {{section.description}}
                           </p>

templates/partials/partnerships.html

@@ -0,0 +1,77 @@
+{% set home = get_section(path="home/_index.md") %}
+
+<style>
+    .bg-gray {
+        background-color: #f2f2f2
+    }
+</style>
+
+{% if current_path == '/' %}
+
+<div class="
+  max-w-screen-2xl
+  mx-auto
+  py-12
+  text-center
+  sm:px-6
+  lg:px-8
+  lg:py-20
+">
+    <div class="space-y-12">
+        <div class="mx-auto grid-cols-2 sm:grid sm:grid-cols-1 lg:grid-cols-2">
+            {% for page in home.pages %}
+            <div class="my-5 mx-5 pt-10 bg-gray">
+                <div class="space-y-2">
+                    <div class="text-lg font-medium space-y-1">
+                        <h2 class="h2 uppercase leading-tight font-light">
+                            {{ page.title }}
+                            <span class="block font-bold"> {{ page.extra.subtitle }}</span>
+                        </h2>
+                        <div class="mx-auto text-xl px-5 mb-5">{{ page.content | safe }}</div>
+                    </div>
+                    {% if page.extra.button %}
+                    <div>
+                        {% if page.extra.button is containing('http') %}
+                        <a target="_blank" href="{{page.extra.link}}" class="
+              inline-block
+              lg:text-lg
+              learn-button
+              hover:bg-gray-400
+              px-12
+              py-1
+              mr-5
+              my-10
+              border-2
+              shadow
+              border-black
+              capitalize
+            ">{{ page.extra.button }}</a>
+                        {% else %}
+                        <a href={{get_url(path=page.extra.link)}} class="
+              inline-block
+              lg:text-lg
+              learn-button
+              hover:bg-gray-400
+              px-12
+              py-1
+              mr-5
+              my-10
+              border-2
+              shadow
+              border-black
+              capitalize
+            ">{{ page.extra.button }}</a>
+                        {% endif %}
+                    </div>
+                    {% endif %}
+                </div>
+                {% set url = get_url(path='/' ~ page.relative_path |
+                replace(from='index.md', to=page.extra.imgPath)) %}
+
+                <img class="mx-auto w-full" src="{{url}}" />
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endif %}

templates/shortcodes/button.html

@@ -1,5 +1,3 @@
-{% set base = config.base_url %}
-
 {% set path = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"')
 | trim_end_matches(pat='"') %}
 
@@ -9,22 +7,8 @@
     {{ body | trim_start_matches(pat="<p>") | safe}}
 </button>
 
-{% elif base is containing("www_threefold_io") %}
-{% set btn_path = base ~ path %}
-<button onclick="if(event.preventDefault) event.preventDefault(); window.location='{{btn_path}}'"
-    class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
-    {{ body | trim_start_matches(pat="<p>") | safe}}
-</button>
-
-{% elif path is starting_with("/") %}
-{% set btn_path = base ~ path %}
-<button onclick="if(event.preventDefault) event.preventDefault(); window.location='{{btn_path}}'"
-    class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
-    {{ body | trim_start_matches(pat="<p>") | safe}}
-    </button>
-
 {% else %}
-<button onclick="window.location='{{path}}'"
+<button onclick="window.location={{get_url(path=path)}}"
     class="leading-6 border-transparent flex flex-col border-2 w-full items-start rounded transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
     {{ body | trim_start_matches(pat="<p>") | safe}}
 </button>