From 0ad5c2eeb477a0381d67372b691de5f13f75ccca Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Wed, 20 Nov 2024 14:02:37 +0200
Subject: [PATCH] update home

---
 templates/partials/home/faq.html        | 414 ++++++++++++++----------
 templates/partials/home/grid_stats.html |   3 +
 2 files changed, 244 insertions(+), 173 deletions(-)

diff --git a/templates/partials/home/faq.html b/templates/partials/home/faq.html
index 505d29f58..fa1d97089 100644
--- a/templates/partials/home/faq.html
+++ b/templates/partials/home/faq.html
@@ -1,187 +1,255 @@
-<div class="bg-transparent">
-    <div class="mx-auto max-w-7xl px-6 pb-32 pt-12fa lg:px-8">
-        <div class="mx-auto max-w-4xl divide-y divide-white/10">
-            <h2 class="text-3xl font-normal tracking-tight text-white sm:text-4xl">Frequently Asked Questions</h2>
-            <dl class="mt-10 space-y-6 divide-y divide-white/10">
 
-                <!-- FAQ 1 -->
-                <div class="pt-6">
-                    <dt>
-                        <button type="button" class="flex w-full border-transparent items-start justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-0" aria-expanded="false">
-                            <span class="text-base font-semibold">Is this a separate new Internet?</span>
-                            <span class="ml-6 flex h-7 items-center">
-                                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-                                </svg>
-                                <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
-                                </svg>
-                            </span>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        inter: ['Inter', 'sans-serif'],
+                    },
+                },
+            },
+        };
+    </script>
+    <main class="relative flex flex-col justify-center overflow-hidden">
+        <div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-20">
+
+            <h1 class="text-3xl font-normal tracking-tight text-white sm:text-4xl">Frequently Asked Questions</h1>
+
+            <!-- Accordion component -->
+            <div class="divide-y divide-white/50 my-10">
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-01"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-01"
+                        >
+                            <span class="text-xl">Is this a separate new Internet?</span>
+                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                            </svg>
                         </button>
-                    </dt>
-                    <dd class="mt-2 hidden pr-12 text-white" id="faq-0">
-                        <p class="text-base text-white">No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet while offering additional capabilities.</p>
-                    </dd>
+                    </h2>
+                    <div
+                        id="faqs-text-01"
+                        role="region"
+                        aria-labelledby="faqs-title-01"
+                        class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                            <p class="pb-3 text-gray-300 text-lg">
+                                No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet while offering additional capabilities.
+                            </p>
+                        </div>
+                    </div>
                 </div>
-
-                <!-- FAQ 2 -->
-                <div class="pt-6">
-                    <dt>
-                        <button type="button" class="flex w-full items-start border-transparent justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-1" aria-expanded="false">
-                            <span class="text-base font-semibold">Why do we need a new Internet?</span>
-                            <span class="ml-6 flex h-7 items-center">
-                                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-                                </svg>
-                                <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
-                                </svg>
-                            </span>
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-02"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-02"
+                        >
+                            <span>Why do we need a new Internet?</span>
+                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                            </svg>
                         </button>
-                    </dt>
-                    <dd class="mt-2 hidden pr-12 text-white" id="faq-1">
-                        <p class="text-base text-white">The Internet has become fragile and overly centralized. Issues like authenticity, privacy, security, and sustainability necessitate a fundamental new approach to rebuild its foundation.</p>
-                    </dd>
-                </div>
-
-                <!-- FAQ 3 -->
-                <div class="pt-6">
-                    <dt>
-                        <button type="button" class="flex w-full items-start border-transparent justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-2" aria-expanded="false">
-                            <span class="text-base font-semibold">This seems too big to be true. Is this real?</span>
-                            <span class="ml-6 flex h-7 items-center">
-                                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-                                </svg>
-                                <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
-                                </svg>
-                            </span>
+                    </h2>
+                    <div
+                        id="faqs-text-02"
+                        role="region"
+                        aria-labelledby="faqs-title-02"
+                        class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                            <p class="pb-3 text-gray-300 text-lg">
+                                The Internet has become fragile and overly centralized. Issues like authenticity, privacy, security, and sustainability necessitate a fundamental new approach to rebuild its foundation.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-03"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-03"
+                        >
+                            <span>This seems too big to be true. Is this real?</span>
+                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                            </svg>
                         </button>
