Show woocommerce attributes and their values in list

Hello,

I’d like to create a single page, that shows all the attributes and their values as links, and when click on them, they should filter the products by values.
Example:

<ul>
<li>Colors</li>
    <ul>
       <li><a>blue</a></li>
       <li><a>red</a></li>
   </ul>
<li>Sizes</li>
   <ul>
       <li><a>S</a></li>
       <li><a>M</a></li>
   </ul>
</ul>

The Colors and Sizes should be the attributes, and red/blue, S/M should be their values. When I click on “red” all the products with that attributes should appear. Any idea, how can I achieve that?

Thank you!