refactor: remove arrow icons and clean up "Explore Docs" button text across multiple hero sections

- Removed arrow icon (→) from "Explore Docs" buttons in CloudHeroNew, GpuHero, and StorageHero components - Removed ArrowRightIcon from HomeCTA "Explore Docs" button - Fixed whitespace formatting in CloudArchitecture "Explore Docs" button - Added comment block in Homepod for commented out "Explore Docs" button
Merge branch 'development'
2025-11-24 15:07:56 +01:00 · 2025-11-24 14:56:34 +01:00 · 2025-11-24 14:50:19 +01:00 · 2025-11-24 14:40:44 +01:00 · 2025-11-24 14:17:42 +01:00 · 2025-11-24 14:13:40 +01:00
72 changed files with 779 additions and 21 deletions
--- a/index.html
+++ b/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="google-site-verification" content="rRrZkMEhdC4yFe_BrENEzYmy2bRfD-VE6RTRiDJNLkg" />
    <title>Project Mycelium - Built for Digital Sovereignty</title>
    <meta name="description" content="Discover Project Mycelium. A sovereign peer-to-peer network for private communication, storage, and compute. Build and run your digital environment on infrastructure you control." />
-    <meta name="keywords" content="Project Mycelium, Mycelium, digital sovereignty, decentralized network, peer-to-peer infrastructure, private storage, secure compute, sovereign cloud, edge cloud" />
+    <meta name="keywords" content="Project Mycelium, ProjectMycelium, projectmycelium, Mycelium, decentralized network, peer-to-peer infrastructure, private storage, secure compute, sovereign cloud, edge cloud" />
    <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" />
--- a/public/favicon-32.png
+++ b/public/favicon-32.png
--- a/public/images/audience/1.jpg
+++ b/public/images/audience/1.jpg
--- a/public/images/audience/2.jpg
+++ b/public/images/audience/2.jpg
--- a/public/images/audience/3.jpg
+++ b/public/images/audience/3.jpg
--- a/public/images/audience/4.jpg
+++ b/public/images/audience/4.jpg
--- a/public/images/audience/5.jpg
+++ b/public/images/audience/5.jpg
--- a/public/images/audience/6.jpg
+++ b/public/images/audience/6.jpg
--- a/public/images/audience/7.jpg
+++ b/public/images/audience/7.jpg
--- a/public/images/audience/8.jpg
+++ b/public/images/audience/8.jpg
--- a/public/images/audiences/1.jpg
+++ b/public/images/audiences/1.jpg
--- a/public/images/audiences/2.jpg
+++ b/public/images/audiences/2.jpg
--- a/public/images/audiences/3.jpg
+++ b/public/images/audiences/3.jpg
--- a/public/images/audiences/4.jpg
+++ b/public/images/audiences/4.jpg
--- a/public/images/audiences/5.jpg
+++ b/public/images/audiences/5.jpg
--- a/public/images/audiences/6.jpg
+++ b/public/images/audiences/6.jpg
--- a/public/images/audiences/7.jpg
+++ b/public/images/audiences/7.jpg
--- a/public/images/audiences/8.jpg
+++ b/public/images/audiences/8.jpg
--- a/public/images/mediakit/logo_dark.zip
+++ b/public/images/mediakit/logo_dark.zip
--- a/public/images/mediakit/logo_dark/logo_dark.png
+++ b/public/images/mediakit/logo_dark/logo_dark.png
--- a/public/images/mediakit/logo_dark/logo_dark.svg
+++ b/public/images/mediakit/logo_dark/logo_dark.svg
--- a/public/images/mediakit/logo_dark/logomark.png
+++ b/public/images/mediakit/logo_dark/logomark.png
--- a/public/images/mediakit/logo_dark/logomark.svg
+++ b/public/images/mediakit/logo_dark/logomark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>
--- a/public/images/mediakit/logo_light.zip
+++ b/public/images/mediakit/logo_light.zip
--- a/public/images/mediakit/logo_light/logo.png
+++ b/public/images/mediakit/logo_light/logo.png
--- a/public/images/mediakit/logo_light/logo.svg
+++ b/public/images/mediakit/logo_light/logo.svg
--- a/public/images/mediakit/logo_light/logomark.png
+++ b/public/images/mediakit/logo_light/logomark.png
--- a/public/images/mediakit/logo_light/logomark.svg
+++ b/public/images/mediakit/logo_light/logomark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,6 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://www.projectmycelium.com/sitemap.xml
+
+
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://www.projectmycelium.com/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/cloud</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/network</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/agents</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/download</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/compute</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/storage</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/gpu</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/pods</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/nodes</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://www.projectmycelium.com/mediakit</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+</urlset>
+
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
 const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
 const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
 const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
