<section id="be-your-own">
    <h1>Be
        <em>your own</em>
        everything</h1>
    <p>Anything you can do in the <a href="https://en.wikipedia.org/wiki/Censorship_by_Apple#App_Store" target="_blank" rel="noopener noreferrer">permissioned</a>, <a href="https://www.computerworld.com/article/3634591/the-problem-with-the-subscription-economy.html" target="_blank" rel="noopener noreferrer">subscription-based</a>, <a href="https://en.wikipedia.org/wiki/Privacy_concerns_regarding_Google" target="_blank" rel="noopener noreferrer">privacy-invading</a>, <a target="_blank" rel="noopener noreferrer" href="https://dataprot.net/articles/biggest-data-breaches/">insecure</a> model of cloud computing, you
        can also do in the open, free, private, secure model of <em>sovereign computing</em>.</p>
    <div id='ticker'>
        <div id="ticker__selected-frame">
            <span>be your own</span>
            {# <div id="services"></div> #}
        </div>
        <div id="ticker__window">
            <ul class='pseudoservices'>
                {% for pseudoservice in pseudoservices %}
                    <li class="pseudoservice">{{ pseudoservice.name }}</li>
                {% endfor %}
            </ul>
        </div>
        <div class="services">
            {% for pseudoservice in pseudoservices %}
            <div class="slides-container slides-container--{{ pseudoservice.slug }}">
                <ul class="slides-inner">
                    {% for service in services %}
                        {% if pseudoservice.slug in service.pseudoservices %}
                        <li class="service slide">
                            {# <a href="">{% include "components/svg/chevron-left.svg" %}</a> #}
                            <a class="service__content" href="https://marketplace.start9.com/{{service.slug}}" target="_blank" rel="noopener noreferrer">
                                <img class="service__image" src="assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} emabssyos service icon" title="{{ service.name }} service icon"/>
                                <div class="service__name">{{ service.name }}</div>
                                {# <div class="service__desc">{{ service.description }}</div> #}
                            </a>
                            {# <a href="">{% include "components/svg/chevron-right.svg" %}</a> #}
                        </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
            <div class="slides-controls">
                <button id="prevButton">{% include "components/svg/chevron-left.svg" %}</button>
                <button id="nextButton">{% include "components/svg/chevron-right.svg" %}</button>
            </div>
        </div>
    </div>
    <a href="{{ site.beYourOwn.url }}" class="btn">browse the start9 marketplace</a>
</section>