www_mycelium/templates/partials/heroapps.html

<div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-24 lg:pb-12 lg:px-6">
    <!-- Row -->
    <div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
        <div class="lg:col-span-1">
            <h2>Do Anything. Do Everything.</h2>
            <p>From secure file sharing to encrypted communication, your Hero comes equipped with all the essential skills and capabilities needed to enhance the flexibility and security of your digital life.</p>
            <!-- List in Two Columns -->
            <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-4 pt-8 border-t border-gray-200 my-7 dark:border-gray-700">
                <li class="flex items-center space-x-3">
                            <!-- Icon -->
                            <svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="flex flex-col">
                                <h5>Communication</h5>
                                <p class="text-sm font-light text-gray-500 dark:text-gray-400">Chat, hold meetings, and video conferencing.</p>
                            </div>
                    </li>
                    <li class="flex items-center space-x-3">
                            <!-- Icon -->
                            <svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="flex flex-col">
                                <h5>Finance </h5>
                                <p class="text-sm font-light text-gray-500 dark:text-gray-400">Use wallet features to transact and manage assets.</p>
                            </div>
                    </li>
                        <li class="flex items-center space-x-3">
                            <!-- Icon -->
                            <svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="flex flex-col">
                                <h5>Collaborate </h5>
                                <p class="text-sm font-light text-gray-500 dark:text-gray-400">Engage in projects and tasks with your network.</p>
                            </div>
                        </li>
                    <li class="flex items-center space-x-3">
                            <!-- Icon -->
                            <svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="flex flex-col">
                                <h5>Develop & Expand</h5>
                                <p class="text-sm font-light text-gray-500 dark:text-gray-400">Create tools or decentralized applications.</p>
                            </div>
                        </li>
                    <li class="flex items-center space-x-3">
                            <!-- Icon -->
                            <svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="flex flex-col">
                                <h5>Creativity</h5>
                                <p class="text-sm font-light text-gray-500 dark:text-gray-400">Generate videos, documents, and other contents.</p>
                            </div>
                        </li>
                    <li class="flex items-center space-x-3">
                            <!-- Icon -->
                            <svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            <div class="flex flex-col">
                                <h5>Filesharing</h5>
                                <p class="text-sm font-light text-gray-500 dark:text-gray-400">Directly send data and files without central servers.</p>
                            </div>
                    </li>
                    <li class="flex items-center space-x-3">
                        <!-- Icon -->
                        <svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        <div class="flex flex-col">
                            <h5>Organization</h5>
                            <p class="text-sm font-light text-gray-500 dark:text-gray-400">Securely store and organize data.</p>
                        </div>
                    </li>
                <li class="flex items-center space-x-3">
                    <!-- Icon -->
                    <svg class="flex-shrink-0 w-5 h-5 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                    <div class="flex flex-col">
                        <h5>Browser</h5>
                        <p class="text-sm font-light text-gray-500 dark:text-gray-400">Browse information securely without tracking.</p>
                    </div>
                </li>
            </ul>
            <div class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700">
                <div>
                   <h5> <a href="/xperiences"><b>→ See Hero Xperiences</b></a></h5>
                </div>
            </div>
        </div>
        <img class="hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="images/hero5.png" alt="dashboard feature image">
    </div>
</div>
<!-- End block -->