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
feat: update website design and assets
2025-10-31 01:36:16 +01:00 · 2025-10-31 01:36:08 +01:00 · 2025-10-31 01:35:03 +01:00
34 changed files with 57 additions and 41 deletions
--- a/index.html
+++ b/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>
--- a/public/images/8c0e4489-1721-49e0-a475-509daf745c1c.png
+++ b/public/images/8c0e4489-1721-49e0-a475-509daf745c1c.png
--- a/public/images/ChatGPT
+++ b/public/images/ChatGPT
--- a/public/images/Screenshot
+++ b/public/images/Screenshot
--- a/public/images/a718fb45-791b-429f-9927-668e6fa8c73b.png
+++ b/public/images/a718fb45-791b-429f-9927-668e6fa8c73b.png
--- a/public/images/agent_icon.png
+++ b/public/images/agent_icon.png
--- a/public/images/agentshero2.png
+++ b/public/images/agentshero2.png
--- a/public/images/candy.gif
+++ b/public/images/candy.gif
--- a/public/images/cloud.png
+++ b/public/images/cloud.png
--- a/public/images/cloud1.png
+++ b/public/images/cloud1.png
--- a/public/images/cloud_icon.png
+++ b/public/images/cloud_icon.png
--- a/public/images/computehero3.jpg
+++ b/public/images/computehero3.jpg
--- a/public/images/cube.png
+++ b/public/images/cube.png
--- a/public/images/deployment.webp
+++ b/public/images/deployment.webp
--- a/public/images/gpuhero.jpeg
+++ b/public/images/gpuhero.jpeg
--- a/public/images/homehero1.png
+++ b/public/images/homehero1.png
--- a/public/images/mchip.webp
+++ b/public/images/mchip.webp
--- a/public/images/mchip2.webp
+++ b/public/images/mchip2.webp
--- a/public/images/network_icon.png
+++ b/public/images/network_icon.png
--- a/public/images/storage2.png
+++ b/public/images/storage2.png
--- a/src/components/Texts.tsx
+++ b/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',
--- a/src/components/ui/layout-text-flip.tsx
+++ b/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
--- a/src/pages/agents/AgentsHeroAlt.tsx
+++ b/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",
      }}
--- a/src/pages/cloud/CloudHero.tsx
+++ b/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">
--- a/src/pages/cloud/CloudOverview.tsx
+++ b/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>
--- a/src/pages/compute/ComputeHero.tsx
+++ b/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"
        />
       
--- a/src/pages/compute/ComputeOverview.tsx
+++ b/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>
--- a/src/pages/gpu/GpuHero.tsx
+++ b/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">
--- a/src/pages/home/HomeAgent.tsx
+++ b/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={[
--- a/src/pages/home/HomeAurora.tsx
+++ b/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>
-  );
+  )
 }
--- a/src/pages/home/HomeCloud.tsx
+++ b/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
--- a/src/pages/home/HomeMap.tsx
+++ b/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}
--- a/src/pages/storage/StorageHero.tsx
+++ b/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">
--- a/tailwind.config.js
+++ b/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' },