mirror of
https://github.com/safing/web
synced 2025-09-02 19:19:03 +00:00
Update landing layout
This commit is contained in:
Luke
parent
b4d551dac3
commit
04c19ead91
1 changed files with 65 additions and 111 deletions
144
index.html
144
index.html
|
|
@ -5,120 +5,74 @@ title: Safing - Love Freedom
|
||||||
|
|
||||||
{% include header.html %}
|
{% include header.html %}
|
||||||
|
|
||||||
<section class="mt-20 md:mt-0" id="tools">
|
<section id="features" class="my-32 md:mt-16 md:mb-40">
|
||||||
<div class="flex items-center h-full">
|
<div class="mx-auto lg:pl-16 grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col" style="max-width: 2000px;">
|
||||||
<div class="container mx-auto px-8 sm:px-0 flex">
|
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
|
||||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex">
|
<div class="inline-block max-w-lg lg:mr-32">
|
||||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0">
|
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex" style="background-color: #5c85ff; width: max-content;">
|
||||||
<div class="inline-block max-w-3xl text-center md:text-left">
|
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||||
<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>
|
Interface is still in active development.
|
||||||
<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>
|
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
|
||||||
<div class="mt-10 self-center md:ml-0 lg:ml-16">
|
Monitor All Network Activity
|
||||||
<ul class="md:grid md:grid-cols-3 md:col-gap-10 md:row-gap-10 text-center md:text-left">
|
</h2>
|
||||||
<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">
|
<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.
|
Discover everything that is happening on your computer. Expose every connection your applications make and detect evil ones. Finally get the power to act accordingly.
|
||||||
</p>
|
</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>
|
</div>
|
||||||
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
|
<div class="lg:-mr-20 ml-auto row-start-1 self-end md:self-start ">
|
||||||
<img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
|
<img class="" src="{{ site.img_url }}page-specific/portmaster/monitor-network-activity.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mx-auto lg:pr-16 grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;">
|
||||||
|
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
|
||||||
|
<div class="inline-block max-w-lg lg:ml-32">
|
||||||
|
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex" style="background-color: #5c85ff; width: max-content;">
|
||||||
|
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||||
|
Interface is still in active development.
|
||||||
|
</div>
|
||||||
|
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10">
|
||||||
|
Block Trackers System-Wide
|
||||||
|
</h2>
|
||||||
|
<p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
|
||||||
|
Protect your whole computer, not just your browser. Block all advertisements and trackers for every application. Easily add your own rules and block individual domains.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="items-center h-full mt-24 md:mt-32 lg:mt-64">
|
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
|
||||||
<div class="container mx-auto px-8 sm:px-0 flex">
|
<img class="" src="{{ site.img_url }}page-specific/portmaster/block-trackers-system-wide.png" alt="">
|
||||||
<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>
|
||||||
<div class="inline-block max-w-lg">
|
</div>
|
||||||
<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>
|
<div class="mx-auto lg:pl-16 grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;">
|
||||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All-Round System Privacy</h2>
|
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
|
||||||
|
<div class="inline-block max-w-lg lg:mr-32">
|
||||||
|
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex" style="background-color: #5c85ff; width: max-content;">
|
||||||
|
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||||
|
Interface is still in active development.
|
||||||
|
</div>
|
||||||
|
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
|
||||||
|
Set Global & per‑App Settings
|
||||||
|
</h2>
|
||||||
<p class="text-md opacity-55 max-w-lg">
|
<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.
|
Make your own rules. Completely cut off applications from the Internet. Or block all p2p connections except for certain apps. Or never connect to specific countries. The Portmaster has you covered.
|
||||||
</p>
|
</p>
|
||||||
<div class="py-10 md:flex text-center md:text-left inline-block">
|
|
||||||
|
<div class="py-10 sm:py-10 text-center sm:flex">
|
||||||
<a href="{{ site.portmaster_url }}">
|
<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">
|
<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
|
Discover the Portmaster
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</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>
|
<br>
|
||||||
|
<a href="{{ site.portmaster_url }}#downloads" class="sm:pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-55 text-xs font-bold">
|
||||||
|
Download Alpha
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
|
||||||
|
<img class="" src="{{ site.img_url }}page-specific/portmaster/Set-global-and-per-app-configureation.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue