<article class="showcase__wrapper max-w-screen-lg">
    <header>
        <h1 id="showcase">
            our apps
        </h1>
        <aside>
            Most of our apps are available for all platforms (iOS, Android, macOS and Microsoft).
            Click on the link or the dots to get more information about a specific app.
            Feel free to contact us for any questions or comments you might have.
        </aside>
    </header>
    <section>
        <ul>
            <% showcase.forEach((product)=> { %>
                <li>
                    <header>
                        <img class="icon" src="./assets/images/products/icons/<%= product.slug %>.png" alt="">
                        <div>
                            <h2><%= product.name %></h2>
                            <a href="<%= product.url %>"><%= product.url %></a>
                        </div>
                    </header>
                    <div class="product-hero__wrapper">
                        <img class="hero" src="./assets/images/products/heros/<%= product.slug %>.jpg" alt="">
                        <div class="product-hero__banner">
                            <svg class="banner-edge-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
                                <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
                                    d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
                            </svg>
                            <svg class="banner-edge-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
                                <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
                                    d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
                            </svg>
                            <%- product.description %>
                        </div>
                    </div>
                </li>
            <% }) %> 
        </ul>
    </section>
</article>