-                    </dt>
-                    <dd class="mt-2 hidden pr-12 text-white" id="faq-2">
-                        <p class="text-base text-white">For over 30 years, we’ve worked toward this vision. ThreeFold is the culmination of our journey, offering a fully operational product and a growing community of users, farmers, and partners. This is real and here to stay.</p>
-                    </dd>
-                </div>
-
-                <!-- FAQ 4 -->
-                <div class="pt-6">
-                    <dt>
-                        <button type="button" class="flex w-full items-start border-transparent justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-3" aria-expanded="false">
-                            <span class="text-base font-semibold">You have 2 tokens, TFT and INCA, why?</span>
-                            <span class="ml-6 flex h-7 items-center">
-                                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-                                </svg>
-                                <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
-                                </svg>
-                            </span>
+                    </h2>
+                    <div
+                        id="faqs-text-03"
+                        role="region"
+                        aria-labelledby="faqs-title-03"
+                        class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                            <p class="pb-3 text-gray-300 text-lg">
+                                For over 30 years, we’ve worked toward this vision. ThreeFold is the culmination of our journey, offering a fully operational product and a growing community of users, farmers, and partners. This is real and here to stay.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-04"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-04"
+                        >
+                            <span>You have 2 tokens, TFT and INCA, why?</span>
+                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                            </svg>
                         </button>
-                    </dt>
-                    <dd class="mt-2 hidden pr-12 text-white" id="faq-3">
-                        <p class="text-base text-white">TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid of capacity. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. We are now building generation 4 of the ThreeFold Grid of capacity and we need a new token to build this new generation. There will never be more than 3 billion INCA. Our partners will start selling new ThreeFold Nodes end Nov 2024 with a new reward scheme and ready to grow to millions of nodes.</p>
-                    </dd>
-                </div>
-
-                <!-- FAQ 5 -->
-                <div class="pt-6">
-                    <dt>
-                        <button type="button" class="flex w-full items-start border-transparent justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-4" aria-expanded="false">
-                            <span class="text-base font-semibold">How can I participate?</span>
-                            <span class="ml-6 flex h-7 items-center">
-                                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-                                </svg>
-                                <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
-                                </svg>
-                            </span>
+                    </h2>
+                    <div
+                        id="faqs-text-04"
+                        role="region"
+                        aria-labelledby="faqs-title-04"
+                        class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-gray-300 text-lg">
+                                TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid of capacity. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. We are now building generation 4 of the ThreeFold Grid of capacity and we need a new token to build this new generation. There will never be more than 3 billion INCA. Our partners will start selling new ThreeFold Nodes end Nov 2024 with a new reward scheme and ready to grow to millions of nodes.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-05"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-05"
+                        >
+                            <span>How can I participate?</span>
+                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                            </svg>
                         </button>
-                    </dt>
-                    <dd class="mt-2 hidden pr-12 text-white" id="faq-4">
-                        <p class="text-base text-white">You can participate by becoming a farmer, a user, a partner or by developing a web4 app. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications for Web4, and many more.</p>
-                    </dd>
-                </div>
-
-                <!-- FAQ 6 -->
-                <div class="pt-6">
-                    <dt>
-                        <button type="button" class="flex w-full items-start border-transparent justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-5" aria-expanded="false">
-                            <span class="text-base font-semibold">What is Web4?</span>
-                            <span class="ml-6 flex h-7 items-center">
-                                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-                                </svg>
-                                <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
-                                </svg>
-                            </span>
+                    </h2>
+                    <div
+                        id="faqs-text-05"
+                        role="region"
+                        aria-labelledby="faqs-title-05"
+                        class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-gray-300 text-lg">
+                                You can participate by becoming a farmer, a user, a partner or by developing a web4 app. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications for Web4, and many more.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-06"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-06"
+                        >
+                            <span>What is Web4?</span>
+                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                            </svg>
                         </button>
