Skip to content

Commit f6427c3

Browse files
author
Michał Gryczka
committed
mfa opt. description, tags, keywords, style updated
1 parent 4427b8c commit f6427c3

File tree

1 file changed

+192
-24
lines changed

1 file changed

+192
-24
lines changed

‎src/pages/vpn_mfa.astro‎

Lines changed: 192 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import ImageURL from "../components/image/ImageURL.astro";
1010
import YouTubeVideo from "../components/video/YouTubeVideo.astro";
1111
1212
const title = "True WireGuard® VPN MFA - Connection-Level Multi-Factor Authentication";
13+
const description =
14+
"Enable WireGuard 2FA and MFA with Defguard for secure VPN connections. Learn how to set up connection-level multi-factor authentication with biometrics and external IdPs.";
1315
const featuredImage =
1416
"github.com/DefGuard/defguard.github.io/raw/main/public/images/product/core/hero-image.png";
1517
const imageWidth = "1920";
@@ -18,6 +20,12 @@ const url = "https://defguard.net/mfa";
1820
const tags = [
1921
"defguard",
2022
"mfa",
23+
"vpn mfa",
24+
"mfa for wireguard",
25+
"wireguard 2fa",
26+
"wireguard mfa",
27+
"WireGuard MFA configuration",
28+
"vpn multi-factor authentication",
2129
"2fa",
2230
"multi-factor authentication",
2331
"WireGuard®",
@@ -31,6 +39,7 @@ const tags = [
3139

3240
<ProductLayout
3341
title={title}
42+
description={description}
3443
featuredImage={featuredImage}
3544
imageWidth={imageWidth}
3645
imageHeight={imageHeight}
@@ -42,30 +51,78 @@ const tags = [
4251
<!-- Hero Section -->
4352
<HomeHeader
4453
trustedBy={true}
45-
title="Most advanced VPN MFA"
46-
description="Defguard provides enterprise grade VPN multi-factor authentication for WireGuard with biometrics for mobile and desktop users at VPN connection level."
54+
title="True VPN MFA & 2FA for WireGuard® with Connection-Level authentication"
55+
description="Defguard provides enterprise grade VPN multi-factor authentication (MFA/2FA) for WireGuard® with biometrics for mobile and desktop users at VPN connection level."
4756
buttons={[
48-
{ name: "Try Defguard Today", link: "/download?utm_source=mfa" },
57+
{ name: "Defguard One-Line Install", link: "https://docs.defguard.net/getting-started/one-line-install" },
4958
{ name: "Book a Demo", link: "/book-a-demo?utm_source=mfa" },
5059
]}
5160
/>
5261
<!-- MFA Definition Section -->
53-
<HomeSection variant="white" contentId="mfa-definition">
54-
<h2>What is Multi-Factor Authentication?</h2>
55-
<p>
56-
MFA (Multi-Factor Authentication) is a method of securing IT systems that requires
57-
the user to confirm their identity using at least two or more independent
58-
verification factors.
59-
</p>
60-
<p>
61-
The main purpose of MFA is to strengthen security by acting as a highly effective
62-
barrier against cyberattacks such as phishing or brute-force attacks.
63-
</p>
64-
<p>
65-
MFA is a critical component of Zero-Trust security, which is a security model that
66-
assumes that all users, devices, and applications are potentially compromised.
67-
</p>
68-
</HomeSection>
62+
<FlexibleSection
63+
id="mfa-definition"
64+
variant="white"
65+
theme="light"
66+
>
67+
<div slot="left">
68+
<h2>What is Multi-Factor Authentication?</h2>
69+
<div class="mfa-definition">
70+
<p class="definition-highlight">
71+
<strong>MFA (Multi-Factor Authentication)</strong> is a security method that requires users to verify their identity using <strong>two or more independent factors</strong> before gaining access to systems or networks.
72+
</p>
73+
<p>
74+
In the context of VPNs, this is often called <em>WireGuard 2FA</em>, but true MFA goes far beyond basic two-factor authentication.
75+
</p>
76+
</div>
77+
</div>
78+
79+
<div slot="right">
80+
<h3>Why MFA Matters</h3>
81+
<div class="mfa-benefits">
82+
<div class="benefit-item">
83+
<div class="benefit-icon">
84+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
85+
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2" fill="none"/>
86+
<path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" fill="none"/>
87+
</svg>
88+
</div>
89+
<div class="benefit-content">
90+
<h4>Blocks Cyberattacks</h4>
91+
<p>Highly effective barrier against phishing, brute-force, and credential theft attacks</p>
92+
</div>
93+
</div>
94+
95+
<div class="benefit-item">
96+
<div class="benefit-icon">
97+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
98+
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
99+
<circle cx="12" cy="16" r="1" fill="currentColor"/>
100+
<path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2" fill="none"/>
101+
</svg>
102+
</div>
103+
<div class="benefit-content">
104+
<h4>Zero-Trust Foundation</h4>
105+
<p>Critical component of Zero-Trust security that assumes all users and devices are potentially compromised</p>
106+
</div>
107+
</div>
108+
109+
<div class="benefit-item">
110+
<div class="benefit-icon">
111+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
112+
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" fill="none"/>
113+
<circle cx="12" cy="12" r="1" fill="currentColor"/>
114+
<circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2" fill="none" stroke-dasharray="2 4"/>
115+
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" stroke="currentColor" stroke-width="1.5"/>
116+
</svg>
117+
</div>
118+
<div class="benefit-content">
119+
<h4>Layered Defense</h4>
120+
<p>Provides multiple verification layers beyond just passwords or keys</p>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
</FlexibleSection>
69126
<!-- The Problem Section -->
70127
<HomeSection variant="gray" contentId="mfa-problem">
71128
<h2>VPN "MFA" buzzwords can be misleading</h2>
@@ -78,8 +135,8 @@ const tags = [
78135
<div slot="left">
79136
<h3>Why Most VPN "MFA" Claims Are Misleading</h3>
80137
<p>
81-
In most cases, "MFA" simply refers to 2FA for accessing the configuration panel
82-
or performing the initial client setup - <strong
138+
In most cases, "MFA" simply refers to WireGuard® 2FA for accessing the
139+
configuration panel or performing the initial cli ent setup - <strong
83140
>not MFA during the connection stage</strong
84141
>.
85142
</p>
@@ -442,12 +499,13 @@ const tags = [
442499
</p>
443500
</div>
444501
</FlexibleSection>
502+
445503
<!-- Final CTA Section -->
446504
<CTASection
447505
title="Try Defguard Today"
448-
description="Install free open source Defguard in 10 minutes and experience true connection-level MFA for WireGuard® VPN."
449-
buttonText="Download Defguard"
450-
buttonLink="/download?utm_source=mfa"
506+
description="Install free open source Defguard in 10 minutes and experience true connection-level WireGuard 2FA and MFA for secure VPN connections."
507+
buttonText="One-Line Install"
508+
buttonLink="https://docs.defguard.net/getting-started/one-line-install"
451509
button2Text="Book a Demo"
452510
button2Link="/book-a-demo?utm_source=mfa"
453511
id="cta-mfa"
@@ -657,4 +715,114 @@ const tags = [
657715
}
658716
}
659717
}
718+
719+
// MFA Definition Section Styles
720+
#mfa-definition {
721+
.mfa-definition {
722+
.definition-highlight {
723+
font-size: 1.1em;
724+
line-height: 1.6;
725+
margin-bottom: 1.5rem;
726+
padding: 1.5rem;
727+
background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
728+
border-left: 4px solid var(--surface-main-primary);
729+
border-radius: 8px;
730+
731+
strong {
732+
color: var(--surface-main-primary);
733+
}
734+
}
735+
736+
p {
737+
line-height: 1.7;
738+
margin-bottom: 1rem;
739+
740+
em {
741+
color: var(--surface-main-primary);
742+
font-style: italic;
743+
}
744+
}
745+
}
746+
747+
.mfa-benefits {
748+
display: flex;
749+
flex-direction: column;
750+
gap: 1.5rem;
751+
752+
.benefit-item {
753+
display: flex;
754+
align-items: flex-start;
755+
gap: 1rem;
756+
padding: 1.25rem;
757+
background: var(--surface-nav-bg);
758+
border-radius: 12px;
759+
border: 1px solid var(--border-separator);
760+
transition: all 0.3s ease;
761+
762+
&:hover {
763+
transform: translateY(-2px);
764+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
765+
border-color: var(--surface-main-primary);
766+
}
767+
768+
.benefit-icon {
769+
flex-shrink: 0;
770+
width: 48px;
771+
height: 48px;
772+
display: flex;
773+
align-items: center;
774+
justify-content: center;
775+
background: linear-gradient(135deg, var(--surface-main-primary), #0a7bc5);
776+
border-radius: 12px;
777+
color: white;
778+
779+
svg {
780+
color: white;
781+
stroke: currentColor;
782+
fill: none;
783+
}
784+
}
785+
786+
.benefit-content {
787+
flex: 1;
788+
789+
h4 {
790+
margin: 0 0 0.5rem 0;
791+
color: var(--text-body-primary);
792+
font-size: 1.1rem;
793+
font-weight: 600;
794+
}
795+
796+
p {
797+
margin: 0;
798+
color: var(--text-body-secondary);
799+
line-height: 1.5;
800+
font-size: 0.95rem;
801+
}
802+
}
803+
}
804+
}
805+
806+
h3 {
807+
color: var(--text-body-primary);
808+
margin-bottom: 1.5rem;
809+
font-size: 1.3rem;
810+
font-weight: 600;
811+
}
812+
813+
@media (max-width: 768px) {
814+
.mfa-benefits {
815+
gap: 1rem;
816+
817+
.benefit-item {
818+
padding: 1rem;
819+
820+
.benefit-icon {
821+
width: 40px;
822+
height: 40px;
823+
}
824+
}
825+
}
826+
}
827+
}
660828
</style>

0 commit comments

Comments
 (0)