Initial commit

templates/partials/accordion.html

@@ -0,0 +1,48 @@
+{% set tfFaq = get_section(path="faq/_index.md") %}
+{% set farmFaq = get_section(path="farmfaq/_index.md") %}
+{% set tftFaq = get_section(path="tftfaq/_index.md") %}
+
+{% if current_path == '/faq/' %}
+<h2 class="text-center mt-10">{{ tfFaq.title }}</h2>
+<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
+    {% for page in tfFaq.pages %}
+    <details class="p-4 rounded-lg">
+        <summary class="font-semibold">{{ page.title }}</summary>
+        <div class="mt-3">
+            <p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
+        </div>
+    </details>
+    {% endfor %}
+</div>
+
+{% elif current_path == '/farmfaq/' %}
+<h2 class="text-center mt-10">{{ farmFaq.title }}</h2>
+<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
+    {% for page in farmFaq.pages %}
+    <details class="p-4 rounded-lg">
+        <summary class="font-semibold">{{ page.title }}</summary>
+        <div class="mt-3">
+            <p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
+        </div>
+    </details>
+    {% endfor %}
+</div>
+
+{% elif current_path == '/tftfaq/' %}
+<h2 class="text-center mt-10">{{ tftFaq.title }}</h2>
+<div class="lg:max-w-5xl mx-auto px-8 space-y-2 mt-10">
+    {% for page in tftFaq.pages %}
+    <details class="p-4 rounded-lg">
+        <summary class="font-semibold">{{ page.title }}</summary>
+        <div class="mt-3">
+            <p class="text-gray-600 text-sm leading-6">{{ page.content | safe }}</p>
+        </div>
+    </details>
+    {% endfor %}
+</div>
+{% endif %}
+<style>
+    a {
+        color: #4ec48f
+    }
+</style>

templates/partials/action/action.html

@@ -0,0 +1,90 @@
+<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-24">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="relative grid lg:grid-cols-12 lg:gap-8">
+            <!-- Left Content -->
+            <div class="lg:col-span-7">
+                <div class="mx-auto max-w-2xl lg:mx-0">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">When 3 Becomes 4</h1>
+                    <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
+                      The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
+                    Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
+                    For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
+                    </p>
+                </div>
+            </div>
+
+           <!-- Right Blockquote -->
+           <div class="lg:col-span-5">
+            <figure class=" mt-6 pl-8">
+                <blockquote class=" text-2xl text-white fade-in font-semibold ">
+                    <p class="lg:text-2xl text-xl leading-normal text-white font-semibold">We believe actions are more important than words. <br><br>
+                        This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
+                    </p>
+                </blockquote>
+                <br> 
+                <a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>                               
+            </figure>
+        </div>
+    </div>
+</div>
+</div>
+
+
+
+
+
+<style>
+ /* Apply the blinking animation to the link */
+ .blinking-effect {
+  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
+0% {
+  opacity: 1;
+}
+50% {
+  opacity: 0.4;
+}
+100% {
+  opacity: 1;
+}
+}
+
+blockquote {
+  border-left-width: 2px;
+  padding-left: 1rem;
+}
+
+.blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+}
+
+.inline-flex {
+display: flex;
+align-items: center;
+}
+
+.items-center {
+justify-content: center;
+}
+
+.gap-2 {
+gap: 0.5rem; /* Adjust the gap size as needed */
+}
+
+</style>

templates/partials/action/announcements.html

@@ -0,0 +1,57 @@
+<div class="bg-transparent fade-in pb-24 flex items-center justify-center">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
+            <p class="fade-in mx-auto text-pretty lg:text-2xl leading-tight text-xl font-normal text-gray-200">Announcements</p>
+           <p class="fade-in mx-auto text-pretty lg:text-5xl leading-tight text-4xl font-normal text-white">Coming Soon on 12.12.24</p> 
+           <p class="max-w-4xl mt-4 fade-in mx-auto text-pretty lg:text-xl mb-12 leading-tight text-lg font-light text-gray-200"></p> 
+
+        </div>
+        <div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-2">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">A Roadmap to <br>Web4</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Phone</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Router</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
+                <h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Node</h2>
+            </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // JavaScript to control the blinking effect
+    const items = document.querySelectorAll('.grid-item');
+    let currentIndex = 0;
+
+    function blinkItem() {
+        // Remove the 'blink' class from all items
+        items.forEach(item => item.classList.remove('blink'));
+
+        // Add the 'blink' class to the current item
+        items[currentIndex].classList.add('blink');
+
+        // Move to the next item in a clockwise manner
+        currentIndex = (currentIndex + 1) % items.length;
+    }
+
+    // Start the blinking effect
+    setInterval(blinkItem, 1000); // Change every second
+</script>
+
+<style>
+    /* CSS for the blinking effect */
+    .blink {
+        animation: blink-animation 1s infinite;
+    }
+
+    @keyframes blink-animation {
+        0%, 100% { background-color: rgba(255, 255, 255, 0.1); }
+        50% { background-color: rgba(255, 255, 255, 0.5); }
+    }
+</style>

templates/partials/action/banner.html

@@ -0,0 +1,8 @@
+<div class="h-screen flex flex-col justify-center items-center">
+    <div class="">
+        <img 
+        class="mx-auto" 
+        src="/images/mycel2.gif" 
+        alt="TF">
+</div>
+</div>

templates/partials/action/cta.html

@@ -0,0 +1,53 @@
+<div class="bg-transparent">
+    <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">
+      <h2 class="lg:text-balance leading-tight lg:text-left lg:items-start items-center text-center  font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
+        Stay tuned for 12.12.24<br/>
+      </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="https://t.me/threefoldnews" target="_blank" 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 mb-4 lg:mb-0">
+          Telegram
+        </a>
+        <a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white 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">
+          Newsletter
+        </a>
+      </div>
+    </div>
+</div>
+
+<style>
+  .bg-black {
+    background-color: #000;
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 4s ease-in-out forwards;
+  }
+
+  h2 {
+    animation-delay: 0.5s;
+  }
+
+  p {
+    animation-delay: 1s;
+  }
+
+  .blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+  }
+
+
+</style>

templates/partials/action/hero.html

