filip(fix): apply design amends

site/package.json

@@ -22,7 +22,8 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "undici": "^7.2.3"
+    "undici": "^7.2.3",
+    "framer-motion": "^12.23.25"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",

site/src/components/HomepageFeatures/index.tsx

@@ -1,8 +1,9 @@
-import { LinkButton } from "../LinkButton/LinkButton";
-import styles from "./styles.module.css";
+import DecentralizedSvg from "@site/static/img/decentralized.svg";
+
 import ScaleSvg from "@site/static/img/scale.svg";
 import SecureSvg from "@site/static/img/secure.svg";
-import FlexibleSvg from "@site/static/img/flexible.svg";
+import { LinkButton } from "../LinkButton/LinkButton";
+import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;
@@ -37,9 +38,15 @@ const FeatureList: FeatureItem[] = [
     ),
   },
   {
-    title: "Flexible",
-    Svg: FlexibleSvg,
-    description: <>Ouroboros Leios supports diverse applications.</>,
+    title: "Decentralized",
+    Svg: DecentralizedSvg,
+    description: (
+      <>
+        Improving the throughput by 50x while not compromising decentralization.
+        So, the network still will maintain its resiliance, fairness and
+        democratisation.
+      </>
+    ),
   },
 ];
 

site/src/css/custom.css

@@ -21,11 +21,11 @@
   --ifm-font-color-alternate: #000;
   --ifm-background-color-primary: #f8f6fa;
   --ifm-background-color-secondary: #f1edf5;
-  --ifm-color-caption: #73489a;
-  --ifm-link-color: #73489a;
-  --ifm-menu-color: #73489a;
-  --ifm-toc-link-color: #73489a;
-  --link-button-background-hover: #73489a;
+  --ifm-color-caption: #8c02c2;
+  --ifm-link-color: #8c02c2;
+  --ifm-menu-color: #8c02c2;
+  --ifm-toc-link-color: #8c02c2;
+  --link-button-background-hover: #8c02c2;
 
   --ifm-navbar-height: 6.063rem;
 
@@ -58,11 +58,11 @@
   --ifm-background-color-primary: #1a1a1a;
   --ifm-background-color-secondary: #333;
 
-  --ifm-link-color: #b1e0fe;
-  --ifm-color-caption: #b1e0fe;
-  --ifm-link-color: #b1e0fe;
-  --ifm-menu-color: #b1e0fe;
-  --ifm-toc-link-color: #b1e0fe;
+  --ifm-link-color: #6effd1;
+  --ifm-color-caption: #6effd1;
+  --ifm-link-color: #6effd1;
+  --ifm-menu-color: #6effd1;
+  --ifm-toc-link-color: #6effd1;
 
   --link-button-background-hover: rgba(255, 255, 255, 0.15);
 

site/src/theme/Navbar/Layout/index.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useLocation } from "@docusaurus/router";
 import { useThemeConfig } from "@docusaurus/theme-common";
 import {
   useHideableNavbar,
@@ -7,9 +10,8 @@ import { translate } from "@docusaurus/Translate";
 import type { Props } from "@theme/Navbar/Layout";
 import NavbarMobileSidebar from "@theme/Navbar/MobileSidebar";
 import clsx from "clsx";
-import { type ComponentProps } from "react";
-
-import styles from "./styles.module.css";
+import { motion, useMotionValueEvent, useScroll } from "framer-motion";
+import { useEffect, useState, type ComponentProps } from "react";
 
 function NavbarBackdrop(props: ComponentProps<"div">) {
   return (
@@ -26,32 +28,52 @@ export default function NavbarLayout({ children }: Props): JSX.Element {
     navbar: { hideOnScroll, style },
   } = useThemeConfig();
   const mobileSidebar = useNavbarMobileSidebar();
-  const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
+  const { navbarRef } = useHideableNavbar(hideOnScroll);
+  const location = useLocation();
+  const isHomepage = location.pathname === "/";
+
+  const { scrollY } = useScroll();
+  const [isVisible, setIsVisible] = useState(true);
+  const [lastY, setLastY] = useState(0);
+
+  // Hide/show on scroll similar to your previous code
+  useMotionValueEvent(scrollY, "change", (latest) => {
+    if (!isHomepage) return;
+    if (mobileSidebar.shown) return;
+
+    if (latest > lastY + 10) setIsVisible(false);
+    else if (latest < lastY - 10) setIsVisible(true);
+
+    setLastY(latest);
+  });
+
+  useEffect(() => {
+    if (mobileSidebar.shown) setIsVisible(true);
+  }, [mobileSidebar.shown]);
+
+  const NavWrapper = isHomepage ? motion.nav : "nav";
+
   return (
-    <nav
+    <NavWrapper
       ref={navbarRef}
       aria-label={translate({
         id: "theme.NavBar.navAriaLabel",
         message: "Main",
         description: "The ARIA label for the main navigation",
       })}
-      className={clsx(
-        "navbar",
-        "navbar--fixed-top",
-        hideOnScroll && [
-          styles.navbarHideable,
-          !isNavbarVisible && styles.navbarHidden,
-        ],
-        {
-          "navbar--dark": style === "dark",
-          "navbar--primary": style === "primary",
-          "navbar-sidebar--show": mobileSidebar.shown,
-        }
-      )}
+      className={clsx("navbar", "navbar--fixed-top", {
+        "navbar--dark": style === "dark",
+        "navbar--primary": style === "primary",
+        "navbar-sidebar--show": mobileSidebar.shown,
+      })}
+      animate={isHomepage ? { y: isVisible ? 0 : "-100%" } : undefined}
+      transition={
+        isHomepage ? { type: "spring", stiffness: 300, damping: 30 } : undefined
+      }
     >
       {children}
       <NavbarBackdrop onClick={mobileSidebar.toggle} />
       <NavbarMobileSidebar />
-    </nav>
+    </NavWrapper>
   );
 }