From de5d990fc989660ac83973f0a66a36cae39d3f0b Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 19 Nov 2025 17:45:39 +0100
Subject: [PATCH] refactor: update page title/description and enhance HomeTab
 card hover effects

- Changed page title from "Unleash the Power of Decentralized Networks" to "Built for Digital Sovereignty"
- Updated meta description to emphasize sovereign peer-to-peer network and user-controlled infrastructure
- Refactored HomeTab card hover effects: moved scale transform from inner div to parent Link element
- Added border-transparent with hover:border-cyan-500 to card outline divs for cleaner hover state
- Remove
---
 index.html                                 |  4 ++--
 src/pages/cloud/CloudHeroNew.tsx           |  1 -
 src/pages/home/HomeTab.tsx                 | 24 +++++++++++-----------
 src/pages/home/animations/NoCentral.tsx    |  6 +++---
 src/pages/home/animations/NoControl.tsx    |  2 +-
 src/pages/home/animations/NoExtraction.tsx |  2 +-
 src/pages/network/NetworkDownload.tsx      |  7 ++++---
 7 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 2dade57..fb40747 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
-    <meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
+    <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." />
     <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" />
diff --git a/src/pages/cloud/CloudHeroNew.tsx b/src/pages/cloud/CloudHeroNew.tsx
index e4d1daf..edf771d 100644
--- a/src/pages/cloud/CloudHeroNew.tsx
+++ b/src/pages/cloud/CloudHeroNew.tsx
@@ -52,7 +52,6 @@ export function CloudHeroNew() {
             </div>
           </div>
         </div>
-        
       </div>
       {/* Bottom horizontal line with spacing */}
       <div className="w-full border-b  border-gray-100" />
diff --git a/src/pages/home/HomeTab.tsx b/src/pages/home/HomeTab.tsx
index 45c57ec..5fd6a7f 100644
--- a/src/pages/home/HomeTab.tsx
+++ b/src/pages/home/HomeTab.tsx
@@ -24,9 +24,9 @@ export function HomeTab() {
         <div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2 pb-12">
 
           {/* ------------------ LEFT TALL CARD ------------------ */}
-          <Link to="/network" className="relative lg:row-span-2 cursor-pointer">
+          <Link to="/network" className="relative lg:row-span-2 cursor-pointer transition-transform duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-px rounded-lg bg-white lg:rounded-l-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
 
               <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">LIVE</h3>
@@ -50,13 +50,13 @@ export function HomeTab() {
               </div>
             </div>
 
-            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 lg:rounded-l-4xl" />
+            <div className="pointer-events-none absolute inset-px rounded-lg border border-transparent shadow-sm outline outline-black/5 lg:rounded-l-4xl hover:border-cyan-500" />
           </Link>
 
           {/* ------------------ MIDDLE TOP ------------------ */}
-          <Link to="/pods" className="relative cursor-pointer max-lg:row-start-1">
+          <Link to="/pods" className="relative cursor-pointer max-lg:row-start-1 transition-transform duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-t-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
 
               <div className="px-8 pt-8 sm:px-10 sm:pt-10">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Coming Soon</h3>
@@ -75,13 +75,13 @@ export function HomeTab() {
               </div>
             </div>
 
-            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl" />
+            <div className="pointer-events-none absolute inset-px rounded-lg border border-transparent shadow-sm outline outline-black/5 max-lg:rounded-t-4xl hover:border-cyan-500" />
           </Link>
 
           {/* ------------------ MIDDLE BOTTOM ------------------ */}
-          <Link to="/agents" className="relative cursor-pointer max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
+          <Link to="/agents" className="relative cursor-pointer max-lg:row-start-3 lg:col-start-2 lg:row-start-2 transition-transform duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-px rounded-lg bg-white" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
 
               <div className="px-8 pt-8 sm:px-10 sm:pt-10">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Q1 2026</h3>
@@ -99,13 +99,13 @@ export function HomeTab() {
               </div>
             </div>
 
-            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5" />
+            <div className="pointer-events-none absolute inset-px rounded-lg border border-transparent shadow-sm outline outline-black/5 hover:border-cyan-500" />
           </Link>
 
           {/* ------------------ RIGHT TALL ------------------ */}
-          <Link to="/cloud" className="relative lg:row-span-2 cursor-pointer">
+          <Link to="/cloud" className="relative lg:row-span-2 cursor-pointer transition-transform duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-r-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
 
               <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Early Access</h3>
@@ -126,7 +126,7 @@ export function HomeTab() {
               </div>
             </div>
 
-            <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+            <div className="pointer-events-none absolute inset-px rounded-lg border border-transparent shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl hover:border-cyan-500" />
           </Link>
 
         </div>
diff --git a/src/pages/home/animations/NoCentral.tsx b/src/pages/home/animations/NoCentral.tsx
index d5220f6..6b1c62c 100644
--- a/src/pages/home/animations/NoCentral.tsx
+++ b/src/pages/home/animations/NoCentral.tsx
@@ -210,13 +210,13 @@ export default function NoCentral({
           />
         ))}
 
-        {/* Faded red “no central” mark at middle */}
+        {/* Faded grey “no central” mark at middle */}
         <motion.circle
           cx={center.x}
           cy={center.y}
           r={18}
           fill="none"
-          stroke="#FF4D4D"
+          stroke="#8B8B8B"
           strokeWidth={3}
           strokeDasharray="6 4"
           initial={{ scale: 0, opacity: 0 }}
@@ -225,7 +225,7 @@ export default function NoCentral({
         />
         <motion.path
           d={`M ${center.x - 10} ${center.y - 10} L ${center.x + 10} ${center.y + 10} M ${center.x - 10} ${center.y + 10} L ${center.x + 10} ${center.y - 10}`}
-          stroke="#FF4D4D"
+          stroke="#8B8B8B"
           strokeWidth={3}
           strokeLinecap="round"
           initial={{ opacity: 0, scale: 0 }}
diff --git a/src/pages/home/animations/NoControl.tsx b/src/pages/home/animations/NoControl.tsx
index 17d3be5..3202408 100644
--- a/src/pages/home/animations/NoControl.tsx
+++ b/src/pages/home/animations/NoControl.tsx
@@ -162,7 +162,7 @@ export default function NoControl({
         {/* Cross mark over center node (control denied) */}
         <motion.path
           d={`M ${center.x - 12} ${center.y - 12} L ${center.x + 12} ${center.y + 12} M ${center.x - 12} ${center.y + 12} L ${center.x + 12} ${center.y - 12}`}
-          stroke="#FF4D4D"
+          stroke="#8B8B8B"
           strokeWidth={3}
           strokeLinecap="round"
           initial={{ opacity: 0, scale: 0 }}
diff --git a/src/pages/home/animations/NoExtraction.tsx b/src/pages/home/animations/NoExtraction.tsx
index 52c044b..210f2c5 100644
--- a/src/pages/home/animations/NoExtraction.tsx
+++ b/src/pages/home/animations/NoExtraction.tsx
@@ -230,7 +230,7 @@ export default function NoExtraction({
           cx={center.x + 130}
           cy={center.y - 10}
           r={10}
-          fill="#FF4D4D"
+          fill="#8B8B8B"
           initial={{ scale: 0, opacity: 0 }}
           animate={{ scale: [0, 1.2, 0.8], opacity: [0, 1, 0] }}
           transition={{
diff --git a/src/pages/network/NetworkDownload.tsx b/src/pages/network/NetworkDownload.tsx
index 576dc77..2dd0214 100644
--- a/src/pages/network/NetworkDownload.tsx
+++ b/src/pages/network/NetworkDownload.tsx
@@ -7,7 +7,7 @@ import windowsIcon from '@/images/windows.svg'
 import androidIcon from '@/images/android.svg'
 import linuxIcon from '@/images/linux.svg'
 
-import { CT, CP } from '@/components/Texts'
+import { CT, CP, Eyebrow } from '@/components/Texts'
 
 const features = [
   {
@@ -50,11 +50,12 @@ export function NetworkDownload() {
       
       <div className="mx-auto max-w-7xl px-6 lg:px-8 bg-white py-12 border border-t-0 border-b-0 border-gray-100">
         <div className="mx-auto max-w-2xl lg:mx-0">
+          <Eyebrow color="accent">Get Started</Eyebrow>
           <motion.h3
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
-            className="text-4xl font-medium tracking-tight text-gray-900 lg:text-5xl"
+            className="text-4xl font-medium tracking-tight mt-2 text-gray-900 lg:text-5xl"
           >
             Download Mycelium Network
           </motion.h3>
@@ -64,7 +65,7 @@ export function NetworkDownload() {
             transition={{ duration: 0.5, delay: 0.2 }}
             className="mt-8 text-lg text-gray-600 lg:leading-8"
           >
-            Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. 
+            Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network seamlessly and efficiently. 
           </motion.p>
         </div>
         <div className="mx-auto mt-8 max-w-2xl lg:mt-12 lg:max-w-none">