86 changed files with 249 additions and 1155 deletions
--- a/config.toml
+++ b/config.toml
@ -2,7 +2,7 @@
 base_url = "http://template.com"
 # Site title and description
-title = "Mycelium"
+title = "THREEFOLD"
 description = "A modern static site built with Zola and Tailwind CSS"
 # Whether to automatically compile all Sass files in the sass directory
--- a/content/_index.md
+++ b/content/_index.md
@ -4,313 +4,68 @@ sort_by = "date"
 template = "index.html"
 +++
-<!-- Hero section 1 -->
+{{ hero3(
-
+    announcement='<a href="#" class="font-semibold text-gray-300 hover:text-white">Read more &rarr;</a>',
-{{ hero_img(
+    subheader="SUBHEADER",
-    image_src="/images/mycel_1.png",
+    title="This is Hero1.htmll",
-    image_alt="Mycelium Network Graphic",
+    subtitle="This is smaller title h2",
-    title="MYCELIUM",
+    description="Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.",
-    subtitle_1="Unleashing the Power of",
+    button1_text="Get started",
-    subtitle_2="Decentralized Networks",
+    button1_link="#",
-    description="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.",
+    button2_text="Learn more",
-    highlight="Coming Soon: New Decentralized Features",
+    button2_link="#"
    button_text="Get Mycelium",
    button_link="/download"
 ) }}
 <!-- section 2 -->
 {{ text_right_img(
    image_src="/images/mycel2.png",
    image_alt="Discover Mycelium",
    title="Discover Mycelium",
    subtitle_1="ABOUT",
    description="Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.",
    description_2="Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.",
    button_text="Learn more",
    button_link="/about"
 ) }}
 <!-- section 3 -->
 {{ hero_features(
    image_src="/images/feature6a.png",
    image_alt="How Mycelium Operates",
    subtitle_1="HOW IT WORKS",
    title="How Mycelium Operates",
    description="Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.",
    feature_1_title="Decentralized Nodes",
    feature_1_description="Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.",
    feature_2_title="Efficient Data Routing",
    feature_2_description="Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.",
    feature_3_title="End-to-End Encryption",
    feature_3_description="Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network."
 ) }}
 <!-- Section 4 -->
 {{ left_header(
    subtitle="WHAT IT ENABLES",
    title="Powering Secure & Decentralized Connectivity",
    description="Mycelium, a key component of the ThreeFold Grid, can be installed on any computer (macOS, Linux, Windows) and smartphone (iOS, Android). With seamless integration, it enables secure and private communication across devices.",
    description2="The ThreeFold Dashboard offers dozens of applications with built-in Mycelium support, making it easy to deploy and utilize. Once installed, Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure."
 ) }}
 <div class="lg:max-w-7xl container mx-auto py-12 lg:pb-24">
 <div class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-8">
 <div class="relative ">
 ## **PRODUCTIVITY & COMMUNICATION**
 <div class="px-4 mt-2">
 - Secure remote work collaboration.
 - Private file sharing between trusted nodes.
 - Encrypted voice/video calls.
 - Self-hosted messaging systems.
 - Secure document collaboration.
 </div>
 </div>
 <div class="relative ">
 ## **INFRASTRUCTURE**
 <div class="px-4 mt-2">
 - Private cloud computing resources.
 - Secure IoT device networks.
 - Remote system administration..
 - Virtual private networks (VPNs).
 - Secure backup systems.
 </div>
 </div>
 <div class="relative ">
 ## **SERVICES**
 <div class="px-4 mt-2">
 - Self-hosted web services.
 - Private file sharing between trusted nodes.
 - Private DNS systems.
 - Personal email servers.
 - Secure document collaboration.
 </div>
 </div>
 <div class="relative ">
 ## **MEDIA & CONTENT**
 <div class="px-4 mt-2">
 - Private media streaming.
 - Personal cloud storage.
 - Protected content distribution.
 - Secure game servers.
 - Private git repositories.
 </div>
 </div>
 </div>
 <br>
 ---------------------------------------------
 <div class="mx-auto mt-10 px-6 lg:px-0 lg:max-w-6xl">
      <a href="/download" class=" rounded-2xl bg-black px-6 py-2 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get Started</a>
 </div>
 </div>
 <!-- Section 5 -->
 {{ hero_bottom_img(
    image_src="/images/future.png",
    image_alt="Coming Soon: The Future of Mycelium",
    subtitle="WHAT'S NEW",
    title="Coming Soon: The Future of Mycelium",
    description="Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates."
 ) }}
 <div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
 {{ 
-   feature_card(
+    hero2(
-    title="✓ Quantum Safe Storage Functionality", 
+        title="Welcome to Your Zola Site",
-    description="Mycelium's quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.", 
+        subtitle="A modern, responsive website built with Zola and styled with Tailwind CSS", 
-    icon="") }}
+        button_text="Learn More", 
-
+        button_link="/blog", bg_color="bg-blue-700"
 {{ feature_card(
    title="✓ Entry and Exit Points for AI Workloads", 
    description="Seamlessly connect AI applications to Mycelium, providing optimized nd secured data pipelines for training, inference, and real-time processing.", 
    icon="") }}
 {{ feature_card(
    title="✓ Data Storage and Retrieval Mechanisms", 
    description="Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.", 
    icon="") }}
 {{ feature_card(
    title="✓ Integrated Name Services (DNS)", 
    description="The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.", 
    icon="") }}
 {{ feature_card(
    title="✓ Frontend/Backend Integration", 
    description="Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.", 
    icon="") }}
 {{ feature_card(
    title="✓ CDN (Content Delivery Network)", 
    description="Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.", 
    icon="") }}
 </div>
 </div>
 <!-- Section 6 -->
 {{ left_header(
    subtitle="BENEFITS",
    title="Nature's Blueprint for Digital Connectivity",
    description="Just as nature's mycelium network serves as a critical component in the ecosystems of forests, connecting trees and plants underground, the Mycelium technology offers reliable connectivity in an efficient and resilient way.",
    description2=""
 ) }}
-<div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
+
 ## About This Site
 This is a modern, responsive website built with [Zola](https://www.getzola.org/) and styled with [Tailwind CSS](https://tailwindcss.com/). It demonstrates the use of shortcodes and markdown together to create beautiful, reusable components.
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
 {{ 
    feature_card(
-        title="Decentralization", 
+        title="Fast and Lightweight", 
-        description="Designed to operate in a decentralized manner, it connects nodes and enables efficient data transfer and communication without relying on a single central authority.", 
+        description="Zola generates static HTML files that load quickly", 
-        icon="/images/decentralization.svg",
+        icon="⚡"
-        link="/about",
+        ) 
-        link_name="Learn More"
+}}
 ) }}
 {{ feature_card(title="Modern Design", description="Tailwind CSS provides utility classes for rapid UI development", icon="🎨") }}
-{{ feature_card(
+{{ feature_card(title="Responsive Layout", description="Looks great on all devices, from mobile to desktop", icon="📱") }}
    title="Efficiency", 
    description="Mycelium provides an efficient digital communication network where data travels along the most efficient paths, reducing latency and optimizing resource utilization.", 
    icon="/images/efficiency.svg",
    link="/about",
    link_name="Learn More"
-    ) }}
+{{ feature_card(title="Markdown Content", description="Write your content in Markdown for easy formatting", icon="📝") }}
-{{ feature_card(
+{{ feature_card(title="Syntax Highlighting", description="Code blocks are automatically highlighted", icon="💻") }}
    title="Resilience", 
    description="Inspired by nature's resilience, it creates a network that can adapt and continue to function even in the presence of challenges, ensuring uninterrupted communication.", 
    icon="/images/resilience.svg",
    link="/about",
    link_name="Learn More"
-    ) }}
+{{ feature_card(title="Search Functionality", description="Built-in search for your content", icon="🔍") }}
 </div>
 </div>
 <!-- Section 7 -->
 <div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
 {{ left_header(
    subtitle="",
    title="Frequently Asked Questions",
    description="",
    description2=""
 ) }}
 <br>
 {{ accordion(
    question="What is Mycelium?",
    description="Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications."
 ) }}
 {{ accordion(
    question="Is mycelium ready to scale to the world?",
    description="No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025."
 ) }}
 {{ accordion(
    question="How do I install Mycelium?",
    description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. Click here for more info."
 ) }}
 {{ accordion(
    question="How can I find and use my Mycelium address?",
    description="Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface."
 ) }}
 {{ accordion(
    question="Can I deploy workloads on the TFGrid using Mycelium?",
    description="Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation."
 ) }}
 {{ accordion(
    question="Is there an API available for Mycelium?",
    description="Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository"
    )
    }}
 {{ accordion(
    question="What should I do if I encounter issues during installation or usage?",
    description="If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations."
    )
    }}
 {{ accordion(
    question="How does Mycelium handle routing within its network?",
    description="Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network."
    )
    }}
 </div>
 ### Getting Started
-<!-- Section 8 -->
+To add new content, create Markdown files in the `content` directory. Zola will automatically generate pages for each file.
-{{ cta(
+For more information, check out the [Zola documentation](https://www.getzola.org/documentation/getting-started/overview/) and [Tailwind CSS documentation](https://tailwindcss.com/docs).
-    image_src="/images/mycel3.png",
+
-    image_alt="App screenshot",
+{{ 
-    title="Get Mycelium Today",
+    cta(
-    description="Join the Mycelium network and be a part of the decentralized movement.",
+        title="Ready to Get Started?", 
-    button_text="Download Now",
+        description="Create your own beautiful website with Zola and Tailwind CSS today.", 
-    button_link="/download",
+        button_text="View Blog", 
-    button_text2="Read More",
+        button_link="/blog") 
-    button_link2="https://threefold.info/mycelium/docs/"
+}}
 ) }}
 <style scope>
  ul {
  list-style: circle;
  margin: 0;
  padding: 0;
 }
  </style>
--- a/content/about.md
+++ b/content/about.md
@ -1,101 +0,0 @@
 +++
 title = "about"
 template = "index.html"
 date = 2025-03-22
 +++
 <!-- section 1 -->
 {{ hero_right_img(
    image_src="/images/mycel5.jpg",
    image_alt="Mobile App Screenshot",
    title="About Mycelium",
    subtitle="Redefining Digital Communication",
    description_1="Mycelium is designed to improve how we connect and communicate in the digital world. Its goal is to create a secure, efficient, and scalable digital ecosystem where data flows seamlessly and remains protected.",
    description_2="We aim to build a system that adapts to our growing digital needs while promoting sustainability and security."
 ) }}
 <!-- section 2 -->
 {{ desciption_blockquote(
    title="Our Technology",
    description_1="Mycelium enables secure, efficient, and scalable data transfer between network nodes by optimizing data routing. It ensures that information takes the shortest path with the lowest latency, resulting in faster and more efficient communication.",
    description_2="The technology relies on end-to-end encryption, with each node uniquely identified by its own key pair, guaranteeing the security and privacy of data. This approach ensures that data remains confidential and authentic, strengthening the overall privacy and integrity of the network.",
    description_3="Mycelium was created to overcome the limitations of traditional networking protocols while promoting a more sustainable and eco-friendly digital ecosystem. Its goal is to transform digital communication, making it not only efficient and secure but also environmentally responsible.",
    description_4="The inspiration behind Mycelium comes from the need for a technology that can adapt to changing network conditions and continue to operate efficiently in a rapidly evolving digital landscape."
 ) }}
 <!-- section 2 -->
 {{ text_left_img(
    image_src="/images/efficient.jpeg",
    image_alt="Discover Mycelium",
    title="Highly Efficient",
    subheader="BENEFITS",
    subtitle="Optimizing Data Routing",
    description="Mycelium's routing algorithms prioritize minimizing latency in data transfer. This ensures that data takes the most direct and efficient route, reducing the time it takes to travel from the source node to the destination node.",
    description_2="",
    button_text="",
    button_link=""
 ) }}
 <!-- section 3 -->
 {{ text_right_img(
    image_src="/images/security.jpeg",
    image_alt="Discover Mycelium",
    title="Enhancing Security",
    subheader="BENEFITS",
    subtitle="End-to-End Encryption",
    description="Each node in the Mycelium network is assigned a unique key pair, consisting of a public and private key. The public key is used to encrypt data intended for that node, while the private key decrypts the data upon receipt. This cryptographic system ensures that only the intended recipient can access the information.",
    description_2="When one node sends data to another within the Mycelium network, the data is encrypted with the recipient's public key. This ensures that even if the data is intercepted during transmission, it remains secure and unreadable without the corresponding private key.",
    button_text="",
    button_link=""
 ) }}
 <!-- section 2 -->
 {{ text_left_img(
    image_src="/images/scalability.jpeg",
    image_alt="Discover Mycelium",
    title="Enhances Scalability",
    subheader="BENEFITS",
    subtitle="Designed to Adapt",
    description="Mycelium is an open-source project built to adapt dynamically to changing network conditions. As new nodes join or existing nodes leave, the system adjusts seamlessly, allowing Mycelium to scale and support more participants without sacrificing performance.",
    description_2="The system is designed to efficiently distribute network traffic. During periods of high demand or increased data transfer, Mycelium balances the load by routing data through multiple paths or nodes. This ensures the network can handle greater traffic and more users without becoming overloaded.",
    button_text="",
    button_link=""
 ) }}
 <!-- section 2 -->
 {{ cta(
    image_src="/images/mycel3.png",
    image_alt="App screenshot",
    title="Get Mycelium Today",
    description="Join the Mycelium network and be a part of the decentralized movement.",
    button_text="Download Now",
    button_link="/download",
    button_text2="Read More",
    button_link2="https://threefold.info/mycelium/docs/"
 ) }}
--- a/content/why.md
+++ b/content/why.md
@ -0,0 +1,109 @@
 +++
 title = "Why Choose Us"
 template = "index.html"
 date = 2025-03-22
 +++
 {{ hero(
    title="Why Choose Our Solution",
    subtitle="Discover the benefits and advantages that set us apart",
    button_text="Get Started",
    button_link="/blog",
    bg_color="bg-gradient-to-r from-purple-600 to-indigo-600"
 ) }}
 ## Our Advantages
 We believe in creating solutions that not only meet your needs but exceed your expectations. Here's why our approach stands out from the rest.
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
 {{ 
    feature_card(
        title="Innovative Technology", 
        description="We leverage cutting-edge technologies to deliver modern, efficient solutions", 
        icon="💡"
    ) 
 }}
 {{ 
    feature_card(
        title="User-Centered Design", 
        description="Our products are designed with the user experience as the top priority", 
        icon="👤"
    ) 
 }}
 {{ 
    feature_card(
        title="Scalable Architecture", 
        description="Built to grow with your needs, from startup to enterprise", 
        icon="📈"
    ) 
 }}
 {{ 
    feature_card(
        title="Reliable Support", 
        description="Our dedicated team is always ready to help you succeed", 
        icon="🛠️"
    ) 
 }}
 {{ 
    feature_card(
        title="Continuous Improvement", 
        description="We constantly refine our solutions based on feedback and new technologies", 
        icon="🔄"
    ) 
 }}
 {{ 
    feature_card(
        title="Cost Effective", 
        description="Maximum value without compromising on quality or features", 
        icon="💰"
    ) 
 }}
 </div>
 ## Our Approach
 We follow a systematic approach to ensure that every solution we deliver meets the highest standards of quality and performance.
 1. **Discovery** - We start by understanding your unique challenges and goals
 2. **Planning** - Develop a comprehensive strategy tailored to your specific needs
 3. **Implementation** - Execute the plan with precision and attention to detail
 4. **Testing** - Rigorous quality assurance to ensure everything works perfectly
 5. **Deployment** - Smooth transition to production with minimal disruption
 6. **Support** - Ongoing assistance to ensure long-term success
 {{ 
    cta(
        title="Ready to Experience the Difference?", 
        description="Join the many satisfied clients who have transformed their operations with our solutions.", 
        button_text="Contact Us", 
        button_link="#",
        bg_color="bg-indigo-100",
        text_color="text-indigo-800"
    ) 
 }}
 ## Testimonials
 > "Implementing this solution has revolutionized how we operate. The efficiency gains alone have paid for the investment multiple times over."
 > 
 > **— Sarah Johnson, CEO at TechInnovate**
 > "The team's attention to detail and commitment to our success made all the difference. I can't recommend them highly enough."
 > 
 > **— Michael Chen, CTO at DataFlow Systems**
 {{ 
    hero2(
        title="See Our Solution in Action",
        subtitle="Schedule a personalized demo to discover how we can address your specific challenges", 
        button_text="Request Demo", 
        button_link="#", 
        bg_color="bg-blue-700"
    ) 
 }}
--- a/static/css/main.css
+++ b/static/css/main.css
@ -18,10 +18,10 @@ html {
 /* Light mode (default) */
        body {
            background-color: #f3f4f6;
-            color: #171717;
+            color: #1f2937;
        }
        header nav {
-            background-color: #171717;
+            background-color: #1f2937;
            color: #f9fafb;
        }
        footer {
@ -37,25 +37,25 @@ html {
            color: #f9fafb !important;
        }
        html.dark header nav {
-            background-color: #171717 !important;
+            background-color: #1f2937 !important;
        }
        html.dark footer {
-            background-color: #171717 !important;
+            background-color: #1f2937 !important;
        }
        html.dark footer p {
            color: #9ca3af !important;
        }
        html.dark a {
-            color: white !important;
+            color: #60a5fa !important;
        }
        html.dark a:hover {
            color: #93c5fd !important;
        }
        html.dark .bg-gray-100 {
-            background-color: #171717 !important;
+            background-color: #111827 !important;
        }
        html.dark .bg-white {
-            background-color: #171717 !important;
+            background-color: #1f2937 !important;
        }
        html.dark .text-gray-900 {
            color: #f9fafb !important;
@ -131,7 +131,7 @@ hr {
 */
 pre {
-  font-family: 'Inter', sans-serif; /* 1 */
+  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
 }
@ -175,7 +175,7 @@ strong {
 code,
 kbd,
 samp {
-  font-family: 'Inter', sans-serif; /* 1 */
+  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
 }
@ -483,7 +483,7 @@ ul {
 */
 html {
-  font-family: 'Inter', sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
  line-height: 1.5; /* 2 */
 }
@ -619,7 +619,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: 'Inter', sans-serif;
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 /**
@ -12520,15 +12520,15 @@ video {
 }
 .font-sans {
-  font-family: 'Inter', sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 .font-serif {
-  font-family: 'Inter', sans-serif;
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
 }
 .font-mono {
-  font-family: 'Inter', sans-serif;
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 .font-hairline {
@ -33575,15 +33575,15 @@ video {
  }
  .sm\:font-sans {
-    font-family: 'Inter', sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  .sm\:font-serif {
-    font-family: 'Inter', sans-serif;
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  }
  .sm\:font-mono {
-    font-family: 'Inter', sans-serif;
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  .sm\:font-hairline {
@ -54563,15 +54563,15 @@ video {
  }
  .md\:font-sans {
-    font-family: 'Inter', sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  .md\:font-serif {
-    font-family: 'Inter', sans-serif;
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  }
  .md\:font-mono {
-    font-family: 'Inter', sans-serif;
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  .md\:font-hairline {
@ -75551,15 +75551,15 @@ video {
  }
  .lg\:font-sans {
-    font-family: 'Inter', sans-serif; Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  .lg\:font-serif {
-    font-family: 'Inter', sans-serif;
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  }
  .lg\:font-mono {
-    font-family: 'Inter', sans-serif;
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  .lg\:font-hairline {
@ -96539,15 +96539,15 @@ video {
  }
  .xl\:font-sans {
-    font-family: 'Inter', sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  .xl\:font-serif {
-    font-family: 'Inter', sans-serif;
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  }
  .xl\:font-mono {
-    font-family: 'Inter', sans-serif;
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  .xl\:font-hairline {
--- a/static/images/about1.jpg
+++ b/static/images/about1.jpg
--- a/static/images/about2.jpg
+++ b/static/images/about2.jpg
--- a/static/images/about3.jpg
+++ b/static/images/about3.jpg
--- a/static/images/about4.jpg
+++ b/static/images/about4.jpg
--- a/static/images/ai.jpg
+++ b/static/images/ai.jpg
--- a/static/images/asset.jpg
+++ b/static/images/asset.jpg
--- a/static/images/bot2.jpg
+++ b/static/images/bot2.jpg
--- a/static/images/datacenter.jpg
+++ b/static/images/datacenter.jpg
--- a/static/images/dc.jpg
+++ b/static/images/dc.jpg
--- a/static/images/dc2.jpg
+++ b/static/images/dc2.jpg
--- a/static/images/decent.png
+++ b/static/images/decent.png
--- a/static/images/decentralization.svg
+++ b/static/images/decentralization.svg
@ -1,76 +0,0 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
  <defs>
    <style>
      .cls-1 {
        fill: #000;
      }
      .cls-1, .cls-2, .cls-3 {
        stroke-width: 0px;
      }
      .cls-4 {
        clip-path: url(#clippath-2);
      }
      .cls-2 {
        fill: #a6a6a6;
      }
      .cls-3 {
        fill: none;
      }
      .cls-5 {
        clip-path: url(#clippath-1);
      }
      .cls-6 {
        clip-path: url(#clippath-4);
      }
      .cls-7 {
        clip-path: url(#clippath);
      }
      .cls-8 {
        clip-path: url(#clippath-3);
      }
    </style>
    <clipPath id="clippath">
      <rect class="cls-3" x="9.6" y="9.5" width="31.3" height="31.3"/>
    </clipPath>
    <clipPath id="clippath-1">
      <rect class="cls-3" x="21.1" y="4.7" width="8.3" height="8.6"/>
    </clipPath>
    <clipPath id="clippath-2">
      <rect class="cls-3" x="21.1" y="36.6" width="8.3" height="8.7"/>
    </clipPath>
    <clipPath id="clippath-3">
      <rect class="cls-3" x="37" y="27.4" width="7.7" height="9.2"/>
    </clipPath>
    <clipPath id="clippath-4">
      <rect class="cls-3" x="37" y="12.4" width="7.7" height="10"/>
    </clipPath>
  </defs>
  <g class="cls-7">
    <path class="cls-2" d="M40.5,24.9c0,1-.1,2-.3,3,0,.5-.2,1-.4,1.5-.1.5-.3,1-.5,1.4-.4.9-.9,1.8-1.4,2.7-.6.8-1.2,1.6-1.9,2.3-.4.4-.7.7-1.1,1-.4.3-.8.6-1.2.9-3,2-6.5,2.9-10.1,2.5-.5,0-1-.1-1.5-.2-.5-.1-1-.2-1.5-.4-.5-.1-1-.3-1.4-.5-.9-.4-1.8-.9-2.7-1.4-.4-.3-.8-.6-1.2-.9-.8-.6-1.5-1.4-2.1-2.1-.3-.4-.6-.8-.9-1.2-.6-.8-1-1.7-1.4-2.7-.2-.5-.4-.9-.5-1.4-.1-.5-.3-1-.4-1.5-.1-.5-.2-1-.2-1.5,0-.5,0-1,0-1.5s0-1,0-1.5c0-.5.1-1,.2-1.5,0-.5.2-1,.4-1.5.6-1.9,1.6-3.8,2.8-5.3.3-.4.7-.8,1-1.1.4-.4.7-.7,1.1-1,1.2-1,2.5-1.8,3.9-2.3.5-.2.9-.4,1.4-.5,1.5-.4,3-.7,4.5-.7,1,0,2,.1,3,.3.5.1,1,.2,1.5.4,1,.3,1.9.7,2.8,1.2.4.2.9.5,1.3.8.4.3.8.6,1.2.9.4.3.8.7,1.1,1,.4.4.7.7,1,1.1.3.4.6.8.9,1.2,1.7,2.5,2.6,5.5,2.6,8.6Z"/>
  </g>
  <path class="cls-1" d="M28.5,22.5l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c0,0,.2,0,.3,0,.1,0,.2,0,.3,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM27.6,26.4l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
  <g class="cls-5">
    <path class="cls-1" d="M28.5,6.6l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.1,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c0,0,.2,0,.3,0,.1,0,.2,0,.3,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM27.6,10.5l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
  </g>
  <g class="cls-4">
    <path class="cls-1" d="M28.5,38.6l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c0,0,.2,0,.3,0,.1,0,.2,0,.3,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM27.6,42.4l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
  </g>
  <path class="cls-1" d="M12.5,29.9l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c.2.1.4.1.6,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM11.6,33.7l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
  <g class="cls-8">
    <path class="cls-1" d="M44.5,29.9l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c.2.1.4.1.6,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5ZM43.6,33.7l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
  </g>
  <path class="cls-1" d="M12.5,15.1l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c.2.1.4.1.6,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5h0ZM11.6,19l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
  <g class="cls-6">
    <path class="cls-1" d="M44.5,15.1l-3.2-1.8c-.2-.1-.4-.1-.6,0l-3.2,1.8c-.2.1-.3.3-.3.5v3.6c0,.2.1.4.3.5l3.2,1.8c.2.1.4.1.6,0l3.2-1.8c.2-.1.3-.3.3-.5v-3.6c0-.2-.1-.4-.3-.5h0ZM43.6,19l-2.5,1.5-2.5-1.5v-2.9l2.5-1.5,2.5,1.5v2.9Z"/>
  </g>
  <path class="cls-1" d="M9.7,26.5v-3.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.1c0,.3.3.6.6.6s.6-.3.6-.6h0ZM25.7,34.4v-3.1c0-.3-.3-.6-.6-.6-.3,0-.6.3-.6.6h0v3.1c0,.3.3.6.6.6.3,0,.6-.3.6-.6,0,0,0,0,0,0ZM18.9,37.4l-3.7-2.3c-.3-.2-.7,0-.9.2s0,.7.2.9h0l3.7,2.3c.3.2.7,0,.9-.2.2-.3,0-.7-.2-.9ZM34.7,35.1l-3.7,2.3c-.3.2-.4.6-.2.9.1.2.3.3.5.3.1,0,.2,0,.3,0l3.7-2.3c.3-.2.4-.6.2-.9-.2-.3-.6-.4-.8-.2ZM31,12.5l3.7,2.3c0,0,.2,0,.3,0,.2,0,.4-.1.5-.3.2-.3,0-.7-.2-.9l-3.7-2.3c-.3-.2-.7,0-.9.2,0,0,0,0,0,0-.2.3,0,.7.2.9ZM15.1,14.8c.1,0,.2,0,.3,0l3.7-2.3c.3-.2.4-.6.2-.9-.2-.3-.6-.4-.9-.2l-3.7,2.3c-.3.2-.4.6-.2.9.1.2.3.3.5.3ZM25.7,18.5v-3.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.1c0,.3.3.6.6.6.3,0,.6-.3.6-.6,0,0,0,0,0,0ZM41.7,26.5v-3.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.1c0,.3.3.6.6.6s.6-.3.6-.6h0ZM19.2,21.6l-3.7-1.8c-.3-.1-.7,0-.8.3,0,0,0,0,0,0-.1.3,0,.7.3.8l3.7,1.8c0,0,.2,0,.3,0,.2,0,.5-.1.6-.4.1-.3,0-.7-.3-.8ZM31.3,22.8c0,0,.2,0,.3,0l3.7-1.8c.3-.1.5-.5.3-.8-.1-.3-.5-.5-.8-.3,0,0,0,0,0,0l-3.7,1.8c-.3.1-.4.5-.3.8.1.2.3.4.6.4ZM35.3,29.2l-3.7-1.8c-.3-.1-.7,0-.8.3,0,0,0,0,0,0-.1.3,0,.7.3.8h0s3.7,1.8,3.7,1.8c0,0,.2,0,.3,0,.3,0,.6-.3.6-.6,0-.2-.1-.5-.4-.6ZM18.6,27.4l-3.7,1.8c-.3.1-.4.5-.3.8.1.2.3.4.6.4,0,0,.2,0,.3,0l3.7-1.8c.3-.1.4-.5.3-.8-.1-.3-.5-.4-.8-.3,0,0,0,0,0,0Z"/>
 </svg>
--- a/static/images/digital.jpg
+++ b/static/images/digital.jpg
--- a/static/images/eco.jpg
+++ b/static/images/eco.jpg
--- a/static/images/eco2.jpg
+++ b/static/images/eco2.jpg
--- a/static/images/eco3.jpg
+++ b/static/images/eco3.jpg
--- a/static/images/effic.png
+++ b/static/images/effic.png
--- a/static/images/efficiency.svg
+++ b/static/images/efficiency.svg
@ -1,36 +0,0 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
  <defs>
    <style>
      .cls-1 {
        fill: #000;
      }
      .cls-1, .cls-2, .cls-3 {
        stroke-width: 0px;
      }
      .cls-2 {
        fill: #a6a6a6;
      }
      .cls-3 {
        fill: none;
      }
      .cls-4 {
        clip-path: url(#clippath);
      }
    </style>
    <clipPath id="clippath">
      <rect class="cls-3" x="9.6" y="9.5" width="31.2" height="31.2"/>
    </clipPath>
  </defs>
  <g class="cls-4">
    <path class="cls-2" d="M40.5,25c0,1-.1,2-.3,3-.1.5-.2,1-.4,1.5-.1.5-.3,1-.5,1.4-.4.9-.9,1.8-1.4,2.7-.6.8-1.2,1.6-1.9,2.3-1.1,1.1-2.3,2-3.6,2.7-.4.2-.9.5-1.4.6-.5.2-.9.4-1.4.5-.5.1-1,.3-1.5.4-2,.4-4,.4-6,0-1-.2-2-.5-2.9-.9-1.4-.6-2.7-1.4-3.9-2.3-.4-.3-.8-.7-1.1-1-1.1-1.1-2-2.3-2.7-3.6-.2-.4-.5-.9-.6-1.4-.2-.5-.4-.9-.5-1.4-.4-1.5-.7-3-.7-4.5,0-1,.1-2,.3-3,.1-.5.2-1,.4-1.5.6-1.9,1.6-3.8,2.8-5.3.3-.4.7-.8,1-1.1.4-.4.7-.7,1.1-1,.4-.3.8-.6,1.2-.9,2.5-1.7,5.5-2.6,8.6-2.6,1,0,2,.1,3,.3.5.1,1,.2,1.5.4.5.1,1,.3,1.4.5.9.4,1.8.9,2.7,1.4.8.6,1.6,1.2,2.3,1.9.4.4.7.7,1,1.1.3.4.6.8.9,1.2,1.7,2.5,2.6,5.5,2.6,8.6Z"/>
  </g>
  <path class="cls-1" d="M24.4,22.7c.2-.5,0-1.1-.5-1.3,0,0,0,0,0,0-1.3-.6-2.8-1-4.3-1-1.3,0-2.6.3-3.9.8-1.2.5-2.3,1.2-3.2,2.1-.9.9-1.6,2-2.1,3.2-.5,1.2-.8,2.5-.8,3.9,0,1.3.3,2.6.8,3.9,1,2.4,2.9,4.3,5.3,5.3,1.2.5,2.5.8,3.9.8s2.6-.3,3.9-.8c2.4-1,4.3-2.9,5.3-5.3.5-1.2.8-2.5.8-3.9s-.3-2.9-.9-4.2c-.2-.5-.8-.7-1.3-.5-.5.2-.7.8-.5,1.3.5,1.1.8,2.2.8,3.4,0,2.1-.8,4.1-2.3,5.6-1.5,1.5-3.5,2.3-5.6,2.3-2.1,0-4.1-.8-5.6-2.3-1.5-1.5-2.3-3.5-2.3-5.6,0-2.1.8-4.1,2.3-5.6,1.5-1.5,3.5-2.3,5.6-2.3,1.2,0,2.4.3,3.4.8.5.2,1.1,0,1.3-.5h0Z"/>
  <path class="cls-1" d="M30.7,22.2c-.5.3-.6.9-.3,1.4,1.3,2,1.9,4.3,1.9,6.7,0,1.7-.3,3.4-1,4.9-.6,1.5-1.6,2.9-2.7,4-1.2,1.2-2.5,2.1-4,2.7-1.6.7-3.2,1-4.9,1-1.7,0-3.4-.3-4.9-1-1.5-.6-2.9-1.6-4-2.7-1.2-1.2-2.1-2.5-2.7-4-.7-1.6-1-3.2-1-4.9,0-5.3,3.2-10,8.2-11.8,1.4-.5,3-.8,4.5-.8,2.4,0,4.7.7,6.7,1.9.5.3,1.1.1,1.4-.4.3-.5.1-1-.3-1.3-2.3-1.4-5-2.2-7.7-2.2-1.8,0-3.5.3-5.2.9-5.7,2.2-9.5,7.6-9.5,13.7,0,3.9,1.5,7.6,4.3,10.4,1.3,1.3,2.9,2.4,4.7,3.1,1.8.8,3.7,1.2,5.7,1.2,3.9,0,7.6-1.5,10.4-4.3,2.8-2.7,4.3-6.5,4.3-10.4,0-2.8-.8-5.5-2.2-7.8-.3-.5-.9-.6-1.4-.3Z"/>
  <path class="cls-1" d="M44.9,12.9c-.1-.4-.4-.6-.8-.7l-5-.8c-.1-.2-.3-.4-.5-.5l-.8-5c0-.4-.3-.7-.7-.8-.4-.1-.8,0-1,.2l-6.4,6.4c-.2.2-.3.5-.3.9l.9,5.7-11,11c-.4.4-.4,1,0,1.4.2.2.4.3.7.3.3,0,.5,0,.7-.3l11-11,5.7.9c.3,0,.6,0,.9-.3l6.4-6.4c.3-.3.4-.7.2-1h0ZM36.1,8.1l.6,3.8-4.6,4.6-.6-3.8,4.6-4.6ZM37.2,18.5l-3.8-.6,4.6-4.6,3.8.6-4.6,4.6Z"/>
  <path class="cls-1" d="M19.7,27.7c.1,0,.2,0,.4,0,.5,0,1.1-.3,1.1-.9,0-.5-.3-1.1-.9-1.1h0c-.2,0-.4,0-.6,0-2.6,0-4.7,2.1-4.7,4.7,0,2.6,2.1,4.7,4.7,4.7,2.6,0,4.7-2.1,4.7-4.7,0-.2,0-.4,0-.6,0-.5-.6-.9-1.2-.8-.5,0-.9.6-.8,1.1,0,.1,0,.2,0,.4,0,1.5-1.2,2.7-2.7,2.7-1.5,0-2.7-1.2-2.7-2.7,0-1.5,1.2-2.7,2.7-2.7Z"/>
 </svg>
--- a/static/images/efficient.jpeg
+++ b/static/images/efficient.jpeg
--- a/static/images/feature6.png
+++ b/static/images/feature6.png
--- a/static/images/feature6a.png
+++ b/static/images/feature6a.png
--- a/static/images/freezone.jpg
+++ b/static/images/freezone.jpg
--- a/static/images/freezone2.jpg
+++ b/static/images/freezone2.jpg
--- a/static/images/fumba.jpg
+++ b/static/images/fumba.jpg
--- a/static/images/fumba.webp
+++ b/static/images/fumba.webp
--- a/static/images/future.png
+++ b/static/images/future.png
--- a/static/images/hero.png
+++ b/static/images/hero.png
--- a/static/images/hero2.png
+++ b/static/images/hero2.png
--- a/static/images/hero3.png
+++ b/static/images/hero3.png
--- a/static/images/hero4.png
+++ b/static/images/hero4.png
--- a/static/images/hero5.png
+++ b/static/images/hero5.png
--- a/static/images/home.jpg
+++ b/static/images/home.jpg
--- a/static/images/home1.jpg
+++ b/static/images/home1.jpg
--- a/static/images/logo.svg
+++ b/static/images/logo.svg
--- a/static/images/logo_s.svg
+++ b/static/images/logo_s.svg
--- a/static/images/mycel2
+++ b/static/images/mycel2
--- a/static/images/mycel2.png
+++ b/static/images/mycel2.png
--- a/static/images/mycel3
+++ b/static/images/mycel3
--- a/static/images/mycel3.png
+++ b/static/images/mycel3.png
--- a/static/images/mycel5
+++ b/static/images/mycel5
--- a/static/images/mycel5
+++ b/static/images/mycel5
--- a/static/images/mycel5.jpg
+++ b/static/images/mycel5.jpg
--- a/static/images/mycel5.png
+++ b/static/images/mycel5.png
--- a/static/images/mycel_1
+++ b/static/images/mycel_1
--- a/static/images/mycel_1.png
+++ b/static/images/mycel_1.png
--- a/static/images/mycelium_dark.png
+++ b/static/images/mycelium_dark.png
--- a/static/images/mycelium_white.png
+++ b/static/images/mycelium_white.png
--- a/static/images/new_logo_tft.png
+++ b/static/images/new_logo_tft.png
--- a/static/images/people_1.jpg
+++ b/static/images/people_1.jpg
--- a/static/images/people_2.jpg
+++ b/static/images/people_2.jpg
--- a/static/images/people_3.jpg
+++ b/static/images/people_3.jpg
--- a/static/images/people_4.jpg
+++ b/static/images/people_4.jpg
--- a/static/images/people_5.jpg
+++ b/static/images/people_5.jpg
--- a/static/images/resil.png
+++ b/static/images/resil.png
--- a/static/images/resilience.svg
+++ b/static/images/resilience.svg
@ -1,42 +0,0 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
  <defs>
    <style>
      .cls-1 {
        fill: #000;
      }
      .cls-1, .cls-2, .cls-3 {
        stroke-width: 0px;
      }
      .cls-2 {
        fill: #a6a6a6;
      }
      .cls-3 {
        fill: none;
      }
      .cls-4 {
        clip-path: url(#clippath-1);
      }
      .cls-5 {
        clip-path: url(#clippath);
      }
    </style>
    <clipPath id="clippath">
      <rect class="cls-3" x="9.4" y="9.5" width="31.2" height="31.3"/>
    </clipPath>
    <clipPath id="clippath-1">
      <rect class="cls-3" x="8.4" y="5" width="33.1" height="40"/>
    </clipPath>
  </defs>
  <g class="cls-5">
    <path class="cls-2" d="M40.3,25c0,.5,0,1,0,1.5-.2,2-.8,4-1.8,5.8-.2.4-.5.9-.8,1.3-.3.4-.6.8-.9,1.2-.6.8-1.4,1.5-2.1,2.1-.4.3-.8.6-1.2.9-.4.3-.9.5-1.3.8-.9.5-1.8.9-2.8,1.2-.5.1-1,.3-1.5.4-1.5.3-3,.4-4.5.2-.5,0-1-.1-1.5-.2-.5-.1-1-.2-1.5-.4-.5-.1-1-.3-1.4-.5-.5-.2-.9-.4-1.4-.6-.4-.2-.9-.5-1.3-.8-.4-.3-.8-.6-1.2-.9-.8-.6-1.5-1.4-2.1-2.1-.3-.4-.6-.8-.9-1.2-.3-.4-.5-.9-.8-1.3-.5-.9-.9-1.8-1.2-2.8-.7-2.4-.9-5-.4-7.5,0-.5.2-1,.4-1.5.2-.5.3-1,.5-1.4.2-.5.4-.9.6-1.4.5-.9,1-1.7,1.7-2.5.6-.8,1.4-1.5,2.1-2.1.4-.3.8-.6,1.2-.9.4-.3.9-.5,1.3-.8.4-.2.9-.5,1.4-.6.5-.2.9-.4,1.4-.5,1.5-.4,3-.7,4.5-.7,1,0,2,0,3,.3.5,0,1,.2,1.5.4,1,.3,1.9.7,2.8,1.2.4.2.9.5,1.3.8.4.3.8.6,1.2.9.4.3.8.7,1.1,1s.7.7,1,1.1c.6.8,1.2,1.6,1.7,2.5.2.4.5.9.6,1.4.2.5.4.9.5,1.4.3,1,.5,2,.6,3,0,.5,0,1,0,1.5Z"/>
  </g>
  <g class="cls-4">
    <path class="cls-1" d="M40.8,10.4c-.3-.3-.7-.4-1-.3-.8,0-1.6.1-2.4.1-5.8,0-9.9-2.2-10.9-4.4-.2-.5-.7-.8-1.2-.8h-.8c-.5,0-1,.3-1.2.8-1,2.2-5.1,4.4-10.9,4.4s-1.6,0-2.4-.1c-.4,0-.8,0-1,.3-.3.3-.4.6-.4,1v8c0,10.9,6.1,20.6,15.8,25.4.4.2.8.2,1.2,0,9.8-4.8,15.8-14.6,15.8-25.4v-8c0-.4-.2-.7-.4-1h0ZM38.6,19.4c0,9.6-5.3,18.3-13.8,22.7-8.5-4.5-13.8-13.1-13.8-22.7v-6.6c.4,0,.8,0,1.2,0,5.5,0,10.3-1.8,12.5-4.7,2.2,2.8,7,4.7,12.5,4.7s.8,0,1.2,0v6.6ZM35.1,17.5c.5.5.5,1.4,0,1.9,0,0,0,0,0,0l-11.6,11.2c-.2.2-.6.4-.9.4h0c-.4,0-.7-.2-.9-.4l-4.2-4.7c-.5-.6-.4-1.4.1-1.9.5-.5,1.3-.4,1.8,0l3.3,3.7,10.6-10.2c.5-.5,1.4-.5,1.9,0,0,0,0,0,0,0h0Z"/>
  </g>
 </svg>
--- a/static/images/scalability.jpeg
+++ b/static/images/scalability.jpeg
--- a/static/images/security.jpeg
+++ b/static/images/security.jpeg
--- a/static/images/startup.jpg
+++ b/static/images/startup.jpg
--- a/static/images/startup1.jpg
+++ b/static/images/startup1.jpg
--- a/static/images/twin.jpg
+++ b/static/images/twin.jpg
--- a/static/images/znz.jpg
+++ b/static/images/znz.jpg
--- a/static/images/zone.jpg
+++ b/static/images/zone.jpg
--- a/static/images/zone1.jpg
+++ b/static/images/zone1.jpg
--- a/static/images/zone2.jpg
+++ b/static/images/zone2.jpg
--- a/static/js/main.js
+++ b/static/js/main.js
@ -76,10 +76,6 @@ document.addEventListener('DOMContentLoaded', function() {
  console.log("Initial dark mode state:", isDarkMode);
  // Get logo elements
  const logoLight = document.getElementById('logo-light');
  const logoDark = document.getElementById('logo-dark');
  // Set initial theme
  if (isDarkMode) {
    document.documentElement.classList.add('dark');
@ -87,22 +83,12 @@ document.addEventListener('DOMContentLoaded', function() {
      themeToggleLightIcon.classList.remove('hidden');
      themeToggleDarkIcon.classList.add('hidden');
    }
    // Show dark logo, hide light logo
    if (logoLight && logoDark) {
      logoLight.classList.add('hidden');
      logoDark.classList.remove('hidden');
    }
  } else {
    document.documentElement.classList.remove('dark');
    if (themeToggleLightIcon && themeToggleDarkIcon) {
      themeToggleLightIcon.classList.add('hidden');
      themeToggleDarkIcon.classList.remove('hidden');
    }
    // Show light logo, hide dark logo
    if (logoLight && logoDark) {
      logoLight.classList.remove('hidden');
      logoDark.classList.add('hidden');
    }
  }
  // Toggle theme function
@ -116,10 +102,6 @@ document.addEventListener('DOMContentLoaded', function() {
    const isDark = document.documentElement.classList.contains('dark');
    console.log("Current dark mode:", isDark);
    // Get logo elements
    const logoLight = document.getElementById('logo-light');
    const logoDark = document.getElementById('logo-dark');
    if (isDark) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('color-theme', 'light');
@ -127,11 +109,6 @@ document.addEventListener('DOMContentLoaded', function() {
        themeToggleLightIcon.classList.add('hidden');
        themeToggleDarkIcon.classList.remove('hidden');
      }
      // Show light logo, hide dark logo
      if (logoLight && logoDark) {
        logoLight.classList.remove('hidden');
        logoDark.classList.add('hidden');
      }
      console.log("Switched to light mode");
    } else {
      document.documentElement.classList.add('dark');
@ -140,11 +117,6 @@ document.addEventListener('DOMContentLoaded', function() {
        themeToggleLightIcon.classList.remove('hidden');
        themeToggleDarkIcon.classList.add('hidden');
      }
      // Show dark logo, hide light logo
      if (logoLight && logoDark) {
        logoLight.classList.add('hidden');
        logoDark.classList.remove('hidden');
      }
      console.log("Switched to dark mode");
    }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,7 +1,4 @@
 module.exports = {
  fontFamily: {
    sans: ['Inter', 'sans-serif'],
  },
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
--- a/templates/base.html
+++ b/templates/base.html
@ -3,28 +3,30 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}Mycelium{% endblock %}</title>
+    <title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
    <link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
    <link rel="stylesheet" href="{{ get_url(path='css/dropdown.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="{{ get_url(path='js/main.js') }}" defer></script>
    {% block head %}{% endblock %}
 </head>
-<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-white min-h-screen flex flex-col transition-colors duration-200">
+<body class="bg-gray-100 min-h-screen flex flex-col">
    <header>
        {% include "partials/navigation.html" %}
    </header>
    <main>
-        <div class="">
+        <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-            <div class="px-2">
+            <div class="px-4 py-6 sm:px-0">
                {% block content %}{% endblock %}
            </div>
        </div>
    </main>
-    <footer class="bg-white dark:bg-gray-900 shadow mt-auto">
+    <footer class="bg-white shadow mt-auto">
-        {% include "partials/footer.html" %}
+        <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
            <p class="text-center text-gray-500">
                &copy; {{ now() | date(format="%Y") }} {{ config.title }}
            </p>
        </div>
    </footer>
 </body>
 </html>
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@ -1,8 +0,0 @@
  <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
      <p class="text-center text-gray-500 dark:text-gray-400">
          &copy; {{ now() | date(format="%Y") }} {{ config.title }}
      </p>
  </div>
--- a/templates/partials/navigation.html
+++ b/templates/partials/navigation.html
@ -1,28 +1,18 @@
-<nav class=" container mx-auto bg-white dark:bg-gray-800 transition-colors duration-200">
+<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
-          <a href="{{ config.base_url }}" class="text-gray-800 dark:text-white font-bold text-xl">
+          <a href="{{ config.base_url }}" class="text-white font-bold text-xl">{{ config.title }}</a>
            <!-- Light mode logo -->
            <img id="logo-light" src="/images/mycelium_dark.png" 
              alt="Mycelium logo" 
              class="w-40 h-full object-cover object-center" />
            <!-- Dark mode logo -->
            <img id="logo-dark" src="/images/mycelium_white.png" 
              alt="Mycelium logo" 
              class="w-40 h-full object-cover object-center hidden" />
          </a>
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
-            <!-- <a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Home</a> -->
+            <a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Home</a>
-            <a href="{{ get_url(path='about') }}" class="{% if current_path is starting_with('/about') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">About</a>
+            <a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Why</a>
            <a href="https://threefold.info/mycelium/docs/" target="_blank" class="text-gray-800 dark:text-white text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Docs</a>
            <!-- Dropdown menu -->
            <!-- <div class="dropdown">
-              <button class="{% if current_path is starting_with('/why') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium inline-flex items-center" id="why-menu-button">
+              <button class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium inline-flex items-center" id="why-menu-button">
                Why Us
                <svg class="ml-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path 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" />
@ -36,22 +26,22 @@
              </div>
            </div> -->
-            <!-- <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
+            <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
-            <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Team</a> -->
+            <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Team</a>
          </div>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
-          <!-- <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
+          <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
            Zola Docs
          </a> -->
          <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="border rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
            Get Mycelium
          </a>
-          <button id="theme-toggle" type="button" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white p-2 rounded-md ml-2 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-gray-300 dark:focus:ring-white">
+          <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
            Tailwind Docs
          </a>
          <button id="theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
            <!-- Sun icon (light mode) -->
-            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
            </svg>
            <!-- Moon icon (dark mode) -->
@ -63,7 +53,7 @@
      </div>
      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
-        <button type="button" class="bg-white dark:bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-gray-300 dark:focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@ -81,29 +71,29 @@
  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-      <a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Home</a>
+      <a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Home</a>
-      <a href="{{ get_url(path='about') }}" class="{% if current_path is starting_with('/about') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">About</a>
+      <a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Why</a>
      <!-- Mobile dropdown menu -->
      <!-- <div class="relative" x-data="{ open: false }">
-        <button @click="open = !open" class="{% if current_path is starting_with('/about') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} w-full text-left flex justify-between items-center px-3 py-2 rounded-md text-base font-medium">
+        <button @click="open = !open" class="{% if current_path is starting_with('/why') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} w-full text-left flex justify-between items-center px-3 py-2 rounded-md text-base font-medium">
          Why Us
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path 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" />
          </svg>
        </button>
        <div id="mobile-why-menu" class="hidden pl-4 py-2 space-y-1">
-          <a href="{{ get_url(path='about') }}" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
+          <a href="{{ get_url(path='why') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
-          <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Our Approach</a>
+          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Our Approach</a>
-          <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Testimonials</a>
+          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Testimonials</a>
-          <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Case Studies</a>
+          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Case Studies</a>
        </div>
      </div> -->
-      <!-- <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
+      <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
-      <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Team</a> -->
+      <a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Team</a>
-      <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Get Mycelium</a>
+      <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Zola Docs</a>
-      <button id="mobile-theme-toggle" type="button" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center">
+      <button id="mobile-theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center">
        <span>Toggle Dark Mode</span>
        <svg id="mobile-theme-toggle-icon" class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
--- a/templates/shortcodes/accordion.html
+++ b/templates/shortcodes/accordion.html
@ -1,65 +0,0 @@
 <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="fade-in relative flex flex-col justify-center overflow-hidden bg-white"> -->
        <!-- <div class="w-full mx-auto px-4 md:px-6 py-12 border-t-2"> -->
            <!-- <h1 class="text-3xl lg:text-4xl font-normal tracking-tight text-black pt-12">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 px-4 border rounded-lg"
                            @click="expanded = !expanded"
                            :aria-expanded="expanded"
                            aria-controls="faqs-text-01"
                        >
                            <span class="">{{ question }}</span>
                            <svg class="shrink-0 ml-8"  fill="gray" 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 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">
                            {% if description %} 
                            <p class="py-3 px-4 text-base font-light">
                                {{ description }} 
                            </p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            <!-- </div>                                                                                              
    </div> -->
            <!-- End: Accordion component -->
        <!-- </div>
    </main> -->
--- a/templates/shortcodes/cta.html
+++ b/templates/shortcodes/cta.html
@ -1,28 +1,31 @@
-{% set title = title | default(value="") %}
+{% set title = title | default(value="Call to Action") %}
 {% set description = description | default(value="") %}
-{% set button_text = button_text | default(value="") %}
+{% set button_text = button_text | default(value="Learn More") %}
-{% set button_link = button_link | default(value="") %}
+{% set button_link = button_link | default(value="#") %}
-{% set button_text2 = button_text2 | default(value="") %}
+{% set bg_color = bg_color | default(value="bg-indigo-100") %}
-{% set button_link2 = button_link2 | default(value="") %}
+{% set text_color = text_color | default(value="text-indigo-800") %}
-{% set image_src = image_src | default(value="") %}
+{% set button_color = button_color | default(value="bg-indigo-600") %}
-{% set image_alt = image_alt | default(value="") %}
+{% set button_text_color = button_text_color | default(value="text-white") %}
-<div class="fade-in lg:pt-12">
+<div class="relative {{ bg_color }} {{ text_color }} rounded-lg shadow-md overflow-hidden my-8">
-  <div class="container mx-auto lg:max-w-7xl py-12">
+  <div class="px-6 py-8 md:p-10 md:flex md:items-center md:justify-between">
-    <div class="relative isolate overflow-hidden bg-black px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+    <div class="md:flex-1">
-      <div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
+      <h3 class="text-2xl font-bold">{{ title }}</h3>
-        <h2 class="text-4xl font-normal tracking-tight text-white lg:text-5xl">{{ title }}</h2>
+      {% if description %}
-        <p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">{{ description }}</p>
+      <p class="mt-2 text-base">{{ description }}</p>
-        <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
+      {% endif %}
-          <a href="{{ button_link }}" class="rounded-2xl bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">{{ button_text }}</a>
+      {% if caller %}
-          <a href="{{ button_link2 }}" class="text-sm/6 font-semibold text-white hover:text-gray-100">{{ button_text2 }} <span aria-hidden="true">→</span></a>
+        <div class="mt-4">
          {{ caller() }}
        </div>
-      </div>
+      {% endif %}
      <div class="relative mt-16 h-auto lg:mt-8">
        <img class="block w-full max-w-full h-auto rounded-2xl ring-1 ring-white/10 lg:w-[45rem]" src="{{ image_src }}" alt="{{ image_alt }}">
      </div>
    </div>
    {% if button_text and button_link %}
    <div class="mt-6 md:mt-0 md:ml-10 md:flex-shrink-0">
      <a href="{{ button_link }}" class="block w-full md:w-auto rounded-md px-5 py-3 {{ button_color }} {{ button_text_color }} text-base font-medium text-center shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        {{ button_text }}
      </a>
    </div>
    {% endif %}
  </div>
 </div>
--- a/templates/shortcodes/desciption_blockquote.html
+++ b/templates/shortcodes/desciption_blockquote.html
@ -1,59 +0,0 @@
 {% set title = title | default(value="") %}
 {% set description_1 = description_1 | default(value="") %}
 {% set description_2 = description_2 | default(value="") %}
 {% set description_3 = description_3 | default(value="") %}
 {% set description_4 = description_4 | default(value="") %}
 <div class="lg:py-24 py-12relative bg-white isolate overflow-hidden py-12">
    <div class="mx-auto container lg:max-w-7xl px-4">
        <div>
            <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight l">{{ title }}
            </h2>
        </div>
        <div class="relative grid lg:grid-cols-12 lg:gap-8">
            <!-- Left Content -->
            <div class="lg:col-span-6">
                <div class="mx-auto max-w-2xl lg:mx-0">
                    <p class="fade-in mt-2 text-lg lg:text-xl font-light">
                        {{ description_1 }}
                        <br><br>
                        {{ description_2 }}
                        <br><br>
                    </p>
                </div>
            </div>
            <!-- Right Blockquote -->
            <div class="lg:col-span-6">
                <figure class=" mt-2 pl-8">
                    <blockquote class=" fade-in px-6">
                        <p class="text-md leading-normal font-normal">{{ description_3 }}
                            <br><br>
                            {{ description_4 }}</p>
                    </blockquote>
                    <br>
                    <div class="mx-4">
                    <p class="fade-in mx-auto text-xl font-semibold tracking-tight lg:text-2xl opacity-0 transition-opacity duration-1000" data-observer>
                        Decentralized. Scalable. Intelligent.
                    </p>
                    </div>
                </figure>
            </div>
        </div>
    </div>
 </div>
 <style>
    .blockquote::before {
        content: open-quote;
        font-size: 4rem;
        position: absolute;
        top: -1rem;
        left: -1rem;
        color: #8d1212;
    }
 </style>
--- a/templates/shortcodes/feature_card.html
+++ b/templates/shortcodes/feature_card.html
@ -1,23 +1,18 @@
 {% set title = title | default(value="Feature") %}
 {% set description = description | default(value="") %}
 {% set link = link | default(value="") %}
 {% set icon = icon | default(value="") %}
 {% set bg_color = bg_color | default(value="bg-white") %}
 {% set hover_color = hover_color | default(value="hover:bg-gray-50") %}
-
+<div class="relative {{ bg_color }} {{ hover_color }} shadow rounded-lg p-6 transition-all duration-300">
 <div class="relative {{ bg_color }} {{ hover_color }} shadow rounded-lg p-4 transition-all duration-300">
  {% if icon %}
-  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-gray-200 text-white mb-4">
+  <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
-    <img src="{{ icon | safe }}" class="">
+    <span class="text-xl">{{ icon | safe }}</span>
  </div>
  {% endif %}
-  <h3 class="text-md font-medium">{{ title }}</h3>
+  <h3 class="text-lg font-medium text-gray-900">{{ title }}</h3>
  {% if description %}
-  <p class="my-2 font-extralight">{{ description }}</p>
+  <p class="mt-2 text-base text-gray-500">{{ description }}</p>
  {% endif %}
  {% if link %}
  <a href="{{ link }}" class="text-sm font-semibold text-black hover:text-gray-700">{{ link_name }} <span aria-hidden="true">→</span></a>
  {% endif %}
  {% if caller %}
    <div class="mt-4">
@ -25,10 +20,3 @@
    </div>
  {% endif %}
 </div>
 <style scop>
  p{
    font-weight: 200;
  }
 </style>
--- a/templates/shortcodes/hero3.html
+++ b/templates/shortcodes/hero3.html
@ -1,6 +1,6 @@
 <div class="fade-in flex items-center justify-center ">
    <div class="relative isolate px-6 pt-14 lg:px-8">
-      <div class="mx-auto max-w-3xl py-12">
+      <div class="mx-auto max-w-7xl py-12">
        <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">
            {{ announcement | safe }} 
@ -8,9 +8,9 @@
        </div>
        <div class="text-center">
          <p class="text-base/7 font-light tracking-wide">{{ subheader }}</p>
-          <h1 class="fade-in text-balance font-normal tracking-tight leading-tight lg:text-6xl text-3xl">{{ title }}</h1>
+          <h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance">{{ title }}</h1>
          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight">{{ subtitle }}</h2>
-          <p class="mt-8 lg:text-xl font-light text-gray-50 sm:text-xl/8">{{ description }}</p>
+          <p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">{{ description }}</p>
          <div class="mt-10 flex items-center justify-center gap-x-6">
            <a href="{{ button1_link }}" class="rounded-2xl bg-gray-300 px-4 py-2 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">{{ button1_text }}</a>
            <a href="{{ button2_link }}" class="text-sm/6 font-semibold hover:text-gray-300">{{ button2_text }} <span aria-hidden="true">→</span></a>
--- a/templates/shortcodes/hero_bottom_img.html
+++ b/templates/shortcodes/hero_bottom_img.html
@ -1,61 +0,0 @@
 <div class="lg:pt-24 pt-12">
    <div class="mx-auto max-w-7xl">
      <div class="mx-auto max-w-4xl text-left lg:text-center">
        <p class="text-base/7 font-light  tracking-wide">{{ subtitle }}</p>
        <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight "> {{ title }}</h2>
        <p class="mt-6 text-lg font-light lg:text-xl">{{ description }}</p>
      </div>
    </div>
    <div class="relative overflow-hidden pt-2">
      <div class="mx-auto max-w-7xl px-4 lg:px-8 flex items-center justify-center">
        <img src="{{ image_src }}" alt="{{ image_alt }}"  width="900">
      </div>
    </div>
    <!-- <div class="mx-auto mt-10 max-w-7xl px-6  lg:px-8">
      <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-4 text-base/7  sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10">
        <div class="relative lg:pl-9">
          <dt class="inline font-semibold ">
            ✓  Quantum Safe Storage Functionality
          </dt>
          <dd class="font-light">Mycelium’s quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.</dd>
        </div>
        <div class="relative lg:pl-9">
          <dt class="inline font-semibold ">
            ✓  Entry and Exit Points for AI Workloads
          </dt>
          <dd class="font-light">Seamlessly connect AI applications to Mycelium, providing optimized nd secured data pipelines for training, inference, and real-time processing.</dd>
        </div>
        <div class="relative lg:pl-9">
          <dt class="inline font-semibold ">
            ✓  Data Storage and Retrieval Mechanisms
          </dt>
          <dd class="font-light">Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.</dd>
        </div>
        <div class="relative lg:pl-9">
          <dt class="inline font-semibold ">
            ✓  Integrated Name Services (DNS)
          </dt>
          <dd class="font-light">The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.</dd>
        </div>
        <div class="relative lg:pl-9">
          <dt class="inline font-semibold ">
            ✓  Frontend/Backend Integration
          </dt>
          <dd class="font-light"> Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.</dd>
        </div>
        <div class="relative lg:pl-9">
          <dt class="inline font-semibold ">
            ✓  CDN (Content Delivery Network)
          </dt>
          <dd class="font-light">Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.</dd>
        </div>
      </dl>
    </div> -->
  </div>
--- a/templates/shortcodes/hero_features.html
+++ b/templates/shortcodes/hero_features.html
@ -1,46 +0,0 @@
 <div class="fade-in bg-white lg:max-w-7xl container mx-auto">
    <div class="lg:py-24 py-12 relative isolate">
        <div class="px-6 lg:px-8 lg:pb-24">
            <p class="text-base font-light tracking-wide">{{ subtitle_1 }}</p>
            <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight">{{ title }}</h2>
                <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light fade-in max-w-3xl">
                    {{ description }}
                </p>
          </div>
        <div class="mx-auto max-w-7xl lg:flex lg:items-center lg:gap-x-15 lg:px-8">
          <div class="my-6 lg:my-0 lg:flex lg:justify-center lg:w-1/2">
            <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="{{ image_src }}" 
                alt="{{ image_alt }}">
        </div>
            <div class="mx-auto max-w-lg lg:mx-0 lg:flex-auto pt-4">
            <dl class="space-y-8 text-base/7 lg:max-w-none">
              {% if feature_1_title %}
                <div class="relative pl-9">
                  <dt class="font-semibold lg:text-lg text-base ">
                   {{ feature_1_title }}
                  </dt>
                  <dd class="mt-2 font-light">{{ feature_1_description }}</dd>
                </div>
              {% endif %}
              {% if feature_2_title %}
                <div class="relative pl-9">
                  <dt class="font-semibold lg:text-lg text-base ">
                   {{ feature_2_title }}
                  </dt>
                  <dd class="mt-2 font-light">{{ feature_2_description }}</dd>
                </div>
              {% endif %}
              {% if feature_3_title %}
                <div class="relative pl-9">
                  <dt class="font-semibold lg:text-lg text-base ">
                   {{ feature_3_title }}
                  </dt>
                  <dd class="mt-2 font-light">{{ feature_3_description }}</dd>
                </div>
              {% endif %}
              </dl>
            </div>
        </div>
    </div>
 </div>
--- a/templates/shortcodes/hero_img.html
+++ b/templates/shortcodes/hero_img.html
@ -1,40 +0,0 @@
 {% set image_src = image_src | default(value="/images/mycel_1.png") %}
 {% set image_alt = image_alt | default(value="Mycelium Network Graphic") %}
 {% set title = title | default(value="MYCELIUM") %}
 {% set subtitle = subtitle | default(value="Unleashing the Power of Decentralized Networks") %}
 {% set description = description | default(value="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.") %}
 {% set highlight = highlight | default(value="Coming Soon: New Decentralized Features") %}
 {% set button_text = button_text | default(value="Get Mycelium") %}
 {% set button_link = button_link | default(value="/download") %}
 <div class="flex flex-col lg:flex-row-reverse items-center overflow-hidden bg-white h-screen">
  <!-- Image first on mobile, right on desktop -->
  <div class="w-full lg:w-1/2 h-80 lg:h-full">
    <img src="{{ image_src }}" 
         alt="{{ image_alt }}" 
         class="w-full h-4/5 object-cover object-center" />
  </div>
  <!-- Text Content -->
  <div class="w-full lg:w-1/2 max-w-3xl max-auto px-6 py-12 lg:px-16 lg:py-10">
    <div>
      <h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
        {{ title }}
      </h1>
      <h2 class="fade-in text-3xl lg:text-4xl font-normal tracking-tight mt-4 leading-9">
        {{ subtitle_1 }}<br>{{ subtitle_2 }}
      </h2>
      <p class="mt-8 text-lg lg:text-xl font-light">
        {{ description }} <br><br> 
        <b>{{ highlight }}</b>
      </p>
      <div class="mt-10">
        <a href="{{ button_link }}" class="rounded-2xl bg-black px-4 py-2 text-sm font-semibold text-white shadow hover:bg-gray-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-gray-300">
          {{ button_text }}
        </a>
      </div>
    </div>
  </div>
 </div>
--- a/templates/shortcodes/hero_right_img.html
+++ b/templates/shortcodes/hero_right_img.html
@ -1,29 +0,0 @@
 {% set title = title | default(value="title") %}
 {% set subtitle = subtitle | default(value="") %}
 {% set description = description_1 | default(value="") %}
 {% set description = description_2 | default(value="") %}
 {% set image_src = image_src | default(value="") %}
 {% set image_alt = image_alt | default(value="") %}
 <div class=" fade-in">
    <div class="relative isolate">
        <div class="container mx-auto max-w-7xl lg:pb-24 pb-12 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
            <div class="my-6 lg:my-16 sm:mt-24 lg:flex lg:justify-center lg:w-1/2 lg:order-2">
                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="{{ image_src }}" 
                    alt="{{ image_alt }}">
            </div>
            <div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto lg:order-1">
                <h1 class="mt-2 text-4xl font-semibold tracking-tight lg:text-6xl">
                    {{ title }}
                </h1>
                <h2 class="lg:text-4xl text-3xl font-normal tracking-tight">{{ subtitle }}</h2>
                <p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
                    {{ description_1 }}
                <p class="mt-2 text-md font-light text-stone-800 lg:text-lg">
                    {{ description_2 }}
                </p>
            </div>
        </div>
    </div>
 </div>
--- a/templates/shortcodes/left_header.html
+++ b/templates/shortcodes/left_header.html
@ -1,72 +0,0 @@
 <div class="lg:pt-24 pt-12 lg:max-w-7xl container mx-auto px-6 lg:px-0">
  <div class="mx-auto">
    <div class="mx-auto">
      <p class="text-base font-light tracking-wide">{{ subtitle }}</p>
      <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight">{{ title }}</h2>
      <p class="mt-6 text-lg font-light">{{ description }}</p>
      <p class="mt-6 text-lg font-light">{{ description2 }}</p>
    </div>
  </div>
  <!-- <div class="mx-auto mt-10">
    <dl class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-8">
      <div class="relative pl-9">
        <dt class="inline font-semibold ">
          PRODUCTIVITY & COMMUNICATION
        </dt>
        <ul class="mx-4" style="list-style: circle;">
          <li>Secure remote work collaboration.</li>
          <li>Private file sharing between trusted nodes.</li>
          <li>Encrypted voice/video calls.</li>
          <li>Self-hosted messaging systems.</li>
          <li>Secure document collaboration.</li>
        </ul>
      </div>
      <div class="relative pl-9">
        <dt class="inline font-semibold ">
          INFRASTRUCTURE
        </dt>
        <ul class="mx-4" style="list-style: circle;">
          <li>Private cloud computing resources.</li>
          <li>Secure IoT device networks.</li>
          <li>Remote system administration.</li>
          <li>Virtual private networks (VPNs).</li>
          <li>Secure backup systems.</li>
        </ul>
      </div>
      <div class="relative pl-9">
        <dt class="inline font-semibold ">
          SERVICES
        </dt>
        <ul class="mx-4" style="list-style: circle;">
          <li>Self-hosted web services.</li>
          <li>Private file sharing between trusted nodes.</li>
          <li>Private DNS systems.</li>
          <li>Personal email servers.</li>
          <li>Secure document collaboration.</li>
        </ul>
      </div>
      <div class="relative pl-9">
        <dt class="inline font-semibold ">
          MEDIA & CONTENT
        </dt>
        <ul class="mx-4" style="list-style: circle;">
          <li>Private media streaming.</li>
          <li>Personal cloud storage.</li>
          <li>Protected content distribution.</li>
          <li>Secure game servers.</li>
          <li>Private git repositories.</li>
        </ul>
      </div>
    </dl>
    <hr class="my-6">
    <div class="mx-auto mt-10 px-6 lg:px-0 lg:max-w-6xl">
      <a href="/download" class=" rounded-2xl bg-black px-6 py-2 text-sm font-semibold text-white shadow-xs hover:bg-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">Get Started</a>
    </div> 
  </div> -->
 </div>
--- a/templates/shortcodes/text_left_img.html
+++ b/templates/shortcodes/text_left_img.html
@ -1,42 +0,0 @@
 {% set title = title | default(value="") %}
 {% set subheader = subheader | default(value="") %}
 {% set subtitle = subtitle | default(value="") %}
 {% set description = description | default(value="") %}
 {% set description_2 = description_2 | default(value="") %}
 {% set button_text = button_text | default(value="") %}
 {% set button_link = button_link | default(value="") %}
 {% set image_src = image_src | default(value="") %}
 {% set image_alt = image_alt | default(value="") %}
 <div class="lg:py-24 py-12 lg:pt-0 fade-in bg-semi-white lg:max-w-7xl container mx-auto">
    <div class="relative isolate">
        <div class="mx-auto mt-10 lg:mt-0  lg:flex lg:items-center lg:gap-x-15 ">
            <div class="lg:order-2 mt-6 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="{{ image_src }}" 
                    alt="{{ image_alt }}">
            </div>
            <div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
                <p class="text-base mt-4 font-light tracking-wide">{{ subheader }}</p>
                <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight ">{{ title }}</h2>
                <h3 class="font-light lg:text-3xl text-xl">
                    {{ subtitle }}
                </h3>
                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in">
                       {{ description }}
                    </p>
                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in">
                       {{ description_2 }}
                    </p>
                    {% if button_link %}
                    <div class="mt-6 flex">
                    <a href="{{ button_link }}" class="rounded-2xl bg-black border border-white px-4 py-2 text-sm font-semibold text-white shadow hover:bg-gray-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-gray-300">{{ button_text }}</a>
                    </div>
                    {% endif %}
            </div>
        </div>
    </div>
 </div>
--- a/templates/shortcodes/text_right_img.html
+++ b/templates/shortcodes/text_right_img.html
@ -1,43 +0,0 @@
 {% set title = title | default(value="") %}
 {% set subheader = subheader | default(value="") %}
 {% set subtitle = subtitle | default(value="") %}
 {% set description = description | default(value="") %}
 {% set description_2 = description_2 | default(value="") %}
 {% set button_text = button_text | default(value="") %}
 {% set button_link = button_link | default(value="") %}
 {% set image_src = image_src | default(value="") %}
 {% set image_alt = image_alt | default(value="") %}
 <div class="lg:py-24 py-12 lg:pt-0 fade-in bg-semi-white lg:max-w-7xl container mx-auto">
    <div class="relative isolate">
        <div class="mx-auto mt-10 lg:mt-0  lg:flex lg:items-center lg:gap-x-15 ">
             <div class="mt-6 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="{{ image_src }}" 
                    alt="{{ image_alt }}">
            </div>
            <div class="mx-auto max-w-xl lg:mx-6 lg:flex-auto">
                <p class="text-base font-light tracking-wide mt-4">{{ subheader }}</p>
                <h2 class="fade-in lg:text-5xl text-4xl font-normal tracking-tight ">{{ title }}</h2>
                <h3 class="font-light lg:text-3xl text-xl">
                    {{ subtitle }}
                </h3>
                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in">
                       {{ description }}
                    </p>
                    <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light  fade-in">
                       {{ description_2 }}
                    </p>
                    {% if button_link %}
                    <div class="mt-6 flex">
                    <a href="{{ button_link }}" class="rounded-2xl bg-black border border-white px-4 py-2 text-sm font-semibold text-white shadow hover:bg-gray-700 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-gray-300">{{ button_text }}</a>
                    </div>
                    {% endif %}
            </div>
        </div>
    </div>
 </div>