edit

templates/index.html

@@ -6,6 +6,7 @@
 {% include "partials/hero.html" %}
 {% include "partials/logos2.html" %}
 {% include "shortcodes/grid_stats.html" %}
+{% include "partials/features.html" %}
 
 
 

templates/partials/about.html

@@ -1,5 +1,5 @@
-<div class="relative isolate overflow-hidden bg-white lg:py-24 py-16">
+<div class="relative isolate overflow-hidden bg-transparent lg:py-24 py-16">
-  <div class="mx-auto max-w-7xl px-6 bg-white">
+  <div class="mx-auto max-w-7xl px-6 bg-transparent">
     <div class="mx-auto max-w-2xl lg:mx-0">
       <h2 class="text-base font-semibold leading-8 text-blue-600">FEATURES</h2>
       <p class="mt-2 text-2xl font-bold tracking-tight text-black sm:text-4xl">🌍 Why Choose a Digital FreeZone</p>

templates/partials/features.html

@@ -0,0 +1,74 @@
+<div class="bg-transparent py-24">
+    <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
+        <div class="max-w-7xl lg:max-w-2xl text-left">
+            <h2 class="text-xl font-normal tracking-wide text-indigo-600">THREEFOLD DIFFERENCE</h2>
+            <p class="mt-4 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">A ground-up Approach</p>
+            <p class="mt-6 mb-4 text-lg max-w-2xl font-light text-gray-700">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware). ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core bottlenecks: data, cloud, and network.</p>
+            <a href="#" class="text-sm font-semibold text-indigo-700">Learn more <span aria-hidden="true">→</span></a>
+        </div>
+        <div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-x-8 sm:mt-16">
+            <!-- Card 1 -->
+            <div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
+                <img class="h-80 w-full object-cover object-center rounded-t-lg" src="images/security.png" alt="">
+                <div class="p-6">
+                    <h3 class="text-sm font-light text-indigo-600">SECURITY</h3>
+                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Unbreakable Data</p>
+                    <p class="mt-2 text-sm font-light text-gray-600">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</p>
+                </div>
+            </div>
+            <!-- Card 2 -->
+            <div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
+                <img class="h-80 w-full object-cover object-center rounded-t-lg" src="images/efficiency.png" alt="">
+                <div class="p-6">
+                    <h3 class="text-sm font-light text-indigo-600">EFFICIENCY</h3>
+                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Autonomous Cloud</p>
+                    <p class="mt-2 text-sm font-light text-gray-600">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</p>
+                </div>
+            </div>
+            <!-- Card 3 -->
+            <div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
+                <img class="h-80 w-full object-cover object-center rounded-t-lg" src="images/map.png" alt="">
+                <div class="p-6">
+                    <h3 class="text-sm font-light text-indigo-600">PRIVACY</h3>
+                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">P2P Network</p>
+                    <p class="mt-2 text-sm font-light text-gray-600">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.fade-in {
+    animation: fadeIn 1s forwards;
+}
+
+.fade-in:nth-child(1) {
+    animation-delay: 0.3s;
+}
+
+.fade-in:nth-child(2) {
+    animation-delay: 0.5s;
+}
+
+.fade-in:nth-child(3) {
+    animation-delay: 0.7s;
+}
+
+/* Hover animation */
+.relative:hover {
+    transform: scale(1.0);
+    transition: transform 0.3s ease-in-out;
+}
+</style>

templates/partials/hero.html

@@ -1,10 +1,10 @@
-<div class="relative bg-white">
+<div class="relative bg-white py-24">
   <div class="mx-auto max-w-7xl">
     <div class="relative z-10 lg:w-full lg:max-w-2xl">
       <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
         <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
       </div>
-      <div class="relative px-6 py-40 lg:px-8 lg:pr-0">
+      <div class="relative px-6 lg:px-8 lg:pr-0">
         <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl animate-fade-up">
           <h1 class="text-pretty lg:text-6xl text-4xl font-semibold tracking-tight text-gray-900 animate-fade-up">Self-Healing Data, Network, and Cloud Platform</h1>
           <p class="mt-8 text-pretty text-lg font-light text-gray-700 sm:text-xl/8 animate-fade-up">Imagine a system which can scale to a planetary level, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, provides 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.</p>
@@ -18,7 +18,7 @@
     </div>
   </div>
   <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 animate-fade-in">
