add web4 tools page

templates/layouts/action.html

@@ -1,9 +1,8 @@
 {% extends "_default/base.html" %}
 {% block content %}
 
-{% 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/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/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-7xl lg:px-8">
+            <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Unlock the Web4 Revolution with ThreeFold</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">Web4 Phone</dt>
+                        <dd class="my-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.</dd>
+                        <a href="#" class=" text-sm/6 font-semibold text-white">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">TF Genie</dt>
+                        <dd class="my-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.</dd>
+                        <a href="#" class=" text-sm/6 font-semibold text-white">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">Web4 Router</dt>
+                        <dd class="my-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.</dd>
+                        <a href="#" class=" text-sm/6 font-semibold text-white">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">Web4 Nodes</dt>
+                        <dd class="my-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.</dd>
+                        <a href="#" class=" text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                </div>
+            </div>            
+        </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/products.html

@@ -13,7 +13,7 @@
             <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 routers and decentralized nodes, our products redefine digital autonomy and connectivity.</p>
+                <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="#" 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">Pre-register Now</a>