feat: improve text styling and layout in home sections

- 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:
2025-10-31 03:09:47 +01:00
parent b987f1a072
commit b311cb22a4
3 changed files with 18 additions and 18 deletions

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>