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

chore: switch from Mulish to Inter font family

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 15:18:39 +02:00
parent db4c2d8ea0
commit d70c2b6874
19 changed files with 161 additions and 74 deletions
Download Patch File Download Diff File 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">

4
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 } 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,7 @@ 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> <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 }}>

8
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-200">
<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">

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

6
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 } 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,11 @@ 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> <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 }}>

2
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 } from '@/components/Texts';
import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards"; import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";

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

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>

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>

13
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 } from '@/components/Texts'
export function HomeHeroLight2() { export function HomeHeroLight2() {
const videoRef = useRef<HTMLVideoElement>(null) const videoRef = useRef<HTMLVideoElement>(null)
@@ -37,20 +38,20 @@ 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 <H1
className="pt-6 text-5xl sm:text-7xl font-semibold tracking-tight leading-tight text-gray-900" 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>

8
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 } 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,9 @@ 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"> <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
The Mycelium Stack The Mycelium Stack
</H2> </SectionHeader>
</FadeIn> </FadeIn>
<FadeIn> <FadeIn>

6
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 } 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,9 @@ 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"> <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>

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.

6
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 } from "@/components/Texts"
import { CountUpNumber } from './CountUpNumber' import { CountUpNumber } from './CountUpNumber'
export function WorldMap() { export function WorldMap() {
@@ -31,8 +31,8 @@ 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> <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
<P className="hidden mt-4 text-base leading-relaxed font-light" color="light"> <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>

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;