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

4
src/components/BentoReviews.tsx
View File

@@ -1,7 +1,7 @@
"use client";
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 { BentoGrid, MotionBentoGridItem } from "@/components/ui/bento-grid";
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">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<div className="mx-auto max-w-5xl ">
<H2 className="text-center">Augmented Intelligence Fabric</H2>
<SectionHeader className="text-center">Augmented Intelligence Fabric</SectionHeader>
</div>
</FadeIn>
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}>

8
src/components/CallTo.tsx
View File

@@ -1,16 +1,16 @@
"use client"
import { H2, P } from '@/components/Texts'
import { SectionHeader, P } from '@/components/Texts'
export function CallTo() {
return (
<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="mx-auto max-w-4xl text-center">
<H2 color="primary">
<SectionHeader color="primary">
Are you Ready?
</H2>
<P color="custom" className="mt-8 max-w-3xl">
</SectionHeader>
<P className="mt-8 max-w-3xl">
Why hand out your intelligence to centralized giants when you can build your own?
</P>
<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 { wrap } from 'popmotion'
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 { FadeIn } from './FadeIn';
@@ -53,7 +53,7 @@ export function ClickableGallery() {
<div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<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>
</FadeIn>
<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 { wrap } from 'popmotion'
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 { FadeIn } from './FadeIn';
@@ -49,11 +49,11 @@ export function ClickableGalleryLight() {
const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
return (
<div className="bg-white">
<div className="bg-[#FAFAFA]">
<div className="relative isolate pt-8 pb-0 text-center w-full">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<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>
</FadeIn>
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}>

2
src/components/Companies.tsx
View File

@@ -2,7 +2,7 @@
import React from "react";
import { motion } from "framer-motion";
import { H2, P } from '@/components/Texts';
import { P } from '@/components/Texts';
import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";

8
src/components/CountUpNumber.tsx
View File

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

4
src/components/GetStarted.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { H2, P, CP } from "@/components/Texts";
import { SectionHeader, P, CP } from "@/components/Texts";
import { Button } from "@/components/Button";
export function GetStarted() {
@@ -36,7 +36,7 @@ export function GetStarted() {
}}
>
<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>
</div>

6
src/components/GridStats.tsx
View File

@@ -3,7 +3,7 @@
import CountUp from "react-countup";
import React from "react";
import { Button } from "@/components/Button";
import { H2, P } from "@/components/Texts";
import { SectionHeader, P } from "@/components/Texts";
export function GridStats() {
return (
@@ -21,9 +21,9 @@ export function GridStats() {
{/* Column 1: Title & Description */}
<div className="flex flex-col space-y-10">
<div>
<H2 color="light">
<SectionHeader color="light">
Robust Infrastructure for your Intellegence Needs
</H2>
</SectionHeader>
<P color="light" className="mt-6">
Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
</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 diamondSvg from '@/images/diamond.svg'
import { Container } from '@/components/Container';
import { H2, P, H3 } from '@/components/Texts';
import { SectionHeader, P, H3 } from '@/components/Texts';
import { Candy } from '@/components/Candy'
const navigation = [
@@ -65,10 +65,10 @@ export function HomeAbout() {
transition={{ duration: 1, delay: 0.2 }}
className="absolute top-24 left-0 max-w-xl text-left"
>
<H2>
<SectionHeader>
Enterprise AI Agents
That Never Sleep.
</H2>
</SectionHeader>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -76,7 +76,7 @@ export function HomeAbout() {
transition={{ duration: 1, delay: 0.4 }}
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.
</P>
</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 { Dialog, DialogPanel } from '@headlessui/react'
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 = [
{ name: 'Product', href: '#' },
@@ -54,9 +54,9 @@ export function HomeHero() {
transition={{ duration: 1, delay: 1 }}
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.
</PL>
</P>
</motion.div>
</div>
</div>

13
src/components/HomeHeroLight2.tsx
View File

@@ -1,6 +1,7 @@
'use client'
import { useRef, useEffect } from 'react'
import { H1, H2, P, H5 } from '@/components/Texts'
export function HomeHeroLight2() {
const videoRef = useRef<HTMLVideoElement>(null)
@@ -37,20 +38,20 @@ export function HomeHeroLight2() {
{/* Content */}
<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">
<h1
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)' }}
>
Decentralized Autonomous Agentic Cloud.
</h1>
</H1>
<p
className="mt-8 text-lg sm:text-xl font-medium text-gray-800/90 leading-relaxed"
<H5
className="mt-8"
style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
>
Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and
autonomous Agents that connect, learn, and grow with you.
</p>
</H5>
</div>
</div>
</section>

8
src/components/StackSectionLight.tsx
View File

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

6
src/components/Steps.tsx
View File

@@ -2,7 +2,7 @@
import React, { useRef } from 'react'
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'
const features = [
@@ -38,9 +38,9 @@ export function Steps() {
transition={{ duration: 0.8, delay: 0.1 }}
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
</H2>
</SectionHeader>
<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.
</P>

129
src/components/Texts.tsx
View File

@@ -4,11 +4,14 @@ import React from 'react'
import { cn } from '@/lib/utils'
const colorVariants = {
primary: 'text-[#fffff]',
secondary: 'text-gray-200',
custom: 'text-[#015eff]',
light: '[#fcfcfc]',
dark: 'text-gray-800',
primary: 'text-gray-900',
secondary: 'text-gray-600',
light: 'text-gray-50',
accent: 'text-cyan-500',
white: 'text-white',
dark: 'text-gray-950',
tertiary: 'text-gray-700',
lightSecondary: 'text-gray-300',
} as const
type TextOwnProps = {
@@ -16,17 +19,19 @@ type TextOwnProps = {
className?: string
}
// Polymorphic helpers (no forwardRef needed)
type PolymorphicProps<E extends React.ElementType, P> =
P & { as?: E } &
Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
// Polymorphic helpers
type PolymorphicProps<E extends React.ElementType, P> = P & {
as?: E
} & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
const createTextComponent = <DefaultElement extends React.ElementType>(
defaultElement: DefaultElement,
defaultClassName: string
) => {
type Props<E extends React.ElementType = DefaultElement> =
PolymorphicProps<E, TextOwnProps>
type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
E,
TextOwnProps
>
function Text<E extends React.ElementType = DefaultElement>({
as,
@@ -39,24 +44,106 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
return (
<Tag
className={cn(defaultClassName, colorVariants[color], className)}
{...(props as object)}
{...props}
>
{children}
</Tag>
)
}
;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'})`
;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
})`
return Text
}
// Exports
export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl')
export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl')
export const H2 = createTextComponent('h2', 'text-3xl font-medium text-pretty lg:text-4xl')
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 H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-[1.15]')
// Exports based on your tailwind.css and the example
export const H1 = createTextComponent(
'h1',
'text-6xl lg:text-7xl font-medium leading-tight tracking-tight'
)
export const H2 = createTextComponent(
'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 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'
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'
interface Review {
@@ -147,9 +147,9 @@ export function UseCases() {
transition={{ duration: 0.8, delay: 0.1 }}
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
</H2>
</SectionHeader>
<P className="mt-4 text-left" color="light">
The sovereign substrate for autonomous AI.
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 { 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'
export function WorldMap() {
@@ -31,8 +31,8 @@ export function WorldMap() {
transition={{ duration: 0.5 }}
className="max-w-xl"
>
<H2 color="light">Mycelium Network is Live.</H2>
<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
their own Internet infrastructure, anywhere.
</P>

2
src/styles/tailwind.css
View File

@@ -64,7 +64,7 @@
--color-gray-900: oklch(0.205 0 0);
--color-gray-950: oklch(0.145 0 0);
--font-sans: var(--font-mulish);
--font-sans: var(--font-inter);
--container-2xl: 40rem;