1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-09 13:39:09 +00:00
safing-web/pricing/index.html
2022-10-17 10:57:47 +02:00

481 lines
32 KiB
HTML

---
layout: page
title: Safing Portmaster - Pricing
---
<header class="header-two-container mb-64 mt-20">
<div class="header-two-top">
<h1 class="header-two-top-title" style="margin-top: 0.3rem;">
Pricing
</h1>
<p class="header-two-top-desc" style="max-width: 650px;">
Built from scratch and designed to truly protect your privacy from mass surveillance.
</p>
</div>
<div class="header-two-bottom" style="margin-top: 1.85rem;">
<div class="element-x-center max-w-sm md:max-w-7xl">
<div class="package-billing darkmode">
<div class="package-billing-top">
<div class="package-billing-top-line-left"></div>
<div class="package-billingtop-top-center">
<div class="package-billingtop-top-center-inner">
<span>Per Month</span>
<span>Per Year</span>
</div>
</div>
<div class="package-billing-top-line-right"></div>
</div>
<input class="package-billing-toggle darkmode" type="checkbox" id="consent_text" name="consent_text" value="yes">
<div class="package-billing-bottom">
<div class="content-one">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 transform scale-90 xl:scale-100 gap-5 lg:gap-28 xl:gap-0 justify-center justify-items-center mx-auto" style="align-items: center;">
<div class="card-package darkmode" style="height: 650px;">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Portmaster Free</span>
</div>
<span class="card-package-top-amount">
Free
<span class="card-package-top-amount-monthly">/ Forever</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">Increase your privacy and security.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
<span tooltip="Portmaster is the base that deals with all our plugins"> <i class="icon-info text-gray-500 ml-1"></i></span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
</div>
<div class="card-package-bottom" style="bottom: 36px;">
<div class="hidden lg:block">
{% include download_button.html unique_id="1" %}
</div>
</div>
</div>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="1" autocomplete="off" type="hidden" name="charge[package_id]" id="charge_package_id">
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #2fcfae;">Supporter</span> </span>
</div>
<span class="card-package-top-amount">
3€
<span class="card-package-top-amount-monthly">/ 1-Month</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">We truly appreciate your support.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
<span tooltip="Portmaster is the base that deals with all our plugins"> <i class="icon-info text-gray-500 ml-1"></i></span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in Free
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Early Access to Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Reddit Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="1" autocomplete="off" type="hidden" name="charge[package_id]" id="charge_package_id">
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #029ad0;">Unlimited</span></span>
</div>
<span class="card-package-top-amount">
9.90€
<span class="card-package-top-amount-monthly">/ 1-Month</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">It's time to ditch VPN's.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
<span tooltip="Portmaster is the base that deals with all our plugins"> <i class="icon-info text-gray-500 ml-1"></i></span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in <span style="color: #2fcfae;">Supporter</span>
</span>
<span class="card-package-middle-includes">SPN Accress
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Geo-Unblocking
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Built for Privacy
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="content-two">
</div>
</div>
</div>
<div class="flex mx-auto w-max mt-8 space-x-8 items-center opacity-50" style="position: relative; z-index: -1;">
<div class="space-x-8 hidden lg:flex items-center">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/mastercard.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/visacard.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/amex.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/paypal.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/cash.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/monero.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/bitcoin.png">
</div>
</div>
</div>
<!-- <div class=" mt-10">
<div class="card-package darkmode relative mx-auto" style="max-width: 1210px; width: 100%;">
<div class="card-package-top" style="margin-top: 0;">
<span class="card-package-top-amount" style="font-size: 2rem;">
Open Source & Free
</span>
<p class="card-package-top-desc" style="max-width: 480px;">The free version is very powerful tool, but by buying a package you support the devlopment of the portmaster.</p>
</div>
<div class="card-package-bottom transform scale-105" style="position: absolute; width: 100%; left: 0; bottom: 0px; display: flex; justify-content: end; height: 100%;">
<div class="hidden lg:block" style="display: flex; align-items: center; margin-right: 4rem;">
{% include download_button.html unique_id="2" %}
</div>
</div>
</div>
<div class="flex mx-auto w-max mt-8 space-x-8 items-center">
<p class="block text-safing-gray-400">Seen and featured on</p>
<div class="space-x-8 hidden lg:flex items-center">
<a href="{{ site.seen_itsfoss_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/itsfoss.png"></a>
<a href="{{ site.seen_ghacks_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/ghacks.png"></a>
<a href="{{ site.seen_techlore_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/techlore.png"></a>
<a href="{{ site.seen_privacytools_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/privacytools.png"></a>
</div>
</div>
</div> -->
</div>
</div>
<div class="header-bg">
<div class="wave-contrainer" style="z-index: -1; bottom: unset; top: 440px; opacity: .45;">
<div class="wave-background" style="background-image: url({{ site.img_url }}page-specific/pricing/wave3.svg); height: 195px; position: unset;"></div>
</div>
</div>
</header>
<section class="general-layout">
<div class="showcase-two-container">
<div class="showcase-two-top-left" style="max-width: 73rem;">
<h2 class="showcase-two-top-title" style="max-width: 550px;">
Comparison Chart
</h2>
<p class="showcase-two-top-desc" style="max-width: 430px;">
Discover everything that is happing on your computer. Expose every connection your applications make.
</p>
</div>
<div class="showcase-two-bottom" style="max-width: 100%;">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 transform scale-90 xl:scale-100 gap-5 lg:gap-28 xl:gap-10 justify-center justify-items-center mx-auto" style="align-items: center;">
<div class="card-package darkmode" style="height: 1016px;">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Portmaster Free</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>
<p class="card-package-top-desc" style="max-width: 480px;">Increase your privacy and security.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes"> Portmaster Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy Filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Record App History
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Early Access to Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> VM Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Docker Support
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> SPN
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Auto Geo-Unblocking
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Socials
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Discord User Flair
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Private Discord Channel
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Reddit User Flair
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Priority Support
</span>
</div>
<div class="card-package-bottom" style="bottom: 36px;">
<div class="hidden lg:block">
{% include download_button.html unique_id="3" %}
</div>
</div>
</div>
<div class="card-package darkmode mt-0" style="height: 1016px;">
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #2fcfae;"> Supporter</span> </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>
<p class="card-package-top-desc" style="max-width: 480px;">We truly appreciate your support.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes"> Portmaster Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy Filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Record App History
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Early Access to Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> VM Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Docker Support
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> SPN
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Auto Geo-Unblocking
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Socials
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord User Flair
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Private Discord Channel
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Reddit User Flair
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary justify-center less-round" href="" style="background-color: #2a2a2a; width: 80%; border-radius: 7px !important; padding-top: 1.2rem; padding-bottom: 1.2rem;">Get Started</a>
</div>
</div>
<div class="card-package darkmode" style="height: 1016px;">
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #029ad0;">Unlimited</span></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>
<p class="card-package-top-desc" style="max-width: 480px;">It's time to ditch VPN's.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes"> Portmaster Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy Filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Record App History
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Early Access to Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> VM Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Docker Support
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> SPN
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Auto Geo-Unblocking
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Socials
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord User Flair
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Private Discord Channel
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Reddit User Flair
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
</div>
<div class="card-package-bottom">
<a class="btn-primary justify-center less-round" href="" style=" width: 80%; border-radius: 7px !important; padding-top: 1.2rem; padding-bottom: 1.2rem;">Get Started</a>
</div>
</div>
</div>
</div>
<!-- <div class="showcase-bg"></div> -->
</div>
<div class="showcase-one-container-reverse">
<div class="showcase-one-left" style="max-width: 1050px;">
<img src="{{ site.img_url }}page-specific/business-model/provide-local-value-for-free-forever.png" alt="">
</div>
<div class="showcase-one-right">
<h2 class="showcase-one-right-title" style="max-width: 450px;">
Our Transparent Business Model
</h2>
<p class="showcase-one-right-desc">
Everybody deserves privacy, not only the wealthy. That is why
all local privacy features are free, and will remain so forever.
This fits perfectly into the Freemium business model.
</p>
<a class="btn-secondary" href="{{ site.business_model_url }}">Explore our Business Model</a>
</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 darkmode 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">
{{ faq.a }}
{% 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>
</section>