<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>
                    <a href="<%= product.url %>">
                        <header>
                            <img class="product-icon" src="./assets/images/products/icons/<%= product.slug %>.png" alt="">
                            <div>
                                <h2><%= product.name %></h2>
                                <span>more info<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="100" height="100" viewBox="0 0 24 24" stroke-width="2" stroke="var(--c-3)" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
                                    <line x1="10" y1="14" x2="20" y2="4" />
                                    <polyline points="15 4 20 4 20 9" />
                                  </svg>
                                </span>
                            </div>
                        </header>
                        <div class="product-hero__wrapper">
                            <img class="hero" src="./assets/images/products/heros/<%= product.slug %>.png" alt="" style="background-image: <%= product.color %>">
                            <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>
                    </a>
                </li>
            <% }) %> 
        </ul>
    </section>
</article>