Skip to content

Commit bc5c2b6

Browse files
4lb4lb
authored
Merge pull request #48 from DefGuard/demo-request
Demo request page add
2 parents dd28003 + e6ec52d commit bc5c2b6

File tree

6 files changed

+306
-245
lines changed

6 files changed

+306
-245
lines changed

‎src/content/pricing/free.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
name: Open Source
2+
name: Personal
33
order: 1
44
price: 0
5-
priceLink: "https://buy.stripe.com/dR6aGN8cQ6AjaTm006"
6-
annualPriceLink: "https://buy.stripe.com/dR6aGN8cQ6AjaTm006"
7-
linkTarget: "_blank"
8-
buttonText: "Support Us!"
5+
priceLink: "/download-confirm/"
6+
annualPriceLink: "/download-confirm/"
7+
linkTarget: "_self"
8+
buttonText: "Download"
99
---
1010

1111
- Community support

‎src/layouts/ProductLayout.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const description =
5050
}
5151

5252
& > p {
53-
max-width: 65ch;
53+
//max-width: 65ch;
5454
@include typography(paragraph);
5555
}
5656

‎src/pages/_home/components/HomeHeader.astro

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import TrustedBy from "./TrustedBy.astro";
2020

2121
<AstroButton
2222
link={{
23-
href: "/download-confirm",
23+
href: "/download-confirm/",
2424
target: "_self",
2525
preload: true,
2626
}}
@@ -29,11 +29,11 @@ import TrustedBy from "./TrustedBy.astro";
2929

3030
<AstroButton
3131
link={{
32-
href: "/pricing",
32+
href: "/book-a-demo/",
3333
target: "_self",
3434
preload: true,
3535
}}
36-
text="Buy Enterprise"
36+
text="Book a Demo"
3737
/>
3838

3939
</div>

‎src/pages/book-a-demo.astro

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
---
2+
import Navigation from "../components/base/Navigation.astro";
3+
import ProductLayout from "../layouts/ProductLayout.astro";
4+
import FlexibleSection from "../components/FlexibleSection.astro";
5+
import HomeSection from "../components/home/HomeSection.astro";
6+
import AstroButton from "../components/AstroButton.astro";
7+
import { Image } from "astro:assets";
8+
import brandAssets from "/public/images/data/brandassets.png";
9+
import contactImage from "/public/images/data/key-visual-BD.png";
10+
import BookDemoForm from "../components/form/BookDemoForm/BookDemoForm";
11+
const title = "defguard - Book a Demo";
12+
const featuredImage = "public/images/product/core/hero-image.png";
13+
const imageWidth = "1920";
14+
const imageHeight = "1080";
15+
const url = "https://defguard.net/book-a-demo/";
16+
const tags = [
17+
"defguard",
18+
"open source",
19+
"sso & vpn",
20+
"vpn",
21+
"mfa",
22+
"2fa",
23+
"mfa/2fa",
24+
"WireGuard®",
25+
"ldap",
26+
"openldap",
27+
"postgresql",
28+
"postgres",
29+
"openid",
30+
"totp",
31+
"webauthn",
32+
"opensense",
33+
"freebsd",
34+
"rust",
35+
"secure",
36+
"desktop client",
37+
"desktop",
38+
"yubikey",
39+
"docker",
40+
"kubernetes",
41+
"k8s",
42+
"press",
43+
"media",
44+
"press kit",
45+
"brand assets",
46+
"company information",
47+
"press release",
48+
"media contact",
49+
];
50+
---
51+
52+
<ProductLayout
53+
title={title}
54+
featuredImage={featuredImage}
55+
imageWidth={imageWidth}
56+
imageHeight={imageHeight}
57+
url={url}
58+
tags={tags}
59+
>
60+
<Navigation activeSlug="/press/" />
61+
62+
<main id="demo-request-page">
63+
64+
<HomeSection variant="white" contentId="press-header">
65+
<h1>Book a Demo</h1>
66+
<p>
67+
Take control of your team's security and access. See what defguard can do for you.
68+
</p>
69+
</HomeSection>
70+
71+
72+
73+
<FlexibleSection
74+
title="Demo Request"
75+
id="press-contact"
76+
variant="gray"
77+
theme="light"
78+
>
79+
<div slot="left">
80+
<p>
81+
What you can expect?
82+
</p>
83+
<p>
84+
<ul>
85+
<li>A walkthrough of defguard’s core features, including secure identity management, access policies, and user enrollment</li>
86+
<li>Insights into how defguard can enhance your security and streamline operations</li>
87+
<li>A discussion on how defguard can integrate with your existing infrastructure</li>
88+
</ul>
89+
</p>
90+
<p>
91+
Our demo takes around 20-30 min.
92+
</p>
93+
</div>
94+
<div slot="right">
95+
<BookDemoForm client:load form_source="Book-Demo Page"/>
96+
</div>
97+
</FlexibleSection>
98+
</div>
99+
100+
</main>
101+
</ProductLayout>
102+
103+
<style lang="scss" is:global>
104+
#press-header {
105+
padding-bottom: page-spacing(100px);
106+
padding-top: 50px;
107+
108+
& > p {
109+
@include typography(paragraph);
110+
padding-bottom: 8px;
111+
max-width: 800px;
112+
margin: 0 auto;
113+
text-align: center;
114+
}
115+
116+
h1 {
117+
color: var(--text-body-primary);
118+
padding-bottom: 40px;
119+
max-width: 996px;
120+
text-align: center;
121+
text-wrap: balance;
122+
@include typography(title);
123+
}
124+
125+
.link-track {
126+
width: 100%;
127+
display: flex;
128+
flex-flow: row;
129+
align-items: center;
130+
justify-content: center;
131+
gap: 16px;
132+
padding: 40px 0px;
133+
134+
@include break-down(sm) {
135+
flex-flow: column;
136+
align-items: center;
137+
}
138+
}
139+
140+
}
141+
142+
#home-page {
143+
--page-spacing-factor: 0.5;
144+
@include break-up(lg) {
145+
--page-spacing-factor: 1;
146+
}
147+
148+
.flexible-content {
149+
padding-top: page-spacing(80px);
150+
padding-bottom: page-spacing(80px);
151+
152+
.section-title {
153+
@include typography(section); // Change back to section typography for main sections
154+
border-bottom: 1px solid var(--text-body-primary);
155+
padding-bottom: 1rem;
156+
margin-bottom: 2rem;
157+
}
158+
159+
h3 {
160+
@include typography(h3);
161+
margin-top: 0;
162+
margin-bottom: 1rem;
163+
}
164+
165+
p {
166+
@include typography(paragraph);
167+
margin-bottom: 1.5rem;
168+
}
169+
170+
.learn-more {
171+
margin-bottom: 1.5rem;
172+
}
173+
174+
.learn-more-link {
175+
display: inline-block;
176+
padding: 0.75rem 1.5rem;
177+
background-color: var(--primary-button-bg, #0C8CE0);
178+
color: var(--primary-button-text, white);
179+
border-radius: 6px;
180+
font-weight: 600;
181+
text-decoration: none;
182+
transition: background-color 0.2s ease-in-out;
183+
184+
&:hover {
185+
background-color: var(--primary-button-hover, #0C8CE0);
186+
}
187+
}
188+
189+
ul {
190+
margin: 0 0 1.5rem 0;
191+
padding-left: 20px;
192+
193+
li {
194+
@include typography(paragraph);
195+
margin-bottom: 0.5rem;
196+
}
197+
}
198+
199+
em {
200+
font-size: 0.9em;
201+
opacity: 0.8;
202+
}
203+
204+
.column {
205+
@media (max-width: 768px) {
206+
&.right-column {
207+
margin-top: 1rem;
208+
}
209+
}
210+
}
211+
}
212+
213+
#press-coverage {
214+
.full-width {
215+
width: 100%;
216+
max-width: 100%;
217+
display: flex;
218+
flex-direction: column;
219+
align-items: stretch;
220+
box-sizing: border-box;
221+
}
222+
223+
.coverage-intro {
224+
@include typography(paragraph);
225+
text-align: center;
226+
max-width: 800px;
227+
margin: 0 auto 60px auto;
228+
width: 100%;
229+
}
230+
231+
.articles-grid {
232+
display: grid;
233+
grid-template-columns: repeat(1, 1fr);
234+
gap: 25px;
235+
width: 100%;
236+
box-sizing: border-box;
237+
238+
@include break-up(sm) {
239+
grid-template-columns: repeat(2, 1fr);
240+
gap: 30px;
241+
}
242+
243+
@include break-up(lg) {
244+
grid-template-columns: repeat(3, 1fr);
245+
gap: 40px;
246+
}
247+
}
248+
249+
.article-card {
250+
display: block; // Since it's now an anchor
251+
text-decoration: none; // Remove default link styling
252+
color: inherit; // Keep text color
253+
padding: 20px;
254+
background-color: #f9f9f9;
255+
border-width: 0 0 2px 0;
256+
border-style: solid;
257+
border-color: #f5f5f5;
258+
border-radius: 0px;
259+
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
260+
transform: translateY(-0px); // Reduced from -3px
261+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); // Reduced size and opacity further
262+
263+
&:hover {
264+
transform: translateY(-5px); // Match the default state
265+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); // Match the default state
266+
border-color: var(--primary-button-bg, #0C8CE0);
267+
}
268+
269+
.publication {
270+
display: block;
271+
color: var(--text-body-secondary);
272+
font-size: 14px;
273+
margin-bottom: 8px;
274+
font-weight: 500;
275+
}
276+
277+
.article-title {
278+
@include typography(h4);
279+
margin: 0 0 15px 0;
280+
color: var(--text-body-primary);
281+
}
282+
283+
.article-date {
284+
display: block;
285+
color: var(--text-body-secondary);
286+
font-size: 14px;
287+
margin-top: auto;
288+
}
289+
}
290+
}
291+
}
292+
</style>

0 commit comments

Comments
 (0)