ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Pull Requests Activity

Compare commits

base: ourworld_web:04d08a42659c6c782e675a8e5e77c19664c30d94
Branches Tags
ourworld_web:main ourworld_web:development ourworld_web:development_sasha ourworld_web:development_backup ourworld_web:main_backup ourworld_web:main_sasha_dark emre:development_sasha emre:development emre:development_backup emre:main emre:main_backup emre:main_sasha_dark
...
compare: ourworld_web:5b05dababbc0b8dfc76528a4996c5fe1c698571b
Branches Tags
ourworld_web:development ourworld_web:development_sasha ourworld_web:main ourworld_web:development_backup ourworld_web:main_backup ourworld_web:main_sasha_dark emre:development_sasha emre:development emre:development_backup emre:main emre:main_backup emre:main_sasha_dark

3 Commits
04d08a4265 ... 5b05dababb

Author SHA1 Message Date
sasha-astiadi
5b05dababb style: adjust eyebrow text tracking for better readability 
- Changed tracking property from 'tracking-wide' to 'tracking-wider' to increase letter spacing in eyebrow text component
- Improves visual hierarchy and text legibility for uppercase headings
 2025-10-31 01:36:16 +01:00
sasha-astiadi
ab5ac43793 feat: update website design and assets 
- Replaced multiple hero and background images with new optimized versions
- Removed unused image assets from public/images directory
- Updated typography styles:
  - Removed italic styling from various text components
  - Made eyebrow text uppercase
  - Adjusted H1 font size from 6xl to 5xl on mobile
- Redesigned HomeAurora component with new layout and background
- Added Mulish as primary font family in Tailwind config
- Updated text formatting and spacing
 2025-10-31 01:36:08 +01:00
sasha-astiadi
fb9250c365 feat: add Mulish font family to website 
- Added Google Fonts stylesheet link to load Mulish font with weights 400, 500, and 700
- Included preconnect links for optimal font loading performance
 2025-10-31 01:35:03 +01:00
34 changed files with 57 additions and 41 deletions
Expand all files Collapse all files

1
index.html
View File

@@ -8,6 +8,7 @@
<meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." /> <meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap" rel="stylesheet" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
public/images/8c0e4489-1721-49e0-a475-509daf745c1c.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

BIN
public/images/ChatGPT Image Oct 24, 2025, 05_03_52 PM.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/images/Screenshot 2025-09-13 at 15.58.46.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 303 KiB

BIN
public/images/a718fb45-791b-429f-9927-668e6fa8c73b.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 992 KiB

BIN
public/images/agent_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 802 KiB

BIN
public/images/agentshero2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/images/candy.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 MiB

BIN
public/images/cloud.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/images/cloud1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/images/cloud_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 757 KiB

BIN
public/images/computehero3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

BIN
public/images/cube.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 190 KiB

BIN
public/images/deployment.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
public/images/gpuhero.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
public/images/homehero1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/images/mchip.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
public/images/mchip2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 126 KiB

BIN
public/images/network_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 835 KiB

BIN
public/images/storage2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

4
src/components/Texts.tsx
View File

