update: homepage

Author: HoomanDgtl

public/images/acc-fuel.png

@@ -1,5 +1,5 @@
 ---
-import DarkModeToggle from "../dark-mode-toggle.astro";
+import DarkModeToggle from "../dark-mode-toggle";
 import {
   DiscordIcon,
   GithubIcon,
@@ -128,7 +128,7 @@ import {
             <TelegramIcon />
           </a>
         </div>
-        <div class="md:hidden"><DarkModeToggle footer /></div>
+        <div class="md:hidden"><DarkModeToggle footer client:load /></div>
       </div>
     </div>
     <div class="h-px w-full bg-[#3E3E3E]"></div>
@@ -154,7 +154,7 @@ import {
           Privacy
         </p>
       </div>
-      <div class="hidden md:block"><DarkModeToggle footer /></div>
+      <div class="hidden md:block"><DarkModeToggle footer client:load /></div>
     </div>
   </footer>
 </div>

src/components/accelerate/footer.astro

@@ -15,31 +15,33 @@ const { icon, card, className, autoHeight } = Astro.props as Props;
 ---
 
 <div class={clsx("flex flex-col items-start", className)}>
-  <div
-    class={"flex-shrink-0 rounded-lg border border-paraDark text-primary bg-background p-3"}
-  >
-    {
-      icon ? (
-        <div set:html={icon} />
-      ) : card.image ? (
-        <svg class="h-6 w-6 " fill="currentColor" viewBox="0 0 24 24">
-          <use
-            xlink:href={`${card.image.src}#img`}
-            href={`${card.image.src}#img`}
-          />
-        </svg>
-      ) : null
-    }
-  </div>
-
-  <div class="mt-5 md:mt-6">
+  <div class="flex flex-col items-start gap-3 md:flex-row">
+    <div
+      class={"flex-shrink-0 rounded-lg border border-paraDark text-primary bg-background p-2"}
+    >
+      {
+        icon ? (
+          <div set:html={icon} />
+        ) : card.image ? (
+          <svg class="h-6 w-6 " fill="currentColor" viewBox="0 0 24 24">
+            <use
+              xlink:href={`${card.image.src}#img`}
+              href={`${card.image.src}#img`}
+            />
+          </svg>
+        ) : null
+      }
+    </div>
     <h3
-      class={clsx("text-xl font-semibold ", autoHeight ? "" : "lg:h-14")}
+      class={clsx("text-base font-semibold md:text-lg")}
       set:html={card.title}
     />
+  </div>
+
+  <div class="md:mt-0">
     <p
       set:html={card.description}
-      class="mt-2 flex-shrink-0 text-xs text-paraDark md:mt-4 md:text-sm"
+      class="mt-2 flex-shrink-0 text-sm text-paraDark md:mt-4 md:text-base"
     />
   </div>
 </div>

src/components/cards/FeatureCard.astro

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
 import { Sun, SunMoon } from "lucide-react";
+import { useEffect, useState } from "react";
 
-const DarkModeToggle = () => {
+const DarkModeToggle = ({ footer }: { footer?: boolean }) => {
   const [theme, setTheme] = useState("light");
 
   useEffect(() => {
@@ -22,9 +22,12 @@ const DarkModeToggle = () => {
   };
 
   return (
-    <button onClick={toggleTheme} id="header-toggle">
-      <Sun className="h-5 w-5 text-para dark:hidden hover:text-primary" />
-      <SunMoon className="hidden h-5 w-5 text-para dark:block hover:text-primary" />
+    <button
+      onClick={toggleTheme}
+      id={footer ? "header-toggle-footer" : "header-toggle"}
+    >
+      <Sun className="h-5 w-5 text-para hover:text-primary dark:hidden" />
+      <SunMoon className="hidden h-5 w-5 text-para hover:text-primary dark:block" />
     </button>
   );
 };

src/components/dark-mode-toggle.tsx

@@ -1,6 +1,7 @@
 ---
 import Logo from "@/components/ui/logo.astro";
-import DarkModeToggle from "../dark-mode-toggle.astro";
+
+import DarkModeToggle from "../dark-mode-toggle";
 import { DiscordIcon, GithubIcon, TwitterIcon } from "../header/icons";
 import SpeakToExpert from "../pricing-page/SpeakToExpert";
 import AlgoliaSearch from "./algolia-search.jsx";
@@ -19,7 +20,7 @@ import AlgoliaSearch from "./algolia-search.jsx";
     </div>
     <div class="hidden flex-shrink-0 md:flex md:gap-x-[14px]">
       <div class="hidden items-center gap-x-[14px] text-para md:flex">
-        <DarkModeToggle />
+        <DarkModeToggle client:load />
         <a
           class="cursor-pointer hover:text-primary"
           href="https://twitter.com/akashnet_"

src/components/docs/header.astro

@@ -3,7 +3,8 @@ import FooterLink from "@/components/footer/footer-link.astro";
 import { socialLinks } from "@/lib/constants";
 import { shouldHideCta } from "@/utils/hideCta";
 import clsx from "clsx";
-import DarkModeToggle from "../dark-mode-toggle.astro";
+
+import DarkModeToggle from "../dark-mode-toggle";
 import {
   DiscordIcon,
   GithubIcon,
@@ -190,7 +191,7 @@ const shouldHide = shouldHideCta(pathname);
     shouldHide && "border-t  mt-20",
     overrideClassName
       ? overrideClassName
-      : "bg-white dark:bg-background container",
+      : "bg-white dark:bg-background container"
   )}
 >
   <div class="border-b pb-6 md:pb-20">
@@ -202,7 +203,7 @@ const shouldHide = shouldHideCta(pathname);
         {
           !hideDarkToggle && (
             <>
-              <DarkModeToggle />
+              <DarkModeToggle footer client:load />
               <div class="h-7 w-[1.5px] bg-[#3B3B3B]" />
             </>
           )
@@ -233,28 +234,36 @@ const shouldHide = shouldHideCta(pathname);
           >
             <path
               d="M17.1542 16.4897L21.1887 23.5858H13.039L8.96191 16.4897H17.1542Z"
+              class="fill-foreground"
               fill="url(#paint0_linear_125_570)"></path>
             <path
               d="M21.1865 23.5869L25.2568 16.4909L17.1094 2.29541H8.96191L21.1865 23.5869Z"
-              fill="white"></path>
+              class="fill-foreground"
+              fill="currentColor"></path>
             <path
               d="M4.88828 9.38965H13.0358L4.89167 23.5851L0.814575 16.4891L4.88828 9.38965Z"
-              fill="white"></path>
+              class="fill-foreground"
+              fill="currentColor"></path>
             <path
               d="M41.669 9.39684L41.4662 11.5876C40.5975 9.88687 38.5994 8.96447 36.4565 8.96447C32.4313 8.96447 29.7382 11.8758 29.7382 16.3438C29.7382 20.7829 32.1707 24.0113 36.4275 24.0113C38.7442 24.0113 40.4527 22.8871 41.3504 21.417L41.5821 23.6366H44.8833V9.39684H41.669ZM41.2925 16.5167C41.2925 19.0822 39.6998 20.8405 37.2383 20.8405C34.7769 20.8405 33.2711 19.0533 33.2711 16.5167C33.2711 13.9801 34.8059 12.1641 37.2673 12.1641C39.7288 12.1641 41.2925 13.9512 41.2925 16.5167Z"
-              fill="white"></path>
+              class="fill-foreground"
+              fill="currentColor"></path>
             <path
               d="M50.8944 23.6366V19.8028L52.9794 17.6409L56.715 23.6366H60.7691L55.4408 15.0466L60.885 9.39684H56.4544L50.8944 15.3637V2.60986H47.3904V23.6366H50.8944Z"
-              fill="white"></path>
+              class="fill-foreground"
+              fill="currentColor"></path>
             <path
               d="M72.6334 9.39684L72.4307 11.5876C71.5619 9.88687 69.5638 8.96447 67.4209 8.96447C63.3957 8.96447 60.7026 11.8758 60.7026 16.3438C60.7026 20.7829 63.1351 24.0113 67.3919 24.0113C69.7086 24.0113 71.4171 22.8871 72.3148 21.417L72.5465 23.6366H75.8477V9.39684H72.6334ZM72.2569 16.5167C72.2569 19.0822 70.6642 20.8405 68.2028 20.8405C65.7413 20.8405 64.2355 19.0533 64.2355 16.5167C64.2355 13.9801 65.7703 12.1641 68.2317 12.1641C70.6932 12.1641 72.2569 13.9512 72.2569 16.5167Z"
-              fill="white"></path>
+              class="fill-foreground"
+              fill="currentColor"></path>
             <path
               d="M77.6355 19.3128C77.6355 22.1088 79.8942 24.0113 83.4561 24.0113C86.989 24.0113 89.4504 22.2241 89.4504 19.3416C89.4504 17.1509 88.2342 16.0555 85.8307 15.5078L83.2534 14.9025C82.0371 14.6142 81.4001 14.0954 81.4001 13.2883C81.4001 12.2217 82.2109 11.5876 83.6009 11.5876C84.9619 11.5876 85.7727 12.3659 85.8017 13.5765H89.1609C89.1319 10.8093 86.96 8.96447 83.7457 8.96447C80.4444 8.96447 78.0699 10.6363 78.0699 13.4324C78.0699 15.7096 79.3151 16.9203 81.8923 17.4968L84.4696 18.1021C85.7438 18.3904 86.1202 18.9092 86.1202 19.6298C86.1202 20.6676 85.2225 21.3305 83.5719 21.3305C81.9503 21.3305 81.0236 20.5523 80.9946 19.3128H77.6355Z"
-              fill="white"></path>
+              class="fill-foreground"
+              fill="currentColor"></path>
             <path
               d="M94.9515 23.6366V15.8537C94.9515 13.7206 96.2547 12.1641 98.4844 12.1641C100.28 12.1641 101.467 13.3171 101.467 15.7096V23.6366H105V14.8737C105 11.184 103.147 8.96447 99.6138 8.96447C97.5578 8.96447 95.8782 9.85805 94.9805 11.2417V2.60986H91.4186V23.6366H94.9515Z"
-              fill="white"></path>
+              class="fill-foreground"
+              fill="currentColor"></path>
             <defs>
               <linearGradient
                 id="paint0_linear_125_570"
@@ -264,9 +273,11 @@ const shouldHide = shouldHideCta(pathname);
                 y2="16.2255"
                 gradientUnits="userSpaceOnUse"
               >
-                <stop stop-color="white"></stop>
-                <stop offset="1" stop-color="white" stop-opacity="0.127613"
-                ></stop>
+                <stop stop-color="currentColor"></stop>
+                <stop
+                  offset="1"
+                  stop-color="currentColor"
+                  stop-opacity="0.127613"></stop>
               </linearGradient>
             </defs>
           </svg>
@@ -280,8 +291,8 @@ const shouldHide = shouldHideCta(pathname);
           {
             !hideDarkToggle && (
               <>
-                <DarkModeToggle />
-                <div class="h-7 w-[1.5px] bg-[#3B3B3B]" />
+                <DarkModeToggle footer />
+                <div class="h-7 w-[1.5px] bg-gray-300 dark:bg-[#3B3B3B] " />
               </>
             )
           }

src/components/footer/footer.astro

@@ -9,8 +9,8 @@ const { className } = Astro.props;
 
 <div
   class={clsx(
-    " flex flex-col items-center justify-center gap-2.5 md:flex-row",
-    className,
+    " flex flex-col items-center text-foreground justify-center gap-2.5 md:flex-row",
+    className
   )}
 >
   <div

src/components/footer/superclound.astro

@@ -4,7 +4,8 @@ import Logo from "@/components/ui/logo.astro";
 import { getYearToUse } from "@/utils/redirects";
 import { getCollection } from "astro:content";
 import clsx from "clsx";
-import DarkModeToggle from "../dark-mode-toggle.astro";
+
+import DarkModeToggle from "../dark-mode-toggle";
 import ButtonLink from "../ui/button-link.astro";
 import TryAkashForm from "../ui/try-akash-form";
 import HamburgerMenu from "./hamburger-menu";
@@ -163,7 +164,7 @@ const navContainerClass = hideContainer ? "" : "container";
 
         <TryAkashForm client:load type="header" />
       </div>
-      {!hideDarkToggle && <DarkModeToggle nav />}
+      {!hideDarkToggle && <DarkModeToggle client:load />}
     </div>
   </nav>
 </header>

src/components/header/header.astro

@@ -251,6 +251,7 @@ const ExpandedGpu = () => {
               className={clsx(
                 "flex flex-col",
                 item.selected && " -mt-1 md:-mt-2",
+                index !== gpuTypes.length - 1 && index !== 1 && "border-r",
               )}
             >
               <h3
@@ -312,9 +313,11 @@ const ExpandedGpu = () => {
                       key={i}
                       className={clsx(
                         " py-2.5 text-center text-sm font-semibold md:py-4 md:text-xl ",
+                        i === 1 ? " border-t !border-[#DC1D28]" : "border-t",
                         i === 1 && index !== 1
-                          ? "bg-primary text-white"
+                          ? "bg-primary  text-white"
                           : "bg-background",
+                        i !== item.length - 1 && i !== 1 && "border-r",
                       )}
                     >
                       {item}