client download - added newsletter signup

Author: 4lb

src/components/download/DownloadButtonList/style.scss

@@ -14,8 +14,16 @@
     text-align: center;
     @include typography(footer);
 
+    hr {
+      flex: 1;
+      height: 1px;
+      background-color: var(--border-separator);
+      border: none;
+      margin: 0;
+    }
+
     p {
-      width: 50%;
+      width: 30%;
     }
   }
 
@@ -27,7 +35,7 @@
     align-self: stretch;
 
     .download-separator p {
-      width: 60%;
+      width: 30%;
     }
   }
 }

src/components/download/DownloadInfo/DownloadInfo.tsx

@@ -53,18 +53,9 @@ const DownloadInfo = function ({ owner, repo }: GithubProps) {
         {isLoading && <p>Fetching version...</p>}
         {clientVersion == "" && !isLoading && <p>Unable to fetch version</p>}
         {clientVersion != "" && (
-          <>
-            <p>Current version:</p>
-            <p>{clientVersion}</p>
-          </>
+          <p>Current version: {clientVersion} | View changelog → <a href={`https://github.com/DefGuard/client/releases/v${clientVersion}`}>{published}</a></p>
         )}
       </div>
-      <div className="download-changelog">
-        <a href={`https://github.com/DefGuard/client/releases/v${clientVersion}`}>
-          View changelog →
-        </a>
-        <p>{published}</p>
-      </div>
     </div>
   );
 };

src/components/download/DownloadInfo/style.scss

@@ -1,28 +1,34 @@
-#download-page {
-  .download-version {
-    .download-version-info {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 8px;
-      align-self: stretch;
+.download-version-info {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
 
-      .download-version-current,
-      .download-changelog {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        align-self: stretch;
-      }
-
-      .download-version-current {
-        @include typography(pricebox-price);
-      }
+  .download-version-current {
+    margin-bottom: 20px;
+    @include typography(pricebox-list);
+    p {
+      margin: 0;
+      line-height: 1.2;
+      font-size: 16px;
+    }
+  }
 
-      .download-changelog {
-        @include typography(pricebox-list);
-      }
+  .download-changelog {
+    @include typography(pricebox-list);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    
+    a {
+      text-decoration: none;
+      color: inherit;
+      white-space: nowrap;
+    }
+    
+    p {
+      margin: 0;
+      color: var(--text-body-secondary);
     }
   }
 }

src/pages/download-confirm.astro

@@ -88,7 +88,7 @@ const tags = [
         </div>
         <div slot="right">
           <NewsletterSection
-            headerLevel="1"
+            headerLevel="2"
             title="Stay Updated on New Releases"
             description="Release notes and occasional news — no spam, just one email per month max."
           />
@@ -150,7 +150,7 @@ const tags = [
     .product-section {
       padding-top: 0 !important; /* Match the 4rem padding from FlexibleSection */
       padding-bottom: 0rem !important;
-      border:none;
+      border: none;
       display: unset;
       h1 {
         @include break-down(md) {

src/pages/download.astro

@@ -3,6 +3,10 @@ import Navigation from "../components/base/Navigation.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { DownloadButtonList } from "../components/download/DownloadButtonList/DownloadButtonList";
 import DownloadVersion from "../components/download/DownloadVersion.astro";
+import DefguardInfo from "../components/download/DownloadInfo/DownloadInfo";
+import NewsletterSection from "../components/NewsletterSection.astro";
+import ProductSection from "../layouts/ProductSection.astro";
+import FlexibleSection from "../components/FlexibleSection.astro";
 
 const title = "defguard - Zero-Trust WireGuard® 2FA/MFA VPN: Download";
 const featuredImage =
@@ -24,67 +28,78 @@ const url = "https://defguard.net/download/";
 >
   <Navigation activeSlug="/download/" />
   <main id="download-page">
-    <header>
-      <h1>Download defguard desktop client with WireGuard® 2FA/MFA</h1>
-    </header>
-    <section class="download-section">
-      <DownloadButtonList client:only="react" />
-      <DownloadVersion />
-    </section>
-    <hr />
-    <!-- <h3>
-      By downloading and using defguard, you agree to its <a href="#" target="_self"
-        >terms and conditions</a
-      >.
-    </h3> -->
+      <ProductSection padding="none">
+      <FlexibleSection title="Download defguard desktop client with WireGuard® 2FA/MFA" id="download-section" variant="white" theme="light">
+        <div slot="left">
+          <DefguardInfo owner="Defguard" repo="client" client:only="react" />
+          <DownloadButtonList client:only="react" />
+        </div>
+        <div slot="right">
+          <NewsletterSection
+            headerLevel="2"
+            title="Stay Updated on New Releases"
+            description="Release notes and occasional news — no spam, just one email per month max."
+          />
+        </div>
+      </FlexibleSection>
+    </ProductSection>
   </main>
 </BaseLayout>
 
 <style lang="scss" is:global>
+  .btn.size-normal{
+    margin: 0 0 0 auto;
+    min-height: unset !important;
+    height:38px;
+    border-radius: unset;
+    width: 100%;  
+  
+    @include break-down(lg) {
+      margin: 0 auto;
+    }
+  }
+  .btn{
+    border-color: var(--text-button-tertiary);
+
+    &:hover{
+      border: unset;
+      background-color: var(--text-button-tertiary);
+    
+      span {
+       color: white;
+      }
+    }
+  }
+
   #download-page {
     display: flex;
-    padding: 100px 240px;
     flex-direction: column;
     gap: 40px;
 
     h1 {
       @include typography(section);
     }
 
-    h3 {
-      font-size: 18px;
-      font-weight: 400;
+    header {
       text-align: center;
-      a {
-        text-decoration-line: underline;
-      }
-    }
-
-    hr {
-      width: 100%;
+      margin-bottom: 40px;
     }
 
-    .download-section {
-      display: flex;
-      width: 100%;
-      max-width: 1500px;
-      align-items: center;
-      justify-content: flex-start;
-
-      @include break-up(lg) {
-        justify-content: space-between;
-        align-items: flex-start;
+    .product-section {
+      padding-top: 0 !important;
+      padding-bottom: 0rem !important;
+      border: none;
+      display: unset;
+      h1 {
+        @include break-down(md) {
+          padding-top: 20px;
+          border-top: 1px solid black;
+        }
       }
     }
 
     @include break-down(sm) {
-      padding: 100px 20px;
       gap: 50px;
-
-      .download-section {
-        flex-direction: column;
-        gap: 30px;
-      }
     }
   }
 </style>