edi dark

content/footer/_index.md

@@ -4,7 +4,7 @@ description: ""
 insert_anchor_links: "left"
 template: "partials/footer.html"
 extra:
-  logoPath: "images/tf_logo.svg"
+  logoPath: "images/tf_dark.png"
   socialLinks: { Github: "https://github.com/ourworldfreezone", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews"  }
 ---
 
@@ -56,5 +56,11 @@ cursor: pointer;
 
   }
 
+  .bg-dark {
+    background: rgb(15,15,15);
+    background: linear-gradient(0deg, rgba(15,15,15,1) 0%, rgba(21,22,22,1) 50%, rgba(15,15,15,1) 100%);
+  }
+
+
   </style>
   

content/header/_index.md

@@ -4,7 +4,7 @@ description: ""
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPath: "./images/tf_logo.svg"
+  logoPath: "./images/tf_dark.png"
   imgPath: ""
 ---
 - [Home]("/")

css/index.css

@@ -10,17 +10,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 /* Custom CSS for header partial */
 .backdrop-blur {
   -webkit-backdrop-filter: blur(40px);
 }
 
 * {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 a {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .bg-semi-white {
@@ -97,7 +101,7 @@ img[src*="#tft_img"] {
   }
   p {
     @apply text-lg lg:text-xl leading-tight tracking-normal font-normal;
-    font-family: "CercoDEMO", sans-serif;
+    font-family: "Inter", sans-serif;
   }
   blockquote {
     @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
@@ -404,7 +408,7 @@ header #menu button a{
   px-0
 }
 
-.bg-gradient-bl {
+.bg-dark {
-  background: rgb(0,166,255);
+  background: rgb(15,15,15);
-  background: linear-gradient(125deg, rgba(0,166,255,1) 0%, rgba(8,173,179,1) 100%);
+  background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(12, 0, 30) 50%, rgba(15,15,15,1) 100%);
 }

css/output.css

@@ -1796,7 +1796,7 @@ p {
 }
 
 p {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 blockquote {
@@ -2542,7 +2542,7 @@ button {
 }
 
 .max-h-12 {
-  max-height: 3rem;
+  max-height: 3.5rem;
 }
 
 .max-h-80 {
@@ -4180,11 +4180,11 @@ button {
 }
 
 * {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 a {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .bg-semi-white {

output.css

@@ -40,7 +40,7 @@ span.ge {
 
 pre,
 code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: "Inter", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 code {
@@ -1495,7 +1495,7 @@ p {
 }
 
 p {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 blockquote {
@@ -4253,11 +4253,11 @@ details[open] > summary::after {
 }
 
 * {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 a {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .bg-semi-white {

tailwind.config.js

@@ -4,11 +4,19 @@ module.exports = {
   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'],
+      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'],
+      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
@@ -28,9 +36,14 @@ module.exports = {
           700: '#00796B',
           800: '#00695C',
           900: '#004D40',
-        }
-      }
         },
       },
-  plugins: [],
+      fontFamily: {
-}
+        sans: ['Inter', 'sans-serif'],
+      },
+    }, // End of extend
+  }, // **Added closing brace for theme here**
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+  ],
+};

templates/_default/base.html

@@ -5,11 +5,19 @@
 
 <body>
 
-  <div id="content" class="py-12 md:py-16 lg:py-18 overflow-hidden">
+  <div id="content" class="overflow-hidden bg-dark">
     {% block content %}{% endblock %}
   </div>
     {% include "partials/footer.html" %}
   <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
 </body>
 
+<style>
+.bg-dark {
+  background: rgb(15,15,15);
+  background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(12, 0, 30) 50%, rgba(15,15,15,1) 100%);
+}
+
+</style>
+
 </html>

templates/index.html

@@ -5,9 +5,6 @@
 
 {% include "partials/hero.html" %}
 {% include "partials/logos2.html" %}
-{% include "shortcodes/grid_stats.html" %}
+{% include "partials/simple_stats.html" %}
 {% include "partials/features.html" %}
-
-{% include "partials/blogs.html" %}
-{% include "partials/faq.html" %}
 {% endblock content %}

templates/partials/features.html

@@ -1,10 +1,10 @@
 <div class="bg-transparent pb-24">
     <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
         <div class="max-w-7xl lg:max-w-2xl text-left">
-            <h2 class="text-xl font-normal tracking-wide text-indigo-600">THREEFOLD DIFFERENCE</h2>
+            <h2 class="text-xl font-normal tracking-wide text-indigo-200">THREEFOLD DIFFERENCE</h2>
-            <p class="mt-4 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">A ground-up Approach</p>
+            <p class="mt-4 text-pretty text-4xl font-semibold tracking-tight text-white sm:text-balance sm:text-5xl">A ground-up Approach</p>
-            <p class="mt-6 mb-4 text-lg max-w-2xl font-light text-gray-700">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware). ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core bottlenecks: data, cloud, and network.</p>
+            <p class="mt-6 mb-4 text-lg max-w-2xl font-light text-gray-200">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware). ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core bottlenecks: data, cloud, and network.</p>
-            <a href="#" class="text-sm font-semibold text-indigo-700">Learn more <span aria-hidden="true">→</span></a>
+            <a href="#" class="text-sm font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
         </div>
         <div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-x-8 sm:mt-16">
             <!-- Card 1 -->

templates/partials/footer.html

@@ -1,12 +1,12 @@
 {%- set section = get_section(path="footer/_index.md") %}
 {%- set logoPath = section.extra.logoPath %}
 
-<div class="border-t border-gray-200"></div>
+<div class="bg-dark"></div>
 <footer>
-  <div class="max-w-screen-2xl mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
+  <div class="max-w-screen-2xl bg-dark mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
     <div class="flex flex-col xl:flex-row xl:gap-4 items-center">
       <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 mb-4 xl:col-span-1 text-center xl:text-left">
-        <img class="lg:w-60 h-auto w-20 mx-auto" src="./images/tf_logo.svg" alt="logo" />
+        <img class="lg:w-60 h-auto w-20 mx-auto" src="/images/tf_dark.png" alt="logo" />
       </div>
       <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 mb-4">
         © 2024 OurWorld Holdings, All rights reserved.
@@ -16,3 +16,10 @@
       </p>
     </div>
 </footer>
+
+<style>
+  .bg-dark {
+    background: rgb(15,15,15);
+    background: linear-gradient(0deg, rgba(15,15,15,1) 0%, rgba(21,22,22,1) 50%, rgba(15,15,15,1) 100%);
+  }
+</style>

templates/partials/header.html

@@ -10,22 +10,22 @@
 {% else %}
     <header id="header-container">
         {% set header_class = config.extra.header_class | default(value='') %}
-        <div class="{{'z-10 bg-transparent fixed w-screen ' ~ header_class}}">
+        <div class="{{'z-10 bg-transparent w-screen' ~ header_class}}">
-            <div class="relative z-50 shadow">
+            <div class="relative z-50">
-            <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5  md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
+            <div class="mx-auto flex z-50 justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5  md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
                 <div>
                     <a href="/" class="flex">
                         <img class="w-60 h-auto sm:w-15" src="{{logo_path}}" alt="tf Logo" />
                     </a>
                 </div>
                 <div class="-mr-2 -my-2 lg:hidden">
-                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
                         <!-- Heroicon name: menu -->
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                         </svg>
                     </button>
-                <button id="close-hamburger-btn" class="menu-mobile lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                <button id="close-hamburger-btn" class="menu-mobile lg:hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
                     <!-- Heroicon name: x -->
                     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -36,7 +36,7 @@
                     <nav class="flex space-x-10">    
                     {% for page in section.pages %}
                     {% if page.extra.menu %} {% continue %} {% endif %}
-                        <a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                        <a href="{{page.permalink}}" class="text-lg leading-6 text-white focus:outline-none focus:text-white transition ease-in-out duration-150 mt-0">
                             {{page.title}}test
                         </a>
                         <div class="relative">
@@ -46,7 +46,7 @@
                         {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}                        
                         {% set button_id = subsection ~ "-menu-btn" | slugify %}
                         <div class="relative">
-                        <button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
+                        <button type="button" id="{{button_id}}" class="nav_btn text-white group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
                             <span>{{ subsection }}</span>
                             <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                         </button>
@@ -61,7 +61,7 @@
         {% set submenu_id = subsection ~ "-menu" | slugify %}
     <nav>
         <div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-            <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
+            <div class="bg-transparent lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
                 <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
                 {{subsection | safe }}
                 </div>
@@ -85,14 +85,14 @@
             -->
         <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
             <div>
-                <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
+                <div class="shadow-xs h-screen bg-transparent divide-y-2 divide-gray-50">
                     <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
     
                         <nav class="flex flex-col justify-around pb-12">
                         {% for page in section.pages %}
                             {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
                             {% if page.extra.menu %} {% continue %} {% endif %}
-                            <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                            <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
                                 {{page.title}}
                             </a>
                             <hr/>
@@ -102,7 +102,7 @@
                             {% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
                             {% set menu_id = subsection ~ "-mobile-menu" | slugify %}
 
-                            <button type="button" id="{{button_id}}" class="menu-mobile flex px-8 py-3 items-start text-left text-gray-900 group lg:inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                            <button type="button" id="{{button_id}}" class="menu-mobile flex px-8 py-3 items-start text-left text-white group lg:inline-flex space-x-2 text-lg leading-6 font-normal hover:text-white transition ease-in-out duration-150">
                                 <span>{{ subsection }}</span>
                                 <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                             </button>
@@ -118,7 +118,7 @@
                         <div class="mx-8 mt-8">
                             <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
                               <img class="w-48 h-auto" src="{{logo_path}}" alt="Company name" />
-                              <p class="text-gray-500 text-base leading-6 ">
+                              <p class="text-white text-base leading-6 ">
                                 {{section.description}}
                               </p>
                           </div>

templates/partials/header_custom.html

@@ -1,29 +1,19 @@
-<!--
+<header id="header-container" class="bg-inherit">
-  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+    <div class="z-10 bg-dark1 w-screen">
-  Read the documentation to get started: https://tailwindui.com/documentation
+        <div class="relative z-50">
---><!-- This example requires Tailwind CSS v1.4.0+ -->
+            <div class="mx-auto flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
-
-{%- set section = get_section(path="header/_index.md") %}
-{% set header_items = section.content | safe | split(pat="<li>") %}
-
-<header id="header-container">
-    <div class="z-10 bg-white fixed w-screen">
-        <div class="relative z-50 shadow">
-        <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
                 <div>
                     <a href="/" class="flex">
                         <img class="w-48 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="ODFZ Logo" />
                     </a>
                 </div>
                 <div class="-mr-2 -my-2 lg:hidden">
-                <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
-                    <!-- Heroicon name: menu -->
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                         </svg>
                     </button>
-            <button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
-                <!-- Heroicon name: x -->
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                         </svg>
@@ -31,7 +21,6 @@
                 </div>
                 <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
                     <nav class="flex space-x-10">
-
                         {% for header_item in header_items %}
                         {% if not loop.first %}
                             {% set header_arr = header_item | split(pat="</li>") %}
@@ -39,105 +28,50 @@
                             {% if '<a' in header_label %}
                                 {% set link_label = header_label | striptags %}
                                 {% set link_path = header_label | split(pat="%22") | safe %}
-        <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                                <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-white hover:text-gray-300 transition ease-in-out duration-150 mt-0">
                                     {{link_label}}
                                 </a>
                             {% else %}
                                 <div class="relative">
                                     {% set button_id = header_label ~ "-menu-btn" | slugify %}
-        <button  id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
+                                    <button id="{{button_id}}" class="nav_btn font-medium text-white group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
                                         <span>{{ header_label }}</span>
-            <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                                        <div class="-rotate-90 transition-transform">
+                                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
+                                        </div>
                                     </button>
                                 </div>
-
                             {% endif %}  
                         {% endif %}
                         {% endfor %}
                     </nav>
+                </div>
+            </div>
+        </div>
         
-
-            </div>
-        </div>
-        </div>
         {% for header_item in header_items %}
         {% if not loop.first %}
             {% set header_arr = header_item | split(pat="</li>") %}
             {% set header_label = header_arr[0] %}
             {% set header_menu = header_arr[1] %}
             {% set menu_id = header_label ~ "-menu" | slugify %}
-
             <nav>
-    <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-        <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
+                    <div class="bg-gray-800 lg:bg-gray-900 md:bg-gray-900 xl:bg-gray-900">
-            <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
+                        <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12 text-white">
                             {{header_menu | safe }}
                         </div>
                     </div>            
                 </div>
             </nav>
-
-
         {% endif %}
         {% endfor %}
-
-    
-        <!--
-        Mobile menu, show/hide based on mobile menu state.
-    
-        Entering: "duration-200 ease-out"
-            From: "opacity-0 scale-95"
-            To: "opacity-100 scale-100"
-        Leaving: "duration-100 ease-in"
-            From: "opacity-100 scale-100"
-            To: "opacity-0 scale-95"
-        -->
-    <div id="hamburger" class="hidden fixed mt-28 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
-            <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
-                <div class="pb-6 sm:px-12 md:px-16 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 pt-2">
-                    {% for header_item in header_items %}
-                        {% if not loop.first %}
-                            {% set header_arr = header_item | split(pat="</li>") %}
-                            {% set header_label = header_arr[0] %}
-                            {% if '<a' in header_label %}
-                                {% set link_label = header_label | striptags %}
-                                {% set link_path = header_label | split(pat="%22") | safe%}
-                                <a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                    {{link_label}}
-                                </a>
-                            {% else %}
-                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
-                                    <button type="button" id="{{button_id}}" class="menu-mobile my-0 px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                        <span>{{ header_label }}</span>
-                                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
-                                    </button>
-                                    {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
-                                    <div id="{{menu_id}}" class="z-50 leading-3 pl-9 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
-                                        {{ header_arr[1] | safe }}
     </div>
-                    
-                            {% endif %}
-                            <hr/>
-                        {% endif %}
-                    {% endfor %}
-                    {% if "footer/_index.md" in subsections_str %}
-                    {% set section = get_section(path="footer/_index.md")%}
-                    {% set logoPath = section.extra.logoPath %}
-                    <div class="mx-8 my-2">
-                        {# <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
-                          <img class="w-48 h-auto" src="{{logoPath}}" alt="Company name" />
-                          <p class="text-gray-500 text-base leading-6 ">
-                            {{section.description}}
-                          </p>
-                      </div> #}
-                    {% endif %}
-                    </nav>                    
-                </div>
-            
-        </div>
-        
-    </div>
-
-
 </header>
+
+<style>
+    .bg-dark1 {
+      background: rgb(15,15,15,1);
+      
+    }
+  </style>

templates/partials/hero.html

@@ -1,83 +1,39 @@
-<div class="relative bg-white py-24">
+<div class="relative isolate overflow-hidden bg-transparent">
-  <div class="mx-auto max-w-7xl">
+  <div class="px-6 pt-32 pb-24 sm:px-6 lg:px-8">
-    <div class="relative z-10 lg:w-full lg:max-w-2xl">
+    <div class="mx-auto max-w-4xl text-center">
-      <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
+      <h2 class="text-balance lg:text-6xl font-normal tracking-tight text-white text-5xl fade-in">A Self-Healing Data, Network and Cloud Platform</h2>
-        <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
+      <p class="mx-auto mt-6 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
+      <p class="mx-auto mt-6 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
+      <div class="mt-12 flex items-center justify-center gap-x-6">
+        <a href="#" class="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a>
+        <a href="#" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
       </div>
-      <div class="relative px-6 lg:px-8 lg:pr-0">
-        <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl animate-fade-up">
-          <h1 class="text-pretty lg:text-6xl text-4xl font-semibold tracking-tight text-gray-900 animate-fade-up">Self-Healing Data, Network, and Cloud Platform</h1>
-          <p class="mt-8 text-pretty text-lg font-light text-gray-700 sm:text-xl/8 animate-fade-up">Imagine a system which can scale to a planetary level, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, provides 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.</p>
-          <div class="mt-10 flex items-center gap-x-6 animate-fade-up">
-            <a href="#" class="rounded-xl bg-black px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Host</a>
-            <a href="#" class="rounded-xl bg-blue-700 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Deploy</a>
-            <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 animate-fade-in">
-    <img class="aspect-[3/2] lg:mt-0 mt-12 lg:p-10 p-0 w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
-    <div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
-      <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
     </div>
   </div>
 </div>
 
 <style>
-  html, body {
+  /* Define the fade-in animation */
-    margin: 0;
-    height: 100%;
-  }
-
-  /* Background gradient */
-  .bg-gradient-bl {
-    background: linear-gradient(125deg, rgba(0, 166, 255, 1) 0%, rgba(8, 173, 179, 1) 100%);
-  }
-
-  /* Fade-up animation for text */
-  @keyframes fadeUp {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  /* Fade-in animation for the image (GIF) */
   @keyframes fadeIn {
-    from {
+    0% {
       opacity: 0;
     }
-    to {
+    100% {
       opacity: 1;
     }
   }
 
-  /* Apply fade-up animation to text */
+  /* Apply the fade-in animation to elements with the 'fade-in' class */
-  .animate-fade-up {
+  .fade-in {
-    animation: fadeUp 1.5s ease-out forwards;
+    animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
   }
 
-  /* Apply fade-in animation to the GIF */
+  /* Optional: Delay the animation for a more staggered effect */
-  .animate-fade-in {
+  h2 {
-    animation: fadeIn 2s ease-out forwards;
+    animation-delay: 0.5s; /* Delay for header */
   }
 
-  /* Responsive styles for smaller screens */
-  @media (max-width: 640px) {
-    h1 {
-      font-size: 2rem;
-    }
   p {
-      font-size: 1rem;
+    animation-delay: 1s; /* Delay for paragraphs */
-      margin-left: 1rem;
-      margin-right: 1rem;
-      line-height: 1.5;
-    }
   }
 </style>

templates/partials/logos2.html

@@ -1,26 +1,27 @@
-<div class="bg-transparent lg:py-24 py-10 overflow-hidden">
+<div class="bg-transparent lg:py-12 overflow-hidden">
     <div class="flex space-x-8 animate-scroll">
         <!-- First set of logos -->
-        <img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
+        <img class="object-contain" src="images/logos/sikana.png" alt="Transistor" width="158" height="48">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
+        <img class="object-contain" src="images/logos/ict.png" alt="Reform" width="158" height="48">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
+        <img class="object-contain" src="images/logos/znz.png" alt="Tuple" width="158" height="48">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
+        <img class="object-contain" src="images/logos/social.png" alt="SavvyCal" width="158" height="48">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
+        <img class="object-contain" src="images/logos/holo.png" alt="Statamic" width="158" height="48">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
+        <img class=" object-contain" src="images/logos/freezone.png" alt="Statamic" width="158" height="48">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
+        <img class=" object-contain" src="images/logos/vverse.png" alt="Statamic" width="158" height="48">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
+        <img class="object-contain" src="images/logos/veverse.png" alt="Statamic" width="158" height="48">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
+        <img class="object-contain" src="images/logos/zictia.png" alt="Statamic" width="158" height="48">
+
+                <!-- First set of logos -->
+                <img class="object-contain" src="images/logos/sikana.png" alt="Transistor" width="158" height="48">
+                <img class="object-contain" src="images/logos/ict.png" alt="Reform" width="158" height="48">
+                <img class="object-contain" src="images/logos/znz.png" alt="Tuple" width="158" height="48">
+                <img class="object-contain" src="images/logos/social.png" alt="SavvyCal" width="158" height="48">
+                <img class="object-contain" src="images/logos/holo.png" alt="Statamic" width="158" height="48">
+                <img class=" object-contain" src="images/logos/freezone.png" alt="Statamic" width="158" height="48">
+                <img class=" object-contain" src="images/logos/vverse.png" alt="Statamic" width="158" height="48">
+                <img class="object-contain" src="images/logos/veverse.png" alt="Statamic" width="158" height="48">
+                <img class="object-contain" src="images/logos/zictia.png" alt="Statamic" width="158" height="48">
 
-        <!-- Duplicate set of logos to create the endless effect -->
-        <img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
-        <img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
     </div>
 </div>
 
@@ -34,7 +35,7 @@
 /* Apply the animation */
 .animate-scroll {
     display: flex;
-    animation: scroll 25s linear infinite;
+    animation: scroll 30s linear infinite;
     gap: 2rem;
     width: max-content;
 }

templates/partials/simple_stats.html

@@ -0,0 +1,72 @@
+<div class="bg-transparent py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:max-w-none">
+        <div class="text-center">
+          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Proven by a Global Community</h2>
+          <p class="fade-in mt-4 max-w-4xl mx-auto text-lg/8 font-light text-gray-300">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p>
+          <p class="fade-in mt-4 max-w-4xl mx-auto text-lg/8 font-medium text-gray-300">Version 3.14 is live on Mainnet.</p>
+        </div>
+        <dl class="mt-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 lg:gap-8 overflow-hidden rounded-2xl text-center">
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 mt-1 font-light text-gray-300">CAPACITY</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="capacity">19,10 PB</dd>
+          </div>
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 font-light mt-1 text-gray-300">CORES</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="cores">46,934</dd>
+          </div>
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 font-light mt-1 text-gray-300">NODES</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="nodes">1596</dd>
+          </div>
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 font-light mt-1 text-gray-300">COUNTRIES</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="countries">40+</dd>
+          </div>
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 font-light mt-1 text-gray-300">FARMS</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="farms">900+</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Initialize the countUp for each of the numbers
+      new CountUp('capacity', 0, 1910, 0, 2.5).start();
+      new CountUp('cores', 0, 46934, 0, 2.5).start();
+      new CountUp('nodes', 0, 1596, 0, 2.5).start();
+      new CountUp('countries', 0, 40, 0, 2.5).start();
+      new CountUp('farms', 0, 900, 0, 2.5).start();
+    });
+  </script>
+  
+
+<style>
+    /* Define the fade-in animation */
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 20s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+  </style>
+  

templates/partials/slider.html

@@ -0,0 +1,88 @@
+<!--
+  This example requires some changes to your config:
+  
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/aspect-ratio'),
+    ],
+  }
+  ```
+-->
+<div class="bg-white">
+    <section aria-labelledby="features-heading" class="mx-auto max-w-7xl py-32 sm:px-2 lg:px-8">
+      <div class="mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0">
+        <div class="max-w-3xl">
+          <h2 id="features-heading" class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Collaboration, Innovation, Evolution</h2>
+          <p class="mt-4 font-light text-gray-700">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects.</p>
+        </div>
+  
+        <div class="mt-4">
+          <div class="-mx-4 flex overflow-x-auto sm:mx-0">
+            <div class="flex-auto border-b border-gray-200 px-4 sm:px-0">
+              <div class="-mb-px flex space-x-10" aria-orientation="horizontal" role="tablist">
+                <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                <button id="features-tab-2" class="whitespace-nowrap border-b-2 border-transparent bg-transparent py-6 text-lg font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="features-panel-2" role="tab" type="button">Material</button>
+                <button id="features-tab-3" class="whitespace-nowrap border-b-2 border-transparent py-6 bg-transparent text-lg font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="features-panel-3" role="tab" type="button">Considerations</button>
+              </div>
+            </div>
+          </div>
+  
+          <div id="features-panel-2" class="space-y-16 pt-10 lg:pt-16" aria-labelledby="features-tab-2" role="tabpanel" tabindex="0">
+            <div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
+              <div class="mt-6 lg:col-span-5 lg:mt-0">
+                <h3 class="text-lg font-medium text-gray-900">Natural wood options</h3>
+                <p class="mt-2 text-sm text-gray-500">Organize has options for rich walnut and bright maple base materials. Accent your desk with a contrasting material, or match similar woods for a calm and cohesive look. Every base is hand sanded and finished.</p>
+              </div>
+              <div class="lg:col-span-7">
+                <div class="aspect-h-1 aspect-w-2 overflow-hidden rounded-lg bg-gray-100 sm:aspect-h-2 sm:aspect-w-5">
+                  <img src="https://tailwindui.com/plus/img/ecommerce-images/product-feature-06-detail-02.jpg" alt="Walnut organizer base with pen, sticky note, phone, and bin trays, next to modular drink coaster attachment." class="object-cover object-center">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="features-panel-3" class="space-y-16 pt-10 lg:pt-16" aria-labelledby="features-tab-3" role="tabpanel" tabindex="0">
+            <div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
+              <div class="mt-6 lg:col-span-5 lg:mt-0">
+                <h3 class="text-lg font-medium text-gray-900">Helpful around the home</h3>
+                <p class="mt-2 text-sm text-gray-500">Our customers use Organize throughout the house to bring efficiency to many daily routines. Enjoy Organize in your workspace, kitchen, living room, entry way, garage, and more. We can&#039;t wait to see how you&#039;ll use it!</p>
+              </div>
+              <div class="lg:col-span-7">
+                <div class="aspect-h-1 aspect-w-2 overflow-hidden rounded-lg bg-gray-100 sm:aspect-h-2 sm:aspect-w-5">
+                  <img src="https://tailwindui.com/plus/img/ecommerce-images/product-feature-06-detail-03.jpg" alt="Walnut organizer base with white polycarbonate trays in the kitchen with various kitchen utensils." class="object-cover object-center">
+                </div>
+              </div>
+            </div>
+        </div>
+      </div>
+    </section>
+  </div>
+  
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const tabs = document.querySelectorAll('[role="tab"]');
+      const tabPanels = document.querySelectorAll('[role="tabpanel"]');
+  
+      tabs.forEach(tab => {
+        tab.addEventListener("click", () => {
+          // Remove active classes from all tabs and panels
+          tabs.forEach(t => {
+            t.classList.remove("border-indigo-500", "text-indigo-600");
+            t.classList.add("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700");
+          });
+          tabPanels.forEach(panel => panel.classList.add("hidden"));
+  
+          // Add active classes to clicked tab and associated panel
+          tab.classList.add("border-indigo-500", "text-indigo-600");
+          tab.classList.remove("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700");
+  
+          const panelId = tab.getAttribute("aria-controls");
+          document.getElementById(panelId).classList.remove("hidden");
+        });
+      });
+    });
+  </script>
+