Merge branch 'development' of https://github.com/threefoldfoundation/www_threefold_io into development

content/blog/mycelium_future/index.md

@@ -0,0 +1,78 @@
+---
+id: mycelium_future
+title: "Rethinking the Internet: A Decentralized Future with Mycelium"
+image_caption: A Decentralized Future with Mycelium
+description: Mycelium is a decentralized networking technology that enables direct, peer-to-peer communication. Learn about where it is today and what's coming.
+date: 2025-03-10
+taxonomies:
+  people: [bernadette_amanda_caster]
+  tags: [decentralization, grid, cloud, tech]
+  categories: [decentralization, grid, cloud, tech]
+extra:
+    imgPath: mycelium_future.png
+---
+
+Every time you send a message, stream a video, or browse the web, your data passes through centralized servers – exposing you to surveillance, data breaches, and corporate control. What if the Internet worked more like nature – decentralized, resilient, and free?
+
+<br/>
+
+The Internet as we know it today is riddled with vulnerabilities. Centralized infrastructure exposes users to cyber threats, data breaches, and invasive surveillance. Every year, millions are lost due to hacking incidents, and attempts to improve security often come at the cost of true peer-to-peer connectivity. Instead of a free and open web, we’ve ended up with a system dependent on workarounds and patches, struggling to keep up with modern demands.
+
+<br/>
+
+It’s clear that our infrastructure is failing. But what if we could rethink connectivity from the ground up? ThreeFold’s Mycelium offers a radically new approach.
+
+### **The Problems with Today’s Internet**
+
+The Internet was designed decades ago, long before the explosion of data, AI, and global connectivity. Today’s networks route nearly all traffic through a handful of major data centers, creating single points of failure, bottlenecks, and privacy concerns. Internet Service Providers (ISPs), cloud giants, and Content Delivery Networks (CDNs) act as gatekeepers, adding unnecessary costs, control, and surveillance.
+
+<br/>
+
+Patching the system has only led to more complexity. VPNs, CDNs, and edge computing try to fix inefficiencies but don’t address the root problem of centralization. Legacy protocols like IPv4 force reliance on outdated solutions like Network Address Translation (NAT), a method that allows multiple devices to share a single public IP address, contributing to centralization issues. Meanwhile, the rapid growth of IoT devices and AI-driven applications pushes the limits of this aging architecture. The result? A fragile, monopolized internet that prioritizes corporate profits over user empowerment.
+
+### **Mycelium: A New Approach to Connectivity**
+
+[Mycelium](https://mycelium.threefold.io/) is a decentralized networking technology that enables direct, peer-to-peer communication without relying on centralized servers. Instead of routing data through major data centers, Mycelium establishes a distributed network that enhances functionality while remaining compatible with existing applications.
+
+<br/>
+
+How Mycelium works:
+
+<br/>
+
+- **Decentralized Connectivity:** Mycelium routes data efficiently using a mesh-like structure, dynamically adjusting based on user location and available peers. This ensures seamless communication without the need for intermediaries.
+- **End-to-End Encryption:** All connections are secured, preventing man-in-the-middle attacks and ensuring complete privacy.
+- **Proof of Authenticity (PoA):** Identity verification strengthens trust between users and prevents malicious actors from infiltrating the network.
+- **Optimized Routing:** Smart algorithms minimize latency and optimize traffic flow, delivering faster, more efficient connectivity.
+
+<br/>
+
+![Image](img/mycelium_blog.png#mx-auto)
+
+### **A Glimpse into the Future with Mycelium**
+
+Imagine waking up in a world where your internet connection isn’t routed through corporate-owned data centers but flows securely between you and those you trust. Your home office connects seamlessly to an encrypted global network. You start your day by accessing files from your personal cloud, which is hosted on your own device, encrypted, and accessible only to you. A quick, secure video call with your team follows, running entirely over Mycelium’s peer-to-peer network, free from surveillance or interference.
+
+<br/>
+
+Small businesses host their websites and manage their infrastructure without relying on third-party cloud providers. Developers push code to private repositories, ensuring only authorized collaborators have access. Families stream media directly from their home servers, avoiding subscription fees and content restrictions. Even online gaming has been revolutionized. Players host multiplayer sessions on encrypted private servers, eliminating lag and reliance on corporate hosts.
+
+<br/>
+
+Meanwhile, IoT devices in smart homes and remote workplaces function on secure private networks, safeguarding sensitive data from corporate surveillance. A doctor in a rural village can connect securely with a specialist overseas, sharing critical patient data without privacy concerns. Journalists and activists can communicate without censorship, free from government or corporate monitoring.
+
+### **The Need for a New Internet**
+
+The current internet infrastructure is failing us. Over 70% of global internet traffic depends on expensive transglobal networks, leading to high costs and latency. A simple Zoom call between Uganda and Tanzania may be routed through U.S.-based servers, significantly degrading the experience. With AI-driven systems, agentic computing, and rising cybersecurity threats, centralized control is no longer sustainable.
+
+<br/>
+
+ThreeFold is pioneering a new internet that is truly decentralized, infinitely scalable, and geo-aware. Built from the ground up on a bare Linux kernel, ThreeFold’s internet stack enables modular, self-healing infrastructure, putting control back in the hands of users. Unlike traditional cloud providers, ThreeFold dynamically shards data with advanced erasure codes, providing security against even quantum computing threats. Its real-time routing algorithms eliminate bottlenecks by optimizing packet travel based on congestion, node availability, and latency.
+
+<br/>
+
+With 3.5 billion people still offline and AI agents set to scale into the billions, the need for a decentralized internet has never been more urgent. The future isn’t about patching a failing system – it’s about building a better one. Through advancements like Mycelium, ThreeFold is leading the charge, reshaping the internet into what it was meant to be: open, secure, and controlled by people – not corporations.
+
+<br/>
+
+Learn more about Mycelium via the [website](https://mycelium.threefold.io) and [documentation](https://threefold.info/mycelium/docs/).

content/community/index.md

@@ -69,7 +69,7 @@ extra:
 
 <h6 class="text-white mt-4 font-semibold">X | Twitter</h6>
 
-<p class="text-base text-white  leading-snug">"Tweet" With Us<p>
+<p class="text-base text-white  leading-snug">Connect With Us<p>
 
 {% end %}
 
@@ -176,7 +176,7 @@ extra:
 
 <h6 class="text-white mt-4 font-semibold">LinkedIn</h6>
 
-<p class="text-base text-white  leading-snug">Lets Network<p>
+<p class="text-base text-white  leading-snug">Let's Network<p>
 
 {% end %}
 

content/footer/_index.md

@@ -56,6 +56,8 @@ extra:
 
 <h6><a target="_self" onclick="window.location.href='/community'">Community</a></h6>
 
+<h6><a target="_self" onclick="window.location.href='/media'">Media Kit</a></h6>
+
 
 
 {% end %}

content/media/index.md

@@ -0,0 +1,59 @@
+---
+title: "ThreeFold's Vision and Mission"
+description: "Our mission is to empower individuals and organizations with secure, private, and autonomous access to computing resources, ensuring fair cloud access for everyone." # quotation marks to allow colons where used
+template: "layouts/media.html"
+insert_anchor_links: "left"
+extra:
+ author: ThreeFold
+ imgPath: tf.png
+---
+
+
+
+
+
+
+
+
+
+
+
+<style>
+
+
+.rounded_img img {
+ border-radius: 8px;
+}
+
+
+.person img{
+ border-radius: 100%;
+ max-width:100px;
+ }
+
+
+.myscale{
+ transition: transform .5s;
+}
+
+
+.myscale:hover{
+ transform: scale(1.2);
+ background-color: whitesmoke;
+}
+
+
+.road_border{
+  
+     border-left: 1px solid rgb(156, 156, 156);
+
+
+   }
+
+
+ .white-gray{
+  color: #9f9f9f;
+}
+
+
+ </style>

content/newsroom/feb_2025_roundup_03_03/index.md

@@ -0,0 +1,203 @@
+---
+id: feb_2025_roundup_03_03
+title: "Unfolding ThreeFold: February 2025 Roundup & 03.03 Update"
+image_caption: Feb 2025 Roundup
+description: A recap of February and an update on the Web4 vision.
+date: 2025-03-03
+taxonomies:
+  people: [sam_taggart]
+  tags: [community, grid, tech]
+  news-category: [community, grid, tech]
+extra:
+    imgPath: feb_2025_roundup_03_03.png
+---
+
+As we begin the third month of the year, we are pleased to share a number of updates with you from February and to follow up to [our 12.12 announcement](https://www.threefold.io/newsroom/web4-evolution/)! On 12.12, we introduced the key components that form the foundation of our Web4 vision. As we move forward, we remain focused on bringing that vision to life and simplifying our product offerings, making for a more cohesive and accessible experience for anyone entering the ThreeFold ecosystem.
+
+### **Zero OS V4 Development**
+
+Zero OS 4 Development Version is ready, and 3Nodes are actively being deployed. We are missing some tooling around it, right now you need to be comfortable with using command line tools. We will have a more seamless integration in TF Connect (our mobile app) soon.
+
+<br/>
+
+Please note that the initial v4 nodes will be reserved exclusively for testing and development of v4 for an initial period of time (length to be determined). Rewards will be maintained throughout this testing period and are defined on our partners’ websites.
+
+<br/>
+
+If you haven’t already, you can order a v4 3Node from either [DuckFarmData](https://duckfarmdata.com/) (Americas) or [HostService](https://hostservice.nl/en/) (Rest of World)!
+
+### **3Phone**
+
+We are happy to announce the first devices have arrived, and we will be working closely with early adopters to refine the experience. The 3Phones are based on the secure [Volla](https://volla.online/en/) platform, which has a lot of great features and is usable as-is. Through Mycelium, we are adding decentralized Network, Mail, Messaging, Documents, and Calendar to the platform; this is expected to become available to our early adopters Q2.
+
+<br/>
+
+If you want to be part of the first to have a 3Phone, pre-order yours [here](https://www.threefold.io/signup/), and help shape the future of decentralized communication!
+
+### **3Router**
+
+We're designing the 3Router as a key piece of our decentralized network, seamlessly integrating our Mycelium technology to provide secure, peer-to-peer connectivity. This router will empower users to contribute to a more resilient, people-owned Internet.
+
+<br/>
+
+To bring the 3Router to life, we’re first measuring community interest. As outlined in our documentation, we’ll begin production once we reach 10,000 pre-registrations. If you’re excited about decentralized networking and want to be part of this movement, you can pre-register [here](https://www.threefold.io/signup/).
+
+### **Simplifying the ThreeFold Open Source Cloud**
+
+We are proud of how the **ThreeFold Cloud** has evolved over the years into a powerful and versatile solution for running decentralized cloud workloads. However, to drive broader adoption, we recognize the need for greater clarity and simplicity in how we present and deliver our offerings.
+
+<br/>
+
+In our simplification, we will focus on three core services:
+
+<br/>
+
+- **Virtual Machines** for running applications efficiently
+- **Web Gateways** to provide seamless connectivity between the Internet and your Virtual Machines
+- **Mycelium** as the network layer, enabling secure and scalable connectivity
+
+<br/>
+
+By streamlining our product offering, we aim to make the cloud more accessible and easier to understand. This shift will be supported by a simplified dashboard and improved documentation, ensuring users can onboard and deploy with ease.
+
+<br/>
+
+The rest of the features and capabilities will be moved to a separate solution tentatively called “Labs,” where users can continue to test and experiment.
+
+### **Mycelium – Now With Enhanced Decentralized Features**
+
+Mycelium is an end-to-end encrypted overlay network designed for secure, scalable, and resilient networking, and plays an essential role in the Web4 vision. While Mycelium has already been introduced, it will be greatly expanded this year. Lately, the team’s efforts have been focused on stability and upcoming work is planned around scalability.
+
+<br/>
+
+**What Mycelium Offers Today:**
+
+<br/>
+
+- **Smart Routing:** Ensures optimal speed and efficiency
+- **End-to-End Encryption:** Keeps all communications private and secure
+- **Resilient Networking:** Automatically reroutes in case of a link failure
+- **Decentralized Identity:** Every node’s IPv6 address is linked to a private key
+- **Multi-Protocol Support:** Works with QUIC, TCP, and more (NAT hole-punching coming soon)
+- **TUN-less Operation:** Functions as a secure message bus without modifying system settings
+
+<br/>
+
+Currently, Mycelium supports up to 100,000 users per network, and we continue to enhance its scalability. It’s already live on the ThreeFold Grid and available for [Windows, macOS, iOS, Android, and Linux](https://www.mycelium.threefold.io/download/).
+
+<br/>
+
+![Image](img/mycelium_web.png#mx-auto)
+
+<br/>
+
+**What’s Next for Mycelium?** In the future, Mycelium will enable:
+
+<br/>
+
+- **Secure, decentralized communication** (chat, mail, …)
+- **Encrypted video calls and messaging**
+- **AI Agents and AI-optimized data pipelines** for advanced computing integration
+- **Decentralized CDN functionality** for efficient global content delivery
+- **Integrated name services (DNS)** to improve routing and load balancing
+
+<br/>
+
+These enhancements will make Mycelium an essential tool in building a resilient, scalable, and efficient Web4 ecosystem.
+
+<br/>
+
+Download Mycelium [now](https://www.mycelium.threefold.io/download/)!
+Check the Mycelium [website](https://www.mycelium.threefold.io/) & [documentation](https://threefold.info/mycelium/docs/). Feel free to give your feedback on the forum or the chat. 
+
+### **Introducing AIBox – Your Personal AI Powerhouse**
+
+AI is transforming the world, but centralized AI infrastructure comes with high costs, privacy concerns, and lack of control. **AIBox** is a high-performance, self-hosted AI compute device that puts the power back in your hands.
+
+<br/>
+
+![Image](img/aibox_web.png#mx-auto)
+
+<br/>
+
+**Why AIBox?** Unlike traditional AI hardware, AIBox allows you to regain your investment by renting out unused GPU capacity. This enables AI enthusiasts, developers, and researchers to fund their own AI projects in a sustainable way while maintaining full control of the hardware.
+
+<br/>
+
+**AIBox Capabilities:**
+
+<br/>
+
+- **Run AI Models with Full Control:**
+    - Execute AI models directly on your dedicated GPU.
+    - Choose which models can run on your AIBox.
+    - Reserve 100% of your GPU for your own workloads when needed.
+- **Rent Out Virtual Machines (CloudSlices):**
+    - Slice your hardware into up to 8 Virtual Machines.
+    - Allocate 0, 1, or 2 GPUs per VM with no oversubscription.
+    - Manage access permissions for connected users.
+- **Lightweight, Secure, and Flexible VM Environments:**
+    - VMs include a minimal OS with Docker (Podman) support.
+    - Each VM is securely connected via Mycelium.
+    - Pre-built Docker images allow quick deployment.
+    - Supports native Docker images and flights.
+    - Web gateways enable external VM connections.
+
+<br/>
+
+More details on AIBox will be shared in the coming weeks, but in the meantime, you can explore the [website](https://aibox.threefold.io/) and [documentation](https://threefold.info/aibox/docs/) and provide your feedback.
+
+<br/>
+
+Pre-register for your AIBox [here](https://form.typeform.com/to/GO9G8ZBa).
+
+<br/>
+ 
+Note: Our team has created the vision, but to fully realize this project, we will need its own dedicated team. We’re providing funding and looking for **a Lead with growth hacking expertise, a Growth Hacker, and a Channel Specialist** to drive it forward. If you are interested, please get in touch with the team through the [forum](https://forum.threefold.io/), [Telegram Chat](https://t.me/threefold), or by email (info@threefold.io).
+
+<br/>
+
+**The Web4 Vision Grows:** The Web4 journey continues! In December we announced v4 3Node, 3Phone, and 3Router and today we have introduced two more elements to the picture. You can start to see how the vision is coming to life:
+
+<br/>
+
+- 3Nodes and AIBoxes provide much-needed resources to power the grid
+- Mycelium serves as the end-to-end network connecting us all
+- 3Routers form an unbreakable network by running Mycelium
+- 3Phones serve as our secure access points into the ecosystem
+
+### Community Expansion: On the Ground @ ETH Denver
+
+Last week, some of the team attended the ETH Denver conference last week, one of the biggest gatherings of the Web3 and DePIN communities. Florian took the stage twice on panels discussing the current state of DePIN and beyond this, the team was busy meeting other projects and investors and even installed a 3Node in the data center of a potential future collaborator. We’ll share a more detailed update soon.
+
+<br/>
+
+![Image](img/flo_eth.jpeg#mx-auto)
+
+<br/>
+
+![Image](img/team_eth.jpeg#mx-auto)
+
+<br/>
+
+### **Looking Ahead**
+
+This week:
+
+<br/>
+
+- Kristof and Florian continue their on the ground efforts at Mobile World Congress in Barcelona, the largest and most influential connectivity event in the world
+
+<br/>
+
+This month:
+
+<br/>
+
+- We will be posting follow-up videos and demos regarding these updates
+- We have a couple of announcements regarding an exciting collaboration in the DePIN space
+- The team continues to work on Web4 components to bring us closer to our vision of a decentralized, private, and secure, agent-centric Internet.
+
+<br/>
+
+Thanks for your time to read this update and be sure to leave your feedback.

css/index.css

@@ -11,6 +11,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
 
 .dashboard:hover {
 

templates/layouts/media.html

@@ -0,0 +1,11 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/media/hero.html" %}
+{% include "partials/media/milestones.html" %}
+{% include "partials/media/branding.html" %}
+{% include "partials/media/founders.html" %}
+{% include "partials/media/social.html" %}
+
+
+{% endblock content %}

templates/partials/home/use_cases.html

@@ -16,7 +16,7 @@
           <img class="fade-in blinking-effect relative mx-auto mb-4" width="25%" src="/images/open_source.png" alt="">
 
           <dt class="flex justify-center items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
-            Decentralized <br>Open-Source Cloud
+            ThreeFold Cloud<br>Open-Source Cloud
           </dt>
           <dd class="mt-4 flex flex-auto flex-col">
             <p class="flex-auto leading-normal font-light text-gray-200 text-md">ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.</p>
@@ -26,7 +26,7 @@
             <p class="text-lg font-semibold text-white mb-2">Available</p>
 
             <ul class="flex justify-center fade-in">
-              <li class="mr-8"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="text-white hover:text-gray-300" target="_blank">TF Dashboard</a></li>
+              <li class="mr-8"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="text-white hover:text-gray-300" target="_blank">Dashboard</a></li>
               <li><a href="https://manual.grid.tf/" class="text-white hover:text-gray-300" target="_blank">Manual</a></li>
             </ul>
           </dd>
@@ -45,7 +45,7 @@
 
             <ul class="flex justify-center fade-in">
               <li class="mr-8"><a href="https://mycelium.threefold.io" class="text-white hover:text-gray-300" target="_blank">Website</a></li>
-              <li><a href="https://manual.grid.tf/documentation/system_administrators/mycelium/mycelium_toc.html" class="text-white hover:text-gray-300" target="_blank">Manual</a></li>
+              <li><a href="https://threefold.info/mycelium/docs/" class="text-white hover:text-gray-300" target="_blank">Docs</a></li>
             </ul>
           </dd>
         </div>
@@ -62,9 +62,10 @@
             </p>
             <p class="text-lg font-semibold text-white mb-2">Coming Soon</p>
 
-            <div class="fade-in">
+            <ul class="flex justify-center fade-in">
-              <a href="" class="text-white hover:text-gray-300" target="_blank"></a>
+              <li class="mr-8"><a href="https://aibox.threefold.io" class="text-white hover:text-gray-300" target="_blank">Website</a></li>
-            </div>
+              <li><a href="https://threefold.info/aibox/docs/" class="text-white hover:text-gray-300" target="_blank">Docs</a></li>
+            </ul>
           </dd>
         </div>
       </div>

templates/partials/media/branding.html

@@ -0,0 +1,259 @@
+<div class="lg:py-24 py-12">
+  <div class=" mx-auto max-w-7xl px-4 lg:px-8">
+    <div class="mx-auto text-center max-w-2xl px-4 lg:max-w-7xl lg:px-8">
+      <h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Our Brand Assets</h2>
+      <p class="my-6 mx-auto max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
+        Download our official brand assets and read guidelines for proper usage
+      </p>
+    </div>
+   
+
+
+    <section class="container mx-auto px-6 py-8">
+      <!-- Title -->
+      <h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Logos</h2>
+
+      <!-- Black Versions -->
+      <div>
+          <h3 class="mt-6 mb-2 lg:mb-0 text-xl lg:text-2xl font-semibold text-white">White Versions</h3>
+          <dl class="items mt-4 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+            <!-- icon -->
+          <div class="fade-in flex flex-col justify-center items-center bg-white/5 p-4">
+            <div class="text-center flex flex-col my-4">
+              <img class="mx-auto"
+                  src="{{ get_url(path='images/download/tft_icon.png') }}" 
+                  width="170" alt="TFT Icon">
+            
+              <a href="{{ get_url(path='images/download/white_threefold_three.png') }}" 
+                download 
+                class="mt-6 text-gray-200 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
+                
+                Download
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#fff"/>
+                  <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#fff"/>
+                </svg>
+              </a>
+            </div>
+          </div>
+            <!-- main Logo -->
+            <div class="fade-in flex flex-col bg-white/5 p-4">
+              <div class="text-center flex flex-col my-4">
+                <img class="mx-auto"
+                    src="{{ get_url(path='images/download/white_tft_logo.png') }}"
+                    width="170" alt="">
+                    
+                    <a href="{{ get_url(path='images/download/white_threefold.png') }}" class="mt-6 text-gray-200 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2  ">
+                  Download
+                  <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#fff"/>
+                    <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#fff"/>
+                  </svg>
+                </a>
+              </div>
+            </div>
+            <!-- horizontal Logo -->
+            <div class="fade-in flex flex-col bg-white/5 p-4">
+              <div class="text-center flex flex-col my-4">
+                <img class="mx-auto"
+                  src="{{ get_url(path='images/download/white_tft_horizontal.png') }}"
+                  width="170" alt="">       
+                  <a href="{{ get_url(path='images/download/white_threefold_horizontal.png') }}" download class="mt-6 text-gray-200 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
+                  Download
+                  <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#fff"/>
+                    <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#fff"/>
+                  </svg>
+                </a>
+              </div>
+            </div>
+            <!-- built logo -->
+            <div class="fade-in flex flex-col bg-white/5 p-4">
+              <div class="text-center flex flex-col my-4">
+                <img class="mx-auto"
+                  src="{{ get_url(path='images/download/white_tft_built_on.png') }}"
+                  width="170" alt="">   
+                  <a href="{{ get_url(path='images/download/white_tft_built_on.png') }}" download class="mt-6 text-gray-200 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
+                  Download
+                  <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#fff"/>
+                    <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#fff"/>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </dl>
+      </div>
+
+      <!-- Black Versions -->
+
+      <div>
+        <h3 class="mt-12 mb-2 lg:mb-0 text-xl lg:text-2xl font-semibold text-white">Black Versions</h3>
+        <dl class="items mt-4 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+          <!-- icon -->
+        <div class="fade-in flex flex-col justify-center items-center bg-white p-4">
+          <div class="text-center flex flex-col my-4">
+            <img class="mx-auto"
+                src="{{ get_url(path='images/download/black_tft_icon.png') }}" 
+                width="170" alt="TFT Icon">
+          
+            <a href="{{ get_url(path='images/download/black_threefold_three.png') }}" 
+              download 
+              class="mt-6 text-gray-800 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
+              
+              Download
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#000"/>
+                <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#000"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+          <!-- main Logo -->
+          <div class="fade-in flex flex-col bg-white p-4">
+            <div class="text-center flex flex-col my-4">
+              <img class="mx-auto"
+                  src="{{ get_url(path='images/download/black_tft_logo.png') }}"
+                  width="170" alt="">
+                  
+                  <a href="{{ get_url(path='images/download/black_threefold.png') }}" class="mt-6 text-gray-800 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2  ">
+                Download
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#000"/>
+                  <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#000"/>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <!-- horizontal Logo -->
+          <div class="fade-in flex flex-col bg-white p-4">
+            <div class="text-center flex flex-col my-4">
+              <img class="mx-auto"
+                src="{{ get_url(path='images/download/black_tft_horizonal.png') }}"
+                width="170" alt="">       
+                <a href="{{ get_url(path='images/download/black_threefold_horizontal.png') }}" download class="mt-6 text-gray-800 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
+                Download
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#000"/>
+                  <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#000"/>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <!-- built logo -->
+          <div class="fade-in flex flex-col bg-white p-4">
+            <div class="text-center flex flex-col my-4">
+              <img class="mx-auto"
+                src="{{ get_url(path='images/download/black_tft_built.png') }}"
+                width="170" alt="">   
+                <a href="{{ get_url(path='images/download/built_on_threefold_horizontal.png') }}" download class="mt-6 text-gray-800 flex items-center justify-center gap-2 hover:text-gray-400 px-4 py-2 ">
+                Download
+                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#000"/>
+                  <path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#000"/>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </dl>
+    </div>
+
+    </section>
+
+    <br>
+
+    <div class="lg:my-12 border-t border-gray-600"></div>
+
+    <br>
+
+    <!-- Color -->
+    <section class="container mx-auto px-6 py-8">
+      <!-- Title -->
+      <h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Colors</h2>
+
+    
+      <div>
+          <dl class="items mt-4 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center lg:grid-cols-3">
+            <div class="fade-in flex flex-col p-4" style="background-color: #333333;">
+              <h3 class="text-2xl items-center justify-center text-gray-200">#333333</h3>
+              <p class="text-base">Dark Charcoal (main color)</p>
+            </div>
+
+            <div class="fade-in flex flex-col p-4" style="background-color: #fefefe;">
+              <h3 class="text-2xl items-center justify-center text-gray-600">#fefefe</h3>
+              <p class="text-base text-gray-600">Shade of White (main color)</p>
+
+            </div>
+            <div class="fade-in flex flex-col p-4" style="background-color: #a1debd;">
+              <h3 class="text-2xl items-center justify-center text-gray-600">#a1debd</h3>
+              <p class="text-base text-gray-600">Ice Green (accent color)</p>
+            </div>
+          </dl>
+      </div>
+    </section>
+
+    <br>
+
+    <div class="lg:my-12 border-t border-gray-600"></div>
+
+    <br>
+
+    <!-- Typography -->
+    <section class="container mx-auto px-6 py-8">
+      <!-- Title -->
+      <h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Typography</h2>
+
+    
+      
+      <!-- Regular -->
+      <div class="my-8">
+        <p class="text-white text-lg font-normal">Inter Regular White</p>
+        <p class="text-gray-200">AaBbCc</p>
+        <div class="bg-white/5 p-4 rounded-lg mt-2">
+          <p class="mt-2 text gray-200 text-2xl font-normal">ThreeFold is the Infrastructure Layer of Web4</p></div>
+      </div>
+
+      <!-- Bold -->
+      <div class="my-8">
+        <p class="text-white text-lg font-bold">Inter Bold White</p>
+        <p class="text-gray-200">AaBbCc</p>
+        <div class="bg-white/5 p-4 rounded-lg mt-2">
+        <p class="mt-2 text gray-200 text-2xl font-bold">ThreeFold is the Infrastructure Layer of Web4</p>
+        </div>
+      </div>
+
+      <!-- Italic -->
+      <div class="my-8" style="font-style: italic">
+        <p class="text-white text-lg font-light italic">Inter Italic White</p>
+        <p class="text-gray-200">AaBbCc</p>
+        <div class="bg-white/5 p-4 rounded-lg mt-2">
+        <p class="mt-2 text gray-200 text-2xl font-light italic">ThreeFold is the Infrastructure Layer of Web4</p>
+        </div>
+      </div>
+    
+    </section>
+
+    <br>
+
+    <div class="lg:my-12 border-t border-gray-600"></div>
+
+    <br>
+
+    <div class="px-4 lg:px-8">
+      <div class="mx-auto max-w-7xl">
+        <h2 class="mx-auto fade-in lg:text-5xl text-3xl leading-snug font-normal tracking-tight text-white capitalize">Guidelines</h2>
+        <div class="max-w-5xl">
+        <p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">When referring to ThreeFold in any written material, always use the correct capitalization: ThreeFold (with a capital "T" and "F"). 
+          <br>
+          Correct: ThreeFold
+          <br>
+          Incorrect: threefold, Threefold, THREEFOLD
+          <br>
+          This ensures brand consistency and recognition across all media and communications.
+        </p>
+      </div>
+    </div>
+    </div>
+</div>
+</div>
+

templates/partials/media/founders.html

@@ -0,0 +1,98 @@
+<div class="lg:py-24 py-12">
+  <div class=" mb-10 lg:max-w-7xl mx-auto px-4 lg:px-8 text-center">
+      <h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl visible">Founders & Key Voices</h2>
+  </div>
+
+    <section class="max-w-7xl px-4 mx-auto py-12 flex items-center justify-center isolate overflow-hidden">
+      <div class="flex flex-col lg:flex-row items-center">
+        <!-- Left Content -->
+        <div class="w-full w-full lg:w-1/2 flex justify-center">
+          <img src="/images/people/kristof_de_spiegeleer.jpeg" alt="AIBox Specifications" 
+               class="w-full lg:w-2/3 rounded-lg grayscale">
+        </div>       
+      
+        <!-- Right Content -->
+        <div class="w-full lg:mt-0 mt-6 lg:w-1/2 lg:text-left">
+          <div class="flex items-center gap-3 fade-in">
+            <h2 class="text-balance font-bold tracking-tight text-white text-xl lg:text-4xl">
+              KRISTOF DE SPIEGELEER
+            </h2>
+            <a href="https://www.linkedin.com/in/despiegk/" target="_blank" 
+               class="mx-2 bg-white hover:gray-500 text-white p-2 rounded-lg transition">
+              <svg class="w-5 h-5" fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4.98 3.5C4.98 4.60457 4.08557 5.5 2.98 5.5C1.87443 5.5 0.98 4.60457 0.98 3.5C0.98 2.39543 1.87443 1.5 2.98 1.5C4.08557 1.5 4.98 2.39543 4.98 3.5ZM1 7H5V21H1V7ZM8 7H12V9.26C12.6325 8.2665 13.878 7 16 7C19.3125 7 21 9.006 21 12.94V21H17V13.71C17 11.587 16.5045 10.5 15.022 10.5C13.5395 10.5 13 11.79 13 13.71V21H9V7H8Z"/>
+              </svg>
+            </a>
+          </div>
+          <p class="mx-auto text-pretty text-lg lg:text-2xl font-medium text-gray-200 fade-in">Co-Founder & CEO</p>
+          <p class="mx-auto mt-6 text-pretty text-base font-normal text-gray-200 fade-in">
+            is a serial entrepreneur with 30+ years of experience in Internet infrastructure and cloud technology, holding multiple patents and world records in storage and automation solutions used by industry giants like Oracle, Verizon, and Western Digital. He has founded over ten companies, with seven successful exits totaling over $600M. A pioneer in building the Internet and data center business in Europe, Kristof is now focused on creating a decentralized, sovereign Internet through ThreeFold. Guided by a belief that doing good for the world and delivering investor returns can coexist, he champions respect, transparency, and innovation in every venture. Kristof has previously spoken at Davos.
+          </p>
+        </div>
+      </div>  
+    </section>
+    <section class="max-w-7xl px-4 mx-auto py-12 flex items-center justify-center isolate overflow-hidden">
+      <div class="flex flex-col lg:flex-row items-center ">
+          
+          <!-- Left Content -->
+          <div class="w-full lg:w-1/2 flex justify-center">
+            <img src="/images/people/florian_fournier.jpeg" alt="AIBox Specifications" class="w-full lg:w-2/3 rounded-lg grayscale">
+          </div> 
+     
+          <!-- Right Image -->
+          <div class="w-full lg:mt-0 mt-6 lg:w-1/2 lg:text-left">
+            <div class="flex items-center gap-3 fade-in">
+              <h2 class="text-balance font-bold tracking-tight text-white text-2xl lg:text-4xl">
+                FLORIAN FOURNIER
+              </h2>
+              <a href="https://www.linkedin.com/in/florianfournier/" target="_blank" 
+                 class="mx-2 bg-white hover:gray-500 text-white p-2 rounded-lg transition">
+                <svg class="w-5 h-5" fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M4.98 3.5C4.98 4.60457 4.08557 5.5 2.98 5.5C1.87443 5.5 0.98 4.60457 0.98 3.5C0.98 2.39543 1.87443 1.5 2.98 1.5C4.08557 1.5 4.98 2.39543 4.98 3.5ZM1 7H5V21H1V7ZM8 7H12V9.26C12.6325 8.2665 13.878 7 16 7C19.3125 7 21 9.006 21 12.94V21H17V13.71C17 11.587 16.5045 10.5 15.022 10.5C13.5395 10.5 13 11.79 13 13.71V21H9V7H8Z"/>
+                </svg>
+              </a>
+            </div>
+            <p class="mx-auto text-pretty text-2xl font-medium text-gray-200 fade-in">Co-Founder & CMO</p>
+            <p class="mx-auto mt-6 text-pretty text-base font-normal text-gray-200 fade-in">
+              Florian Fournier is a serial entrepreneur and ex marketing director at Apple. He's a co-founder at ThreeFold primarily focused on marketing and business development.<br><br>
+              Florian aims to help in bringing new ways of living together, relating, moving, consuming, taking care of each other and working in a more sustainable way, through unpacking current scenarios and anticipating future perspectives. He has previously spoken at Davos and at Balaji Srinivasan’s event Network State, to great acclaim.
+            </p>
+          </div>
+       
+      </div>
+  </section>
+</div>
+
+<style>
+
+      /* Apply the blinking animation to the link */
+ .blinking-effect {
+  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+}
+
+  /* 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/media/hero.html

@@ -0,0 +1,52 @@
+<section class="flex items-center justify-center isolate overflow-hidden h-auto lg:h-screen">
+    <div class="mt-10 lg:mt-1 max-w-7xl mx-auto px-6 lg:px-16 flex flex-col-reverse lg:flex-row items-center ">
+        
+        <!-- Left Content -->
+        <div class="w-full lg:w-1/2 lg:text-left">
+          <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Company Profile</h2>
+          <p class="mx-auto mt-6 text-pretty text-lg font-medium text-gray-200 fade-in">ThreeFold is a pioneering decentralized Internet project designed to create a more open, secure, and sustainable digital infrastructure. By leveraging a global peer-to-peer network of independent nodes, ThreeFold eliminates reliance on centralized cloud providers, ensuring greater privacy, resilience, and accessibility. This innovative model empowers individuals and organizations to contribute computing, storage, and networking resources to the ThreeFold Grid, forming the foundation for a truly autonomous and resilient
+          <br><br>We are currently running V3.15, a large-scale proof of concept network and are now preparing for Version 4, a major upgrade to enable our Web4 vision. The ThreeFold Grid is in more than 50 countries with +2000 nodes online providing data, network and cloud resources to users.</p>
+
+        </div>
+
+        <!-- Right Image -->
+        <div class="w-full lg:w-1/2 flex justify-center">
+            <img src="/images/media_kit.png" alt="AIBox Specifications" class="blinking-effect w-full max-w-md lg:max-w-lg h-auto">
+        </div>
+
+    </div>
+</section>
+
+<style>
+
+      /* Apply the blinking animation to the link */
+ .blinking-effect {
+  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+}
+
+  /* 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/media/milestones.html

@@ -0,0 +1,121 @@
+<section class="text-white py-12 lg:pb-20">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6">
+        <div class="">
+            {# <p class="text-sm font-bold uppercase tracking-widest text-gray-200">How It Works</p> #}
+            <h2 class="fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize visible">Key Milestones & Stats</h2>
+            {# <p class="mx-auto mt-4 max-w-2xl text-lg font-normal text-gray-200 lg:text-xl lg:leading-8">
+                Create your own blog with us and launch it with just 4 easy steps
+            </p> #}
+        </div>
+        <ul class="mx-auto px-0 mt-8 grid grid-cols-1 gap-8  lg:mt-16 lg:grid-cols-3">
+            <li class="flex-start group relative flex lg:flex-col">
+                <span
+                    class="absolute left-[18px] top-14 h-[calc(100%_-_32px)] w-px bg-gray-300 lg:right-0 lg:left-auto lg:top-[18px] lg:h-px lg:w-[calc(100%_-_72px)]"
+                    aria-hidden="true"></span>
+                <div
+                    class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-300 bg-gray-50">
+                    <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                        <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+                    </svg>
+                </div>
+                <div class="ml-6 lg:ml-0 lg:mt-4">
+                    <h3
+                        class="text-xl font-bold text-gray-200 before:mb-2 before:block before:font-mono before:text-sm before:text-gray-500">
+                        Phase I
+                    </h3>
+                    <div class="p-6 rounded-2xl bg-white/5">
+                        <ul class="pl-3 text-base text-gray-200">
+                            <li>Creation of Core Technology</li>
+                            <li>10+ years of Development</li>
+                            <li>Built decentralized, autonomous, edge internet technology</li>
+                            <li>50m dollars invested by founders, community, and TF Tech investors</li>
+                        </ul>
+                    </div>
+                </div>
+            </li>
+            <li class="flex-start group relative flex lg:flex-col">
+                <span
+                    class="absolute left-[18px] top-14 h-[calc(100%_-_32px)] w-px bg-gray-300 lg:right-0 lg:left-auto lg:top-[18px] lg:h-px lg:w-[calc(100%_-_72px)]"
+                    aria-hidden="true"></span>
+                <div
+                    class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-300 bg-gray-50">
+                    <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                        <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+                    </svg>
+                </div>
+                <div class="ml-6 lg:ml-0 lg:mt-4">
+                    <h3
+                        class="text-xl font-bold text-gray-200 before:mb-2 before:block before:font-mono before:text-sm before:text-gray-500">
+                        Phase II
+                    </h3>
+                    <div class="p-6 rounded-2xl bg-white/5">
+                        <ul class="pl-3 text-base text-gray-200">
+                            <li>Global Proof Of Concept</li>
+                            <li>Open Source Development</li>
+                            <li>50+ Countries</li>
+                            <li>50,000+ Cores</li>
+                            <li>25,000,000 GB of Storage</li>
+                            <li>Thousands of enthusiasts actively engage with and contribute to the evolution of the ThreeFold Network.</li>
+                            <li>Decentralized reliable compute, network and storage layer for Web 2-3</li>
+                            <li>Commitments from wonderful projects to build on top of us.</li>
+                        </ul>
+                    </div>
+                    <div class="p-6 mt-6 rounded-2xl bg-white/5">
+                    <h3 class="text-lg font-medium my-2 text-gray-200 before:block before:font-mono before:text-sm ">Status System Component</h3>
+                    
+                        <ul class="list-none pl-3 text-base text-gray-200">
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Infrastructure Layer for Web 2, 3 and 4</li>
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Dashboard</li>
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Dashboard</li>
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Nodes</li>
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed ThreeFold Kubernetes, Virtual Machines, Containers, ...</li>
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed Quantum Safe Storage and File System</li>
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed Mycelium Quantum Safe Network</li>
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed Mycelium Web2 Gateway</li>
+                            <li><i class="fa-solid fa-check mr-2"></i>Completed Mycelium Message Bus</li>
+                            <li><i class="fa-solid fa-arrows-rotate mr-2"></i>Order Now V4 3Node</li>
+                            <li><i class="fa-solid fa-arrows-rotate mr-2"></i>Pre-Order Now 3Phone</li>
+                            <li><i class="fa-solid fa-arrows-rotate mr-2"></i>Pre-Register Now 3Router</li>
+                            <li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming BTC Payment Integration</li>
+                            <li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming Credit Card Payment Integration</li>
+                            <li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming TFT Bridge to Solana</li>
+                            <li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming Mycelium New Features</li>
+                            <li><i class="fa-solid fa-arrows-rotate mr-2"></i>Upcoming AIBox Decentralized AI</li>
+                           
+                        </ul>
+                    </div>   
+                </div>
+            </li>
+            <li class="flex-start group relative flex lg:flex-col">
+                <div
+                    class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-300 bg-gray-50">
+                    <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+                        <path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
+                    </svg>
+                </div>
+                <div class="ml-6 lg:ml-0 lg:mt-4">
+                    <h3
+                        class="text-xl font-bold text-white before:mb-2 before:block before:font-mono before:text-sm ">
+                        Current Phase - 2025
+                    </h3>
+                    <div class="p-4 rounded-2xl bg-white/5">
+                        <h3 class="text-lg font-medium mb-1 text-gray-200 before:block before:font-mono before:text-sm ">Q1 & Q2:</h3>
+                        <ul class="pl-3 text-base text-gray-200">
+                            <li>Introduce 3Phone & 3Router.</li>
+                            <li>Introduce decentralized AI infrastructure and capabilities.</li>
+                            <li>Expand the network considerably.</li>
+                            <li>Build a network of commercial farmers for optimal performance and uptime.</li>
+                            <li>Continue Web4 expansion through delivery of 3Phone and 3Router.</li>
+                        </ul>
+                        <h3 class="text-lg font-medium mb-1 text-gray-200 before:block before:font-mono before:text-sm ">Next:</h3>
+                        <ul class="pl-2 text-base text-gray-200">
+                            <li>Expand the network considerably.</li>
+                            <li>Build a network of commercial farmers for optimal performance and uptime.</li>
+                            <li>Continue Web4 expansion through delivery of 3Phone and 3Router.</li>
+                        </ul>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+</section>

templates/partials/media/social.html

@@ -0,0 +1,99 @@
+<section class="text-white py-12 sm:py-16 lg:pb-20">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6">
+        <div class="text-center">
+            <h2 class="mb-10 fade-in text-balance text-3xl font-normal tracking-tight text-white lg:text-5xl capitalize visible">Social Media & Community</h2>
+        </div>
+
+        <div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
+                <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                    <div class="myscale text-white">
+                        <a target="_blank" href="https://forum.threefold.io/"><img src="/images/discourse_dark.png" class="mx-auto" width="60px" alt="Image"></p>
+                    </div>
+                    <h6 class="text-white mt-4 font-semibold">Forum</h6>
+                    <p class="text-base text-white  leading-snug">Ask Questions</p>
+                </div>   
+                <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                    <div class="myscale">
+                      <a target="_blank" href="https://github.com/threefoldfoundation"><img src="/images/github_dark.png" class="mx-auto" width="60px" alt="Image"></a>
+                    </div>
+                    <h6 class="text-white mt-4 font-semibold">GitHub | Tech</h6>
+                    <p class="text-base text-white  leading-snug">Open-Source Collaboration for Tech Development</p>
+                </div>
+                <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                    <div class="myscale">
+                      <a target="_blank" href="https://github.com/threefoldtech"><img src="/images/github_dark.png" class="mx-auto" width="60px" alt="Image"></a>
+                    </div>
+                    <h6 class="text-white mt-4 font-semibold">GitHub | Foundation</h6>
+                    <p class="text-base text-white  leading-snug">Open-source Collaboration for Websites and Online Info</p>
+                </div>
+                <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                    <div class="myscale">
+                      <a target="_blank" href="https://x.com/threefold_io"><img src="/images/twitter.png" class="mx-auto" width="60px" alt="Image"></a>
+                    </div>
+                    <h6 class="text-white mt-4 font-semibold">X | Twitter</h6>
+                    <p class="text-base text-white  leading-snug">Connect With Us</p>   
+                </div>
+        </div>
+        <div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
+            <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                <div class="myscale text-white">
+                    <a target="_blank" href="https://t.me/threefoldnews"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></p>
+                </div>
+                <h6 class="text-white mt-4 font-semibold">Telegram News</h6>
+                <p class="text-base text-white  leading-snug">Stay Updated</p>
+            </div>   
+            <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                <div class="myscale">
+                  <a target="_blank" href="https://t.me/threefold"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
+                </div>
+                <h6 class="text-white mt-4 font-semibold">Telegram Main Chat</h6>
+                <p class="text-base text-white  leading-snug">Community Conversation</p>
+            </div>
+            <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                <div class="myscale">
+                  <a target="_blank" href="https://t.me/threefoldfarmers"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
+                </div>
+                <h6 class="text-white mt-4 font-semibold">Telegram Farmers Chat</h6>
+                <p class="text-base text-white  leading-snug">Farming Community</p>
+            </div>
+            <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                <div class="myscale">
+                  <a target="_blank" href="https://t.me/threefoldtesting"><img src="/images/telegram.png" class="mx-auto" width="60px" alt="Image"></a>
+                </div>
+                <h6 class="text-white mt-4 font-semibold">Telegram Grid User Chat</h6>
+                <p class="text-base text-white  leading-snug">Grid User Community</p>   
+            </div>
+        </div>
+        <div class="pt-6 lg:pt-10 relative flex flex-col xl:flex xl:flex-row text-center mx-auto justify-center mx-auto">
+            <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                <div class="myscale text-white">
+                    <a target="_blank" href="https://www.reddit.com/r/threefold/"><img src="/images/reddit_dark.png" class="mx-auto" width="60px" alt="Image"></p>
+                </div>
+                <h6 class="text-white mt-4 font-semibold">Reddit</h6>
+                <p class="text-base text-white  leading-snug">Join In</p>
+            </div>   
+            <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                <div class="myscale">
+                  <a target="_blank" href="https://www.youtube.com/@ThreeFoldFoundation"><img src="/images/youtube.png" class="mx-auto" width="60px" alt="Image"></a>
+                </div>
+                <h6 class="text-white mt-4 font-semibold">YouTube</h6>
+                <p class="text-base text-white  leading-snug">Watch Things Unfold</p>
+            </div>
+            <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                <div class="myscale">
+                  <a target="_self" href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"><img src="/images/mail_dark.png" class="mx-auto" width="60px" alt="Image"></a>
+                </div>
+                <h6 class="text-white mt-4 font-semibold">E-mail Newsletter</h6>
+                <p class="text-base text-white  leading-snug">Updates in Your Inbox</p>
+            </div>
+            <div class="flex-1 mb-6 md:mb-0 px-2 md:px-4 w-full m-2 lg:m-0">
+                <div class="myscale">
+                  <a target="_blank" href="https://www.linkedin.com/company/threefold-io/"><img src="/images/linkedin_dark.png" class="mx-auto" width="60px" alt="Image"></a>
+                </div>
+                <h6 class="text-white mt-4 font-semibold">LinkedIn</h6>
+                <p class="text-base text-white  leading-snug">Let's Network</p>   
+            </div>
+        </div>
+    </div>
+        
+</section>