Skip to content

Commit c10c8e3

Browse files
author
Michał Gryczka
committed
extended pricing descriptions
1 parent 751f48e commit c10c8e3

File tree

7 files changed

+229
-38
lines changed

7 files changed

+229
-38
lines changed

‎src/components/pricing/Pricing.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const PricingCard = ({ data, activePlan }: CardProps) => {
142142
)}
143143
{data.price === -1 && (
144144
<a
145-
className="action"
145+
className="action contact-sales"
146146
target={data.linkTarget ?? "_self"}
147147
href={isAnnual ? data.annualPriceLink : data.priceLink}
148148
>

‎src/components/pricing/style.scss‎

Lines changed: 76 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
background-color: transparent;
2323
border: none;
2424
padding: 4px 20px;
25-
@include typography(paragraph);
25+
font-size: 14px;
26+
font-weight: 400;
27+
line-height: 1.6;
2628
color: var(--text-body-primary);
2729
cursor: pointer;
2830

@@ -96,7 +98,9 @@
9698
padding: 20px;
9799

98100
p {
99-
@include typography(pricebox-title);
101+
font-size: 18px;
102+
font-weight: 500;
103+
line-height: 1.4;
100104
color: var(--text-body-primary);
101105
text-wrap: nowrap;
102106
}
@@ -124,7 +128,8 @@
124128
}
125129

126130
& > .suffix {
127-
@include typography(footer);
131+
font-size: 12px;
132+
line-height: 1.5;
128133
color: var(--text-body-primary);
129134
}
130135

@@ -162,7 +167,8 @@
162167
}
163168

164169
& > .annual-message {
165-
@include typography(footer);
170+
font-size: 12px;
171+
line-height: 1.5;
166172
color: var(--text-body-primary);
167173
text-align: center;
168174
text-wrap: balance;
@@ -185,20 +191,46 @@
185191
justify-content: center;
186192
min-width: calc(86.5px + (32 * 2px));
187193
border-radius: 25px;
188-
border: 1px solid var(--text-body-primary);
194+
border: 1px solid var(--surface-main-primary);
195+
background-color: var(--surface-main-primary);
189196
box-sizing: border-box;
190197
text-decoration: none;
191198
padding: 10px;
192-
transition: border-color 0.2s, color 0.2s;
199+
transition: border-color 0.2s, color 0.2s, background-color 0.2s;
193200

194201
&:hover, &:focus {
195202
cursor: pointer;
196-
border-color: var(--surface-main-primary);
203+
border-color: var(--brand-hover-main-secondary);
204+
background-color: var(--brand-hover-main-secondary);
205+
206+
span {
207+
color: #000000 !important;
208+
}
197209
}
198210

199211
span {
200-
@include typography(h3);
201-
color: var(--text-body-primary);
212+
font-size: 14px;
213+
font-weight: 500;
214+
line-height: 1.4;
215+
color: var(--text-button-secondary);
216+
}
217+
218+
&.contact-sales {
219+
background-color: transparent;
220+
border: 1px solid var(--surface-main-primary);
221+
222+
span {
223+
color: var(--surface-main-primary);
224+
}
225+
226+
&:hover, &:focus {
227+
background-color: var(--surface-main-primary);
228+
border-color: var(--surface-main-primary);
229+
230+
span {
231+
color: #000000 !important;
232+
}
233+
}
202234
}
203235
}
204236
}
@@ -248,23 +280,55 @@
248280
box-sizing: border-box;
249281
padding: 20px;
250282

283+
// Override typography for pricing page specific smaller fonts
284+
strong {
285+
font-size: 14px;
286+
font-weight: 600;
287+
line-height: 1.8;
288+
display: block;
289+
margin-bottom: 12px;
290+
color: var(--text-body-primary);
291+
}
292+
251293
ul {
252294
margin: 0;
253295
padding: 0;
254296
padding-left: 15px;
297+
line-height: 1.8;
255298

256299
li {
257-
@include typography(pricebox-list);
258-
margin-bottom: 7px;
300+
font-size: 14px;
301+
font-weight: 400;
302+
line-height: 1.7;
303+
margin-bottom: 10px;
259304
text-wrap: balance;
260305

261306
& > span {
262307
display: block;
263-
@include typography(footer);
308+
font-size: 12px;
309+
line-height: 1.5;
264310
color: var(--text-body-primary);
265311
}
266312
}
267313
}
314+
315+
// Remove underlines from links and add blue color
316+
a {
317+
text-decoration: none;
318+
color: var(--surface-main-primary);
319+
transition: color 0.2s ease;
320+
321+
&:hover {
322+
color: var(--brand-hover-main-secondary);
323+
}
324+
}
325+
326+
// Optimize paragraph spacing
327+
p {
328+
font-size: 14px;
329+
line-height: 1.6;
330+
margin-bottom: 12px;
331+
}
268332
}
269333
}
270334
}

