Update header

This commit is contained in:
Luke 2022-06-27 12:13:33 +02:00
parent f5cdd2f74c
commit 198655f3a3

View file

@ -11,39 +11,75 @@ layout: page
from current speeds and features from current speeds and features
</span> </span>
</a> </a>
<header class="header-one-container-reverse mb-64 mt-36"> <header class="header-two-container mb-64 mt-20">
<div class="header-one-left pl-12"> <div class="header-two-top">
<h1 class="header-one-left-title lg:max-w-md"> <div class="alert max-w-md bg-transparent mx-auto">
Safing Privacy Network <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> </h1>
<p class="header-one-left-desc"> <p class="header-two-top-desc" style="max-width: 650px;">
With the SPN you protect all your connections from mass Stop paying for out-dated technology that was never intended to protect your privacy.
surveillance. Prevent all Internet Service Providers Get peace of mind with the SPN. Built from scratch and designed to truly protect your privacy
from collecting and selling your private activities. from mass surveillance.
</p> </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-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>
<div class="header-one-right"> <div class="grid md:grid-cols-2 space-y-3 space-x-3 mt-12 justify-center justify-items-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"> <div>
<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"> <div class="card-package most-popular card-shadow">
<div class="card-package-most-popular">
<span>Most Popular</span>
</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"> <div class="card-package-top">
<img src="{{ site.img_url }}shapes/circle-sm.png" alt=""> <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> </span>
</div> </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>
</header> </header>
<section class="general-layout"> <section class="general-layout">
<div class="intro-container mt-32"> <div class="intro-container mt-32">