@@ -72,7 +72,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
// Exports based on your tailwind.css and the example // Exports based on your tailwind.css and the example
export const H1 = createTextComponent( export const H1 = createTextComponent(
'h1', 'h1',
'text-6xl lg:text-7xl font-medium leading-tight tracking-tight' 'text-5xl lg:text-7xl font-medium leading-tight tracking-tight'
) )
export const H2 = createTextComponent( export const H2 = createTextComponent(
'h2', 'h2',
@@ -104,7 +104,7 @@ export const H5 = createTextComponent(
) )
export const Eyebrow = createTextComponent( export const Eyebrow = createTextComponent(
'h2', 'h2',
'text-base/7 font-semibold tracking-wide' 'text-base/7 font-semibold tracking-wider uppercase'
) )
export const SectionHeader = createTextComponent( export const SectionHeader = createTextComponent(
'p', 'p',

2
src/components/ui/layout-text-flip.tsx
View File

@@ -33,7 +33,7 @@ export const LayoutTextFlip = ({
<motion.span <motion.span
layout layout
className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight" className="relative w-fit overflow-hidden px-2 py-2 font-medium tracking-tight"
> >
<AnimatePresence mode="popLayout"> <AnimatePresence mode="popLayout">
<motion.span <motion.span

2
src/pages/agents/AgentsHeroAlt.tsx
View File

@@ -7,7 +7,7 @@ export function AgentsHeroAlt() {
return ( return (
<div <div
style={{ style={{
backgroundImage: "url(/images/agentshero.png)", backgroundImage: "url(/images/agentshero2.png)",
backgroundSize: "cover", backgroundSize: "cover",
backgroundPosition: "center", backgroundPosition: "center",
}} }}

2
src/pages/cloud/CloudHero.tsx
View File

@@ -92,7 +92,7 @@ export function CloudHero() {
networking, quantum-safe storage, and zero-image delivery that networking, quantum-safe storage, and zero-image delivery that
keeps every workload deterministic. keeps every workload deterministic.
</P> </P>
<P className="mt-6 italic text-gray-500"> <P className="mt-6 text-gray-500">
Developer guide to decentralized cloud computing. Developer guide to decentralized cloud computing.
</P> </P>
<div className="mt-10 flex flex-wrap gap-4"> <div className="mt-10 flex flex-wrap gap-4">

2
src/pages/cloud/CloudOverview.tsx
View File

@@ -51,7 +51,7 @@ export function CloudOverview() {
orchestration are all built-in so developers can deploy critical orchestration are all built-in so developers can deploy critical
workloads without wrestling infrastructure. workloads without wrestling infrastructure.
</P> </P>
<P color="lightSecondary" className="mt-6 italic"> <P color="lightSecondary" className="mt-6">
Declarative, sovereign, and ready for production workloads anywhere. Declarative, sovereign, and ready for production workloads anywhere.
</P> </P>
</div> </div>

2
src/pages/compute/ComputeHero.tsx
View File

@@ -8,7 +8,7 @@ export function ComputeHero() {
<div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2"> <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
<img <img
alt="" alt=""
src="/images/computehero4.png" src="/images/hero.webp"
className="size-full object-cover" className="size-full object-cover"
/> />

2
src/pages/compute/ComputeOverview.tsx
View File

@@ -43,7 +43,7 @@ export function ComputeOverview() {
precision, knowing the platform verifies, scales, and heals itself precision, knowing the platform verifies, scales, and heals itself
on your behalf. on your behalf.
</P> </P>
<P color="lightSecondary" className="mt-4 italic"> <P color="lightSecondary" className="mt-4">
Deterministic. Self-managing. Stateless by design. Deterministic. Self-managing. Stateless by design.
</P> </P>
</div> </div>

2
src/pages/gpu/GpuHero.tsx
View File

@@ -28,7 +28,7 @@ export function GpuHero() {
planetary clusters—with deterministic performance and transparent planetary clusters—with deterministic performance and transparent
cost. cost.
</P> </P>
<P className="mt-4 italic text-gray-500"> <P className="mt-4 text-gray-500">
The energy behind intelligence, orchestrated entirely through code. The energy behind intelligence, orchestrated entirely through code.
</P> </P>
<div className="mt-10 flex flex-wrap gap-4"> <div className="mt-10 flex flex-wrap gap-4">

2
src/pages/home/HomeAgent.tsx
View File

@@ -9,7 +9,7 @@ export function HomeAgent() {
<div className="mx-auto max-w-4xl text-center"> <div className="mx-auto max-w-4xl text-center">
<H2> <H2>
Deploy your own{" "} Deploy your own{" "}
<span className="text-left text-black font-medium text-7xl italic bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400"> <span className="text-left text-black font-medium text-7xl bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
<LayoutTextFlip <LayoutTextFlip
text="" text=""
words={[ words={[

66
src/pages/home/HomeAurora.tsx
View File

@@ -1,35 +1,47 @@
"use client"; import { H1, H2, H5 } from "@/components/Texts"
import { Button } from "@/components/Button"
import { H1, H5 } from "@/components/Texts";
import { ScrollDownArrow } from '@/components/ScrollDownArrow';
export function HomeAurora() { export function HomeAurora() {
return ( return (
<div <div
style={{ className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
backgroundImage: "url(/images/homehero1.png)", style={{ backgroundImage: "url('/images/hero11.webp')" }}
backgroundSize: "cover",
backgroundPosition: "center",
}}
className="relative mx-auto flex min-h-screen flex-col items-center gap-6 px-4 pb-24 pt-[20vh] text-gray-800 lg:pb-0"
> >
<div className="text-center -mt-5"> <div className="mx-auto max-w-7xl lg:px-8">
<H1> <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
<span className="text-bold lg:text-8xl"> <div className="mx-auto max-w-3xl lg:mx-0">
Full Sovereignty for<br />Cloud, Network & AI. <div className="hidden sm:flex">
</span> <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
</H1> Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
</div> <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
<div className="max-w-4xl text-center font-light text-gray-500"> <span aria-hidden="true" className="absolute inset-0" />
<H5> Read more <span aria-hidden="true">&rarr;</span>
Build and run mission-critical workloads on distributed compute, </a>
encrypted networking, and sovereign AI orchestration — all under your </div>
control, without centralized gatekeepers. </div>
</H5> <H1 className="mt-8">
</div> Full Sovereignty for Cloud, Network & AI.
<div className="pt-6"> </H1>
<ScrollDownArrow /> <H5 className="mt-8 text-lg text-gray-600">
Build and run mission-critical workloads on distributed compute, encrypted networking, and sovereign AI orchestration without centralized gatekeepers.
</H5>
<div className="mt-10 flex items-center gap-x-6">
<Button
to="#"
variant="solid"
className=""
color="cyan"
>
Get started
</Button>
<Button to="#" variant="outline">
Explore Docs <span aria-hidden="true"> →</span>
</Button>
</div>
</div>
</div>
</div> </div>
</div> </div>
); )
} }

2
src/pages/home/HomeCloud.tsx
View File

@@ -23,7 +23,7 @@ export function HomeCloud() {
/> />
<div className="w-full flex-auto"> <div className="w-full flex-auto">
<H2 className=""> <H2 className="">
Mycelium <span className="font-medium text-7xl italic">Cloud</span> Mycelium <span className="font-medium text-7xl">Cloud</span>
</H2> </H2>
<P className="mt-6 text-lg/8 text-pretty text-gray-600"> <P className="mt-6 text-lg/8 text-pretty text-gray-600">
A comprehensive platform for deploying and managing Kubernetes clusters on the decentralized Mycelium Grid infrastructure A comprehensive platform for deploying and managing Kubernetes clusters on the decentralized Mycelium Grid infrastructure

2
src/pages/home/HomeMap.tsx
View File

@@ -9,7 +9,7 @@ export function HomeMapSection() {
<div className="max-w-7xl mx-auto text-center"> <div className="max-w-7xl mx-auto text-center">
<H2 className="font-medium text-xl md:text-4xl dark:text-white text-gray-800"> <H2 className="font-medium text-xl md:text-4xl dark:text-white text-gray-800">
Mycelium Network is{" "} Mycelium Network is{" "}
<span className="text-black text-bold italic"> <span className="text-black text-bold">
{"Live.".split("").map((word, idx) => ( {"Live.".split("").map((word, idx) => (
<motion.span <motion.span
key={idx} key={idx}

4
src/pages/storage/StorageHero.tsx
View File

@@ -9,7 +9,7 @@ export function StorageHero() {
<div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2"> <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
<img <img
alt="Mycelium Storage visual" alt="Mycelium Storage visual"
src="/images/storagehero2.png" src="/images/storage4.png"
className="size-full object-cover" className="size-full object-cover"
/> />
</div> </div>
@@ -27,7 +27,7 @@ export function StorageHero() {
data exactly where you need it while keeping ownership entirely in data exactly where you need it while keeping ownership entirely in
your hands. your hands.
</P> </P>
<P className="mt-4 italic text-gray-500"> <P className="mt-4 text-gray-500">
Quantum-safe. Self-healing. Universally accessible. Quantum-safe. Self-healing. Universally accessible.
</P> </P>
<div className="mt-10 flex flex-wrap gap-4"> <div className="mt-10 flex flex-wrap gap-4">

3
tailwind.config.js
View File

@@ -6,6 +6,9 @@ export default {
], ],
theme: { theme: {
extend: { extend: {
fontFamily: {
sans: ['Mulish', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
},
keyframes: { keyframes: {
'glitch-1': { 'glitch-1': {
'0%': { transform: 'none' }, '0%': { transform: 'none' },