@@ -0,0 +1,83 @@
+<div class="flex bg-transparent">
+  <div class="max-w-2xl p-8 mx-auto text-center">
+      <p class="mx-auto mt-6 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          We believe actions are more important than words. <br>
+          This page is in black & white, 
+          to let YOU be the color of the future of the internet.
+      </p>
+
+      <h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
+          Web4
+      </h2>
+
+      <p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          Web4 opens the door for Machines & Humans to create together
+          a new form of Intelligence with respect for the Planet & People.
+      </p>
+
+      <h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
+          Augmented Collective Intelligence
+      </h2>
+
+      <p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          ThreeFold has been working on Web4 for more than 10 years,
+          ready to go public <span class="font-semibold">12.12.2024</span>
+      </p>
+
+      <h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
+          An Internet created by Everyone for Everyone
+      </h2>
+
+      <p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          The Internet is a Trillion USD business.
+          We want to make sure this Internet is built and owned by all of us.
+      </p>
+
+      <p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
+          Register for our online launch event 12-12-2024.
+      </p>
+
+      <h2 class="mt-12 text-balance font-semibold tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
+          When 3 Becomes 4
+      </h2>
+      <div class="mt-12 flex items-center justify-center gap-x-6">  
+          <a href="" class="fade-in fade-in-delay rounded-2xl bg-white px-8 py-2.5 text-base 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">
+              12.12.24
+          </a>
+      </div>
+  </div>
+</div>
+
+<style>
+
+  /* Fade-in animation */
+  .fade-in {
+            opacity: 0;
+            animation: fadeIn 1s ease-out forwards;
+        }
+
+        /* Fade-in keyframe */
+        @keyframes fadeIn {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+
+</style>
+
+<script>
+  // JavaScript to add 'visible' class after loading
+  window.addEventListener('DOMContentLoaded', () => {
+      const fadeInElements = document.querySelectorAll('.fade-in');
+      
+      fadeInElements.forEach((element, index) => {
+          // Adding a delay for each fade-in effect (increasing delay with index)
+          setTimeout(() => {
+              element.classList.add('visible');
+          }, index * 1000); // 1000ms delay between each element
+      });
+  });
+</script>

templates/partials/action/tools.html

@@ -0,0 +1,40 @@
+<div class="bg-transparent py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6">
+        <div class="mx-auto w-full max-w-3xl lg:mx-0">
+            <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock the Web4 Revolution with ThreeFold</h2>
+            <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
+            <div class="mt-8 flex gap-x-6">
+            </div>
+        </div>
+        <div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
+                <div class="p-10">
+                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Phone</p>
+                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p>
+                    <a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                </div>
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12">
+                <div class="p-10">
+                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Router</p>
+                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p>
+                    <a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                </div>                
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
+                <div class="p-10">
+                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Nodes</p>
+                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p>
+                    <a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                </div>                
+            </div>
+            <div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
+                <div class="p-10">
+                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">TF Genie</p>
+                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p>
+                    <a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+                </div>                
+            </div>
+        </div>
+    </div>
+</div>

templates/partials/action/video.html

@@ -0,0 +1,109 @@
+<div class="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden">
+    <div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+        <!-- Main Heading -->
+        <h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white">
+            Join the Web4 Revolution
+        </h2>
+        
+        <!-- Subtext -->
+        <p class="mx-auto mt-6 max-w-xl text-pretty text-xl lg:text-2xl font-light text-gray-200 fade-in fade-in-delay">
+          Join us on our journey. Watch the video below and scroll down to learn how you can participate.
+        </p>
+        
+        <br>
+        
+        <!-- Embed YouTube Video -->
+        <div class="mt-8 flex justify-center">
+            <div class="responsive-iframe">
+                <iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player" 
+                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
+                </iframe>
+            </div>
+        </div>
+        
+        <!-- Call to Action Button -->
+        <div class="mt-12 fade-in flex items-center justify-center gap-x-4">
+            <a href="/signup" target="_blank" 
+               class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base 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>
+        </div>
+    </div>
+</div>
+
+<style>
+  /* Fade-in animation */
+  .fade-in {
+    opacity: 0;
+    animation: fadeIn 1s ease-out forwards;
+  }
+
+  /* Fade-in keyframe */
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* Responsive iframe for YouTube video */
+  .responsive-iframe {
+    position: relative;
+    width: 100%;
+    max-width: 800px; /* Max width for large screens */
+    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+    height: 0;
+    overflow: hidden;
+  }
+  .responsive-iframe iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Ensure content aligns properly */
+  .flex.justify-center {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* Responsive text and spacing */
+  .text-pretty {
+    word-wrap: break-word;
+  }
+  @media (max-width: 640px) {
+    .text-pretty {
+      padding: 0 1rem;
+    }
+  }
+
+  /* Style for the button */
+  .blinking-effect {
+    animation: blink 1.5s step-start infinite;
+  }
+
+  @keyframes blink {
+    50% {
+      opacity: 0.5;
+    }
+  }
+</style>
+
+<script>
+  // JavaScript to add 'visible' class after loading
+  window.addEventListener('DOMContentLoaded', () => {
+    const fadeInElements = document.querySelectorAll('.fade-in');
+
+    fadeInElements.forEach((element, index) => {
+      // Adding a delay for each fade-in effect (increasing delay with index)
+      setTimeout(() => {
+        element.classList.add('visible');
+      }, index * 1000); // 1000ms delay between each element
+    });
+  });
+</script>

templates/partials/action/web4tools.html

@@ -0,0 +1,41 @@
+<div class="overflow-hidden bg-transparent py-16 lg:py-24">
+    <div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
+        <div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
+            <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
+            <p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
+                From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
+        </div>
+        <div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
+            <!-- Image on the left and text on the right -->
+            <div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
+                <img class="fade-in blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
+            </div>
+
+            <!-- Text on the left -->
+            <div class="relative p-4"> <!-- Add padding here for all sides -->
+                <div class="gap-y-4">
+                    <div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                        <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Phone</dt>
+                        <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and seamlessly integrate with the ThreeFold Grid.</dd>
+                        <a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                    <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                        <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Bot</dt>
+                        <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
+                        <a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                    <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                        <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt>
+                        <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</dd>
+                        <a href="https://docs.threefold.io/docs/components/3node" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                    <div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
+                        <dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Router</dt>
+                        <dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.</dd>
+                        <a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                    </div>
+                </div>
+            </div>            
+        </div>
+    </div>
+</div>

templates/partials/applicationForm.html

@@ -0,0 +1,60 @@
+<div class="mt-5 md:mt-0 md:col-span-2">
+    <form action="#" method="POST">
+      <div class="shadow sm:rounded-md sm:overflow-hidden">
+        <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
+            <h3 class="text-black text-lg">Application</h3>
+          <div class="grid grid-cols-3 gap-6">
+            <div class="col-span-3 sm:col-span-2">
+              <label for="company-website" class="block text-sm font-medium text-gray-700"> Website </label>
+              <div class="mt-1 flex rounded-md shadow-sm">
+                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> http:// </span>
+                <input type="text" name="company-website" id="company-website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label for="about" class="block text-sm font-medium text-gray-700"> About </label>
+            <div class="mt-1">
+              <textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
+            </div>
+            <p class="mt-2 text-sm text-gray-500">Brief description for your profile. URLs are hyperlinked.</p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700"> Photo </label>
+            <div class="mt-1 flex items-center">
+              <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
+                <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              </span>
+              <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700"> Resume </label>
+            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
+              <div class="space-y-1 text-center">
+                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                  <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                <div class="flex text-sm text-gray-600">
+                  <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                    <span>Upload a file</span>
+                    <input id="file-upload" name="file-upload" type="file" class="sr-only">
+                  </label>
+                  <p class="pl-1">or drag and drop</p>
+                </div>
+                <p class="text-xs text-gray-500">PDF up to 10MB</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+          <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
+        </div>
+      </div>
+    </form>
+  </div>

templates/partials/blogPosts.html

@@ -0,0 +1,70 @@
+{% block content %}
+
+<div class="text-center main-title px-0 md:w-2/3 mx-8 md:mx-12">
+  <h2
+    class="tracking-tight text-left text-2xl md:text-4xl fw-500 leading-snug font-medium"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
+    ThreeFold stories and project info    
+    {% if taxonomy == "categories" %} - 
+        {{category | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h2>
+  <div>
+    <div class="mt-3 grid gap-5 max-w-lg mx-auto md:grid-cols-2 lg:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+          {% if not post.extra.hidden %}
+            {% include "partials/postCard.html" %} 
+         {%endif%} {%- endfor %}
+    </div>
+    <hr class="my-10 border-gray-700"/>
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/blogSidebar.html

@@ -0,0 +1,38 @@
+
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4"> FILTER POSTS BY</h4>
+        <a id="all" class="mb-2 text-white font-normal" href="/blog">All</a>
+        {% set taxonomy = get_taxonomy(kind="categories") %}
+        {% set categories = taxonomy.items %}
+        {% for category in categories %}
+            {% set path = category.name | slugify %}
+            {% set fullpath = "/categories/" ~ path %}
+            <a id="{{path}}" class="mb-2 text-gray-100 font-normal" href={{fullpath}}> {{category.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="blog/_index.md")%}
+
+    <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-6"> FEATURED POSTS</h4>
+
+        {% for page in section.pages %}
+        {% if page.extra.isFeatured %}
+            <a class="mb-3 text-gray-400" href={{page.permalink}}>{{ page.title }}</a>
+        {% endif %}
+        {% endfor %}
+        
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]    
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory)}
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>

templates/partials/cta.html

@@ -0,0 +1,16 @@
+<div class="bg-transparent">
+    <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">
+      <h2 class="lg:text-balance text-left items-start  font-normal tracking-tight text-white 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="https://docs.threefold.io/" target="_blank" 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 mb-4 lg:mb-0">
+          Dive Deeper
+        </a>
+        <a href="/action" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
+      </div>
+        
+      </div>
+    </div>
+</div>
+

templates/partials/feature/feature1.html

@@ -0,0 +1,39 @@
+<div class="overflow-hidden py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+        <div class="lg:pt-4 lg:pr-8">
+          <div class="lg:max-w-lg">
+            <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+            <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature1.html</h2>
+            <p class="mt-6 mt-8 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
+            <dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
+              <div class="relative pl-9">
+                <dt class="inline font-semibold text-white">
+                ✓ Push to deploy.
+                </dt>
+                <dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
+              </div>
+              <div class="relative pl-9">
+                <dt class="inline font-semibold text-white">
+                 ✓ SSL certificates.
+                </dt>
+                <dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
+              </div>
+              <div class="relative pl-9">
+                <dt class="inline font-semibold text-white">
+                ✓ Database backups.
+                </dt>
+                <dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+        <div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32">
+            <div class="max-w-3xl flex-none lg:max-w-5xl">
+              <img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md bg-white/5  shadow-2xl ">
+            </div>
+          </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/feature/feature2.html

@@ -0,0 +1,64 @@
+<div class="py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl text-center">
+        <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+        <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature2.html</h2>
+        <p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
+      </div>
+    </div>
+    <div class="relative overflow-hidden pt-16">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" class="mb-[-12%] rounded-xl ring-1 shadow-2xl ring-white/10" width="2432" height="1442">
+        <div class="relative" aria-hidden="true">
+          <div class="absolute -inset-x-20 bottom-0 bg-linear-to-t from-gray-900 pt-[7%]"></div>
+        </div>
+      </div>
+    </div>
+    <div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
+      <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-gray-300 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
+        <div class="relative pl-9">
+          <dt class="inline font-semibold text-white">
+
+            ✓  Push to deploy.
+          </dt>
+          <dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
+        </div>
+        <div class="relative pl-9">
+          <dt class="inline font-semibold text-white">
+ 
+            ✓  SSL certificates.
+          </dt>
+          <dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
+        </div>
+        <div class="relative pl-9">
+          <dt class="inline font-semibold text-white">
+   
+            ✓  Simple queues.
+          </dt>
+          <dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
+        </div>
+        <div class="relative pl-9">
+          <dt class="inline font-semibold text-white">
+
+            ✓  Advanced security.
+          </dt>
+          <dd class="inline font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.</dd>
+        </div>
+        <div class="relative pl-9">
+          <dt class="inline font-semibold text-white">
+
+            ✓  Powerful API.
+          </dt>
+          <dd class="inline font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
+        </div>
+        <div class="relative pl-9">
+          <dt class="inline font-semibold text-white">
+ 
+            ✓  Database backups.
+          </dt>
+          <dd class="inline font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.</dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+  

templates/partials/feature/feature3.html

@@ -0,0 +1,50 @@
+<div class=" py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl text-center">
+            <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+            <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature3.html</h2>
+            <p class="mt-6 text-lg font-light text-gray-50 lg:text-xl">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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">
+          <div class="flex flex-col">
+            <dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white">
+
+              ✓  Push to deploy
+            </dt>
+            <dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
+              <p class="flex-auto text-gray-200">Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu.</p>
+              <p class="mt-6">
+                <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+              </p>
+            </dd>
+          </div>
+          <div class="flex flex-col">
+            <dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white">
+     
+              ✓  SSL certificates
+            </dt>
+            <dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
+              <p class="flex-auto   text-gray-200">Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.</p>
+              <p class="mt-6">
+                <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+              </p>
+            </dd>
+          </div>
+          <div class="flex flex-col">
+            <dt class="flex items-center gap-x-3 lg:text-lg font-base/7 font-semibold text-white">
+       
+              ✓  Simple queues
+            </dt>
+            <dd class="mt-4 flex flex-auto flex-col text-base/7 font-light">
+              <p class="flex-auto text-gray-200">Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod.</p>
+              <p class="mt-6">
+                <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+              </p>
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+  

templates/partials/feature/feature4.html

@@ -0,0 +1,85 @@
+<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 lg:pb-10 pb-4">
+        <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+        <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white sm:text-5xl">This is Feature4.html
+        </h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
+        <p class="mx-auto mt-4 mb-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
+        <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
+            Get started
+        </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 lg:gap-y-10 gap-y-6">
+          <div class="">
+            <dt class="font-medium text-gray-200">✓ Communicate securely</dt>
+            <dd class="mt-1 font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd> 
+          </div>
+          <div class="">
+            <dt class="font-medium text-gray-200">✓ Store effortlessly</dt>
+            <dd class="mt-1 ont-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
+          </div>
+          <div class="">
+            <dt class="font-medium text-gray-200">✓ Restore authenticity</dt>
+            <dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">✓ Unlockinsights</dt>
+            <dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">✓ Streamline interactions</dt>
+            <dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">✓ digital presence</dt>
+            <dd class="font-light text-gray-300 text-sm mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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>

templates/partials/feature/feature5.html

@@ -0,0 +1,152 @@
+<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">
+        <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+        <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">This is feature5.html</h2>
+        <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
+        </p>
+      </div>
+    </div>
+  </div>
+  <section class="lg:pb-24 pb-12 pt-12 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 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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+              FEATURE
+            </dt>
+            <dd class="mt-4 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+                FEATURE
+            </dt>
+            <dd class="mt-4 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+                FEATURE
+            </dt>
+            <dd class="mt-4 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+                FEATURE
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+                FEATURE
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+                FEATURE
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+                FEATURE
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+                FEATURE
+            </dt>
+            <dd class="mt-2 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</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-2xl bg-white/5">
+            <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+                FEATURE
+            </dt>
+            <dd class="mt-2 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/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>
+  

templates/partials/feature/feature6.html

@@ -0,0 +1,39 @@
+<div class="overflow-hidden py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+        <div class="lg:ml-auto lg:pt-4 lg:pl-4">
+          <div class="lg:max-w-lg">
+            <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+            <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is Feature6.html</h2>
+            <p class="mt-6 text-lg/8 text-gray-200 font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
+            <dl class="mt-10 max-w-xl space-y-8 text-base/7 text-gray-200 lg:max-w-none">
+              <div class="relative pl-9">
+                <dt class="inline font-semibold text-gray-200">
+                  Push to deploy.
+                </dt>
+                <dd class="inline text-gray-200 font-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</dd>
+              </div>
+              <div class="relative pl-9">
+                <dt class="inline font-semibold text-gray-200">
+ 
+                  SSL certificates.
+                </dt>
+                <dd class="inline text-gray-200 font-light">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</dd>
+              </div>
+              <div class="relative pl-9">
+                <dt class="inline font-semibold text-gray-200">
+      
+                  Database backups.
+                </dt>
+                <dd class="inline text-gray-200 font-light">Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+        <div class="flex items-start justify-end lg:order-first">
+            <img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="Product screenshot" class="w-[48rem] max-w-none rounded-xl  sm:w-[57rem]" width="1220" height="542">
+          </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/featuredBlog.html

@@ -0,0 +1,53 @@
+{% if featured.taxonomies.people %}
+    {% set people = get_section(path="people/_index.md") %}           
+    {% set pages_str = people.pages | json_encode() | as_str %}
+    {% if pages_str is containing(featured.taxonomies.people[0]) %}
+        {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+    {% endif %}
+{% endif %}
+
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-12 md:mt-10 items-center container mx-auto">
+    <div class="relative my-8 w-full md:w-auto mx-3 lg:mx-12">
+      <h3 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4">FEATURED POST</h3>
+      <a href={{featured.permalink}}>
+        <h2
+          class="text-2xl main-title md:text-4xl fw-500 text-gray-50 leading-snug font-medium">
+          {{ featured.title }}
+        </h2>
+        <p class="mt-2 text-base font-normal text-gray-50 text-left">
+          {{ featured.description }}
+        </p>
+      </a>
+      <h4 class="my-2 text-sm not-italic font-light leading-6 text-gray-100">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+        {% for author in featured.taxonomies.people %}
+        {% set author_path = 'people/' ~ author ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+        {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+        <a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize	text-gray-200"> <img
+            src="{{ author_img }}" alt="{{ author.title }}" class="
+            inline-flex 
+          w-8
+          h-8
+          rounded-full
+          bg-gray-200
+          border border-gray-400
+        " /> {{ author.title }}</a>
+        {% endfor %}
+      </h4>
+
+    </div>
+
+    <div class="relative lg:mt-0 max-w-full">
+      <img class="relative rounded mx-auto  max-h-64 p-2 border border-gray-600" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+    </div>
+  </div>
+
+  <hr class="mt-6 container border-gray-600 mx-auto">
+
+  </div>
+  </div>
+</body>

templates/partials/featuredNews.html

@@ -0,0 +1,45 @@
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-12 md:mt-10 items-center container mx-auto">
+    <div class="relative my-8 w-full md:w-auto mx-3 lg:mx-12">
+      <h3 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4">FEATURED NEWS</h3>
+      <a href={{featured.permalink}}>
+        <h2
+        class="text-2xl main-title md:text-4xl fw-500 text-gray-50 font-medium">
+          {{ featured.title }}
+        </h2>
+        <p class="mt-2 text-base font-normal text-gray-50 text-left">
+          {{ featured.description }}
+        </p>
+      </a>
+
+      <h4 class="my-2 text-sm not-italic font-light leading-6 text-gray-100">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+        {% for author in featured.taxonomies.people %}
+        {% set author_path = 'people/' ~ author ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+        {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+        <a href="{{author.permalink}}" tooltip="{{author.title}}" class="capitalize	text-gray-200"> <img
+            src="{{ author_img }}" alt="{{ author.title }}" class="
+            inline-flex 
+          w-8
+          h-8
+          rounded-full
+          bg-gray-200
+          border-2 border-white
+        " /> {{ author.title }}</a>
+        {% endfor %}
+      </h4>
+
+    </div>
+
+    <div class="relative lg:mt-0 max-w-full">
+        {% if featured.extra.imgPath %}
+      <img class="relative rounded mx-auto  max-h-64 p-2 border-2 border-gray-100" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+        {% endif %}
+    </div>
+  </div>
+  <hr class="mt-6 container border-gray-600 mx-auto">
+  </div>
+  </div>
+</body>

templates/partials/filter_bar.html

@@ -0,0 +1,48 @@
+{% set path_array = current_path | split(pat="/") %}
+{% set taxonomy = path_array[1] %}
+{% set category = path_array[2] %}
+{% if path_array | length < 4%}
+{% set category = "All" %}
+{% endif %}
+
+
+
+<div class="left-0 z-50 border border-gray-200 bg-gray-100 my-6 w-full rounded-md">
+    <header class="flex flex-wrap container mx-auto pb-0 sm:px-0 transition-all transition-500">
+        <div class="flex justify-between px-4 sm:p-0">
+            <div class="ml-8 inline-flex flex-shrink-0">
+                <span class="flex text-base items-center capitalize">
+                    Filter:
+                </span>
+            </div>
+        </div>
+        <nav class="inline-flex md:order-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
+            <ul class="list-none sm:flex justify-left capitalize transition-all transition-500 ">
+                <li class="flex items-center">
+                    <div class="relative">
+                        <button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link">
+                            <span class="text-base capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
+                            <svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                        </button>
+                        <div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
+                            <div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700">
+                                <a data-v-21fd5df0="" href="/people" class="text-gray-700 cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                                    All
+                                </a>
+                                {% set taxonomy = get_taxonomy(kind="memberships") %}
+                                {% set categories = taxonomy.items %}
+                                {% for category in categories %}
+                                    {% set path = category.name | slugify %}
+                                    {% set fullpath = "/memberships/" ~ path %}
+                                    <a href="{{fullpath}}" class="text-gray-700 cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                                        {{category.name}}
+                                    </a>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+    </header>
+</div>

templates/partials/footer.html

@@ -0,0 +1,35 @@
+{%- set section = get_section(path="footer/_index.md") %}
+{%- set logoPath = section.extra.logoPath %}
+
+<html>
+    <head />
+    <body>
+        <div class="mt-20 border-t border-gray-700"></div>
+        <footer class="bg-transparent">
+            <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
+                <div class="xl:flex xl:gap-4">
+                    <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
+                        <img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
+                        <p class="text-gray-200 text-base font-light leading-6">
+                            {{section.description}}
+                        </p>
+                        {% include "partials/socialLinks.html" %}
+                    </div>
+
+                    <div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
+                        {{ section.content | safe }}
+                    </div>
+
+                </div>
+                <div class="mt-6 mx-auto border-t border-gray-700 pt-8">
+                    <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
+                        © <span id="year"></span> ThreeFold - All rights reserved.
+                        <a target="_blank" href="https://docs.threefold.io/docs/legal/terms_and_conditions" class="leading-6 text-gray-500 hover:text-green">Terms &amp; Conditions |</a>
+                        <a target="_blank" href="https://docs.threefold.io/docs/legal/privacy_policy" class="leading-6 text-gray-500 hover:text-green">Privacy Policy</a>
+
+                    </p>
+                </div>
+            </div>
+        </footer>
+    </body>
+</html>

templates/partials/form.html

@@ -0,0 +1 @@
+<div data-tf-live="01JEXHAZ930FVKSDJ440Y8X375"></div><script src="//embed.typeform.com/next/embed.js"></script>

templates/partials/head.html

@@ -0,0 +1,165 @@
+{% set cloudiBase = 'https://res.cloudinary.com/brycewray-com/image/upload/' %}
+{% set xFmPart1 = 'f_auto,q_auto:eco,w_' %}
+{% set xFmPart2 = ',x_0,z_1/' %}
+{% set fallbackImg = 'typewriter-monochrome_2242164_6260x4374.jpg' %}
+{% set zolaVer = '0.13.0' %}
+<head>
+    <link rel="icon" type="image/x-icon" href="{{ get_url(path='images/icons/favicon.png')}}">
+    {% block title %}
+    <title>{{ config.title }}</title>
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="{{ config.base_url }}">
+    {% if section.title %}
+    <title>{{ section.title }}</title>
+    <meta property="og:title" content="{{ section.title }}">
+    {% elif page.title %}
+    <title>{{ page.title }}</title>
+    <meta property="og:title" content="{{ page.title }}">
+    {%endif%}
+
+  {%if section.extra.imgPath %}
+    <meta name="image" content="{{section.permalink}}{{ section.extra.imgPath }}">
+    <meta property="og:image" content="{{section.permalink}}{{ section.extra.imgPath }}">
+    <meta property="twitter:image" content="{{section.permalink}}{{ section.extra.imgPath }}">
+    {% elif page.extra.imgPath %}
+    <meta name="image" content="{{page.permalink}}{{ page.extra.imgPath }}">
+    <meta property="og:image" content="{{page.permalink}}{{ page.extra.imgPath }}">
+    <meta property="twitter:image" content="{{page.permalink}}{{ page.extra.imgPath }}">
+    {%endif%}
+  
+  {%if section.description%}
+    <meta name="description" content="{{ section.description }}">
+    <meta property="og:description" content="{{ section.description }}">
+    <meta property="twitter:description" content="{{ section.description }}">
+    {%elif page.description%}
+    <meta name="description" content="{{ page.description }}">
+    <meta property="og:description" content="{{ page.description }}">
+    <meta property="twitter:description" content="{{ page.description }}">
+    {%endif%}
+    <meta name="twitter:card" content="summary">
+    {% endblock title %}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css">
+    <!-- Cookie Consent by https://www.FreePrivacyPolicy.com -->
+    <script type="text/javascript" src="//www.freeprivacypolicy.com/public/cookie-consent/4.0.0/cookie-consent.js" charset="UTF-8"></script>
+    <script type="text/javascript" charset="UTF-8">
+    document.addEventListener('DOMContentLoaded', function () {
+      cookieconsent.run({ "notice_banner_type": "headline", "consent_type": "express", "palette": "light", "language": "en", "page_load_consent_levels": ["strictly-necessary"], "notice_banner_reject_button_hide": false, "preferences_center_close_button_hide": false, "website_name": "https://threefold.io/", "website_privacy_policy_url": "https://library.threefold.me/info/legal/#/legal__privacypolicy" });
+    });
+    </script>
+    <!-- Google Tag Manager -->
+    <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-N7PNMFH');
+    </script>
+    <!-- End Google Tag Manager -->
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-100065546-1"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-100065546-1');
+    </script>
+    <!-- Matomo Tag Manager -->
+    <script>
+    var _mtm = window._mtm = window._mtm || [];
+    _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
+    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+    g.async = true; g.src = 'https://analytics.threefold.io/js/container_KIcuIdn4.js'; s.parentNode.insertBefore(g, s);
+    </script>
+    <!-- End Matomo Tag Manager -->
+    <!-- Crisp -->
+    <script type="text/plain" cookie-consent="tracking">
+    window.$crisp = [];
+    window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
+    (function () {
+        d = document;
+        s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = 1;
+        d.getElementsByTagName("head")[0].appendChild(s);
+    })();
+    </script>
+    <!-- Crisp without cookies -->
+    <!-- <script type="text/javascript" cookie-consent="tracking">
+    window.$crisp = [];
+    window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
+    (function () {
+      d = document;
+      s = d.createElement("script");
+      s.src = "https://client.crisp.chat/l.js";
+      s.async = 1;
+      d.getElementsByTagName("head")[0].appendChild(s);
+    })();
+  </script> -->
+    <!-- end of Crisp-->
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- **** BEGINNING, favicons **** -->
+    <!-- generics -->
+    <!-- iOS -->
+    <!-- Android -->
+    <!-- Windows 8, IE 10 -->
+    <!-- Windows 8.1 and up, IE 11 -->
+    <!-- **** CONCLUSION, favicons **** -->
+    <!-- CSS/SCSS -->
+    <link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
+    <style>
+    .space-x-10>:not([hidden])~:not([hidden]){
+      margin-left: calc(1.5rem*calc(1 - var(--tw-space-x-reverse)))!important;
+    }
+    @-moz-document url-prefix() {
+      .lazy:-moz-loading {
+        visibility: hidden;
+      }
+    }
+
+    .ieOnly {
+      display: none;
+    }
+
+    @media all and (-ms-high-contrast: none),
+    (-ms-high-contrast: active) {
+      .ieOnly {
+        display: block;
+      }
+    }
+  @media (min-width: 640px){
+      .sm\:space-x-4>:not([hidden])~:not([hidden]){
+      margin-left: calc(2rem*calc(1 - var(--tw-space-x-reverse)))!important;
+      }
+  }
+    </style>
+    <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=62556aac80366d0019fc1af2&product=sop" async="async"></script>
+    <!-- MailerLite Universal -->
+    <script>
+    (function (m, a, i, l, e, r) {
+      m['MailerLiteObject'] = e; function f() {
+        var c = { a: arguments, q: [] }; var r = this.push(c); return "number" != typeof r ? r : f.bind(c.q);
+      }
+      f.q = f.q || []; m[e] = m[e] || f.bind(f.q); m[e].q = m[e].q || f.q; r = a.createElement(i);
+      var _ = a.getElementsByTagName(i)[0]; r.async = 1; r.src = l + '?v' + (~~(new Date().getTime() / 1000000));
+      _.parentNode.insertBefore(r, _);
+    })(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
+
+    var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
+  </script>
+  <!-- End MailerLite Universal -->
+  <!-- RSS feed -->
+  {% block rss %}
+  <link
+      rel="alternate"
+      type="application/rss+xml"
+      title="RSS"
+      href="{{ get_url(path='atom.xml', trailing_slash=false) }}"
+  >
+  {% endblock %}
+</head>

templates/partials/header.html

@@ -0,0 +1,226 @@
+{%- set section = get_page(path="header/index.md") %}
+{% set header_items = section.content | safe | split(pat="<li>") %}
+
+<header id="header-container">
+    <div class="z-20 fixed top-0 left-0 right-0 bg-black1 lg:bg-transparent lg:absolute w-full">
+        <div class="relative z-50">
+        <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 ">
+            <div>
+                <a href="{{get_url(path='/')}}" class="flex">
+                    <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
+                </a>
+            </div>
+            <div class="-mr-2 -my-2 lg:hidden">
+                <button id="hamburger-btn" type="button" class="bg-black1 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 -->
+                    <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                </button>
+            <button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
+                <!-- Heroicon name: x -->
+                <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-6">
+            <nav class="flex space-x-10">
+            {% for header_item in header_items %}
+            {% if not loop.first %}
+                {% set header_arr = header_item | split(pat="</li>") %}
+                {% set header_label = header_arr[0] %}
+                {% if '<a' in header_label %}
+                    {% set link_label = header_label | striptags %}
+                    {% set link_path = header_label | split(pat="%22") | safe%}
+                    {% set current = get_url(path=link_path[1]) ~ "/" %}
+                    {% if header_label is containing("http") %}
+                        {% if header_label is not containing("threefold") %}
+                        <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
+                            {{link_label}}
+                        </a>
+                        {% endif %}
+                      {% elif current_url and current == current_url %}
+                          <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light active text-pretty tracking-wide transition ease-in-out duration-150">
+                            {{link_label}}
+                          </a>
+                      {% else %}
+                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-white focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
+                          {{link_label}}
+                        </a>
+                      {% endif %}
+                {% else %}
+                    <div class="relative">
+                        {% set button_id = header_label ~ "-menu-btn" | slugify %}
+                    <button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3  text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
+                        <span>{{ header_label }}</span>
+                        <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                    </button>
+                    </div>
+
+                {% endif %}  
+            {% endif %}
+            {% endfor %}
+            </nav>
+
+            <div class="hidden md:inline-block md:order-last">
+                <div class="inline-flex">
+                  {# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
+                    <li class="ml-4">
+                      <a href="https://t.me/threefoldnews" target="_blank" class="text-white">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="18"
+                          height="18"
+                          fill="currentColor"
+                          class="bi bi-telegram"
+                          viewBox="0 0 16 16"
+                        >
+                          <path
+                            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
+                          />
+                        </svg>
+                      </a>
+                    </li>
+        
+                    <li class="ml-4">
+                      <a
+                        href="javascript:;"
+                        onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
+                        class="text-white"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          focusable="false"
+                          data-prefix="far"
+                          data-icon="envelope"
+                          class="h-5 w-5"
+                          role="img"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 512 512"
+                        >
+                          <path
+                            fill="currentColor"
+                            d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
+                          ></path>
+                        </svg>
+                      </a>
+                    </li> 
+                  </ul> #}
+                    <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">Participate</a>
+                </div>
+              </div>
+            </div>
+        </div>
+        </div>
+                        {% for header_item in header_items %}
+                          {% if not loop.first %}
+                              {% set header_arr = header_item | split(pat="</li>") %}
+                              {% set header_label = header_arr[0] %}
+                              {% set header_menu = header_arr[1] %}
+                              {% set menu_id = header_label ~ "-menu" | slugify %}
+
+<nav>
+    <div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+        <div style="background-color: rgba(34 34 34);">
+            <div id="menu" class="conatiner mx-auto">
+                {{header_menu | safe }}
+            </div>
+        </div>            
+        </div>
+    </nav>
+
+
+{% endif %}
+{% endfor %}
+
+    
+        <!--
+        Mobile menu, show/hide based on mobile menu state.
+    
+        Entering: "duration-200 ease-out"
+            From: "opacity-0 scale-95"
+            To: "opacity-100 scale-100"
+        Leaving: "duration-100 ease-in"
+            From: "opacity-100 scale-100"
+            To: "opacity-0 scale-95"
+        -->
+    <div id="hamburger" class="hidden fixed mt-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
+        <div>
+            <div style="background-color: rgba(34 34 34);" class="shadow-xs h-screen divide-y-2 divide-gray-50">
+                <div class="pb-6 sm:px-12 md:px-16 mt-0 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
+
+                    <nav class="flex flex-col justify-around pb-12">
+                    {% for header_item in header_items %}
+
+                        {% if not loop.first %}
+                            {% set header_arr = header_item | split(pat="</li>") %}
+                            {% set header_label = header_arr[0] %}
+                            {% if '<a' in header_label %}
+                                {% set link_label = header_label | striptags %}
+                                {% set link_path = header_label | split(pat="%22") | safe%}
+                                {% if header_label is containing("http") %}
+                                    {% if header_label is not containing("threefold") %}
+                                    <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-50 hover:text-gray-200 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
+                                        {{link_label}}
+                                    </a>
+                                    {% endif %}
+                                {% else %}
+                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
+                                    {{link_label}}
+                                </a>
+                                {% endif %}
+                            {% else %}
+                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
+                                    <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
+                                        {{ header_label }}
+                                        <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                                    </button>
+                                    {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
+                                    <div id="{{menu_id}}" class="z-50 leading-3 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                                        {{ header_arr[1] | safe }}
+                                    </div>
+                    
+                            {% endif %}
+                            <hr/>
+                        {% endif %}
+                    {% endfor %}
+                    {% set section = get_section(path="footer/_index.md")%}
+                    {%- set logoPath = section.extra.logoPath %}
+                    {# <div class="mx-8 mt-8">
+                        <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
+                          <img class="w-32 h-auto" src="{{get_url(path=logoPath)}}" alt="Company name" />
+                          <p class="text-gray-500 text-base leading-6 ">
+                            {{section.description}}
+                          </p>
+                          {% include "partials/socialLinks.html" %}
+                      </div> #}
+
+                      <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
+                        <a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
+                      </div>
+                    </nav>                    
+                </div>
+                
+          </div>
+        
+        </div>
+    </div>
+
+
+</header>
+
+<style>
+
+  nav a:hover{
+  color: #c7c7c7 !important;
+}
+
+.active{
+  color: #c7c7c7 !important;
+}
+.nav_btn:hover {
+  color: #c7c7c7 !important;
+}
+
+</style>

templates/partials/header_custom.html

@@ -0,0 +1,86 @@
+<header id="header-container" class="bg-inherit">
+    <div class="z-10 bg-dark1 w-screen">
+        <div class="relative z-50">
+            <div class="mx-auto bg-dark1 flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
+                <div>
+                    <a href="/" class="flex">
+                        <img  src="images/tf_dark.png" alt="ODFZ Logo" />
+                    </a>
+                </div>
+                <div class="-mr-2 -my-2 lg:hidden">
+                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                    <button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
+                    <nav class="flex space-x-10">
+                        {% for header_item in header_items %}
+                        {% if not loop.first %}
+                            {% set header_arr = header_item | split(pat="</li>") %}
+                            {% set header_label = header_arr[0] %}
+                            {% if '<a' in header_label %}
+                                {% set link_label = header_label | striptags %}
+                                {% set link_path = header_label | split(pat="%22") | safe%}
+                                {% set current = get_url(path=link_path[1]) ~ "/" %}
+                                {% if header_label is containing("http") %}
+                                    {% if header_label is not containing("threefold") %}
+                                    <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                        {{link_label}}
+                                    </a>
+                                    {% endif %}
+                                  {% elif current_url and current == current_url %}
+                                      <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                        {{link_label}}
+                                      </a>
+                                  {% else %}
+                                    <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                      {{link_label}}
+                                    </a>
+                                  {% endif %}
+                            {% else %}
+                            <div class="relative">
+                                {% set button_id = header_label ~ "-menu-btn" | slugify %}
+                            <button type="button" id="{{button_id}}" class="nav_btn py-3  text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
+                                <span>{{ header_label }}</span>
+                                <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                            </button>
+                            </div>
+        
+                        {% endif %}  
+                    {% endif %}
+                    {% endfor %}
+            </nav>
+                </div>
+            </div>
+        </div>
+        
+        {% for header_item in header_items %}
+            {% set header_parts = header_item | split(pat="</li>") %}
+            {% set header_label = header_parts[0] %}
+            {% set header_menu = header_parts[1] %}
+            {% set menu_id = header_label ~ "-menu" | slugify %}
+            <nav>
+                <div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                    <div class="bg-gray-800 lg:bg-gray-900">
+                        <div class="mx-8 lg:mx-20 px-6 py-4 text-white">
+                            {{ header_menu | safe }}
+                        </div>
+                    </div>            
+                </div>
+            </nav>
+        {% endfor %}
+    </div>
+</header>
+
+<style>
+    .bg-dark1 {
+      background: rgba(15,15,15,1);
+    }
+</style>

templates/partials/hero/hero1.html

@@ -0,0 +1,22 @@
+<div class="text-white fade-in">
+    <div class="relative isolate px-6 pt-14 lg:px-8">
+      <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+          <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
+            Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-white"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
+          </div>
+        </div>
+        <div class="text-center">
+          <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+          <h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">This is Hero1.html</h1>
+          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
+          <p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
+          <div class="mt-10 flex items-center justify-center gap-x-6">
+            <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
+            <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/hero/hero2.html

@@ -0,0 +1,19 @@
+<div class="relative isolate overflow-hidden">
+    <div class="mx-auto max-w-7xl lg:col-span-2 px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:gap-x-20 lg:px-8 lg:py-40">
+      <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
+        <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+        <h1 class="mt-10 font-semibold tracking-tight text-pretty text-white lg:text-6xl text-4xl">This is Hero2.html</h1>
+        <h2 class="fade-in text-pretty lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
+        <p class="mt-8 text-lg font-light text-gray-50 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
+        <div class="mt-10 flex items-center gap-x-6">
+          <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
+          <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+        </div>
+      </div>
+      <div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32">
+        <div class="max-w-3xl flex-none lg:max-w-5xl">
+          <img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md bg-white/5  shadow-2xl ">
+        </div>
+      </div>
+    </div>
+</div>

templates/partials/hero/hero3.html

@@ -0,0 +1,23 @@
+<div class="">
+  <div class="relative isolate overflow-hidden pt-14">
+    <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" class="absolute inset-0 -z-10 size-full object-cover opacity-30">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+          <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
+            Announcing our next round of funding. <a href="#" class="font-semibold text-gray-200 hover:text-white"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
+          </div>
+        </div>
+        <div class="text-center">
+          <h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">This is Hero3.html</h1>
+          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
+          <p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
+          <div class="mt-10 flex items-center justify-center gap-x-6">
+            <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
+            <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

templates/partials/hero/hero4.html

@@ -0,0 +1,19 @@
+<div class="">
+    <div class="relative isolate pt-14">
+      <div class="py-24 sm:py-32 lg:pb-40">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+          <div class="mx-auto max-w-2xl text-center">
+            <h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance text-white">This is Hero4.html</h1>
+            <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
+            <p class="mt-8 lg:text-xl text-lg font-light text-gray-50 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
+            <div class="mt-10 flex items-center justify-center gap-x-6">
+              <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get started</a>
+              <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+            </div>
+          </div>
+          <img src="https://tailwindui.com/plus/img/component-images/dark-project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="mt-16 rounded-md bg-white/5 ring-1 shadow-2xl ring-white/10 sm:mt-24">
+        </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/hero/hero5.html

@@ -0,0 +1,29 @@
+<div class=" fade-in">
+    <div class="relative isolate pt-14">
+        <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
+            <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
+                <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+                <h1 class="mt-10 text-4xl font-semibold tracking-tight text-white lg:text-6xl">
+                    This is Hero5.html
+                </h1>
+                <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
+                <p class="mt-8 text-lg font-light text-gray-50 sm:text-xl">
+                    Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. 
+                    Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
+                </p>
+                <div class="mt-10 flex items-center gap-x-6">
+                    <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
+                        Get started
+                    </a>
+                    <a href="#" class="text-sm font-semibold text-white hover:text-gray-200">
+                        Learn more <span aria-hidden="true">→</span>
+                    </a>
+                </div>
+            </div>
+            <div class="mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
+                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="https://images.unsplash.com/photo-1622615875737-0d959726e947?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
+                    alt="Mobile App Screenshot">
+            </div>
+        </div>
+    </div>
+</div>

templates/partials/hero/hero6.html

@@ -0,0 +1,28 @@
+<div class="relative fade-in">
+  <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
+    <div class="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-6">
+      <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
+        <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+        <h1 class="mt-10 text-4xl font-semibold tracking-tight text-white lg:text-6xl">
+            This is Hero6.html
+        </h1>
+        <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
+        <p class="mt-8 text-lg font-light text-gray-50 lgl:text-xl">
+            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. 
+            Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
+        </p>
+        <div class="mt-10 flex items-center gap-x-6">
+            <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
+                Get started
+            </a>
+            <a href="#" class="text-sm font-semibold text-white hover:text-gray-200">
+                Learn more <span aria-hidden="true">→</span>
+            </a>
+        </div>
+    </div>
+    </div>
+    <div class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
+      <img class="aspect-3/2 w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto h-full" src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80" alt="">
+    </div>
+  </div>
+</div>

templates/partials/hero/hero7.html

@@ -0,0 +1,38 @@
+<div class="fade-in">
+    <div class="relative">
+        <div class="mx-auto max-w-7xl">
+            <div class="relative z-10 pt-14 lg:w-full lg:max-w-2xl">
+                <div class="relative px-6 py-32 sm:py-40 lg:px-8 lg:py-56 lg:pr-0">
+                    <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
+                        <div class="hidden sm:mb-10 sm:flex">
+                            <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-50 ring-1 ring-gray-700 hover:ring-gray-600">
+                                Anim aute id magna aliqua ad ad non deserunt sunt.
+                                <a href="#" class="font-semibold whitespace-nowrap text-white">
+                                    <span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span>
+                                </a>
+                            </div>
+                        </div>
+                        <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER IF NEEDED</p>
+                        <h1 class="text-4xl lg:text-6xl font-semibold tracking-tight text-white">This is hero7.html</h1>
+                        <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
+                        <p class="mt-8 text-lg sm:text-xl font-light text-gray-50">
+                            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. 
+                            Elit sunt amet fugiat veniam occaecat fugiat aliqua.
+                        </p>
+                        <div class="mt-10 flex items-center gap-x-6">
+                            <a href="#" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
+                                Get started
+                            </a>
+                            <a href="#" class="text-sm/6 font-semibold text-gray-50 hover:text-gray-300">
+                                Learn more <span aria-hidden="true">→</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-gray-800 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
+            <img class="aspect-3/2 object-cover lg:aspect-auto lg:size-full" src="https://images.unsplash.com/photo-1483389127117-b6a2102724ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80" alt="">
+        </div>
+    </div>
+</div>

templates/partials/hero/hero8.html

@@ -0,0 +1,54 @@
+<div class="relative">
+    <main>
+        <div class="relative isolate">
+            <div class="overflow-hidden">
+                <div class="mx-auto max-w-7xl px-6 lg:pb-24 pt-12 lg:px-8 lg:pt-12">
+                    <div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
+                        <div class="relative lg:hidden pb-4">
+                            <img src="/images/people_1.jpg">
+                            <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                        </div>
+                        <div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
+                            <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+                            <h1 class="fade-in text-4xl lg:text-6xl font-semibold tracking-tight text-white">This is Hero8.html</h1>
+                            <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">This is smaller title h2</h2>
+                            <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
+                            <div class="mt-10 flex items-center gap-x-6">
+                                <a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
+                                <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+                            </div>
+                        </div>
+                        <div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">
+                            <div class="ml-auto w-44 flex-none space-y-8 lg:pt-36 hidden lg:block">
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_1.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                            </div>
+                            <div class="mr-auto w-44 flex-none space-y-8 lg:pt-24 hidden lg:block">
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_2.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_3.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                            </div>
+                            <div class="w-44 flex-none space-y-8 lg:pt-12 hidden lg:block">
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_4.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_5.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>

templates/partials/hero/hero9.html

@@ -0,0 +1,22 @@
+<div class="fade-in">
+    <div class="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20 pt-14">
+      <div class="mx-auto max-w-7xl px-6 py-32 lg:py-40 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-x-16 xl:grid-cols-2 xl:gap-x-16">
+          <div class="text-content">
+            <p class="text-base/7 font-light text-white tracking-wide">SUBHEADER</p>
+            <h1 class="text-4xl font-semibold tracking-tight text-white lg:text-6xl">This is hero9.html</h1>
+            <h2 class="mt-6 text-4xl font-normal tracking-tight text-white lg:text-5xl">This is smaller title h2</h2>
+            <p class="mt-6 text-lg font-light text-gray-200 lg:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</p>
+            <div class="mt-10 flex items-center gap-x-6">
+              <a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
+              <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
+            </div>
+          </div>
+          <div class="flex justify-center items-center">
+            <img src="https://images.unsplash.com/photo-1567532900872-f4e906cbf06a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80" alt="" class="w-full max-w-lg rounded-2xl object-cover">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/home/banner.html

@@ -0,0 +1,9 @@
+<div class="bg-transparent py-24 mb-12 flex justify-center items-center">
+    <div class="mx-auto max-w-7xl px-4 lg:px-6">
+        <img 
+        class="object-contain w-full lg:w-[100%] max-w-[100%]" 
+        src="images/gif2.gif" 
+        alt="TF">
+    </div>
+  </div>
+  

templates/partials/home/bento.html

@@ -0,0 +1,115 @@
+<div class=" py-24 sm:py-32">
+    <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+      <span class="text-base/7 font-light text-white tracking-wide">CONCEPT</span>
+      <p class="mt-2 max-w-lg text-4xl font-medium tracking-tight text-pretty text-white sm:text-5xl">Value Propositions</p>
+      <div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-3">
+        <!-- row1 2col -->
+        <div class="relative lg:col-span-3">
+          <div class="absolute inset-px rounded-lg bg-black1 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
+          <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
+            <img class="h-80 object-cover object-left" src="/images/freezone2.jpg" alt="">
+            <div class="p-10 pt-4">
+              <h3 class="text-base/7 font-light text-white tracking-wide">NEXT-GEN BUSINESS</h3>
+              <p class="mt-1 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Freezone</p>
+                 <!-- row1 2col -->
+              <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">A future-focused ecosystem with streamlined business processes, decentralized systems, and global connectivity.</p>
+            </div>
+          </div>
+          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"></div>
+        </div>
+         <!-- row1- 2 column -->
+        <div class="relative lg:col-span-3">
+          <div class="absolute inset-px rounded-lg bg-black1 lg:rounded-tr-[2rem]"></div>
+          <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
+            <img class="h-80 object-cover object-left lg:object-right" src="images/dc2.jpg" alt="">
+            <div class="p-10 pt-4">
+              <h3 class="text-base/7 font-light text-white tracking-wide">SUSTAINABLE CLOUD & AI INFRASTRUCTURE</h3>
+              <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">DataCenter City</p>
+              <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Zanzibar’s largest, most sustainable data center, equipped with Threefold Nodes and co-owned AI integrated with city services.</p>
+            </div>
+          </div>
+          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-tr-[2rem]"></div>
+        </div>
+        <!-- row2 - 3col -->
+        <div class="relative lg:col-span-2">
+          <div class="absolute inset-px  bg-white/5 "></div>
+          <div class="relative flex h-full flex-col overflow-hidden ">
+            <img class="h-80 object-cover object-left" src="images/bot2.jpg" alt="">
+            <div class="p-10 pt-4">
+                <h3 class="text-base/7 font-light text-white tracking-wide">SECURE AI & DIGITAL IDENTITY</h3>
+                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Hero</p>
+                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Private, secure communication and transactions with efficient AI assisted collaboration and full control of your own data and digital identity.</p>
+              </div>
+          </div>
+          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
+        </div>
+        <!-- row2 - 3col -->
+        <div class="relative lg:col-span-2">
+          <div class="absolute inset-px  bg-white/5"></div>
+          <div class="relative flex h-full flex-col overflow-hidden ">
+            <img class="h-80 object-cover" src="/images/startup1.jpg" alt="">
+            <div class="p-10 pt-4">
+              <h3 class="text-base/7 font-light text-white tracking-wide">STARTUP GROWTH & INNOVATION HUB</h3>
+              <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Venture Creator</p>
+              <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Empowers startups with strategic guidance, funding support, global networking, talent acquisition, and operational resources.</p>
+            </div>
+          </div>
+          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
+        </div>
+        <!-- row2 - 3col -->
+        <div class="relative lg:col-span-2">
+          <div class="absolute inset-px  bg-white/5 "></div>
+          <div class="relative flex h-full flex-col overflow-hidden ">
+            <img class="h-80 object-cover" src="/images/eco3.jpg" alt="">
+            <div class="p-10 pt-4">
+                <h3 class="text-base/7 font-light text-white tracking-wide">SUSTAINABLE FUTURE</h3>
+                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Regenerative Living</p>
+                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Tech-driven sustainable living powered by clean energy, organic food, and a resilient, collaborative community with global impact.</p>
+            </div>
+          </div>
+          <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
+        </div>
+        <!-- row2 - 3col -->
+        <div class="relative lg:col-span-2">
+            <div class="absolute inset-px rounded-lg bg-white/5 lg:rounded-bl-[2rem]"></div>
+            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
+              <img class="h-80 object-cover object-left" src="/images/zone2.jpg" alt="">
+              <div class="p-10 pt-4">
+                <h3 class="text-base/7 font-light text-white tracking-wide">DECENTRALIZED ECONOMY</h3>
+                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Digital Assets</p>
+                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Tokenized assets drive fair trade, sustainable economies, and stability with resilient digital currencies.</p>
+            </div>
+            </div>
+            <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 lg:rounded-bl-[2rem]"></div>
+          </div>
+          <!-- row2 - 3col -->
+          <div class="relative lg:col-span-2">
+            <div class="absolute inset-px rounded-lg bg-white/5"></div>
+            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+              <img class="h-80 object-cover" src="/images/zone1.jpg" alt="">
+              <div class="p-10 pt-4">
+                <h3 class="text-base/7 font-light text-white tracking-wide">LEGAL AUTONOMY </h3>
+                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Autonomous Zone</p>
+                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Enjoy legal independence, data ownership, and secure connections in a future-focused global ecosystem.</p>
+            </div>
+            </div>
+            <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5"></div>
+          </div>
+          <!-- row2 - 3col -->
+          <div class="relative lg:col-span-2">
+            <div class="absolute inset-px rounded-lg bg-white/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
+            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
+              <img class="h-80 object-cover" src="/images/home1.jpg" alt="">
+              <div class="p-10 pt-4">
+                <h3 class="text-base/7 font-light text-white tracking-wide">AI-POWERED INFRASTRUCTURE</h3>
+                <p class="mt-2 lg:text-2xl text-xl font-normal tracking-normal text-white">Augmented Intelligence</p>
+                <p class="mt-2 max-w-lg lg:text-md text-sm font-light text-white">Homes power Zanzibar’s data center, with co-owned AI integrated into services and generating citizen income.</p>
+            </div>
+            </div>
+            <div class="pointer-events-none absolute inset-px rounded-lg ring-1 shadow-sm ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"></div>
+          </div>
+        
+      </div>
+    </div>
+  </div>
+  

templates/partials/home/cta.html

@@ -0,0 +1,14 @@
+<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">
+      <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">
+        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">
+          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>
+      </div>
+    </div>
+</div>
+

templates/partials/home/faq.html

@@ -0,0 +1,191 @@
+
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        inter: ['Inter', 'sans-serif'],
+                    },
+                },
+            },
+        };
+    </script>
+    <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>
+
+            <!-- Accordion component -->
+            <div class="divide-y divide-white/50 my-10">
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-01"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-01"
+                        >
+                            <span style="color: #fff;">What is CyberCity?</span>
+                            <svg class="fill-white 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>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-01"
+                        role="region"
+                        aria-labelledby="faqs-title-01"
+                        class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :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">
+                                CyberCity is a next-generation smart city in Fumba, Zanzibar, designed to integrate cutting-edge technology, sustainability, and economic innovation. It features a Digital Freezone, regenerative living, AI-driven services, and a decentralized economic model, and many more.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-02"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-02"
+                        >
+                            <span style="color: #fff;">Why was Fumba, Zanzibar chosen as the project site?</span>
+                            <svg class="fill-white 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>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-02"
+                        role="region"
+                        aria-labelledby="faqs-title-02"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :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">
+                                Fumba is part of the 2042 Fumba Free Economic Zone Master Plan, strategically selected for its rapid development potential, economic incentives, and unique blend of cultural heritage and natural beauty. It offers a stable environment for global investment and innovation.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-04"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-04"
+                        >
+                            <span style="color: #fff;">What is the Digital Freezone, and how does it benefit businesses?</span>
+                            <svg class="fill-white 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>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-04"
+                        role="region"
+                        aria-labelledby="faqs-title-04"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :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">
+                                The Digital Freezone is a business-friendly ecosystem within Cybercity that features streamlined regulations, financial transparency, and global connectivity. It provides a light-touch regulatory environment, making it ideal for startups, digital entrepreneurs, and international businesses.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-05"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-05"
+                        >
+                            <span style="color: #fff;">How does the project support sustainability and regenerative living?</span>
+                            <svg class="fill-white 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>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-05"
+                        role="region"
+                        aria-labelledby="faqs-title-05"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :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">
+                                CyberCity is designed with eco-friendly urban planning, featuring car-free green spaces, smart energy solutions like Vehicle-to-Grid (V2G) integration, organic food production, and co-owned AI that optimizes resources while generating income for citizens.
+                             </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-06"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-06"
+                        >
+                            <span style="color: #fff;">How can I participate in the CyberCity movement?</span>
+                            <svg class="fill-white 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>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-06"
+                        role="region"
+                        aria-labelledby="faqs-title-06"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :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">
+                                You can invest, register a business, become a digital citizen, or move to CyberCity as an entrepreneur or resident. The city offers opportunities for innovators, investors, and forward-thinking individuals to be part of a revolutionary ecosystem.
+                        </div>
+                    </div>
+                </div> 
+            </div>                                                                                              
+    </div>
+            <!-- End: Accordion component -->
+
+        </div>
+    </main>
+
+
+
+   

templates/partials/home/farmers.html

@@ -0,0 +1,143 @@
+<div class="bg-transparent py-24 pb-6">
+  <div class="mx-auto max-w-8xl px-6 lg:max-w-8xl lg:px-8">
+    <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+      <span class="text-base/7 font-light text-white tracking-wide">CONCEPT</span>
+      <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">
+        Unique Value Proposition</h2>
+      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
+      CyberCity Zanzibar is a city that combines sustainable living, streamlined business processes, cutting-edge datacenters, venture creation, and secure digital tools that empower citizens, businesses, and investors. 
+      </p>
+  </div>
+<section class="pb-32 bg-transparent">
+  <div class="max-w-6xl mx-2 md:mx-10 lg:mx-10 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-4 gap-y-4 lg:max-w-none lg:grid-cols-4">
+         <!-- concept -->
+         <div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/digital.jpg');">
+          <div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
+          <dt class="relative z-10 flex items-center gap-x-3 text-2xl font-semibold tracking-tight text-white rounded-2xl">
+            Digital Freezone
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">.</p>
+            <p class="mt-6">
+            </p>
+          </dd>
+        </div>
+         <!-- concept -->
+         <div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/datacenter.jpg');">
+          <div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
+          <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
+            Datacenter City
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
+          </dd>
+        </div>
+         <!-- concept -->
+         <div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/twin.jpg');">
+          <div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
+          <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
+            Digital Hero
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
+            <p class="mt-6">
+            </p>
+          </dd>
+        </div>
+         <!-- concept -->
+         <div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/startup.jpg');">
+          <div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
+          <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
+            Venture Creator
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
+            <p class="mt-6">
+            </p>
+          </dd>
+        </div>
+         <!-- concept -->
+         <div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/eco.jpg');">
+          <div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
+          <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
+            Regenerative Living
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
+            <p class="mt-6">
+            </p>
+          </dd>
+        </div>
+         <!-- concept -->
+         <div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/assets.jpg');">
+          <div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
+          <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
+            Sovereign Zone
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
+            <p class="mt-6">
+            </p>
+          </dd>
+        </div>
+         <!-- concept -->
+         <div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/ai.jpg');">
+          <div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
+          <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
+            Augmented Intelligence
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md"></p>
+            <p class="mt-6">
+            </p>
+          </dd>
+        </div>
+         <!-- concept -->
+         <div class="fade-in-box relative flex flex-col p-8 rounded-lg bg-cover bg-center" style="background-image: url('/images/assets.jpg');">
+          <div class="absolute inset-0 bg-black/50 rounded-lg"></div> <!-- Semi-transparent overlay -->
+          <dt class="relative z-10 flex items-center gap-x-3 text-2xl rounded-2xl font-semibold text-white">
+              Digital Assets
+          </dt>
+          <dd class="relative z-10 mt-4 flex flex-auto flex-col">
+              <p class="flex-auto leading-normal font-light text-gray-200 text-md">
+                  
+              </p>
+              <p class="mt-6"></p>
+          </dd>
+      </div>      
+      </div>
+    </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>

templates/partials/home/features.html

@@ -0,0 +1,79 @@
+<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>
+      <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-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>
+      <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>
+    </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>
+        </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 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>
+        </div>
+        <div class="lg:pt-4 pt-0">
+          <dt class="font-semibold text-base text-gray-200">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 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>
+        </div>
+        <div class="lg:pt-4 pt-0">
+          <dt class="font-semibold text-base text-gray-200">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 text-gray-300 text-sm mb-4">Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</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>

templates/partials/home/grid_stats.html

@@ -0,0 +1,139 @@
+<div class="bg-transparent relative isolate overflow-hidden py-24">
+    <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 lg:text-5xl text-4xl font-normal tracking-tight text-white ">A Place to Live and Innovate</h2>
+          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Together, we aim to create a future that reflects our values. Here, we provide a safe and inspiring environment for startups to build solutions that can make a real difference. We believe that with technology, collaboration, and good intentions, anything is possible.</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-5">
+          <!-- planet -->
+          <div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
+            <div class="tooltip">
+              <img src="images/icons/planet.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
+              <dt class="order-first text-2xl font-semibold tracking-tight text-white">Planet First</dt>
+              <dd class="text-sm/6 font-light text-gray-300">Utmost respect to mother earth in every action.</dd>
+            </div>
+          </div>
+          <!-- people -->
+          <div class="fade-in flex flex-col bg-white/5 p-6">
+            <div class="tooltip">
+              <img src="images/icons/people.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
+              <dt class="order-first text-2xl font-semibold tracking-tight text-white">People First</dt>
+              <dd class="text-sm/6 font-light text-gray-300">Bring equality of opportunities for everyone</dd>
+            </div>
+          </div>
+          <!-- open -->
+          <div class="fade-in flex flex-col bg-white/5 p-6">
+            <div class="tooltip">
+              <img src="images/icons/open.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
+              <dd class="order-first text-2xl font-semibold tracking-tight text-white">Open Source</dd>
+              <dt class="text-sm/6 font-light text-gray-300">Value open source methods for many aspects in life.</dt>
+            </div>
+          </div>
+          <!-- Simple -->
+          <div class="fade-in flex flex-col bg-white/5 p-6">
+            <div class="tooltip">
+              <img src="images/icons/simple.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
+              <dd class="order-first text-2xl font-semibold tracking-tight text-white">Simplicity</dd>
+              <dt class="text-sm/6 font-light text-gray-300">Erase complexity of things that kills progress.</dt>
+            </div>
+          </div>
+          <!-- authemtic -->
+          <div class="fade-in flex flex-col bg-white/5 p-6">
+            <div class="tooltip">
+              <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
+              <img src="images/icons/authentic.svg" alt="cores" class="w-20 h-auto mx-auto py-2" />
+              <dt class="order-first text-2xl font-semibold tracking-tight text-white">Authenticity</dt>
+              <dd class="text-sm/6 font-light text-gray-300">Commited to restore authenticity of people and information.</dd>
+            </div>
+          </div>
+        </dl>
+        
+      </div>
+      
+    </div>
+  </div>
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Initialize the countUp for each of the numbers
+      new CountUp('ssd', 0, 1910, 0, 2.5).start();
+      new CountUp('cores', 0, 46934, 0, 2.5).start();
+      new CountUp('nodes', 0, 1596, 0, 2.5).start();
+      new CountUp('countries', 0, 40, 0, 2.5).start();
+      new CountUp('farms', 0, 900, 0, 2.5).start();
+    });
+  </script>
+  
+
+<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 */
+    }
+
+    /* Tooltip container */
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  width: 80%;
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 12px;
+  visibility: hidden;
+  background-color: rgb(26 26 26 / 90%);
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -7px;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+  /* right: -60px; */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+@media (max-width: 480px) {
+    .tooltip .tooltiptext {
+        position: absolute;
+  z-index: 1;
+  bottom: -7px !important;
+  right: 0px !important;
+  top: 0px !important;
+  left: 0px !important;
+    }
+
+}
+  </style>
+  

templates/partials/home/hero.html

@@ -0,0 +1,91 @@
+<head>
+  <link href="./output.css" rel="stylesheet">
+</head>
+
+<div class="relative isolate overflow-hidden h-screen my-8">
+  <video autoplay loop muted class="absolute inset-0 -z-10 h-full w-full object-cover">
+    <source src="/videos/cybercity_comp.mp4" type="video/mp4">
+  </video>
+  <div class="flex flex-col justify-center items-center mx-auto max-w-3xl py-32 sm:py-48 lg:py-56 text-center h-full">
+    <div class="text-center">
+      <img src="/images/logo_s.svg" alt="Cybercity Logo" class="w-30 h-auto mx-auto" />
+      <h2 class="text-xl lg:text-2xl text-gray-200 font-normal">Welcome to a New Regenerative Startup City in the Heart of Zanzibar</h2>
+      <p class="mt-2 text-lg sm:text-xl leading-7 sm:leading-8 font-light text-white mx-4 sm:mx-0">Spanning 700,000m² in the heart of Fumba, Zanzibar, CyberCity is a place where talent meets opportunity, innovation embraces sustainability, and collaboration fuels progress. 
+      </p>
+    </div>
+  </div>
+</div>
+
+<style>
+  html, body {
+    margin: 0;
+    height: 100%;
+  }
+
+  .relative.isolate.overflow-hidden.h-screen {
+    height: 100vh;
+  }
+
+  video {
+    object-fit: cover;
+  }
+
+  .bg-black {
+    color: white;
+    background: #000;
+  }
+
+  .main-button {
+    color: #fff;
+   padding: 1rem;
+   background-color: blue;
+  }
+
+  .bg-hover {
+    color: white;
+    background: #020202;
+    
+  }
+
+  /* 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 */
+    }
+
+  /* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
+  @media (max-width: 640px) {
+    h1 {
+      font-size: 2rem; /* Smaller font for mobile */
+    }
+    
+    h2 {
+      font-size: 1.25rem; /* Smaller font for mobile */
+    }
+
+    p {
+      font-size: 1rem; /* Smaller font for mobile */
+      margin-left: 1rem; /* Margin left for mobile */
+      margin-right: 1rem; /* Margin right for mobile */
+      line-height: 1.5; /* Smaller line spacing */
+    }
+  }
+</style>

