mirror of
https://github.com/safing/web
synced 2025-09-01 18:49:06 +00:00
Merge pull request #69 from safing/fix/spn-description-texts
Spn description texts
This commit is contained in:
Dave Gson
GitHub
commit
841f9cd05a
5 changed files with 116 additions and 97 deletions
|
|
@ -61,9 +61,6 @@
|
|||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="{{ site.podcast_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Podcast</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="{{ site.newsletter_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Newsletter</a>
|
||||
</li>
|
||||
<li class="mt-2 inline-block mr-2 md:block md:mr-0">
|
||||
<a href="{{ site.invidious_channel_url }}" class="no-underline hover:opacity-100 opacity-50 text-white transition duration-150 ease-in-out">Video Updates</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ footer {
|
|||
}
|
||||
|
||||
.wiggle {
|
||||
animation: wiggle .2s infinite alternate;
|
||||
animation: wiggle .6s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ title: Safing
|
|||
<div class="mt-4 ml-4">
|
||||
<h5 class="text-2xl leading-6 font-bold text-gray-900">Transparency</h5>
|
||||
<p class="mt-4 text-base leading-6 opacity-50 max-w-sm m-auto">
|
||||
Trust to handle your sensitive data can only grow by being open about our company. In every aspect.
|
||||
The trust to handle your sensitive data can only grow by being open about our company. In every aspect.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -81,7 +81,7 @@ title: Safing
|
|||
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">01</span>
|
||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">Powerful VPN Alternative</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
Cut out the middleman. Secure all your meta-data by decoupling yourself from your destination, inspired by Tor. Protect your whole computer, not only your browser.
|
||||
Free yourself from mass surveillance. Secure all your meta-data by decoupling yourself from your destination, inspired by Tor. Protect your whole computer, not only your browser.
|
||||
</p>
|
||||
<div class="py-10 lg:flex text-center sm:text-left inline-block">
|
||||
<a href="{{ site.spn_url }}">
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ redirect_from:
|
|||
All-Around System Privacy
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
Since the Portmaster sits on your kernel, you can finally protect your whole computer, not just your browser. Do you want to block Ads and Analytics for your whole operating system? Or certain ports? The Portmaster has you covered.
|
||||
Since the Portmaster sits on your kernel, you can finally protect your whole computer, not just your browser. Do you want to block Ads and Analytics for your whole operating system? Or whole countries? The Portmaster has you covered.
|
||||
</p>
|
||||
<p class="text-sm opacity-50 max-w-lg pt-4">
|
||||
Your kernel is a cricital part of your computer, so be encouraged to validate our claims.
|
||||
|
|
@ -83,7 +83,7 @@ redirect_from:
|
|||
Global & per‑App Configuration
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
Cut off apps from the Internet entirely, block system processes or limit applications to only access certain domains.
|
||||
Cut off apps from the Internet entirely, block system processes or limit applications to specific domains only.
|
||||
</p>
|
||||
<p class="text-md opacity-50 max-w-lg pt-4">
|
||||
With the Portmaster, your power becomes limitless.
|
||||
|
|
@ -103,7 +103,7 @@ redirect_from:
|
|||
Enforce DNS‑over‑TLS
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
Even with malicious connections gone, you might not want to share your dns requests out in the open. With the Portmaster, you can easily re-route all your dns queries to a DNS-over-TLS provider of your choice.
|
||||
Even with invasive connections gone, you might not want to share your dns requests out in the open. With the Portmaster, you can easily re-route all your dns queries to a DNS-over-TLS provider of your choice.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
|
||||
|
|
|
|||
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: which websites you visit and how frequently tell more about you than knowing what you actually 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. 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 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. Use vast amounts of identities (IP addresses) 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