forked from emre/www_projectmycelium_com
		
	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:
		@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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.
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user