templates/partials/home/hero_old.html

@@ -0,0 +1,44 @@
+<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-5xl fade-in">We are Building <br>a New Internet</h2>
+        <p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
+        <br>
+        <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>
+        <br>
+        <div class="mt-10 flex items-center justify-center gap-x-6">
+          <a href="/what" 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">What We've Built</a>
+          <a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">Read TF Docs<span aria-hidden="true">→</span></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/home/products.html

@@ -0,0 +1,27 @@
+<div class="overflow-hidden bg-transparent py-24 lg:py-16">
+    <div class="mx-auto max-w-7xl md:px-6 lg:px-8">
+      <div class="grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
+        <div class="sm:px-6 lg:px-0">
+          <div class="relative isolate overflow-hidden bg-transparent px-6 pt-8 sm:mx-auto sm:max-w-2xl sm:rounded-3xl sm:pl-16 sm:pr-0 sm:pt-16 lg:mx-0 lg:max-w-none">
+            <div class="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
+              <img src="images/web4.png" alt="Web4 Preview" class="w-full max-w-none fade-in blinking-effect">
+            </div>
+          </div>
+        </div>
+        <div class="px-6 lg:px-0 lg:pl-4 lg:pt-4">
+          <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
+            <p class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock Web4 with ThreeFold</p>
+            <p class="mt-6 mx-automax-w-3xl text-pretty lg:text-2xl text-xl font-normal text-gray-200 fade-in">Revolutionary Tools for the Decentralized Internet.</p>
+            <div class="mt-6 max-w-xl space-y-8 text-base/7 text-gray-300 lg:max-w-none">
+                <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted Web4 routers and decentralized nodes, our products redefine digital autonomy and connectivity.</p>
+            </div>
+            <div class="mt-10 flex items-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="/action" class="fade-in text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/home/residents.html

@@ -0,0 +1,53 @@
+<div class="relative bg-white/5">
+    <main>
+        <div class="relative isolate">
+            <div class="overflow-hidden">
+                <div class="mx-auto max-w-7xl px-6 lg:pb-24 pt-12 lg:px-8 lg:pt-12">
+                    <div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
+                        <div class="relative lg:hidden pb-4">
+                            <img src="/images/people_1.jpg">
+                            <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                        </div>
+                        <div class="relative w-full max-w-xl lg:shrink-0 xl:max-w-2xl lg:order-first sm:pt-12">
+                            <h2 class="text-base/7 font-light text-white tracking-wide">PARTICIPATE</h2>
+                            <h1 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white">Become a Part of the Movement</h1>
+                            <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Find out how you can join CyberCity and be part of the future. Whether you're looking to invest, launch your business, become a digital citizen, or move into the heart of innovation, now is your chance to be among the first pioneers shaping this groundbreaking ecosystem.</p>
+                            <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Be the First to Shape the Future – Join Us Now!</p>
+                            <div class="mt-10 flex items-center gap-x-6">
+                                <a href="/ventures" class="rounded-md main-button px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Learn More</a>
+                            </div>
+                        </div>
+                        <div class="mt-14 flex justify-end gap-8 lg:mt-0 lg:pl-0">
+                            <div class="ml-auto w-44 flex-none space-y-8 lg:pt-36 hidden lg:block">
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_1.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                            </div>
+                            <div class="mr-auto w-44 flex-none space-y-8 lg:pt-24 hidden lg:block">
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_2.jpg" alt="" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_3.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                            </div>
+                            <div class="w-44 flex-none space-y-8 lg:pt-12 hidden lg:block">
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_4.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                                <div class="relative hidden lg:block">
+                                    <img src="/images/people_5.jpg" alt="" class="aspect-[3/4] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
+                                    <div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>

templates/partials/home/site.html

@@ -0,0 +1,29 @@
+<div class="relative mt-24 bg-white/5">
+    <main class="lg:relative">
+        <div class="mx-auto w-full lg:grid lg:grid-cols-2 lg:gap-4 lg:items-center text-center lg:text-left">
+            <!-- Text Section -->
+            <div class="relative col-span-1 px-6 sm:px-8 xl:pr-16">
+                <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-gray-50">
+                    <span class="text-base/7 font-light text-white tracking-wide">PROJECT SITE</span>
+                    <br>
+                    <span class="block  text-white">Discover Fumba</span>
+                </h2>
+                <p class="text-left my-6 text-white max-w-4xl text-pretty lg:text-xl text-lg font-light fade-in">
+                    Located in the heart of Zanzibar,Fumba offers a unique opportunity to merge modern development with cultural heritage and natural beauty.<br><br>
+                    As part of the 2042 Fumba Free Economic Zone Master Plan, Fumba is set to become a key driver of economic growth and innovation in the region, making it the perfect location for a Cybercity.
+                </p>
+                <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
+                    <div class="rounded-md shadow">
+                        <a href="#" class="fade-in flex w-full items-center justify-center rounded-xl border border-transparent px-6 py-2 text-base font-medium text-black bg-white hover:bg-indigo-700">
+                            Learn More
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Image Section -->
+            <div class="relative col-span-1">
+                <img class="h-full w-full object-cover" src="/images/fumba.jpg" alt="Fumba">
+            </div>
+        </div>
+    </main>
+</div>

templates/partials/home/site2.html

@@ -0,0 +1,18 @@
+<div class="overflow-hidden bg-gray-800 py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-4">
+      <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+        <div class="lg:pr-8 lg:pt-4">
+          <div class="lg:max-w-lg">
+            <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-gray-50">
+              <span class="text-base/7 font-light text-white tracking-wide">PROJECT SITE</span>
+              <span class="block xl:inline text-white">Discover Fumba</span>
+            </h2>
+            <p class="text-left my-6 text-white max-w-4xl text-pretty lg:text-xl text-lg font-light fade-in">
+              Fumba, located in the heart of Zanzibar, offers a unique opportunity to merge modern development with cultural heritage and natural beauty. As part of the 2042 Fumba Free Economic Zone Master Plan, Fumba is set to become a key driver of economic growth and innovation in the region. This transformation positions Fumba as the ideal site for CyberCity, a future-focused development designed to inspire sustainability, collaboration, and prosperity.
+            </p>
+          </div>
+        </div>
+        <img src="images/znz.jpg" alt="Product screenshot" class="h-full max-w-none rounded-s lg:pr-0 md:-ml-4 lg:-ml-0">
+      </div>
+    </div>
+  </div>

