Merge pull request #216 from safing/feature/spn-add-showcases

SPN Features Page Rework

_includes/spn_vs_others.html

@@ -0,0 +1,91 @@
+<div class="card-table">
+  <table>
+    <colgroup class="card-table-colgroup">
+      <col class="card-table-colgroup-col">
+      <col class="card-table-colgroup-col">
+      <col class="card-table-colgroup-col-highlight">
+      <col class="card-table-colgroup-col">
+    </colgroup>
+    <thead class="card-table-header">
+      <tr class="card-table-header-row">
+        <th class="card-table-header-row-cell"></th>
+        <th class="card-table-header-row-cell">Most VPNs</th>
+        <th class="card-table-header-row-cell">SPN</th>
+        <th class="card-table-header-row-cell">Tor</th>
+      </tr>
+    </thead>
+    <tbody class="card-table-body">
+      <tr class="card-table-body-row">
+        <td class="card-table-body-row-cell-title">Multiple Identities (simultaneous)</td>
+        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
+      </tr>
+      <tr class="card-table-body-row">
+        <td class="card-table-body-row-cell-title">Automatic Geo-Unblocking</td>
+        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
+      </tr>
+      <tr class="card-table-body-row">
+        <td class="card-table-body-row-cell-title">Individual Apps Settings</td>
+        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
+      </tr>
+      <tr class="card-table-body-row">
+        <td class="card-table-body-row-cell-title">Easy Setup</td>
+        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
+        <td class="card-table-body-row-cell"><strong>Browser Only</strong></td>
+      </tr>
+      <tr class="card-table-body-row">
+        <td class="card-table-body-row-cell-title">Availabilty</td>
+        <td class="card-table-body-row-cell">
+          <div class="md:space-x-2">
+            <i class="icon-windows text-2xl text-safing-blue-500"></i>
+            <i class="icon-linux text-2xl"></i>
+            <i class="icon-mac text-2xl text-gray-500"></i>
+          </div>
+        </td>
+        <td class="card-table-body-row-cell">
+          <a class="card-table-body-row-cell-link" href="{{ site.portmaster_url }}">
+            <div class="md:space-x-2">
+              <i class="icon-windows text-2xl text-safing-blue-500"></i>
+              <i class="icon-linux text-2xl"></i>
+            </div>
+          </a>
+        </td>
+        <td class="card-table-body-row-cell">
+          <a class="card-table-body-row-cell-link" href="https://www.torproject.org/download/">
+            <div class="md:space-x-2">
+              <i class="icon-windows text-2xl text-safing-blue-500"></i>
+              <i class="icon-linux text-2xl"></i>
+              <i class="icon-mac text-2xl text-gray-500"></i>
+            </div>
+          </a>
+        </td>
+      </tr>
+      <tr class="card-table-body-row">
+        <td class="card-table-body-row-cell-title">Open Source</td>
+        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
+        <td class="card-table-body-row-cell">
+          <a class="card-table-body-row-cell-link" href="{{ site.github_url }}/spn">
+            <i class="icon-tick text-2xl text-green-500"></i>
+          </a>
+        </td>
+        <td class="card-table-body-row-cell">
+          <a class="card-table-body-row-cell-link" href="https://gitweb.torproject.org/">
+            <i class="icon-tick text-2xl text-green-500"></i>
+          </a>
+        </td>
+      </tr>
+      <tr class="card-table-body-row">
+        <td class="card-table-body-row-cell-title">Built for Privacy</td>
+        <td class="card-table-body-row-cell"><i class="icon-cross text-2xl text-red-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
+        <td class="card-table-body-row-cell"><i class="icon-tick text-2xl text-green-500"></i></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

spn/index.html

@@ -22,7 +22,7 @@ layout: page
         </h1>
         <p class="header-two-top-desc" style="max-width: 650px;">
             Stop paying for out-dated technology that was never intended to protect your privacy.
-            Get peace of mind with the SPN. Built from scratch and designed to truly protect your privacy 
+            Get peace of mind with SPN. Built from scratch and designed to truly protect your privacy
             from mass surveillance.
         </p>
     </div>
@@ -82,67 +82,77 @@ layout: page
     </div>
 </header>
 <section class="space-y-40">
-    <div class="intro-container mt-32">
-        <h2 class="intro-container-title">
-            Protect Your Meta‑Data
-        </h2>
-        <p class="intro-container-desc">
-            Seek true privacy. Do not overlook meta-data: which websites
-            you visit and how frequently tell more about you than knowing
-            what you actually do on them.
-        </p>
-    </div>
     <div class="general-layout">
         <div class="showcase-one-container-reverse">
             <div class="showcase-one-left" style="max-width: 850px;">
-                <img src="{{ site.img_url }}page-specific/spn/layers.gif" alt="">
+                <img src="{{ site.img_url }}page-specific/spn/multiple-identities-for-each-app.png" alt="">
             </div>
             <div class="showcase-one-right">
                 <div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
                     <i class="icon-info text-md"></i>
-                    <span>Alpha Software: the SPN is in active development </span>
+                    <span>Alpha Software: SPN is in active development </span>
                 </div>
                 <h2 class="showcase-one-right-title" style="max-width: 450px;">
-                    Onion Layer Encryption
+                  Get Multiple Identities for Each App
                 </h2>
                 <p class="showcase-one-right-desc">
-                  Re-route all your connections through our multi-hop network
+                  Automatically get a vast amount of identities (IP addresses). The SPN calculates an individual path for every connection through the privacy network. Spread your connections across the globe, without any effort.
-                  to decouple your identity from the destination. With onion-
-                  encryption, no single party knows who you are and where you
-                  are going to. Inspired by Tor.
                 </p>
-                <a class="btn-secondary" href="{{ site.blog_url }}2020/01/22/how-the-spn-compares-to-tor/">Compare the SPN to Tor</a>
-                <a class="btn-tertiary hover-opacity-out" href="{{ site.img_url }}spn-labeled/spn-core.png">
-                  View explainer-image
-                </a>
             </div>
         </div>
         <div class="showcase-one-container">
             <div class="showcase-one-left" style="max-width: 850px;">
-                <img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
+                <img src="{{ site.img_url }}page-specific/spn/access-regional-content-easily.png" alt="">
             </div>
             <div class="showcase-one-right">
                 <div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
                     <i class="icon-info text-md"></i>
-                    <span>Alpha Software: the SPN is in active development </span>
+                    <span>Alpha Software: SPN is in active development </span>
                 </div>
                 <h2 class="showcase-one-right-title" style="max-width: 450px;">
-                    Distributed Multi Identity Network
+                    Simply Access Regional Content
                 </h2>
                 <p class="showcase-one-right-desc">
-                  Instead of exiting all your traffic at one place, route every
+                  Is a website blocked or restricted in your country? Because SPN makes that connection exit near the destination server, it will automatically unblock the content. SPN has best coverage in Europe and North America.
-                  connection individually to spread your connections across the
-                  globe. Use vast amounts of identities (IP addresses) and limit
-                  your visibility in the "open" web.
                 </p>
-                <a class="btn-secondary" href="{{ site.blog_url }}2020/01/22/how-the-spn-compares-to-vpns/">
-                  Compare the SPN to VPNs
-                </a>
-                <a class="btn-tertiary hover-opacity-out" href="{{ site.img_url }}spn-labeled/spn-community.png">
-                  View explainer-image
-                </a>
             </div>
         </div>
