ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests 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

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>