templates/partials/home/web4.html

@@ -0,0 +1,78 @@
+<div class="bg-transparent relative isolate overflow-hidden pt-12 pb-24">
+    <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>
+          <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>
+          <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 text-gray-200 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>
+          <!--
+          <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;">
+                <g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+                    <g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
+                        <path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
+                    </g>
+                </g>
+            </svg>
+            <a href="/action" class="fade-in  text-balance text-2xl font-semibold tracking-tight text-white lg:text-3xl blinking-effect">12.12.2024</a>
+        </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="/action" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+        </div>
+        
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Initialize the countUp for each of the numbers
+      new CountUp('capacity', 0, 1910, 0, 2.5).start();
+      new CountUp('cores', 0, 46934, 0, 2.5).start();
+      new CountUp('nodes', 0, 1596, 0, 2.5).start();
+      new CountUp('countries', 0, 40, 0, 2.5).start();
+      new CountUp('farms', 0, 900, 0, 2.5).start();
+    });
+  </script>
+  
+
+<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 */
+    }
+
+      
+    /* Apply the blinking animation to the link */
+    .blinking-effect {
+      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+    }
+
+  </style>
+  
+  

templates/partials/icons/bar-svgrepo-com.svg

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#A39B8D;" d="M406.261,155.826h-11.13V11.13h11.13V155.826z M261.565,11.13h-11.13v144.696h11.13V11.13z
+	 M116.87,11.13h-11.13v144.696h11.13V11.13z"/>
+<path style="fill:#F7F2CD;" d="M467.478,278.261H333.913l55.652-133.565h22.261L467.478,278.261z M267.13,144.696H244.87
+	l-55.652,133.565h133.565L267.13,144.696z M122.435,144.696h-22.261L44.522,278.261h133.565L122.435,144.696z"/>
+<path style="fill:#FFFCE3;" d="M446.609,278.261h-91.826l40.812-122.435h10.203L446.609,278.261z M261.101,155.826h-10.203
+	l-40.811,122.435h91.826L261.101,155.826z M116.405,155.826h-10.203L65.391,278.261h91.826L116.405,155.826z"/>
+<path style="fill:#F5D470;" d="M369.212,155.826c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391
+	s33.391,14.949,33.391,33.391c0,3.903-0.677,7.648-1.908,11.13H369.212z M287.484,155.826c1.231-3.483,1.908-7.227,1.908-11.13
+	c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13H287.484z M142.788,155.826
+	c1.231-3.483,1.908-7.227,1.908-11.13c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391
+	c0,3.903,0.677,7.648,1.908,11.13H142.788z"/>
+<path style="fill:#D19B3F;" d="M434.087,144.696c0,3.903-0.677,7.648-1.908,11.13h-20.353v-11.13c0-6.147-4.983-11.13-11.13-11.13
+	c-6.147,0-11.13,4.983-11.13,11.13v11.13h-20.353c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391
+	S434.087,126.254,434.087,144.696z M256,111.304c-18.442,0-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13h20.353
+	v-11.13c0-6.147,4.983-11.13,11.13-11.13s11.13,4.983,11.13,11.13v11.13h20.353c1.231-3.483,1.908-7.227,1.908-11.13
+	C289.391,126.254,274.442,111.304,256,111.304z M111.304,111.304c-18.442,0-33.391,14.949-33.391,33.391
+	c0,3.903,0.677,7.648,1.908,11.13h20.353v-11.13c0-6.147,4.983-11.13,11.13-11.13c6.147,0,11.13,4.983,11.13,11.13v11.13h20.353
+	c1.231-3.483,1.908-7.227,1.908-11.13C144.696,126.254,129.746,111.304,111.304,111.304z"/>
+<path style="fill:#57544C;" d="M500.87,22.261H11.13C4.983,22.261,0,17.278,0,11.13l0,0C0,4.983,4.983,0,11.13,0H500.87
+	C507.017,0,512,4.983,512,11.13l0,0C512,17.278,507.017,22.261,500.87,22.261z"/>
+<path style="fill:#D3C6A8;" d="M434.087,489.739L434.087,489.739c0,12.295-9.966,22.261-22.261,22.261H100.174
+	c-12.295,0-22.261-9.966-22.261-22.261l0,0c0-12.295,9.966-22.261,22.261-22.261h311.652
+	C424.121,467.478,434.087,477.444,434.087,489.739z"/>
+<path style="fill:#6E5840;" d="M478.609,467.478H33.391V267.13h445.217V467.478z"/>
+<path style="fill:#323030;" d="M500.87,478.609H11.13c-6.147,0-11.13-4.983-11.13-11.13l0,0c0-6.147,4.983-11.13,11.13-11.13H500.87
+	c6.147,0,11.13,4.983,11.13,11.13l0,0C512,473.626,507.017,478.609,500.87,478.609z M512,267.13L512,267.13
+	c0-6.147-4.983-11.13-11.13-11.13H11.13C4.983,256,0,260.983,0,267.13l0,0c0,6.147,4.983,11.13,11.13,11.13H500.87
+	C507.017,278.261,512,273.278,512,267.13z"/>
+<path style="fill:#C6984F;" d="M125.217,500.87h-22.261l38.957-166.957h22.261L125.217,500.87z M347.826,333.913h-22.261
+	L286.609,500.87h22.261L347.826,333.913z"/>
+<path style="fill:#AA8144;" d="M164.174,333.913h22.261l38.957,166.957H203.13L164.174,333.913z M386.783,500.87h22.261
+	l-38.957-166.957h-22.261L386.783,500.87z"/>
+<path style="fill:#ADA58C;" d="M208.696,356.174h-89.043c-6.147,0-11.13-4.983-11.13-11.13v-22.261c0-6.147,4.983-11.13,11.13-11.13
+	h89.043c6.147,0,11.13,4.983,11.13,11.13v22.261C219.826,351.191,214.843,356.174,208.696,356.174z M403.478,345.043v-22.261
+	c0-6.147-4.983-11.13-11.13-11.13h-89.043c-6.147,0-11.13,4.983-11.13,11.13v22.261c0,6.147,4.983,11.13,11.13,11.13h89.043
+	C398.495,356.174,403.478,351.191,403.478,345.043z"/>
+<path style="fill:#D3C6A8;" d="M108.522,322.783L108.522,322.783c0-6.147,4.983-11.13,11.13-11.13h89.043
+	c6.147,0,11.13,4.983,11.13,11.13l0,0H108.522z M403.478,322.783L403.478,322.783c0-6.147-4.983-11.13-11.13-11.13h-89.043
+	c-6.147,0-11.13,4.983-11.13,11.13l0,0H403.478z"/>
+<path style="fill:#92393C;" d="M66.783,256c0,6.147-4.983,11.13-11.13,11.13h-11.13c-6.147,0-11.13-4.983-11.13-11.13v-33.391
+	h33.391V256z"/>
+<path style="fill:#DB6D53;" d="M50.087,256L50.087,256c-3.073,0-5.565-2.492-5.565-5.565v-27.826h11.13v27.826
+	C55.652,253.508,53.16,256,50.087,256z"/>
+<path style="fill:#C6984F;" d="M178.087,250.435v11.13c0,3.073-2.492,5.565-5.565,5.565h-66.783c-3.073,0-5.565-2.492-5.565-5.565
+	v-11.13c0-3.073,2.492-5.565,5.565-5.565h66.783C175.595,244.87,178.087,247.362,178.087,250.435z"/>
+<path style="fill:#AA8144;" d="M178.087,250.435V256h-77.913v-5.565c0-3.073,2.492-5.565,5.565-5.565h66.783
+	C175.595,244.87,178.087,247.362,178.087,250.435z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

templates/partials/icons/code-svgrepo-com.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#E4EAF8;" d="M494.345,472.276H17.655C7.904,472.276,0,464.372,0,454.621V57.379
+	c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655v397.241
+	C512,464.372,504.096,472.276,494.345,472.276z"/>
+<path style="fill:#5B5D6E;" d="M494.345,472.276H256V83.862h256v370.759C512,464.372,504.096,472.276,494.345,472.276z"/>
+<path style="fill:#D5DCED;" d="M512,83.862H0V57.379c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655
+	V83.862z"/>
+<path style="fill:#E4EAF8;" d="M26.483,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C35.31,71.082,31.358,75.034,26.483,75.034z"/>
+<path style="fill:#FF5050;" d="M423.724,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C432.552,71.082,428.599,75.034,423.724,75.034z"/>
+<path style="fill:#FFF082;" d="M459.034,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C467.862,71.082,463.91,75.034,459.034,75.034z"/>
+<path style="fill:#A0FFB4;" d="M494.345,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C503.172,71.082,499.22,75.034,494.345,75.034z"/>
+<path style="fill:#00C3FF;" d="M144.898,150.826l-59.75,59.75c-3.229,3.229-3.463,8.386-0.54,11.893L256,428.138V145.655h-98.618
+	C152.7,145.655,148.209,147.516,144.898,150.826z"/>
+<polygon style="fill:#80E1FF;" points="256,145.655 176.552,216.276 256,216.276 "/>
+<g>
+	<path style="fill:#00AAF0;" d="M176.552,216.276l-25.97-69.254c-2.103,0.878-4.039,2.159-5.681,3.801L85.15,210.575
+		c-1.578,1.578-2.415,3.619-2.543,5.7L176.552,216.276L176.552,216.276z"/>
+	<polygon style="fill:#00AAF0;" points="176.552,216.276 256,428.138 256,216.276 	"/>
+</g>
+<path style="fill:#AFB9D2;" d="M256,489.931c-4.879,0-8.828-3.953-8.828-8.828V30.897c0-4.875,3.948-8.828,8.828-8.828
+	c4.879,0,8.828,3.953,8.828,8.828v450.207C264.828,485.978,260.879,489.931,256,489.931z"/>
+<g>
+	<path style="fill:#FF5050;" d="M317.793,163.31h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828S322.673,163.31,317.793,163.31z"/>
+	<path style="fill:#FF5050;" d="M317.793,233.931h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828C326.621,229.978,322.673,233.931,317.793,233.931z"/>
+</g>
+<path style="fill:#A0FFB4;" d="M344.276,198.621h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,198.621,344.276,198.621z"/>
+<path style="fill:#FFFFFF;" d="M467.862,163.31H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,163.31,467.862,163.31z"/>
+<path style="fill:#FFF082;" d="M467.862,233.931H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828C476.69,229.978,472.742,233.931,467.862,233.931z"/>
+<path style="fill:#D5DCED;" d="M467.862,198.621h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,198.621,467.862,198.621z"/>
+<path style="fill:#A0FFB4;" d="M344.276,269.241h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,269.241,344.276,269.241z"/>
+<path style="fill:#D5DCED;" d="M467.862,269.241h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,269.241,467.862,269.241z"/>
+<g>
+	<path style="fill:#FF5050;" d="M317.793,304.552h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828C326.621,300.599,322.673,304.552,317.793,304.552z"/>
+	<path style="fill:#FF5050;" d="M317.793,375.172h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828S322.673,375.172,317.793,375.172z"/>
+</g>
+<path style="fill:#A0FFB4;" d="M344.276,339.862h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,339.862,344.276,339.862z"/>
+<path style="fill:#FFFFFF;" d="M467.862,304.552H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828C476.69,300.599,472.742,304.552,467.862,304.552z"/>
+<path style="fill:#FFF082;" d="M467.862,375.172H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,375.172,467.862,375.172z"/>
+<path style="fill:#D5DCED;" d="M467.862,339.862h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,339.862,467.862,339.862z"/>
+<path style="fill:#A0FFB4;" d="M344.276,410.483h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,410.483,344.276,410.483z"/>
+<path style="fill:#D5DCED;" d="M467.862,410.483h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,410.483,467.862,410.483z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

templates/partials/icons/form-svgrepo-com.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#9F6459;" d="M416,32H272c0,8.836-7.164,16-16,16s-16-7.164-16-16H96c-22.055,0-40,17.945-40,40v400
+			c0,22.055,17.945,40,40,40h320c22.055,0,40-17.945,40-40V72C456,49.945,438.054,32,416,32z M416,464c0,4.418-3.582,8-8,8H104
+			c-4.418,0-8-3.582-8-8V80c0-4.418,3.582-8,8-8h304c4.418,0,8,3.582,8,8V464z"/>
+	</g>
+	<g>
+		<g>
+			<path style="fill:#D8DCE1;" d="M152,368c-1.891,0-3.789-0.664-5.312-2.023c-3.305-2.93-3.602-7.992-0.664-11.289l64-72
+				c2.328-2.625,6.094-3.422,9.289-1.969l80.445,36.57l52.844-128.336c1.688-4.078,6.359-6,10.445-4.352
+				c4.086,1.68,6.031,6.359,4.352,10.445l-56,136c-0.828,2.008-2.438,3.594-4.453,4.391s-4.273,0.742-6.258-0.156l-82.625-37.555
+				l-60.086,67.586C156.398,367.094,154.203,368,152,368z"/>
+		</g>
+	</g>
+	<g>
+		<circle style="fill:#FF4F19;" cx="152" cy="360" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#FF9600;" cx="216" cy="288" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#FFD200;" cx="304" cy="328" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#74D24F;" cx="360" cy="192" r="24"/>
+	</g>
+	<g>
+		<path style="fill:#B9BBC1;" d="M304,16h-20.391C277.969,6.242,267.484,0,256,0s-21.969,6.242-27.609,16H208
+			c-22.055,0-40,17.945-40,40v32c0,4.418,3.578,8,8,8h160c4.422,0,8-3.582,8-8V56C344,33.945,326.055,16,304,16z M256,40
+			c-4.418,0-8-3.582-8-8c0-4.418,3.582-8,8-8s8,3.582,8,8C264,36.418,260.418,40,256,40z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