+        <div class="showcase-one-container-reverse">
+            <div class="showcase-one-left" style="max-width: 850px;">
+                <img src="{{ site.img_url }}page-specific/spn/easily-control-your-privacy.png" alt="">
+            </div>
+            <div class="showcase-one-right">
+                <div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
+                    <i class="icon-info text-md"></i>
+                    <span>Alpha Software: SPN is in active development </span>
+                </div>
+                <h2 class="showcase-one-right-title" style="max-width: 350px;">
+                    Easily Adjust Your Privacy
+                </h2>
+                <p class="showcase-one-right-desc">
+                  SPN just works and does the heavy lifting for you. But of course you can easily configure the settings, so it fits your needs: Exclude certain apps and domains from the SPN. Or never exit in specific countries. And so much more...
+                </p>
+            </div>
+        </div>
+        <div class="showcase-one-container">
+            <div class="showcase-one-left" style="max-width: 850px;">
+                <img src="{{ site.img_url }}page-specific/spn/built-from-the-ground-up.png" alt="">
+            </div>
+            <div class="showcase-one-right">
+                <div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
+                    <i class="icon-info text-md"></i>
+                    <span>Alpha Software: SPN is in active development </span>
+                </div>
+                <h2 class="showcase-one-right-title" style="max-width: 450px;">
+                    Built from Scratch,<br> for <span class="text-safing-blue-600">Your Privacy</span>
+                </h2>
+                <p class="showcase-one-right-desc">
+                  SPN is built from the ground up. Privacy is cooked right into it. Inspired by Tor, it comes with onion routing and state of the art encryption. Fully open source so all our claims can be validated.
+                </p>
+                <a class="btn-tertiary px-2" href="{{ site.github_url }}/spn"><i class="icon-github text-md mr-2"></i>Inspect source code</a>
+            </div>
+        </div>
+
         <div class="showcase-two-container">
             <div class="showcase-two-top-break-left">
                 <h2 class="showcase-two-top-title" style="max-width: 550px;">
@@ -162,49 +172,34 @@ layout: page
             </div>
             <div class="showcase-bg"></div>
         </div>
-        <div class="showcase-one-container-reverse">
-            <div class="showcase-one-left" style="max-width: 850px;">
-                <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
-            </div>
-            <div class="showcase-one-right">
-                <div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
-                    <i class="icon-info text-md"></i>
-                    <span>Alpha Software: the SPN is in active development </span>
-                </div>
-                <h2 class="showcase-one-right-title" style="max-width: 450px;">
-                    Minimize Your Meta‑Data
-                </h2>
-                <p class="showcase-one-right-desc">
-                    With the SPN, your meta-data is stripped to a minimum.
-                    Abstracting even the size of outgoing packets to diminish
-                    what information third parties, like your ISP or the Wi-Fi
-                    operator of your local coffee place, can gather about you.
-                </p>
-            </div>
-        </div>
         <div class="showcase-one-container">
             <div class="showcase-one-left" style="max-width: 850px;">
-                <img src="{{ site.img_url }}page-specific/spn/switch.gif" alt="">
+                <img src="{{ site.img_url }}page-specific/spn/bye-bye-vpns.png" alt="">
             </div>
             <div class="showcase-one-right">
                 <div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
                     <i class="icon-info text-md"></i>
-                    <span>Alpha Software: the SPN is in active development </span>
+                    <span>Alpha Software: SPN is in active development </span>
                 </div>
                 <h2 class="showcase-one-right-title" style="max-width: 450px;">
-                    No Kill Switch Needed
+                    Bye Bye, VPNs
                 </h2>
                 <p class="showcase-one-right-desc">
-                    Get peace of mind instead of fearing data-leakage.
+                  VPN technology was NOT built for user privacy, but for company security. Because of that, you can only trust a VPN provider's policy - and many have been caught abusing user data. Honestly, the best way forward: just stop paying for outdated technology.
-                    <br>
-                    <br>
-                    With the open source Portmaster, all your network connections are
-                    intercepted at the kernel-level, putting an end to accidental data
-                    exposure.
                 </p>
-                <a class="btn-secondary" href="{{ site.portmaster_url }}">Discover the portmaster</a>
             </div>
         </div>
+
+        <div class="showcase-two-container">
+          <div class="showcase-two-top-break-left">
+            <h2 class="showcase-two-top-title" id="feature-comparison-chart" style="max-width: 550px;">
+              Feature Comparison
+            </h2>
+          </div>
+
+          {% include spn_vs_others.html %}
+        </div>
+
         <div class="showcase-two-container" id="pricing">
             <div class="showcase-two-top" style="max-width: 690px;">
                 <a class="alert-primary hover-scale-out" data-method="get" href="{{ site.spn_alpha_status_page_url }}">
@@ -218,7 +213,7 @@ layout: page
                     Protect Your Connections Today
                 </h2>
                 <p class="showcase-two-top-desc">
-                    Subscribe to the SPN and lock in the lower Alpha prices forever.
+                    Subscribe to SPN and lock in the lower Alpha prices forever.
                 </p>
             </div>
             <div class="showcase-two-bottom" style="max-width: 850px;">