Skip to content

Commit 4bd0f56

Browse files
4lb4lb
authored
Merge pull request #58 from DefGuard/get-quote
get a quote for enterprise
2 parents 23dbd21 + 5315d6f commit 4bd0f56

File tree

6 files changed

+156
-23
lines changed

6 files changed

+156
-23
lines changed

‎src/components/pricing/Pricing.tsx

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,8 @@ const PricingCard = ({ data, activePlan }: CardProps) => {
106106
<div className="pricing-container">
107107
<div
108108
className={clsx("price", {
109-
free: data.price === 0,
110-
spaced: data.price === 0 || !isAnnual,
109+
free: data.price === 0 || data.price === -1,
110+
spaced: data.price === 0 || data.price === -1 || !isAnnual,
111111
})}
112112
>
113113
{data.price > 0 && (
@@ -117,26 +117,47 @@ const PricingCard = ({ data, activePlan }: CardProps) => {
117117
annual: isAnnual,
118118
})}
119119
>
120-
€{data.price}
120+
&euro;{data.price}
121121
</p>
122122
)}
123-
{!isAnnual && data.price > 0 && <p className="suffix">per month</p>}
124123
{data.price === 0 && <p className="free">Free</p>}
125-
{isAnnual && <p className="annually">€{data.annualPrice}</p>}
124+
{data.price === -1 && <p className="free">Contact us</p>}
125+
{!isAnnual && data.price > 0 && <p className="suffix">per month</p>}
126+
{isAnnual && data.annualPrice !== -1 && <p className="annually">&euro;{data.annualPrice}</p>}
126127
</div>
127-
{isAnnual && data.annualPrice !== undefined && (
128+
{isAnnual && data.annualPrice !== undefined && data.annualPrice !== -1 && (
128129
<p className="annual-message">
129-
per month, billed annually you will be charged €{data.annualPrice * 12}
130+
per month, billed annually you will be charged &euro;{data.annualPrice * 12}
130131
</p>
131132
)}
132133
<div className="action-container">
133-
<a
134-
className="action"
135-
target={data.linkTarget ?? "_blank"}
136-
href={isAnnual ? data.annualPriceLink : data.priceLink}
137-
>
138-
<span>{data.buttonText}</span>
139-
</a>
134+
{data.price === 0 && (
135+
<a
136+
className="action"
137+
target={data.linkTarget ?? "_self"}
138+
href={isAnnual ? data.annualPriceLink : data.priceLink}
139+
>
140+
<span>{data.buttonText}</span>
141+
</a>
142+
)}
143+
{data.price === -1 && (
144+
<a
145+
className="action"
146+
target={data.linkTarget ?? "_self"}
147+
href={isAnnual ? data.annualPriceLink : data.priceLink}
148+
>
149+
<span>Get a quote</span>
150+
</a>
151+
)}
152+
{data.price > 0 && (
153+
<a
154+
className="action"
155+
target={data.linkTarget ?? "_blank"}
156+
href={isAnnual ? data.annualPriceLink : data.priceLink}
157+
>
158+
<span>{data.buttonText}</span>
159+
</a>
160+
)}
140161
</div>
141162
</div>
142163
<div className="divider">

‎src/components/pricing/style.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555

5656
@include break-up(xl) {
5757
grid-template-columns: repeat(auto-fit, 255px);
58-
justify-content: space-between;
58+
// justify-content: space-between;
5959
column-gap: 25px;
6060
row-gap: 25px;
6161
}
@@ -169,9 +169,11 @@
169169
box-sizing: border-box;
170170
text-decoration: none;
171171
padding: 10px;
172+
transition: border-color 0.2s, color 0.2s;
172173

173-
&:hover {
174+
&:hover, &:focus {
174175
cursor: pointer;
176+
border-color: var(--surface-main-primary);
175177
}
176178

177179
span {

‎src/content/pricing/enterprise.mdx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
---
22
name: "Enterprise"
33
order: 4
4-
price: 390
5-
priceLink: "https://buy.stripe.com/3csdSZ1Os5wfgdGeUY"
6-
annualPrice: 359
7-
annualPriceLink: "https://buy.stripe.com/00g16ddxa1fZ4uYcMV"
8-
discount: 8
9-
buttonText: "Buy"
4+
price: -1
5+
priceLink: "/get-a-quote/"
6+
annualPrice: -1
7+
annualPriceLink: "/get-a-quote/"
8+
buttonText: "Contact Us"
109
---
1110

1211
- All Enterprise & Open Source features

‎src/content/pricing/premium.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
name: "Premium"
2+
name: "Standard"
33
order: 3
44
price: 190
55
priceLink: "https://buy.stripe.com/eVaeX39gUe2L9PifZ1"

‎src/content/pricing/standard.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ annualPrice: 59
77
annualPriceLink: "https://buy.stripe.com/bIYg17fFi3o76D6eV1"
88
discount: 15
99
buttonText: "Buy"
10+
disabled: true
1011
---
1112

1213
- All Enterprise & Open Source features

‎src/pages/get-a-quote.astro

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
import Navigation from "../components/base/Navigation.astro";
3+
import BaseLayout from "../layouts/BaseLayout.astro";
4+
import OrganizationJSONLD from "../scripts/OrganizationJSONLD.astro";
5+
import BookDemoForm from "../components/form/BookDemoForm/BookDemoForm";
6+
import ContentLimiter from "../components/ContentLimiter.astro";
7+
8+
const title = "Request a Quote – defguard Enterprise";
9+
const description = "Fill out the form to request a customized quote for defguard Enterprise.";
10+
const url = "https://defguard.net/get-a-quote/";
11+
const tags = ["defguard", "enterprise", "quote", "vpn", "contact"];
12+
const featuredImage = "github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
13+
const imageWidth = "1080";
14+
const imageHeight = "540";
15+
---
16+
17+
<BaseLayout
18+
title={title}
19+
description={description}
20+
url={url}
21+
featuredImage={featuredImage}
22+
imageWidth={imageWidth}
23+
imageHeight={imageHeight}
24+
>
25+
<meta property="og:image" content={featuredImage.startsWith('http') ? featuredImage : `https://${featuredImage}`} />
26+
<OrganizationJSONLD
27+
slot="schema"
28+
title={title}
29+
description={description}
30+
url={url}
31+
tags={tags}
32+
/>
33+
<Navigation activeSlug="/get-a-quote/" />
34+
35+
<div id="get-evaluation-license" class="sla-support-wrapper">
36+
<div id="sla-support">
37+
<div class="left">
38+
<h2>Request a quote for enterprise license</h2>
39+
<p class="sla-description">
40+
Fill out the form below to request a customized quote tailored to your organization's needs. Our team will get back to you promptly with pricing and details based on your requirements.
41+
</p>
42+
</div>
43+
<ContentLimiter contentId="sla-support-content" maxWidth={1100}>
44+
<div class="product-features">
45+
<BookDemoForm submit_text="Request quote" client:load />
46+
</div>
47+
</ContentLimiter>
48+
</div>
49+
</div>
50+
51+
<style lang="scss" is:global>
52+
.sla-support-wrapper {
53+
width: 100%;
54+
background-color: var(--background-secondary, #f5f5f5);
55+
padding: 60px 0;
56+
}
57+
58+
#sla-support {
59+
width: 100%;
60+
position: relative;
61+
62+
.left {
63+
position: relative;
64+
width: 100%;
65+
66+
& > h2 {
67+
@include typography(paragraph);
68+
box-sizing: border-box;
69+
font-family: "Poppins";
70+
font-size: 36px;
71+
font-weight: 400;
72+
line-height: 1.14;
73+
padding-top: 20px;
74+
padding-left: 20px;
75+
padding-right: 20px;
76+
padding-bottom: 0;
77+
max-width: 1100px;
78+
margin: 0 auto;
79+
word-wrap: break-word;
80+
overflow-wrap: break-word;
81+
hyphens: auto;
82+
83+
@include break-up(md) {
84+
padding-top: 54px;
85+
padding-left: 20px;
86+
padding-right: 20px;
87+
font-size: 55px;
88+
padding-bottom: 0;
89+
}
90+
}
91+
}
92+
93+
#sla-support-content {
94+
width: 100%;
95+
max-width: 1100px;
96+
margin: 0 auto;
97+
padding: 0 20px;
98+
box-sizing: border-box;
99+
}
100+
}
101+
102+
.sla-description {
103+
max-width: 1100px;
104+
margin: 0 auto;
105+
padding: 30px 20px;
106+
padding-bottom: 100px;
107+
box-sizing: border-box;
108+
}
109+
</style>
110+
</BaseLayout>

0 commit comments

Comments
 (0)