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

content/header/index.md

@@ -9,7 +9,7 @@ extra:
 
 - [Why]("/about")
 - [What]("/solutions")
-- [12.12.24]("")
+- [12.12.24]("/action")
 - Info
 
 

content/newsroom/cloud_service_provider/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [tech,grid,community]
   news-category: [tech,grid,community]
 extra:
-    imgPath: cloud_service_provider.png
+    imgPath: cloud_provider_consumer.png
 ---
 
 Traditionally, we've been mere consumers of cloud services, relinquishing control over our data and infrastructure to large companies. However, with ThreeFold's autonomous technology, the paradigm shifts. Now, individuals can host their cloud infrastructure with ease, without the need for technical expertise.

content/newsroom/duniayetujan2024event/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [community, event, tech]
   news-category: [community, event, tech]
 extra:
-    imgPath: duniayetujan2024event.png
+    imgPath: dar_es_salaam_event.png
 ---
 
 This Friday, we are pleased to co-organize an event on "how to redefine the digital landscape in East Africa, empower coders, and build a self-reliant digital ecosystem for a better digital future," under the umbrella of [Dunia Yetu](https://forum.threefold.io/t/introducing-dunia-yetu/4147).

content/newsroom/endfeb2024update/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [community, farming, grid, collaboration, tech]
   news-category: [community, farming, grid, collaboration, tech]
 extra:
-    imgPath: endfeb2024update.png
+    imgPath: feb_update_team.png
 ---
 
 Follow the link below to find an update from the ThreeFold team!

content/newsroom/farmerbotupdatejan2024/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [community, grid, tech]
   news-category: [community, grid, tech]
 extra:
-    imgPath: farmerbotupdatejan2024.png
+    imgPath: new_farmerbot_update.png
 ---
 
 We are pleased to share the release of the [new version of the Farmerbot](https://forum.threefold.io/t/update-on-new-farmerbot/4203). Thanks to everyone in the community using Farmerbot, your feedback has led us to evolve the tool. 

content/newsroom/introducing_myceliium/index.md

@@ -10,7 +10,7 @@ taxonomies:
   tags: [community, tech]
   news-category: [community, tech]
 extra:
-  imgPath: mycelium.png
+  imgPath: mycelium_unveiled.png
 ---
 
 ThreeFold is implementing a planetary network, aiming to allow efficient, end-to-end encrypted communication with other participants on the network

content/newsroom/introducingtfrobot/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [community, grid, tech]
   news-category: [community, grid, tech]
 extra:
-    imgPath: introducingtfrobot.png
+    imgPath: tf_robot_introduction.png
 ---
 
  Meet tfrobot, designed to help you quickly deploy many VMs on the ThreeFold Grid at once.

content/newsroom/meeting_digital_demand_at_the_edge/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [tech,grid,community]
   news-category: [tech,grid,community]
 extra:
-    imgPath: meeting_digital_demand_at_the_edge.png
+    imgPath: meeting_digital_demand.png
 ---
 
 Edge computing offers a solution to traditional centralized cloud infrastructure challenges by processing data closer to its source. This approach reduces latency, conserves energy, and enhances bandwidth efficiency. By distributing processing tasks closer to the data source, edge computing improves scalability and efficiently handles increasing workloads. 

content/newsroom/minting_and_farming_rewards_updates/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [community, farming, grid, tech]
   news-category: [community, farming, grid, tech]
 extra:
-    imgPath: minting_and_farming_rewards_updates.png
+    imgPath: minting_farming_update.png
 ---
 
 We're excited to announce the release of a new Grid Enhancement Proposal (GEP). This proposal is shaped by insightful feedback we've received from the community. Our aim with this proposal is to bolster the reliability and fairness of the ThreeFold Grid, while ensuring fair value is achieved for all participants.

content/newsroom/minting_farming_vote_passes/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [tech,grid,community]
   news-category: [tech,grid,community]
 extra:
-    imgPath: minting_farming_vote_passes.png
+    imgPath: minitin_farming_rewards_passes.png
 ---
 
 The recent vote on minting and farming rewards has been completed and was successful, with ±75% of the votes cast as "yes." The timing of implementation is to be determined and will be communicated. 

content/newsroom/review_2023_2024/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [community, farming, grid, tech]
   news-category: [community, farming, grid, tech]
 extra:
-    imgPath: review_2023_2024.png
+    imgPath: 2023_2024.png
 ---
 
 

content/newsroom/social_network_mega_space/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [community, collaboration, tech]
   news-category: [community, collaboration, tech]
 extra:
-    imgPath: social_network_mega_space.png
+    imgPath: x_space_social_network.png
 ---
 
 Join the Social Network Mega Space at 5pm UTC.

content/newsroom/tf_ecosystem_comes_alive/index.md

@@ -9,7 +9,7 @@ taxonomies:
   tags: [tech,grid,community]
   news-category: [tech,grid,community]
 extra:
-    imgPath: tf_ecosystem_comes_alive.png
+    imgPath: tf_ecosystem_alive.png
 ---
 
 As we enter the next phase of ThreeFold, the project moves into an even greater level of decentralization, with layers being introduced to make us – and our grid – more resilient and reliable.

templates/layouts/action.html

@@ -2,6 +2,8 @@
 {% block content %}
 
 {% include "partials/action/banner.html" %}
-{% include "partials/action/hero.html" %}
+{% include "partials/action/announcements.html" %}
+{% include "partials/action/action.html" %}
+{% include "partials/action/cta.html" %}
 
 {% endblock content %}

templates/partials/action/action.html

@@ -0,0 +1,95 @@
+<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="relative grid lg:grid-cols-12 lg:gap-8">
+            <!-- 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">When 3 Becomes 4</h1>
+                    <p class="fade-in mt-6 text-lg font-light text-white">
+                    The Internet is a Trillion USD business and we want to make sure this Internet is built and owned by all of us—An Internet created by Everyone for Everyone. <br><br>
+                    Web4 is the logical evolution of the Internet and opens the door for Machines & Humans to create together a new form of Intelligence with respect for the Planet & People.<br><br>
+                    ThreeFold has been working on this vision for more than 10 years <br><br>
+                    and is now ready to announce our next steps on December 12, 2024. 
+                    </p>
+                </div>
+            </div>
+
+           <!-- Right Blockquote -->
+           <div class="lg:col-span-5">
+            <figure class=" mt-6   pl-8">
+                <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>
+                </blockquote>
+                <br>
+                <div class="inline-flex blinking-effect items-center gap-2 fade-in ">
+                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0,0,256,256" style="cursor: pointer;">
+                        <g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+                            <g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
+                                <path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
+                            </g>
+                        </g>
+                    </svg>
+                    <a href="action.html" class="text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl">12.12.2024</a>
+                </div>                                   
+            </figure>
+        </div>
+    </div>
+</div>
+</div>
+
+
+
+
+
+<style>
+ /* Apply the blinking animation to the link */
+ .blinking-effect {
+  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
+0% {
+  opacity: 1;
+}
+50% {
+  opacity: 0.4;
+}
+100% {
+  opacity: 1;
+}
+}
+
+.blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+}
+
+.inline-flex {
+display: flex;
+align-items: center;
+}
+
+.items-center {
+justify-content: center;
+}
+
+.gap-2 {
+gap: 0.5rem; /* Adjust the gap size as needed */
+}
+
+</style>

templates/partials/action/announcements.html

@@ -0,0 +1,59 @@
+<div class="bg-transparent fade-in pb-24 flex items-center justify-center min-h-screen">
+    <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">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Infrastructure</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Phone & Routers</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Human + Machine Agents</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Sovereign Digital Economic Zone</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Dev Tools</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Digital Currency</h2>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // JavaScript to control the blinking effect
+    const items = document.querySelectorAll('.grid-item');
+    let currentIndex = 0;
+
+    function blinkItem() {
+        // Remove the 'blink' class from all items
+        items.forEach(item => item.classList.remove('blink'));
+
+        // Add the 'blink' class to the current item
+        items[currentIndex].classList.add('blink');
+
+        // Move to the next item in a clockwise manner
+        currentIndex = (currentIndex + 1) % items.length;
+    }
+
+    // Start the blinking effect
+    setInterval(blinkItem, 1000); // Change every second
+</script>
+
+<style>
+    /* CSS for the blinking effect */
+    .blink {
+        animation: blink-animation 1s infinite;
+    }
+
+    @keyframes blink-animation {
+        0%, 100% { background-color: rgba(255, 255, 255, 0.1); }
+        50% { background-color: rgba(255, 255, 255, 0.5); }
+    }
+</style>

templates/partials/action/banner.html

@@ -1,9 +1,12 @@
-<div class="bg-transparent pt-32 flex justify-center items-center">
+<div class="pt-16 bg-transparent h-screen flex flex-col justify-start items-center">
-    <div class="mx-auto max-w-7xl px-4 lg:px-6">
+    <div>
         <img 
-        class="object-contain w-full lg:w-[100%] max-w-[100%]" 
+        class="object-contain w-[100%] max-w-[100%]" 
-        src="images/gif2.gif" 
+        src="/images/mycel2.gif" 
         alt="TF">
     </div>
-  </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>

templates/partials/action/cta.html

@@ -0,0 +1,54 @@
+<div class="bg-transparent">
+    <div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
+      <h2 class="lg:text-balance leading-tight text-left items-start  font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
+        Become the Color<br/>
+        of the Future of Internet <br/>on 12.12.2024.
+      </h2>
+      <div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
+        <a href="https://t.me/threefoldnews" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Telegram
+        </a>
+        <a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Newsletter
+        </a>
+      </div>
+    </div>
+</div>
+
+<style>
+  .bg-black {
+    background-color: #000;
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 4s ease-in-out forwards;
+  }
+
+  h2 {
+    animation-delay: 0.5s;
+  }
+
+  p {
+    animation-delay: 1s;
+  }
+
+  .blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+  }
+
+
+</style>

templates/partials/cta.html

@@ -0,0 +1,14 @@
+<div class="bg-transparent">
+    <div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
+      <h2 class="lg:text-balance text-left items-start  font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
+        Build the <br>Internet of Tomorrow, <br>Today.
+      </h2>
+      <div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
+        <a href="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Dive Deeper
+        </a>
+        
+      </div>
+    </div>
+</div>
+

templates/partials/header.html

@@ -107,7 +107,7 @@
                       </a>
                     </li> 
                   </ul> #}
-                    <a href="https://marketplace.3node.global/index.php?dispatch=companies.catalog" target="_blank" class=" rounded-2xl bg-white px-4 py-1 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 hover:text-gray-800">Get 3Nodes</a>
+                    <a href="https://docs.threefold.io/docs/nodes/get_nodes" target="_blank" class=" rounded-2xl bg-white px-4 py-1 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 hover:text-gray-800">Get 3Nodes</a>
                 </div>
               </div>
             </div>