mirror of
https://github.com/safing/web
synced 2025-09-01 18:49:06 +00:00
Update header
This commit is contained in:
Luke
parent
f5cdd2f74c
commit
198655f3a3
1 changed files with 68 additions and 32 deletions
100
spn/index.html
100
spn/index.html
|
|
@ -11,39 +11,75 @@ layout: page
|
|||
from current speeds and features
|
||||
</span>
|
||||
</a>
|
||||
<header class="header-one-container-reverse mb-64 mt-36">
|
||||
<div class="header-one-left pl-12">
|
||||
<h1 class="header-one-left-title lg:max-w-md">
|
||||
Safing Privacy Network
|
||||
</h1>
|
||||
<p class="header-one-left-desc">
|
||||
With the SPN you protect all your connections from mass
|
||||
surveillance. Prevent all Internet Service Providers
|
||||
from collecting and selling your private activities.
|
||||
</p>
|
||||
<div class="col-container w-full text-center lg:w-max lg:text-left">
|
||||
<a class="btn-primary" href="#pricing">Get started</a>
|
||||
<a class="btn-tertiary" href="{{ site.portmaster_url }}">Built into the Portmaster</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-one-right">
|
||||
<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>
|
||||
<div class="card">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<video class="max-w-2xl" preload="auto"
|
||||
src="{{ site.assets_server_url }}spn/feature-tour.mp4"
|
||||
poster="{{ site.assets_server_url }}spn/feature-tour-poster.png"
|
||||
controls>
|
||||
</video>
|
||||
</div>
|
||||
<div class="card-package most-popular card-shadow">
|
||||
<header class="header-two-container mb-64 mt-20">
|
||||
<div class="header-two-top">
|
||||
<div class="alert max-w-md bg-transparent mx-auto">
|
||||
<i class="icon-add text-xl" style="color: rgba(46, 98, 255, 1);"></i>
|
||||
<span style="color: rgba(0, 0, 0, 0.6);" class="text-md">Portmaster Add-on</span>
|
||||
</div>
|
||||
<h1 class="header-two-top-title" style="margin-top: 0.3rem;">
|
||||
It's Time to <span class="text-safing-blue-600">Ditch VPN's</span>
|
||||
</h1>
|
||||
<p class="header-two-top-desc" style="max-width: 650px;">
|
||||
Stop paying for out-dated technology that was never intended to protect your privacy.
|
||||
Get peace of mind with the SPN. Built from scratch and designed to truly protect your privacy
|
||||
from mass surveillance.
|
||||
</p>
|
||||
</div>
|
||||
<div class="header-two-bottom" style="margin-top: 3.5rem;">
|
||||
<div class="element-x-center max-w-sm md:max-w-4xl">
|
||||
<div class="package-billing">
|
||||
<div class="package-billing-line-left"></div>
|
||||
<span class="package-billing-center">Billing: <span class="text-safing-blue-600">One-Time Payment</span></span>
|
||||
<div class="package-billing-line-right"></div>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 space-y-3 space-x-3 mt-12 justify-center justify-items-center">
|
||||
<div>
|
||||
<div class="card-package most-popular card-shadow">
|
||||
<div class="card-package-most-popular">
|
||||
<span>Most Popular</span>
|
||||
</div>
|
||||
<div class="card-package-top">
|
||||
<div class="flex">
|
||||
<span class="card-package-top-title">Per Month</span>
|
||||
<span tooltip="Comparaed to Beta Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 39%</span>
|
||||
</div>
|
||||
<span class="card-package-top-amount">
|
||||
9.90€
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-package-middle space-y-4">
|
||||
<span class="card-package-middle-includes-feature"> Use SPN for 1-Month </span>
|
||||
</div>
|
||||
<div class="card-package-bottom">
|
||||
<a class="btn-secondary w-full justify-center" href="https://account.safing.io/plans/1/subscribe">Buy Package</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-package">
|
||||
<div class="card-package-top">
|
||||
<div class="flex">
|
||||
<span class="card-package-top-title">Per Year</span>
|
||||
<span tooltip="Comparaed to Beta Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 63%</span>
|
||||
</div>
|
||||
<span class="card-package-top-amount">
|
||||
99.00€
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-package-middle space-y-4">
|
||||
<span class="card-package-middle-includes-feature"> Use SPN for 1-Year </span>
|
||||
</div>
|
||||
<div class="card-package-bottom">
|
||||
<a class="btn-secondary w-full justify-center" href="https://account.safing.io/plans/1/subscribe">Buy Package</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</header>
|
||||
<section class="general-layout">
|
||||
<div class="intro-container mt-32">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue