ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

feat: improve text styling and layout in home sections

Browse Source 
- Replaced custom paragraph tags with CP component for consistent text styling
- Updated leading value from [1.525] to relaxed for better readability
- Simplified feature descriptions while maintaining key messaging
- Streamlined header styling in Stack section and removed redundant text classes
- Standardized text color and spacing across sections for visual consistency
This commit is contained in:
sasha-astiadi
2025-10-31 03:09:47 +01:00
parent b987f1a072
commit b311cb22a4
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Texts.tsx
View File

@@ -160,4 +160,4 @@ export const DownloadCardDescription = createTextComponent(
)
export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-[1.525] font-light')
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-relaxed font-light')

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

@@ -2,7 +2,7 @@ import createGlobe from "cobe";
import { useEffect, useRef } from "react";
import { motion } from "motion/react";
import { IconBrandYoutubeFilled } from "@tabler/icons-react";
import { H2, P, Eyebrow } from '@/components/Texts'
import { H2, P, CP, Eyebrow } from '@/components/Texts'
export function HomeBenefits() {
@@ -16,13 +16,13 @@ export function HomeBenefits() {
{
title: "Autonomous",
description:
"The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
"The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything.",
image: "/images/benefits/autonomous.webp",
},
{
title: "Energy Efficient",
description:
"Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
"Built on distributed nodes designed for minimal energy use, it redefines sustainability without compromising performance.",
image: "/images/benefits/energy.webp",
},
{
@@ -42,7 +42,7 @@ export function HomeBenefits() {
Why It Changes Everything
</H2>
<P className="text-sm lg:text-base max-w-2xl my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
<P className=" max-w-3xl my-4 mx-auto text-center text-gray-600">
Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
</P>
</div>
@@ -60,9 +60,9 @@ export function HomeBenefits() {
</div>
<div className="w-2/3 p-2 pr-12">
<h3 className="text-lg font-semibold text-black dark:text-white">{features[0].title}</h3>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
<CP className="mt-2 text-gray-600 dark:text-gray-300">
{features[0].description}
</p>
</CP>
</div>
</div>
</div>
@@ -79,9 +79,9 @@ export function HomeBenefits() {
</div>
<div className="w-2/3 p-4">
<h3 className="text-lg font-semibold text-black dark:text-white">{features[1].title}</h3>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
<CP className="mt-2 text-gray-600 dark:text-gray-300">
{features[1].description}
</p>
</CP>
</div>
</div>
</div>
@@ -98,9 +98,9 @@ export function HomeBenefits() {
</div>
<div className="w-2/3 p-4">
<h3 className="text-lg font-semibold text-black dark:text-white">{features[2].title}</h3>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
<CP className="mt-2 text-gray-600 dark:text-gray-300">
{features[2].description}
</p>
</CP>
</div>
</div>
</div>
@@ -117,9 +117,9 @@ export function HomeBenefits() {
</div>
<div className="w-2/3 p-2 pr-12">
<h3 className="text-lg font-semibold text-black dark:text-white">{features[3].title}</h3>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
<CP className="mt-2 text-gray-600 dark:text-gray-300">
{features[3].description}
</p>
</CP>
</div>
</div>
</div>

10
src/pages/home/StackSection.tsx
View File

@@ -2,7 +2,7 @@
import { motion } from "framer-motion";
import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
import { P, SectionHeader, Eyebrow } from "@/components/Texts";
import { P, SectionHeader, Eyebrow, H3 } from "@/components/Texts";
import { FadeIn } from "@/components/ui/FadeIn";
export function StackSectionLight() {
@@ -56,13 +56,13 @@ export function StackSectionLight() {
<div className="text-center lg:text-left z-10">
<FadeIn>
<Eyebrow color="accent">Technology Layers</Eyebrow>
<SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
The Mycelium Stack
</SectionHeader>
<H3 color="dark" className="">
Mycelium Stack
</H3>
</FadeIn>
<FadeIn>
<P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
<P color="dark" className="mt-6 text-gray-600">
Project Mycelium unifies compute, storage, networking, and AI into a resilient
ecosystem that preserves data sovereignty, powers seamless collaboration,
and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.