Retext spn features, description and pricing

spn/index.html

@@ -21,17 +21,15 @@ layout: page
 
           </div>
           <div class="inline-block text-center md:text-left">
-            <h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
+            <h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-3/4">
-              Privacy Network
+              Safing&nbsp;Privacy Network
             </h2>
             <p class="text-md opacity-50 max-w-4xl">
-              it's the foundation we build our products on. We make sacrifices on
+              With the SPN you protect all your connections from mass surveillance. Prevent all Internet Service Providers from collecting and selling your private activities.
-              all other fronts to protect your privacy and push the limits of
-              technology to do so.
             </p>
             <div class="py-10 sm:py-10 md:flex text-center">
               <a href="#pricing">
-                <button type="button" style="background-color: #6188ff;" class="mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-5 px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
+                <button type="button" style="background-color: #6188ff;" class="mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-5 px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-350 ease-in-out uppercase">
                   <span class="pr-3 text-2xl wiggle">🎉</span>Pre-order SPN
                 </button>
               </a>
@@ -47,34 +45,13 @@ layout: page
 <section style="margin-top: 3rem;">
   <div class="text-center pb-48">
     <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
-      SPN Features
+      Protect Your Meta&#8209;Data
     </h2>
     <p class="text-md opacity-50 w-auto mx-auto max-w-lg">
-      Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
+      Seek true privacy. Do not overlook meta-data: the websites you visit and how often, tell more about you than what you do on them.
     </p>
   </div>
   <div class="items-center h-full">
-    <div class="container mx-auto px-8 sm:px-0 flex">
-      <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
-        <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
-          <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
-        </div>
-        <div class="inline-block max-w-lg">
-          <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold py-10 lg:w-auto">
-            End-to-End Metadata Encryption
-          </h2>
-          <p class="text-md opacity-50 max-w-lg">
-            Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
-            and VPNs from collecting all your personal [meta] data. Secure
-            your whole computer, not only your web-browser.
-          </p>
-        </div>
-        <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
-          <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
-        </div>
-      </div>
-    </div>
-    <div class="items-center h-full mt-64">
     <div class="container mx-auto px-8 sm:px-0 flex">
       <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex  items-center">
         <div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
@@ -85,10 +62,38 @@ layout: page
             Onion Layer Encryption
           </h2>
           <p class="text-md opacity-50 max-w-lg">
-              The Portmaster enables you to protect your data on your device.
+            Re-route all your connections through our multi-hop network 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.
-              You are back in charge of your outgoing connections: you choose
-              what data you share and what data stays private.
           </p>
+          <div class="py-10 flex">
+            <a href="{{ site.blog_url }}2020/01/22/how-the-spn-compares-to-tor/">
+              <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
+                Compare the SPN to TOR
+              </button>
+              <a href="{{ site.img_url }}spn-labeled/spn-core.png" class="transition duration-150 ease-in-out hover:opacity-100 self-center md:pl-8 uppercase opacity-50 text-xs font-bold">
+                View explainer-image
+              </a>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="items-center h-full mt-64">
+    <div class="container mx-auto px-8 sm:px-0 flex">
+      <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
+        <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
+          <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
+        </div>
+        <div class="inline-block max-w-lg">
+          <h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold py-10 lg:w-auto">
+            Minimize your Meta&#8209;Data
+          </h2>
+          <p class="text-md opacity-50 max-w-lg">
+            With the SPN, your meta-data is stripped to a minimum. Abstract even the sizing of outgoing packages 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 class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
+          <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
         </div>
       </div>
     </div>
@@ -104,10 +109,18 @@ layout: page
             Distributed Multi Identity Network
           </h2>
           <p class="text-md opacity-50 max-w-lg">
-              Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
+            Instead of exiting all your traffic at one place, route every connection individually to spread your connections across the globe. Create vast amounts of identities [which become impossible to tie together/and limit your visibility in the "open" web].
-              and VPNs from collecting all your personal [meta] data. Secure
-              your whole computer, not only your web-browser.
           </p>
+          <div class="py-10 flex">
+            <a href="{{ site.blog_url }}2020/01/22/how-the-spn-compares-to-vpns/">
+              <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
+                Compare the SPN to VPNs
+              </button>
+              <a href="{{ site.img_url }}spn-labeled/spn-community.png" class="transition duration-150 ease-in-out hover:opacity-100 self-center md:pl-8 uppercase opacity-50 text-xs font-bold">
+                View explainer-image
+              </a>
+            </a>
+          </div>
         </div>
         <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
           <img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
@@ -126,9 +139,10 @@ layout: page
             No Kill Switch Needed
           </h2>
           <p class="text-md opacity-50 max-w-lg">
-              The Portmaster enables you to protect your data on your device.
+            Get piece of mind instead of fearing data-leakage.
-              You are back in charge of your outgoing connections: you choose
+          </p>
-              what data you share and what data stays private.
+          <p class="text-md opacity-50 max-w-lg pt-4">
+            With the open source Portmaster, all your network connections are intercepted at the kernel-level, putting an end to accidental data exposure.
           </p>
           <div class="py-10 flex">
             <a href="{{ site.portmaster_url }}">
@@ -141,7 +155,6 @@ layout: page
       </div>
     </div>
   </div>
-  </div>
 </section>
 <section style="margin-top: 13rem;">
   <div class="items-center h-full">
@@ -151,30 +164,33 @@ layout: page
           <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8" id="pricing">
             <div class="text-center">
               <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
-                Pre-order the SPN
+                Pre-Order the SPN
               </h2>
               <p class="text-md opacity-50">
-                Get your hands on thes pe-orders while you can.
+                Lock in the lower prices forever and join the waitlist to become one of the first SPN users.
               </p>
             </div>
-            <div class="mt-32">
+            <div class="mt-16">
               <ul class="md:grid md:grid-cols-2 lg:grid-cols-2 md:col-gap-8 md:row-gap-10 max-w-4xl mr-auto ml-auto">
                 <li class="text-center md:text-left">
                   <div class="block transform hover:scale-105 duration-150 ease-in-out hover p-16 rounded-lg">
-                    <span class="text-2xl">Early Adopter</span>
+                    <span class="text-2xl">Early Adopter Monthly</span>
                     <div class="block pb-6">
-                      <h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 ">€9.90</h1>
+                      <h1 style="font-size: 3.5rem;" class="font-extrabold pt-6">9.90€ <span class="opacity-50" style="font-size: 1.1rem; font-weight: 500;">/ per month</span></h1>
                       <span class="text-xl pl-1 opacity-50 line-through">€11.90</span>
                     </div>
                     <span class="font-extrabold pt-10 text-md">Includes:</span>
                     <ul class="">
-                      <li class="pt-4 opacity-50">Behind the scenes</li>
+                      <li class="pt-4 opacity-50">Access to the SPN</li>
-                      <li class="pt-4 opacity-50">1 month subscription</li>
+                      <li class="pt-4 opacity-50">Unlimited Bandwidth</li>
+                      <li class="pt-4 opacity-50">Use on up to 5 devices</li>
+                      <li class="pt-4 opacity-50">Taxes</li>
+                      <li class="pt-4 opacity-50">17% off compared to Beta-Prices</li>
                     </ul>
-                    <div class="pt-32">
+                    <div class="pt-16">
                       <a href="{{ site.account_server_url }}pricing">
                         <button type="button" style="background-color: #000;" class="w-full text-center items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white transition duration-150 ease-in-out uppercase">
-                          Buy
+                          Pre-Order
                         </button>
                       </a>
                     </div>
@@ -182,17 +198,23 @@ layout: page
                 </li>
                 <li class="mt-10 md:mt-0 text-center md:text-left">
                   <div class="block transform hover:scale-105 duration-150 ease-in-out hover p-16 rounded-lg">
-                    <span class="text-2xl">Early Adopter</span>
+                    <span class="text-2xl">Early Adopter Yearly</span>
-                    <h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 pb-6">€2,000</h1>
+                    <div class="block pb-6">
+                      <h1 style="font-size: 3.5rem;" class="font-extrabold pt-6">99.00€ <span class="opacity-50" style="font-size: 1.1rem; font-weight: 500;">/ per year</span></h1>
+                      <span class="text-xl pl-1 opacity-50 line-through">142.80€</span>
+                    </div>
                     <span class="font-extrabold pt-10 text-md">Includes:</span>
                     <ul>
-                      <li class="pt-4 opacity-50">Behind the scenes</li>
+                      <li class="pt-4 opacity-50">Access to the SPN</li>
-                      <li class="pt-4 opacity-50">Lifetime subscription</li>
+                      <li class="pt-4 opacity-50">Unlimited Bandwidth</li>
+                      <li class="pt-4 opacity-50">Use on up to 5 devices</li>
+                      <li class="pt-4 opacity-50">Taxes</li>
+                      <li class="pt-4 opacity-50">30% off compared to Beta-Prices</li>
                     </ul>
-                    <div class="pt-40">
+                    <div class="pt-16">
                       <a href="{{ site.account_server_url }}pricing">
                         <button type="button" style="background-color: #000;" class="w-full text-center items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white transition duration-150 ease-in-out uppercase">
-                          Buy
+                          Pre-Order
                         </button>
                       </a>
                     </div>