mirror of
https://github.com/safing/web
synced 2025-09-02 02:59:03 +00:00
Update layout
This commit is contained in:
Luke
parent
ab356bb5c8
commit
4ebfa99ebf
1 changed files with 199 additions and 6 deletions
|
|
@ -26,16 +26,16 @@ redirect_from:
|
|||
<div class="py-10 sm:py-10 block mx-auto">
|
||||
<a href="#downloads">
|
||||
<button type="button" style="background-color: #000;" class="mb-5 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">
|
||||
download the alpha
|
||||
download for free
|
||||
</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>
|
||||
<!-- <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 class="pt-6 lg:pt-0 ">
|
||||
<div class="pt-6">
|
||||
<!-- <video style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" preload="auto" src="{{ site.assets_url }}video/interim.mp4" controls muted></video> -->
|
||||
<img style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75 max-w-sm" height="1220" width="1220" src="{{ site.img_url }}/placeholder.png" alt="">
|
||||
<img src="{{ site.img_url }}page-specific/portmaster/full-interface.png" class="z-30 rounded-md mx-auto transform " style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" alt="">
|
||||
</div>
|
||||
<span style="margin-top: -45rem; margin-left: -8rem; z-index: -1;" class="absolute transform scale-50 lg:scale-105 xl:scale-150 bg-cover opacity-75 hidden lg:block">
|
||||
<img src="{{ site.img_url }}page-specific/portmaster/wave.png" alt="">
|
||||
|
|
@ -44,7 +44,200 @@ redirect_from:
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<section class="my-20 md:my-40">
|
||||
|
||||
|
||||
<section id="features" class="my-32 md:mt-16 md:mb-40">
|
||||
|
||||
|
||||
<div class="text-center py-24 lg:pt-0 lg:pb-48">
|
||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
|
||||
A Bundle of Privacy Features
|
||||
</h2>
|
||||
<p class="text-md opacity-55 w-auto mx-auto max-w-lg">
|
||||
At its core, the Portmaster sits on your kernel and simply intercepts all your network connections. You decide which privacy features you want to enable or disable as you desire.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<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="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 break-words" style="background-color: #5c85ff; width: fit-content;">
|
||||
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||
Alpha Software: Portmaster is 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">
|
||||
Monitor All Network Activity
|
||||
</h2>
|
||||
<p class="text-md opacity-55 max-w-lg">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:-mr-20 ml-auto row-start-1 self-end md:self-start ">
|
||||
<img class="" src="{{ site.img_url }}page-specific/portmaster/monitor-network-activity.png" alt="">
|
||||
</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 break-words" style="background-color: #5c85ff; width: fit-content;">
|
||||
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||
Alpha Software: Portmaster is 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">
|
||||
Manually Allow or Block Connections
|
||||
</h2>
|
||||
<p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
|
||||
Add your own rules to additionally block all domains you dislike. Enable Prompt Mode and decide the fate of every new connection. Block or Allow.
|
||||
</p>
|
||||
</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/manually-allow-ord-block-connections.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<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;">
|
||||
<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 break-words" style="background-color: #5c85ff; width: fit-content;">
|
||||
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||
Alpha Software: Portmaster is 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">
|
||||
Auto-Block via Filter Lists
|
||||
</h2>
|
||||
<p class="text-md opacity-55 max-w-lg">
|
||||
Block ads, trackers, malware and NSFW sites via trusted domain-lists, which are also used by Ad-Blockers, etc. Easily change the defaults to fit your needs.
|
||||
</p>
|
||||
</div>
|
||||
<div class="py-10 sm:py-10 text-center sm:flex">
|
||||
<a href="{{ site.docs_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">
|
||||
Checkout our Docs
|
||||
</button>
|
||||
</a>
|
||||
</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/block-trackers-system-wide.png" alt="">
|
||||
</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 break-words" style="background-color: #5c85ff; width: fit-content;">
|
||||
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||
Alpha Software: Portmaster is 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">
|
||||
Enforce DNS-over-TLS
|
||||
</h2>
|
||||
<p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
|
||||
Even with invasive connections gone, you do 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>
|
||||
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
|
||||
<img class="" src="{{ site.img_url }}page-specific/portmaster/enforce-dns-over-tls.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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;">
|
||||
<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 break-words" style="background-color: #5c85ff; width: fit-content;">
|
||||
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||
Alpha Software: Portmaster is 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">
|
||||
Explore the Docs and Source Code
|
||||
</h2>
|
||||
<p class="text-md opacity-55 max-w-lg">
|
||||
In the age of Mass Surveillance, what good is a service when you cannot see what it is really doing? We believe in open source. We also document everything as good as we can.
|
||||
</p>
|
||||
</div>
|
||||
<div class="py-10 sm:py-10 text-center sm: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">
|
||||
Source Code
|
||||
</button>
|
||||
</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">
|
||||
Checkout our Docs
|
||||
</a>
|
||||
</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/explore-the-docs-and-source-code.png" alt="">
|
||||
</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 break-words" style="background-color: #5c85ff; width: fit-content;">
|
||||
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||
Alpha Software: Portmaster is 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">
|
||||
Configure Settings for Different Networks
|
||||
</h2>
|
||||
<p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
|
||||
The Wi-Fi in your local coffee shop is riskier than yours at home. Set up your settings for different networks and then simply press a button when changing location. All settings will adjust immediately.
|
||||
</p>
|
||||
</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/configure-settings-for-different-networks.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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;">
|
||||
<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 break-words" style="background-color: #5c85ff; width: fit-content;">
|
||||
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
|
||||
Alpha Software: Portmaster is 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">
|
||||
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>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <section class="my-20 md:my-40">
|
||||
<div class="text-center py-24 lg:pt-0 lg:pb-48">
|
||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
|
||||
A Bundle of Privacy Features
|
||||
|
|
@ -150,7 +343,7 @@ redirect_from:
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
|
||||
<section class="mt-16 lg:mt-48 pb-20 lg:pb-40">
|
||||
<div class="items-center h-full">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue