update home content and mobile respo

templates/index.html

@@ -5,8 +5,8 @@
 {% include "partials/home/features.html" %}
 {% include "partials/home/grid_stats.html" %}
 {% include "partials/home/use_cases.html" %}
-{% include "partials/home/self_healing.html" %}
 {% include "partials/home/farmers.html" %}
+{% include "partials/home/self_healing.html" %}
 {% include "partials/home/web4.html" %}
 {% include "partials/home/faq.html" %}
 {% include "partials/home/cta.html" %}

templates/partials/action/video.html

@@ -1,7 +1,7 @@
 <div class="relative isolate overflow-hidden bg-transparent">
-    <div class="mx-auto max-w-4xl text-center lg:py-24 py-12  px-4 lg:px-8">
+    <div class="mx-auto max-w-4xl text-center px-4 pt-12 lg:px-8">
         <!-- Main Heading -->
-        <h2 class="mt-12 fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white capitalize">
+        <h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white capitalize">
           Building towards Web4
         </h2>
         
@@ -16,7 +16,7 @@
         </p>
         
         <!-- Embed YouTube Video -->
-        <div class="py-12 flex justify-center mx-auto" style="max-width: 500px; height: auto;">
+        <div class="py-10 flex justify-center mx-auto" style="max-width: 500px; height: auto;">
             <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" 
@@ -26,7 +26,7 @@
         </div>
         
         <!-- Call to Action Button -->
-        <div class="mt-12 fade-in flex items-center justify-center gap-x-6">
+        <div class="mt-2 fade-in flex items-center justify-center gap-x-6">
             <a href="/signup" target="_blank" 
                class="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 Action

templates/partials/header.html

@@ -197,7 +197,7 @@
                       </div> #}
 
                       <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
-                        <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">Participate in Web4</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">PARTICIPATE</a>
                       </div>
                     </nav>                    
                 </div>

templates/partials/home/faq.html

@@ -14,9 +14,9 @@
         };
     </script>
     <main class="relative flex flex-col justify-center overflow-hidden">
-        <div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-20">
+        <div class="w-full max-w-7xl mx-auto px-4 md:px-6 lg:py-24 py-12">
 
-            <h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1>
+            <h1 class="lg:text-4xl text-3 font-normal tracking-tight text-white">Frequently Asked Questions</h1>
 
             <!-- Accordion component -->
             <div class="divide-y divide-white/50 my-10">

templates/partials/home/farmers.html

@@ -1,4 +1,4 @@
-<div class="bg-transparent pt-12 pb-6">
+<div class="bg-transparent lg:py-24 py-12">
   <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-4xl leading-snug font-normal tracking-tight text-white capitalize">How it works</h2>