templates/partials/icons/paint-brush-art-svgrepo-com.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve">
+<path style="fill:#996632;" d="M264,465.6c-4,4-10.4,6.4-16,6.4c-0.8,0-1.6,0-2.4,0c-12-1.6-21.6-12.8-21.6-25.6v-84
+	c0-32-26.4-58.4-58.4-58.4h-2.4c-14.4,0-26.4-12-26.4-26.4V256h224v21.6c0,14.4-12,26.4-26.4,26.4H332c-32,0-58.4,26.4-58.4,58.4
+	V448C272,454.4,268.8,461.6,264,465.6z M264,448c0-8.8-7.2-16-16-16c-8.8,0-16,7.2-16,16s7.2,16,16,16C256.8,464,264,456.8,264,448z
+	"/>
+<path style="fill:#D9CDC1;" d="M364,232c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12h20h4c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12
+	h-12H364z"/>
+<circle style="fill:#42210B;" cx="328" cy="208" r="16"/>
+<path style="fill:#CC9966;" d="M296,80c0-8.8,7.2-16,16-16s16,7.2,16,16v40c0,17.6,14.4,32,32,32c5.6,0,11.2-1.6,16-4.8V168h-91.2
+	c6.4-5.6,11.2-14.4,11.2-24V80z"/>
+<g>
+	<circle style="fill:#42210B;" cx="248" cy="448" r="16"/>
+	<circle style="fill:#42210B;" cx="248" cy="208" r="16"/>
+</g>
+<path style="fill:#FFF8EF;" d="M248,192c-8.8,0-16,7.2-16,16s7.2,16,16,16c8.8,0,16-7.2,16-16S256.8,192,248,192z M364,184
+	c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12H168c17.6,0,32-14.4,32-32v-16H364z M328,224c8.8,0,16-7.2,16-16s-7.2-16-16-16
+	s-16,7.2-16,16S319.2,224,328,224z"/>
+<path style="fill:#CC9966;" d="M200,80c0-8.8,7.2-16,16-16s16,7.2,16,16v64c0,9.6,4,18.4,11.2,24H200V80z"/>
+<path style="fill:#FF6600;" d="M360,136c-8.8,0-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v64c0,8.8-7.2,16-16,16
+	s-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v120c0,8.8-7.2,16-16,16s-16-7.2-16-16V96c0-19.2-13.6-35.2-32-39.2V56
+	c0-22.4,17.6-40,40-40h176c22.4,0,40,17.6,40,40v64C376,128.8,368.8,136,360,136z"/>
+<path style="fill:#FF7D00;" d="M168,208c-4.8,0-8-3.2-8-8V96c0-20-12.8-38.4-31.2-44.8C131.2,35.2,144,24,160,24h176
+	c17.6,0,32,14.4,32,32v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80c0-22.4-17.6-40-40-40s-40,17.6-40,40v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80
+	c0-22.4-17.6-40-40-40s-40,17.6-40,40v120C176,204.8,172.8,208,168,208z"/>
+<path style="fill:#CC9966;" d="M136,96v72h-16V73.6C129.6,76.8,136,85.6,136,96z"/>
+<path style="fill:#FFF8EF;" d="M136,200c0,17.6,13.6,32,31.2,32h-34.4c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h3.2V200z"/>
+<path style="fill:#875426;" d="M165.6,304c32,0,58.4,26.4,58.4,58.4v84c0,12.8,9.6,24,21.6,25.6c0.8,0,1.6,0,2.4,0
+	c6.4,0,12-2.4,16-6.4c4.8-4.8,8-11.2,8-17.6v-85.6c0-32,26.4-58.4,58.4-58.4h2.4c14.4,0,26.4-12,26.4-26.4V256H136v21.6
+	c0,14.4,12,26.4,26.4,26.4H165.6z M244.8,480c-16-1.6-28.8-16-28.8-33.6v-84c0-28-22.4-50.4-50.4-50.4h-2.4
+	c-19.2,0-34.4-15.2-34.4-34.4V248h240v29.6c0,19.2-15.2,34.4-34.4,34.4H332c-28,0-50.4,22.4-50.4,50.4V448c0,8.8-4,17.6-10.4,24
+	C262.4,477.6,253.6,480.8,244.8,480z"/>
+<path style="fill:#D9CDC1;" d="M120.8,220c0,6.4,5.6,12,12,12H120h-12c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h4h20.8
+	c-6.4,0-12,5.6-12,12V220z"/>
+<path style="fill:#42210B;" d="M136,96c0-10.4-6.4-19.2-16-22.4V168h16V96z M165.6,312c28,0,50.4,22.4,50.4,50.4v84
+	c0,17.6,12.8,32,28.8,33.6c8.8,0.8,17.6-2.4,24.8-8c6.4-6.4,10.4-14.4,10.4-24v-85.6c0-28,22.4-50.4,50.4-50.4h2.4
+	c19.2,0,34.4-15.2,34.4-34.4V248H128v29.6c0,19.2,15.2,34.4,34.4,34.4H165.6z M243.2,168c-6.4-5.6-11.2-14.4-11.2-24V80
+	c0-8.8-7.2-16-16-16s-16,7.2-16,16v88H243.2z M200,200c0,17.6-14.4,32-32,32h196h12h12c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12
+	h-4h-20H200V200z M330.4,328c-19.2,0-34.4,15.2-34.4,34.4V448c0,13.6-5.6,26.4-16,35.2c-8.8,8-20.8,12.8-32.8,12.8
+	c-1.6,0-3.2,0-4.8,0c-24-2.4-43.2-24-43.2-49.6v-84c0-19.2-15.2-34.4-34.4-34.4h-2.4c-28,0-50.4-22.4-50.4-50.4V248h-4
+	c-15.2,0-28-12.8-28-28v-24c0-14.4,10.4-25.6,24-27.2V56c0-31.2,24.8-56,56-56h176c31.2,0,56,24.8,56,56v112
+	c13.6,1.6,24,13.6,24,27.2v24c0,15.2-12.8,28-28,28h-4v29.6c0,28-22.4,50.4-50.4,50.4h-3.2V328z M296,144c0,9.6-4,18.4-11.2,24H376
+	v-20.8c-4.8,3.2-10.4,4.8-16,4.8c-17.6,0-32-14.4-32-32V80c0-8.8-7.2-16-16-16s-16,7.2-16,16V144z M120,232h12.8h34.4
+	c-17.6,0-31.2-14.4-31.2-32v-16h-3.2H112h-4c-6.4,0-12,5.6-12,12v24c0,6.4,5.6,12,12,12H120z M280,80c0-17.6,14.4-32,32-32
+	s32,14.4,32,32v40c0,8.8,7.2,16,16,16s16-7.2,16-16V56c0-22.4-17.6-40-40-40H160c-22.4,0-40,17.6-40,40v0.8c18.4,4,32,20,32,39.2
+	v104c0,8.8,7.2,16,16,16s16-7.2,16-16V80c0-17.6,14.4-32,32-32s32,14.4,32,32v64c0,8.8,7.2,16,16,16s16-7.2,16-16V80z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

templates/partials/icons/svgDribbbleIcon.html

@@ -0,0 +1,3 @@
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
+  </svg>

templates/partials/icons/svgFacebookIcon.html

@@ -0,0 +1,3 @@
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
+</svg>

templates/partials/icons/svgFirstPageIcon.html

@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(128,128,128);"/></g></svg>

templates/partials/icons/svgGithubIcon.html

@@ -0,0 +1,3 @@
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+</svg>

templates/partials/icons/svgInstagramIcon.html

@@ -0,0 +1,3 @@
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
+</svg>

templates/partials/icons/svgLastPageIcon.html

@@ -0,0 +1,5 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)">
+        <path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(116,221,195);"/> <!-- Updated to green -->
+    </g>
+</svg>

templates/partials/icons/svgLinkedInIcon.html

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-8 w-8"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" ></path></svg>

templates/partials/icons/svgNextPageIcon.html

@@ -0,0 +1,3 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)">
+        <path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(116,221,195);"/></g></svg>

templates/partials/icons/svgPrevPageIcon.html

@@ -0,0 +1,2 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(116,221,195);"/></g></svg>

templates/partials/icons/svgTelegram.html

@@ -0,0 +1 @@
+<svg data-v-14efe4a7="" xmlns="http://www.w3.org/2000/svg" width="1.6rem" height="1.6rem" fill="currentColor" viewBox="0 0 16 16" class="bi bi-telegram mt-1"><path data-v-14efe4a7="" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path></svg>

templates/partials/icons/svgTwitterIcon.html

@@ -0,0 +1,3 @@
+<svg class="h-8 w-8" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+  </svg>

templates/partials/icons/twitterx.html

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" class="mt-2 h-8 w-8 bi bi-twitter-x" viewBox="0 0 24 24">
+  <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
+</svg>

templates/partials/intro.html

@@ -0,0 +1,9 @@
+{% block content %}
+<div class="mb-6 mt-14">
+    <h2 class="mb-4 text-center text-4xl lg:text-5xl text-gray-100 md:mb-6">{{ section.title }}</h2>
+    <p class="mx-auto max-w-5xl text-center text-gray-200 text-base md:text-lg">
+        {{ section.description }}
+    </p>
+</div>
+<hr class="container border-gray-400 mx-auto my-4">
+{% endblock content %}

templates/partials/memberships.html

@@ -0,0 +1,85 @@
+{% block content %}
+
+{% if not paginator %} 
+    {% set paginator = section %}
+{% endif %}
+
+{% set path_array = current_path | split(pat="/") %}
+{% set taxonomy = path_array[1] %}
+{% set category = path_array[2] %}
+{% if path_array | length < 3%}
+{% set category = "All" %}
+{% endif %}
+
+<div class="mt-16 mx-auto max-w-screen-lg px-6 lg:px-8">
+    {% include "partials/filter_bar.html" %}
+    <div class="text-center main-title px-0 md:w-full mx-8 md:mx-12">
+        <div class="my-4 flex flex-col items-start">
+            <h1 class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
+            {{category | replace(from='-', to=' ' ) | title}}
+            </h1>
+            test
+            <div class="text-xl text-gray-800">
+                {{ paginator.total_pages ~ " People"}}
+            </div>
+        </div>
+
+        <hr/>
+
+        <div>
+            <div class="mx-auto mt-4 grid max-w-2xl grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 xl:grid-cols-4">
+                {%- for page in paginator.pages %} 
+                    {% include "partials/person_card.html" %} 
+                {%- endfor %}
+            </div>
+            <hr class="mt-6" />
+            <p class="text-center text-sm mt-2 mb-16">
+              {% if paginator.previous %}
+              <a
+                class="border-transparent"
+                aria-label="First page"
+                href="{{ paginator.first }}"
+                >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+                "partials/icons/svgPrevPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="border-transparent"
+                aria-label="Previous page"
+                href="{{ paginator.previous }}"
+                >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+              include "partials/icons/svgFirstPageIcon.html" %}{% include
+              "partials/icons/svgFirstPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+              "partials/icons/svgFirstPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+              paginator.next %}
+              <a
+                class="border-transparent"
+                aria-label="Next page"
+                href="{{ paginator.next }}"
+                >{% include "partials/icons/svgNextPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="border-transparent"
+                aria-label="Last page"
+                href="{{ paginator.last }}"
+                >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+                "partials/icons/svgNextPageIcon.html" %}</a
+              >
+              {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+              "partials/icons/svgLastPageIcon.html" %}{% include
+              "partials/icons/svgLastPageIcon.html" %} {% endif %}
+            </p>
+        </div>
+    </div>
+
+</div>
+
+{% endblock content %}

templates/partials/newsCard.html

