From af779486795434915535f5a927df00b756c93645 Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Wed, 22 Oct 2025 22:25:54 +0200 Subject: [PATCH] feat: implement floating navbar with aurora background and updated header styling --- components.json | 24 ++++ index.html | 6 - public/images/mchip.webp | Bin 0 -> 11580 bytes src/components/AnimatedSection.tsx | 3 +- src/components/Button.tsx | 4 +- src/components/Header.tsx | 143 +++++++++++++++++------- src/components/Layout.tsx | 10 +- src/components/ScrollDownArrow.tsx | 22 ++++ src/components/Texts.tsx | 16 ++- src/components/ui/ScrollDown.tsx | 2 +- src/components/ui/ScrollUp.tsx | 2 +- src/components/ui/aurora-background.tsx | 64 +++++++++++ src/components/ui/floating-navbar.tsx | 90 +++++++++++++++ src/components/ui/lamp.tsx | 104 +++++++++++++++++ src/index.css | 5 +- src/lib/utils.ts | 4 +- src/pages/home/HomeAurora.tsx | 34 ++++++ src/pages/home/HomeHeroDark.tsx | 35 ++++++ src/pages/home/HomePage.tsx | 6 +- src/styles/tailwind.css | 125 ++++++++++++++++++++- tsconfig.json | 6 + 21 files changed, 645 insertions(+), 60 deletions(-) create mode 100644 components.json create mode 100644 public/images/mchip.webp create mode 100644 src/components/ScrollDownArrow.tsx create mode 100644 src/components/ui/aurora-background.tsx create mode 100644 src/components/ui/floating-navbar.tsx create mode 100644 src/components/ui/lamp.tsx create mode 100644 src/pages/home/HomeAurora.tsx create mode 100644 src/pages/home/HomeHeroDark.tsx diff --git a/components.json b/components.json new file mode 100644 index 0000000..9c80347 --- /dev/null +++ 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" + } +} diff --git a/index.html b/index.html index c5c7663..c4f5e7c 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,6 @@ - -
diff --git a/public/images/mchip.webp b/public/images/mchip.webp new file mode 100644 index 0000000000000000000000000000000000000000..3e61f57cecb4c16bf9f9bae4ce7631688569147a GIT binary patch literal 11580 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 + let timeoutRef = useRef(null) + + return ( -
- -
+ + ) +} + + +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 ( + +
+ +
+ ) } diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 3c4f5b7..334f71e 100644 --- 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 (
diff --git a/src/components/ScrollDownArrow.tsx b/src/components/ScrollDownArrow.tsx new file mode 100644 index 0000000..7ea2ac2 --- /dev/null +++ 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 ( + + ) +} diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx index 63fa1b6..2b15ad6 100644 --- 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 = ( > function Text({ + font = 'sans', as, color = 'primary', className, @@ -43,7 +50,12 @@ const createTextComponent = ( const Tag = (as || defaultElement) as React.ElementType return ( {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', diff --git a/src/components/ui/ScrollDown.tsx b/src/components/ui/ScrollDown.tsx index 567bc28..4c587de 100644 --- a/src/components/ui/ScrollDown.tsx +++ b/src/components/ui/ScrollDown.tsx @@ -13,7 +13,7 @@ export function ScrollDown() { return ( +
+ + + ); +}; diff --git a/src/components/ui/lamp.tsx b/src/components/ui/lamp.tsx new file mode 100644 index 0000000..6e4af89 --- /dev/null +++ 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 ( + + + Build lamps
the right way + + + ); +} + +export const LampContainer = ({ + children, + className, +}: { + children: React.ReactNode; + className?: string; +}) => { + return ( +
+
+ +
+
+ + +
+
+ +
+
+
+ + + +
+
+ +
+ {children} +
+
+ ); +}; diff --git a/src/index.css b/src/index.css index 08a3ac9..2701640 100644 --- 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; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index d32b0fe..bd0c391 100644 --- 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)) diff --git a/src/pages/home/HomeAurora.tsx b/src/pages/home/HomeAurora.tsx new file mode 100644 index 0000000..f40186e --- /dev/null +++ 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 ( + + +
+

Decentralized Autonomous Agentic Cloud.

+
+
+
Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.
+
+
+ +
+ + + + ); +} diff --git a/src/pages/home/HomeHeroDark.tsx b/src/pages/home/HomeHeroDark.tsx new file mode 100644 index 0000000..7e21245 --- /dev/null +++ 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 ( + + + Decentralized Autonomous Agentic Cloud. + + + Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration. + + + ); +} diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index ce849e8..3f97d8f 100644 --- 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 (
- + - + diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 75f15d2..9dde88e 100644 --- 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; + } } diff --git a/tsconfig.json b/tsconfig.json index 1ffef60..0b6f721 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,10 @@ { + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, "files": [], "references": [ { "path": "./tsconfig.app.json" },