index.html

---
layout: page
css-list:
  - "assets/css/index.css"
javascript-list:
  - "assets/js/index.js"
---
<!-- hero section -->
<section class="hero-section"
  style="background-image: url('{{ site.baseurl }}/assets/img/site/arrrmada_bg.jpg');">
  <div class="content">      
    <img class="logo" alt="arrrmada logo" src="{{ site.baseurl }}/assets/img/logo/arrrmada-emblem-light.png"/>
    <div>
      <h1><span class="arrr">ARRR</span>mada</h1>
      <strong>$ARRR accepted here</strong>
      <p>
        A directory of Pirate Chain merchants<br />
        and online commerce tools
      </p>
      <a class="btn" href="{{ site.baseurl }}#merchants-section" title="View Pirate Chain merchants">Merchant List</a>
      <a class="btn" href="{{ site.baseurl }}/payment_gateways" title="Gateways for acceptng payments">Payment Gateways</a>
      <a class="btn" href="{{ site.baseurl }}/donation_buttons" title="Add a donation button to your website">Donation Buttons</a>
    </div>
  </div>
</section>

<!-- description section -->
<section class="description-section">
  <div class="content"> 
    
    <div class="description">      
      <h3>Your Harrrbour for Secure and Private E-Commerce</h3>
      <p>
        The ARRRmada is a fleet of merchant ships, including stores, service providers, and 
        businesses, that accept $ARRR as a trusted form of payment. $ARRR, the native currency of the Pirate Chain 
        network, blends the convinince of online transactions with the privacy of using cash, making it an ideal 
        choice for the digital economy.
      </p>
      <p>
        Our incredible merchants are at the heart of growing a strong commerce based community. If you are a online merchant
         that values privacy and financial sovereignty, consider joining the ARRRmada and begin accepting $ARRR today!

        <a class="btn" href="{{ site.baseurl }}/listing_tool" title="Add your store to the directory">List Your Store +</a>
      </p>
    </div>
    <div class="merchants">
      <p>
        <img src="{{ site.baseurl }}/assets/img/icons/anchor.svg" alt="just an anchor" />
        <span id="merchantCount" class="count">{{ site.data.merchants.size }}</span>
        MERCHANTS
      </p>
    </div>    
  </div>

  <!-- waves effect -->
  <svg class="editorial" style="z-index: 20000;"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 24 150 28 "
      preserveAspectRatio="none">
    <defs>
      <path id="gentle-wave"
      d="M-160 44c30 0 
      58-18 88-18s
      58 18 88 18 
      58-18 88-18 
      58 18 88 18
      v44h-352z" />
    </defs>
    <g class="parallax1">
      <use xlink:href="#gentle-wave" x="50" y="3" fill="rgba(32,32,54,.4)"/>
    </g>
    <g class="parallax2">
      <use xlink:href="#gentle-wave" x="50" y="0" fill="rgba(21,19,38,0.7)"/>
    </g>
    <g class="parallax3">
      <use xlink:href="#gentle-wave" x="50" y="9" fill="rgba(32,32,54,.8)"/>
    </g>
    <g class="parallax4" style="z-index:999999;">
      <use xlink:href="#gentle-wave" x="50" y="6" fill="rgba(35,37,45,1)"/>  
    </g>
  </svg>
</section>

<!-- merchants section -->
<section class="merchants-section" id="merchants-section">
  <div class="content">
    <img class="pah" src="{{ site.baseurl }}/button/button0.png" alt="Pirate Chain (ARRR) Accepted here button" />
    <h2>Merchant Directory</h2>
    
    <div id="tag-buttons">
      <h2>Viewing: <span id="current_tag">All</span></h2>
      {% assign sortedTags = site.data.tags | sort: 'name' %}
      {% for tag in sortedTags %}
        {% assign is_used = false %}
        {% assign count = 0 %}
        {% for merchant in site.data.merchants %}
          {% if merchant.tags contains tag.id %}
            {% assign is_used = true %}
            {% assign count = count | plus: 1 %}
          {% endif %}
        {% endfor %}
        {% if is_used %}
          <button id="{{ tag.id }}" title="View {{ count }} {{ tag.name }} listings" 
          onclick="filterByTag('{{ tag.id }}', '{{ tag.name }}')"> {{ tag.name }} <span class="count">{{ count }}</span></button>
        {% endif %}
      {% endfor %}
      <button class="showall" onclick="showAll()"> Show All </button>
    </div>
  </div>

    {% for merchant in site.data.merchants %}
    <div class="merchant-box" 
         data-tags='{{ merchant.tags | join: "," }}'
         id="{{ merchant.id }}" 
         title="go to {{ merchant.name }}'s website" >        
      <a href="{{ merchant.url }}" target="_blank" rel="noopener noreferrer">
        <div class="merchant-imgbox">
          <img loading="lazy" class="merchant-img"
               src="{{ site.baseurl }}/assets/img/merchants/{{ merchant.image }}" 
               alt="{{ merchant.name }}">
        </div>
        <h2>{{ merchant.name }}</h2>
        <p class="merchant-description">{{ merchant.description | truncate: 160, "..." }}</p>
      </a>               
      <div class="tag-box">
        {% for tag_id in merchant.tags %}
            {% assign tag = site.data.tags | where: "id", tag_id | first %}
            <a href="{{ site.baseurl }}/#merchants-section" 
               class="tag-btn" 
               onclick="filterByTag('{{ tag.id }}', '{{ tag.name }}')" 
               title="show merchants with the {{ tag.name }} tag" 
               data-tag-id="{{ tag.id }}">
              {{ tag.name }}
            </a>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
</section>