-                    </dt>
-                    <dd class="mt-2 hidden pr-12 text-white" id="faq-5">
-                        <p class="text-base text-white">Web4 is our evolution towards a decentralized, user-controlled, and secure Internet that respects privacy and minimizes environmental impact.</p>
-                    </dd>
-                </div>
-
-                <!-- FAQ 7 -->
-                <div class="pt-6">
-                    <dt>
-                        <button type="button" class="flex w-full items-start border-transparent justify-between text-left text-white px-6 bg-transparent border-none" aria-controls="faq-6" aria-expanded="false">
-                            <span class="text-base font-semibold">Is this another blockchain?</span>
-                            <span class="ml-6 flex h-7 items-center">
-                                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-expand">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
-                                </svg>
-                                <svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon-collapse">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
-                                </svg>
-                            </span>
+                    </h2>
+                    <div
+                        id="faqs-text-06"
+                        role="region"
+                        aria-labelledby="faqs-title-06"
+                        class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-gray-300 text-lg">
+                                Web4 is our evolution towards a decentralized, user-controlled, and secure Internet that respects privacy and minimizes environmental impact.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-07"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-07"
+                        >
+                            <span>Is this another blockchain?</span>
+                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
+                            </svg>
                         </button>
-                    </dt>
-                    <dd class="mt-2 hidden pr-12 text-white" id="faq-6">
-                        <p class="text-base text-white">No, we are NOT blockchain. We are using our own technology: Zero State technology combined with Quantum Safe Internetworking.</p>
-                    </dd>
-                </div>
+                    </h2>
+                    <div
+                        id="faqs-text-07"
+                        role="region"
+                        aria-labelledby="faqs-title-07"
+                        class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-gray-300 text-lg">
+                                No, we are NOT blockchain. We are using our own technology: Zero State technology combined with Quantum Safe Internetworking.
+                            </p>
+                        </div>
+                    </div>
+                </div>                                                                                                
+            </div>
+            <!-- End: Accordion component -->
 
-            </dl>
         </div>
-    </div>
-</div>
+    </main>
 
-<script>
-    // Select all FAQ buttons
-const faqButtons = document.querySelectorAll("dt button");
 
-// Add click event listeners to each button
-faqButtons.forEach(button => {
-  button.addEventListener("click", () => {
-    const currentFaq = button.closest("div");
-    const answer = currentFaq.querySelector("dd");
-    const isExpanded = button.getAttribute("aria-expanded") === "true";
 
-    // Collapse all other FAQs
-    faqButtons.forEach(btn => {
-      if (btn !== button) {
-        const otherFaq = btn.closest("div");
-        const otherAnswer = otherFaq.querySelector("dd");
-        btn.setAttribute("aria-expanded", "false");
-        otherAnswer.classList.add("hidden");
-        otherAnswer.classList.remove("block");
-      }
-    });
-
-    // Toggle current FAQ
-    if (isExpanded) {
-      button.setAttribute("aria-expanded", "false");
-      answer.classList.add("hidden");
-      answer.classList.remove("block");
-    } else {
-      button.setAttribute("aria-expanded", "true");
-      answer.classList.remove("hidden");
-      answer.classList.add("block");
-    }
-  });
-});
-
-</script>
\ No newline at end of file
+   
diff --git a/templates/partials/home/grid_stats.html b/templates/partials/home/grid_stats.html
index 6402c432f..c55bc7adc 100644
--- a/templates/partials/home/grid_stats.html
+++ b/templates/partials/home/grid_stats.html
@@ -26,6 +26,9 @@
             </div>
           </dl>
       </div>
+
+      <p class="flex items-center justify-center mt-8 text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">To build Web 4, we need +1,000,000 Nodes</p>
+
     </div>
     <div class="mt-12 flex items-center justify-center gap-x-6">
       <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mt-8">Explore Grid Capacity</a>