safing-web/spn/index.html
davegson 1e478e4ed1 Switch Package cards around
- yearly plan is actually more popular, so correcting that
2022-06-28 12:39:37 +02:00

325 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Safing Privacy Network
layout: page
---
<a class="alert-primary hover-scale-out rounded-none text-md" data-method="get" href="https://docs.safing.io/spn/alpha/status">
<i class="icon-info text-md"></i>
<span>
SPN is in "Alpha". View
<span class="underline">what to expect</span>
from current speeds and features
</span>
</a>
<header class="header-two-container mb-64 mt-20">
<div class="header-two-top">
<div class="alert max-w-md bg-transparent mx-auto">
<i class="icon-add text-xl" style="color: rgba(46, 98, 255, 1);"></i>
<span style="color: rgba(0, 0, 0, 0.6);" class="text-md">Portmaster Add-on</span>
</div>
<h1 class="header-two-top-title" style="margin-top: 0.3rem;">
It's Time to <span class="text-safing-blue-600">Ditch VPN's</span>
</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
from mass surveillance.
</p>
</div>
<div class="header-two-bottom" style="margin-top: 3.5rem;">
<div class="element-x-center max-w-sm md:max-w-4xl">
<div class="package-billing">
<div class="package-billing-line-left"></div>
<span class="package-billing-center">Billing: <span class="text-safing-blue-600">One-Time Payment</span></span>
<div class="package-billing-line-right"></div>
</div>
<div class="grid md:grid-cols-2 space-y-3 space-x-3 mt-12 justify-center justify-items-center">
<div>
<div class="card-package most-popular card-shadow">
<div class="card-package-most-popular">
<span>Most Popular</span>
</div>
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Early Adopter</span>
<span tooltip="Compared to Monthly &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 36%</span>
</div>
<span class="card-package-top-amount">
99.00€
</span>
</div>
<div class="card-package-middle space-y-4">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Year </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="{{ site.account_server_url }}plans/2/subscribe">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div>
<div class="mt-2">
<div class="card-package">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Early Adopter</span>
<span tooltip="Compared to &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 23%</span>
</div>
<span class="card-package-top-amount">
9.90€
</span>
</div>
<div class="card-package-middle space-y-4">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Month </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="{{ site.account_server_url }}plans/1/subscribe">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div>
</div>
</div>
</div>
</header>
<section class="space-y-40">
<div class="intro-container mt-32">
<h2 class="intro-container-title">
Protect Your MetaData
</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="">
</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;">
Onion Layer Encryption
</h2>
<p class="showcase-one-right-desc">
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>
<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="">
</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;">
Distributed Multi Identity Network
</h2>
<p class="showcase-one-right-desc">
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>
<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-two-container">
<div class="showcase-two-top-break-left">
<h2 class="showcase-two-top-title" style="max-width: 550px;">
SPN in Action
</h2>
<p class="showcase-two-top-desc">
Watch a short video showing how you easily get multiple identities per app, by default.
</p>
</div>
<div class="showcase-two-bottom" style="max-width: 850px;">
<div class="card">
<div class="overflow-hidden">
<video preload="auto" src="https://assets.safing.io/spn/feature-tour.mp4" poster="https://assets.safing.io/spn/feature-tour-poster.png" controls="">
</video>
</div>
</div>
</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 MetaData
</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="">
</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;">
No Kill Switch Needed
</h2>
<p class="showcase-one-right-desc">
Get peace of mind instead of fearing data-leakage.
<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" 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 }}">
<span>
SPN is in "Alpha". View
<span class="underline">what to expect</span>
from current speeds and features
</span>
</a>
<h2 class="showcase-two-top-title">
Protect Your Connections Today
</h2>
<p class="showcase-two-top-desc">
Subscribe to the SPN and lock in the lower Alpha prices forever.
</p>
</div>
<div class="showcase-two-bottom" style="max-width: 850px;">
<div class="element-x-center max-w-sm md:max-w-4xl">
<div class="package-billing">
<div class="package-billing-line-left"></div>
<span class="package-billing-center">Billing: <span class="text-safing-blue-600">One-Time Payment</span></span>
<div class="package-billing-line-right"></div>
</div>
<div class="grid md:grid-cols-2 space-y-3 space-x-3 mt-12 justify-center justify-items-center">
<div>
<div class="card-package most-popular card-shadow">
<div class="card-package-most-popular">
<span>Most Popular</span>
</div>
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Early Adopter</span>
<span tooltip="Compared to Monthly &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 36%</span>
</div>
<span class="card-package-top-amount">
99.00€
</span>
</div>
<div class="card-package-middle space-y-4">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Year </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="{{ site.account_server_url }}plans/2/subscribe">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div>
<div>
<div class="card-package">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Early Adopter</span>
<span tooltip="Compared to &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 23%</span>
</div>
<span class="card-package-top-amount">
9.90€
</span>
</div>
<div class="card-package-middle space-y-4">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Month </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="{{ site.account_server_url }}plans/1/subscribe">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div>
</div>
</div>
</div>
</div>
<div class="faq-container mb-60" id="faq">
<div class="faq-container-top">
<h2 class="faq-container-top-title">
FAQ
</h2>
<p class="faq-container-top-desc">
You have a question? We answered some already, but you
can always contact us at <a class="link-primary" href="mailto:hello@safing.io">hello@safing.io</a>
</p>
</div>
<div class="faq-container-bottom">
{% for faq in site.data.faq.spn %}
<div class="faq-container-bottom-question">
<div class="card-faq card-shadow hover-scale-out">
<label class="card-label" for="card-toggle-anchor-{{ forloop.index }}">
<div class="wrapper-left">
<div class="card-title">
<h3 class="title">
{{ faq.q }}
</h3>
</div>
</div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-{{ forloop.index }}" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
<div class="text-safing-gray-500">
{{ faq.a }}
</div>
{% if faq.link %}
<br>
<br>
<a class="link-primary" href="{{ faq.link.url }}">{{ faq.link.text }}</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
{% include source_code_faq.html %}
</div>
</div>
</div>
</section>