<div class=" fade-in">
    <div class="relative isolate">
        <div class="mx-auto max-w-7xl px-6 py-24 lg:flex lg:items-center lg:gap-x-20 lg:px-8">
            <div class="mx-auto max-w-xl lg:mx-0 lg:flex-auto">
                <p class="text-base/7 font-light text-black tracking-wide">ABOUT</p>
                <h1 class="mt-2 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
                    Mycelium
                </h1>
                <h2 class="text-balance lg:text-4xl text-3xl font-normal tracking-tight text-black">Where Digital Innovation
                    Meets the Wisdom of Nature</h2>
                <p class="mt-6 text-md font-light text-stone-800 lg:text-lg">
                    At the forefront of digital evolution lies Mycelium, a visionary project at the heart of the ThreeFold Grid. More than just technology, Mycelium is a transformative force reshaping the way we connect in the digital age.
                </p>
                <p class="mt-2 text-md font-light text-stone-800 lg:text-lg">
                    We're on a mission to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
                </p>
            </div>
            <div class="mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/mycel5.jpg" 
                    alt="Mobile App Screenshot">
            </div>
        </div>
    </div>
</div>
