test build

2025-06-01 12:09:01 +03:00 · 2025-06-01 12:09:01 +03:00 · 5f57ee1bcd
commit 5f57ee1bcd
parent d7d238dfb0 0880736b02
70 changed files with 1013 additions and 378 deletions
--- a/config.toml
+++ b/config.toml
@ -1,5 +1,5 @@
 # The URL the site will be built for
-base_url = "https://www2.mycelium.threefold.io/"
+base_url = "https://www3.mycelium.threefold.io/"
 # Change this to your own URL! Please note this variable **must** be uncommented .

 title = "Mycelium"
--- a/content/download/index.md
+++ b/content/download/index.md
@ -20,7 +20,7 @@ extra:
 ) }}

 <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-4 gap-6 my-12">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 m mt-10 y-12">
 {{ 
    feature_card(
        title="Download for iOS & MacOS", 
@ -79,43 +79,51 @@ extra:
 <br>

 {{ accordion(
+    id_accordion="accordion1"
    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(
+    id_accordion="accordion2"
    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(
+    id_accordion="accordion3"
    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."
+    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."
 ) }}

 {{ accordion(
+    id_accordion="accordion4"
    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(
+    id_accordion="accordion5"
    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(
+    id_accordion="accordion6"
    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(
+    id_accordion="accordion7"
    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(
+    id_accordion="accordion8"
    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."
    )
--- a/content/footer/_index.md
+++ b/content/footer/_index.md
@ -10,7 +10,7 @@ extra:

 {% row(style="lean") %}

-##### <span class="text-black">TAKE ACTIONS</span>
+##### <span class="">TAKE ACTIONS</span>

 <br>

@ -24,7 +24,7 @@ extra:

 |||

-##### <span class="text-black">ABOUT US</span>
+##### ABOUT US

 <br>

--- a/content/home/index.md
+++ b/content/home/index.md
@ -28,7 +28,7 @@ extra:
    image_src="/images/mycel2.png",
    image_alt="Discover Mycelium",
    title="Discover Mycelium",
-    subtitle_1="ABOUT",
+    subheader="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",
@ -67,11 +67,11 @@ extra:

 <div class="lg:max-w-7xl container mx-auto py-12 lg:pb-24 px-4">
 <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 ">
+<div class="relative my-4 ">

 ######  **PRODUCTIVITY & COMMUNICATION**

-<div class="mt-2">
+<div class="mt-1">

 - Secure remote work collaboration.
 - Private file sharing between trusted nodes.
@ -82,11 +82,11 @@ extra:
 </div>
 </div>

-<div class="relative ">
+<div class="relative my-4 ">

 ######  **INFRASTRUCTURE**

-<div class="mt-2">
+<div class="mt-1">

 - Private cloud computing resources.
 - Secure IoT device networks.
@ -97,11 +97,11 @@ extra:
 </div>
 </div>

-<div class="relative ">
+<div class="relative my-4 ">

 ######  **SERVICES**

-<div class="mt-2">
+<div class="mt-1">

 - Self-hosted web services.
 - Private file sharing between trusted nodes.
@ -112,11 +112,11 @@ extra:
 </div>
 </div>

-<div class="relative ">
+<div class="relative my-4">

 ###### **MEDIA & CONTENT**

-<div class="mt-2">
+<div class="mt-1">

 - Private media streaming.
 - Personal cloud storage.
@ -134,7 +134,7 @@ extra:
 ---------------------------------------------

 <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>
+      <a href="/download" class=" rounded-2xl bg-black border border-gray-50 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>


@ -154,7 +154,7 @@ extra:
 ) }}

 <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">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 my-12">

 {{ 
   feature_card(
@ -201,7 +201,7 @@ extra:
 ) }}

 <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">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 my-12">
 {{ 
    feature_card(
        title="Decentralization", 
@ -250,43 +250,51 @@ extra:
 <br>

 {{ accordion(
+    id_accordion="accordion1"
    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(
+    id_accordion="accordion2"
    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(
+    id_accordion="accordion3"
    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."
+    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."
 ) }}

 {{ accordion(
+    id_accordion="accordion4"
    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(
+    id_accordion="accordion5"
    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(
+    id_accordion="accordion6"
    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(
+    id_accordion="accordion7"
    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(
+    id_accordion="accordion8"
    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."
    )
--- a/css/code.css
+++ b/css/code.css
@ -1,94 +0,0 @@
-code.language-html,
-code.language-css,
-code.language-md,
-code.language-cmd,
-code.language-bash,
-code.language-text,
-code.language-js,
-span.o,
-span.nx {
-  color: rgb(255, 255, 255);
-  line-height: 1.4;
-}
-span.c {
-  color: hsl(120, 100%, 20%);
-}
-
-.active {
-  color: #2E83FF;
-}
-
-span.p,
-span.s1,
-span.s2,
-span.nt {
-  color: hsl(40, 100%, 30%);
-}
-
-span.gs,
-span.gh,
-span.ge {
-  color: hsl(208, 100%, 50%);
-}
-
-span.gs {
-  font-weight: bold;
-}
-
-span.ge {
-  font-style: italic;
-}
-
-pre,
-code {
-  @apply font-mono;
-}
-
-code {
-  background-color: hsl(0, 0%, 98%);
-  border-radius: 3px;
-  color: hsl(120, 100%, 20%);
-  font-size: 85%;
-}
-
-pre {
-  margin: 0;
-  margin: 0;
-  padding: 1rem;
-  overflow: scroll;
-}
-
-pre code {
-  background-color: transparent;
-  color: inherit;
-  font-size: 100%;
-  padding: 0;
-}
-
-.highlight {
-  background-color: transparent;
-  border-radius: 3px;
-  margin: 0 0 0.5rem;
-  padding: 0;
-
-  & pre {
-    margin-bottom: 0;
-    overflow-x: auto;
-  }
-
-  & .lineno {
-    color: hsla(0, 0%, 67%, 0.72);
-    display: inline-block; /* Ensures the null space also isn't selectable */
-    padding: 0 0.75rem 0 0.25rem;
-    /* Make sure numbers aren't selectable */
-  }
-}
-
-/* TODO: dark theme for future
-@media (prefers-color-scheme: dark) {
-  code {
-    color: #fff;
-    background: hsl(200, 63%, 15%);
-  }
-}
-*/
--- a/css/index.css
+++ b/css/index.css
@ -1,7 +1,4 @@
-/*! purgecss start ignore */
-/* @import "nav.css"; */
-@import "code.css";
-/*! purgecss end ignore */
+

@import "tailwindcss/base";
@import "layout.css";
@ -13,71 +10,79 @@
@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');

 /* Defaul lightMode */
-body.light-mode {
+body {
  background-color: #ffffff;
  color: #000000;
 }

-body.light-mode .semigray {
-  
-  color: #424242 !important;
-}
-
-body.light-mode .semigray2 {
-  
-  color: #424242 !important;
-}
-
-body.light-mode .dropdown a{
-  @apply
-  px-0
-  text-black
-}
-
-body.light-mode .dropdown{
-  background-color: rgb(255 255 255 / 100%);
-  color: #121212;
-}
-
-body.light-mode .d_menu {
-  background-color: #e5e5e5;
-}
-
-body.light-mode .icon {
-  
-  fill: #424242 !important;
-}
-
-/* Dark Mode */
-body {
-  background-color: #121212;
-  color: #ffffff;
-}
-
 body .semigray {
-  color: #e5e7eb !important;
+  
+  color: #424242 !important;
 }

 body .semigray2 {
-  color: #d1d5db !important;
+  
+  color: #424242 !important;
 }

-body .icon {
-  fill: #ffffff !important;
+body .nav a {
+  color: #333333 !important;
 }

 body .dropdown a{
  @apply
  px-0
-  text-white
+  text-black
 }

 body .dropdown{
+  background-color: rgb(255 255 255 / 100%);
+  color: #121212;
+}
+
+body .d_menu {
+  background-color: #e5e5e5;
+}
+
+body .icon {
+  
+  fill: #424242 !important;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+body.dark-mode .nav a {
+  color: #ffffff !important;
+}
+
+body.dark-mode .semigray {
+  color: #e5e7eb !important;
+}
+
+body.dark-mode .semigray2 {
+  color: #d1d5db !important;
+}
+
+body.dark-mode .icon {
+  fill: #ffffff !important;
+}
+
+body.dark-mode .dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+body.dark-mode .dropdown{
  background-color: rgb(0 0 0 / 50%);
  color: #fff;
 }

-body .d_menu {
+body.dark-mode .d_menu {
  background-color: rgba(34 34 34);
 }

@ -267,10 +272,6 @@ background-color:#5596f5 !important;
 }


-.blue{
-  color:#2E83FF
-}
-
 .nav p > a {
  display: flex;
  width: 100%;
--- a/css/index.css.bak
+++ b/css/index.css.bak
@ -0,0 +1,743 @@
+
+
+@import "tailwindcss/base";
+@import "layout.css";
+@import "tailwindcss/components";
+@import "admonition.css";
+@import "tailwindcss/utilities";
+@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');
+
+/* Defaul lightMode */
+body {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+body .semigray {
+  
+  color: #424242 !important;
+}
+
+body .semigray2 {
+  
+  color: #424242 !important;
+}
+
+body .nav a {
+  color: #333333 !important;
+}
+
+body .dropdown a{
+  @apply
+  px-0
+  text-black
+}
+
+body .dropdown{
+  background-color: rgb(255 255 255 / 100%);
+  color: #121212;
+}
+
+body .d_menu {
+  background-color: #e5e5e5;
+}
+
+body .icon {
+  
+  fill: #424242 !important;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+body.dark-mode .nav a {
+  color: #ffffff !important;
+}
+
+body.dark-mode .semigray {
+  color: #e5e7eb !important;
+}
+
+body.dark-mode .semigray2 {
+  color: #d1d5db !important;
+}
+
+body.dark-mode .icon {
+  fill: #ffffff !important;
+}
+
+body.dark-mode .dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+body.dark-mode .dropdown{
+  background-color: rgb(0 0 0 / 50%);
+  color: #fff;
+}
+
+body.dark-mode .d_menu {
+  background-color: rgba(34 34 34);
+}
+
+
+
+
+
+/* Custom CSS for header partial */
+.backdrop-blur {
+  -webkit-backdrop-filter: blur(40px);
+}
+
+* {
+  font-family: "Inter", sans-serif;
+}
+
+.bg-semi-white {
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+.bg-dark-gradient {
+  background: rgba(16,16,16,1);
+  background: radial-gradient(circle, rgba(16,16,16,1) 0%, rgb(24, 24, 24) 50%, rgba(16,16,16,1) 100%);
+}
+
+.bg-black1 {
+  background-color: rgba(16,16,16,1);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+
+
+/* Custom css allowing image styling in markdown */
+img[src*="#mx-auto"] {
+  margin: auto;
+}
+
+img[src*="#small"] {
+  width: 68px;
+}
+
+img[src*="#medium"] {
+  width: 400px;
+  margin: auto;
+}
+
+img[src*="#logo"] {
+  max-width: min(250px, 100%);
+  margin: auto;
+}
+
+img[src*="#icon"] {
+  width: 200px;
+  margin: auto;
+}
+
+img[src*="#social"] {
+  width: 60px;
+  margin: auto;
+}
+
+img[src*="#semilarge"] {
+  width: 500px;
+  margin: auto;
+}
+
+img[src*="#large"] {
+  width: 700px;
+  margin: auto;
+}
+
+img[src*="#tft_img"] {
+  width: 100px;
+  margin: auto;
+}
+
+img[src*="#absolute"] {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+a img:hover{
+  opacity: 0.5 !important;
+  cursor: pointer;
+}
+
+/* new theme */
+
+.dropdown { 
+
+  background-color: rgb(0 0 0 / 50%);
+  @apply
+  lg:text-lg
+  px-6
+  py-1
+  lg:mr-5
+  my-3
+  shadow
+  border-black
+  capitalize 
+  leading-6 
+  border-transparent 
+  flex 
+  flex-col
+  border-2 
+  w-full 
+  items-start
+  rounded 
+  transition  
+  hover:border-stone-700 
+  /* hover:bg-stone-100  */
+  p-2 
+  text-left
+  text-white
+}
+
+.dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+.subtitle {
+  background-color:#58CF77 !important;
+  color: #fff !important;
+  text-transform: uppercase;
+  /* font-weight: 600 !important;  */
+}
+
+.green{
+
+  background-color:#58CF77 !important;
+  color: #fff !important;
+
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+.green a{
+   color: #fff !important;
+}
+
+.green:hover {
+background-color:#7ad993 !important;
+}
+
+.green_text{
+color: #58CF77 ;
+}
+
+
+  .blue_b{
+
+  background-color:#2E83FF !important;
+  color: #fff !important;
+
+}
+.blue_b a{
+   color: #fff !important;
+}
+
+.blue_b:hover {
+background-color:#5596f5 !important;
+}
+
+
+.footer-cust a{
+  color: #999; 
+  cursor: pointer;
+}
+
+.footer-cust a:hover {
+  color: #c7c7c7; 
+}
+
+.footer-cust h6{
+  margin-bottom: 15px;
+}
+
+.logo_size{
+  width:200px
+}
+
+
+.nav p > a {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  line-height: 1.5rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  border-radius: 0.25rem;
+  border-width: 2px;
+  border-color: transparent;
+  padding: 0.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  display: inline-block;
+  border-width: 2px;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  text-transform: capitalize;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.nav p > a:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(231 229 228 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
+}
+
+.big_header{
+  font-size: 6rem !important;
+  font-weight: 500 !important;
+}
+
+.mycard{
+  height: 300px !important;
+}
+
+
+.mypartners{
+  height: 300px !important;
+
+}
+
+.key_card{
+
+  height: 250px;
+
+}
+
+
+@layer components {
+  h1 {
+    @apply text-4xl lg:text-6xl font-normal;
+    font-family: "Inter", sans-serif !important;
+  }
+  h2 {
+    @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
+    font-family: "Inter", sans-serif !important;
+  }
+  h2 strong {
+    @apply font-semibold;
+  }
+  h3 {
+    @apply text-2xl lg:text-3xl my-4 font-extralight;
+    font-family: "Inter", sans-serif !important;
+  }
+  h3 strong {
+    @apply font-normal;
+  }
+  h4 {
+    @apply text-xl lg:text-2xl font-normal tracking-wider;
+    font-family: "Inter", sans-serif !important;
+    
+  }
+  h5 {
+    @apply text-lg my-1 tracking-normal font-medium;
+    font-family: "Inter", sans-serif !important;
+   
+  }
+  h6 {
+    @apply text-md not-italic font-normal my-1;
+    font-family: "Inter", sans-serif !important;
+  }
+  p {
+    @apply text-lg;
+   
+    font-family: "Inter", sans-serif !important;
+  }
+  blockquote {
+    @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
+  }
+  li {
+    @apply text-base lg:text-base font-normal;
+  }
+  li li {
+    @apply text-sm lg:text-sm font-light;
+  }
+  button {
+    @apply 
+    inline-block
+    md:text-md
+    text-sm
+    lg:mr-3
+    py-1
+    my-2
+    border
+    rounded
+    shadow
+    border-gray-400
+    capitalize
+    bg-gray-200
+  }
+  .my-header h4{
+    color:#9f9f9f;
+
+  }
+
+  h3 a{
+    color:#ffffff;
+
+  }
+
+  h3 a:hover{
+    color:#b6b6b6;
+
+  }
+  
+ 
+ 
+
+
+  .article h2{
+    font-size: 2.25rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.5;
+    font-weight: 700;
+    color:#e2e2e2;
+  }
+  
+  .article h1{
+    font-family: "Inter", sans-serif;
+  }
+
+  }
+  .article p{
+    font-size: 1.125rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.7;
+    color:#e2e2e2
+  }
+  
+  .post-content-text a, .article a{
+    color: #a5a5a5;
+  }
+  
+  .post-content-text a:hover, .article a:hover{
+    color: #c6c9c8;
+  }
+
+  .article li{
+    font-size: 1.125rem;
+    font-family: "Inter", sans-serif;
+    line-height: 1.7;
+    color:#e2e2e2
+  }
+
+  .article h3{
+    font-weight: 400;
+   
+  }
+
+  .article h4{
+    color: #fff !important;
+   
+  }
+
+  .main-title {
+    font-family: "Inter", sans-serif;
+  }
+
+
+/* button:hover :is(:where(a)) {
+  color: #5e5e5e;
+} */
+
+button :is(:where(p)) {
+  color: #ddd;
+  font-weight: 400;
+}
+
+button a {
+  line-height: 1.3;
+  @apply
+  text-black
+  px-8
+}
+
+.long-text a{
+  padding-left: 2rem;
+  padding-right: 2rem;
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+a {
+  border-width: 0px;
+}
+
+header {
+  font-family: "Inter", sans-serif;
+}
+
+.nav_btn {
+  margin: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.quicklinks {
+  box-sizing: border-box;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: auto;
+  margin: 0 auto;
+  border-radius: 10px;
+  margin-top: 30px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.quicklinks img {
+  height: auto;
+  max-width: 200px;
+  display: inline-block;
+  padding: 10px;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  position: relative;
+  
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  opacity: 0.5;
+}
+
+.quicklinks img:hover {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+
+.banner {
+  width: 100%;
+  margin: 0;
+  padding: 120px 0;
+  text-align: center;
+  position: relative;
+  display: block;
+  color: #fff !important;
+  letter-spacing: 0.5px;
+  overflow: hidden;
+  background: #00838d;
+  transition: 1.5s;
+}
+
+.header {
+  height: auto;
+  background: none;
+  padding: 200px 0;
+}
+
+.banner h2,
+.header h1 {
+  margin: auto;
+  color: #fff;
+  position: relative;
+  transition: 0.3s;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.header h1 {
+  color: #000;
+  transition: none;
+}
+
+.banner h2 svg {
+  font-size: 40px;
+  margin-left: 15px;
+  position: absolute;
+  top: 55%;
+  transform: translateY(-50%) scale(0.5);
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.banner .back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-position: center;
+  background-size: cover;
+  filter: grayscale(1) contrast(1.4);
+  opacity: 0.25;
+  transition: 1.5s;
+}
+
+.header .back {
+  filter: none;
+  opacity: 1;
+  background-position: center;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.banner:hover {
+  background: #4b3a92;
+}
+
+.header:hover {
+  background: none;
+}
+
+.banner:hover h2 svg {
+  transform: translateY(-50%) scale(1);
+  opacity: 1;
+}
+
+.banner:hover h2 {
+  padding-right: 40px;
+}
+
+.header:hover h1 {
+  padding-right: 0;
+}
+
+.banner:hover .back {
+  transform: scale(1.03);
+}
+
+.header:hover .back {
+  transform: none;
+}
+
+.my-test{
+  font-family: "Inter", sans-serif;
+} 
+.post-content-text .my-test  {
+  font-family: "Inter", sans-serif;
+  line-height: 1.7;
+}
+
+.post-content-text h2 {
+  font-family: "Inter", sans-serif;
+  line-height: 1.5;
+  font-size: 2.25rem;
+  font-weight: 700;
+}
+.container-fluid {
+  width: 100%;
+  /* padding-right: 15px;
+  padding-left: 15px; */
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.zola-anchor {
+  display: none;
+}
+@media (min-width: 1024px){
+  h2 {
+    font-size: 3.5rem;
+  } 
+  
+}
+
+@media (max-width: 1024px) {
+
+  .mycard{
+    height: auto !important;
+  }
+
+}
+
+@media (max-width: 640px) {
+  .banner h2 {
+    font: 600 7vw/10vw;
+  }
+
+  .header h1 {
+    font-size: 35px;
+  }
+
+  .banner h2 svg {
+    font-size: 30px;
+  }
+  .arrow img{
+    -moz-transform:rotate(90deg);
+   -webkit-transform:rotate(90deg);
+   -ms-transform:rotate(90deg);
+   transform: rotate(90deg);   
+   }
+
+   .mycard{
+    height: auto !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .banner,
+  .header {
+    padding: 80px 0;
+  }
+
+  .article h2{
+    font-size: 1.5rem;
+  }
+
+  img[src*="#medium"] {
+    width: 250px;
+    margin: auto;
+  }
+
+  img[src*="#sm_none"] {
+    display: none;
+  }
+
+  .big_header{
+    font-size: 4rem !important;
+   
+  }
+
+  .mytest{
+    height: auto;
+  }
+
+  .card_h {
+         height: auto !important;
+  }
+
+  .mycard{
+    height: auto !important;
+  }
+
+  .key_card{
+    height: auto;
+  }
+
+  .mypartners{
+    height: auto;
+  
+  }
+  
+}
+
--- a/static/images/404_1.png
+++ b/static/images/404_1.png
--- 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/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/feature6.png
+++ b/static/images/feature6.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/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/mycel5.png
+++ b/static/images/mycel5.png
--- a/static/images/mycel_1.png
+++ b/static/images/mycel_1.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/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/custom.js
+++ b/static/js/custom.js
@ -164,33 +164,33 @@ function readingTime() {
  }
 }

-async function getStats() {
-  try {
-    const stats = await fetch(
-      "https://stats.grid.tf/api/stats-summary"
-    ).then((res) => res.json());
-    return formatStatsData(stats);
-  } catch (error) {
-    throw new Error(
-      `Failed to retrieve data from network statistics: ${error}`
-    );
-  }
-}
+// async function getStats() {
+//   try {
+//     const stats = await fetch(
+//       "https://stats.grid.tf/api/stats-summary"
+//     ).then((res) => res.json());
+//     return formatStatsData(stats);
+//   } catch (error) {
+//     throw new Error(
+//       `Failed to retrieve data from network statistics: ${error}`
+//     );
+//   }
+// }

-function formatStatsData(stats) {
-  let items = document.querySelector(".items");
-  items.classList.remove("animate-pulse");
-  document.getElementById("ssd").innerHTML = stats.ssd;
-  document.getElementById("nodes").innerHTML = stats.nodes;
-  document.getElementById("countries").innerHTML = stats.countries;
-  document.getElementById("cores").innerHTML = stats.cores
-    .toString()
-    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
+// function formatStatsData(stats) {
+//   let items = document.querySelector(".items");
+//   items.classList.remove("animate-pulse");
+//   document.getElementById("ssd").innerHTML = stats.ssd;
+//   document.getElementById("nodes").innerHTML = stats.nodes;
+//   document.getElementById("countries").innerHTML = stats.countries;
+//   document.getElementById("cores").innerHTML = stats.cores
+//     .toString()
+//     .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+// }

-readingTime();
-getStats();
-document.getElementById("year").innerHTML = new Date().getFullYear();
+// readingTime();
+// getStats();
+// document.getElementById("year").innerHTML = new Date().getFullYear();


 // Get elements
@ -201,11 +201,11 @@ const body = document.body;
 document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme') || 'light'; // Default is light mode

-    if (savedTheme === 'light') {
-        body.classList.add('light-mode');
+    if (savedTheme === 'dark') {
+        body.classList.add('dark-mode');
        toggleSwitch.checked = true;
    } else {
-        body.classList.remove('light-mode');
+        body.classList.remove('dark-mode');
        toggleSwitch.checked = false;
    }
 });
@ -213,12 +213,11 @@ document.addEventListener('DOMContentLoaded', () => {
 // Toggle between light and dark mode
 toggleSwitch.addEventListener('change', () => {
    if (toggleSwitch.checked) {
-        body.classList.add('light-mode');
-        localStorage.setItem('theme', 'light');
-    } else {
-        body.classList.remove('light-mode');
+        body.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark');
+    } else {
+        body.classList.remove('dark-mode');
+        localStorage.setItem('theme', 'light');
    }
 });

-
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,30 +1,15 @@
 const colors = require('tailwindcss/colors')

 module.exports = {
+  darkMode: 'class',
  content: [
      './templates/**/*.html'
  ],
  safelist: [
-    {
-      pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
-      variants: [
-        'sm', 'md', 'lg', 
-        'first', 'first:sm', 'first:md', 'first:lg', 
-        'last', 'last:sm', 'last:md', 'last:lg'
-      ],
-    },
-    {
-      pattern: /(pt|pb)-(0)/,
-      variants: [
-        '!', 'lg', 
-        'first', 'first:sm', 'first:md', 'first:lg', 
-        'last', 'last:sm', 'last:md', 'last:lg'
-      ],
-    },
-    {
-      pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/,  // Added teal color safelist
-    }
-  ],
+    'lg:grid-cols-3',
+  'md:grid-cols-2',
+  'grid-cols-1',
+],
 
  important: true,
  theme: {
--- a/templates/404.html
+++ b/templates/404.html
@ -10,7 +10,7 @@
    </div>
    <div class="max-w-5xl mx-auto">
     <h3 class="text-2xl md:text-4xl font-semibold">You seem to have ended up on a missing page!</h3>
-     <p class="font-normal text-gray-500">This could mean that you’ve entered the wrong URL or you’ve clicked on content which has moved locations or is no longer live. If you need assistance, click on the blue chat icon at the bottom of the screen to speak with real humans on our support team. Or go back to <a class="text-gray-50" href="/">home</a>.</p>
+     <p class="font-normal text-gray-500">This could mean that you’ve entered the wrong URL or you’ve clicked on content which has moved locations or is no longer live. If you need assistance, click on the blue chat icon at the bottom of the screen to speak with real humans on our support team. Or go back to <a class="font-bold" href="/">home</a>.</p>
    </div>
  
 </div>
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@ -9,7 +9,15 @@
            <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6">
                <div class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
                    <div class="grid-cols-4 space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
-                        <img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="MYCELIUM Logo" />
+                        {# <img class="w-36 h-auto" src="images/mycelium_white.png" alt="MYCELIUM Logo" /> #}
+                        <a href="/" class="flex">
+
+                            <img id="lightLogo" src="/images/mycelium_white.png" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
+                            <img id="darkLogo" src="/images/mycelium_dark.png" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
+
+                            
+                          </a>
+
                        <p class="text-gray-200 text-base font-light leading-6">
                            {{section.description}}
                        </p>
@ -22,14 +30,42 @@

                </div>
                <div class="mt-6 mx-auto border-t border-gray-700 pt-8">
-                    <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
+                    <p data-v-14efe4a7="" class="text-base leading-6  text-center">
                        © <span id="year"></span> Mycelium - All rights reserved.
-                        <a target="_blank" href="https://docs.threefold.io/docs/legal/terms_and_conditions" class="leading-6 text-gray-500 hover:text-green">Terms &amp; Conditions |</a>
-                        <a target="_blank" href="https://docs.threefold.io/docs/legal/privacy_policy" class="leading-6 text-gray-500 hover:text-green">Privacy Policy</a>
+                        <a target="_blank" href="https://docs.threefold.io/docs/legal/terms_and_conditions" class="leading-6 ">Terms &amp; Conditions |</a>
+                        <a target="_blank" href="https://docs.threefold.io/docs/legal/privacy_policy" class="leading-6 ">Privacy Policy</a>

                    </p>
                </div>
            </div>
+            
+            
        </footer>
    </body>
 </html>
+
+
+<style>
+
+
+/* logo image */
+
+.dark {
+  
+  display: block; /* Show dark logo by default */
+}
+.light {
+   
+  display: none; /* Hide light logo by default */
+}
+
+.dark-mode .dark {
+  
+  display: none; /* Hide dark logo in light mode */
+}
+.dark-mode .light{
+
+  display: block;/* Show light logo in light mode */
+}
+
+</style>
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@ -5,6 +5,13 @@
 {% set zolaVer = '0.13.0' %}
 <head>
    <link rel="icon" type="image/x-icon" href="{{ get_url(path='images/icons/favicon.png')}}">
+    <!-- Primary CSS link with Zola URL function -->
+    <link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
+    
+    <!-- Fallback CSS links in case the Zola URL function doesn't work in production -->
+    <link rel="stylesheet" href="/css/index.css">
+    <link rel="stylesheet" href="https://www3.mycelium.threefold.io/css/index.css">
+    <link rel="stylesheet" href="/index.css">
    {% block title %}
    <title>{{ config.title }}</title>
    <meta property="og:type" content="website">
@ -99,7 +106,7 @@
    <!-- Windows 8.1 and up, IE 11 -->
    <!-- **** CONCLUSION, favicons **** -->
    <!-- CSS/SCSS -->
-    <link rel="stylesheet" href="{{ get_url(path='css/index.css', trailing_slash=false, cachebust=true) | safe }}">
+    
    <style>
    .space-x-10>:not([hidden])~:not([hidden]){
      margin-left: calc(1.5rem*calc(1 - var(--tw-space-x-reverse)))!important;
@ -127,27 +134,5 @@
  }
    </style>
    <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=62556aac80366d0019fc1af2&product=sop" async="async"></script>
-    <!-- MailerLite Universal -->
-    <script>
-    (function (m, a, i, l, e, r) {
-      m['MailerLiteObject'] = e; function f() {
-        var c = { a: arguments, q: [] }; var r = this.push(c); return "number" != typeof r ? r : f.bind(c.q);
-      }
-      f.q = f.q || []; m[e] = m[e] || f.bind(f.q); m[e].q = m[e].q || f.q; r = a.createElement(i);
-      var _ = a.getElementsByTagName(i)[0]; r.async = 1; r.src = l + '?v' + (~~(new Date().getTime() / 1000000));
-      _.parentNode.insertBefore(r, _);
-    })(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');

-    var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
-  </script>
-  <!-- End MailerLite Universal -->
-  <!-- RSS feed -->
-  {% block rss %}
-  <link
-      rel="alternate"
-      type="application/rss+xml"
-      title="RSS"
-      href="{{ get_url(path='atom.xml', trailing_slash=false) }}"
-  >
-  {% endblock %}
 </head>
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@ -2,7 +2,7 @@
 {% set header_items = section.content | safe | split(pat="<li>") %}

 <header id="header-container">
-    <div class="z-20 fixed top-0 left-0 right-0  lg:absolute w-full">
+    <div class="nav_header z-20 fixed top-0 left-0 right-0  lg:absolute w-full">
        <div class="relative z-50">
        <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
            {# <div>
@ -15,6 +15,14 @@
              <img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
              <img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
            </a>
+            <div class="theme-toggle mx-4 lg:hidden">
+              <label for="lightModeSwitch" class="switch">
+                  <i class="fa-solid fa-sun" id="lightIcon"></i>
+                  <input type="checkbox" id="lightModeSwitch">
+                  <span class="slider"></span>
+                  <i class="fas fa-moon" id="darkIcon"></i>
+              </label>
+          </div>
            <div class="-mr-2 -my-2 lg:hidden">
                <button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border border-gray-900 rounded-md transition duration-200 ease-in-out">
                    <!-- Heroicon name: menu -->
@ -166,9 +174,10 @@
            From: "opacity-100 scale-100"
            To: "opacity-0 scale-95"
        -->
+     
    <div id="hamburger" class="hidden fixed mt-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
        <div>
-            <div style="background-color: rgb(255, 255, 255);" class="shadow-xs h-screen divide-y-2 divide-gray-50">
+            <div class="nav_header shadow-xs h-screen divide-y-2 divide-gray-50">
                <div class="pb-6 sm:px-12 md:px-16 mt-0 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">

                    <nav class="flex flex-col justify-around pb-12">
@ -236,12 +245,21 @@

 <style>

+  body .nav a {
+    color: #333333 !important;
+  }
+
+
+  body.dark-mode .nav a {
+    color: #ffffff !important;
+  }
+
  nav a:hover{
  color: #c7c7c7 !important;
 }

 .active{
-  color: #000000 !important;
+  color: rgb(100, 100, 100) !important;
 }
 .nav_btn:hover {
  color: #c7c7c7 !important;
@ -254,20 +272,20 @@

 /* logo image */

-.light {
+.dark {
  
  display: block; /* Show dark logo by default */
 }
-.dark {
+.light {
   
  display: none; /* Hide light logo by default */
 }

-.light-mode .light {
+.dark-mode .dark {
  
  display: none; /* Hide dark logo in light mode */
 }
-.light-mode .dark {
+.dark-mode .light{

  display: block;/* Show light logo in light mode */
 }
@ -317,18 +335,27 @@
 }

 /* When light mode is active */
-.light-mode .switch {
-  background: #111; /* Dark background in light mode */
+.dark-mode .switch {
+  background: #808080; /* Dark background in dark mode */
 }
-.light-mode .slider {
+.dark-mode .slider {
  transform: translateX(25px); /* Move slider to the right */
 }
-.light-mode #lightIcon {
+.dark-mode #darkIcon {
  display: inline-block;
  color: white;
 }
-.light-mode #darkIcon {
+.dark-mode #darkIcon {
  display: none;
 }

+
+body .nav_header {
+  background-color: rgba(255, 255, 255) !important;
+}
+
+body.dark-mode .nav_header {
+  background-color: #121212 !important;
+}
+
 </style>
--- a/templates/shortcodes/accordion.html
+++ b/templates/shortcodes/accordion.html
@ -1,64 +1,43 @@
-
-<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 class="rounded-lg shadow-lg overflow-hidden my-2 border border-gray-200">
+            <input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
+            <label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
+                <span class="text-lg font-semibold">{{ question }}</span>
+                <svg class="w-6 h-6 transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </label>
+            <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
+                <div class="p-4">
+                    {% if description %} 
+                    <p class="semigray font-normal leading-relaxed">{{ description }} </p>
+                    {% endif %}
                </div>
-            <!-- </div>                                                                                              
-    </div> -->
-            <!-- End: Accordion component -->
+            </div>
+        </div>
+
+        <style>
+
+            body .accordion:hover {
+                background-color: rgb(240, 240, 240) !important;
+             }
+
+            body.dark-mode .accordion:hover {
+               background-color: #2e2e2e !important;
+            }
+        </style>
+
+        
+
+   
+
+     
+
+     
+
+
+     
+   

-        <!-- </div>
-    </main> -->



--- a/templates/shortcodes/cta.html
+++ b/templates/shortcodes/cta.html
@ -12,7 +12,7 @@
  <div class="mx-auto max-w-7xl py-12 sm:px-6  lg:px-8">
    <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="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
-        <h2 class="text-4xl font-normal tracking-tight text-balance text-white lg:text-5xl">{{ title }}</h2>
+        <h2 class=" text-white">{{ title }}</h2>
        <p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">{{ description }}</p>
        <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
          <a href="{{ button_link }}" class="rounded-2xl bg-white px-3.5 py-2.5 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>
--- a/templates/shortcodes/desciption_blockquote.html
+++ b/templates/shortcodes/desciption_blockquote.html
@ -9,7 +9,7 @@
 <div class="lg:py-24 py-12 relative  isolate overflow-hidden">
    <div class="mx-auto container lg:max-w-7xl px-4">
        <div>
-            <h2 class="fade-in lg:text-5xl text-4xl font-medium tracking-tight l">{{ title }}
+            <h2 class="fade-in my-2">{{ title }}
            </h2>
        </div>
        <div class="relative grid lg:grid-cols-12 lg:gap-8">
--- a/templates/shortcodes/feature_card.html
+++ b/templates/shortcodes/feature_card.html
@ -6,7 +6,7 @@
 {% set hover_color = hover_color | default(value="hover:bg-gray-50") %}


-<div class="relative shadow rounded-lg p-4 transition-all duration-300">
+<div class="card relative shadow rounded-lg p-4 transition-all duration-300">
  {% if icon %}
  <div class="flex items-center justify-center h-12 w-12 rounded-md mb-4">
    <img src="{{ icon | safe }}" class="">
@ -31,4 +31,8 @@
  p{
    font-weight: 200;
  }
+
+  body.dark-mode .card {
+    background-color: rgba(82, 82, 82, 50%) !important;
+  }
 </style>
--- a/templates/shortcodes/hero.html
+++ b/templates/shortcodes/hero.html
@ -13,16 +13,15 @@
  <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
    <div class="px-6 lg:col-span-7 lg:px-0 xl:col-span-6">
      <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
-        <h1 class="text-4xl font-semibold tracking-tight lg:text-6xl">
+        <h1>
          {{ title }}
        </h1>
-        <h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight ">{{ subtitle }}
-                  </h2>
+        <h2 class="fade-in font-normal">{{ subtitle }}</h2>
        <p class="mt-8 text-pretty lg:text-xl text-lg  font-light lgl:text-xl">
          {{ description }} <br><br> <b>{{ highlight }}</b>
        </p>
        <div class="mt-10 flex items-center gap-x-6">
-            <a href="{{ button_link }}" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
+            <a href="{{ button_link }}" class="rounded-2xl bg-black border border-gray-50 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
              {{ button_text }}
            </a>
        </div>
--- a/templates/shortcodes/hero_bottom_img.html
+++ b/templates/shortcodes/hero_bottom_img.html
@ -2,7 +2,7 @@
    <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>
+        <h2 class="fade-in my-2"> {{ title }}</h2>
        <p class="mt-6 text-lg font-light lg:text-xl">{{ description }}</p>
      </div>
    </div>
@ -11,51 +11,6 @@
        <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
@ -2,7 +2,7 @@
    <div class="lg:py-24 py-12 relative isolate">
        <div class="px-4 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>
+            <h2 class="fade-in my-2">{{ title }}</h2>
                <p class="text-left mt-4 text-pretty lg:text-lg text-md font-light fade-in max-w-3xl">
                    {{ description }}
                </p>
--- a/templates/shortcodes/hero_right_img.html
+++ b/templates/shortcodes/hero_right_img.html
@ -15,10 +15,10 @@
                  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">
+              <h1 class="mt-2">
                {{ title }}
              </h1>
-              <h2 class="text-balance lg:text-4xl text-3xl font-normal tracking-tight">{{ subtitle }}</h2>
+              <h3 class="">{{ subtitle }}</h3>
              <p class="mt-6 text-md font-light semigray lg:text-lg">
                {{ description_1 }} 
              <p class="mt-2 text-md font-light semigray lg:text-lg">
--- a/templates/shortcodes/left_header.html
+++ b/templates/shortcodes/left_header.html
@ -11,8 +11,8 @@
  <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-medium tracking-tight">{{ title }}</h2>
-      <h3 class="mx-auto fade-in text-left lg:text-3xl text-2xl leading-snug font-light tracking-tight ">{{ subtitle_2 }}</h2>
+      <h2 class="fade-in my-4">{{ title }}</h2>
+      <h3 class="mx-auto fade-in">{{ subtitle_2 }}</h2>
      <p class="mt-6 max-w-3xl text-lg font-light">{{ description }}</p>
      {% if description2 %}
      <p class="mt-6 text-lg font-light">{{ description2 }}</p>
--- a/templates/shortcodes/text_center.html
+++ b/templates/shortcodes/text_center.html
@ -8,8 +8,8 @@
    <div class="relative isolate px-4 lg:px-8">
      <div class="mx-auto max-w-4xl">
        <div class="text-left lg:text-center">
-          <h2 class="fade-in text-balance lg:text-5xl text-4xl font-medium tracking-tight ">{{ title }}</h2>
-          <h3 class="fade-in text-balance lg:text-3xl text-2xl font-normal tracking-tight ">{{ subtitle }}</h3>
+          <h2 class="fade-in my-4">{{ title }}</h2>
+          <h3 class="fade-in">{{ subtitle }}</h3>
          <p class="mt-8 lg:text-lg font-light  sm:text-xl/8">{{ description }}</p>
        </div>
    </div>
--- a/templates/shortcodes/text_left_img.html
+++ b/templates/shortcodes/text_left_img.html
@ -17,7 +17,7 @@
            </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-medium tracking-tight ">{{ title }}</h2>
+                <h2 class="fade-in my-4">{{ title }}</h2>
                <h3 class="font-light lg:text-3xl text-xl">
                    {{ subtitle }}
                </h3>
--- a/templates/shortcodes/text_right_img.html
+++ b/templates/shortcodes/text_right_img.html
@ -18,7 +18,7 @@
            </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-medium tracking-tight ">{{ title }}</h2>
+                <h2 class="fade-in my-4">{{ title }}</h2>
                <h3 class="font-light lg:text-3xl text-xl">
                    {{ subtitle }}
                </h3>