From b311cb22a4e2000b5126142c566961250b11ecf2 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 31 Oct 2025 03:09:47 +0100
Subject: [PATCH] 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
---
 src/components/Texts.tsx        |  2 +-
 src/pages/home/HomeBenefits.tsx | 24 ++++++++++++------------
 src/pages/home/StackSection.tsx | 10 +++++-----
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx
index c4a7c01..695dd5a 100644
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -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')
diff --git a/src/pages/home/HomeBenefits.tsx b/src/pages/home/HomeBenefits.tsx
index 56e36d6..1576bbe 100644
--- a/src/pages/home/HomeBenefits.tsx
+++ b/src/pages/home/HomeBenefits.tsx
@@ -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>
diff --git a/src/pages/home/StackSection.tsx b/src/pages/home/StackSection.tsx
index 309a4e7..9d46d14 100644
--- a/src/pages/home/StackSection.tsx
+++ b/src/pages/home/StackSection.tsx
@@ -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.