ourworld_web/www_project_mycelium
22
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ourworld_web:db4c2d8ea0ff41cc04f42583656ddca5aa8460d1
Branches Tags
ourworld_web:main ourworld_web:development_new ourworld_web:development
...
compare: ourworld_web:development_new
Branches Tags
ourworld_web:development_new ourworld_web:development ourworld_web:main

5 Commits
db4c2d8ea0 ... developmen

Author SHA1 Message Date
sasha-astiadi
76e0bdb7be style: update border colors from gray-200 to gray-300 and standardize cyan color usage 2025-10-22 15:47:52 +02:00
sasha-astiadi
85c041ab49 style: update feature card styling with cyan hover effects and consistent padding 2025-10-22 15:47:41 +02:00
sasha-astiadi
0231c4835c style: update stat cards with consistent hover effects and modern styling 2025-10-22 15:35:35 +02:00
sasha-astiadi
4efc563aa9 feat: add Eyebrow component to section headers across landing page components 2025-10-22 15:27:47 +02:00
sasha-astiadi
d70c2b6874 chore: switch from Mulish to Inter font family 2025-10-22 15:18:39 +02:00
26 changed files with 184 additions and 91 deletions
Expand all files Collapse all files

1
src/app/(main)/layout.tsx
View File

@@ -1 +0,0 @@
export { Layout as default } from '@/components/Layout'

8
src/app/layout.tsx
View File

