www_mycelium/templates/partials/apps.html

<!-- Start block -->
    <div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-20 lg:px-6">
        <div class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12">
            <h2 class="mb-4 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white"><br><br>Core Xperiences</h2>
            <p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Explore key Hero Xperiences that enhance the flexibility and security of your digital life.</p>
        </div>
        <div class="space-y-8 lg:grid lg:grid-cols-4 sm:gap-6 xl:gap-10 lg:space-y-0 mx-auto mb-8 text-center lg:mb-12">
            <!-- Pricing Card -->
            <div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <img src="images/xp4.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-20 w-auto">
                <h3 class="mb-4 text-2xl font-semibold">Hero Whisper</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Stay connected with other heroes with our secure, private messaging.</p>
            </div>
            <!-- Pricing Card -->
            <div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <img src="images/xp3.svg" alt="Icon representing Get Your Hero" class="mx-auto mb-4 h-20 w-auto">
                <h3 class="mb-4 text-2xl font-semibold">Hero Wallet</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Manage your assets with our integrated encrypted digital wallet.</p>
            </div>
            <!-- Pricing Card -->
            <div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <img src="images/glass.svg" alt="Icon representing Acquire INCA Token" class="mx-auto mb-4 h-20 w-auto">
                <h3 class="mb-4 text-2xl font-semibold">Hero Glass</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Browse the internet securely without compromising your privacy.</p>
            </div>
            <!-- Pricing Card -->
            <div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <img src="images/xp1.svg" alt="Icon representing Explore Services" class="mx-auto mb-4 h-20 w-auto">
                <h3 class="mb-4 text-2xl font-semibold">Hero Quantum</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Store, access, and share your files securely from anywhere.</p>
            </div>
        </div>
        <div class="space-y-8 lg:grid lg:grid-cols-4 sm:gap-6 xl:gap-10 lg:space-y-0">
            <!-- Pricing Card -->
            <div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <img src="images/glass2.svg" alt="Icon representing Node & Earn" class="mx-auto mb-4 h-20 w-auto">
                <h3 class="mb-4 text-2xl font-semibold">Hero Kutana</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">A Peer2Peer Secure Video Meeting Platform.</p>
            </div>
            <!-- Pricing Card -->
            <div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <img src="images/river.svg" alt="Icon representing Get Your Hero" class="mx-auto mb-4 h-20 w-auto">
                <h3 class="mb-4 text-2xl font-semibold">Hero River</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">A Safe, Truly Decentralized and compatible Social Media Platfrom.</p>
            </div>
            <!-- Pricing Card -->
            <div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <img src="images/kutana.svg" alt="Icon representing Acquire INCA Token" class="mx-auto mb-4 h-20 w-auto">
                <h3 class="mb-4 text-2xl font-semibold">Hero Sikana</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Free Education and Learning Platform from everyone to everyone.</p>
            </div>
            <!-- Pricing Card -->
            <div class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
                <img src="images/builder.svg" alt="Icon representing Explore Services" class="mx-auto mb-4 h-20 w-auto">
                <h3 class="mb-4 text-2xl font-semibold">Hero Builder</h3>
                <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Easily integrated and compatible website and book builder.</p>
            </div>
        </div>
        <div class="max-w-screen-xl px-4 py-6 mx-auto lg:py-16 lg:px-6">
            <div class="max-w-screen-md mx-auto mb-8 text-center lg:mb-12">
                <button>Explore Xperiences</button>
            </div>
        </div>       
    </div>

<!-- End block -->