mirror of
https://github.com/safing/web
synced 2025-09-01 18:49:06 +00:00
Add spn page tailwind html
This commit is contained in:
davegson
parent
2811222edf
commit
38bf302de1
4 changed files with 288 additions and 1 deletions
BIN
assets/img/page-specific/spn/layers.gif
Normal file
BIN
assets/img/page-specific/spn/layers.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
BIN
assets/img/page-specific/spn/metadata.gif
Normal file
BIN
assets/img/page-specific/spn/metadata.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 MiB |
BIN
assets/img/page-specific/spn/switch.gif
Normal file
BIN
assets/img/page-specific/spn/switch.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 MiB |
289
spn/index.html
289
spn/index.html
|
|
@ -1,4 +1,291 @@
|
|||
---
|
||||
title: Safing Privacy Network
|
||||
layout: page_column
|
||||
layout: page
|
||||
---
|
||||
|
||||
<header class="h-screen">
|
||||
<img class="-z-0 pt-16 absolute hidden md:block" style="z-index: -1;" src="{{ site.img_url }}shapes/corner-tl.png" alt="">
|
||||
<div class="flex items-center h-full">
|
||||
<div class="container mx-auto sm:px-8 sm:px-0">
|
||||
<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="lg:pb-0 m0-0 lg:mr-40 self-center">
|
||||
<span style="font-size: 12rem; font-weight: 800; margin-top: -5rem; margin-left: 6rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
|
||||
<img src="{{ site.img_url }}shapes/circle-md.png" alt="">
|
||||
</span>
|
||||
<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 max-w-full max-h-auto transform scale-70" height="1220" width="1220" playsinline="" preload="auto" src="./videos/spn/interim.mp4"
|
||||
controls autoplay muted loop></video>
|
||||
<span style="font-size: 12rem; font-weight: 800; margin-top: -4.5rem; margin-left: -3rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
|
||||
<img src="{{ site.img_url }}shapes/circle-sm.png" alt="">
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="inline-block text-center md:text-left">
|
||||
<h2 class="text-6xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
|
||||
Privacy Network
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-4xl">
|
||||
it's the foundation we build our products on. We make sacrifices on
|
||||
all other fronts to protect your privacy and push the limits of
|
||||
technology to do so.
|
||||
</p>
|
||||
<div class="py-10 sm:py-10 md:flex text-center">
|
||||
<button type="button" style="background-color: #6188ff;" class="mb-5 md:mb-0 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">
|
||||
<span class="pr-3 text-2xl wiggle">🎉</span>Pre-order SPN
|
||||
</button>
|
||||
<br>
|
||||
<a class="transition duration-150 ease-in-out hover:opacity-100 self-center md:pl-8 uppercase opacity-50 text-xs font-bold" href="#">Built on the Portmaster</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section style="margin-top: 3rem;">
|
||||
<div class="text-center pb-48">
|
||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
|
||||
SPN Features
|
||||
</h2>
|
||||
<p class="text-md opacity-50 w-auto mx-auto max-w-lg">
|
||||
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
|
||||
</p>
|
||||
</div>
|
||||
<div class="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:flex block justify-center m-auto w-auto">
|
||||
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
|
||||
<img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
|
||||
</div>
|
||||
<div class="inline-block max-w-lg">
|
||||
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold py-10 lg:w-auto">
|
||||
End-to-End Metadata Encryption
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
|
||||
and VPNs from collecting all your personal [meta] data. Secure
|
||||
your whole computer, not only your web-browser.
|
||||
</p>
|
||||
<!-- <div class="py-10 flex">
|
||||
<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 spn
|
||||
</button>
|
||||
<a class="transition duration-150 ease-in-out hover:opacity-100 self-center pl-8 uppercase opacity-50 text-xs font-bold" href="#">Source code</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/metadata.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items-center h-full 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 items-center">
|
||||
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
|
||||
<img src="{{ site.img_url }}page-specific/spn/layers.gif" alt="">
|
||||
</div>
|
||||
<div class="inline-block max-w-lg">
|
||||
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
|
||||
Onion Layer Encryption
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
The Portmaster enables you to protect your data on your device.
|
||||
You are back in charge of your outgoing connections: you choose
|
||||
what data you share and what data stays private.
|
||||
</p>
|
||||
<!-- <div class="py-10 flex">
|
||||
<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
|
||||
</button>
|
||||
<a class="transition duration-150 ease-in-out hover:opacity-100 self-center pl-8 uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items-center h-full 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 items-center">
|
||||
<div class="pb-16 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">
|
||||
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
|
||||
Distributed Multi Identity Network
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
|
||||
and VPNs from collecting all your personal [meta] data. Secure
|
||||
your whole computer, not only your web-browser.
|
||||
</p>
|
||||
<!-- <div class="py-10 flex">
|
||||
<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 spn
|
||||
</button>
|
||||
<a class="transition duration-150 ease-in-out hover:opacity-100 self-center pl-8 uppercase opacity-50 text-xs font-bold" href="#">Source code</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-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 items-center">
|
||||
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center">
|
||||
<img src="{{ site.img_url }}page-specific/spn/switch.gif" alt="">
|
||||
</div>
|
||||
<div class="inline-block max-w-lg">
|
||||
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
|
||||
No Kill Switch Needed
|
||||
</h2>
|
||||
<p class="text-md opacity-50 max-w-lg">
|
||||
The Portmaster enables you to protect your data on your device.
|
||||
You are back in charge of your outgoing connections: you choose
|
||||
what data you share and what data stays private.
|
||||
</p>
|
||||
<div class="py-10 flex">
|
||||
<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">
|
||||
<a href="/portmaster.html">Discover the Portmaster</a>
|
||||
</button>
|
||||
<!-- <a class="transition duration-150 ease-in-out hover:opacity-100 self-center pl-8 uppercase opacity-50 text-xs font-bold" href="#">Source code</a> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section style="margin-top: 13rem;">
|
||||
<div class="items-center h-full">
|
||||
<div id="Pricing">
|
||||
<div class="max-w-full mx-auto px-4 sm:px-6">
|
||||
<div class="py-12 bg-white">
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
|
||||
Pre-order the SPN
|
||||
</h2>
|
||||
<p class="text-md opacity-50">
|
||||
Get your hands on thes pe-orders while you can.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-32">
|
||||
<ul class="md:grid md:grid-cols-2 lg:grid-cols-2 md:col-gap-8 md:row-gap-10 max-w-4xl mr-auto ml-auto">
|
||||
<li class="text-center md:text-left">
|
||||
<div class="block transform hover:scale-105 duration-150 ease-in-out hover p-16 rounded-lg">
|
||||
<span class="text-2xl">Early Adopter</span>
|
||||
<div class="block pb-6">
|
||||
<h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 ">€9.90</h1>
|
||||
<span class="text-xl pl-1 opacity-50 line-through">€11.90</span>
|
||||
</div>
|
||||
<span class="font-extrabold pt-10 text-md">Includes:</span>
|
||||
<ul class="">
|
||||
<li class="pt-4 opacity-50">Behind the scenes</li>
|
||||
<li class="pt-4 opacity-50">1 month subscription</li>
|
||||
</ul>
|
||||
<div class="pt-32">
|
||||
<button type="button" style="background-color: #000;" class="w-full text-center items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white transition duration-150 ease-in-out uppercase">
|
||||
<a href="/blogpod.html">Buy</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mt-10 md:mt-0 text-center md:text-left">
|
||||
<div class="block transform hover:scale-105 duration-150 ease-in-out hover p-16 rounded-lg">
|
||||
<span class="text-2xl">Early Adopter</span>
|
||||
<h1 style="font-size: 3.5rem;" class="font-extrabold pt-6 pb-6">€2,000</h1>
|
||||
<span class="font-extrabold pt-10 text-md">Includes:</span>
|
||||
<ul>
|
||||
<li class="pt-4 opacity-50">Behind the scenes</li>
|
||||
<li class="pt-4 opacity-50"> Lifetime subscription</li>
|
||||
</ul>
|
||||
<div class="pt-40">
|
||||
<button type="button" style="background-color: #000;" class="w-full text-center items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white transition duration-150 ease-in-out uppercase">
|
||||
<a href="/blogpod.html">Buy</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section style="margin-top: 6rem;" class="pb-48 ">
|
||||
<div class="bg-white">
|
||||
<div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
|
||||
<div class="text-center pb-12">
|
||||
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
|
||||
FAQ
|
||||
</h2>
|
||||
<p class="text-md opacity-50">
|
||||
Got a qustion? well, it might be in here already.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-6 pt-10 text-center md:text-left">
|
||||
<dl class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<div>
|
||||
<h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
|
||||
<dd class="mt-2">
|
||||
<p class="text-md opacity-50">
|
||||
I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
|
||||
<dd class="mt-2">
|
||||
<p class="text-md opacity-50">
|
||||
You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
|
||||
<dd class="mt-2">
|
||||
<p class="text-md opacity-50">
|
||||
Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12 md:mt-0">
|
||||
<div>
|
||||
<h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
|
||||
<dd class="mt-2">
|
||||
<p class="text-md opacity-50">
|
||||
Sign language. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
|
||||
<dd class="mt-2">
|
||||
<p class="text-md opacity-50">
|
||||
Because the pee is silent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<h1 class="text-xl pb-4">What's the best thing about Switzerland?</h1>
|
||||
<dd class="mt-2">
|
||||
<p class="text-md opacity-50">
|
||||
He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue