Add privacy section to homepage

_includes/nav.html

@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
-    <a class="navbar-brand" href="/"><img src="/assets/img/layout/privacy-guides-logo.png" alt="{{ site.title }}" width="243" height="32" /></a>
+    <a class="navbar-brand" href="/"><img src="/assets/img/layout/privacy-guides-logo.png" alt="{{ site.title }}" width="243" height="32" /> <span class="badge badge-secondary ml-2">Beta</span></a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>

assets/img/layout/phone-like-icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="none" rx="0" ry="0"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5H5C4.44772 5 4 5.44772 4 6V22C4 22.5523 4.44772 23 5 23H9" fill="#ffd06f"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.50072 4C6.50072 3.72386 6.72458 3.5 7.00072 3.5H15.0007C15.2769 3.5 15.5007 3.72386 15.5007 4V8C15.5007 8.27614 15.7246 8.5 16.0007 8.5C16.2769 8.5 16.5007 8.27614 16.5007 8V4C16.5007 3.17157 15.8291 2.5 15.0007 2.5H7.00072C6.17229 2.5 5.50072 3.17157 5.50072 4V14.1906L1.3536 16.5849C1.11445 16.723 1.03252 17.0288 1.17059 17.268C1.30866 17.5071 1.61445 17.589 1.8536 17.451L8.7818 13.451C9.01753 13.3149 9.31802 13.3925 9.45879 13.6238L9.4587 13.6242L9.4588 13.6258L9.45923 13.6291C9.46145 13.6459 9.4691 13.7038 9.45158 13.823C9.42828 13.9815 9.37046 14.1792 9.28549 14.3852C9.20114 14.5897 9.09746 14.7845 8.99374 14.9376C8.94204 15.014 8.89398 15.0746 8.85251 15.1189C8.83202 15.1408 8.81495 15.1568 8.80171 15.1679C8.789 15.1786 8.78229 15.1827 8.78182 15.183C8.78179 15.183 8.78178 15.183 8.7818 15.183L4.88469 17.433C4.47371 17.6703 4.21649 18.0767 4.12641 18.5056C4.05028 18.868 3.91544 19.3777 3.69621 19.8523C3.47235 20.337 3.18981 20.721 2.8536 20.9151C2.61445 21.0531 2.53252 21.3589 2.67059 21.5981C2.80866 21.8372 3.11445 21.9192 3.3536 21.7811C3.95226 21.4354 4.34564 20.8311 4.60405 20.2716C4.86709 19.7022 5.02089 19.1118 5.10505 18.7111C5.14438 18.5239 5.25049 18.3765 5.38469 18.299L5.50072 18.232V20C5.50072 20.8284 6.17229 21.5 7.00072 21.5H15.0007C15.8291 21.5 16.5007 20.8284 16.5007 20V19C16.5007 18.7239 16.2769 18.5 16.0007 18.5C15.7246 18.5 15.5007 18.7239 15.5007 19V20C15.5007 20.2761 15.2769 20.5 15.0007 20.5H7.00072C6.72458 20.5 6.50072 20.2761 6.50072 20V17.6547L9.2818 16.049C9.50168 15.9221 9.68465 15.7008 9.82172 15.4984C9.96837 15.2819 10.1031 15.0256 10.21 14.7664C10.3162 14.5087 10.4025 14.2301 10.441 13.9684C10.4759 13.7305 10.4874 13.4052 10.3308 13.134C9.91663 12.4165 8.99924 12.1707 8.2818 12.5849L6.50072 13.6132V4ZM9.50072 5C9.50072 4.72386 9.72458 4.5 10.0007 4.5H12.0007C12.2769 4.5 12.5007 4.72386 12.5007 5C12.5007 5.27614 12.2769 5.5 12.0007 5.5H10.0007C9.72458 5.5 9.50072 5.27614 9.50072 5ZM11.2685 13.1317C10.2922 12.1554 10.2922 10.5725 11.2685 9.59619C12.2448 8.61988 13.8277 8.61988 14.804 9.59619L15.8647 10.6569L16.9253 9.5962C17.9017 8.61989 19.4846 8.61989 20.4609 9.5962C21.4372 10.5725 21.4372 12.1554 20.4609 13.1317L19.0467 14.5459L18.6931 14.8995L16.2182 17.3744L15.8647 17.7279L15.5111 17.3744L11.2685 13.1317ZM18.6931 13.4853L16.5718 11.364L17.6325 10.3033C18.2182 9.71752 19.168 9.71752 19.7538 10.3033C20.3396 10.8891 20.3396 11.8388 19.7538 12.4246L18.6931 13.4853ZM14.0969 10.3033L15.1576 11.364L15.5111 11.7175L17.986 14.1924L15.8647 16.3137L11.9756 12.4246C11.3898 11.8388 11.3898 10.8891 11.9756 10.3033C12.5614 9.71751 13.5111 9.71751 14.0969 10.3033Z" fill="#28323f"></path></svg>

