emre/www_projectmycelium_com
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 22:25:54 +02:00
parent ce33e0f7c3
commit af77948679
21 changed files with 645 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components.json Normal file
View File

@@ -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"
}
}

6
index.html
View File

@@ -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." /> <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.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
public/images/mchip.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

3
src/components/AnimatedSection.tsx
View File

@@ -1,12 +1,13 @@
import { useRef } from 'react' import { useRef } from 'react'
import { motion, useInView } from 'framer-motion' 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 ref = useRef(null)
const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' }) const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
return ( return (
<motion.section <motion.section
id={id}
ref={ref} ref={ref}
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
animate={{ animate={{

4
src/components/Button.tsx
View File

@@ -3,9 +3,9 @@ import clsx from 'clsx'
const baseStyles = { const baseStyles = {
solid: 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: 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 = { const variantStyles = {

143
src/components/Header.tsx
View File

@@ -1,44 +1,67 @@
'use client'
import { useEffect, useRef, useState } from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Container } from './Container' import { AnimatePresence, motion } from 'framer-motion'
import clsx from 'clsx'
import { Button } from './Button' import { Button } from './Button'
export function Header() {
function NavLinks() {
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
let timeoutRef = useRef<number | null>(null)
return ( return (
<header> <div className="flex items-center gap-x-5">
<nav> <Link to="/" aria-label="Home">
<Container className="relative z-50 flex justify-between py-8"> <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
<div className="relative z-10 flex items-center gap-16"> </Link>
<Link to="/" aria-label="Home"> <div className="flex items-center gap-x-5 border-l border-white/10 pl-5">
<img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" /> {[
</Link> ['Home', '/'],
<div className="hidden lg:flex lg:gap-10"> ['Cloud', '/cloud'],
<Link ['Network', '/network'],
to="/" ['Agents', '/agents'],
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors" ].map(([label, href], index) => (
> <Link
Home key={label}
</Link> to={href}
<Link className={clsx(
to="/cloud" 'relative rounded-lg px-3 py-2 text-sm text-black transition-colors delay-150 hover:text-cyan-500 hover:delay-0',
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors" )}
> onMouseEnter={() => {
Cloud if (timeoutRef.current) {
</Link> window.clearTimeout(timeoutRef.current)
<Link }
to="/network" setHoveredIndex(index)
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors" }}
> onMouseLeave={() => {
Network timeoutRef.current = window.setTimeout(() => {
</Link> setHoveredIndex(null)
<Link }, 200)
to="/agents" }}
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors" >
> <AnimatePresence>
Agents {hoveredIndex === index && (
</Link> <motion.span
</div> className="absolute inset-0 rounded-lg bg-white/10"
</div> layoutId="hoverBackground"
<div className="flex items-center gap-6"> 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"> <div className="flex items-center gap-6 max-lg:hidden">
<Button <Button
to="https://threefold.info/mycelium_network/docs/" to="https://threefold.info/mycelium_network/docs/"
@@ -54,8 +77,48 @@ export function Header() {
</Button> </Button>
</div> </div>
</div> </div>
</Container> </div>
</nav> )
</header> }
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>
) )
} }

10
src/components/Layout.tsx
View File

@@ -1,8 +1,16 @@
import { Outlet } from 'react-router-dom' import { Outlet } from 'react-router-dom'
import { Header } from './Header' import { FloatingNav } from './ui/floating-navbar'
import { Footer } from './Footer' import { Footer } from './Footer'
import { Header } from './Header'
export function Layout() { export function Layout() {
const navItems = [
{ name: 'Home', link: '/' },
{ name: 'Cloud', link: '/cloud' },
{ name: 'Network', link: '/network' },
{ name: 'Agents', link: '/agents' },
];
return ( return (
<div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}> <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
<Header /> <Header />

22
src/components/ScrollDownArrow.tsx Normal file
View File

@@ -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>
)
}

16
src/components/Texts.tsx
View File

@@ -3,6 +3,11 @@
import React from 'react' import React from 'react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const fontVariants = {
sans: 'font-sans',
neuton: 'font-neuton',
} as const
const colorVariants = { const colorVariants = {
primary: 'text-gray-900', primary: 'text-gray-900',
secondary: 'text-gray-600', secondary: 'text-gray-600',
@@ -15,6 +20,7 @@ const colorVariants = {
} as const } as const
type TextOwnProps = { type TextOwnProps = {
font?: keyof typeof fontVariants
color?: keyof typeof colorVariants color?: keyof typeof colorVariants
className?: string className?: string
} }
@@ -34,6 +40,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
> >
function Text<E extends React.ElementType = DefaultElement>({ function Text<E extends React.ElementType = DefaultElement>({
font = 'sans',
as, as,
color = 'primary', color = 'primary',
className, className,
@@ -43,7 +50,12 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
const Tag = (as || defaultElement) as React.ElementType const Tag = (as || defaultElement) as React.ElementType
return ( return (
<Tag <Tag
className={cn(defaultClassName, colorVariants[color], className)} className={cn(
defaultClassName,
fontVariants[font],
colorVariants[color],
className
)}
{...props} {...props}
> >
{children} {children}
@@ -87,7 +99,7 @@ export const Subtle = createTextComponent(
) )
export const H5 = createTextComponent( export const H5 = createTextComponent(
'h5', '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( export const Eyebrow = createTextComponent(
'h2', 'h2',

2
src/components/ui/ScrollDown.tsx
View File

@@ -13,7 +13,7 @@ export function ScrollDown() {
return ( return (
<button <button
onClick={scrollToNext} 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> <span>scroll</span>
<ChevronDoubleDownIcon className="h-6 w-6" /> <ChevronDoubleDownIcon className="h-6 w-6" />

2
src/components/ui/ScrollUp.tsx
View File

@@ -13,7 +13,7 @@ export function ScrollUp() {
return ( return (
<button <button
onClick={scrollToTop} 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> <span>top</span>
<ChevronDoubleUpIcon className="h-6 w-6" /> <ChevronDoubleUpIcon className="h-6 w-6" />

64
src/components/ui/aurora-background.tsx Normal file
View File

@@ -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>
);
};

90
src/components/ui/floating-navbar.tsx Normal file
View File

@@ -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>
);
};

104
src/components/ui/lamp.tsx Normal file
View File

@@ -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>
);
};

5
src/index.css
View File

@@ -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 { :root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: 'Mulish', system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;

4
src/lib/utils.ts
View File

@@ -1,5 +1,5 @@
import { type ClassValue, clsx } from 'clsx' import { clsx, type ClassValue } from "clsx"
import { twMerge } from 'tailwind-merge' import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs))

34
src/pages/home/HomeAurora.tsx Normal file
View File

@@ -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>
);
}

35
src/pages/home/HomeHeroDark.tsx Normal file
View File

@@ -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>
);
}

6
src/pages/home/HomePage.tsx
View File

@@ -3,15 +3,17 @@ import { HomeHero } from './HomeHero'
import { WorldMapSection } from './WorldMapSection' import { WorldMapSection } from './WorldMapSection'
import { StackSection } from './StackSection' import { StackSection } from './StackSection'
import { HomeHeroLight2 } from './HomeHeroLight2' import { HomeHeroLight2 } from './HomeHeroLight2'
import { HomeHeroDark } from './HomeHeroDark'
import { HomeAurora } from './HomeAurora'
export default function HomePage() { export default function HomePage() {
return ( return (
<div> <div>
<AnimatedSection> <AnimatedSection>
<HomeHero /> <HomeAurora />
</AnimatedSection> </AnimatedSection>
<AnimatedSection> <AnimatedSection id="next-section">
<WorldMapSection /> <WorldMapSection />
</AnimatedSection> </AnimatedSection>

125
src/styles/tailwind.css
View File

@@ -1,4 +1,7 @@
@import 'tailwindcss'; @import 'tailwindcss';
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme { @theme {
--animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite; --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-900: oklch(0.205 0 0);
--color-gray-950: oklch(0.145 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; --container-2xl: 40rem;
@@ -91,10 +97,127 @@
@theme inline { @theme inline {
--animate-marquee: marquee var(--marquee-duration) linear infinite; --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 { @keyframes marquee {
100% { 100% {
transform: translateY(-50%); 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;
}
} }

6
tsconfig.json
View File

@@ -1,4 +1,10 @@
{ {
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"files": [], "files": [],
"references": [ "references": [
{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.app.json" },