@@ -1,14 +1,14 @@
import { type Metadata } from 'next' import { type Metadata } from 'next'
import Script from 'next/script' import Script from 'next/script'
import { Mulish } from 'next/font/google' import { Inter } from 'next/font/google'
import clsx from 'clsx' import clsx from 'clsx'
import '@/styles/tailwind.css' import '@/styles/tailwind.css'
const mulish = Mulish({ const inter = Inter({
subsets: ['latin'], subsets: ['latin'],
display: 'swap', display: 'swap',
variable: '--font-mulish', variable: '--font-inter',
}) })
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -26,7 +26,7 @@ export default function RootLayout({
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return (
<html lang="en" className={clsx('antialiased', mulish.variable)}> <html lang="en" className={clsx('antialiased', inter.variable)}>
<head> <head>
{/* MailerLite Universal */} {/* MailerLite Universal */}
<Script id="mailerlite-universal" strategy="afterInteractive"> <Script id="mailerlite-universal" strategy="afterInteractive">

2
src/components/Archives/Steps copy.tsx
View File

@@ -57,7 +57,7 @@ export function Steps() {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }} transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700" className="rounded-2xl border border-gray-300 p-8 dark:border-gray-700"
> >
<feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" /> <feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" />
<CT as="span" className="font-semibold">{feature.name}</CT> <CT as="span" className="font-semibold">{feature.name}</CT>

5
src/components/BentoReviews.tsx
View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { H2, P } from "@/components/Texts"; import { SectionHeader, P, Eyebrow } from "@/components/Texts";
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { BentoGrid, MotionBentoGridItem } from "@/components/ui/bento-grid"; import { BentoGrid, MotionBentoGridItem } from "@/components/ui/bento-grid";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
@@ -95,7 +95,8 @@ export function BentoReviews() {
<div className="relative isolate py-24 bg-black text-center w-full lg:px-0 px-4"> <div className="relative isolate py-24 bg-black text-center w-full lg:px-0 px-4">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}> <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<div className="mx-auto max-w-5xl "> <div className="mx-auto max-w-5xl ">
<H2 className="text-center">Augmented Intelligence Fabric</H2> <Eyebrow color="accent">Components</Eyebrow>
<SectionHeader className="text-center">Augmented Intelligence Fabric</SectionHeader>
</div> </div>
</FadeIn> </FadeIn>
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}> <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>

2
src/components/Button.tsx
View File

@@ -10,7 +10,7 @@ const baseStyles = {
const variantStyles = { const variantStyles = {
solid: { solid: {
cyan: 'relative overflow-hidden bg-[#005eff] text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-[#005eff] active:text-white/80 before:transition-colors', cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
white: white:
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70', 'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80', gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',

10
src/components/CallTo.tsx
View File

@@ -1,16 +1,16 @@
"use client" "use client"
import { H2, P } from '@/components/Texts' import { SectionHeader, P } from '@/components/Texts'
export function CallTo() { export function CallTo() {
return ( return (
<div className="relative isolate overflow-hidden max-w-5xl mx-auto py-24"> <div className="relative isolate overflow-hidden max-w-5xl mx-auto py-24">
<div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-200"> <div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-300">
<div className="mx-auto max-w-4xl text-center"> <div className="mx-auto max-w-4xl text-center">
<H2 color="primary"> <SectionHeader color="primary">
Are you Ready? Are you Ready?
</H2> </SectionHeader>
<P color="custom" className="mt-8 max-w-3xl"> <P className="mt-8 max-w-3xl">
Why hand out your intelligence to centralized giants when you can build your own? Why hand out your intelligence to centralized giants when you can build your own?
</P> </P>
<div className="mt-10 flex items-center justify-center gap-x-6"> <div className="mt-10 flex items-center justify-center gap-x-6">

2
src/components/CallToAction.tsx
View File

@@ -4,6 +4,7 @@ import { CircleBackground } from '@/components/CircleBackground'
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
import { Button } from '@/components/Button' import { Button } from '@/components/Button'
import { FadeIn } from '@/components/FadeIn' import { FadeIn } from '@/components/FadeIn'
import { Eyebrow } from '@/components/Texts'
export function CallToAction() { export function CallToAction() {
return ( return (
@@ -27,6 +28,7 @@ export function CallToAction() {
<Container className="relative z-20"> <Container className="relative z-20">
<FadeIn> <FadeIn>
<div className="mx-auto max-w-md text-center"> <div className="mx-auto max-w-md text-center">
<Eyebrow color="accent"></Eyebrow>
<h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl"> <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
Decentralized AI Agents that are Truly Yours Decentralized AI Agents that are Truly Yours
</h2> </h2>

4
src/components/ClickableGallery.tsx
View File

@@ -6,7 +6,7 @@ import Image from 'next/image'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { wrap } from 'popmotion' import { wrap } from 'popmotion'
import { Button } from '@/components/Button'; import { Button } from '@/components/Button';
import { H2, P, CT } from '@/components/Texts'; import { SectionHeader, P, CT } from '@/components/Texts';
import { TypeAnimation } from 'react-type-animation' import { TypeAnimation } from 'react-type-animation'
import { FadeIn } from './FadeIn'; import { FadeIn } from './FadeIn';
@@ -53,7 +53,7 @@ export function ClickableGallery() {
<div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full"> <div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}> <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<div className="mx-auto max-w-5xl lg:mt-12"> <div className="mx-auto max-w-5xl lg:mt-12">
<H2 className="text-center">Agents with Endless Possibilities.</H2> <SectionHeader className="text-center">Agents with Endless Possibilities.</SectionHeader>
</div> </div>
</FadeIn> </FadeIn>
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}> <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>

7
src/components/ClickableGalleryLight.tsx
View File

@@ -6,7 +6,7 @@ import Image from 'next/image'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { wrap } from 'popmotion' import { wrap } from 'popmotion'
import { Button } from '@/components/Button'; import { Button } from '@/components/Button';
import { H2, P, CT } from '@/components/Texts'; import { SectionHeader, P, CT, Eyebrow } from '@/components/Texts';
import { TypeAnimation } from 'react-type-animation' import { TypeAnimation } from 'react-type-animation'
import { FadeIn } from './FadeIn'; import { FadeIn } from './FadeIn';
@@ -49,11 +49,12 @@ export function ClickableGalleryLight() {
const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1)) const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
return ( return (
<div className="bg-white"> <div className="bg-[#FAFAFA]">
<div className="relative isolate pt-8 pb-0 text-center w-full"> <div className="relative isolate pt-8 pb-0 text-center w-full">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}> <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<div className="mx-auto max-w-5xl lg:mt-12"> <div className="mx-auto max-w-5xl lg:mt-12">
<H2 className="text-center" color="dark">Agents with Endless Possibilities.</H2> <Eyebrow color="accent">Use Cases</Eyebrow>
<SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
</div> </div>
</FadeIn> </FadeIn>
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}> <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>

3
src/components/Companies.tsx
View File

@@ -2,7 +2,7 @@
import React from "react"; import React from "react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { H2, P } from '@/components/Texts'; import { P, Eyebrow } from '@/components/Texts';
import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards"; import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
@@ -50,6 +50,7 @@ export function Companies() {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }} transition={{ duration: 1 }}
> >
<Eyebrow color="accent"></Eyebrow>
<P className="hidden min-xl:text-gray-100 text-center mb-6"> <P className="hidden min-xl:text-gray-100 text-center mb-6">
Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure. Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
</P> </P>

8
src/components/CountUpNumber.tsx
View File

@@ -1,18 +1,18 @@
'use client' 'use client'
import CountUp from 'react-countup' import CountUp from 'react-countup'
import { H2 } from './Texts' import { SectionHeader } from './Texts'
interface CountUpNumberProps { interface CountUpNumberProps {
end: number end: number
className?: string className?: string
color?: 'light' | 'primary' | 'secondary' | 'custom' color?: 'light' | 'primary' | 'secondary'
} }
export function CountUpNumber({ end, className, color }: CountUpNumberProps) { export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
return ( return (
<H2 color={color} className={className}> <SectionHeader color={color} className={className}>
<CountUp end={end} duration={2.75} separator="," /> <CountUp end={end} duration={2.75} separator="," />
</H2> </SectionHeader>
) )
} }

2
src/components/Faqs.tsx
View File

@@ -62,7 +62,7 @@ export function Faqs() {
id="faqs" id="faqs"
ref={ref} ref={ref}
aria-labelledby="faqs-title" aria-labelledby="faqs-title"
className="border-t border-gray-200 py-20 sm:py-32 relative overflow-hidden" className="border-t border-gray-300 py-20 sm:py-32 relative overflow-hidden"
> >
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}

2
src/components/Fields.tsx
View File

@@ -3,7 +3,7 @@ import clsx from 'clsx'
const formClasses = { const formClasses = {
light: light:
'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm', 'block w-full appearance-none rounded-lg border border-gray-300 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
dark: dark:
'block w-full appearance-none rounded-lg border border-gray-600 bg-transparent py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-white placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm', 'block w-full appearance-none rounded-lg border border-gray-600 bg-transparent py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-white placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
} }

4
src/components/GetStarted.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { H2, P, CP } from "@/components/Texts"; import { SectionHeader, P, CP } from "@/components/Texts";
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
export function GetStarted() { export function GetStarted() {
@@ -36,7 +36,7 @@ export function GetStarted() {
}} }}
> >
<div className="max-w-8xl mx-auto px-4 text-left mb-12"> <div className="max-w-8xl mx-auto px-4 text-left mb-12">
<H2>Get Started</H2> <SectionHeader>Get Started</SectionHeader>
<P>Explore the documentation, code, and support channels to start building with Mycelium Cloud.</P> <P>Explore the documentation, code, and support channels to start building with Mycelium Cloud.</P>
</div> </div>

6
src/components/GridStats.tsx
View File

@@ -3,7 +3,7 @@
import CountUp from "react-countup"; import CountUp from "react-countup";
import React from "react"; import React from "react";
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
import { H2, P } from "@/components/Texts"; import { SectionHeader, P } from "@/components/Texts";
export function GridStats() { export function GridStats() {
return ( return (
@@ -21,9 +21,9 @@ export function GridStats() {
{/* Column 1: Title & Description */} {/* Column 1: Title & Description */}
<div className="flex flex-col space-y-10"> <div className="flex flex-col space-y-10">
<div> <div>
<H2 color="light"> <SectionHeader color="light">
Robust Infrastructure for your Intellegence Needs Robust Infrastructure for your Intellegence Needs
</H2> </SectionHeader>
<P color="light" className="mt-6"> <P color="light" className="mt-6">
Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads. Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
</P> </P>

2
src/components/Header.tsx
View File

@@ -72,7 +72,7 @@ export function Header() {
{({ open }) => ( {({ open }) => (
<> <>
<PopoverButton <PopoverButton
className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-200/50 hover:stroke-gray-400 focus:not-data-focus:outline-hidden active:stroke-white" className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-300/50 hover:stroke-gray-400 focus:not-data-focus:outline-hidden active:stroke-white"
aria-label="Toggle site navigation" aria-label="Toggle site navigation"
> >
{({ open }) => {({ open }) =>

8
src/components/HomeAbout.tsx
View File

@@ -8,7 +8,7 @@ import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24
import Image from 'next/image' import Image from 'next/image'
import diamondSvg from '@/images/diamond.svg' import diamondSvg from '@/images/diamond.svg'
import { Container } from '@/components/Container'; import { Container } from '@/components/Container';
import { H2, P, H3 } from '@/components/Texts'; import { SectionHeader, P, H3 } from '@/components/Texts';
import { Candy } from '@/components/Candy' import { Candy } from '@/components/Candy'
const navigation = [ const navigation = [
@@ -65,10 +65,10 @@ export function HomeAbout() {
transition={{ duration: 1, delay: 0.2 }} transition={{ duration: 1, delay: 0.2 }}
className="absolute top-24 left-0 max-w-xl text-left" className="absolute top-24 left-0 max-w-xl text-left"
> >
<H2> <SectionHeader>
Enterprise AI Agents Enterprise AI Agents
That Never Sleep. That Never Sleep.
</H2> </SectionHeader>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -76,7 +76,7 @@ export function HomeAbout() {
transition={{ duration: 1, delay: 0.4 }} transition={{ duration: 1, delay: 0.4 }}
className="absolute top-54 left-0 max-w-xl text-left" className="absolute top-54 left-0 max-w-xl text-left"
> >
<P color="custom"> <P>
With Mycelium Cloud, you can deploy purpose-built AI agents to automate any workflow. Keep complete control of your data while scaling from simple tasks to complex decision-making. With Mycelium Cloud, you can deploy purpose-built AI agents to automate any workflow. Keep complete control of your data while scaling from simple tasks to complex decision-making.
</P> </P>
</motion.div> </motion.div>

6
src/components/HomeHero.tsx
View File

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion'
import { TypeAnimation } from 'react-type-animation' import { TypeAnimation } from 'react-type-animation'
import { Dialog, DialogPanel } from '@headlessui/react' import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline' import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
import { H1, H2, PL } from '@/components/Texts' import { H1, H2, P } from '@/components/Texts'
const navigation = [ const navigation = [
{ name: 'Product', href: '#' }, { name: 'Product', href: '#' },
@@ -54,9 +54,9 @@ export function HomeHero() {
transition={{ duration: 1, delay: 1 }} transition={{ duration: 1, delay: 1 }}
className="mt-12" className="mt-12"
> >
<PL className="mx-auto max-w-4xl text-center text-gray-100" color="light"> <P className="mx-auto max-w-4xl text-center " color="secondary">
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you. Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
</PL> </P>
</motion.div> </motion.div>
</div> </div>
</div> </div>

14
src/components/HomeHeroLight2.tsx
View File

@@ -1,6 +1,7 @@
'use client' 'use client'
import { useRef, useEffect } from 'react' import { useRef, useEffect } from 'react'
import { H1, H2, P, H5, Eyebrow } from '@/components/Texts'
export function HomeHeroLight2() { export function HomeHeroLight2() {
const videoRef = useRef<HTMLVideoElement>(null) const videoRef = useRef<HTMLVideoElement>(null)
@@ -37,20 +38,21 @@ export function HomeHeroLight2() {
{/* Content */} {/* Content */}
<div className="relative z-10 h-full flex items-center justify-center"> <div className="relative z-10 h-full flex items-center justify-center">
<div className="mx-auto max-w-4xl text-center px-6 lg:px-8"> <div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
<h1 <Eyebrow color="accent"></Eyebrow>
className="pt-6 text-5xl sm:text-7xl font-semibold tracking-tight leading-tight text-gray-900" <H1
className="pt-6"
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }} style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
> >
Decentralized Autonomous Agentic Cloud. Decentralized Autonomous Agentic Cloud.
</h1> </H1>
<p <H5
className="mt-8 text-lg sm:text-xl font-medium text-gray-800/90 leading-relaxed" className="mt-8"
style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }} style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
> >
Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and
autonomous Agents that connect, learn, and grow with you. autonomous Agents that connect, learn, and grow with you.
</p> </H5>
</div> </div>
</div> </div>
</section> </section>

9
src/components/StackSectionLight.tsx
View File

@@ -2,7 +2,7 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { StackedCubesLight } from "@/components/ui/StackedCubesLight"; import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
import { H2, P } from "@/components/Texts"; import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
import { FadeIn } from "./FadeIn"; import { FadeIn } from "./FadeIn";
import { DottedGlowBackground } from '@/components/ui/dotted-glow-background'; import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
@@ -10,7 +10,7 @@ export function StackSectionLight() {
return ( return (
<section className="relative w-full overflow-hidden py-24 lg:py-40"> <section className="relative w-full overflow-hidden py-24 lg:py-40">
{/* === Background Layer === */} {/* === Background Layer === */}
<div className="absolute inset-0 -z-10 bg-white"> <div className="absolute inset-0 -z-10 bg-[#FAFAFA]">
{/* Dotted Glow Background */} {/* Dotted Glow Background */}
<DottedGlowBackground <DottedGlowBackground
gap={15} gap={15}
@@ -30,9 +30,10 @@ export function StackSectionLight() {
{/* Left Column - Text */} {/* Left Column - Text */}
<div className="text-center lg:text-left"> <div className="text-center lg:text-left">
<FadeIn> <FadeIn>
<H2 color="dark" className="text-4xl sm:text-5xl font-semibold"> <Eyebrow color="accent">Technology Layers</Eyebrow>
<SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
The Mycelium Stack The Mycelium Stack
</H2> </SectionHeader>
</FadeIn> </FadeIn>
<FadeIn> <FadeIn>

9
src/components/Steps.tsx
View File

@@ -2,7 +2,7 @@
import React, { useRef } from 'react' import React, { useRef } from 'react'
import { motion, useInView } from 'framer-motion' import { motion, useInView } from 'framer-motion'
import { H2, P, CT, CP } from '@/components/Texts' import { SectionHeader, P, CT, CP, Eyebrow } from '@/components/Texts'
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb' import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
const features = [ const features = [
@@ -38,9 +38,10 @@ export function Steps() {
transition={{ duration: 0.8, delay: 0.1 }} transition={{ duration: 0.8, delay: 0.1 }}
className="mx-auto max-w-5xl text-center" className="mx-auto max-w-5xl text-center"
> >
<H2 className="text-3xl font-medium tracking-tight" color="light"> <Eyebrow color="accent">Get Started</Eyebrow>
<SectionHeader className="text-3xl font-medium tracking-tight" color="light">
Deploy Scalable LLMs and AI Agents in Seconds Deploy Scalable LLMs and AI Agents in Seconds
</H2> </SectionHeader>
<P className="mt-6" color="light"> <P className="mt-6" color="light">
Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control. Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
</P> </P>
@@ -57,7 +58,7 @@ export function Steps() {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }} transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
className="rounded-2xl border border-white/20 bg-black/30 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40" className="rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
> >
<feature.icon className="h-8 w-8 mb-4 text-white" /> <feature.icon className="h-8 w-8 mb-4 text-white" />
<CT as="span" className="font-semibold" color="light">{feature.name}</CT> <CT as="span" className="font-semibold" color="light">{feature.name}</CT>

129
src/components/Texts.tsx
View File

@@ -4,11 +4,14 @@ import React from 'react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
const colorVariants = { const colorVariants = {
primary: 'text-[#fffff]', primary: 'text-gray-900',
secondary: 'text-gray-200', secondary: 'text-gray-600',
custom: 'text-[#015eff]', light: 'text-gray-50',
light: '[#fcfcfc]', accent: 'text-cyan-500',
dark: 'text-gray-800', white: 'text-white',
dark: 'text-gray-950',
tertiary: 'text-gray-700',
lightSecondary: 'text-gray-300',
} as const } as const
type TextOwnProps = { type TextOwnProps = {
@@ -16,17 +19,19 @@ type TextOwnProps = {
className?: string className?: string
} }
// Polymorphic helpers (no forwardRef needed) // Polymorphic helpers
type PolymorphicProps<E extends React.ElementType, P> = type PolymorphicProps<E extends React.ElementType, P> = P & {
P & { as?: E } & as?: E
Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'> } & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
const createTextComponent = <DefaultElement extends React.ElementType>( const createTextComponent = <DefaultElement extends React.ElementType>(
defaultElement: DefaultElement, defaultElement: DefaultElement,
defaultClassName: string defaultClassName: string
) => { ) => {
type Props<E extends React.ElementType = DefaultElement> = type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
PolymorphicProps<E, TextOwnProps> E,
TextOwnProps
>
function Text<E extends React.ElementType = DefaultElement>({ function Text<E extends React.ElementType = DefaultElement>({
as, as,
@@ -39,24 +44,106 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
return ( return (
<Tag <Tag
className={cn(defaultClassName, colorVariants[color], className)} className={cn(defaultClassName, colorVariants[color], className)}
{...(props as object)} {...props}
> >
{children} {children}
</Tag> </Tag>
) )
} }
;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'})` ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
})`
return Text return Text
} }
// Exports // Exports based on your tailwind.css and the example
export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl') export const H1 = createTextComponent(
export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl') 'h1',
export const H2 = createTextComponent('h2', 'text-3xl font-medium text-pretty lg:text-4xl') 'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
export const P = createTextComponent('p', 'text-lg font-normal text-pretty leading-snug lg:text-xl lg:leading-normal') )
export const H3 = createTextComponent('h3', 'text-2xl lg:text-3xl font-medium') export const H2 = createTextComponent(
export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-[1.15]') 'h2',
'text-4xl lg:text-6xl font-medium leading-tight tracking-tight'
)
export const H3 = createTextComponent(
'h3',
'text-3xl lg:text-5xl font-medium leading-tight tracking-tight'
)
export const H4 = createTextComponent(
'h4',
'text-2xl lg:text-4xl font-medium leading-snug tracking-tight'
)
export const P = createTextComponent(
'p',
'text-base lg:text-lg leading-relaxed'
)
export const Small = createTextComponent(
'small',
'text-sm font-medium leading-normal tracking-normal'
)
export const Subtle = createTextComponent(
'p',
'text-sm leading-normal tracking-normal text-gray-500'
)
export const H5 = createTextComponent(
'h5',
'text-lg lg:text-xl font-medium leading-snug tracking-tight'
)
export const Eyebrow = createTextComponent(
'h2',
'text-base/7 font-semibold tracking-wide'
)
export const SectionHeader = createTextComponent(
'p',
'text-3xl lg:text-4xl font-medium leading-tight tracking-tight'
)
export const CardEyebrow = createTextComponent(
'h3',
'text-sm/4 font-semibold tracking-wide'
)
export const CardTitle = createTextComponent(
'p',
'text-lg font-medium leading-snug tracking-tight'
)
export const CardDescription = createTextComponent(
'p',
'text-sm/6 leading-normal tracking-normal'
)
export const FeatureTitle = createTextComponent(
'h3',
'text-lg font-semibold leading-snug tracking-tight'
)
export const FeatureDescription = createTextComponent(
'p',
'text-sm leading-normal tracking-normal'
)
export const MobileFeatureTitle = createTextComponent(
'h3',
'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
)
export const SecondaryFeatureTitle = createTextComponent(
'h3',
'text-base font-semibold leading-snug tracking-tight'
)
export const Question = createTextComponent(
'h3',
'text-lg/6 font-semibold tracking-tight'
)
export const Answer = createTextComponent(
'p',
'mt-4 text-sm leading-normal tracking-normal'
)
export const PageHeader = createTextComponent(
'h2',
'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
)
export const DownloadCardTitle = createTextComponent(
'dt',
'text-base/7 font-semibold tracking-wide'
)
export const DownloadCardDescription = createTextComponent(
'dd',
'text-base/7 leading-normal tracking-normal'
)
export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold text-center') export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold text-center')
export const CP = createTextComponent('p', 'text-sm lg:text-base leading-[1.525] font-light') export const CP = createTextComponent('p', 'text-sm lg:text-base leading-[1.525] font-light')
export const NL = createTextComponent('span', 'text-lg font-semibold leading-[1.23]')

6
src/components/UseCases.tsx
View File

@@ -14,7 +14,7 @@ import {
} from '@heroicons/react/24/solid' } from '@heroicons/react/24/solid'
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
import { H2, P, CT, CP } from '@/components/Texts' import { SectionHeader, P, CT, CP } from '@/components/Texts'
import { motion, useInView } from 'framer-motion' import { motion, useInView } from 'framer-motion'
interface Review { interface Review {
@@ -147,9 +147,9 @@ export function UseCases() {
transition={{ duration: 0.8, delay: 0.1 }} transition={{ duration: 0.8, delay: 0.1 }}
className="flex flex-col items-start justify-start pt-10 lg:pr-12" className="flex flex-col items-start justify-start pt-10 lg:pr-12"
> >
<H2 id="usecases-title" color="light" className="text-left"> <SectionHeader id="usecases-title" color="light" className="text-left">
Augmented Intelligence Fabric Augmented Intelligence Fabric
</H2> </SectionHeader>
<P className="mt-4 text-left" color="light"> <P className="mt-4 text-left" color="light">
The sovereign substrate for autonomous AI. The sovereign substrate for autonomous AI.
Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution. Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution.

19
src/components/WorldMap.tsx
View File

@@ -2,7 +2,7 @@
import { Globe } from "@/components/ui/globe" import { Globe } from "@/components/ui/globe"
import { motion } from "framer-motion" import { motion } from "framer-motion"
import { H2, P, CT, CP } from "@/components/Texts" import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
import { CountUpNumber } from './CountUpNumber' import { CountUpNumber } from './CountUpNumber'
export function WorldMap() { export function WorldMap() {
@@ -31,8 +31,9 @@ export function WorldMap() {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="max-w-xl" className="max-w-xl"
> >
<H2 color="light">Mycelium Network is Live.</H2> <Eyebrow color="accent">Network</Eyebrow>
<P className="hidden mt-4 text-base leading-relaxed font-light" color="light"> <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
<P className=" mt-4 text-base leading-relaxed" color="light">
Mycelium Cloud's advancement technology enables anyone to deploy Mycelium Cloud's advancement technology enables anyone to deploy
their own Internet infrastructure, anywhere. their own Internet infrastructure, anywhere.
</P> </P>
@@ -58,8 +59,7 @@ export function WorldMap() {
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.4 }} transition={{ duration: 0.5, delay: 0.4 }}
whileHover={{ scale: 1.05 }} className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
className="lg:absolute lg:top-12 lg:-left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
> >
<CT color="light" className="uppercase tracking-wide">CORES</CT> <CT color="light" className="uppercase tracking-wide">CORES</CT>
<CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" /> <CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
@@ -72,8 +72,7 @@ export function WorldMap() {
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.5 }} transition={{ duration: 0.5, delay: 0.5 }}
whileHover={{ scale: 1.05 }} className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
className="lg:absolute lg:-top-10 lg:right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
> >
<CT color="light" className="uppercase tracking-wide">NODES</CT> <CT color="light" className="uppercase tracking-wide">NODES</CT>
<CountUpNumber end={1493} color="light" className="mt-2 text-3xl font-bold" /> <CountUpNumber end={1493} color="light" className="mt-2 text-3xl font-bold" />
@@ -86,8 +85,7 @@ export function WorldMap() {
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }} transition={{ duration: 0.5, delay: 0.6 }}
whileHover={{ scale: 1.05 }} className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
className="lg:absolute lg:bottom-28 lg:-left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
> >
<CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT> <CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
<CountUpNumber end={5388956} color="light" className="mt-2 text-3xl font-bold" /> <CountUpNumber end={5388956} color="light" className="mt-2 text-3xl font-bold" />
@@ -100,8 +98,7 @@ export function WorldMap() {
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.7 }} transition={{ duration: 0.5, delay: 0.7 }}
whileHover={{ scale: 1.05 }} className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
className="lg:absolute lg:top-44 lg:right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
> >
<CT color="light" className="uppercase tracking-wide">COUNTRIES</CT> <CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>
<CountUpNumber end={44} color="light" className="mt-2 text-3xl font-bold" /> <CountUpNumber end={44} color="light" className="mt-2 text-3xl font-bold" />

5
src/components/ui/globe.tsx
View File

@@ -20,8 +20,9 @@ const GLOBE_CONFIG: COBEOptions = {
mapSamples: 16000, mapSamples: 16000,
mapBrightness: 1.1, mapBrightness: 1.1,
baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe
markerColor: [0.3, 0.6, 1], // soft, elegant blue markerColor: [0.02, 0.71, 0.83], // cyan-500
glowColor: [0.8, 0.8, 0.85], // subtle glow glowColor: [0.8, 0.8, 0.85], // grey
markers: [ markers: [
// --- Core Global Markers --- // --- Core Global Markers ---
{ location: [14.5995, 120.9842], size: 0.03 }, // Manila { location: [14.5995, 120.9842], size: 0.03 }, // Manila

2
src/styles/tailwind.css
View File

@@ -64,7 +64,7 @@
--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-mulish); --font-sans: var(--font-inter);
--container-2xl: 40rem; --container-2xl: 40rem;