+const MediaPage = lazy(() => import('./pages/mediakit/MediaPage'));

 function ScrollToTop() {
  const { pathname, hash } = useLocation();
@@ -49,6 +50,7 @@ function App() {
                        <Route path="gpu" element={<GpuPage />} />
            <Route path="pods" element={<PodsPage />} />
            <Route path="nodes" element={<NodesPage />} />
+            <Route path="mediakit" element={<MediaPage />} />
          </Route>
        </Routes>
      </Suspense>
--- a/src/assets/fonts/Mulish.zip
+++ b/src/assets/fonts/Mulish.zip
--- a/src/assets/fonts/Mulish/Mulish-Italic-VariableFont_wght.ttf
+++ b/src/assets/fonts/Mulish/Mulish-Italic-VariableFont_wght.ttf
--- a/src/assets/fonts/Mulish/Mulish-VariableFont_wght.ttf
+++ b/src/assets/fonts/Mulish/Mulish-VariableFont_wght.ttf
--- a/src/assets/fonts/Mulish/OFL.txt
+++ b/src/assets/fonts/Mulish/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2016 The Mulish Project Authors (https://github.com/googlefonts/mulish)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/src/assets/fonts/Mulish/README.txt
+++ b/src/assets/fonts/Mulish/README.txt
@@ -0,0 +1,79 @@
+Mulish Variable Font
+====================
+
+This download contains Mulish as both variable fonts and static fonts.
+
+Mulish is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Mulish/Mulish-VariableFont_wght.ttf
+  Mulish/Mulish-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Mulish:
+  Mulish/static/Mulish-ExtraLight.ttf
+  Mulish/static/Mulish-Light.ttf
+  Mulish/static/Mulish-Regular.ttf
+  Mulish/static/Mulish-Medium.ttf
+  Mulish/static/Mulish-SemiBold.ttf
+  Mulish/static/Mulish-Bold.ttf
+  Mulish/static/Mulish-ExtraBold.ttf
+  Mulish/static/Mulish-Black.ttf
+  Mulish/static/Mulish-ExtraLightItalic.ttf
+  Mulish/static/Mulish-LightItalic.ttf
+  Mulish/static/Mulish-Italic.ttf
+  Mulish/static/Mulish-MediumItalic.ttf
+  Mulish/static/Mulish-SemiBoldItalic.ttf
+  Mulish/static/Mulish-BoldItalic.ttf
+  Mulish/static/Mulish-ExtraBoldItalic.ttf
+  Mulish/static/Mulish-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
--- a/src/assets/fonts/Mulish/static/Mulish-Black.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-Black.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-BlackItalic.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-BlackItalic.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-Bold.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-Bold.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-BoldItalic.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-BoldItalic.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-ExtraBold.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-ExtraBold.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-ExtraBoldItalic.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-ExtraBoldItalic.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-ExtraLight.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-ExtraLight.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-ExtraLightItalic.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-ExtraLightItalic.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-Italic.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-Italic.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-Light.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-Light.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-LightItalic.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-LightItalic.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-Medium.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-Medium.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-MediumItalic.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-MediumItalic.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-Regular.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-Regular.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-SemiBold.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-SemiBold.ttf
--- a/src/assets/fonts/Mulish/static/Mulish-SemiBoldItalic.ttf
+++ b/src/assets/fonts/Mulish/static/Mulish-SemiBoldItalic.ttf
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -30,6 +30,9 @@ export function Footer() {
              <Link to="/nodes" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                Nodes
              </Link>
+              <Link to="/mediakit" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Media Kit
+              </Link>
            </nav>
          </div>
          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { smoothScrollToElement } from '@/utils/scroll'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/mainlogo.svg'
@@ -9,6 +10,17 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const handleGetConnectorClick = () => {
+    if (location.pathname === '/network') {
+      smoothScrollToElement('download', 1200)
+    } else {
+      navigate('/network')
+    }
+  }
+
  return (
    <header className="bg-white">
      <nav className="border-b border-gray-100">
@@ -61,7 +73,7 @@ export function Header() {
              >
                Deploy Now
              </Button>
-              <Button to="/download" variant="solid" color="cyan">
+              <Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
                Get Mycelium Connector
              </Button>
            </div>
@@ -150,7 +162,15 @@ export function Header() {
                >
                  Start Deployment
                </Button>
-                <Button to="/download" variant="solid" color="cyan" className="mt-4 w-full" onClick={() => setMobileMenuOpen(false)}>
+                <Button
+                  variant="solid"
+                  color="cyan"
+                  className="mt-4 w-full"
+                  onClick={() => {
+                    setMobileMenuOpen(false)
+                    handleGetConnectorClick()
+                  }}
+                >
                  Get Mycelium Connector
                </Button>
              </div>
--- a/src/components/HeaderDark.tsx
+++ b/src/components/HeaderDark.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { smoothScrollToElement } from '@/utils/scroll'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/mainlogo.svg'
@@ -9,6 +10,17 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 export function HeaderDark() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const handleGetConnectorClick = () => {
+    if (location.pathname === '/network') {
+      smoothScrollToElement('download', 1200)
+    } else {
+      navigate('/network')
+    }
+  }
+
  return (
    <header className="bg-[#111111]">
      <nav className="border-b border-gray-800">
@@ -61,7 +73,7 @@ export function HeaderDark() {
              >
                Deploy Now
              </Button>
-              <Button to="/download" variant="solid" color="cyan">
+              <Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
                Get Mycelium Connector
              </Button>
            </div>
@@ -150,7 +162,15 @@ export function HeaderDark() {
                >
                  Start Deployment
                </Button>
-                <Button to="/download" variant="solid" color="cyan" className="mt-4 w-full" onClick={() => setMobileMenuOpen(false)}>
+                <Button
+                  variant="solid"
+                  color="cyan"
+                  className="mt-4 w-full"
+                  onClick={() => {
+                    setMobileMenuOpen(false)
+                    handleGetConnectorClick()
+                  }}
+                >
                  Get Mycelium Connector
                </Button>
              </div>
--- a/src/components/ui/floating-navbar.tsx
+++ b/src/components/ui/floating-navbar.tsx
@@ -6,9 +6,10 @@ import {
  useScroll,
  useMotionValueEvent,
 } from "motion/react";
-import { Link } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { Button } from "../Button";
+import { smoothScrollToElement } from "@/utils/scroll";


 export const FloatingNav = ({
@@ -23,8 +24,17 @@ export const FloatingNav = ({
  className?: string;
 }) => {
  const { scrollYProgress } = useScroll();
-
  const [visible, setVisible] = useState(true);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const handleGetConnectorClick = () => {
+    if (location.pathname === "/network") {
+      smoothScrollToElement("download", 1200);
+    } else {
+      navigate("/network");
+    }
+  };

  useMotionValueEvent(scrollYProgress, "change", (current) => {
    if (typeof current === "number") {
@@ -80,7 +90,7 @@ export const FloatingNav = ({
          >
            <span className="hidden sm:block text-sm">Docs</span>
          </a>
-          <Button to="/download" variant="solid" color="cyan">
+          <Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
            Get Mycelium Connector
          </Button>
        </div>
--- a/src/pages/cloud/CloudHeroNew.tsx
+++ b/src/pages/cloud/CloudHeroNew.tsx
@@ -47,7 +47,7 @@ export function CloudHeroNew() {
                target="_blank"
                rel="noopener noreferrer"
              >
-                Explore Docs <span aria-hidden="true">→</span>
+                Explore Docs
              </Button>
            </div>
          </div>
--- a/src/pages/gpu/GpuHero.tsx
+++ b/src/pages/gpu/GpuHero.tsx
@@ -26,7 +26,7 @@ export function GpuHero() {
                How it works
              </Button>
              <Button to="#gpu-architecture" as="a" variant="outline">
-                Explore Docs <span aria-hidden="true">→</span>
+                Explore Docs
              </Button>
            </div>
          </div>
--- a/src/pages/home/CallToAction.tsx
+++ b/src/pages/home/CallToAction.tsx
@@ -51,7 +51,7 @@ export function CallToAction() {
            </P>

            <div className="mt-10 flex flex-wrap justify-center items-center gap-x-6 gap-y-4">
-              <Button to="/network#download" variant="solid" color="cyan">
+              <Button to="/network" variant="solid" color="cyan">
                Join the Network
              </Button>

--- a/src/pages/home/archive/HomeCTA.tsx
+++ b/src/pages/home/archive/HomeCTA.tsx
@@ -30,7 +30,6 @@ export function HomeCTA() {
          {/* Button 2 */}
          <button className="inline-flex items-center justify-between bg-white border border-gray-300 rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:border-cyan-500 transition">
            Explore Docs
-            <ArrowRightIcon className="h-4 w-4 ml-2 text-gray-700" />
          </button>

        </div>
--- a/src/pages/mediakit/MediaColors.tsx
+++ b/src/pages/mediakit/MediaColors.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { H3, H4, CT, CP } from '@/components/Texts'
+
+export function MediaColors() {
+  return (
+     <section className="relative w-full bg-[#121212] overflow-hidden">
+      {/* TOP LINE */}
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+        {/* Inner padding */}
+        <div className="max-w-7xl relative px-6 lg:px-8 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
+          <H3 as="h1" className="mt-4 text-white">
+            Colors
+          </H3>
+          {/* primary */}
+          <H4 className="mt-8 text-gray-200 tracking-normal flex items-center gap-2">
+            <span>Primary Colors</span>
+            
+          </H4>
+
+          <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className=" border border-gray-800 bg-[#111111] p-5 flex flex-col justify-between">
+              <div>
+                <CT className="text-sm font-medium text-white">Dark Gray</CT>
+                <CP className="text-xs text-gray-200 mt-1">Primary background for dark surfaces and key sections.</CP>
+              </div>
+              <div className="mt-4 h-16 w-full border border-gray-700 bg-[#111111]" />
+              <p className="mt-3 text-xs text-gray-500">Hex: #111111</p>
+            </div>
+
+            <div className="border border-gray-800 bg-[#ffffff] p-5 flex flex-col justify-between">
+              <div>
+                <CT className="text-sm font-medium text-gray-900">White</CT>
+                <CP className="text-xs text-gray-600 mt-1">Base surface color for light areas and content blocks.</CP>
+              </div>
+              <div className="mt-4 h-16 w-full border border-gray-200 bg-[#ffffff]" />
+              <p className="mt-3 text-xs text-gray-500">Hex: #ffffff</p>
+            </div>
+
+            <div className="border border-cyan-500/40 bg-[#0b1720] p-5 flex flex-col justify-between">
+              <div>
+                <CT className="text-sm font-medium text-cyan-300">Vivid Azure</CT>
+                <CP className="text-xs text-cyan-100 mt-1">Accent color used for highlights, links, and actions.</CP>
+              </div>
+              <div className="mt-4 h-16 w-full bg-[#22d3ee]" />
+              <p className="mt-3 text-xs text-cyan-100">Hex: #22d3ee</p>
+            </div>
+          </div>
+
+          <H4 className="mt-12 text-gray-200 tracking-normal flex items-center gap-2">
+            <span>Secondary Colors</span>
+          </H4>
+
+          <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="border border-gray-800 bg-[#121212] p-5 flex flex-col justify-between">
+              <div>
+                <CT className="text-sm font-medium text-gray-200">Deep Gray</CT>
+                <CP className="text-xs text-gray-200 mt-1">Supporting background for overlays and dark UI elements.</CP>
+              </div>
+              <div className="mt-4 h-16 w-full border border-gray-700 bg-[#121212]" />
+              <p className="mt-3 text-xs text-gray-500">Hex: #121212</p>
+            </div>
+
+            <div className="border border-gray-800 bg-[#fdfdfd] p-5 flex flex-col justify-between">
+              <div>
+                <CT className="text-sm font-medium text-gray-900">Soft White</CT>
+                <CP className="text-xs text-gray-600 mt-1">Subtle light background for sections and cards.</CP>
+              </div>
+              <div className="mt-4 h-16 w-full border border-gray-200 bg-[#fdfdfd]" />
+              <p className="mt-3 text-xs text-gray-500">Hex: #fdfdfd</p>
+            </div>
+
+            <div className="border border-cyan-500/40 bg-[#0b1720] p-5 flex flex-col justify-between">
+              <div>
+                <CT className="text-sm font-medium text-cyan-300">Dark Azure</CT>
+                <CP className="text-xs text-cyan-100 mt-1">Secondary accent color for highlights and focus states.</CP>
+              </div>
+              <div className="mt-4 h-16 w-full bg-[#06B6D4]" />
+              <p className="mt-3 text-xs text-cyan-100">Hex: #06B6D4</p>
+            </div>
+          </div>
+        </div>
+
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-800" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+    </section>  
+  )
+}
--- a/src/pages/mediakit/MediaHero.tsx
+++ b/src/pages/mediakit/MediaHero.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { H3, H4, P } from '@/components/Texts'
+
+const logo_light = [
+  {
+    id: 'logomark_svg',
+    title: 'Logomark (SVG)',
+    image: '/images/mediakit/logo_light/logomark.svg',
+  },
+  {
+    id: 'logomark_png',
+    title: 'Logomark (PNG)',
+    image: '/images/mediakit/logo_light/logomark.png',
+  },
+  {
+    id: 'logo_svg',
+    title: 'Logo (SVG)',
+    image: '/images/mediakit/logo_light/logo.svg',
+  },
+  {
+    id: 'logo_png',
+    title: 'Logo (PNG)',
+    image: '/images/mediakit/logo_light/logo.png',
+  },
+]
+
+const logo_dark = [
+  {
+    id: 'logomark_svg',
+    title: 'Logomark (SVG)',
+    image: '/images/mediakit/logo_dark/logomark.svg',
+  },
+  {
+    id: 'logomark_png',
+    title: 'Logomark (PNG)',
+    image: '/images/mediakit/logo_dark/logomark.png',
+  },
+  {
+    id: 'logo_svg',
+    title: 'Logo (SVG)',
+    image: '/images/mediakit/logo_dark/logo_dark.svg',
+  },
+  {
+    id: 'logo_png',
+    title: 'Logo (PNG)',
+    image: '/images/mediakit/logo_dark/logo_dark.png',
+  },
+]
+
+export function MediaHero() {
+  return (
+    <div className="">
+      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden">
+        <div className="px-6 lg:py-12">
+          <div className="max-w-7xl lg:pl-6">
+            <H3 as="h1" className="mt-4">
+              Media Kit
+            </H3>
+            <P className="mt-4 text-gray-600 max-w-2xl">
+              Download official Mycelium logos for light and dark backgrounds in SVG and PNG formats.
+            </P>
+
+            <H4 className="lg:mt-8 mt-4 text-gray-800 tracking-normal flex items-center gap-2">
+              <span>Mycelium Logos (Light)</span>
+              <a
+                href="/images/mediakit/logo_light.zip"
+                download
+                className="inline-flex items-center justify-center rounded-full p-1 text-gray-800 hover:text-cyan-600 hover:bg-cyan-50 transition-colors text-[10px] md:text-xs md:p-1.5"
+                aria-label="Download Mycelium light logos zip"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  className="h-5 w-5 md:h-6 md:w-6"
+                >
+                  <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
+                  <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
+                </svg>
+              </a>
+            </H4>
+
+            <div className="mt-6 max-w-7xl mx-auto">
+              <dl className="grid grid-cols-1 lg:grid-cols-4 gap-2 lg:gap-0">
+                {logo_light.map((item) => (
+                  <div
+                    key={item.id}
+                    className="group gap-2 bg-white px-4 py-2 border border-gray-100 lg:border-t lg:border-b border-l-0.5 border-r-0.5 transition-all duration-300 ease-in-out hover:scale-[1.02] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+                  >
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className="h-20 w-auto object-contain opacity-90"
+                    />
+                    <div className="text-left">
+                      <h3 className="flex items-center gap-2 text-base font-semibold tracking-wide text-gray-900 mb-2">
+                        <span>{item.title}</span>
+                        <a
+                          href={item.image}
+                          download
+                          className="inline-flex items-center justify-center rounded-full p-1 text-gray-900 hover:text-cyan-600 hover:bg-cyan-50 transition-colors"
+                          aria-label={`Download ${item.title}`}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            className="h-6 w-6"
+                          >
+                            <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
+                            <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
+                          </svg>
+                        </a>
+                      </h3>
+                    </div>
+                  </div>
+                ))}
+              </dl>
+            </div>
+
+            <H4 className="mt-8 text-gray-800 tracking-normal flex items-center gap-2">
+              <span>Mycelium Logos (Dark)</span>
+              <a
+                href="/images/mediakit/logo_dark.zip"
+                download
+                className="inline-flex items-center justify-center rounded-full p-1 text-gray-800 hover:text-cyan-600 hover:bg-cyan-50 transition-colors text-[10px] md:text-xs md:p-1.5"
+                aria-label="Download Mycelium dark logos zip"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  className="h-5 w-5 md:h-6 md:w-6"
+                >
+                  <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
+                  <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
+                </svg>
+              </a>
+            </H4>
+
+            <div className="bg-[#121212] w-full max-w-8xl mx-auto mt-6">
+              <dl className="grid grid-cols-1 lg:grid-cols-4 gap-0">
+                {logo_dark.map((item) => (
+                  <div
+                    key={item.id}
+                    className="group gap-2 bg-[#121212] px-4 py-2 border border-gray-800 lg:border-t lg:border-b border-l-0.5 border-r-0.5 transition-all duration-300 ease-in-out hover:scale-[1.02] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+                  >
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      className="h-20 w-auto object-contain opacity-90"
+                    />
+                    <div className="text-left">
+                      <h3 className="flex items-center gap-2 text-base font-semibold tracking-wide text-white mb-2">
+                        <span>{item.title}</span>
+                        <a
+                          href={item.image}
+                          download
+                          className="inline-flex items-center justify-center rounded-full p-1 text-white hover:text-cyan-600 hover:bg-cyan-50 transition-colors"
+                          aria-label={`Download ${item.title}`}
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            className="h-6 w-6"
+                          >
+                            <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
+                            <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
+                          </svg>
+                        </a>
+                      </h3>
+                    </div>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+    </div>
+  )
+}
--- a/src/pages/mediakit/MediaPage.tsx
+++ b/src/pages/mediakit/MediaPage.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { AnimatedSection } from '@/components/AnimatedSection';
+import { MediaHero } from './MediaHero';
+import { MediaColors } from './MediaColors';
+import { MediaType } from './MediaType';
+
+const MediaPage: React.FC = () => {
+  return (
+    <>
+      <AnimatedSection>
+        <MediaHero />
+      </AnimatedSection>
+      <AnimatedSection>
+        <MediaColors />
+      </AnimatedSection>
+      <AnimatedSection>
+        <MediaType />
+      </AnimatedSection>
+    </>
+  );
+};
+
+export default MediaPage;
--- a/src/pages/mediakit/MediaType.tsx
+++ b/src/pages/mediakit/MediaType.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import { Eyebrow, H3, P, CT, CP } from '@/components/Texts'
+
+export function MediaType() {
+  return (
+    <div className="">
+      {/* Boxed container */}
+      <div
+        className="relative  py-12 mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden"
+      >
+        {/* Inner padding */}
+        <div className="px-6 lg:py-12 ">
+          <div className="max-w-7xl lg:pl-6">
+            <div className="flex flex-col md:flex-row md:items-center gap-3 md:gap-6">
+              <H3 as="h1" className="text-gray-900">
+                Typography
+              </H3>
+              <a
+                href="/src/assets/fonts/Mulish.zip"
+                download
+                className="lg:mt-4 mt-4 inline-flex w-auto self-start items-center gap-2 rounded-full border border-gray-200 px-3 py-1 text-xs md:text-sm lg:text-base md:px-3.5 md:py-1.5 font-medium text-gray-700 hover:text-cyan-600 hover:border-cyan-500 hover:bg-cyan-50 transition-colors"
+                aria-label="Download Mulish font family"
+              >
+                <span>Download Mulish</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  className="h-3 w-3 md:h-4 md:w-4"
+                >
+                  <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
+                  <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
+                </svg>
+              </a>
+            </div>
+
+            <P className="mt-6 text-gray-600 max-w-3xl">
+              Mycelium uses a consistent type scale built on Mulish and Inter. Below are the primary text
+              primitives you can reuse in design and implementation.
+            </P>
+
+            <div className="mt-8  bg-white px-6 py-8 text-black border border-gray-100">
+              {/* Eyebrow */}
+              <div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Eyebrow</P>
+                  <P className="text-xs text-gray-400">
+                    H2 · text-base/7 · font-semibold · uppercase · tracking-[0.16em] · color: Vivid Azure
+                  </P>
+                </div>
+                <Eyebrow className="mt-2">
+                  THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
+                </Eyebrow>
+              </div>
+
+              {/* Header (H3) */}
+              <div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Header (H3)</P>
+                  <P className="  text-xs text-gray-400">
+                    h3 · text-3xl lg:text-5xl · font-medium · leading-tight · tracking-tight
+                  </P>
+                </div>
+                <H3 className="mt-2 text-gray-900">
+                  The quick brown fox jumps over the lazy dog
+                </H3>
+              </div>
+
+              {/* Paragraphs (P) */}
+              <div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Paragraphs (P)</P>
+                  <P className="  text-xs text-gray-400">
+                    p · text-base lg:text-xl · leading-relaxed · regular weight
+                  </P>
+                </div>
+                <P className="mt-2 text-gray-700 max-w-3xl">
+                  The quick brown fox jumps over the lazy dog. Use this for body copy, descriptions, and
+                  longer explanatory text.
+                </P>
+              </div>
+
+              {/* Card Title (CT) */}
+              <div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Card Title (CT)</P>
+                  <P className="  text-xs text-gray-400">
+                    span · text-base lg:text-lg · leading-normal · font-medium
+                  </P>
+                </div>
+                <CT className="mt-2 text-gray-900">
+                  The quick brown fox jumps over the lazy dog
+                </CT>
+              </div>
+
+              {/* Card Texts (CP) */}
+              <div className="space-y-1">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Card Texts (CP)</P>
+                  <P className="  text-xs text-gray-400">
+                    p ·  text-xs lg:text-base · tracking-wide · leading-normal · font-light
+                  </P>
+                </div>
+                <CP className="mt-2 text-gray-700 max-w-3xl">
+                  The quick brown fox jumps over the lazy dog. Use CP for supporting copy inside cards,
+                  metrics, and short descriptions.
+                </CP>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* ✅ Bottom horizontal line with spacing above footer */}
+      <div className="w-full border-b border-gray-100" />
+      
+    </div>
+  )
+}
--- a/src/pages/network/CallToAction.tsx
+++ b/src/pages/network/CallToAction.tsx
@@ -2,6 +2,7 @@

 import { Container } from '@/components/Container'
 import { Button } from "@/components/Button";
+import { smoothScrollToElement } from "@/utils/scroll";

 export function CallToAction() {
  return (
@@ -50,7 +51,8 @@ Use the network to link environments, deploy workloads, or host nodes to strengt

            {/* ✅ Two cards, stacked center with spacing */}
            <div className="mt-10 flex flex-wrap justify-center items-center gap-x-6 gap-y-4">
-              <Button to="/network" variant="solid" color="cyan">
+              <Button variant="solid" color="cyan" onClick={() => smoothScrollToElement('download', 1200)}
+                            >
                Join the Network
              </Button>

--- a/src/pages/network/Hero.tsx
+++ b/src/pages/network/Hero.tsx
@@ -1,6 +1,7 @@
 import { useId } from 'react'
 import { Container } from '@/components/Container'
 import { Button } from '@/components/Button'
+import { smoothScrollToElement } from '@/utils/scroll'
 import phoneFrame from '../../images/phoneframe.png'
 import { H3, P
  , Eyebrow } from "@/components/Texts";
@@ -93,7 +94,11 @@ export function Hero() {
              Your Pod is your personal gateway to the network.
            </P>
            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-              <Button to="/download" variant="solid" color="cyan">
+              <Button
+                variant="solid"
+                color="cyan"
+                onClick={() => smoothScrollToElement('download', 1200)}
+              >
                Get Started
              </Button>
              <Button
--- a/src/pages/nodes/NodeHero.tsx
+++ b/src/pages/nodes/NodeHero.tsx
@@ -2,6 +2,7 @@

 import { Button } from '@/components/Button'
 import { Eyebrow, H3, P } from '@/components/Texts'
+import { smoothScrollToElement } from '@/utils/scroll'

 export function NodeHero() {
  return (
@@ -28,10 +29,14 @@ export function NodeHero() {
              The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
            </P>
            <div className="mt-10 flex items-center gap-x-6">
-              <Button to="#node-getting-started" as="a" variant="solid" color="cyan">
+              <Button
+                variant="solid"
+                color="cyan"
+                onClick={() => smoothScrollToElement('node-how-it-works', 1200)}
+              >
                How it works
              </Button>
-              <Button to="#node-architecture" as="a" variant="outline">
+              <Button to="https://threefold.info/mycelium_economics/docs/faq/hosting_faq" as="a" variant="outline" target="_blank">
                Explore Docs
              </Button>
            </div>
--- a/src/pages/nodes/NodeSteps.tsx
+++ b/src/pages/nodes/NodeSteps.tsx
@@ -37,7 +37,7 @@ const steps = [

 export function NodeSteps() {
  return (
-    <section className="w-full max-w-8xl mx-auto bg-transparent">
+    <section id="node-how-it-works" className="w-full max-w-8xl mx-auto bg-transparent">

      {/* Header spacing + borders */}
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
--- a/src/pages/pods/Homepod.tsx
+++ b/src/pages/pods/Homepod.tsx
@@ -45,9 +45,12 @@ export default function Homepod() {
              >
                Join the Waitlist
              </Button>
+              
+              {/* The updated onClick handler calls the function 
              <Button to="#" variant="outline">
                Explore Docs
              </Button>
+              */}
            </div>
          </div>
        </div>
--- a/src/pages/storage/StorageHero.tsx
+++ b/src/pages/storage/StorageHero.tsx
@@ -30,7 +30,7 @@ export function StorageHero() {
                as="a"
                variant="outline"
              >
-                Explore Docs <span aria-hidden="true">→</span>
+                Explore Docs
              </Button>
            </div>
          </div>
--- a/src/utils/scroll.ts
+++ b/src/utils/scroll.ts
@@ -0,0 +1,28 @@
+export function smoothScrollToElement(id: string, duration = 800) {
+  const element = document.getElementById(id)
+  if (!element) return
+
+  const startY = window.scrollY || window.pageYOffset
+  const targetRect = element.getBoundingClientRect()
+  const targetY = startY + targetRect.top
+  const startTime = performance.now()
+
+  function easeInOutQuad(t: number) {
+    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
+  }
+
+  function step(currentTime: number) {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / duration, 1)
+    const eased = easeInOutQuad(progress)
+    const nextY = startY + (targetY - startY) * eased
+
+    window.scrollTo(0, nextY)
+
+    if (progress < 1) {
+      requestAnimationFrame(step)
+    }
+  }
+
+  requestAnimationFrame(step)
+}
Author	SHA1	Message	Date
sasha-astiadi	67fb2fd4ac	refactor: remove arrow icons and clean up "Explore Docs" button text across multiple hero sections - Removed arrow icon (→) from "Explore Docs" buttons in CloudHeroNew, GpuHero, and StorageHero components - Removed ArrowRightIcon from HomeCTA "Explore Docs" button - Fixed whitespace formatting in CloudArchitecture "Explore Docs" button - Added comment block in Homepod for commented out "Explore Docs" button	2025-11-24 15:07:56 +01:00
sasha-astiadi	3071e87a9d	Merge branch 'development'	2025-11-24 14:56:34 +01:00
sasha-astiadi	a0fb98409f	refactor: update CallToAction "Join the Network" button to scroll to download section instead of node-how-it-works - Changed smoothScrollToElement target from 'node-how-it-works' to 'download' section - Maintained 1200ms scroll duration	2025-11-24 14:50:19 +01:00
sasha-astiadi	c9335d2c5a	refactor: update CallToAction "Join the Network" button to use smooth scroll instead of navigation link - Changed Button from navigation link with to="/network" to onClick handler with smooth scroll behavior - Added smoothScrollToElement import from @/utils/scroll - Implemented smooth scroll to #node-how-it-works section with 1200ms duration - Removed to prop from Button component	2025-11-24 14:40:44 +01:00
sasha-astiadi	05974f5b0e	Merge branch 'development'	2025-11-24 14:17:42 +01:00
sasha-astiadi	6b4c7b3329	refactor: implement smart navigation for "Get Mycelium Connector" button with smooth scroll utility - Added smoothScrollToElement utility function in src/utils/scroll.ts with easeInOutQuad animation and configurable duration - Changed Header and HeaderDark "Get Mycelium Connector" button from static /download link to onClick handler with conditional navigation - Added handleGetConnectorClick function that scrolls to #download section when on /network page, otherwise navigates to /network - Change	2025-11-24 14:13:40 +01:00
sasha-astiadi	a22a8ddcc9	refactor: update navigation links in CallToAction and NodeHero components - Changed CallToAction "Join the Network" button from /network#download to /network - Changed NodeHero "Explore Docs" button from #node-architecture anchor to external ThreeFold hosting FAQ link with target="_blank"	2025-11-24 13:29:07 +01:00
sasha-astiadi	a00c090162	Merge branch 'development'	2025-11-24 13:10:41 +01:00
sasha-astiadi	8e621c28b3	refactor: update NodeHero "How it works" button to use smooth scroll with onClick handler instead of anchor link - Changed Button from anchor link with to="#node-getting-started" to onClick handler with smooth scroll behavior - Added id="node-how-it-works" to NodeSteps section for scroll target - Removed as="a" prop from Button component - Implemented scrollIntoView with smooth behavior and start block positioning	2025-11-24 13:09:22 +01:00
ehab-hassan	3a217c2d66	updated search keyword	2025-11-24 10:17:16 +02:00
ehab-hassan	ea8c3546c9	addedd png logo for google search	2025-11-23 13:20:37 +02:00
ehab-hassan	c784783242	added sitemap	2025-11-23 12:35:59 +02:00
sasha-astiadi	09ac38f598	refactor: remove unused imports from MediaColors and MediaType components - Removed unused Eyebrow and P imports from MediaColors component - Removed unused logo_light and logo_dark data arrays from MediaColors component - Removed unused H4 import from MediaType component	2025-11-21 17:52:35 +01:00
sasha-astiadi	c68a46691f	refactor: improve MediaHero and MediaType responsive design for mobile and tablet viewports - Changed MediaHero H4 top margin from mt-8 to lg:mt-8 mt-4 for better mobile spacing - Changed download button icon size from h-12 w-12 to h-5 w-5 md:h-6 md:w-6 with responsive padding and text sizing - Changed logo_dark grid gap from gap-2 lg:gap-0 to gap-0 for consistent spacing - Changed logo_dark border color from border-gray-100 to border-gray-800 for better dark background contrast - Changed Media	2025-11-21 17:51:20 +01:00
sasha-astiadi	5a6d58dd85	refactor: enhance MediaType typography section with download button and text primitive examples - Added download button for Mulish font family with hover states and download icon - Changed H3 title color from default to text-gray-900 and removed top margin - Added descriptive paragraph explaining Mycelium's type scale - Added typography showcase section displaying all text primitives (Eyebrow, H3, P, CT, CP) with usage specifications and examples - Changed MediaColors Deep Gray description text	2025-11-21 17:41:39 +01:00
sasha-astiadi	fdd0109ffc	refactor: remove unused audience images and add Media Kit page route - Deleted 8 audience images from public/images/audience/ directory (1.jpg through 8.jpg) - Deleted 8 audience images from public/images/audiences/ directory (1.jpg through 8.jpg) - Added lazy-loaded MediaPage route at /mediakit path in App.tsx - Added Media Kit navigation link to Footer component with hover styling	2025-11-21 17:32:30 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>