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 0000000..3e61f57 Binary files /dev/null and b/public/images/mchip.webp differ diff --git a/src/components/AnimatedSection.tsx b/src/components/AnimatedSection.tsx index 4260d83..067e5c4 100644 --- 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 ( (null) + 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" },