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

README.md

@@ -1,93 +1,195 @@
 # Project Mycelium Website
 
-A multi-page website for Project Mycelium built with React, Vite, TypeScript, and Tailwind CSS.
+All in one project mycelium website
 
-## Tech Stack
 
-- **Framework**: React 19
-- **Build Tool**: Vite 7
+- **Repository:** [https://git.ourworld.tf/ourworld_web/www_projectmycelium_com/](https://git.ourworld.tf/ourworld_web/www_projectmycelium_com/)
+
+
+- **Main Branch (Production):** [https://www.projectmycelium.com/](https://www.projectmycelium.com)
+- **Dev Branch (Staging):** [https://www2.projectmycelium.com/](https://www2.projectmycelium.com/)
+
+
+
+---
+
+
+## About
+
+
+This is the official website for Mycelium , built using Vite.js and Tailwind CSS.
+
+
+---
+
+
+## Technologies
+
+
+- **Framework**: Vite.js (React)
 - **Language**: TypeScript
-- **Styling**: Tailwind CSS 4
-- **Routing**: React Router DOM 7
-- **Animations**: Framer Motion 11
+- **Styling**: Tailwind CSS
 
-## Project Structure
 
-```
-src/
-├── components/          # Shared components
-│   ├── AnimatedSection.tsx
-│   ├── Button.tsx
-│   ├── CircleBackground.tsx
-│   ├── Container.tsx
-│   ├── Header.tsx
-│   ├── Layout.tsx
-│   └── Logo.tsx
-├── pages/              # Page-specific components
-│   ├── home/           # Home page blocks
-│   ├── cloud/          # Cloud page blocks
-│   ├── network/        # Network page blocks
-│   │   ├── animations/ # SVG animations
-│   │   ├── Hero.tsx
-│   │   ├── About.tsx
-│   │   ├── Features.tsx
-│   │   ├── PrimaryFeatures.tsx
-│   │   ├── SecondaryFeatures.tsx
-│   │   ├── CallToAction.tsx
-│   │   └── NetworkPage.tsx
-│   └── agents/         # Agents page blocks
-├── styles/
-│   └── tailwind.css    # Tailwind configuration
-└── App.tsx            # Main app with routing
-```
+---
 
-## Pages
 
-- **Home** (`/`) - Main landing page with placeholder content
-- **Cloud** (`/cloud`) - Mycelium Cloud information (placeholder)
-- **Network** (`/network`) - Full Network page with:
-  - Hero section
-  - Our Mission (About)
-  - Core Components (Features with animations)
-  - How It Works
-  - Roadmap
-  - Call to Action
-- **Agents** (`/agents`) - Mycelium Agents information (placeholder)
+## Dependencies
 
-## Development
+- **@emailjs/browser**: ^4.4.1
+- **@headlessui/react**: ^2.2.9
+- **@heroicons/react**: ^2.2.0
+- **@lobehub/icons**: ^1.97.2
+- **@radix-ui/react-icons**: ^1.3.2
+- **@react-three/drei**: ^9.89.2
+- **@react-three/fiber**: ^8.15.12
+- **@tabler/icons-react**: ^3.35.0
+- **@tailwindcss/forms**: ^0.5.10
+- **@types/node**: ^20.19.23
+- **@types/react**: ^18.3.26
+- **@types/react-dom**: ^18.3.7
+- **@types/react-router-dom**: ^5.3.3
+- **class-variance-authority**: ^0.7.1
+- **clsx**: ^2.1.1
+- **cobe**: ^0.6.5
+- **dotted-map**: ^2.2.3
+- **framer-motion**: ^10.18.0
+- **lucide-react**: ^0.544.0
+- **motion**: ^12.23.24
+- **popmotion**: ^11.0.5
+- **react**: ^18.3.1
+- **react-countup**: ^6.5.3
+- **react-dom**: ^18.3.1
+- **react-icons**: ^5.5.0
+- **react-router-dom**: ^7.9.4
+- **react-type-animation**: ^3.2.0
+- **tailwind-merge**: ^3.3.1
+- **tailwindcss**: ^4.1.15
+- **three**: ^0.151.0
+- **typescript**: ^5.9.3
+- **use-debounce**: ^10.0.6
 
-Install dependencies:
-```bash
-npm install
-```
+### Dev Dependencies
 
-Run development server:
-```bash
-npm run dev
-```
+- **@tailwindcss/postcss**: ^4.1.15
+- **@types/three**: ^0.151.0
+- **@vitejs/plugin-react**: ^5.0.4
+- **autoprefixer**: ^10.4.20
+- **eslint**: ^8.57.1
+- **prettier**: ^3.6.2
+- **prettier-plugin-tailwindcss**: ^0.6.14
+- **sharp**: ^0.33.1
+- **tw-animate-css**: ^1.4.0
+- **vite**: ^7.1.7
 
-Build for production:
-```bash
-npm run build
-```
+---
 
-Preview production build:
-```bash
-npm run preview
-```
 
-## Styling
+## File Structure
 
-The project follows the same styling conventions as the source Mycelium website:
-- **Font**: Inter (Google Fonts)
-- **Colors**: Custom gray scale and cyan accent
-- **Animations**: Framer Motion with reduced motion support
-- **Design**: Tailwind CSS with custom theme extensions
 
-## Migration Notes
+- **Pages**: `src/pages`
+- **Components**: `src/components`
+- **Images**: `public/images`, `src/images`
+- **CSS**: `src/index.css`, `src/App.css`
 
-This website consolidates multiple one-pager sites into a single multi-page application. The Network page contains fully migrated content from the original www_mycelium_net repository, including:
-- All animated SVG components
-- Responsive layouts
-- Hover effects and transitions
-- Accessibility features
+
+---
+
+
+## Branding
+
+
+- **Font**: 'Mulish', 'Neuton'
+- **Logos**: `public/images/logo.svg`, `public/images/logomark.svg`
+
+---
+
+
+## Get Started
+
+
+Follow these steps to get the project running locally:
+
+
+1.  **Install Dependencies**:
+
+    `npm install`
+
+2.  **Build the Project**:
+
+    `npm run build`
+
+3.  **Start the Development Server**:
+
+    `npm run dev`
+
+---
+
+
+## Development Guide
+
+
+This project follows a modular, component-based architecture. Pages are assembled by combining reusable components into a single layout.
+
+
+### Homepage Structure
+
+
+The homepage is composed of components from `src/components` and pages are defined in `src/pages`.
+
+To edit a specific section of the homepage, navigate to `src/components/`  and modify the corresponding component file.
+
+
+### Base Layout
+
+The base layout for all pages is defined in `src/components/Layout.tsx`.
+
+
+### Creating a New Page
+
+To create a new page, add a new route in `src/App.tsx` and create a corresponding component in `src/pages`.
+
+
+---
+
+
+## Contributing
+
+
+- **Never update the `main` branch directly.** All changes must be reviewed and merged by the team through a pull request.
+- **Always work on the `development` branch.** Create a feature branch from `development` and submit your pull request to `development`.
+- **Request a review.** After submitting your pull request, ask the team to review and accept it into the `main` branch.
+
+
+---
+
+
+## Report an Error
+
+
+To report an issue, please use the following link and provide the requested information:
+
+
+- **Issue Tracker**: [git.ourworld.tf/ourworld_web/HOME/issues/new](https://git.ourworld.tf/ourworld_web/HOME/issues/new) and tag **OW Website & Wiki Project 2025**
+
+
+- See the current web rpoject on [OW Website & Wiki Project 2025](https://git.ourworld.tf/ourworld_web/-/projects/153)
+
+
+When reporting an issue, please include:
+
+
+- **URL**: The page where the error occurred.
+- **Repo**: The repository you are working with.
+- **Branch**: The specific branch you are on.
+- **Problem**: A detailed description of the problem.
+
+
+---
+
+
+## Questions
+
+
+If you have any questions, you can reach out to [sashaastiadi](https://git.ourworld.tf/sashaastiadi).

index.html

@@ -8,6 +8,7 @@
     <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.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

src/App.tsx

@@ -1,29 +1,33 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { Layout } from './components/Layout'
-import HomePage from './pages/home/HomePage'
-import CloudPage from './pages/cloud/CloudPage'
-import NetworkPage from './pages/network/NetworkPage'
-import AgentsPage from './pages/agents/AgentsPage'
-import DownloadPage from './pages/download/DownloadPage'
-import ComputePage from './pages/compute/ComputePage'
-import StoragePage from './pages/storage/StoragePage'
-import GpuPage from './pages/gpu/GpuPage'
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Layout } from './components/Layout';
+import { lazy, Suspense } from 'react';
+
+const HomePage = lazy(() => import('./pages/home/HomePage'));
+const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
+const NetworkPage = lazy(() => import('./pages/network/NetworkPage'));
+const AgentsPage = lazy(() => import('./pages/agents/AgentsPage'));
+const DownloadPage = lazy(() => import('./pages/download/DownloadPage'));
+const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
+const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
+const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
 
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Layout />}>
-          <Route index element={<HomePage />} />
-          <Route path="cloud" element={<CloudPage />} />
-          <Route path="network" element={<NetworkPage />} />
-          <Route path="agents" element={<AgentsPage />} />
-                    <Route path="download" element={<DownloadPage />} />
-          <Route path="compute" element={<ComputePage />} />
-          <Route path="storage" element={<StoragePage />} />
-          <Route path="gpu" element={<GpuPage />} />
-        </Route>
-      </Routes>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<HomePage />} />
+            <Route path="cloud" element={<CloudPage />} />
+            <Route path="network" element={<NetworkPage />} />
+            <Route path="agents" element={<AgentsPage />} />
+            <Route path="download" element={<DownloadPage />} />
+            <Route path="compute" element={<ComputePage />} />
+            <Route path="storage" element={<StoragePage />} />
+            <Route path="gpu" element={<GpuPage />} />
+          </Route>
+        </Routes>
+      </Suspense>
     </BrowserRouter>
   )
 }

src/components/Texts.tsx

@@ -72,7 +72,7 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // 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'
+  'text-5xl lg:text-7xl font-medium leading-tight tracking-tight'
 )
 export const H2 = createTextComponent(
   'h2',
@@ -104,7 +104,7 @@ export const H5 = createTextComponent(
 )
 export const Eyebrow = createTextComponent(
   'h2',
-  'text-base/7 font-semibold tracking-wide'
+  'text-base/7 font-semibold tracking-wider uppercase'
 )
 export const SectionHeader = createTextComponent(
   'p',

src/components/ui/HalfGlobe.tsx

@@ -3,13 +3,10 @@
 import { Canvas, useFrame } from "@react-three/fiber";
 import { Line, OrbitControls, useTexture } from "@react-three/drei";
 import { useMemo, useRef } from "react";
-
-type RotatableGroup = {
-  rotation: { y: number };
-};
+import type { Group } from "three";
 
 function Globe() {
-  const groupRef = useRef<RotatableGroup | null>(null);
+  const groupRef = useRef<Group>(null);
   const cloudTexture = useTexture("/images/cloud1.png");
 
   // Rotate the globe slowly
@@ -78,7 +75,7 @@ function Globe() {
 
 export function HalfGlobe() {
   return (
-    <div className="w-full h-[500px] bg-white flex items-center justify-center">
+    <div key="half-globe" className="w-full h-[500px] bg-white flex items-center justify-center">
       <Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}>
         <ambientLight intensity={0.8} />
         <Globe />

src/components/ui/layout-text-flip.tsx

@@ -33,7 +33,7 @@ export const LayoutTextFlip = ({
 
       <motion.span
         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">
           <motion.span

src/pages/agents/AgentsHeroAlt.tsx

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

src/pages/cloud/CloudHero.tsx

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

src/pages/cloud/CloudOverview.tsx

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

src/pages/compute/ComputeHero.tsx

@@ -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">
         <img
           alt=""
-          src="/images/computehero4.png"
+          src="/images/hero.webp"
           className="size-full object-cover"
         />
        

src/pages/compute/ComputeOverview.tsx

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

src/pages/gpu/GpuHero.tsx

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

src/pages/home/CallToAction.tsx

@@ -33,7 +33,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Read Docs
+              Docs
             </Button>
           </div>
         </div>

src/pages/home/HomeAgent.tsx

@@ -9,7 +9,7 @@ export function HomeAgent() {
         <div className="mx-auto max-w-4xl text-center">
           <H2>
             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
                 text=""
                 words={[

src/pages/home/HomeAurora.tsx

@@ -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 (
     <div
-      style={{
-        backgroundImage: "url(/images/homehero1.png)",
-        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"
+      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
+      style={{ backgroundImage: "url('/images/hero11.webp')" }}
     >
-      <div className="text-center -mt-5">
-        <H1>
-          <span className="text-bold lg:text-8xl">
-            Full Sovereignty for<br />Cloud, Network & AI.
-          </span>
-        </H1>
-      </div>
-      <div className="max-w-4xl text-center font-light text-gray-500">
-        <H5>
-          Build and run mission-critical workloads on distributed compute,
-          encrypted networking, and sovereign AI orchestration — all under your
-          control, without centralized gatekeepers.
-        </H5>
-      </div>
-      <div className="pt-6">
-        <ScrollDownArrow />
+      <div className="mx-auto max-w-7xl lg:px-8">
+        <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">
+          <div className="mx-auto max-w-3xl lg:mx-0">
+            <div className="hidden sm:flex">
+              <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">
+                Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
+                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
+                  <span aria-hidden="true" className="absolute inset-0" />
+                  Read more <span aria-hidden="true">&rarr;</span>
+                </a>
+              </div>
+            </div>
+            <H1 className="mt-8">
+              Full Sovereignty for Cloud, Network & AI.
+            </H1>
+            <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>
-  );
+  )
 }

src/pages/home/HomeCloud.tsx

@@ -23,7 +23,7 @@ export function HomeCloud() {
             />
             <div className="w-full flex-auto">
               <H2 className="">
-                Mycelium <span className="font-medium text-7xl italic">Cloud</span>
+                Mycelium <span className="font-medium text-7xl">Cloud</span>
               </H2>
               <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

src/pages/home/HomeMap.tsx

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

src/pages/storage/StorageHero.tsx

@@ -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">
         <img
           alt="Mycelium Storage visual"
-          src="/images/storagehero2.png"
+          src="/images/storage4.png"
           className="size-full object-cover"
         />
       </div>
@@ -27,7 +27,7 @@ export function StorageHero() {
             data exactly where you need it while keeping ownership entirely in
             your hands.
           </P>
-          <P className="mt-4 italic text-gray-500">
+          <P className="mt-4 text-gray-500">
             Quantum-safe. Self-healing. Universally accessible.
           </P>
           <div className="mt-10 flex flex-wrap gap-4">

tailwind.config.js

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