@@ -0,0 +1,57 @@
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden border border-gray-600">
+  <div class="flex-1">
+    <a href={{ post.permalink }} class="block">
+      <div class="flex-shrink-0">
+        {% if post.extra.imgPath %}
+        {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="" />
+        {% endif %}
+      </div>
+      <div class="flex-1 p-4 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-7 font-medium text-gray-100 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal leading-5 text-gray-300 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+    </a>
+    <div class="flex items-center">
+      <div class="flex justify-between items-center">
+        <ul class="list-none flex author-list my-10 mr-2 px-0">
+            {% if post.taxonomies.people %}
+            {% for author in post.taxonomies.people %}
+            {% set author_path = 'people/' ~ author ~ '/index.md' %}
+            {% set people = get_section(path="people/_index.md") %}           
+            {% set pages_str = people.pages | json_encode() | as_str %}
+            {% if pages_str is containing(author) %}
+                {% set author = get_page(path=author_path) %}
+                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+          <li class="author-list-item">
+            <a href="{{ author.permalink }}" tooltip="{{ author.title }}">
+              <img src="{{ author_img }}" alt="{{ author.title }}" class="
+                  w-8
+                  h-8
+                  rounded-full
+                  bg-gray-200
+                  border border-gray-400
+                " />
+            </a>
+          </li>
+          {% endif %}
+          {% endfor %}
+          {% endif %}
+        </ul>
+      </div>
+
+      <p class="text-gray-400 text-xs">
+        <time datetime="{{post.date}}">
+          {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+        </time>
+      </p>
+    </div>
+  </div>
+</div>
+</div>

templates/partials/newsPosts.html

@@ -0,0 +1,70 @@
+{% block content %}
+
+<div class="text-center main-title px-0 md:w-2/3 mx-8 md:mx-12">
+  <h2
+    class="tracking-tight text-left text-2xl md:text-4xl fw-500 leading-snug font-medium"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
+    Key News and Updates   
+    {% if taxonomy == "news-category" %} - 
+        {{category | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h2>
+  <div>
+    <div class="mt-3 grid gap-5 max-w-lg mx-auto md:grid-cols-2 lg:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+        {% if "Engineering" == "Engineering"%}
+            {% include "partials/newsCard.html" %} 
+        {%endif%} {%- endfor %}
+    </div>
+    <hr class="my-10 border-gray-700"/>
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/newsSidebar.html

@@ -0,0 +1,38 @@
+
+<div class="mx-8 md:mx-4 flex flex-col mt-2 md:mt-8">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-4"> FILTER NEWS BY</h4>
+        <a id="all" class="mb-2 text-white font-normal" href="/newsroom">All</a>
+        {% set taxonomy = get_taxonomy(kind="news-category") %}
+        {% set categories = taxonomy.items %}
+        {% for category in categories %}
+            {% set path = category.name | slugify %}
+            {% set fullpath = "/news-category/" ~ path %}
+            <a id="{{path}}" class="mb-3 text-gray-100 font-normal" href={{fullpath}}> {{category.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="newsroom/_index.md")%}
+
+    <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-100 mb-6"> FEATURED NEWS</h4>
+
+        {% for page in section.pages %}
+        {% if page.extra.isFeatured %}
+            <a class="mb-3 text-gray-400" href={{page.permalink}}>{{ page.title }}</a>
+        {% endif %}
+        {% endfor %}
+        
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]    
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory)}
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>

templates/partials/pageBox.html

@@ -0,0 +1,9 @@
+<div class="mb-8 flex flex-col">
+    <a href="{{page.permalink}}" class="text-lg font-medium cursor-pointer text-blue-400 py-4">
+        {{page.title | safe}}
+    </a>
+    {% include "partials/tags.html" %}
+    <p>
+        {{page.description | safe}}
+    </p>
+</div>

templates/partials/page_list.html

@@ -0,0 +1,19 @@
+<div id="list"></div>
+{% if section.extra.group_pages_by %}
+    <div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center">
+        {% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %}
+        {% set roles = taxonomy.items %}
+        {% for role in roles %}
+        <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72">
+            {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %}
+            <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4">
+            {% set path = role.name | slugify %}
+            {% set fullpath = "/roles/" ~ path %}
+            <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a>
+            {% for page in role.pages %}
+                {% include "partials/pageBox.html"%}
+            {% endfor %}
+        </div>
+        {% endfor %}
+    </div>
+{% endif %}

templates/partials/partnerCard.html

@@ -0,0 +1,22 @@
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden border">
+  <div class="flex-1">
+    <a href="{{post.permalink}}" class="block">
+      
+      <div class="flex-shrink-0">
+        {% set url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
+        <img class="h-48 w-full mx-auto object-cover" src="{{url}}" alt="{{post.title ~ ' Picture'}}" />
+      </div>
+      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-lg leading-6 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+    </a>
+  </div>
+</div>
+</div>

templates/partials/partnersCards.html

@@ -0,0 +1,69 @@
+{% block content %}
+
+<div class="text-center px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  {# <h1
+    class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
+    {% if taxonomy == "partners-category" %} - 
+        {{category | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h1> #}
+  <div>
+    <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+        {% if "Engineering" == "Engineering"%}
+            {% include "partials/partnerCard.html" %} 
+        {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/partnersSidebar.html

@@ -0,0 +1,24 @@
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-4"> FILTER PARTNERS BY</h4>
+        <a id="all" class="mb-2 text-black font-normal" href="/partners">All</a>
+        {% set taxonomy = get_taxonomy(kind="partners-category") %}
+        {% set categories = taxonomy.items %}
+        {% for category in categories %}
+        {% set path = category.name | slugify %}
+        {% set fullpath = "/partners-category/" ~ path %}
+        <a id="{{path}}" class="mb-2 text-black font-normal" href={{fullpath}}> {{category.name}} </a>
+        {% endfor %}
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory) }
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>

templates/partials/personCard.html

@@ -0,0 +1,27 @@
+{% if page.title != 'ThreeFold Community' %}
+<div class="flex flex-col px-0 sm:px-4 pb-2">
+    <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
+        {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+        <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <div>
+            <h2 class="text-2xl">{{page.title}}</h2>
+            <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis">
+                {% if page.description %}
+                    {{page.description}}
+                {% else %}
+                    {{page.content | safe}}
+                {% endif %}
+            </div>
+            <div class="my-2 flex flex-row items-start flex-wrap">
+            {% if page.taxonomies.memberships %}
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+            {% endif %}
+            </div>
+        </div>
+    </a>
+</div>
+{% endif %}

templates/partials/person_card.html

@@ -0,0 +1,28 @@
+{% if page.title != 'ThreeFold Community' %}
+<div class="flex flex-col px-0 sm:px-4 pb-2">
+    {# <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left"> #}
+        {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+        <img class="aspect-[14/13] w-full rounded-2xl object-cover" src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <div class="text-center">
+            <h2 class="text-xl">{{page.title}}</h2>
+            <div class="text-base text-gray-100 line-clamp-3 leading-5 text-ellipsis">
+                {% if page.description %}
+                    {{page.description}}
+                {% else %}
+                    {{page.content | safe}}
+                {% endif %}
+            </div>
+            {# <div class="my-2 flex flex-row items-start flex-wrap">
+            {% if page.taxonomies.memberships %}
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+            {% endif %}
+            </div> #}
+        </div>
+    {# </a> #}
+</div>
+{%endif%}
+

templates/partials/postCard.html

@@ -0,0 +1,75 @@
+{% if post.date %}
+{% if post.taxonomies.people %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(post.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% set content = get_page(path=author_path) %}
+{% endif %}
+{% endif %}
+
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden border border-gray-600">
+  <div class="flex-1">
+    <a href="{{ post.permalink }}" class="block">
+        {% if post.extra.imgPath %}
+      {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md',
+      to=post.extra.imgPath)) %}
+      <div class="flex-shrink-0">
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" />
+      </div>
+      {%endif%}
+      <div class="flex-1 p-4 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-lg leading-6 font-medium text-gray-100 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal text-gray-300 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+        <div class="article hidden">{{ post.content | safe }}</div>
+
+        <div class="w-full post-card-meta py-3">
+          <div class="avatars">
+            <div class="flex">
+              <div class="flex">
+                <ul class="list-none flex author-list mr-2 pl-0">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}"
+                      class="w-8 h-8 rounded-full bg-gray-200 border border-gray-400"></li>
+                  {% endif %}
+                </ul>
+              </div>
+              <div class="flex flex-col text-left leading-none uppercase">
+                {% if author %}
+                <p class="text-gray-400 text-xs">{{ author.title }}</p>
+                {% endif %}
+                <p class="text-gray-400 text-xs">
+                  <time datetime="{{post.date}}">
+                    {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+                  </time>
+                </p>
+                <p class="flex justify-between lowercase my-2 items-center text-gray-400 text-xs"><span id="time"
+                    class="time"></span>
+                </p>
+              </div>
+              <br />
+            </div>
+          </div>
+        </div>
+    </a>
+  </div>
+
+</div>
+</div>
+
+<style>
+  .border-b {
+    border-bottom-width: 1px !important;
+  }
+</style>
+{% endif %}

templates/partials/socialLinks.html

@@ -0,0 +1,31 @@
+{% if not section %}
+{% set section = page %}
+{% endif %}
+
+<div class="flex space-x-4">
+    {% for key, link in section.extra.socialLinks %}
+
+        <a href="{{link}}" target="_blank" class="text-gray-400 hover:text-green">
+        <span class="sr-only">{{key}}</span>
+        {% if key == "Facebook" %}
+        {% include "partials/icons/svgFacebookIcon.html" %}
+        {% elif key == "Github" %}
+        {% include "partials/icons/svgGithubIcon.html" %}
+        {% elif key == "Github2" %}
+        {% include "partials/icons/svgGithubIcon.html" %}
+        {% elif key == "Instagram" %}
+        {% include "partials/icons/svgInstagramIcon.html" %}
+        {% elif key == "LinkedIn" %}
+        {% include "partials/icons/svgLinkedInIcon.html" %}
+        {% elif key == "Twitter" %}
+        {% include "partials/icons/twitterx.html" %}
+        {% elif key == "Dribbble" %}
+        {% include "partials/icons/svgDribbbleIcon.html" %}
+        {% elif key == "Telegram" %}
+        {% include "partials/icons/svgTelegram.html" %}
+        {% endif %}
+        </a>
+
+    {% endfor %}
+
+  </div>

templates/partials/solutions/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 Web4</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/docs/introduction" target="_blank" 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>
+  

templates/partials/solutions/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>

templates/partials/solutions/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>

templates/partials/solutions/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="border border-white px-6 py-2 rounded-xl fade-in text-2xl lg:text-3xl tracking-normal font-medium mt-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>

templates/partials/solutions/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>
+  

templates/partials/tagCard.html

@@ -0,0 +1,22 @@
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+  <div class="flex-1">
+    <a href={{ post.permalink }} class="block">
+      <div class="flex-shrink-0">
+        {% if post.extra.imgPath %}
+        <img class="h-48 w-full mx-auto object-cover" src={{ post.permalink }}{{post.extra.imgPath}} alt="" />
+        {%endif %}
+    </div>
+      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal leading-6 text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+    </a>
+  </div>
+</div>
+</div>

templates/partials/tags.html

@@ -0,0 +1,5 @@
+<div class="flex mb-4">
+    {% for tag in page.taxonomies.tags %}
+        <div class="bg-gray-200 rounded font-semibold text-xs w-auto px-2 py-1 mr-2">{{tag}}</div>
+    {% endfor %}
+</div>

templates/partials/tagsCards.html

@@ -0,0 +1,69 @@
+{% block content %}
+
+<div class="text-center px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set tag = path_array[2] %}
+    {% if taxonomy == "tags" %} # 
+        {{tag | replace(from='-', to='_' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+        {% if "Engineering" == "Engineering"%}
+            {% include "partials/tagCard.html" %} 
+        {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}

templates/partials/tagsSidebar.html

@@ -0,0 +1,23 @@
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER BY</h4>
+        {% set taxonomy = get_taxonomy(kind="tags") %}
+        {% set tags = taxonomy.items %}
+        {% for tag in tags %}
+        {% set path = tag.name | slugify %}
+        {% set fullpath = "/tags/" ~ path %}
+        <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> #{{tag.name}} </a>
+        {% endfor %}
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory) }
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>

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-4xl fade-in">A Secure & Sovereign Infrastructure Layer for Web4</h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-lg 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-2xl text-lg 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-md 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>
+        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>
+  

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-4xl 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-lg 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="lg:pb-24 pb-12 pt-12 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 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-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-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-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-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-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-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-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-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-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>

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 lg:pb-10 pb-4">
+        <h2 class="fade-in text-balance lg:text-5xl text-4xl 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-lg 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-10 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are now unveiling an exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
+        <a href="/action" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take Actions</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 lg:gap-y-10 gap-y-6">
+          <div class="">
+            <dt class="font-medium text-gray-200">Communicate securely</dt>
+            <dd class="mt-1 font-light text-gray-300 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-300 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-300 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-300 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-300 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-300 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>

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>
+  

templates/partials/why/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-4xl fade-in">The Internet Needs an Upgrade</h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The Internet brings the world together, yet much of it is now concentrated in the hands of a few powerful corporations. This wasn't its original intent. <br>The Internet was envisioned as a decentralized, open space.<br>A tool for freedom, collaboration, and equal access for all.</p>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-medium text-gray-200 fade-in">ThreeFold has invented a new Data, Network, and Cloud system<br> 
+          as an engine for an upgraded Web4 Internet.</p>
+        <div class="mt-12 flex items-center justify-center gap-x-6">
+          
+          
+      </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/impact.html

@@ -0,0 +1,44 @@
+<div class="bg-transparent fade-in">
+    <div class="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
+      <div class="mx-auto max-w-3xl text-center">
+        <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Real-World Impact</h2>
+        <p class="mx-auto mb-10 mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects:
+        </p>
+      </div>
+  
+      <div class="mt-12 space-y-16">
+        <div class="bg-transparent py-10">
+            <div class="mx-auto max-w-7xl lg:grid lg:items-center lg:grid-cols-12 lg:gap-x-8">
+              <!-- Text Section -->
+              <div class="lg:col-span-5 align-middle pr-4 mb-4">
+                <h3 class="text-2xl font-medium text-white">OurWorld FreeZone</h3>
+                <p class="mt-2 text-base font-light text-gray-200 mx-auto pr-4">
+                    ThreeFold is working with the Zanzibar Communication Corporation (ZICTIA), on behalf of the Zanzibar government, to create the world’s first 100% Digital Free Zone – accessible and affordable for all. <br><br>The announcement was made August 2023, and progress has been ongoing behind the scenes since then. 
+                    Updates expected Q4 2024.                    
+                </p>
+              </div>
+              <!-- Image Section -->
+              <div class="lg:col-span-7">
+                <img 
+                  src="/images/freezone.png" 
+                  alt="" 
+                  class=" w-full rounded-lg bg-gray-100 object-fit">
+              </div>
+            </div>
+          </div>
+          
+        <div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8">
+          <div class="mt-6 lg:col-span-5 lg:col-start-8 lg:row-start-1 lg:mt-0 pr-4">
+            <h3 class="text-2xl font-medium text-white">Tanzanian Sovereign Internet</h3>
+            <p class="mt-2 text-base font-light text-gray-200 pr-4">
+
+                In January 2024, ThreeFold announced in collaboration with The ICT Commission of Tanzania and Holochain a collaboration to deploy sovereign Internet in Tanzania, along with the introduction of coding academies and innovation hubs. <br><br> The Dunia Yetu cooperative is being set up and efforts will ramp up in 2025.</p>
+          </div>
+          <div class="flex-auto lg:col-span-7 lg:col-start-1 lg:row-start-1">
+            <img src="/images/tanzania.png" alt="" class="w-full rounded-lg bg-gray-100 object-fill">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/why/matters.html

@@ -0,0 +1,99 @@
+<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="relative grid lg:grid-cols-12 lg:gap-8">
+            <!-- Left Content -->
+            <div class="lg:col-span-7">
+                <div class="mx-auto max-w-2xl lg:mx-0">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">Why it Matters</h1>
+                    <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
+                        For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
+                        <br><br>
+                        But we won’t stop here.
+                        <br><br>
+                        Web4 is the next generation of the Internet and our team has been working on it for +10 years—the Decentralized Cloud was the base layer to create Web4. As far as we know, we are the world’s first project approaching a fully functional Web4 infrastructure that places priority on both the planet and people.
+                        </p>
+                </div>
+            </div>
+
+            <!-- Right Blockquote -->
+            <div class="lg:col-span-5">
+                <figure class=" mt-6   pl-8">
+                    <blockquote class=" text-2xl text-white fade-in font-semibold">
+                        <p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
+                    </blockquote>
+                    <br>
+                    <div class="mt-6 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;">
+                            <g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+                                <g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
+                                    <path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
+                                </g>
+                            </g>
+                        </svg>
+                        <a href="/action" class="fade-in text-balance text-xl font-semibold tracking-tight text-white lg:text-2xl blinking-effect">Take Actions</a>
+                    </div>                                 
+                </figure>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+
+
+<style>
+     /* Apply the blinking animation to the link */
+     .blinking-effect {
+      animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+    }
+
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+    .blockquote::before {
+        content: open-quote;
+        font-size: 4rem;
+        position: absolute;
+        top: -1rem;
+        left: -1rem;
+        color: #ffffff;
+    }
+
+    blockquote {
+        border-left-width: 2px;
+        padding-left: 1rem;
+      }
+
+    .inline-flex {
+    display: flex;
+    align-items: center;
+}
+
+.items-center {
+    justify-content: center;
+}
+
+.gap-2 {
+    gap: 0.5rem; /* Adjust the gap size as needed */
+}
+
+</style>

templates/partials/why/motto.html

@@ -0,0 +1,36 @@
+<div class="bg-transparent pb-24 pt-12">
+    <div class="flex items-center justify-center  bg-transparent">
+        <div class="text-center">
+            <p class="fade-in mx-auto text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+                Planet First. People First.
+            </p>
+        </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 5s 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/ourwhy.html

@@ -0,0 +1,58 @@
+<div class="fade-in bg-transparent relative isolate overflow-hidden py-24 mb-12">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none">
+            <div class="fade-in mx-auto max-w-3xl  text-center">
+                <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Why it Matters?</h2>
+                <p class="mt-6 text-lg font-light text-white">
+                    For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners. 
+                    <br><br>
+                    But we won’t stop here. 
+                    <br><br>
+                    Web4 is the next generation of the Internet and our team has been working on it for +10 years—the Decentralized Cloud was the base layer to create Web4. 
+                    As far as we know, we are the world’s first project approaching a fully functional Web4 infrastructure that places priority on both the planet and people.
+                    <br><br>
+                    <span class="font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage,
+                        secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
+                </p>
+                <br>
+                <a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</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 */
+    }
+
+      
+    /* Apply the blinking animation to the link */
+    .blinking-effect {
+      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+    }
+
+  </style>
+  

templates/partials/why/reason.html

@@ -0,0 +1,46 @@
+<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="relative grid lg:grid-cols-12 lg:gap-8">
+            <!-- Left Content -->
+            <div class="lg:col-span-7">
+                <div class="mx-auto max-w-2xl lg:mx-0">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Reason Behind It All</h1>
+                    <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
+                        The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
+                        <br><br>
+                        Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally...
+                        <br><br>
+                    </p>
+                </div>
+            </div>
+
+            <!-- Right Blockquote -->
+            <div class="lg:col-span-5">
+                <figure class=" mt-6 pl-8">
+                    <blockquote class=" lg:text-2xl text-xl text-white fade-in font-semibold">
+                        <p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p>
+                    </blockquote>
+                    <br>
+                    <div class="mx-4">
+                    <p class="fade-in mx-auto text-2xl font-semibold tracking-tight text-white lg:text-3xl opacity-0 transition-opacity duration-1000" data-observer>
+                        Planet First. People First.
+                    </p>
+                    </div>
+                </figure>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<style>
+    .blockquote::before {
+        content: open-quote;
+        font-size: 4rem;
+        position: absolute;
+        top: -1rem;
+        left: -1rem;
+        color: #ffffff;
+    }
+</style>