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

refactor: improve NodeHero and NodeBenefits typography and layout with AnimatedSection wrappers

Browse Source 
- Changed NodeBenefits from SectionHeader to H3 component with mt-2 and text-white
- Updated NodeBenefits description from P color="light" to text-gray-200
- Changed benefit cards border-radius from rounded-2xl to rounded-md
- Added responsive padding to benefit cards: lg:p-8 p-6
- Updated benefit description from text-gray-200 to font-light text-gray-300
- Removed NodeHero background image inline style in
This commit is contained in:
sasha-astiadi
2025-11-18 12:59:48 +01:00
parent f9ee299362
commit a8d91a1624
3 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/nodes/NodeBenefits.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { motion } from "framer-motion";
import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
import { H3, P, Eyebrow, CT, CP } from "@/components/Texts";
import type { ComponentPropsWithoutRef } from "react";
type CircleIconProps = ComponentPropsWithoutRef<"svg">;
@@ -62,14 +62,13 @@ export function NodeBenefits() {
className="mx-auto max-w-5xl text-center"
>
<Eyebrow color="accent">Host</Eyebrow>
<SectionHeader
className="text-3xl font-medium tracking-tight"
color="light"
<H3
className="mt-2 text-white"
>
Benefits of Hosting Nodes
</SectionHeader>
</H3>
<P className="mt-6" color="light">
<P className="mt-6 text-gray-200">
Hosting a node gives you private compute, contributes to the global
Mycelium infrastructure, and unlocks ways to earn from real network
usage, all while keeping sovereignty and control.
@@ -95,13 +94,13 @@ export function NodeBenefits() {
delay: 0.3 + index * 0.15,
ease: "easeOut",
}}
className="rounded-2xl border border-gray-300 bg-white/5 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
className="rounded-md border border-gray-300 bg-white/5 lg:p-8 p-6 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
>
<feature.icon className="mb-4 h-8 w-8 text-white" />
<CT as="span" className="text-left font-semibold" color="light">
{feature.name}
</CT>
<CP className="mt-2 text-left text-gray-200">
<CP className="mt-2 text-left font-light text-gray-300">
{feature.description}
</CP>
</motion.li>