mirror of
https://github.com/safing/web
synced 2025-09-01 18:49:06 +00:00
Retext spn features, description and pricing
This commit is contained in:
davegson
parent
ebdb41552a
commit
c4d8015c0c
1 changed files with 110 additions and 88 deletions
198
spn/index.html
198
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">
|
||||
Privacy Network
|
||||
<h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-3/4">
|
||||
Safing 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
|
||||
all other fronts to protect your privacy and push the limits of
|
||||
technology to do so.
|
||||
With the SPN you protect all your connections from mass surveillance. Prevent all Internet Service Providers from collecting and selling your private activities.
|
||||
</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,13 +45,40 @@ 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‑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 items-center">
|
||||
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
|
||||
<img src="{{ site.img_url }}page-specific/spn/layers.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 leading-none py-10 lg:w-2/3">
|
||||
Onion Layer Encryption
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
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.
|
||||
</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">
|
||||
|
|
@ -61,12 +86,10 @@ layout: page
|
|||
</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
|
||||
Minimize your Meta‑Data
|
||||
</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.
|
||||
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">
|
||||
|
|
@ -74,69 +97,59 @@ layout: page
|
|||
</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">
|
||||
<img src="{{ site.img_url }}page-specific/spn/layers.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 leading-none py-10 lg:w-2/3">
|
||||
Onion Layer Encryption
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
The Portmaster enables you to protect your data on your device.
|
||||
You are back in charge of your outgoing connections: you choose
|
||||
what data you share and what data stays private.
|
||||
</p>
|
||||
</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 items-center">
|
||||
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
|
||||
<img src="{{ site.img_url }}page-specific/spn/network.png" 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 block justify-center m-auto w-auto items-center">
|
||||
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
|
||||
<img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
|
||||
</div>
|
||||
<div class="inline-block max-w-lg">
|
||||
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
|
||||
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
|
||||
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/network.png" alt="">
|
||||
</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 items-center">
|
||||
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
|
||||
<img src="{{ site.img_url }}page-specific/spn/switch.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 leading-none py-10 lg:w-2/3">
|
||||
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.
|
||||
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.portmaster_url }}">
|
||||
<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">
|
||||
Discover the Portmaster
|
||||
</button>
|
||||
<div class="inline-block max-w-lg">
|
||||
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
|
||||
Distributed Multi Identity Network
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
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].
|
||||
</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>
|
||||
</div>
|
||||
</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="">
|
||||
</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 items-center">
|
||||
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
|
||||
<img src="{{ site.img_url }}page-specific/spn/switch.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 leading-none py-10 lg:w-2/3">
|
||||
No Kill Switch Needed
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
Get piece of mind instead of fearing data-leakage.
|
||||
</p>
|
||||
<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 }}">
|
||||
<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">
|
||||
Discover the Portmaster
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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">1 month subscription</li>
|
||||
<li class="pt-4 opacity-50">Access to the SPN</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>
|
||||
<h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 pb-6">€2,000</h1>
|
||||
<span class="text-2xl">Early Adopter Yearly</span>
|
||||
<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">Lifetime subscription</li>
|
||||
<li class="pt-4 opacity-50">Access to the SPN</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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue