feat: implement floating navbar with aurora background and updated header styling

2025-10-22 22:25:54 +02:00
parent ce33e0f7c3
commit af77948679
21 changed files with 645 additions and 60 deletions
--- a/components.json
+++ b/components.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
+  }
+}
--- a/index.html
+++ b/index.html
@@ -8,12 +8,6 @@
    <meta name="description" content="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking." />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <style>
-      :root {
-        --font-inter: 'Inter', sans-serif;
-      }
-    </style>
  </head>
  <body>
    <div id="root"></div>
--- a/public/images/mchip.webp
+++ b/public/images/mchip.webp
--- a/src/components/AnimatedSection.tsx
+++ b/src/components/AnimatedSection.tsx
@@ -1,12 +1,13 @@
 import { useRef } from 'react'
 import { motion, useInView } from 'framer-motion'

-export function AnimatedSection({ children }: { children: React.ReactNode }) {
+export function AnimatedSection({ children, id }: { children: React.ReactNode; id?: string }) {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })

  return (
    <motion.section
+      id={id}
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={{
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -3,9 +3,9 @@ import clsx from 'clsx'

 const baseStyles = {
  solid:
-    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
+    'inline-flex justify-center rounded-full py-2 px-4 text-sm font-semibold transition-colors',
  outline:
-    'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
+    'inline-flex justify-center rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(4)-1px)] text-sm transition-colors',
 }

 const variantStyles = {
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,44 +1,67 @@
+'use client'
+
+
+import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Container } from './Container'
+import { AnimatePresence, motion } from 'framer-motion'
+import clsx from 'clsx'
 import { Button } from './Button'

-export function Header() {
+
+function NavLinks() {
+  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  let timeoutRef = useRef<number | null>(null)
+
+
  return (
-    <header>
-      <nav>
-        <Container className="relative z-50 flex justify-between py-8">
-          <div className="relative z-10 flex items-center gap-16">
-            <Link to="/" aria-label="Home">
-              <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
-            </Link>
-            <div className="hidden lg:flex lg:gap-10">
-              <Link
-                to="/"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Home
-              </Link>
-              <Link
-                to="/cloud"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Cloud
-              </Link>
-              <Link
-                to="/network"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Network
-              </Link>
-              <Link
-                to="/agents"
-                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
-              >
-                Agents
-              </Link>
-            </div>
-          </div>
-          <div className="flex items-center gap-6">
+    <div className="flex items-center gap-x-5">
+      <Link to="/" aria-label="Home">
+        <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
+      </Link>
+      <div className="flex items-center gap-x-5 border-l border-white/10 pl-5">
+        {[
+          ['Home', '/'],
+          ['Cloud', '/cloud'],
+          ['Network', '/network'],
+          ['Agents', '/agents'],
+        ].map(([label, href], index) => (
+          <Link
+            key={label}
+            to={href}
+            className={clsx(
+              'relative rounded-lg px-3 py-2 text-sm text-black transition-colors delay-150 hover:text-cyan-500 hover:delay-0',
+            )}
+            onMouseEnter={() => {
+              if (timeoutRef.current) {
+                window.clearTimeout(timeoutRef.current)
+              }
+              setHoveredIndex(index)
+            }}
+            onMouseLeave={() => {
+              timeoutRef.current = window.setTimeout(() => {
+                setHoveredIndex(null)
+              }, 200)
+            }}
+          >
+            <AnimatePresence>
+              {hoveredIndex === index && (
+                <motion.span
+                  className="absolute inset-0 rounded-lg bg-white/10"
+                  layoutId="hoverBackground"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1, transition: { duration: 0.15 } }}
+                  exit={{
+                    opacity: 0,
+                    transition: { duration: 0.15 },
+                  }}
+                />
+              )}
+            </AnimatePresence>
+            <span className="relative z-10">{label}</span>
+          </Link>
+        ))}
+      </div>
+       <div className="flex items-center gap-8">
            <div className="flex items-center gap-6 max-lg:hidden">
              <Button
                to="https://threefold.info/mycelium_network/docs/"
@@ -54,8 +77,48 @@ export function Header() {
              </Button>
            </div>
          </div>
-        </Container>
-      </nav>
-    </header>
+    </div>
+  )
+}
+
+
+export function Header() {
+  const [isVisible, setIsVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+
+  const controlHeader = () => {
+    if (typeof window !== 'undefined') {
+      if (window.scrollY > lastScrollY && window.scrollY > 100) { // Hides when scrolling down past 100px
+        setIsVisible(false);
+      } else { // Shows when scrolling up
+        setIsVisible(true);
+      }
+      setLastScrollY(window.scrollY);
+    }
+  };
+
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', controlHeader);
+      return () => {
+        window.removeEventListener('scroll', controlHeader);
+      };
+    }
+  }, [lastScrollY]);
+
+
+  return (
+    <motion.header 
+      className="fixed top-4 left-0 right-0 z-50 flex justify-center"
+      initial={{ y: 0, opacity: 1 }}
+      animate={{ y: isVisible ? 0 : -100, opacity: isVisible ? 1 : 0 }}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+    >
+      <div className="rounded-full bg-white/10 px-5 py-3 shadow-lg ring-1 ring-white/10 backdrop-blur-sm">
+        <NavLinks />
+      </div>
+    </motion.header>
  )
 }
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,8 +1,16 @@
 import { Outlet } from 'react-router-dom'
-import { Header } from './Header'
+import { FloatingNav } from './ui/floating-navbar'
 import { Footer } from './Footer'
+import { Header } from './Header'

 export function Layout() {
+  const navItems = [
+    { name: 'Home', link: '/' },
+    { name: 'Cloud', link: '/cloud' },
+    { name: 'Network', link: '/network' },
+    { name: 'Agents', link: '/agents' },
+  ];
+
  return (
    <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
      <Header />
--- a/src/components/ScrollDownArrow.tsx
+++ b/src/components/ScrollDownArrow.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+
+export function ScrollDownArrow() {
+  const scrollToNextSection = () => {
+    const nextSection = document.querySelector('#next-section') // Assuming the next section has this id
+    if (nextSection) {
+      nextSection.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
+  return (
+    <button
+      onClick={scrollToNextSection}
+      className="animate-bounce text-gray-500 hover:text-gray-700"
+      aria-label="Scroll to next section"
+    >
+      <ChevronDown size={32} />
+    </button>
+  )
+}
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -3,6 +3,11 @@
 import React from 'react'
 import { cn } from '@/lib/utils'

+const fontVariants = {
+  sans: 'font-sans',
+  neuton: 'font-neuton',
+} as const
+
 const colorVariants = {
  primary: 'text-gray-900',
  secondary: 'text-gray-600',
@@ -15,6 +20,7 @@ const colorVariants = {
 } as const

 type TextOwnProps = {
+  font?: keyof typeof fontVariants
  color?: keyof typeof colorVariants
  className?: string
 }
@@ -34,6 +40,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
  >

  function Text<E extends React.ElementType = DefaultElement>({
+    font = 'sans',
    as,
    color = 'primary',
    className,
@@ -43,7 +50,12 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
    const Tag = (as || defaultElement) as React.ElementType
    return (
      <Tag
-        className={cn(defaultClassName, colorVariants[color], className)}
+        className={cn(
+          defaultClassName,
+          fontVariants[font],
+          colorVariants[color],
+          className
+        )}
        {...props}
      >
        {children}
@@ -87,7 +99,7 @@ export const Subtle = createTextComponent(
 )
 export const H5 = createTextComponent(
  'h5',
-  'text-xl lg:text-2xl font-semibold leading-snug tracking-tight'
+  'text-xl lg:text-2xl font-light leading-snug tracking-normal'
 )
 export const Eyebrow = createTextComponent(
  'h2',
--- a/src/components/ui/ScrollDown.tsx
+++ b/src/components/ui/ScrollDown.tsx
@@ -13,7 +13,7 @@ export function ScrollDown() {
  return (
    <button
      onClick={scrollToNext}
-      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 text-2xl font-medium text-white lg:text-3xl animate-blink"
+      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 rounded-full bg-black/20 p-2 text-2xl font-medium text-white backdrop-blur-sm lg:text-3xl animate-blink"
    >
      <span>scroll</span>
      <ChevronDoubleDownIcon className="h-6 w-6" />
--- a/src/components/ui/ScrollUp.tsx
+++ b/src/components/ui/ScrollUp.tsx
@@ -13,7 +13,7 @@ export function ScrollUp() {
  return (
    <button
      onClick={scrollToTop}
-      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 text-2xl font-medium text-[#1c1c49] lg:text-3xl animate-blink"
+      className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 rounded-full bg-white/20 p-2 text-2xl font-medium text-[#1c1c49] backdrop-blur-sm lg:text-3xl animate-blink"
    >
      <span>top</span>
      <ChevronDoubleUpIcon className="h-6 w-6" />
--- a/src/components/ui/aurora-background.tsx
+++ b/src/components/ui/aurora-background.tsx
@@ -0,0 +1,64 @@
+"use client";
+import { cn } from "@/lib/utils";
+import React, { ReactNode } from "react";
+
+interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+  showRadialGradient?: boolean;
+}
+
+export const AuroraBackground = ({
+  className,
+  children,
+  showRadialGradient = true,
+  ...props
+}: AuroraBackgroundProps) => {
+  return (
+    <main>
+      <div
+                className={cn(
+          "transition-bg relative flex h-[110vh] flex-col items-center justify-center bg-cover bg-center",
+          className
+        )}
+        style={{
+          backgroundImage: "url('/images/mchip.webp')",
+        }}
+        {...props}
+      >
+        <div
+          className="absolute inset-0 overflow-hidden"
+          style={
+            {
+              "--aurora":
+                "repeating-linear-gradient(100deg,#3b82f6_10%,#a5b4fc_15%,#93c5fd_20%,#ddd6fe_25%,#60a5fa_30%)",
+              "--dark-gradient":
+                "repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
+              "--white-gradient":
+                "repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",
+
+              "--blue-300": "#93c5fd",
+              "--blue-400": "#60a5fa",
+              "--blue-500": "#3b82f6",
+              "--indigo-300": "#a5b4fc",
+              "--violet-200": "#ddd6fe",
+              "--black": "#000",
+              "--white": "#fff",
+              "--transparent": "transparent",
+            } as React.CSSProperties
+          }
+        >
+          <div
+            //   I'm sorry but this is what peak developer performance looks like // trigger warning
+            className={cn(
+              `after:animate-aurora pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
+
+              showRadialGradient &&
+                `[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
+            )}
+          ></div>
+        </div>
+        {children}
+      </div>
+    </main>
+  );
+};
--- a/src/components/ui/floating-navbar.tsx
+++ b/src/components/ui/floating-navbar.tsx
@@ -0,0 +1,90 @@
+"use client";
+import { useState } from "react";
+import {
+  motion,
+  AnimatePresence,
+  useScroll,
+  useMotionValueEvent,
+} from "motion/react";
+import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
+import { Button } from "../Button";
+
+
+export const FloatingNav = ({
+  navItems,
+  className,
+}: {
+  navItems: {
+    name: string;
+    link: string;
+    icon?: JSX.Element;
+  }[];
+  className?: string;
+}) => {
+  const { scrollYProgress } = useScroll();
+
+  const [visible, setVisible] = useState(true);
+
+  useMotionValueEvent(scrollYProgress, "change", (current) => {
+    if (typeof current === "number") {
+      const previous = scrollYProgress.getPrevious();
+      // Check if previous is a number to avoid errors
+      if (typeof previous === "number" && current > previous) {
+        setVisible(false); // Scrolling down
+      } else {
+        setVisible(true); // Scrolling up or at the top
+      }
+    }
+  });
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial={{
+          opacity: 1,
+          y: -100,
+        }}
+        animate={{
+          y: visible ? 0 : -100,
+          opacity: visible ? 1 : 0,
+        }}
+        transition={{
+          duration: 0.2,
+        }}
+        className={cn(
+          "flex max-w-fit  fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-xl dark:bg-black bg-gray-700/50 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] z-[5000] pr-4 pl-8 py-2  items-center justify-center space-x-12",
+          className
+        )}
+      >
+        {navItems.map((navItem, idx: number) => (
+          <Link
+            key={`link=${idx}`}
+            to={navItem.link}
+            className={cn(
+              "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-200 dark:hover:text-neutral-300 hover:text-cyan-500"
+            )}
+          >
+            <span className="block sm:hidden">{navItem.icon}</span>
+            <span className="hidden sm:block text-sm">{navItem.name}</span>
+          </Link>
+        ))}
+        <div className="flex items-center gap-6">
+          <a
+            href="https://threefold.info/mycelium_network/docs/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-200 dark:hover:text-neutral-300 hover:text-cyan-500"
+            )}
+          >
+            <span className="hidden sm:block text-sm">Docs</span>
+          </a>
+          <Button to="/download" variant="solid" color="cyan">
+            Get Mycelium
+          </Button>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
--- a/src/components/ui/lamp.tsx
+++ b/src/components/ui/lamp.tsx
@@ -0,0 +1,104 @@
+"use client";
+import React from "react";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export default function LampDemo() {
+  return (
+    <LampContainer>
+      <motion.h1
+        initial={{ opacity: 0.5, y: 100 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{
+          delay: 0.3,
+          duration: 0.8,
+          ease: "easeInOut",
+        }}
+        className="mt-8 bg-gradient-to-br from-gray-300 to-gray-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
+      >
+        Build lamps <br /> the right way
+      </motion.h1>
+    </LampContainer>
+  );
+}
+
+export const LampContainer = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "relative flex h-screen flex-col items-center justify-start pt-32 overflow-hidden bg-gray-950 w-full z-0",
+        className
+      )}
+    >
+      <div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 ">
+        <motion.div
+          initial={{ opacity: 0.5, width: "15rem" }}
+          whileInView={{ opacity: 1, width: "30rem" }}
+          transition={{
+            delay: 0.5,
+            duration: 1.0,
+            ease: "easeInOut",
+          }}
+          style={{
+            backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
+          }}
+          className="absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-cyan-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
+        >
+          <div className="absolute  w-[100%] left-0 bg-gray-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
+          <div className="absolute  w-40 h-[100%] left-0 bg-gray-950  bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0.5, width: "15rem" }}
+          whileInView={{ opacity: 1, width: "30rem" }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          style={{
+            backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
+          }}
+          className="absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-cyan-500 text-white [--conic-position:from_290deg_at_center_top]"
+        >
+          <div className="absolute  w-40 h-[100%] right-0 bg-gray-950  bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
+          <div className="absolute  w-[100%] right-0 bg-gray-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
+        </motion.div>
+        <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-gray-950 blur-2xl"></div>
+        <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
+        <div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl"></div>
+        <motion.div
+          initial={{ width: "8rem" }}
+          whileInView={{ width: "16rem" }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-cyan-400 blur-2xl"
+        ></motion.div>
+        <motion.div
+          initial={{ width: "15rem" }}
+          whileInView={{ width: "30rem" }}
+          transition={{
+            delay: 0.3,
+            duration: 0.8,
+            ease: "easeInOut",
+          }}
+          className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-cyan-400 "
+        ></motion.div>
+
+        <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-gray-950 "></div>
+      </div>
+
+      <div className="relative z-50 flex -translate-y-32 flex-col items-center px-5">
+        {children}
+      </div>
+    </div>
+  );
+};
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Neuton&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap');
+
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Mulish', system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"

 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { motion } from "motion/react";
+import { H1, H2, H3, H4, H5 } from "@/components/Texts";
+import { AuroraBackground } from "@/components/ui/aurora-background";
+import { ScrollDownArrow } from '@/components/ScrollDownArrow';
+
+export function HomeAurora() {
+  return (
+    <AuroraBackground>
+      <motion.div
+        initial={{ opacity: 0.0, y: 40 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{
+          delay: 0.5,
+          duration: 1,
+          ease: "easeInOut",
+        }}
+        className="relative mb-20 -top-5 flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
+      >
+        <div className="text-center text-gray-800">
+          <H1>Decentralized Autonomous <span className="font-neuton text-bold lg:text-8xl italic">Agentic Cloud.</span></H1>
+        </div>
+        <div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
+          <H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
+        </div>
+        <div className="pt-8">
+          <ScrollDownArrow />
+        </div>
+       
+      </motion.div>
+    </AuroraBackground>
+  );
+}
--- a/src/pages/home/HomeHeroDark.tsx
+++ b/src/pages/home/HomeHeroDark.tsx
@@ -0,0 +1,35 @@
+"use client";
+import React from "react";
+import { motion } from "motion/react";
+import { LampContainer } from "@/components/ui/lamp";
+
+export function HomeHeroDark() {
+  return (
+    <LampContainer>
+      <motion.h1
+        initial={{ opacity: 0.5, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{
+          delay: 0.3,
+          duration: 0.8,
+          ease: "easeInOut",
+        }}
+        className="bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl max-w-4xl"
+      >
+        Decentralized Autonomous Agentic Cloud.
+      </motion.h1>
+      <motion.p
+        initial={{ opacity: 0.5, y: 60 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{
+          delay: 0.5,
+          duration: 0.8,
+          ease: "easeInOut",
+        }}
+        className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-lg font-medium tracking-tight text-transparent md:text-xl max-w-3xl"
+      >
+        Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.
+      </motion.p>
+    </LampContainer>
+  );
+}
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -3,15 +3,17 @@ import { HomeHero } from './HomeHero'
 import { WorldMapSection } from './WorldMapSection'
 import { StackSection } from './StackSection'
 import { HomeHeroLight2 } from './HomeHeroLight2'
+import { HomeHeroDark } from './HomeHeroDark'
+import { HomeAurora } from './HomeAurora'

 export default function HomePage() {
  return (
    <div>
      <AnimatedSection>
-        <HomeHero />
+        <HomeAurora />
      </AnimatedSection>

-      <AnimatedSection>
+      <AnimatedSection id="next-section">
        <WorldMapSection />
      </AnimatedSection>

--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,4 +1,7 @@
@import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));

@theme {
  --animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
@@ -70,7 +73,10 @@
  --color-gray-900: oklch(0.205 0 0);
  --color-gray-950: oklch(0.145 0 0);

-  --font-sans: var(--font-inter);
+  --font-sans: 'Mulish', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --font-neuton: 'Neuton', serif;
+
+  --font-family-neuton: var(--font-neuton);

  --container-2xl: 40rem;

@@ -91,10 +97,127 @@

@theme inline {
  --animate-marquee: marquee var(--marquee-duration) linear infinite;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);

  @keyframes marquee {
    100% {
      transform: translateY(-50%);
    }
  }
+
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --radius-md: calc(var(--radius) - 2px);
+
+  --radius-lg: var(--radius);
+
+  --radius-xl: calc(var(--radius) + 4px)
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,10 @@
 {
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },