Skip to content

Commit e3653a3

Browse files
author
Michał Gryczka
committed
GTM upated
1 parent 814cf0c commit e3653a3

File tree

2 files changed

+295
-48
lines changed

2 files changed

+295
-48
lines changed

‎src/components/analytics/GTMBody.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
//@ts-ignore
33
const isProd = import.meta.env.PROD as boolean;
44
// Get GTM ID from environment variable or use your actual GTM ID
5-
const GTM_ID = import.meta.env.PUBLIC_GTM_ID || "GTM-P8CG95NM"; // Replace GTM-XXXXXXX with your actual ID
5+
const GTM_ID = import.meta.env.PUBLIC_GTM_ID || "GTM-P8CG95NM";
66
---
77

88
{

‎src/pages/pricing.astro‎

Lines changed: 294 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -78,21 +78,67 @@ const tags = [
7878
</header>
7979
<!-- </ContentLimiter> -->
8080

81-
<div id="get-evaluation-license" class="sla-support-wrapper">
82-
<div id="sla-support">
83-
<div class="left">
84-
<h2 id="license">Request offline or evalution license</h2>
85-
<p class="sla-description">
86-
For <strong>evaluations</strong> or proof-of-concept testing, we're happy to provide
87-
a 14-day free of charge evaluation license. For convenience, please provide your company information (name, address and Tax Identification Number) in the form below.
88-
</p>
89-
</div>
90-
<ContentLimiter contentId="sla-support-content" maxWidth={1100}>
91-
<div class="product-features">
92-
<BookDemoForm submit_text="Request Evaluation License" client:load />
81+
<!-- FAQ Section -->
82+
<div id="pricing-faq-section" class="pricing-faq-wrapper">
83+
<ContentLimiter contentId="pricing-faq-content" maxWidth={1100}>
84+
<FlexibleSection title="Frequently Asked Questions" id="pricing-faq" variant="gray" theme="light">
85+
<div class="faq-container">
86+
<div class="faq-item" data-faq-item="0">
87+
<div class="faq-question" role="button" tabindex="0" aria-expanded="false" aria-controls="faq-answer-0">
88+
<span class="faq-number">1</span>
89+
<span class="faq-text">Does Defguard offer a free trial?</span>
90+
<svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
91+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
92+
</svg>
93+
</div>
94+
<div class="faq-answer" id="faq-answer-0" aria-labelledby="faq-question-0">
95+
<div>
96+
<p>Yes. Defguard provides a 14-day evaluation license at no cost, allowing you to test the full capabilities of our enterprise VPN solution, including WireGuard®, MFA/2FA, and SSO integration.</p>
97+
<p>This trial is ideal for proof-of-concept testing or evaluating Defguard in your environment.</p>
98+
</div>
99+
</div>
100+
</div>
101+
<div class="faq-item" data-faq-item="1">
102+
<div class="faq-question" role="button" tabindex="0" aria-expanded="false" aria-controls="faq-answer-1">
103+
<span class="faq-number">2</span>
104+
<span class="faq-text">What is Defguard's subscription retention policy?</span>
105+
<svg class="faq-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
106+
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
107+
</svg>
108+
</div>
109+
<div class="faq-answer" id="faq-answer-1" aria-labelledby="faq-question-1">
110+
<div>
111+
<p>All purchased and active <strong>annual subscriptions</strong> automatically renew <strong>once</strong> for the following year on the <strong>same pricing and terms</strong> as originally purchased.</p>
112+
<p>For example, if you purchase an annual subscription in 2025, it will renew in 2026 at the same price and conditions you originally agreed to. From 2027 onwards, if annual subscription pricing or terms have changed, the updated pricing/terms will apply starting from the next billing cycle.</p>
113+
<p><strong>In short:</strong> this policy guarantees one renewal under the original terms for your annual subscription, after which any new pricing or updated terms will take effect.</p>
114+
</div>
115+
</div>
116+
</div>
93117
</div>
94-
</ContentLimiter>
95-
</div>
118+
</FlexibleSection>
119+
</ContentLimiter>
120+
</div>
121+
122+
<!-- Evaluation License Section -->
123+
<div id="evaluation-license-section" class="evaluation-license-wrapper">
124+
<ContentLimiter contentId="evaluation-license-content" maxWidth={1100}>
125+
<FlexibleSection title="Request Offline or Evaluation License" id="evaluation-license" variant="white" theme="light">
126+
<div class="evaluation-content">
127+
<div class="evaluation-description">
128+
<p>
129+
For <strong>evaluations</strong> or proof-of-concept testing, we're happy to provide
130+
a 14-day free of charge evaluation license.
131+
</p>
132+
<p>
133+
For convenience, please provide your company information (name, address and Tax Identification Number) in the form below.
134+
</p>
135+
</div>
136+
<div class="evaluation-form-container">
137+
<BookDemoForm submit_text="Request Evaluation License" client:load />
138+
</div>
139+
</div>
140+
</FlexibleSection>
141+
</ContentLimiter>
96142
</div>
97143

98144
<div class="nonprofit-wrapper">
@@ -297,48 +343,94 @@ const tags = [
297343
}
298344
}
299345

300-
.sla-support-wrapper {
346+
/* Evaluation License Section */
347+
.evaluation-license-wrapper {
301348
width: 100%;
302-
background-color: var(--background-secondary, #f5f5f5);
303-
padding: 40px 0 60px 0;
349+
background-color: var(--surface-frame-bg);
350+
padding: 80px 0;
304351
}
305352

306-
#sla-support {
353+
.evaluation-content {
354+
display: flex;
355+
flex-direction: column;
356+
align-items: center;
307357
width: 100%;
308-
position: relative;
358+
max-width: 800px;
359+
margin: 0 auto;
360+
}
309361

310-
.left {
311-
position: relative;
312-
width: 100%;
362+
.evaluation-description {
363+
text-align: center;
364+
margin-bottom: 40px;
365+
max-width: 600px;
313366

314-
& > h2 {
315-
@include typography(h2);
316-
box-sizing: border-box;
317-
padding-top: 20px;
318-
padding-left: 20px;
319-
padding-right: 20px;
320-
padding-bottom: 0;
321-
max-width: 1500px;
322-
margin: 0 auto;
323-
word-wrap: break-word;
324-
overflow-wrap: break-word;
325-
hyphens: auto;
326-
327-
@include break-up(md) {
328-
padding-top: 54px;
329-
padding-left: 20px;
330-
padding-right: 20px;
331-
padding-bottom: 0;
332-
}
367+
p {
368+
font-size: 16px;
369+
line-height: 1.6;
370+
margin-bottom: 16px;
371+
color: var(--text-body-primary);
372+
373+
&:last-child {
374+
margin-bottom: 0;
375+
}
376+
377+
strong {
378+
font-weight: 600;
333379
}
334380
}
381+
}
335382

336-
#sla-support-content {
337-
width: 100%;
338-
max-width: 1100px;
339-
margin: 0 auto;
340-
padding: 0 20px;
341-
box-sizing: border-box;
383+
.evaluation-form-container {
384+
width: 100%;
385+
max-width: 500px;
386+
margin: 0 auto;
387+
388+
// Force single column layout for the evaluation form
389+
:global(.book) {
390+
form {
391+
display: flex;
392+
flex-direction: column;
393+
gap: 20px;
394+
width: 100%;
395+
}
396+
397+
.form-group {
398+
display: flex;
399+
flex-direction: column;
400+
width: 100%;
401+
margin-bottom: 0;
402+
403+
label {
404+
margin-bottom: 8px;
405+
font-weight: 500;
406+
}
407+
408+
input, textarea, select {
409+
width: 100%;
410+
box-sizing: border-box;
411+
}
412+
}
413+
414+
// Override any existing double-inputs to single column
415+
.double-inputs {
416+
display: flex;
417+
flex-direction: column;
418+
gap: 20px;
419+
width: 100%;
420+
421+
.form-group {
422+
width: 100%;
423+
}
424+
}
425+
426+
.form-description {
427+
margin-bottom: 20px;
428+
}
429+
430+
button[type="submit"] {
431+
width: 100%;
432+
margin-top: 10px;
433+
}
342434
}
343435
}
344436

@@ -386,6 +478,161 @@ const tags = [
386478
#floating-links {
387479
display: none !important;
388480
}
481+
482+
/* FAQ Section Styles */
483+
.pricing-faq-wrapper {
484+
width: 100%;
485+
background-color: var(--background-secondary, #f5f5f5);
486+
padding: 60px 0;
487+
}
488+
489+
.faq-container {
490+
display: flex;
491+
flex-direction: column;
492+
gap: 1rem;
493+
width: 100%;
494+
}
495+
496+
.faq-item {
497+
background: white;
498+
border: 1px solid var(--border-primary, #e5e7eb);
499+
border-radius: 12px;
500+
overflow: hidden;
501+
transition: all 0.2s ease;
502+
503+
&:hover {
504+
border-color: var(--surface-main-primary);
505+
box-shadow: 0 4px 12px rgba(12, 140, 224, 0.1);
506+
}
507+
}
508+
509+
.faq-question {
510+
display: flex;
511+
align-items: center;
512+
gap: 1rem;
513+
padding: 1.5rem;
514+
background: white;
515+
cursor: pointer;
516+
user-select: none;
517+
transition: background-color 0.2s ease;
518+
border-bottom: 1px solid var(--border-primary, #e5e7eb);
519+
520+
&:hover {
521+
background: var(--background-secondary, #f9fafb);
522+
}
523+
524+
&:focus {
525+
outline: 2px solid var(--surface-main-primary);
526+
outline-offset: -2px;
527+
}
528+
}
529+
530+
.faq-number {
531+
display: flex;
532+
align-items: center;
533+
justify-content: center;
534+
width: 2rem;
535+
height: 2rem;
536+
background: var(--surface-main-primary);
537+
color: white;
538+
border-radius: 50%;
539+
font-size: 0.875rem;
540+
font-weight: 600;
541+
flex-shrink: 0;
542+
}
543+
544+
.faq-text {
545+
flex: 1;
546+
font-weight: 600;
547+
color: var(--text-body-primary);
548+
font-size: 16px;
549+
}
550+
551+
.faq-icon {
552+
width: 1.5rem;
553+
height: 1.5rem;
554+
color: var(--text-body-secondary);
555+
transition: transform 0.2s ease;
556+
flex-shrink: 0;
557+
}
558+
559+
.faq-question.expanded .faq-icon {
560+
transform: rotate(180deg);
561+
}
562+
563+
.faq-answer {
564+
max-height: 0;
565+
overflow: hidden;
566+
transition: max-height 0.3s ease, padding 0.3s ease;
567+
background: white;
568+
569+
&.expanded {
570+
max-height: 1000px;
571+
padding: 1.5rem;
572+
}
573+
574+
div {
575+
p {
576+
font-size: 14px;
577+
line-height: 1.6;
578+
color: var(--text-body-primary);
579+
margin-bottom: 1rem;
580+
581+
&:last-child {
582+
margin-bottom: 0;
583+
}
584+
585+
strong {
586+
font-weight: 600;
587+
}
588+
}
589+
}
590+
}
389591
</style>
592+
593+
<script>
594+
document.addEventListener('DOMContentLoaded', function() {
595+
const faqQuestions = document.querySelectorAll('.faq-question');
596+
597+
faqQuestions.forEach((question: Element) => {
598+
question.addEventListener('click', function(this: HTMLElement) {
599+
const answer = this.nextElementSibling as HTMLElement;
600+
const isExpanded = this.getAttribute('aria-expanded') === 'true';
601+
602+
// Close all other FAQ items
603+
faqQuestions.forEach((otherQuestion: Element) => {
604+
if (otherQuestion !== this) {
605+
otherQuestion.classList.remove('expanded');
606+
otherQuestion.setAttribute('aria-expanded', 'false');
607+
const otherAnswer = otherQuestion.nextElementSibling as HTMLElement;
608+
if (otherAnswer) {
609+
otherAnswer.classList.remove('expanded');
610+
}
611+
}
612+
});
613+
614+
// Toggle current FAQ item
615+
if (isExpanded) {
616+
this.classList.remove('expanded');
617+
this.setAttribute('aria-expanded', 'false');
618+
answer.classList.remove('expanded');
619+
} else {
620+
this.classList.add('expanded');
621+
this.setAttribute('aria-expanded', 'true');
622+
answer.classList.add('expanded');
623+
}
624+
});
625+
626+
// Keyboard navigation support
627+
question.addEventListener('keydown', function(e: Event) {
628+
const target = e.target as HTMLElement;
629+
if (e instanceof KeyboardEvent && (e.key === 'Enter' || e.key === ' ')) {
630+
e.preventDefault();
631+
target.click();
632+
}
633+
});
634+
});
635+
});
636+
</script>
390637
</main>
391638
</BaseLayout>

0 commit comments

Comments
 (0)