‎src/content/pricing/enterprise.mdx‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,37 @@ annualPrice: -1
77
annualPriceLink: "/get-a-quote/"
88
buttonText: "Contact Sales"
99
---
10-
- All [Enterprise features](https://docs.defguard.net/enterprise/enterprise-features) with custom users and locations limits or unlimited
11-
- [Offline license on request](https://docs.defguard.net/enterprise/license#offline-license)
12-
- Roadmap Privileges - participation in shaping Defguard’s roadmap, with priority consideration for requested features.
13-
- Enterprise Support:
10+
**Unlimited Open Source features:**
11+
- VPN locations and users management with [built-in IdP/SSO](https://docs.defguard.net/features/openid-connect)
12+
- [VPN connection-level Multi-factor authentication (MFA/2FA)](https://docs.defguard.net/features/wireguard/multi-factor-authentication-mfa-2fa/internal-sso-based-mfa)
13+
- [VPN Client for desktop and mobile (all platforms)](/client)
14+
- [Remote user enrollment](https://docs.defguard.net/features/remote-user-enrollment)
15+
- [Activity & Audit logs](https://docs.defguard.net/features/activity-log)
16+
<br/><br/>
17+
18+
19+
**[Enterprise features](https://docs.defguard.net/enterprise/enterprise-features)**
20+
- **custom users and locations limits**
21+
- External OIDC (Google, Microsoft, Okta, JumpCloud)
22+
- Multi-Factor Authentication on VPN (desktop & mobile) with external OIDC
23+
- Two-way LDAP & AD sync
24+
- Real-time clients configuration updates
25+
- ACLs
26+
- Activity & Audit log streaming to SIEM
27+
- Secure remote enrollment via OIDC
28+
- Admin-only device & client management options
29+
- Restrict “All traffic” mode, enforce predefined routes
30+
- REST API integration with external tools
31+
32+
**Enterprise Support**
1433
- Guaranteed response within 1 business day
1534
- Dedicated representative
1635
- Pre-arranged calls for issue resolution
36+
- Deployment / Roll-out assistance
37+
38+
39+
**[Offline license on request](https://docs.defguard.net/enterprise/license#offline-license)**
40+
41+
**Roadmap Privileges** Participation in shaping Defguard’s roadmap, with priority consideration for requested features.
42+
1743

‎src/content/pricing/free.mdx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,25 @@ annualPriceLink: "/download-confirm/"
77
linkTarget: "_self"
88
buttonText: "Download"
99
---
10+
**Unlimited Open Source features:**
11+
- VPN locations and users management with [built-in IdP/SSO](https://docs.defguard.net/features/openid-connect)
12+
- [VPN connection-level Multi-factor authentication (MFA/2FA)](https://docs.defguard.net/features/wireguard/multi-factor-authentication-mfa-2fa/internal-sso-based-mfa)
13+
- [VPN Client for desktop and mobile (all platforms)](/client)
14+
- [Remote user enrollment](https://docs.defguard.net/features/remote-user-enrollment)
15+
- [Activity & Audit logs](https://docs.defguard.net/features/activity-log)
16+
<br/><br/>
1017

18+
**[Enterprise features](https://docs.defguard.net/enterprise/enterprise-features):**
19+
- **[limited to 5 users and 1 VPN location](https://docs.defguard.net/enterprise/license#enterprise-is-free-up-to-certain-limits)**
20+
- External OIDC (Google, Microsoft, Okta, JumpCloud)
21+
- Multi-Factor Authentication on VPN (desktop & mobile) with external OIDC
22+
- Two-way LDAP & AD sync
23+
- Real-time clients configuration updates
24+
- ACLs
25+
- Activity & Audit log streaming to SIEM
26+
- Secure remote enrollment via OIDC
27+
- Admin-only device & client management options
28+
- Restrict “All traffic” mode, enforce predefined routes
29+
- REST API integration with external tools
1130

12-
- All Open Source features without limits<br/>
13-
- [Enterprise features](https://docs.defguard.net/enterprise/enterprise-features) limits:<br/>
14-
◦ Up to 5 users / 10 devices<br/>
15-
◦ 10 [network devices](https://docs.defguard.net/admin-and-features/network-devices)<br/>
16-
◦ 1 location <span>(no limits for number of gateways per location)</span>
17-
- [Community support](https://docs.defguard.net/support#community-support)
31+
**[Community support](https://docs.defguard.net/support#community-support)**

‎src/content/pricing/premium.mdx‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,28 @@ annualPrice: 129
77
annualPriceLink: "https://buy.stripe.com/eVqfZh0uPdwe4Iq7IbbfO0m"
88
buttonText: "Buy"
99
---
10-
- All Open Source features without limits
11-
- [Enterprise features](https://docs.defguard.net/enterprise/enterprise-features) limits:
12-
- 250 users / 500 devices
13-
- 5 VPN location limit
14-
- 1000 [network devices](https://docs.defguard.net/admin-and-features/network-devices) (for IoT)
15-
- Email Support & Ticket system
10+
**Unlimited Open Source features:**
11+
- VPN locations and users management with [built-in IdP/SSO](https://docs.defguard.net/features/openid-connect)
12+
- [VPN connection-level Multi-factor authentication (MFA/2FA)](https://docs.defguard.net/features/wireguard/multi-factor-authentication-mfa-2fa/internal-sso-based-mfa)
13+
- [VPN Client for desktop and mobile (all platforms)](/client)
14+
- [Remote user enrollment](https://docs.defguard.net/features/remote-user-enrollment)
15+
- [Activity & Audit logs](https://docs.defguard.net/features/activity-log)
16+
<br/><br/>
17+
18+
19+
20+
**[Enterprise features](https://docs.defguard.net/enterprise/enterprise-features)**
21+
- **limited to 250 users and 5 VPN locations**
22+
- External OIDC (Google, Microsoft, Okta, JumpCloud)
23+
- Multi-Factor Authentication on VPN (desktop & mobile) with external OIDC
24+
- Two-way LDAP & AD sync
25+
- Real-time clients configuration updates
26+
- ACLs
27+
- Activity & Audit log streaming to SIEM
28+
- Secure remote enrollment via OIDC
29+
- Admin-only device & client management options
30+
- Restrict “All traffic” mode, enforce predefined routes
31+
- REST API integration with external tools
32+
33+
**Email Support & Ticket system support**
34+

‎src/content/pricing/standard.mdx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,25 @@ annualPriceLink: "https://buy.stripe.com/00w3cva5p3VEgr87IbbfO0k"
88
buttonText: "Buy"
99
disabled: false
1010
---
11+
**Unlimited Open Source features:**
12+
- VPN locations and users management with [built-in IdP/SSO](https://docs.defguard.net/features/openid-connect)
13+
- [VPN connection-level Multi-factor authentication (MFA/2FA)](https://docs.defguard.net/features/wireguard/multi-factor-authentication-mfa-2fa/internal-sso-based-mfa)
14+
- [VPN Client for desktop and mobile (all platforms)](/client)
15+
- [Remote user enrollment](https://docs.defguard.net/features/remote-user-enrollment)
16+
- [Activity & Audit logs](https://docs.defguard.net/features/activity-log)
17+
<br/><br/>
1118

12-
- All Open Source features without limits
13-
- [Enterprise features](https://docs.defguard.net/enterprise/enterprise-features) limits:
14-
- 85 users / 200 devices
15-
- 3 VPN locations
16-
- 250 [network devices](https://docs.defguard.net/admin-and-features/network-devices) (eg. for IoT)
17-
- [Community support](https://docs.defguard.net/support#community-support)
19+
**[Enterprise features](https://docs.defguard.net/enterprise/enterprise-features)**
20+
- **limited to 85 users, 3 VPN locations**
21+
- External OIDC (Google, Microsoft, Okta, JumpCloud)
22+
- Multi-Factor Authentication on VPN (desktop & mobile) with external OIDC
23+
- Two-way LDAP & AD sync
24+
- Real-time clients configuration updates
25+
- ACLs
26+
- Activity & Audit log streaming to SIEM
27+
- Secure remote enrollment via OIDC
28+
- Admin-only device & client management options
29+
- Restrict “All traffic” mode, enforce predefined routes
30+
- REST API integration with external tools
31+
32+
**[Community support](https://docs.defguard.net/support#community-support)**

‎src/pages/pricing.astro‎

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const tags = [
7272
variant="white"
7373
theme="light"
7474
>
75-
<PricingHeaderContent />
75+
7676
</FlexibleSection>
7777
<PricingCards client:load data={pricingData} />
7878
</header>
@@ -114,6 +114,59 @@ const tags = [
114114
</div>
115115

116116
<style lang="scss" is:global>
117+
// Pricing page specific font sizes (scoped to pricing page only)
118+
#pricing-page {
119+
font-size: 14px;
120+
line-height: 1.6;
121+
122+
h1, h2, h3, h4, h5, h6 {
123+
line-height: 1.4;
124+
}
125+
126+
h1 {
127+
font-size: 28px;
128+
}
129+
130+
h2 {
131+
font-size: 20px;
132+
}
133+
134+
h3 {
135+
font-size: 16px;
136+
}
137+
138+
h4 {
139+
font-size: 14px;
140+
}
141+
142+
p {
143+
font-size: 14px;
144+
line-height: 1.6;
145+
}
146+
147+
// Remove underlines from links and add color highlight
148+
a:not(.action) {
149+
text-decoration: none;
150+
color: var(--surface-main-primary);
151+
transition: color 0.2s ease;
152+
153+
&:hover {
154+
color: var(--brand-hover-main-secondary);
155+
}
156+
}
157+
158+
// Optimize bullet list spacing
159+
ul {
160+
line-height: 1.8;
161+
162+
li {
163+
margin-bottom: 8px;
164+
font-size: 14px;
165+
line-height: 1.7;
166+
}
167+
}
168+
}
169+
117170
#pricing-container {
118171
padding-bottom: 40px;
119172
}
@@ -146,8 +199,8 @@ const tags = [
146199
flex-flow: column;
147200
justify-content: flex-start;
148201
width: 100%;
149-
padding-bottom: 50px;
150-
gap: 20px;
202+
padding-bottom: 20px;
203+
gap: 10px;
151204

152205
h1 {
153206
text-align: left;

0 commit comments

Comments
 (0)