Skip to content

Commit 74ec3ea

Browse files
filipslezaklabfilipslezaklab
authored
update mobile app link for apple store (#88)
* Update download.astro * Update download.astro
1 parent d0f62e5 commit 74ec3ea

File tree

1 file changed

+177
-168
lines changed

1 file changed

+177
-168
lines changed

‎src/pages/download.astro‎

Lines changed: 177 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,168 +1,177 @@
1-
---
2-
import Navigation from "../components/base/Navigation.astro";
3-
import BaseLayout from "../layouts/BaseLayout.astro";
4-
import { DownloadButtonList } from "../components/download/DownloadButtonList/DownloadButtonList";
5-
import DownloadVersion from "../components/download/DownloadVersion.astro";
6-
import DefguardInfo from "../components/download/DownloadInfo/DownloadInfo";
7-
import NewsletterSection from "../components/NewsletterSection.astro";
8-
import ProductSection from "../layouts/ProductSection.astro";
9-
import FlexibleSection from "../components/FlexibleSection.astro";
10-
import StoreButtons from "../components/buttons/StoreButtons.astro";
11-
import QRCodeStoreToggle from "../components/buttons/QRCodeStoreToggle.astro";
12-
import ContentLimiter from "../components/ContentLimiter.astro";
13-
14-
const title = "defguard - Zero-Trust WireGuard® 2FA/MFA VPN: Download";
15-
const featuredImage =
16-
"github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
17-
const imageWidth = "1080";
18-
const imageHeight = "540";
19-
const description =
20-
"defguard - enterprise open-source SSO&VPN - the only open-source solution with real WireGuard® MFA/2FA & integrated OpenID Connect SSO";
21-
const url = "https://defguard.net/download/";
22-
---
23-
24-
<BaseLayout
25-
title={title}
26-
description={description}
27-
featuredImage={featuredImage}
28-
imageWidth={imageWidth}
29-
imageHeight={imageHeight}
30-
url={url}
31-
>
32-
<Navigation activeSlug="/download/" />
33-
<main id="download-page">
34-
<ProductSection padding="none">
35-
<FlexibleSection
36-
title="Download Defguard client with WireGuard® 2FA/MFA"
37-
id="download-section"
38-
variant="white"
39-
theme="light"
40-
>
41-
42-
<div slot="left">
43-
<h2 style="padding-top: 2rem;" >
44-
Desktop Clients
45-
</h2>
46-
<DefguardInfo owner="Defguard" repo="client" client:only="react" />
47-
<DownloadButtonList client:only="react" />
48-
</div>
49-
50-
<div slot="right" style="background-color: #fff; padding: 2rem; border-radius: 10px;">
51-
<h2>Mobile Clients</h2>
52-
<p>
53-
Defguard mobile are available for closed beta tests. If you want to give us early feedback please use the following links:
54-
<ul>
55-
<li>
56-
<a href="https://testflight.apple.com/join/Jvdhkt7h">Defguard Mobile for iOS</a>
57-
</li>
58-
<li>
59-
<a href="https://play.google.com/store/apps/details?id=net.defguard.mobile">Defguard Mobile for Android</a>
60-
</li>
61-
</ul>
62-
</p>
63-
64-
{/* Example: QR code toggle for mobile app stores (placeholder images) */}
65-
<!-- <QRCodeStoreToggle /> -->
66-
<!-- <NewsletterSection
67-
headerLevel="2"
68-
title="Stay Updated on New Releases"
69-
description="Release notes and occasional news — no spam, just one email per month max."
70-
/> -->
71-
</div>
72-
</FlexibleSection>
73-
<!-- <FlexibleSection
74-
id="newsletter"
75-
variant="white"
76-
theme="light"
77-
>
78-
<div slot="left">
79-
<NewsletterSection
80-
headerLevel="2"
81-
title="Stay Updated on New Releases"
82-
description="Release notes and occasional news — no spam, just one email per month max."
83-
/>
84-
</div>
85-
<div slot="right"></div>
86-
</FlexibleSection> -->
87-
<ContentLimiter>
88-
<div style="width: 100%; display: flex; flex-direction: column; align-items: center; padding-bottom:4rem; padding-top:2rem; margin-top:2rem; border-top:1px solid #e8e8e8;">
89-
<div style="width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center;">
90-
<NewsletterSection
91-
headerLevel="2"
92-
title="Stay Updated on New Releases"
93-
description="Release notes and occasional news — no spam, just one email per month max."
94-
/>
95-
</div>
96-
</div>
97-
</ContentLimiter>
98-
</ProductSection>
99-
</main>
100-
</BaseLayout>
101-
102-
<style lang="scss" is:global>
103-
.store-buttons{
104-
margin-bottom: 3rem !important;
105-
}
106-
.store-badge {
107-
height: 80px !important;
108-
padding:0 20px;
109-
@include break-down(lg) {
110-
padding:0;
111-
}
112-
}
113-
.btn.size-normal {
114-
margin: 0 0 0 auto;
115-
min-height: unset !important;
116-
height: 38px;
117-
border-radius: unset;
118-
width: 100%;
119-
120-
@include break-down(lg) {
121-
margin: 0 auto;
122-
}
123-
}
124-
.btn {
125-
border-color: var(--text-button-tertiary);
126-
127-
&:hover {
128-
border: unset;
129-
background-color: var(--text-button-tertiary);
130-
131-
span {
132-
color: white;
133-
}
134-
}
135-
}
136-
137-
#download-page {
138-
display: flex;
139-
flex-direction: column;
140-
gap: 40px;
141-
142-
h1 {
143-
@include typography(section);
144-
}
145-
146-
header {
147-
text-align: center;
148-
margin-bottom: 40px;
149-
}
150-
151-
.product-section {
152-
padding-top: 0 !important;
153-
padding-bottom: 0rem !important;
154-
border: none;
155-
display: unset;
156-
h1 {
157-
@include break-down(md) {
158-
padding-top: 20px;
159-
border-top: 1px solid black;
160-
}
161-
}
162-
}
163-
164-
@include break-down(sm) {
165-
gap: 50px;
166-
}
167-
}
168-
</style>
1+
---
2+
import Navigation from "../components/base/Navigation.astro";
3+
import BaseLayout from "../layouts/BaseLayout.astro";
4+
import { DownloadButtonList } from "../components/download/DownloadButtonList/DownloadButtonList";
5+
import DownloadVersion from "../components/download/DownloadVersion.astro";
6+
import DefguardInfo from "../components/download/DownloadInfo/DownloadInfo";
7+
import NewsletterSection from "../components/NewsletterSection.astro";
8+
import ProductSection from "../layouts/ProductSection.astro";
9+
import FlexibleSection from "../components/FlexibleSection.astro";
10+
import StoreButtons from "../components/buttons/StoreButtons.astro";
11+
import QRCodeStoreToggle from "../components/buttons/QRCodeStoreToggle.astro";
12+
import ContentLimiter from "../components/ContentLimiter.astro";
13+
14+
const title = "defguard - Zero-Trust WireGuard® 2FA/MFA VPN: Download";
15+
const featuredImage =
16+
"github.com/DefGuard/defguard.github.io/raw/main/public/images/png/defguard.png";
17+
const imageWidth = "1080";
18+
const imageHeight = "540";
19+
const description =
20+
"defguard - enterprise open-source SSO&VPN - the only open-source solution with real WireGuard® MFA/2FA & integrated OpenID Connect SSO";
21+
const url = "https://defguard.net/download/";
22+
---
23+
24+
<BaseLayout
25+
title={title}
26+
description={description}
27+
featuredImage={featuredImage}
28+
imageWidth={imageWidth}
29+
imageHeight={imageHeight}
30+
url={url}
31+
>
32+
<Navigation activeSlug="/download/" />
33+
<main id="download-page">
34+
<ProductSection padding="none">
35+
<FlexibleSection
36+
title="Download Defguard client with WireGuard® 2FA/MFA"
37+
id="download-section"
38+
variant="white"
39+
theme="light"
40+
>
41+
<div slot="left">
42+
<h2 style="padding-top: 2rem;">Desktop Clients</h2>
43+
<DefguardInfo owner="Defguard" repo="client" client:only="react" />
44+
<DownloadButtonList client:only="react" />
45+
</div>
46+
47+
<div
48+
slot="right"
49+
style="background-color: #fff; padding: 2rem; border-radius: 10px;"
50+
>
51+
<h2>Mobile Clients</h2>
52+
<p>
53+
Defguard for mobile is available now. Please use the following links:
54+
<ul>
55+
<li>
56+
<a href="https://apps.apple.com/us/app/defguard-vpn-client/id6748068630"
57+
>Defguard Mobile for iOS</a
58+
>
59+
</li>
60+
<li>
61+
<a
62+
href="https://play.google.com/store/apps/details?id=net.defguard.mobile"
63+
>Defguard Mobile for Android</a
64+
>
65+
</li>
66+
</ul>
67+
</p>
68+
69+
{/* Example: QR code toggle for mobile app stores (placeholder images) */}
70+
<!-- <QRCodeStoreToggle /> -->
71+
<!-- <NewsletterSection
72+
headerLevel="2"
73+
title="Stay Updated on New Releases"
74+
description="Release notes and occasional news — no spam, just one email per month max."
75+
/> -->
76+
</div>
77+
</FlexibleSection>
78+
<!-- <FlexibleSection
79+
id="newsletter"
80+
variant="white"
81+
theme="light"
82+
>
83+
<div slot="left">
84+
<NewsletterSection
85+
headerLevel="2"
86+
title="Stay Updated on New Releases"
87+
description="Release notes and occasional news — no spam, just one email per month max."
88+
/>
89+
</div>
90+
<div slot="right"></div>
91+
</FlexibleSection> -->
92+
<ContentLimiter>
93+
<div
94+
style="width: 100%; display: flex; flex-direction: column; align-items: center; padding-bottom:4rem; padding-top:2rem; margin-top:2rem; border-top:1px solid #e8e8e8;"
95+
>
96+
<div
97+
style="width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center;"
98+
>
99+
<NewsletterSection
100+
headerLevel="2"
101+
title="Stay Updated on New Releases"
102+
description="Release notes and occasional news — no spam, just one email per month max."
103+
/>
104+
</div>
105+
</div>
106+
</ContentLimiter>
107+
</ProductSection>
108+
</main>
109+
</BaseLayout>
110+
111+
<style lang="scss" is:global>
112+
.store-buttons {
113+
margin-bottom: 3rem !important;
114+
}
115+
.store-badge {
116+
height: 80px !important;
117+
padding: 0 20px;
118+
@include break-down(lg) {
119+
padding: 0;
120+
}
121+
}
122+
.btn.size-normal {
123+
margin: 0 0 0 auto;
124+
min-height: unset !important;
125+
height: 38px;
126+
border-radius: unset;
127+
width: 100%;
128+
129+
@include break-down(lg) {
130+
margin: 0 auto;
131+
}
132+
}
133+
.btn {
134+
border-color: var(--text-button-tertiary);
135+
136+
&:hover {
137+
border: unset;
138+
background-color: var(--text-button-tertiary);
139+
140+
span {
141+
color: white;
142+
}
143+
}
144+
}
145+
146+
#download-page {
147+
display: flex;
148+
flex-direction: column;
149+
gap: 40px;
150+
151+
h1 {
152+
@include typography(section);
153+
}
154+
155+
header {
156+
text-align: center;
157+
margin-bottom: 40px;
158+
}
159+
160+
.product-section {
161+
padding-top: 0 !important;
162+
padding-bottom: 0rem !important;
163+
border: none;
164+
display: unset;
165+
h1 {
166+
@include break-down(md) {
167+
padding-top: 20px;
168+
border-top: 1px solid black;
169+
}
170+
}
171+
}
172+
173+
@include break-down(sm) {
174+
gap: 50px;
175+
}
176+
}
177+
</style>

0 commit comments

Comments
 (0)