From 948c1d8e4e980c475a93f01275093507df9b8435 Mon Sep 17 00:00:00 2001
From: marionrvrn <marion@threefold.io>
Date: Thu, 21 Nov 2024 17:09:54 +0100
Subject: [PATCH] updates

---
 content/what/index.md                       |  58 ++++
 templates/layouts/what.html                 |   8 +
 templates/partials/what/hero.html           |  40 +++
 templates/partials/what/portfolio copy.html | 310 ++++++++++++++++++++
 templates/partials/what/portfolio.html      | 150 ++++++++++
 templates/partials/what/what.html           |  82 ++++++
 templates/partials/what/whatyoucando.html   |  72 +++++
 7 files changed, 720 insertions(+)
 create mode 100644 content/what/index.md
 create mode 100644 templates/layouts/what.html
 create mode 100644 templates/partials/what/hero.html
 create mode 100644 templates/partials/what/portfolio copy.html
 create mode 100644 templates/partials/what/portfolio.html
 create mode 100644 templates/partials/what/what.html
 create mode 100644 templates/partials/what/whatyoucando.html

diff --git a/content/what/index.md b/content/what/index.md
new file mode 100644
index 000000000..2177a79eb
--- /dev/null
+++ b/content/what/index.md
@@ -0,0 +1,58 @@
+---
+title: "What"
+description: "What ThreeFold has built." # quotation marks to allow colons where used
+template: "layouts/what.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>
\ No newline at end of file
diff --git a/templates/layouts/what.html b/templates/layouts/what.html
new file mode 100644
index 000000000..0d27ea548
--- /dev/null
+++ b/templates/layouts/what.html
@@ -0,0 +1,8 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/what/hero.html" %}
+{% include "partials/what/what.html" %}
+{% include "partials/what/portfolio.html" %}
+{% include "partials/home/cta.html" %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/what/hero.html b/templates/partials/what/hero.html
new file mode 100644
index 000000000..dc87cc25d
--- /dev/null
+++ b/templates/partials/what/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 Web 4</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="https://docs.threefold.io" 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 - Read our docs</a>
+        f  
+      </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>
+  
\ No newline at end of file
diff --git a/templates/partials/what/portfolio copy.html b/templates/partials/what/portfolio copy.html
new file mode 100644
index 000000000..defd355a3
--- /dev/null
+++ b/templates/partials/what/portfolio copy.html	
@@ -0,0 +1,310 @@
+
+<div class="bg-transparent py-24">
+  <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-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
+       <p class="text-left mt-6 max-w-3xl  text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
+        At Threefold, we've created solutions that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
+        </p>
+    </div>
+  </div>
+</div>
+
+
+
+<section id="testimonies" class="py-20 bg-slate-900">
+  <div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
+
+
+      <div class="transition duration-500 ease-in-out transform scale-100 translate-x-0 translate-y-0 opacity-100">
+          <div class="mb-12 space-y-5 md:mb-16 md:text-center">
+              <div
+                  class="inline-block px-3 py-1 text-sm font-semibold text-indigo-100 rounded-lg md:text-center text-cn bg-[#202c47] bg-opacity-60 hover:cursor-pointer hover:bg-opacity-40">
+                  Words from Others
+              </div>
+              <h1 class="mb-5 text-3xl font-semibold text-white md:text-center md:text-5xl">
+                  It's not just us.
+              </h1>
+              <p class="text-xl text-gray-100 md:text-center md:text-2xl">
+                  Here's what others have to say about us.
+              </p>
+          </div>
+      </div>
+
+
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+
+
+          <ul class="space-y-8">
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Kanye West</h3>
+                                      <p class="text-gray-500 text-md">Rapper &amp; Entrepreneur</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Find God.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Tim Cook</h3>
+                                      <p class="text-gray-500 text-md">CEO of Apple</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
+                                  fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
+                                  aliquam malesuada bibendum.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/kanyewest" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Kanye West</h3>
+                                      <p class="text-gray-500 text-md">Rapper &amp; Entrepreneur</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Find God.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Tim Cook</h3>
+                                      <p class="text-gray-500 text-md">CEO of Apple</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
+                                  fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
+                                  aliquam malesuada bibendum.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+          </ul>
+
+
+          <ul class="hidden space-y-8 sm:block">
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/paraga" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
+                                      <p class="text-gray-500 text-md">CEO of Twitter</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
+                                  semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
+                                  pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Tim Cook</h3>
+                                      <p class="text-gray-500 text-md">CEO of Apple</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
+                                  fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
+                                  aliquam malesuada bibendum.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/paraga" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
+                                      <p class="text-gray-500 text-md">CEO of Twitter</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
+                                  semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
+                                  pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/tim_cook" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Tim Cook</h3>
+                                      <p class="text-gray-500 text-md">CEO of Apple</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
+                                  fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
+                                  aliquam malesuada bibendum.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+          </ul>
+
+
+          <ul class="hidden space-y-8 lg:block">
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
+                                      <p class="text-gray-500 text-md">CEO of Microsoft</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
+                                  tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
+                                  eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
+                                      <p class="text-gray-500 text-md">CEO of PayPal</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
+                                  et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/satyanadella" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
+                                      <p class="text-gray-500 text-md">CEO of Microsoft</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
+                                  tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
+                                  eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+              <li class="text-sm leading-6">
+                  <div class="relative group">
+                      <div
+                          class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
+                      </div><a href="https://twitter.com/dan_schulman" class="cursor-pointer">
+                          <div
+                              class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
+                              <div class="flex items-center space-x-4"><img
+                                      src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
+                                      class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
+                                  <div>
+                                      <h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
+                                      <p class="text-gray-500 text-md">CEO of PayPal</p>
+                                  </div>
+                              </div>
+                              <p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
+                                  et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
+                          </div>
+                      </a>
+                  </div>
+              </li>
+          </ul>
+
+
+      </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/templates/partials/what/portfolio.html b/templates/partials/what/portfolio.html
new file mode 100644
index 000000000..4c8666016
--- /dev/null
+++ b/templates/partials/what/portfolio.html
@@ -0,0 +1,150 @@
+<div class="bg-transparent pt-12 pb-6">
+  <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-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
+      <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
+        At ThreeFold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
+      </p>
+    </div>
+  </div>
+</div>
+<section class="pb-32 bg-transparent">
+  <div class="max-w-6xl mx-8 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-16 lg:max-w-none lg:grid-cols-3">
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            ZERO-OS V3
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            MYCELIUM NETWORK
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            QUANTUM SAFE STORAGE
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+
+        <!-- 2ND ROW--> 
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            TF CHAIN
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">An application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            3NODES
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            GATEWAY NODES
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/dashboard/deploy/node_finder.html?highlight=gateway%20nodes#gateway-nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+
+        <!-- 3RD ROW--> 
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            TF DASHBOARD
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            TF DAO
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">A community-driven governance model that allows token holders to participate in decision-making processes related to the development and direction of the ThreeFold ecosystem.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            TF CONNECT APP
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</section>
+
+<style>
+  /* Fade-in animation for the grid items */
+  .fade-in-box {
+    opacity: 0;
+    animation: fadeIn 0.6s ease-in-out forwards;
+  }
+
+  /* Fading in each grid item with a slight delay */
+  .fade-in-box:nth-child(1) { animation-delay: 0s; }
+  .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
+  .fade-in-box:nth-child(3) { animation-delay: 0.4s; }
+  .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
+  .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
+  .fade-in-box:nth-child(6) { animation-delay: 1s; }
+  .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
+  .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
+  .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
+  .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
+  .fade-in-box:nth-child(11) { animation-delay: 2s; }
+  .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/templates/partials/what/what.html b/templates/partials/what/what.html
new file mode 100644
index 000000000..6e3a81de4
--- /dev/null
+++ b/templates/partials/what/what.html
@@ -0,0 +1,82 @@
+<div class="bg-transparent">
+    <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
+      <div class="max-w-3xl px-0 lg:px-16 pb-12">
+        <h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
+        </h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>
+        <p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
+        <a href="/action" class="fade-in lg:text-4xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
+      </div>
+      <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
+        <dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
+          <div class="">
+            <dt class="font-medium text-gray-200">Communicate securely</dt>
+            <dd class="mt-1 font-light text-gray-400 text-sm mb-4">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</dd> 
+          </div>
+          <div class="">
+            <dt class="font-medium text-gray-200">Store effortlessly</dt>
+            <dd class="mt-1 ont-light text-gray-400 text-sm mb-4">Securely share and store information with ease, scaling seamlessly from personal use to billions of users. </dd>
+          </div>
+          <div class="">
+            <dt class="font-medium text-gray-200">Restore authenticity</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Determine which information can be trusted, bringing clarity and confidence back to the digital space. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Unlock limitless insights</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Streamline your interactions</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Take control of your digital presence</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</dd>
+         </div>
+        </dl>
+      </div>
+    </div>
+  </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>
\ No newline at end of file
diff --git a/templates/partials/what/whatyoucando.html b/templates/partials/what/whatyoucando.html
new file mode 100644
index 000000000..9d460f4b5
--- /dev/null
+++ b/templates/partials/what/whatyoucando.html
@@ -0,0 +1,72 @@
+<div class="bg-transparent pt-12 pb-24">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-3xl items-center justify-center">
+        <p class="fade-in text-balance  text-center items-center text-4xl font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It</p>
+        <p class="mx-auto mt-6 max-w-3xl text-center items-center text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions. <br><br>On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
+      </div>
+      <div class="mx-auto mt-16 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-16 lg:max-w-none lg:grid-cols-3">
+            <!--1-->
+          <div class="flex flex-col">
+            <dt class="flex-auto items-center text-center text-base font-semibold text-white">
+                 Communicate securely
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
+              <p class="px-4 flex-auto text-center text-base text-white">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</p>
+            </dd>
+          </div>
+           <!--2-->
+           <div class="flex flex-col">
+            <dt class="flex-auto items-center text-center text-base font-semibold text-white">
+                Share and store effortlessly
+            </dt>
+            <dd class="mt-2 flex flex-auto items-center text-center flex-col font-light text-base text-white">
+              <p class="px-4 flex-auto text-base text-white">Securely share and store information with ease, scaling seamlessly from personal use to billions of users.
+              </p>
+            </dd>
+          </div>
+           <!--3-->
+           <div class="flex flex-col">
+            <dt class="flex-auto items-center text-center text-base font-semibold text-white">
+                Restore authenticity
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
+              <p class="px-4 flex-auto items-center text-center text-base text-white">Determine which information can be trusted, bringing clarity and confidence back to the digital space.
+                 </p>
+            </dd>
+          </div>
+          <!--3-->
+          <div class="flex flex-col">
+            <dt class="flex-auto items-center text-center text-base font-semibold text-white">
+                Unlock limitless insights
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
+              <p class="px-4 flex-auto items-center text-center text-base text-white">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant.
+                 </p>
+            </dd>
+          </div>
+          <!--3-->
+          <div class="flex flex-col">
+            <dt class="flex-auto items-center text-center text-base font-semibold text-white">
+                Streamline your interactions
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
+              <p class="px-4 flex-auto items-center text-center text-base text-white">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions.
+                 </p>
+            </dd>
+          </div>
+           <!--3-->
+           <div class="flex flex-col">
+            <dt class="flex-auto items-center text-center text-base font-semibold text-white">
+                Take control of your digital presence
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col font-light text-base text-white">
+              <p class="px-4 flex-auto items-center text-center text-base text-white">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.
+                 </p>
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+  
\ No newline at end of file