Skip to content

Commit 784387d

Browse files
author
Robert Olejnik
committed
title updates
1 parent 0e450d1 commit 784387d

9 files changed

+943
-938
lines changed

‎src/layouts/BaseLayout.astro

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@ const { title, description, featuredImage, imageWidth, imageHeight} = Astro.prop
2626
<meta charset="UTF-8" />
2727
<meta name="viewport" content="width=device-width" />
2828
<meta name="generator" content={Astro.generator} />
29-
<title>defguard</title>
29+
<title>defguard - Zero-Trust WireGuard® 2FA/MFA VPN</title>
3030
<meta property="og:title" content={title} />
3131
<meta property="og:description" content={description} />
3232
<meta name="description" content={description} />
3333
<meta property="og:image" content={"http://" + featuredImage} />
3434
<meta property="og:image:secure_url" content={"https://" + featuredImage} />
35-
<meta property="og:image:type" content="image/png" />
36-
<meta property="og:image:width" content={imageWidth} />
35+
<meta property="og:image:type" content="image/png" />
36+
<meta property="og:image:width" content={imageWidth} />
3737
<meta property="og:image:height" content={imageHeight} />
3838
<!-- schema.org -->
3939
<slot name="schema" />

‎src/layouts/ProductLayout.astro

+174-175
Original file line numberDiff line numberDiff line change
@@ -3,200 +3,199 @@ import OrganizationJSONLD from "../scripts/OrganizationJSONLD.astro";
33
import BaseLayout from "./BaseLayout.astro";
44
55
interface Props {
6-
title: string;
7-
featuredImage: string;
8-
imageWidth: string;
9-
imageHeight: string;
10-
url: string;
11-
tags: string[];
6+
title: string;
7+
featuredImage: string;
8+
imageWidth: string;
9+
imageHeight: string;
10+
url: string;
11+
tags: string[];
1212
}
1313
1414
const { title, featuredImage, imageWidth, imageHeight, url, tags } = Astro.props;
15-
const description =
16-
"defguard - enterprise open-source SSO&VPN - the only open-source solution with real WireGuard MFA/2FA & integrated OpenID Connect SSO";
15+
const description = "defguard - Zero-Trust WireGuard® 2FA/MFA VPN";
1716
---
1817

1918
<BaseLayout
20-
title={title}
21-
description={description}
22-
featuredImage={featuredImage}
23-
imageWidth={imageWidth}
24-
imageHeight={imageHeight}
25-
>
26-
<OrganizationJSONLD
27-
slot="schema"
2819
title={title}
2920
description={description}
30-
url={url}
31-
tags={tags}
32-
/>
33-
<slot />
21+
featuredImage={featuredImage}
22+
imageWidth={imageWidth}
23+
imageHeight={imageHeight}
24+
>
25+
<OrganizationJSONLD
26+
slot="schema"
27+
title={title}
28+
description={description}
29+
url={url}
30+
tags={tags}
31+
/>
32+
<slot />
3433
</BaseLayout>
3534

3635
<style lang="scss" is:global>
37-
.product-main {
38-
#main-header {
39-
display: flex;
40-
flex-flow: column;
41-
overflow: hidden;
42-
row-gap: var(--product-section-items-gap);
43-
padding-bottom: 50px;
44-
width: 100%;
45-
46-
h1 {
47-
padding-bottom: 20px;
48-
@include typography(title);
49-
}
50-
51-
& > p {
52-
max-width: 65ch;
53-
@include typography(paragraph);
54-
}
55-
56-
.product-download {
57-
width: 100%;
58-
height: auto;
59-
padding: 20px 0;
60-
display: flex;
61-
flex-flow: row nowrap;
62-
align-items: center;
63-
justify-content: center;
64-
65-
a {
66-
text-decoration: none;
67-
}
68-
}
69-
}
70-
71-
.product-features {
72-
width: 100%;
73-
display: flex;
74-
flex-flow: column;
75-
row-gap: 20px;
76-
77-
& > h2 {
78-
@include typography(h2);
79-
padding-bottom: 20px;
80-
}
81-
}
82-
#matrix {
83-
width: 100%;
84-
85-
h2 {
86-
@include typography(section);
87-
text-align: left;
88-
padding-bottom: 20px;
89-
}
90-
91-
.content {
92-
width: 100%;
93-
display: flex;
94-
flex-flow: row;
95-
column-gap: 20px;
96-
align-items: center;
97-
justify-content: flex-start;
98-
99-
p {
100-
@include typography(paragraph);
101-
a {
102-
@include typography(paragraph);
103-
}
36+
.product-main {
37+
#main-header {
38+
display: flex;
39+
flex-flow: column;
40+
overflow: hidden;
41+
row-gap: var(--product-section-items-gap);
42+
padding-bottom: 50px;
43+
width: 100%;
44+
45+
h1 {
46+
padding-bottom: 20px;
47+
@include typography(title);
48+
}
49+
50+
& > p {
51+
max-width: 65ch;
52+
@include typography(paragraph);
53+
}
54+
55+
.product-download {
56+
width: 100%;
57+
height: auto;
58+
padding: 20px 0;
59+
display: flex;
60+
flex-flow: row nowrap;
61+
align-items: center;
62+
justify-content: center;
63+
64+
a {
65+
text-decoration: none;
66+
}
67+
}
10468
}
105-
}
106-
}
107-
#instances {
108-
width: 100%;
10969

