add hero page

content/header/index.md

@@ -8,7 +8,7 @@ extra:
 ---
 
 - [Why]("/about")
-- [Product]("/product")
+- [Products]("/products")
 - Info
 
 

content/products/index.md

@@ -0,0 +1,58 @@
+---
+title: "Products"
+description: "ThreeFold's products." # quotation marks to allow colons where used
+template: "layouts/products.html"
+insert_anchor_links: "left"
+extra:
+ author: Your name here
+ imgPath: about/about_hero.png
+---
+
+
+
+
+
+
+
+
+
+
+<style>
+
+
+.rounded_img img {
+ border-radius: 8px;
+}
+
+
+.person img{
+ border-radius: 100%;
+ max-width:100px;
+ }
+
+
+.myscale{
+ transition: transform .5s;
+}
+
+
+.myscale:hover{
+ transform: scale(1.2);
+ background-color: whitesmoke;
+}
+
+
+.road_border{
+  
+     border-left: 1px solid rgb(156, 156, 156);
+
+
+   }
+
+
+ .white-gray{
+  color: #9f9f9f;
+}
+
+
+ </style>

templates/layouts/products.html

@@ -0,0 +1,5 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/products/hero.html" %}
+{% endblock content %}

templates/layouts/why.html

@@ -3,6 +3,7 @@
 
 {% include "partials/why/hero.html" %}
 {% include "partials/why/timeline.html" %}
+{% include "partials/why/values.html" %}
 
 {% include "partials/home/cta.html" %}
 {% endblock content %}

templates/partials/products/hero.html

@@ -0,0 +1,40 @@
+<div class="relative isolate overflow-hidden bg-transparent">
+    <div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 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-3xl fade-in">A Secure & Sovereign Infrastructure Layer for the Internet</h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime.             .</p>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
+        </p>
+        <div class="mt-12 flex items-center justify-center gap-x-6">
+          <a href="#" class="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">Dive Deeper</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <style>
+    /* Define the fade-in 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 */
+    }
+  </style>
+  

templates/partials/why/timeline.html

@@ -23,9 +23,9 @@
         </div>
         <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-white">Phase I</div>
+                <div class="font-medium text-gray-200">Phase I</div>
             </div>
-            <div class="font-semibold text-lg text-white mb-2">Creation of Core Technology</div>
+            <div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
             <div class="text-gray-200 font-light">
                 10+ years of Development
                 <br>Built decentralized, autonomous, edge internet technology
@@ -43,9 +43,9 @@
         </div>
         <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-white">Phase II</div>
+                <div class="font-medium text-gray-200">Phase II</div>
             </div>
-            <div class="font-semibold text-lg text-white mb-2">Traction & Expansion</div>
+            <div class="font-semibold text-lg text-gray-200 mb-2">Traction & Expansion</div>
             <div class="text-gray-200 font-light">
                 Open Source Development
                 <br>60+ Countries
@@ -69,7 +69,7 @@
                 <div class="font-medium text-white">Current Phase</div>
             </div>
             <div class="font-semibold text-lg text-white mb-2">ThreeFold Commercialization</div>
-            <div class="text-gray-200 font-light">
+            <div class="text-white font-light">
                 +1 Million Nodes
                 <br>Open Source Mode & Commercial Mode
                 <br>Version 3 (TFT) & Version 4 (INCA) 12.12.24

templates/partials/why/values.html

@@ -0,0 +1,45 @@
+<div class="bg-transparent pb-24 pt-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
+        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+            Open Source
+          </dd>
+        </div>
+        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+            Authenticity
+          </dd>
+        </div>
+        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+            Simplicity
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+  
+  <script>
+    // JavaScript to handle Intersection Observer
+    document.addEventListener("DOMContentLoaded", () => {
+      const elementsToObserve = document.querySelectorAll("[data-observer]");
+      const observerOptions = {
+        root: null, // Observes relative to the viewport
+        threshold: 0.1, // Trigger when 10% of the element is visible
+      };
+  
+      const observerCallback = (entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("opacity-100"); // Make element fully visible
+            observer.unobserve(entry.target); // Stop observing once it's visible
+          }
+        });
+      };
+  
+      const observer = new IntersectionObserver(observerCallback, observerOptions);
+      elementsToObserve.forEach((el) => observer.observe(el));
+    });
+  </script>
+