refactor: remove unused text component imports

- Removed unused H2 import from HomeAurora.tsx - Removed unused SectionHeader import from StackSection.tsx - Cleaned up import statements to only include components being used
feat: improve text styling and layout in home sections
2025-10-31 03:10:39 +01:00 · 2025-10-31 03:09:47 +01:00 · 2025-10-31 03:09:07 +01:00 · 2025-10-31 03:01:17 +01:00 · 2025-10-31 01:38:26 +01:00 · 2025-10-31 01:36:16 +01:00
55 changed files with 116 additions and 100 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/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/benefits/autonomous.webp
+++ b/public/images/benefits/autonomous.webp
--- a/public/images/benefits/cost.webp
+++ b/public/images/benefits/cost.webp
--- a/public/images/benefits/energy.webp
+++ b/public/images/benefits/energy.webp
--- a/public/images/benefits/sovereign.webp
+++ b/public/images/benefits/sovereign.webp
--- 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/hero11.webp
+++ b/public/images/hero11.webp
--- 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/pages/agent.webp
+++ b/public/images/pages/agent.webp
--- a/public/images/pages/cloud.webp
+++ b/public/images/pages/cloud.webp
--- a/public/images/pages/compute.webp
+++ b/public/images/pages/compute.webp
--- a/public/images/pages/gpu.webp
+++ b/public/images/pages/gpu.webp
--- a/public/images/pages/network.webp
+++ b/public/images/pages/network.webp
--- a/public/images/pages/storage.webp
+++ b/public/images/pages/storage.webp
--- a/public/images/pages/storage1.webp
+++ b/public/images/pages/storage1.webp
--- 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',
@@ -88,7 +88,7 @@ export const H4 = createTextComponent(
 )
 export const P = createTextComponent(
  'p',
-  'text-base lg:text-lg leading-relaxed'
+  'text-base lg:text-xl leading-relaxed'
 )
 export const Small = createTextComponent(
  'small',
@@ -100,11 +100,11 @@ export const Subtle = createTextComponent(
 )
 export const H5 = createTextComponent(
  'h5',
-  'text-xl lg:text-2xl font-light leading-snug tracking-normal'
+  'text-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
 )
 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',
@@ -160,4 +160,4 @@ export const DownloadCardDescription = createTextComponent(
 )

 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
-export const CP = createTextComponent('p', 'text-sm lg:text-sm tracking-wide leading-[1.525] font-light')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-relaxed font-light')
--- a/src/components/ui/CubeLight.tsx
+++ b/src/components/ui/CubeLight.tsx
@@ -26,7 +26,7 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
    <path
      fill={`url(#cube-gradient-${index})`}
      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
-      stroke="rgba(59, 130, 246, 0.25)"
+      stroke="rgba(107, 114, 128, 0.3)"
      strokeWidth="0.5"
    />
    <defs>
@@ -79,8 +79,8 @@ export function CubeLight({
        <div
          className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
            isActive
-              ? "bg-blue-400/40 opacity-70"
-              : "bg-blue-200/20 opacity-40"
+              ? "bg-cyan-400/20 opacity-30"
+              : "bg-cyan-200/20 opacity-40"
          }`}
        />

@@ -90,8 +90,8 @@ export function CubeLight({
          className="w-48 sm:w-64 lg:w-80 h-auto relative"
          style={{
            filter: isActive
-              ? "drop-shadow(0 0 25px rgba(59, 130, 246, 0.4)) brightness(1.1)"
-              : "drop-shadow(0 0 10px rgba(59, 130, 246, 0.15)) brightness(1)",
+              ? "drop-shadow(0 0 15px rgba(34, 211, 238, 0.25)) brightness(1.05)"
+              : "drop-shadow(0 0 10px rgba(34, 211, 238, 0.15)) brightness(1)",
            transition: "all 0.4s ease",
          }}
        />
@@ -99,10 +99,10 @@ export function CubeLight({
        {/* Title overlay */}
        <div className="absolute inset-0 flex items-center justify-center">
          <h3
-            className="text-blue-900 text-sm lg:text-base font-medium text-center px-4"
+            className="text-cyan-900 text-sm lg:text-base font-medium text-center px-4"
            style={{
              textShadow:
-                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(59, 130, 246, 0.5)",
+                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(34, 211, 238, 0.5)",
            }}
          >
            {title}
@@ -131,7 +131,7 @@ export function CubeLight({
                y1="1"
                x2="120"
                y2="1"
-                stroke="rgba(59, 130, 246, 0.6)"
+                stroke="rgba(34, 211, 238, 0.6)"
                strokeWidth="1"
                opacity="0.8"
              />
--- a/src/components/ui/StackedCubesLight.tsx
+++ b/src/components/ui/StackedCubesLight.tsx
@@ -35,8 +35,8 @@ const stackData = [
 ];

 export function StackedCubesLight() {
-  const [active, setActive] = useState<string | null>("agent");
-  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
+  const [active, setActive] = useState<string | null>("network");
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("network");

  const handleCubeClick = (id: string) => {
    setSelectedForMobile((prev) => (prev === id ? null : id));
@@ -49,10 +49,10 @@ export function StackedCubesLight() {
  return (
    <div className="flex flex-col items-center relative">
      {/* ✨ Ambient cyan-white gradient background */}
-      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/40 to-white blur-3xl opacity-70 pointer-events-none" />
+      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/30 to-white blur-3xl opacity-70 pointer-events-none" />
      <div
        className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
-        onMouseLeave={() => setActive("agent")}
+        onMouseLeave={() => setActive("network")}
      >
        <motion.div
          className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
@@ -77,8 +77,8 @@ export function StackedCubesLight() {
              <div
                className={`absolute inset-0 blur-2xl rounded-3xl transition-all duration-500 ${
                  active === layer.id
-                    ? "bg-cyan-300/40 opacity-70"
-                    : "bg-cyan-200/20 opacity-40"
+                    ? "bg-cyan-300/20 opacity-20"
+                    : "bg-cyan-200/20 opacity-20"
                }`}
              />
              <CubeLight
--- a/src/components/ui/apple-cards-carousel.tsx
+++ b/src/components/ui/apple-cards-carousel.tsx
@@ -93,7 +93,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
                  },
                }}
                key={"card" + index}
-                className="rounded-3xl last:pr-[5%] md:last:pr-[33%]"
+                className="rounded-3xl last:pr-[5%] md:last:pr-[33%] "
              >
                {item}
              </motion.div>
@@ -132,7 +132,7 @@ export const Card = ({
    <Link to={card.link}>
      <motion.div
        layoutId={layout ? `card-${card.title}` : undefined}
-        className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
+        className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl border border-gray-500/30 md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
        style={{
          backgroundImage: `url(${card.bg})`,
          backgroundSize: 'cover',
@@ -154,7 +154,7 @@ export const Card = ({
            {card.title}
          </motion.p>
          <div className="flex flex-row justify-between items-center w-full mt-4">
-            <motion.p className="max-w-xs text-left font-sans text-sm text-neutral-300">
+            <motion.p className="max-w-xs text-left font-sans lg:text-lg text-base  text-neutral-300">
              {card.description}
            </motion.p>
            <div className="h-8 w-8 bg-[#212121] rounded-full flex items-center justify-center text-[#858585] shrink-0 hover:bg-[#262626] hover:text-white active:bg-[#262626] active:text-white transition-colors duration-200">
--- 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/CallToAction.tsx
+++ b/src/pages/home/CallToAction.tsx
@@ -6,26 +6,23 @@ export function CallToAction() {
  return (
    <section
      id="get-started"
-      className="relative overflow-hidden bg-gray-900 py-32"
+      className="relative overflow-hidden bg-gray-900 lg:py-32 py-24"
    >
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
      </div>
      <Container className="relative">
-        <div className="mx-auto max-w-2xl text-center">
+        <div className="mx-auto max-w-xl text-center">
          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
            Activate Your Sovereign <br />Mycelium Stack
          </h2>
          <p className="mt-6 text-lg text-gray-300">
-            Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
+            Mesh cloud workloads through the encrypted Mycelium Network and unlock AI experiences without ever surrendering control of your infrastructure, performance, or data.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button to="/cloud" variant="solid" color="white">
+            <Button to="/cloud" variant="solid" color="cyan">
              Start Deployment
            </Button>
-            <Button to="/download" variant="solid" color="cyan">
-              Get Mycelium Connector
-            </Button>
            <Button
              to="https://threefold.info/mycelium_network/docs/"
              as="a"
@@ -33,7 +30,7 @@ export function CallToAction() {
              variant="outline"
              color="white"
            >
-              Read Docs
+              Explore Docs
            </Button>
          </div>
        </div>
--- 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, 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/HomeBenefits.tsx
+++ b/src/pages/home/HomeBenefits.tsx
@@ -2,7 +2,7 @@ import createGlobe from "cobe";
 import { useEffect, useRef } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
-import { H2, P } from '@/components/Texts'
+import { H2, P, CP, Eyebrow } from '@/components/Texts'


 export function HomeBenefits() {
@@ -16,13 +16,13 @@ export function HomeBenefits() {
    {
      title: "Autonomous",
      description:
-        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
+        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything.",
      image: "/images/benefits/autonomous.webp",
    },
    {
      title: "Energy Efficient",
      description:
-        "Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
+        "Built on distributed nodes designed for minimal energy use, it redefines sustainability without compromising performance.",
      image: "/images/benefits/energy.webp",
    },
    {
@@ -33,13 +33,16 @@ export function HomeBenefits() {
    },
  ];
  return (
-    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
+    <div className="relative z-20 py-10 lg:py-24 max-w-7xl mx-auto">
      <div className="px-12">
+        <Eyebrow className="text-center text-cyan-500">
+         Benefits
+        </Eyebrow>
        <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
          Why It Changes Everything
        </H2>

-        <P className="text-sm lg:text-base  max-w-2xl  my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
+        <P className=" max-w-3xl  my-4 mx-auto text-center text-gray-600">
          Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
        </P>
      </div>
@@ -57,9 +60,9 @@ export function HomeBenefits() {
                    </div>
                    <div className="w-2/3 p-2 pr-12">
                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[0].title}</h3>
-                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                        <CP  className="mt-2  text-gray-600 dark:text-gray-300">
                            {features[0].description}
-                        </p>
+                        </CP>
                    </div>
                </div>
            </div>
@@ -76,9 +79,9 @@ export function HomeBenefits() {
                    </div>
                    <div className="w-2/3 p-4">
                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[1].title}</h3>
-                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                        <CP className="mt-2  text-gray-600 dark:text-gray-300">
                            {features[1].description}
-                        </p>
+                        </CP>
                    </div>
                </div>
            </div>
@@ -95,9 +98,9 @@ export function HomeBenefits() {
                    </div>
                    <div className="w-2/3 p-4">
                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[2].title}</h3>
-                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                        <CP className="mt-2  text-gray-600 dark:text-gray-300">
                            {features[2].description}
-                        </p>
+                        </CP>
                    </div>
                </div>
            </div>
@@ -114,9 +117,9 @@ export function HomeBenefits() {
                    </div>
                    <div className="w-2/3 p-2 pr-12">
                        <h3 className="text-lg font-semibold text-black dark:text-white">{features[3].title}</h3>
-                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                        <CP className="mt-2  text-gray-600 dark:text-gray-300">
                            {features[3].description}
-                        </p>
+                        </CP>
                    </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/HomeGlobe.tsx
+++ b/src/pages/home/HomeGlobe.tsx
@@ -35,7 +35,7 @@ export function WorldMap() {
        >
          <Eyebrow color="accent">Decentralized Network</Eyebrow>
          <SectionHeader color="light">Project Mycelium is Live.</SectionHeader>
-          <P className=" mt-4 text-base leading-relaxed" color="light">
+          <P className=" mt-4" color="light">
            Project Mycelium enables anyone to deploy
            their own Internet infrastructure, anywhere.
          </P>
@@ -67,7 +67,7 @@ export function WorldMap() {
            >
              <MagicCard
                gradientColor="#334155"
-                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
              >
                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -86,7 +86,7 @@ export function WorldMap() {
            >
              <MagicCard
                gradientColor="#334155"
-                className="shadow-xl  shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
              >
                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -105,7 +105,7 @@ export function WorldMap() {
            >
              <MagicCard
                gradientColor="#334155"
-                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
              >
                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -124,7 +124,7 @@ export function WorldMap() {
            >
              <MagicCard
                gradientColor="#334155"
-                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
              >
                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
--- 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/home/HomeSlider.tsx
+++ b/src/pages/home/HomeSlider.tsx
@@ -26,12 +26,12 @@ export function HomeSlider() {
 }


-import networkImage from "@/images/slider/network1.jpg";
-import agentImage from "@/images/slider/agent1.jpg";
-import cloudImage from "@/images/slider/cloud1.jpg";
-import gpuImage from "@/images/slider/gpu1.jpg";
-import computeImage from "@/images/slider/compute1.jpg";
-import storageImage from "@/images/slider/storage1.jpg";
+import networkImage from "/images/pages/network.webp";
+import agentImage from "/images/pages/agent.webp";
+import cloudImage from "/images/pages/cloud.webp";
+import gpuImage from "/images/pages/gpu.webp";
+import computeImage from "/images/pages/compute.webp";
+import storageImage from "/images/pages/storage.webp";

 const data = [
  {
--- a/src/pages/home/StackSection.tsx
+++ b/src/pages/home/StackSection.tsx
@@ -2,12 +2,12 @@

 import { motion } from "framer-motion";
 import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
-import { P, SectionHeader, Eyebrow } from "@/components/Texts";
+import { P, Eyebrow, H3 } from "@/components/Texts";
 import { FadeIn } from "@/components/ui/FadeIn";

 export function StackSectionLight() {
  return (
-    <section className="relative w-full overflow-hidden py-24 lg:py-40 isolate">
+    <section className="relative w-full overflow-hidden py-24 isolate">
      {/* === Background Layer === */}
      <div className="absolute inset-0 z-0 bg-transparent">
        {/* Central main aura */}
@@ -15,7 +15,7 @@ export function StackSectionLight() {
          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
          style={{
            background:
-              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 35%, rgba(255,255,255,0) 55%)",
+              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 5%, rgba(255,255,255,0) 10%)",
            filter: "blur(140px)",
          }}
          animate={{
@@ -56,13 +56,13 @@ export function StackSectionLight() {
        <div className="text-center lg:text-left z-10">
          <FadeIn>
            <Eyebrow color="accent">Technology Layers</Eyebrow>
-            <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
-              The Mycelium Stack
-            </SectionHeader>
+            <H3 color="dark" className="">
+              Mycelium Stack
+            </H3>
          </FadeIn>

          <FadeIn>
-            <P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
+            <P color="dark" className="mt-6  text-gray-600">
              Project Mycelium unifies compute, storage, networking, and AI into a resilient
              ecosystem that preserves data sovereignty, powers seamless collaboration,
              and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
--- 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' },
Author	SHA1	Message	Date
sasha-astiadi	0837a8313c	refactor: remove unused text component imports - Removed unused H2 import from HomeAurora.tsx - Removed unused SectionHeader import from StackSection.tsx - Cleaned up import statements to only include components being used	2025-10-31 03:10:39 +01:00
sasha-astiadi	b311cb22a4	feat: improve text styling and layout in home sections - Replaced custom paragraph tags with CP component for consistent text styling - Updated leading value from [1.525] to relaxed for better readability - Simplified feature descriptions while maintaining key messaging - Streamlined header styling in Stack section and removed redundant text classes - Standardized text color and spacing across sections for visual consistency	2025-10-31 03:09:47 +01:00
sasha-astiadi	b987f1a072	feat: enhance card component styling and responsiveness - Added subtle border to cards with 30% opacity gray color for improved visual definition - Increased description text size from sm to base on mobile and lg on desktop for better readability - Maintained hover and transition effects while improving visual hierarchy - Ensured consistent spacing and alignment across card elements	2025-10-31 03:09:07 +01:00
sasha-astiadi	dd4eba2215	feat: update UI styling and add new page images - Added new WebP images for different pages (agent, cloud, compute, gpu, network, storage) - Updated benefits section images with optimized WebP versions - Enhanced text styling: - Increased paragraph font size to text-xl on large screens - Adjusted H5 line height for better readability - Updated card paragraph text size to text-base - Refined visual design elements: - Changed cube stroke color to gray-600 for subtler appearance - Adjusted glow effects and gradients to	2025-10-31 03:01:17 +01:00
sasha-astiadi	ea1ef853f1	feat: add hero image for landing page - Added hero11.webp image file to public/images directory for use in website landing page	2025-10-31 01:38:26 +01:00
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
sasha-astiadi	04d08a4265	feat: update docs button text for improved UI clarity - Shortened "Read Docs" button text to "Docs" for cleaner, more concise presentation in the CallToAction component - Maintains same button styling and positioning while reducing visual clutter	2025-10-30 14:34:34 +01:00