index.html

@@ -5,11 +5,11 @@ layout: default
 <div class="p-5 mb-3 bg-primary">
   <div class="container">
     <div class="row">
-      <div class="col-lg-8 col-12 mt-5">
+      <div class="col-lg-8 col-12 mt-4">
-        <h2 class="display-4 mt-4">The guide to restoring your online privacy.</h2>
+        <h2 class="display-4 pt-1 mt-5">The guide to restoring your online privacy.</h2>
         <h5 class="mt-5">Massive organizations are monitoring your online activities. Privacy Guides is your central privacy and security resource to protect yourself online.</h5>
       </div>
-      <div class="col-4 p-5 d-none d-lg-block">
+      <div class="col-4 p-3 d-none d-lg-block">
         <img src="/assets/img/layout/surveillance-eye-colorbg.svg" width="100%">
       </div>
     </div>
@@ -19,6 +19,19 @@ layout: default
 <div class="container my-5 p-5">
 
   <div class="row">
+    <div class="col-lg-10 col-12 text-right">
+      <h2 class="mt-4">Why should I care?</h2>
+      <h5 class="mt-2">“I have nothing to hide. Why should I care about my privacy?”</h5>
+      <p class="mt-2">Much like the right to interracial marriage, woman's suffrage, freedom of speech, and many others, we didn't always have the right to privacy. In several dictatorships, many still don't. Generations before ours fought for our right to privacy. <mark>Privacy is a human right inherent to all of us</mark>, that we are entitled to without discrimination.</p>
+      <p>You shouldn't confuse privacy with secrecy. We know what happens in the bathroom, but you still close the door. That's because you want privacy, not secrecy. <strong>Everyone</strong> has something to hide, privacy is something that makes you human.</p>
+      <a href="/privacy/" class="btn btn-primary mt-2">Learn More About Privacy</a>
+    </div>
+    <div class="col-2 d-none d-lg-block">
+      <img src="/assets/img/layout/phone-like-icon.svg" width="100%">
+    </div>
+  </div>
+
+  <div class="row mt-5">
     <div class="col-2 d-none d-lg-block">
       <img src="/assets/img/layout/plan-icon.svg" width="100%">
     </div>
@@ -26,25 +39,23 @@ layout: default
       <h2 class="mt-4">What should I do?</h2>
       <h5 class="mt-2">First, you need to make a plan.</h5>
       <p class="mt-2">Trying to protect <strong>all</strong> your data from <strong>everyone</strong> all the time is impractical, expensive, and exhausting. But, don't worry! Security is a process, and by thinking ahead you can put together a plan that's right for <strong>you</strong>. Security isn't just about the tools you use or the software you download. Rather, it begins with understanding the unique threats you face, and how you can counter them.</p>
-      <p>This process of identifying threats and defining countermeasures is called <strong>threat modeling</strong>, and it forms the basis of every good security and privacy plan.</p>
+      <p><mark>This process of identifying threats and defining countermeasures is called <strong>threat modeling</strong></mark>, and it forms the basis of every good security and privacy plan.</p>
-      <a href="/threat-modeling/" class="btn btn-primary mt-2">Learn More About Threat Modeling <i class="far fa-fw fa-arrow-circle-right"></i></a>
+      <a href="/threat-modeling/" class="btn btn-primary mt-2">Learn More About Threat Modeling</a>
     </div>
   </div>
 
 </div>
 
+<div class="p-5 bg-secondary text-light">
 <div class="container">
-
+  <div class="row mt-3">
-  <div class="row m-3">
     <div class="col text-center">
       <h2>Privacy Tools &amp; Services</h2>
       <p>The devices, software, and services that will protect your privacy highly depend on your use case, workflow, and threat model. But, if you don't know where to get started, we've chosen some recommended tools to get you going :)</p>
     </div>
   </div>
-
+  <div class="row mb-5">
-  <div class="row">
+    <div class="col-6 col-sm-4 col-md-3 col-xl-2 mt-3">
-
-    <div class="col-6 col-sm-4 col-md-3 col-xl-2">
       <a href="/devices/" class="text-secondary">
         <div class="card text-center mx-auto" style="width: 160px;">
           <div class="card-body">
@@ -54,7 +65,7 @@ layout: default
         </div>
       </a>
     </div>
-    <div class="col-6 col-sm-4 col-md-3 col-xl-2">
+    <div class="col-6 col-sm-4 col-md-3 col-xl-2 mt-3">
       <a href="/browsers/" class="text-secondary">
         <div class="card text-center mx-auto" style="width: 160px;">
           <div class="card-body">
@@ -64,7 +75,7 @@ layout: default
         </div>
       </a>
     </div>
-    <div class="col-6 col-sm-4 col-md-3 col-xl-2">
+    <div class="col-6 col-sm-4 col-md-3 col-xl-2 mt-3">
       <a href="/software/" class="text-secondary">
         <div class="card text-center mx-auto" style="width: 160px;">
           <div class="card-body">
@@ -74,7 +85,7 @@ layout: default
         </div>
       </a>
     </div>
-    <div class="col-6 col-sm-4 col-md-3 col-xl-2">
+    <div class="col-6 col-sm-4 col-md-3 col-xl-2 mt-3">
       <a href="/os/" class="text-secondary">
         <div class="card text-center mx-auto" style="width: 160px;">
           <div class="card-body">
@@ -84,7 +95,7 @@ layout: default
         </div>
       </a>
     </div>
-    <div class="col-6 col-sm-4 col-md-3 col-xl-2">
+    <div class="col-6 col-sm-4 col-md-3 col-xl-2 mt-3">
       <a href="/providers/" class="text-secondary">
         <div class="card text-center mx-auto" style="width: 160px;">
           <div class="card-body">
@@ -94,7 +105,7 @@ layout: default
         </div>
       </a>
     </div>
-    <div class="col-6 col-sm-4 col-md-3 col-xl-2">
+    <div class="col-6 col-sm-4 col-md-3 col-xl-2 mt-3">
       <a href="/services/" class="text-secondary">
         <div class="card text-center mx-auto" style="width: 160px;">
           <div class="card-body">
@@ -104,7 +115,25 @@ layout: default
         </div>
       </a>
     </div>
-
   </div>
-
+</div>
+</div>
+
+<div class="container">
+  <div class="row mt-5">
+    <div class="col-2 d-none d-lg-block">
+      <img src="/assets/img/layout/plan-icon.svg" width="100%">
+    </div>
+    <div class="col-lg-10 col-12">
+      <h2 class="mt-4">What should I do?</h2>
+      <h5 class="mt-2">First, you need to make a plan.</h5>
+      <p class="mt-2">Trying to protect <strong>all</strong> your data from <strong>everyone</strong> all the time is impractical, expensive, and exhausting. But, don't worry! Security is a process, and by thinking ahead you can put together a plan that's right for <strong>you</strong>. Security isn't just about the tools you use or the software you download. Rather, it begins with understanding the unique threats you face, and how you can counter them.</p>
+      <p><mark>This process of identifying threats and defining countermeasures is called <strong>threat modeling</strong></mark>, and it forms the basis of every good security and privacy plan.</p>
+      <a href="/threat-modeling/" class="btn btn-primary mt-2">Learn More About Threat Modeling</a>
+    </div>
+  </div>
+</div>
+
+<div class="container mb-5">
+  {% include footer.html %}
 </div>