-    <img class="aspect-[3/2] w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
+    <img class="aspect-[3/2] lg:mt-0 mt-12 lg:p-10 p-0 w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
     <div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
       <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
     </div>

templates/partials/logos.html

@@ -1,4 +1,4 @@
-<div class="bg-white py-4 lg:py-10 fixed w-screen">
+<div class="bg-white my-24 fixed w-screen">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6 items-center">
         <img class="max-h-12 w-full object-contain" src="images/brand1.png" alt="Brand 1">

templates/partials/logos2.html

@@ -1,4 +1,4 @@
-<div class="bg-transparent pt-0 pb-12 overflow-hidden">
+<div class="bg-transparent lg:py-24 py-10 overflow-hidden">
     <div class="flex space-x-8 animate-scroll">
         <!-- First set of logos -->
         <img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">

templates/shortcodes/grid_stats.html

@@ -1,9 +1,12 @@
 
-<section class="px-2 py-24 bg-center lg:py-54">
+<section class="px-2 py-24 bg-transparent lg:py-54">
     <div class="mx-auto max-w-3xl sm:text-center">
+        <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
+            <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
+          </div>
         <h2 class="text-xl text-center font-normal tracking-wide text-indigo-600">LIVE AND OPERATIONAL</h2>
         <p class="mt-4 text-center text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">Proven by a Global Community</p>
-        <p class="mt-6 text-lg text-center font-light text-gray-600">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017. Version 3.14 is live on Mainnet</p>
+        <p class="mt-6 text-lg text-center font-light text-gray-700">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017. Version 3.14 is live on Mainnet</p>
     </div>
     <div class="relative mx-auto mt-10">
         <div class="text-center rounded lg:px-6 mx-auto">
@@ -11,43 +14,46 @@
                 <!-- capacity -->
                 <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
-                    <img class="mx-auto p-4 fade-image" src="images/V3-08.png" width="130" alt="">
+                    <img class="mx-auto p-4 fade-image" src="images/V3-081.png" width="130" alt="">
                     <div id="capacity" class="leading-none font-extrabold text-xl">19.10 PB</div>
                     <span class="block text-md mt-1 font-normal capitalize">Capacity</span>
                 </div>
                 <!-- cores -->
                 <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
-                    <img class="mx-auto p-4 fade-image" src="images/V3-11.png" width="130" alt="">
+                    <img class="mx-auto p-4 fade-image" src="images/V3-112.png" width="130" alt="">
                     <div id="cores" class="leading-none font-extrabold text-xl">46,934</div>
                     <span class="block text-md mt-2 font-normal capitalize">Cores</span>
                 </div>
                 <!-- Nodes -->
                 <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
-                    <img class="mx-auto p-4 fade-image" src="images/V3-09.png" width="130" alt="">
+                    <img class="mx-auto p-4 fade-image" src="images/V3-091.png" width="130" alt="">
                     <div id="nodes" class="leading-none font-extrabold text-xl">1596</div>
                     <span class="block text-md mt-2 font-normal capitalize">Nodes</span>
                 </div>
                 <!-- countries -->
                 <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
-                    <img class="mx-auto p-4 fade-image" src="images/V3-10.png" width="130" alt="">
+                    <img class="mx-auto p-4 fade-image" src="images/V3-102.png" width="130" alt="">
                     <div id="countries" class="leading-none font-extrabold text-xl">41</div>
                     <span class="block text-md mt-2 font-normal capitalize">Countries</span>
                 </div>
                 <!-- farms -->
                 <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
-                    <img class="mx-auto p-4 fade-image" src="images/farm.png" width="130" alt="">
+                    <img class="mx-auto p-4 fade-image" src="images/v3-131.png" width="130" alt="">
                     <div id="farms" class="leading-none font-extrabold text-xl">900+</div>
                     <span class="block text-md mt-2 font-normal capitalize">Farms</span>
                 </div>
             </div>
             <div class="mt-12 flex items-center justify-center gap-x-6 mb-24">
-                <a href="#" class="rounded-xl bg-indigo-600 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Explore Grid Capacity</a>
+                <a href="#" class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Explore Grid Capacity</a>
                 <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
             </div>
+            <div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
+                <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
+              </div>
         </div>
     </div>
 </section>
@@ -127,7 +133,7 @@
 
 @keyframes fade {
     0%, 100% {
-        opacity: 0.5;
+        opacity: 0.7;
     }
     50% {
         opacity: 1;