_includes/card.html

@@ -26,9 +26,17 @@
                 {% endfor %}
             </div>
             {% endif %}
-            <p><img src="{{include.image}}" width="120" height="120" alt="{{include.title}}" class="panel-item">{{include.description}}</p>
+            <p>
+              {% if include.image %}
+              <img src="{{include.image}}" width="120" height="120" alt="{{include.title}}" class="panel-item">
+              {% elsif include.icon %}
+              <i class="{{ include.icon }} panel-icon{% if include.iconcolor %} text-{{include.iconcolor}}{% endif %}"></i>
+              {% endif %}
+              {{include.description}}
+            </p>
             <div>
             <p>
+                {% if include.url %}
                 <a class="btn btn-{{include.color}} mb-1" href="{{include.url}}">Website:
                     {% if include.website %}
                         {{include.website}}
@@ -36,6 +44,15 @@
                         {{ include.url | remove: "https://" | remove: "http://" | remove: "www." | remove: "/" | remove: "github.com" }}
                     {% endif %}
                 </a>
+                {% elsif include.page %}
+                <a class="btn btn-{{include.color}} mb-1" href="{{include.page}}">
+                    {% if include.moretext %}
+                        {{include.moretext}}
+                    {% else %}
+                        Learn More
+                    {% endif %}
+                </a>
+                {% endif %}
                 {% if include.tor %}
                 <a class="mb-1" data-toggle="tooltip" data-placement="bottom" data-original-title="{{include.tor}} Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="/assets/img/layout/tor.png" width="35" height="35"></a>
                 {% endif %}

_includes/sections/privacy-resources.html

@@ -1,4 +1,4 @@
-<h1 id="resources" class="anchor"><a href="#resources"><i class="fas fa-link anchor-icon"></i></a> Recommended Privacy Resources</h1>
+<h1 id="resources" class="anchor"><a href="#resources"><i class="fas fa-link anchor-icon"></i></a> More Privacy Resources</h1>
 
 <h3>Guides</h3>
 

_includes/sections/resources.html

@@ -0,0 +1,53 @@
+<h1 id="os" class="anchor">Privacy Tools</h1>
+
+<div class="row">
+
+  {% include card.html color="success"
+  title="Service Providers"
+  icon="fas fa-server"
+  iconcolor="dark"
+  page="/providers/"
+  description="Discover privacy-centric online services, including email providers, VPN operators, DNS administrators, and more!"
+  %}
+
+  {% include card.html color="primary"
+  title="Web Browsers"
+  icon="far fa-compass"
+  iconcolor="dark"
+  page="/browsers/"
+  description="Find a web browser that respects your privacy, and discover how to harden your browser against tracking and leaks."
+  %}
+
+  {% include card.html color="warning"
+  title="Software"
+  icon="far fa-window-restore"
+  iconcolor="dark"
+  page="/software/"
+  description="Discover a variety of open source software built to protect your privacy and keep your digital data secure."
+  %}
+
+  {% include card.html color="info"
+  title="Operating Systems"
+  icon="fas fa-desktop"
+  iconcolor="dark"
+  page="/os/"
+  description="Find out how your operating system is comprimising your privacy, and what simple alternatives exist."
+  %}
+
+  {% include card.html color="secondary"
+  title="privacytoolsIO Services"
+  icon="far fa-eye-slash"
+  iconcolor="dark"
+  page="/services/"
+  description="The privacytools.io team is proud to launch a variety of privacy-centric online services, including a Mastodon instance, search engine, and more!"
+  %}
+
+  {% include card.html color="danger"
+  title="Donate"
+  icon="fas fa-donate"
+  iconcolor="dark"
+  page="https://github.com/privacytoolsIO/privacytools.io"
+  description="We can't operate this site without the generous contributions we receive from our viewers. If you love privacy and our website please consider donating."
+  %}
+
+</div>

assets/css/style.scss

@@ -78,10 +78,11 @@ a,
 }
 
 .anchor {
-  margin-top: 4rem;
+  margin-top: 3.5rem;
+  margin-bottom: 2rem;
   &:target {
     margin-top: -4rem;
-    padding-top: 8rem;
+    padding-top: 7.5rem;
   }
 }
 
@@ -94,6 +95,12 @@ a,
   margin-left: 5px;
 }
 
+.panel-icon {
+  float: right;
+  margin: 15px;
+  font-size: 5.5em;
+}
+
 .share-btn {
   border: 0;
   box-shadow: $share-btn-shadow;

index.html

@@ -9,6 +9,7 @@ layout: default
 </script>
 
 {% include sections/header.html %}
+{% include sections/resources.html %}
 {% include sections/quotes.html %}
 {% include sections/warrant-canary.html %}
 {% include sections/privacy-resources.html %}