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

content/blog/roadmap_to_web4/index.md

@@ -0,0 +1,111 @@
+---
+id: roadmap_to_web4
+title: "ThreeFold's Roadmap to Web4"
+image_caption: Roadmap to Web4
+description: Web4. Where humans and AI collaborate to develop a new paradigm aimed at advancing planetary well-being.
+date: 2024-12-12
+taxonomies:
+  people: [sam_taggart]
+  tags: [community, decentralization, farming, grid, cloud]
+  categories: [community, decentralization, farming, grid, cloud]
+extra:
+    imgPath: roadmap_to_web4.png
+    isFeatured: true
+---
+
+### **Part I: A Natural Evolution**
+
+The story of the Internet is one of ongoing evolution.
+
+<br>
+
+It began in the 1960s and 70s with a decentralized dream. Researchers and early pioneers built networks where computers communicated directly – peer-to-peer. There were no gatekeepers, no central authorities. Just nodes of people and their computers, freely exchanging data. This was the foundation for what we now call the Internet.
+
+<br>
+
+But as the Internet grew in the 90s, things started to change. The scrappy network of computers connected in an ad hoc manner started becoming an economic arena. Companies built platforms, services, and hubs. Massive infrastructure emerged to support this growth — hyperscale data centers, global fiber-optic networks, and powerful servers. The world logged on, and the web became commercialized.
+
+<br>
+
+This was Web 1.0 – static pages and basic information sharing. Then came Web 2.0 – the age of social media, cloud computing, and user-generated content, which makes up the vast majority of our shared digital lives. Connection became easier, but power was consolidated. Big platforms have taken ownership of our data and control our experiences.
+
+<br>
+
+In response, a new idea emerged – Web 3.0. Decentralized technologies like blockchain aimed to give control back to users. But Web3 is still finding its way, grappling with scalability, accessibility, and adoption.
+
+<br>
+
+And now, with the introduction of AI, we stand at the dawn of Web 4.0, the next evolution of the Internet. Web 4.0 is an agent-centric model, also sometimes referred to as the symbiotic web. In Web 4.0, we’ll interact both with humans and with virtual AI agents, our digital counterparts. These agents will  be able to help with everything, from organizing our days to navigating our online presence.
+But here’s the catch – if we stay on the current path, these agents and the powerful intelligence systems behind them won’t belong to us. They’ll be owned – just like our data is today – by someone else. Web 4.0 will be no different than what we’ve had in the past.
+
+<br>
+
+This isn’t just about data anymore, it’s about intelligence itself. It's about the future of our species and the planet. The question is: will we seize the opportunity to create something new – a decentralized network of augmented, collective intelligence.
+
+<br>
+
+This vision is what *we* call Web4.
+
+### **Part II: Our Web4 Vision**
+
+Web4. Where humans and AI collaborate to develop a new paradigm aimed at advancing planetary well-being. To our knowledge, we are the world’s first project approaching a fully functional Web4 infrastructure. But what does a Web4 infrastructure look like?
+
+<br>
+
+A Web4 infrastructure is built on three essential layers: personal, infrastructure, and physical.
+
+<br>
+
+At the heart of Web4 is the individual – you. The personal level involves an AI assistant, your digital counterpart, which manages your digital life and is owned fully by you. An identity layer ensures reputation and authenticity of information, an intelligence layer brings decentralized personal AI systems for smarter collaboration and decision-making. And a transaction layer integrates seamlessly with Web3 systems and beyond for secure and efficient transactions.
+
+<br>
+
+Next is the infrastructure layer, the backbone of Web4. This layer re-imagines how the Internet works. The network layer delivers private, scalable communication. The data layer revolutionizes how we store, share, and control data. Serverless compute resources allow applications to run closer to users and their data, improving speed and performance. And the cloud layer bridges today’s Web2 systems with a Web4 future, ensuring everything works together.
+
+<br>
+
+Finally, the physical layer brings Web4 into the real world. Routers act as gateways between the old web and the new, creating secure, next-generation communication channels. Nodes power the ecosystem by delivering AI, data, and compute capabilities. Phones become more than just a device, they are your portal into Web4, and capable of building meshed networks for better connectivity. And any modern desktop running Linux, Windows, or MacOS integrates seamlessly into this new ecosystem.
+
+<br>
+
+This vision may seem bold, but at ThreeFold, we are well on our way to making it a reality. Over the past decade, we have tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security. A working proof of concept infrastructure grid is alive today thanks to the ThreeFold developers and a global community.
+
+<br>
+
+Today, we are pleased to announce the next step in the roadmap to Web4: Web4 Node, Web4 Phone, and Web4 Router.
+
+### **Part III: The Journey Begins**
+
+Today, we are pleased to announce the next step in the roadmap to Web4: V4 3Node, 3Phone equipped with 3Bot technology, and 3Router.
+
+<br>
+
+**3Nodes** are a familiar concept in the ThreeFold ecosystem, now also entering their fourth generation. Nodes provide capacity to the network, and in exchange generate rewards. Today, in collaboration with ThreeFold community vendors HostServiceNL in Europe and DuckFarmData in North America, we are announcing three different models of the V4 3Node. You can find more info and how to place orders [here](https://docs.threefold.io/docs/become-a-farmer/get_started).
+
+<br>
+
+**[3Phones](https://docs.threefold.io/docs/components/3phone)** are a portal into the Web4 world. We are pleased to share that we will be offering several models of 3Phones into the market based on the [Volla Phone](https://volla.online/en/) platform. 3Phones will be equipped with your own decentralized AI agent called **[3Bot](https://docs.threefold.io/docs/components/3bot)**. You can pre-order a 3Phone [here](https://threefold.io/signup).
+
+<br>
+
+And then there are **[3Routers](https://docs.threefold.io/docs/components/3router)**. Routers ensure that Web4 devices (phones and desktops running Mycelium) can communicate with one another – peer-to-peer, private, and secure. 3Routers will be available next year, and you can express your interest [here](https://threefold.io/signup).
+
+<br>
+
+<iframe width="896" height="504" src="https://www.youtube.com/embed/Z3TRrwxOIz0?si=fCnX1D1uHnU4k411" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+<br>
+
+Now, we need more than technology – we need pioneers, thinkers, and creators to help expand the Web4 ecosystem. Whether you contribute as a developer, a node operator, or via any other role, your participation is crucial. We need to bring millions of nodes, routers, and phones into the ecosystem. This is the next step in our journey.
+
+<br>
+
+The future of the Internet is being written today, and Web4 is the next chapter – a chapter where control, collaboration, and innovation belong to everyone. But this isn’t just our journey – it’s yours too. Together, we can build a smarter, more equitable digital world, where AI and humans work side by side to solve our greatest challenges.
+
+<br>
+
+Will you join us in realizing this vision?
+
+<br>
+
+Today we make these announcements to our incredible community, so you can provide your feedback and be amongst the first to register. In the coming weeks, after the new year, we will begin to spread this vision further. And this is only the beginning of our Web4 journey. Every three months, on 03.03, 06.06, 09.09, and 12.12 of next year we will continue to unveil major aspects of the Web4 vision. Of course there will be plenty of discussion and updates as we go, as well. Stay tuned.

content/header/index.md

@@ -9,7 +9,7 @@ extra:
 
 - [Why]("/why")
 - [What]("/what")
-- [12.12.24]("/action")
+- [Take Action]("/action")
 - Info
 
 
@@ -37,9 +37,9 @@ extra:
 
 <button class="dropdown" onclick="openInNewTab('https&#58;//docs.threefold.io/docs/introduction')">
 
-[More Info](https://docs.threefold.io/docs/introduction)
+[Docs](https://docs.threefold.io)
 <br>
-<p class="text-sm">Go here first.</p>
+<p class="text-sm">V4 Documentation</p>
 
 </button>
 
@@ -47,9 +47,9 @@ extra:
 
 <button class="dropdown" onclick="openInNewTab('https&#58;//manual.grid.tf/')">
 
-[Documentation](https://manual.grid.tf/)
+[Manual](https://manual.grid.tf/)
 <br>
-<p class="text-sm">Explore the Documentation (big)</p>
+<p class="text-sm">V3 Documentation</p>
 
 </button>
 

content/newsroom/315_live/index.md

@@ -10,6 +10,7 @@ taxonomies:
   news-category: [tech,grid,community]
 extra:
     imgPath: 315_live.png
+    isFeatured: true
 ---
 
 We are pleased to announce that ThreeFold's mainnet has now been upgraded to version 3.15. A few notes:

content/newsroom/315_mainnet_release/index.md

@@ -1,8 +1,8 @@
 ---
 id: 315_mainnet_release
-title: 🗳 Vote- Bring TF Grid 3.15 to Mainnet
+title: "Vote: Bring TF Grid 3.15 to Mainnet"
 image_caption: 315_mainnet_release
-description:  Calling all farmers to vote on the GEP to bring grid version 3.15 to mainnet! 
+description: Calling all farmers to vote on the GEP to bring grid version 3.15 to mainnet! 
 date: 2024-11-06
 taxonomies:
   people: [bernadette_amanda_caster]
@@ -14,10 +14,9 @@ extra:
 
 We are currently testing TF Grid version 3.15 on testnet and preparing to release on mainnet. Farmers, please vote by Tuesday November 12th at 10am CET on the [dashboard](https://dashboard.grid.tf/) under ‘TFChain - DAO.'
 
-
 <br/>
 
-Read the details of this GEP and the release [here] (https://forum.threefold.io/t/gep-tf-grid-mainnet-release-3-15/4435).
+Read the details of this GEP and the release [here](https://forum.threefold.io/t/gep-tf-grid-mainnet-release-3-15/4435).
 
 <br/>
 

content/newsroom/demo_grid_server/index.md

@@ -1,8 +1,8 @@
 ---
 id: 315_mainnet_release
-title: Our Next Demo- Introduction to grid_http_server
+title: "Our Next Demo: Introduction to grid_http_server"
 image_caption: 315_mainnet_release
-description:  Join Mik to learn how to set up a Docker container running the grid HTTP server.
+description: Join Mik to learn how to set up a Docker container running the grid HTTP server.
 date: 2024-11-15
 taxonomies:
   people: [bernadette_amanda_caster]

content/newsroom/flist_cli_demo/index.md

@@ -1,6 +1,6 @@
 ---
 id: flist_cli_demo
-title: 📺 Watch the Flist CLI(Converting Dockerfiles into Flist on TF Flist Hub)
+title: Watch the Flist CLI Demo (Converting Dockerfiles into Flist on TF Flist Hub)
 image_caption: Flist ClI
 description: Join Mik and Scott as they introduce the Flist CLI, a tool for converting Docker files and images into Flists on the TF Flist Hub. 
 date: 2024-10-11

content/newsroom/peppermint_demo/index.md

@@ -1,6 +1,6 @@
 ---
 id: peppermint_demo
-title: 📺 Watch the Peppermint-ThreeFold New Minting Visualizer Demo
+title: Watch the Peppermint-ThreeFold New Minting Visualizer Demo
 image_caption: peppermint
 description: Scott and Mik introduce Peppermint, an open-source tool for visualizing ThreeFold minting receipts. It’s user-friendly, with sorting, filtering, and CSV downloads—test it out.
 date: 2024-10-31

content/newsroom/watch_demo_grid_server/index.md

@@ -16,7 +16,7 @@ In this video, Mik will guide you through setting up a Docker container running
 
 <br/>
 
-Watch the call [here] (https://youtu.be/Ec2NdhuoIc4) with timestamps for simple navigation, and leave your feedback or questions [here] (https://github.com/Mik-TF/grid_http_server_docker).
+Watch the call [here](https://youtu.be/Ec2NdhuoIc4) with timestamps for simple navigation, and leave your feedback or questions [here](https://github.com/Mik-TF/grid_http_server_docker).
 
 <br/>
 

content/newsroom/web4_infrastructure/index.md

@@ -10,6 +10,7 @@ taxonomies:
   news-category: [tech,grid,community]
 extra:
     imgPath: web4_infrastructure.png
+    isFeatured: true
 ---
 
 Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security. But we won’t stop there. Web4 is the natural progression of the Internet – and the decentralized cloud was the base layer to create Web4. [Stay tuned, friends](https://forum.threefold.io/t/threefold-is-the-infrastructure-layer-of-web4-stay-tuned-12-12-24/4446).

content/signup/index.md

@@ -0,0 +1,58 @@
+---
+title: "Sign Up"
+description: "Take actions and become a part of a pioneering Web4 movement with ThreeFold on 12.12.2024" # quotation marks to allow colons where used
+template: "layouts/signup.html"
+insert_anchor_links: "left"
+extra:
+ author: ThreeFold
+ imgPath: tf.png
+---
+
+
+
+
+
+
+
+
+
+
+<style>
+
+
+.rounded_img img {
+ border-radius: 8px;
+}
+
+
+.person img{
+ border-radius: 100%;
+ max-width:100px;
+ }
+
+
+.myscale{
+ transition: transform .5s;
+}
+
+
+.myscale:hover{
+ transform: scale(1.2);
+ background-color: whitesmoke;
+}
+
+
+.road_border{
+  
+     border-left: 1px solid rgb(156, 156, 156);
+
+
+   }
+
+
+ .white-gray{
+  color: #9f9f9f;
+}
+
+
+ </style>

css/index.css

@@ -188,7 +188,7 @@ background-color:#5596f5 !important;
 }
 
 .footer-cust a:hover {
-  color: #74ddc3; 
+  color: #c7c7c7; 
 }
 
 .footer-cust h6{

static/js/custom.js

@@ -180,7 +180,7 @@ async function getStats() {
 function formatStatsData(stats) {
   let items = document.querySelector(".items");
   items.classList.remove("animate-pulse");
-  document.getElementById("capacity").innerHTML = stats.capacity;
+  document.getElementById("ssd").innerHTML = stats.ssd;
   document.getElementById("nodes").innerHTML = stats.nodes;
   document.getElementById("countries").innerHTML = stats.countries;
   document.getElementById("cores").innerHTML = stats.cores

tailwind.config.js

@@ -47,7 +47,7 @@ module.exports = {
       transparent: 'transparent',
       white: '#ffffff',
       black: '#000000',
-      green: '#74ddc3 ',
+      green: '#c7c7c7 ',
       gray: colors.gray,
       slate: colors.slate,
       stone: colors.stone,

templates/index.html

@@ -2,7 +2,6 @@
 {% block content %}
 
 {% include "partials/home/hero.html" %}
-{% include "partials/home/banner.html" %}
 {% include "partials/home/grid_stats.html" %}
 {% include "partials/home/farmers.html" %}
 {% include "partials/home/features.html" %}

templates/layouts/action.html

@@ -1,9 +1,8 @@
 {% extends "_default/base.html" %}
 {% block content %}
-
+{% include "partials/action/video.html" %}
-{% include "partials/action/banner.html" %}
+{% include "partials/action/web4tools.html" %}
-{% include "partials/action/announcements.html" %}
 {% include "partials/action/action.html" %}
-{% include "partials/action/cta.html" %}
+{% include "partials/home/cta.html" %}
 
 {% endblock content %}

templates/layouts/signup.html

@@ -0,0 +1,6 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/form.html" %}
+
+{% endblock content %}

templates/partials/action/action.html

@@ -8,8 +8,7 @@
                     <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
                       The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
                     Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
-                    For over a decade, ThreeFold has been dedicated to realize this vision, and we’re excited to announce
+                    For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
-                    our next steps on <span class="font-semibold">December 12, 2024. </span>
                     </p>
                 </div>
             </div>
@@ -22,17 +21,8 @@
                         This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
                     </p>
                 </blockquote>
-                <br>
+                <br> 
-                <div class="inline-flex blinking-effect items-center gap-2 fade-in ">
+                <a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>                               
-                    <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>

templates/partials/action/banner.html

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

templates/partials/action/tools.html

@@ -0,0 +1,40 @@
+<div class="bg-transparent py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6">
+        <div class="mx-auto w-full max-w-3xl lg:mx-0">
+            <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock the Web4 Revolution with ThreeFold</h2>
+            <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
+            <div class="mt-8 flex gap-x-6">
+            </div>
+        </div>
+        <div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
+                <div class="p-10">
+                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Phone</p>
+                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p>
+                    <a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                </div>
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
+                <div class="p-10">
+                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Router</p>
+                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p>
+                    <a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                </div>                
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
+                <div class="p-10">
+                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Nodes</p>
+                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p>
+                    <a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                </div>                
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
+                <div class="p-10">
+                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">TF Genie</p>
+                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p>
+                    <a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                </div>                
+            </div>
+        </div>
+    </div>
+</div>

templates/partials/action/video.html

@@ -0,0 +1,109 @@
+<div class="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden">
+    <div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+        <!-- Main Heading -->
+        <h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white">
+            Join the Web4 Revolution
+        </h2>
+        
+        <!-- Subtext -->
+        <p class="mx-auto mt-6 max-w-xl text-pretty text-xl lg:text-2xl font-light text-gray-200 fade-in fade-in-delay">
+          Join us on our journey. Watch the video below and scroll down to learn how you can participate.
+        </p>
+        
+        <br>
+        
+        <!-- Embed YouTube Video -->
+        <div class="mt-8 flex justify-center">
+            <div class="responsive-iframe">
+                <iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player" 
+                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+                </iframe>
+            </div>
+        </div>
+        
+        <!-- Call to Action Button -->
+        <div class="mt-12 fade-in flex items-center justify-center gap-x-4">
+            <a href="/signup" target="_blank" 
+               class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">
+                Take the Next Step
+            </a>
+        </div>
+    </div>
+</div>
+
+<style>
+  /* Fade-in animation */
+  .fade-in {
+    opacity: 0;
+    animation: fadeIn 1s ease-out forwards;
+  }
+
+  /* Fade-in keyframe */
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* Responsive iframe for YouTube video */
+  .responsive-iframe {
+    position: relative;
+    width: 100%;
+    max-width: 800px; /* Max width for large screens */
+    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+    height: 0;
+    overflow: hidden;
+  }
+  .responsive-iframe iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Ensure content aligns properly */
+  .flex.justify-center {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* Responsive text and spacing */
+  .text-pretty {
+    word-wrap: break-word;
+  }
+  @media (max-width: 640px) {
+    .text-pretty {
+      padding: 0 1rem;
+    }
+  }
+
+  /* Style for the button */
+  .blinking-effect {
+    animation: blink 1.5s step-start infinite;
+  }
+
+  @keyframes blink {
+    50% {
+      opacity: 0.5;
+    }
+  }
+</style>
+
+<script>
+  // JavaScript to add 'visible' class after loading
+  window.addEventListener('DOMContentLoaded', () => {
+    const fadeInElements = document.querySelectorAll('.fade-in');
+
+    fadeInElements.forEach((element, index) => {
+      // Adding a delay for each fade-in effect (increasing delay with index)
+      setTimeout(() => {
+        element.classList.add('visible');
+      }, index * 1000); // 1000ms delay between each element
+    });
+  });
+</script>

templates/partials/action/web4tools.html

@@ -0,0 +1,41 @@
+<div class="overflow-hidden bg-transparent py-16 lg:py-24">
+    <div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
+        <div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
+            <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
+            <p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
+                From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
+        </div>
+        <div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
+            <!-- Image on the left and text on the right -->
+            <div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
+                <img class="fade-in blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
+            </div>
+
+            <!-- Text on the left -->
+            <div class="relative p-4"> <!-- Add padding here for all sides -->
+                <div class="gap-y-4">
+                    <div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                        <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Phone</dt>
+                        <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and seamlessly integrate with the ThreeFold Grid.</dd>
+                        <a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                    <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                        <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Bot</dt>
+                        <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
+                        <a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                    <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                        <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt>
+                        <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</dd>
+                        <a href="https://docs.threefold.io/docs/components/3node" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                    <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                        <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Router</dt>
+                        <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.</dd>
+                        <a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                </div>
+            </div>            
+        </div>
+    </div>
+</div>

templates/partials/cta.html

@@ -7,6 +7,8 @@
         <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>
+        <a href="/action" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
+      </div>
         
       </div>
     </div>

templates/partials/form.html

@@ -0,0 +1 @@
+<div data-tf-live="01JEXHAZ930FVKSDJ440Y8X375"></div><script src="//embed.typeform.com/next/embed.js"></script>

templates/partials/header.html

@@ -107,7 +107,7 @@
                       </a>
                     </li> 
                   </ul> #}
-                    <a href="https://docs.threefold.io/" target="_blank" class="dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">TF Docs</a>
+                    <a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Join the Web4 Revolution</a>
                 </div>
               </div>
             </div>
@@ -197,7 +197,7 @@
                       </div> #}
 
                       <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
-                        <a href="https://docs.threefold.io/" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">TF Docs</a>
+                        <a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
                       </div>
                     </nav>                    
                 </div>
@@ -213,14 +213,14 @@
 <style>
 
   nav a:hover{
-  color: #74ddc3 !important;
+  color: #c7c7c7 !important;
 }
 
 .active{
-  color: #74ddc3 !important;
+  color: #c7c7c7 !important;
 }
 .nav_btn:hover {
-  color: #74ddc3 !important;
+  color: #c7c7c7 !important;
 }
 
 </style>

templates/partials/home/cta.html

@@ -1,13 +1,13 @@
 <div class="bg-transparent pt-12 pb-12">
     <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">
+      <h2 class="lg:text-balance max-w-xl leading-tight 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.
+        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-green 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">
+        <a href="/signup" target="_blank" class="blinking-effect 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
+          Take the Next Step
         </a>
-        
+        <a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
       </div>
     </div>
 </div>

templates/partials/home/farmers.html

@@ -5,7 +5,7 @@
       <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg 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>
+  </div>
 <section class="pb-32 bg-transparent">
   <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">

templates/partials/home/grid_stats.html

@@ -8,12 +8,12 @@
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Version 3.15 is live on Mainnet.</p>
         </div>
         <dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
-            <!-- capacity -->
+            <!-- ssd -->
           <div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
             <div class="tooltip">
               <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
-              <dt class="text-sm/6 font-light text-gray-300">CAPACITY</dt>
+              <dt class="text-sm/6 font-light text-gray-300">SSD CAPACITY</dt>
-              <dd id="capacity" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
+              <dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
           </div>
             <!-- cores -->
@@ -54,7 +54,7 @@
   <script>
     document.addEventListener('DOMContentLoaded', function () {
       // Initialize the countUp for each of the numbers
-      new CountUp('capacity', 0, 1910, 0, 2.5).start();
+      new CountUp('ssd', 0, 1910, 0, 2.5).start();
       new CountUp('cores', 0, 46934, 0, 2.5).start();
       new CountUp('nodes', 0, 1596, 0, 2.5).start();
       new CountUp('countries', 0, 40, 0, 2.5).start();

templates/partials/home/hero.html

@@ -2,7 +2,7 @@
     <div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
       <div class="mx-auto max-w-4xl text-center">
         <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-5xl fade-in">We are Building <br>a New Internet</h2>
-        <p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, and enables any machine and human to communicate over the shortest path.</p>
+        <p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
         <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
         <br>
         <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>

templates/partials/home/products.html

@@ -0,0 +1,27 @@
+<div class="overflow-hidden bg-transparent py-24 lg:py-16">
+    <div class="mx-auto max-w-7xl md:px-6 lg:px-8">
+      <div class="grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
+        <div class="sm:px-6 lg:px-0">
+          <div class="relative isolate overflow-hidden bg-transparent px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pl-16 sm:pr-0 sm:pt-16 lg:mx-0 lg:max-w-none">
+            <div class="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
+              <img src="images/web4.png" alt="Web4 Preview" class="w-full max-w-none fade-in blinking-effect">
+            </div>
+          </div>
+        </div>
+        <div class="px-6 lg:px-0 lg:pl-4 lg:pt-4">
+          <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
+            <p class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock Web4 with ThreeFold</p>
+            <p class="mt-6 mx-automax-w-3xl text-pretty lg:text-2xl text-xl font-normal text-gray-200 fade-in">Revolutionary Tools for the Decentralized Internet.</p>
+            <div class="mt-6 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
+                <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted Web4 routers and decentralized nodes, our products redefine digital autonomy and connectivity.</p>
+            </div>
+            <div class="mt-10 flex items-center gap-x-6">
+                <a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Take the Next Step</a>
+                <a href="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/home/web4.html

@@ -7,9 +7,8 @@
           <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Next Evolution of the Internet</h2>
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Web4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Blockchain was the first step to Web3.</p>
-          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-semibold text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
+          <p class="mx-auto mt-2 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
-          <br>
+          <!--
-          <br>
           <div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" 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">
@@ -20,6 +19,11 @@
             </svg>
             <a href="/action" class="fade-in  text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
         </div>
+        -->
+        <div class="mt-16 fade-in flex items-center justify-center gap-x-6">
+          <a href="/signup" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 blinking-effect">Take the Next Step</a>
+          <a href="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+        </div>
         
         </div>
       </div>

templates/partials/what/what.html

@@ -4,8 +4,8 @@
         <h2 class="fade-in text-balance lg:text-5xl text-4xl 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-lg font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>
-        <p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
+        <p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are now unveiling an exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
-        <a href="/action" class="mt-4 border border-white px-6 py-2 fade-in lg:text-3xl text-2xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
+        <a href="/action" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take Actions</a>
       </div>
       <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
         <dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-6">

templates/partials/why/matters.html

@@ -22,7 +22,7 @@
                         <p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
                     </blockquote>
                     <br>
-                    <div class=" border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
+                    <div class="mt-6 border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
                         <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" 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)">
@@ -30,7 +30,7 @@
                                 </g>
                             </g>
                         </svg>
-                        <a href="/action" class="fade-in  text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
+                        <a href="/action" class="fade-in text-balance text-xl font-semibold tracking-tight text-white lg:text-2xl blinking-effect">Take Actions</a>
                     </div>                                 
                 </figure>
             </div>

templates/partials/why/team.html

@@ -1,4 +1,4 @@
-<div class="bg-transparent relative isolate overflow-hidden py-12">
+<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
     <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">