update home

content/header/index.md

@@ -3,8 +3,8 @@ title: "Header"
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPathLight: "images/new_logo_tft_light.png"
+  logoPathLight: "images/logolight.png"
-  logoPathDark: "images/new_logo_tft_dark.png"
+  logoPathDark: "images/logodark.png"
 
 ---
 

css/index.css

@@ -22,6 +22,14 @@ body .semigray {
   color: #424242 !important;
 }
 
+body .semigray2 {
+  color: #424242 !important;
+}
+
+body .icon {
+  fill: #424242 !important;
+}
+
 /* Dark Mode */
 body.dark-mode {
   background-color: #121212;
@@ -29,9 +37,20 @@ body.dark-mode {
 }
 
 body.dark-mode .semigray {
-  color: #bbbbbb !important;
+  color: #e5e7eb !important;
 }
 
+body.dark-mode .semigray2 {
+  color: #d1d5db !important;
+}
+
+body.dark-mode .icon {
+  fill: #ffffff !important;
+}
+
+.double_bg {
+  background-color: rgb(100 100 100 / 0.2);
+}
 
 .dashboard:hover {
 

static/js/custom.js

@@ -204,10 +204,11 @@ document.addEventListener('DOMContentLoaded', () => {
   if (savedTheme === 'dark') {
     document.body.classList.add('dark-mode');
     toggleSwitch.checked = true;
-    siteLogo.src = siteLogo.getAttribute('data-dark');
+    siteLogo.src = siteLogo.getAttribute('data-dark'); // Use dark mode logo
   } else {
     document.body.classList.remove('dark-mode');
-    siteLogo.src = siteLogo.getAttribute('data-light');
+    toggleSwitch.checked = false;
+    siteLogo.src = siteLogo.getAttribute('data-light'); // Use light mode logo
   }
 });
 
@@ -216,10 +217,11 @@ toggleSwitch.addEventListener('change', () => {
   if (toggleSwitch.checked) {
     document.body.classList.add('dark-mode');
     localStorage.setItem('theme', 'dark');
-    siteLogo.src = siteLogo.getAttribute('data-dark');
+    siteLogo.src = siteLogo.getAttribute('data-light'); // Switch to dark mode logo
   } else {
     document.body.classList.remove('dark-mode');
     localStorage.setItem('theme', 'light');
-    siteLogo.src = siteLogo.getAttribute('data-light');
+    siteLogo.src = siteLogo.getAttribute('data-dark'); // Switch to light mode logo
   }
 });
+

tailwind.config.js

@@ -1,6 +1,7 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
+  darkMode: 'class',
   content: [
       './templates/**/*.html'
   ],

templates/partials/header.html

@@ -7,20 +7,15 @@
         <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 ">
           <a href="{{ get_url(path='/') }}" class="flex">
             <img 
-              id="site-logo" 
+            id="site-logo" 
-              class="w-36 h-auto" 
+            class="w-36 h-auto" 
-              style="max-width: none;" 
+            style="max-width: none;" 
-              src="{{ get_url(path=section.extra.logoPathLight) }}" 
+            src="{{ get_url(path=section.extra.logoPathLight) }}" 
-              data-light="{{ get_url(path=section.extra.logoPathLight) }}" 
+            data-light="{{ get_url(path=section.extra.logoPathLight) }}" 
-              data-dark="{{ get_url(path=section.extra.logoPathDark) }}" 
+            data-dark="{{ get_url(path=section.extra.logoPathDark) }}" 
-              alt="ThreeFold Logo" />
+            alt="ThreeFold Logo" />
           </a>
         
-        </a>
-        
-      
-      
-        </a>
             <div class="-mr-2 -my-2 lg:hidden">
                 <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
                     <!-- Heroicon name: menu -->
@@ -119,9 +114,10 @@
                     </li> 
                   </ul>  -->
                   <button class="theme-toggle px-2 mx-2">
-                    <label class="" for="darkModeSwitch">Dark Mode:</label>
+                    <label for="darkModeSwitch">Dark Mode:</label>
                     <input type="checkbox" id="darkModeSwitch">
-                </button>
+                  </button>
+                  
                 
                   
                     <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>

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">
+    <div class="mx-auto rounded-2xl double_bg max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
-      <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">
+      <h2 class="lg:text-balance max-w-xl leading-tight text-left items-start font-normal tracking-tight 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="/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">
+        <a href="/signup" target="_blank" class="blinking-effect fade-in order-gray-500 border-2 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">
           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>
+        <a href="/action" class="fade-in text-sm/6 font-semibold">Learn more <span aria-hidden="true">→</span></a>
       </div>
     </div>
 </div>

templates/partials/home/faq.html

@@ -16,7 +16,7 @@
     <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">
 
-            <h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1>
+            <h1 class="text-3xl font-normal tracking-tight">Frequently Asked Questions</h1>
 
             <!-- Accordion component -->
             <div class="divide-y divide-white/50 my-10">
@@ -31,8 +31,8 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-01"
                         >
-                            <span style="color: #fff;">Is this a separate new Internet?</span>
+                            <span>Is this a separate new Internet?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                             </svg>
@@ -46,7 +46,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-base font-light">
+                            <p class="pb-3 semigray2 text-base font-light">
                                 No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet.
                             </p>
                         </div>
@@ -63,8 +63,8 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-02"
                         >
-                            <span style="color: #fff;">Why do we need a new Internet?</span>
+                            <span style="">Why do we need a new Internet?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                             </svg>
@@ -78,7 +78,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-base font-light">
+                            <p class="pb-3 semigray2 text-base font-light">
                                 The Internet used to be a peer to peer network, but has become fragile and too centralized. There are so many problems with the current Internet, such as authenticity, privacy, security, and sustainability that we believe a fundamental new approach is needed.
                         </div>
                     </div>
@@ -94,8 +94,8 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-04"
                         >
-                            <span style="color: #fff;">You have 2 tokens, TFT and INCA, why?</span>
+                            <span style="">You have 2 tokens, TFT and INCA, why?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                             </svg>
@@ -109,7 +109,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
+                             <p class="pb-3 semigray2 text-base font-light">
                                 TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid capacity. From the start, ThreeFold had 4 billion tokens planned. The ThreeFold community decided to stop minting at 1 billion tokens on Stellar via a DAO vote. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. <br><br>We are now building generation 4 of the ThreeFold Grid capacity, and we need a new token to build this new generation. There will be 3 billion new INCA tokens and all TFT holders can transfer their TFT into INCA (one-way bridge). <br><br>This means that we keep the community decision to have 4 billion tokens in total and to mint maximum 1 billion on Stellar. Our partners will start selling new ThreeFold Nodes mid December 2024 with a new reward scheme and ready to grow to millions of nodes.
                             </p>
                         </div>
@@ -126,8 +126,8 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-05"
                         >
-                            <span style="color: #fff;">How can I participate?</span>
+                            <span style="">How can I participate?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                             </svg>
@@ -141,7 +141,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
+                             <p class="pb-3 semigray2 text-base font-light">
                                 You can participate by becoming a farmer, a user, a partner or by developing a web4 app. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications for Web4, and many more.
                             </p>
                         </div>
@@ -158,8 +158,8 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-06"
                         >
-                            <span style="color: #fff;">What is Web4?</span>
+                            <span style="">What is Web4?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                             </svg>
@@ -173,7 +173,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
+                             <p class="pb-3 semigray2 text-base font-light">
                                 Web4 represents the natural evolution of the Internet, where humans and artificial intelligence collaborate to develop a new paradigm aimed at advancing planetary well-being while making sure everyone has equal chances. This Internet can be sovereign & decentralized, while being totally secure and private. This phase of the Internet can scale indefinitely, is green, self-healing, cost effective and ultra-reliable.
                         </div>
                     </div>
@@ -189,8 +189,8 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-07"
                         >
-                            <span style="color: #fff;">How secure and private is my data?</span>
+                            <span style="">How secure and private is my data?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                             </svg>
@@ -204,7 +204,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
+                             <p class="pb-3 semigray2 text-base font-light">
                                 ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.
                             </p>
                         </div>
@@ -221,8 +221,8 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-07"
                         >
-                            <span style="color: #fff;">What can I do with the Threefold Grid?</span>
+                            <span style="">What can I do with the Threefold Grid?</span>
-                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                            <svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                             </svg>
@@ -236,7 +236,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-base font-light">
+                             <p class="pb-3 semigray2 text-base font-light">
                                 ThreeFold grid can be used to host any web2, web3 and web4 (future) workload.
                                 For more details see <a href="https://docs.threefold.io/docs/use" target="_blank" rel="noopener noreferrer">our docs</a>
                             </p>
@@ -254,8 +254,8 @@
                         :aria-expanded="expanded"
                         aria-controls="faqs-text-07"
                     >
-                        <span style="color: #fff;">Who should use the ThreeFold Grid ?</span>
+                        <span style="">Who should use the ThreeFold Grid ?</span>
-                        <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                        <svg class="icon shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                             <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                             <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                         </svg>
@@ -269,7 +269,7 @@
                     :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                     >
                     <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-base font-light">
+                            <p class="pb-3 semigray2 text-base font-light">
                             Individuals, businesses, and organizations who want to be sovereign and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.
 
                         </p>

templates/partials/home/farmers.html

@@ -2,7 +2,7 @@
   <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">Powering the ThreeFold Grid Together</h2>
-      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
+      <p class="semigray text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light 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>
@@ -15,7 +15,7 @@
             1. HOST A NODE
           </dt>
           <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
+            <p class="semigray flex-auto leading-normal font-light text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
             <p class="mt-6">
             </p>
           </dd>
@@ -25,7 +25,7 @@
             2. OFFER CAPACITY
           </dt>
           <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
+            <p class="semigray flex-auto leading-normal font-light text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
             <p class="mt-6">
             
             </p>
@@ -36,7 +36,7 @@
             3. EARN REWARDS
           </dt>
           <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
+            <p class="semigray flex-auto leading-normal font-light text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
             </p>
             <p class="mt-6">
               
@@ -45,7 +45,7 @@
         </div>
       </div>
       <div class="mt-12 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 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
+        <a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>                                                                                                
       </div>
     </div>
       </dl>

templates/partials/home/features.html

@@ -1,34 +1,34 @@
 <div class="bg-transparent pt-12 pb-24 ">
   <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 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 the Infrastructure Layer of Web4
+      <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight">ThreeFold is the Infrastructure Layer of Web4
       </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 is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
+      <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</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">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
+      <p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</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>
+      <a href="/what" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-balance hover:text-gray-400">Discover How It Works <span aria-hidden="true">→</span></a>
     </div>
     <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
       <dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-10 gap-y-4">
         <div class="pt-0">
-          <dt class="font-semibold text-base text-gray-200">Unbreakable Data</dt>
+          <dt class="font-semibold text-base ">Unbreakable Data</dt>
         </div>
         <div class="pt-0">
-          <dd class="font-light text-gray-300 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
+          <dd class="font-light semigray2 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. </dd>
-          <dd class="font-light text-gray-300 text-sm mb-4">Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
+          <dd class="font-light semigray2 text-sm mb-4">Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
         </div>
         <div class="lg:pt-4 pt-0">
-          <dt class="font-semibold text-base text-gray-200">Autonomous Cloud</dt>
+          <dt class="font-semibold text-base text-balance">Autonomous Cloud</dt>
         </div>
         <div class="">
-          <dd class="font-light text-gray-300 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. </dd>
+          <dd class="font-light semigray2 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. </dd>
-          <dd class="font-light text-gray-300 text-sm mb-4">Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
+          <dd class="font-light semigray2 text-sm mb-4">Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
         </div>
         <div class="lg:pt-4 pt-0">
-          <dt class="font-semibold text-base text-gray-200">Unbreakable Network</dt>
+          <dt class="font-semibold text-base text-balance">Unbreakable Network</dt>
         </div>
         <div class="">
-          <dd class="font-light text-gray-300 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
+          <dd class="font-light semigray2 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. </dd>
-          <dd class="font-light text-gray-300 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
+          <dd class="font-light semigray2 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
         </div>
       </dl>
     </div>

templates/partials/home/grid_stats.html

@@ -4,8 +4,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 ">A Global Community</h2>
-          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own sovereign infrastructure. Our proof of concept network with 56,000+ vCPUs has been operational for years.</p>
+          <p class="semigray mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own sovereign infrastructure. Our proof of concept network with 56,000+ vCPUs has been operational for years.</p>
-          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">Version 3.15 is live on Mainnet.</p>
+          <p class="semigray mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light 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">
             <!-- ssd -->
@@ -43,7 +43,7 @@
           </dl>
       </div>
       <div class="max-w-4xl items-center mx-auto">
-      <p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light 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>
+      <p class="semigray items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light 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">

templates/partials/home/web4.html

@@ -2,12 +2,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 text-6xl font-bold tracking-tight text-white sm:text-6l">WEB4</h2>
+          <h2 class="fade-in text-balance text-6xl font-bold tracking-tight sm:text-6l">WEB4</h2>
           <br>
-          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Next Evolution of the Internet</h2>
+          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight 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 semigray 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-light semigray fade-in">Blockchain was the first step to Web3.</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>
+          <p class="mx-auto mt-2 max-w-3xl text-pretty lg:text-xl text-lg font-medium semigray fade-in">ThreeFold is the next step to Web4.</p>
           <!--
           <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;">
@@ -21,8 +21,8 @@
         </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="/signup" target="_blank" class="fade-in border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 hover:text-gray-800 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>
+          <a href="/action" class="text-sm/6 font-semibold">Learn more <span aria-hidden="true">→</span></a>
         </div>
         
         </div>