@@ -6,7 +6,7 @@
         Regardless of technical expertise, anyone can deploy nodes (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
       </p>
   </div>
-<section class="pb-32 bg-transparent">
+<section class="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">
       <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
@@ -44,7 +44,7 @@
           </dd>
         </div>
       </div>
-      <div class="mt-12 flex items-center justify-center gap-x-6">
+      <div class="mt-6 flex items-center justify-center gap-x-6">
         <a href="https://docs.threefold.io/docs/category/become-a-farmer" 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 mt-8">Become a Farmer</a>
       </div>
     </div>

templates/partials/home/features.html

@@ -1,7 +1,7 @@
-<div class="bg-transparent py-24">
+<div class="bg-transparent lg:pb-24 pb-12">
   <div class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-y-16 px-8 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
     <div class="max-w-3xl lg:px-16 px-0 lg:pb-12 pb-6">
-      <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">ThreeFold is a Decentralized Infrastructure Layer for The Internet
+      <h2 class="fade-in text-balance lg:text-5xl text-3xl leading-tight font-normal tracking-tight text-white">ThreeFold is a Decentralized Infrastructure Layer for The Internet
       </h2>
       <p class="mx-auto mt-6 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">A foundational DePIN platform that operates directly on bare metal, delivering a truly scalable solution that redefines the core pillars of the Internet and Cloud: Compute, Data, and Networking.</p>
       <a href="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">Discover How It Works <span aria-hidden="true">→</span></a>

templates/partials/home/grid_stats.html

@@ -1,9 +1,9 @@
-<div class="bg-transparent relative isolate overflow-hidden py-12 mb-12">
+<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
     <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">
-          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white ">Powered by
+          <h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white ">Powered by
             <br>A Global Community</h2>
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.</p>
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Today, our proof-of-concept network is live worldwide, running on version 3.15 technology.</p>
@@ -47,7 +47,7 @@
       <p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">As we together roll out Web4 we might need millions of nodes.<br>This will establish a truly decentralized and resilient infrastructure.</p>
     </div>
     </div>
-    <div class="mt-12 flex items-center justify-center gap-x-6">
+    <div class="mt-6 flex items-center justify-center gap-x-6">
       <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" 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 mt-8">Explore Grid Capacity</a>
     </div>
   </div>

templates/partials/home/hero.html

@@ -1,7 +1,7 @@
 
 <div class="relative flex justify-center items-center isolate overflow-hidden bg-transparent h-screen">
   
-  <div class="px-4 lg:pt-32 pt-24 lg:px-8">
+  <div class="px-4 lg:px-8">
 
 <!-- logo option
   
@@ -11,7 +11,7 @@
 -->
   
     <div class="mx-auto max-w-4xl text-center">
-      <h2 class="text-balance font-normal tracking-tight leading-tight text-white lg:text-6xl text-5xl fade-in">Internet
+      <h2 class="text-balance font-normal tracking-tight leading-tight text-white lg:text-6xl text-4xl fade-in">Internet
         Infrastructure<br> for Everyone by Everyone, Everywhere.</h2>
       <p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">ThreeFold is a
         DePIN system designed to scale to a planetary level, capable of providing 100% uptime, and enabling any machine
@@ -22,7 +22,7 @@
       {# <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> #}
       <br>
   
-      <div class="mt-10 flex items-center justify-center gap-x-8">
+      <div class="mt-6 flex items-center justify-center gap-x-8">
         <a href="/what"
           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">What
           We've Built</a>

templates/partials/home/self_healing.html

@@ -1,10 +1,10 @@
-<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
+<div class="bg-transparent relative isolate overflow-hidden lg:py-24 py-12">
     <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">
-          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white capitalize">A Self-Healing Web4 Infrastructure</h2>
+          <h2 class="fade-in text-balance lg:text-5xl text-3xl font-normal tracking-tight text-white capitalize">A Self-Healing Web4 Infrastructure</h2>
           <br>
-          <h2 class="fade-in text-balance lg:text-4xl text-2xl font-normal tracking-tight text-white capitalize">Scalable globally, Green, Unbreakable & Secure</h2>
+          <h2 class="fade-in text-balance lg:text-4xl text-xl font-normal tracking-tight text-white capitalize">Scalable globally, Green, Unbreakable & Secure</h2>
 
           <div class="fade-in relative -mx-4 my-8" aria-hidden="true">
             <img class="fade-in blinking-effect relative mx-auto" src="/images/selfhealing.png" alt="">

templates/partials/home/use_cases.html

@@ -1,13 +1,13 @@
-<div class="bg-transparent pt-12 pb-6">
+<div class="bg-transparent lg:py-24 py-12">
   <div class="text-center mx-auto max-w-7xl px-6 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 lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">Anything That Runs on Linux Can Run
+      <h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Anything That Runs on Linux Can Run
         on ThreeFold</h2>
       <p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
         The grid can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities. Here are some of the primary use cases of the grid today.
       </p>
   </div>
-<section class="pb-32 bg-transparent">
+<section class="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 mt-16  lg:max-w-none">
       <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">

templates/partials/home/web4.html

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

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col justify-start isolate overflow-hidden bg-transparent min-h-screen py-12 lg:py-24">
+<div class="relative flex flex-col justify-start isolate overflow-hidden bg-transparent h-screen py-12">
   <div class="px-4 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-4xl fade-in">A True DePIN</h2>

templates/partials/what/what_features.html

@@ -1,4 +1,4 @@
-<div class="bg-transparent pb-6">
+<div class="bg-transparent lg:pt-24 pt-12 lg:pb-24 pb-12">
   <div class="mx-auto max-w-7xl px-6 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 lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">What We Do</h2>