mirror of
https://github.com/safing/web
synced 2025-04-23 12:29:09 +00:00
182 lines
12 KiB
HTML
182 lines
12 KiB
HTML
---
|
|
layout: page
|
|
title: Safing - Love Freedom
|
|
---
|
|
|
|
{% include header.html %}
|
|
|
|
<section class="mt-20 md:mt-0" id="tools">
|
|
<div class="flex 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:px-0 lg:flex">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0">
|
|
<div class="inline-block max-w-3xl text-center md:text-left">
|
|
<h2 class="text-5xl w-1/1 tracking-tight font-extrabold leading-none py-10">Engage the problem at <span style="color: #6188ff;">The Core</span></h2>
|
|
<p class="text-md opacity-55">
|
|
The Internet is one of the most beautiful things there is. But every connection has the potential to betray you, leaking personal information you never wanted to share. That's where we intercept.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-10 self-center md:ml-0 lg:ml-16">
|
|
<ul class="md:grid md:grid-cols-3 md:col-gap-10 md:row-gap-10 text-center md:text-left">
|
|
<li class="pt-8 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
|
|
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
|
|
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="none">
|
|
<path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 11.182c0 4.541-3.413 8.787-8 9.818-4.587-1.031-8-5.277-8-9.818V7.615c0-.812.491-1.544 1.243-1.851l5-2.046c1.126-.461 2.388-.461 3.514 0l5 2.046C19.509 6.072 20 6.803 20 7.615v3.567z" />
|
|
<path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.25 10.125l-3.75 3.75-2.25-2.25" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="mt-4 ml-4">
|
|
<h5 class="text-2xl leading-6 font-bold text-gray-900">Open Source</h5>
|
|
<p class="mt-4 text-base leading-6 opacity-55 max-w-sm m-auto">
|
|
Secure software can only emerge when many smart people review and contribute to the code base.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
|
|
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
|
|
<svg class="heart h-8 w-8" stroke="#446eed" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 5.711C12.689 4.905 13.881 4 15.696 4 18.871 4 21 6.98 21 9.755 21 15.556 13.778 20 12 20c-1.778 0-9-4.444-9-10.245C3 6.98 5.129 4 8.304 4c1.815 0 3.007.905 3.696 1.711z" stroke-linecap="round" stroke-width="1.8" fill="none"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<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-55 max-w-sm m-auto">
|
|
The trust to handle your sensitive data can only grow by being open about our company. In every aspect.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
|
|
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto ">
|
|
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke-linecap="round" stroke-width="1.8" stroke="#446eed" fill="none" stroke-linejoin="round">
|
|
<path d="M13.7678 10.9822c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M19.2538 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M18 12.25c1.533 0 3 .533 4 1.333M8.28177 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M2 13.583c1-.8 2.467-1.333 4-1.333M16.591 19.75c-1.165-.901-2.839-1.5-4.591-1.5-1.752 0-3.426.599-4.591 1.5" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="mt-4 ml-4">
|
|
<h5 class="text-2xl leading-6 font-bold text-gray-900">Our Quest</h5>
|
|
<p class="mt-4 text-base leading-6 opacity-55 max-w-sm m-auto">
|
|
We chase freedom so our societies can flourish. Giving control back to the people is way overdue.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="mt-40 md:mt-0">
|
|
<div class="items-center mt-16 md:mt-32 lg: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-48 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">
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 absolute bg-top md:-ml-12">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-55 max-w-lg">
|
|
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 }}">
|
|
<button type="button" style="background-color: #000;" class="mb-5 md:mb-0 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 SPN
|
|
</button>
|
|
</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-24 md:mt-32 lg: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">
|
|
<div class="pb-48 lg:pb-0 m0-0 lg:mr-32 self-center">
|
|
<img src="{{ site.img_url }}page-specific/portmaster/monitor.png" alt="">
|
|
</div>
|
|
<div class="inline-block max-w-lg">
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class=" z-0 absolute bg-top md:-ml-12">02</span>
|
|
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All-Round System Privacy</h2>
|
|
<p class="text-md opacity-55 max-w-lg">
|
|
Enforce DNS-over-TLS and block connections on a system wide level. Protect your whole computer, not only your browser. Free to use.
|
|
</p>
|
|
<div class="py-10 md:flex text-center md:text-left inline-block">
|
|
<a href="{{ site.portmaster_url }}">
|
|
<button type="button" style="background-color: #000;" class="mb-5 md:mb-0 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>
|
|
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-55 text-xs font-bold" href="{{ site.github_url }}/portmaster/">Source Code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="items-center h-full pb-8 lg:pb-24 mt-8 md:mt-32 lg: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">
|
|
<div class="py-12 bg-white">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="lg:text-center">
|
|
<!-- hide the huge "Follow Us" in mobile & md devices for now, made width problems -->
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top hidden lg:block">Follow Us</span>
|
|
<h2 class="text-5xl tracking-tight font-extrabold leading-none md:py-10 text-center" style="position: relative;">
|
|
Blog, Podcast & Videos
|
|
</h2>
|
|
</div>
|
|
<div class="mt-8 lg:mt-32">
|
|
<ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10 max-w-sm mx-auto md:max-w-full">
|
|
<!-- podcast -->
|
|
{% assign sorted_podcasts = site.podcasts | reverse %}
|
|
{% for episode in sorted_podcasts limit: 1 %}
|
|
{% include thumbnail_podcast.html pre_header="PODCAST" %}
|
|
{% endfor %}
|
|
|
|
<!-- video -->
|
|
{% assign sorted_videos = site.videos | reverse %}
|
|
{% for video in sorted_videos limit: 1 %}
|
|
{% include thumbnail_video.html pre_header="VIDEO" %}
|
|
{% endfor %}
|
|
|
|
<!-- blog -->
|
|
{% for post in site.posts limit: 1 %}
|
|
{% include thumbnail_blog.html pre_header="BLOG" %}
|
|
{% endfor %}
|
|
</ul>
|
|
<div class="pt-20 flex w-full">
|
|
<div class="mx-auto grid md:block">
|
|
<a class="mx-auto" href="{{ site.blog_url }}">
|
|
<button type="button" style="background-color: #000;" class="scale-110 md:scale-100 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">
|
|
Blogs
|
|
</button>
|
|
</a>
|
|
<a class="mx-auto" href="{{ site.podcast_url }}">
|
|
<button type="button" style="background-color: #000;" class="mt-8 mb-8 md:mt-0 md:mb-0 md:ml-4 md:mr-4 scale-110 md:scale-100 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">
|
|
Podcast
|
|
</button>
|
|
</a>
|
|
<a class="mx-auto" href="{{ site.video_url }}">
|
|
<button type="button" style="background-color: #000;" class="scale-110 md:scale-100 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">
|
|
Videos
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|