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

templates/partials/action/action.html

@@ -17,7 +17,7 @@
            <!-- Right Blockquote -->
            <div class="lg:col-span-5">
             <figure class=" mt-6 pl-8">
-                <blockquote class=" text-2xl text-white fade-in font-semibold">
+                <blockquote class=" text-2xl text-white fade-in font-semibold ">
                     <p class="text-2xl text-white font-semibold">We believe actions are more important than words. <br><br>
                         This page is in black & white, to let YOU be the color of the future of the internet.
                     </p>
@@ -70,6 +70,14 @@
 }
 }
 
+blockquote {
+  border-left-width: 2px;
+  margin: .5rem;
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+  padding: .5rem;
+  padding-left: 1rem;
+
 .blockquote::before {
     content: open-quote;
     font-size: 4rem;

templates/partials/action/announcements.html

@@ -1,26 +1,26 @@
-<div class="bg-transparent fade-in pb-24 flex items-center justify-center min-h-screen">
+<div class="bg-transparent fade-in pb-24 flex items-center justify-center">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
         <div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
             <p class="fade-in mx-auto mb-12 text-pretty lg:text-4xl text-3xl font-medium text-gray-200">All Things Web 4</p>
         </div>
         <div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-3">
-            <div class="grid-item bg-white/5 p-6 sm:p-10">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
-                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Infrastructure</h2>
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Infrastructure</h2>
             </div>
-            <div class="grid-item bg-white/5 p-6 sm:p-10">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
-                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Phone & Routers</h2>
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Phone & Routers</h2>
             </div>
-            <div class="grid-item bg-white/5 p-6 sm:p-10">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
-                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Human + Machine Agents</h2>
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Human + Machine <br>Agents</h2>
             </div>
-            <div class="grid-item bg-white/5 p-6 sm:p-10">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
-                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Sovereign Digital Economic Zone</h2>
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Sovereign Digital <br>Economic Zone</h2>
             </div>
-            <div class="grid-item bg-white/5 p-6 sm:p-10">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
-                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Dev Tools</h2>
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Dev Tools</h2>
             </div>
-            <div class="grid-item bg-white/5 p-6 sm:p-10">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
-                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Digital Currency</h2>
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web 4 <br>Digital Currency</h2>
             </div>
         </div>
     </div>

templates/partials/action/banner.html

@@ -1,12 +1,12 @@
-<div class="pt-16 bg-transparent h-screen flex flex-col justify-start items-center">
+<div class="h-screen flex flex-col justify-center items-center ">
-    <div>
+    <div class="">
         <img 
-        class="object-contain w-[100%] max-w-[100%]" 
+        class="mx-auto" 
         src="/images/mycel2.gif" 
         alt="TF">
-    </div>
     <div class="text-center">
         <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Save the Date</h2>
         <p class="fade-in mx-auto mt-4 max-w-3xl text-pretty lg:text-4xl text-3xl font-medium text-gray-200 fade-in">12.12.24</p>
     </div>
 </div>
+</div>

templates/partials/header.html

@@ -2,9 +2,9 @@
 {% set header_items = section.content | safe | split(pat="<li>") %}
 
 <header id="header-container">
-    <div class="z-20 bg-black2 absolute w-full">
+    <div class="z-20 absolute w-full">
         <div class="relative z-50">
-        <div class="mx-auto container flex z-50 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 class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             <div>
                 <a href="{{get_url(path='/')}}" class="flex">
                     <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
@@ -113,8 +113,8 @@
             </div>
         </div>
         </div>
-{% for header_item in header_items %}
+                        {% for header_item in header_items %}
-{% if not loop.first %}
+                          {% if not loop.first %}
                               {% set header_arr = header_item | split(pat="</li>") %}
                               {% set header_label = header_arr[0] %}
                               {% set header_menu = header_arr[1] %}

templates/partials/home/farmers.html

@@ -2,15 +2,15 @@
   <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
     <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
       <h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">Powering the Grid Together</h2>
-      <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
+      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
         Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”. 
       </p>
 </div>
 <section class="pb-32 bg-transparent">
-  <div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
+  <div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
     <div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
-      <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+      <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
-        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
           <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
             1. HOST A NODE
           </dt>
@@ -20,7 +20,7 @@
             </p>
           </dd>
         </div>
-        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
           <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
             2. OFFER CAPACITY
           </dt>
@@ -31,7 +31,7 @@
             </p>
           </dd>
         </div>
-        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
           <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
             3. EARN REWARDS
           </dt>

templates/partials/home/features.html

@@ -1,6 +1,6 @@
 <div class="bg-transparent">
   <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
-    <div class="max-w-3xl px-16 pb-12">
+    <div class="max-w-3xl lg:px-16 px-0 pb-12">
       <h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">ThreeFold is the Infrastructure Layer of Web 4
       </h2>
       <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>

templates/partials/home/grid_stats.html

@@ -1,5 +1,5 @@
 <div class="bg-transparent relative isolate overflow-hidden py-12 mb-12">
-    <img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover">
+    <img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover md:block hidden">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <div class="mx-auto max-w-2xl lg:max-w-none">
         <div class="text-center">

templates/partials/solutions/what.html

@@ -1,6 +1,6 @@
 <div class="bg-transparent">
     <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
-      <div class="max-w-3xl px-16 pb-12">
+      <div class="max-w-3xl px-0 lg:px-16 pb-12">
         <h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
         </h2>
         <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>

templates/partials/why/impact.html

@@ -8,9 +8,9 @@
   
       <div class="mt-12 space-y-16">
         <div class="bg-transparent py-10">
-            <div class="mx-auto max-w-7xl px-6 lg:grid lg:items-center lg:grid-cols-12 lg:gap-x-8">
+            <div class="mx-auto max-w-7xl lg:grid lg:items-center lg:grid-cols-12 lg:gap-x-8">
               <!-- Text Section -->
-              <div class="lg:col-span-5 align-middle pr-4">
+              <div class="lg:col-span-5 align-middle pr-4 mb-4">
                 <h3 class="text-2xl font-medium text-white">OurWorld FreeZone</h3>
                 <p class="mt-2 text-base font-light text-gray-200 mx-auto pr-4">
                     ThreeFold is working with the Zanzibar Communication Corporation (ZICTIA), on behalf of the Zanzibar government, to create the world’s first 100% Digital Free Zone – accessible and affordable for all. <br><br>The announcement was made August 2023, and progress has been ongoing behind the scenes since then. 
@@ -20,7 +20,7 @@
               <!-- Image Section -->
               <div class="lg:col-span-7">
                 <img 
-                  src="/images/freezone.gif" 
+                  src="/images/freezone.png" 
                   alt="" 
                   class=" w-full rounded-lg bg-gray-100 object-fit">
               </div>
@@ -35,7 +35,7 @@
                 In January 2024, ThreeFold announced in collaboration with The ICT Commission of Tanzania and Holochain a collaboration to deploy sovereign Internet in Tanzania, along with the introduction of coding academies and innovation hubs. <br><br> The Dunia Yetu cooperative is being set up and efforts will ramp up in 2025.</p>
           </div>
           <div class="flex-auto lg:col-span-7 lg:col-start-1 lg:row-start-1">
-            <img src="/images/tanzania.gif" alt="" class="w-full rounded-lg bg-gray-100 object-fill">
+            <img src="/images/tanzania.png" alt="" class="w-full rounded-lg bg-gray-100 object-fill">
           </div>
         </div>
       </div>

templates/partials/why/reason.html

@@ -4,7 +4,7 @@
             <!-- Left Content -->
             <div class="lg:col-span-7">
                 <div class="mx-auto max-w-2xl lg:mx-0">
-                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">The Reason Behind It All</h1>
+                    <h1 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl">The Reason Behind It All</h1>
                     <p class="fade-in mt-6 text-lg font-light text-white">
                         The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
                         <br><br>

templates/partials/why/team.html

@@ -10,9 +10,9 @@
         <div class="mt-12 grid grid-cols-1 gap-x-4 lg:gap-y-10 lg:gap-x-8 lg:grid-cols-4 gap-y-0">
 
             <!-- Team Member -->
-            <div class="group relative fade-in">
+            <div class="group relative fade-in mb-8">
               <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                <img src="/images/kds.gif" alt="kristof_de_spiegeleer" class="size-full object-cover">
+                <img src="/images/kds.png" alt="kristof_de_spiegeleer" class="size-full object-cover">
               </div>
               <h3 class="mt-4 text-xl font-semibold text-white">
                   Kristof de Spiegeleer
@@ -23,9 +23,9 @@
             </div>
 
             <!-- Team Member -->
-              <div class="group relative fade-in">
+              <div class="group relative fade-in mb-8">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/adnan.gif" alt="adnan_fatayerji" class="size-full object-cover">
+                  <img src="/images/adnan.png" alt="adnan_fatayerji" class="size-full object-cover">
                 </div>
                 <h3 class="mt-4 text-xl font-semibold text-white">
                     Adnan Fatayerji
@@ -36,9 +36,9 @@
               </div>
 
                 <!-- Team Member -->
-              <div class="group relative fade-in">
+              <div class="group relative fade-in mb-8">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/jan.gif" alt="jan_de_landtsheer" class="size-full object-cover">
+                  <img src="/images/jan.png" alt="jan_de_landtsheer" class="size-full object-cover">
                 </div>
                 <h3 class="mt-4 text-xl font-semibold text-white">
                     Jan De Landtsheer
@@ -49,9 +49,9 @@
               </div>
                   
                     <!-- Team Member -->
-              <div class="group relative fade-in">
+              <div class="group relative fade-in mb-8">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/flo.gif" alt="florian_fournier" class="size-full object-cover">
+                  <img src="/images/flo.png" alt="florian_fournier" class="size-full object-cover">
                 </div>
                 <h3 class="mt-4 text-xl font-semibold text-white">
                     Florian Fournier