update section2

content/home/index.md

@@ -48,6 +48,56 @@ extra:
 
 
 
+<!-- section 2 -->
+
+<div class="lg:pb-24 pb-12">
+  <div class="mx-auto grid max-w-2xl grid-cols-1 items-start gap-y-16 px-4 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
+
+  <!-- left section -->
+
+  {{ left_text( 
+    title="ThreeFold is a Decentralized Infrastructure Layer for The Internet",
+      description="We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.",
+      button_text="Discover How It Works",
+      button_link="/what"
+
+) }}
+
+ <div class="lg:px-16 fade-in">
+
+  <!-- right section -->
+
+   ### Three Inventions at the Core of Our System
+
+  <dl class="grid grid-cols-1 mx-auto lg:gap-x-8 sm:grid-cols-2 lg:gap-y-8 gap-y-4">
+   {{ features_2(
+    subtitle ="COMPUTE",
+    header="Bare Metal Operating System",
+    description1="Zero OS, an efficient and secure operating system, runs directly on the hardware – enabling an autonomous cloud.",
+    description2="Can run any Web2, Web3, or AI workload at the edge of the Internet, with more scalability and reliability." 
+) }}
+
+   {{ features_2(
+    subtitle="DATA",
+    header="Unbreakable Data",
+    description1="Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level.",
+    description2="Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable."
+) }}
+
+   {{ features_2(
+    subtitle="NETWORK",
+    header="Unbreakable Network",
+    description1="End-to-end encrypted overlay network, always looking for the shortest possible path between participants.",
+    description2="Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations."
+) }}
+
+</dl>
+</div>
+</div>
+</div>
+
+
+
 
 
 

css/index.css

@@ -264,7 +264,7 @@ background-color:#5596f5 !important;
 
 @layer components {
   h1 {
-    @apply text-4xl lg:text-6xl font-normal;
+    @apply font-normal tracking-tight leading-tight text-white lg:text-6xl text-3xl;
     color: #ffffff;
     font-family: "Inter", sans-serif !important;
   }
@@ -277,7 +277,7 @@ background-color:#5596f5 !important;
     @apply font-semibold;
   }
   h3 {
-    @apply text-2xl lg:text-3xl my-4 font-extralight;
+    @apply  lg:text-2xl text-xl leading-tight font-normal tracking-tight 
     color: #ffffff;
     font-family: "Inter", sans-serif !important;
   }

templates/shortcodes/features_2.html

@@ -0,0 +1,58 @@
+{% set subtitle = subtitle | default(value="") %}
+{% set header = header | default(value="") %}
+{% set description1 = description1 | default(value="") %}
+{% set description2 = description2 | default(value="") %}
+
+        
+        <div class="pt-0">
+          <dt class="font-normal text-sm text-gray-200">{{ subtitle }}</dt>
+          <dt class="mt-1 font-semibold text-base text-gray-200">{{ header }} </dt>
+        </div>
+        <div class="pt-0">
+          <dd class="font-light text-gray-300 text-sm mb-2">{{ description1 }} </dd>
+          <dd class="font-light text-gray-300 text-sm mb-4">{{ description2 }}</dd>
+        </div>
+
+
+<style>
+  /* Define the slow blinking animation */
+  @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+    
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* Apply the blinking animation to the link */
+  .blinking-effect {
+    animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+  }
+</style>

templates/shortcodes/hero_text_center.html

@@ -13,8 +13,8 @@
 
   
     <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-3xl fade-in">
+      <h1 class="fade-in">
-        {{ title }}</h2>
+        {{ title }}</h1>
       <p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">{{ description }}</p>
       <!-- <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>  -->
       <br>

templates/shortcodes/left_text.html

@@ -0,0 +1,60 @@
+{% set title = title | default(value="Built") %}
+{% set description = description | default(value="") %}
+{% set button_text = button_text | default(value="") %}
+{% set button_link = button_link | default(value="") %}
+
+
+
+
+
+    <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-3xl leading-tight font-normal tracking-tight text-white">{{ title }}
+      </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">{{ description }}</p>
+      <a href="{{ button_link }}" class="blinking-effect fade-in lg:text-xl text-lg font-semibold text-white hover:text-gray-400">{{ button_text }} <span aria-hidden="true">→</span></a>
+    </div>
+   
+
+
+<style>
+  /* Define the slow blinking animation */
+  @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+    
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* Apply the blinking animation to the link */
+  .blinking-effect {
+    animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+  }
+</style>