ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 2 Pull Requests 1 Projects Releases Activity

refactor: update page title/description and enhance HomeTab card hover effects

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-19 17:45:39 +01:00
parent 29d2b76db9
commit de5d990fc9
7 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -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" />

1
src/pages/cloud/CloudHeroNew.tsx
View File

@@ -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" />

24
src/pages/home/HomeTab.tsx
View File

@@ -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>

6
src/pages/home/animations/NoCentral.tsx
View File

@@ -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 }}

2
src/pages/home/animations/NoControl.tsx
View File

@@ -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 }}

2
src/pages/home/animations/NoExtraction.tsx
View File

@@ -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={{

7
src/pages/network/NetworkDownload.tsx
View File

@@ -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">