110-
& > .top {
111-
width: 100%;
112-
padding-bottom: 8px;
70+
.product-features {
71+
width: 100%;
72+
display: flex;
73+
flex-flow: column;
74+
row-gap: 20px;
11375

114-
p {
115-
@include typography(h3);
76+
& > h2 {
77+
@include typography(h2);
78+
padding-bottom: 20px;
79+
}
11680
}
117-
}
118-
119-
// FIXME: Remove this after adding proper images
120-
& > .image-with-title {
121-
min-height: 390px;
122-
}
123-
}
124-
125-
#vpn {
126-
.top {
127-
padding-bottom: 50px;
128-
h2 {
129-
@include typography(section);
81+
#matrix {
82+
width: 100%;
83+
84+
h2 {
85+
@include typography(section);
86+
text-align: left;
87+
padding-bottom: 20px;
88+
}
89+
90+
.content {
91+
width: 100%;
92+
display: flex;
93+
flex-flow: row;
94+
column-gap: 20px;
95+
align-items: center;
96+
justify-content: flex-start;
97+
98+
p {
99+
@include typography(paragraph);
100+
a {
101+
@include typography(paragraph);
102+
}
103+
}
104+
}
130105
}
131-
p {
132-
@include typography(paragraph);
106+
#instances {
107+
width: 100%;
108+
109+
& > .top {
110+
width: 100%;
111+
padding-bottom: 8px;
112+
113+
p {
114+
@include typography(h3);
115+
}
116+
}
117+
118+
// FIXME: Remove this after adding proper images
119+
& > .image-with-title {
120+
min-height: 390px;
121+
}
133122
}
134-
}
135-
& > .image-with-title {
136-
min-height: 390px;
137-
}
138-
}
139123

140-
.image-with-title {
141-
width: 100%;
142-
display: grid;
143-
align-items: center;
144-
justify-content: center;
145-
column-gap: 25px;
146-
row-gap: 50px;
147-
148-
grid-template-columns: 1fr;
149-
150-
@include break-up(lg) {
151-
grid-template-columns: 2.4fr 3.5fr;
152-
}
153-
154-
& > * {
155-
width: 100%;
156-
}
157-
158-
.description {
159-
display: flex;
160-
flex-flow: column;
161-
row-gap: 28px;
162-
163-
.title {
164-
width: 100%;
165-
display: flex;
166-
flex-flow: row;
167-
align-items: flex-start;
168-
justify-content: flex-start;
169-
min-height: 70px;
170-
box-sizing: border-box;
171-
border-bottom: 1px solid var(--text-body-primary);
172-
padding-bottom: 5px;
173-
174-
p,
175-
span,
176-
a {
177-
@include typography(h2);
178-
}
179-
}
180-
.content {
181-
@include typography(paragraph);
124+
#vpn {
125+
.top {
126+
padding-bottom: 50px;
127+
h2 {
128+
@include typography(section);
129+
}
130+
p {
131+
@include typography(paragraph);
132+
}
133+
}
134+
& > .image-with-title {
135+
min-height: 390px;
136+
}
182137
}
183-
}
184-
185-
.image-container {
186-
display: flex;
187-
width: 100%;
188-
height: 100%;
189-
content: " ";
190-
border: 0 solid transparent;
191-
box-shadow: var(--box-shadow);
192-
border-radius: 8px;
193-
overflow: hidden;
194-
195-
img {
196-
width: 100%;
197-
height: auto;
138+
139+
.image-with-title {
140+
width: 100%;
141+
display: grid;
142+
align-items: center;
143+
justify-content: center;
144+
column-gap: 25px;
145+
row-gap: 50px;
146+
147+
grid-template-columns: 1fr;
148+
149+
@include break-up(lg) {
150+
grid-template-columns: 2.4fr 3.5fr;
151+
}
152+
153+
& > * {
154+
width: 100%;
155+
}
156+
157+
.description {
158+
display: flex;
159+
flex-flow: column;
160+
row-gap: 28px;
161+
162+
.title {
163+
width: 100%;
164+
display: flex;
165+
flex-flow: row;
166+
align-items: flex-start;
167+
justify-content: flex-start;
168+
min-height: 70px;
169+
box-sizing: border-box;
170+
border-bottom: 1px solid var(--text-body-primary);
171+
padding-bottom: 5px;
172+
173+
p,
174+
span,
175+
a {
176+
@include typography(h2);
177+
}
178+
}
179+
.content {
180+
@include typography(paragraph);
181+
}
182+
}
183+
184+
.image-container {
185+
display: flex;
186+
width: 100%;
187+
height: 100%;
188+
content: " ";
189+
border: 0 solid transparent;
190+
box-shadow: var(--box-shadow);
191+
border-radius: 8px;
192+
overflow: hidden;
193+
194+
img {
195+
width: 100%;
196+
height: auto;
197+
}
198+
}
198199
}
199-
}
200200
}
201-
}
202201
</style>

0 commit comments

Comments
 (0)