styling tweaks

Author: 4lb

src/components/CTASection.astro

@@ -38,6 +38,7 @@ const {
   <ContentLimiter maxWidth={maxWidth}>
     <div class="cta-content">
       <h2 class="cta-title" id={id ? `${id}-title` : undefined}>{title}</h2>
+      <p class="cta-description">{description}</p>
       <div class="cta-button-container">
         <AstroButton
           text={buttonText}
@@ -48,7 +49,6 @@ const {
           }}
         />
       </div>
-      <p class="cta-description">{description}</p>
     </div>
   </ContentLimiter>
 </section>
@@ -94,15 +94,15 @@ const {
       width: 100%;
 
       .cta-title {
-        @include typography(h2);
-        margin-bottom: 1.5rem;
+        @include typography(h1);
+        margin-bottom: 0.5rem;
         max-width: 800px;
       }
 
       .cta-description {
         @include typography(paragraph);
-        margin-top: 1.5rem;
-        margin-bottom: 0;
+        margin-bottom: 1.5rem;
+        margin-top: 0;
         max-width: 700px;
       }
 

src/components/server/ServerSidebar.astro

@@ -90,8 +90,8 @@ const { sections, title = "Main Features" } = Astro.props;
   // Intersection Observer to highlight active section
   const observerOptions = {
     root: null,
-    rootMargin: "0px",
-    threshold: 0.8,
+    rootMargin: "-20px",
+    threshold: 1,
   };
 
   const observer = new IntersectionObserver((entries) => {

src/pages/_home/components/HomeHeader.astro

@@ -46,7 +46,7 @@ const { trustedBy = true, title, description } = Astro.props;
   <!-- <div class="hero-image-container">
     <Image src={headerImage} alt="Defguard Zero-Trust VPN diagram" loading={"eager"} />
   </div> -->
-  {trustedBy && <TrustedBy />}
+  {trustedBy && <TrustedBy forceScroll={true} />}
 </HomeSection>
 
 <style lang="scss" is:global>

src/pages/_home/components/TrustedBy.astro

@@ -8,9 +8,15 @@ import prusa from "./assets/trustedBy/prusa.png";
 import acquinox from "./assets/trustedBy/acquinox.png";
 import truevo from "./assets/trustedBy/truevo.png";
 import hostinger from "./assets/trustedBy/hostinger.webp";
+
+interface Props {
+  forceScroll?: boolean;
+}
+
+const { forceScroll = false } = Astro.props;
 ---
 
-<div id="trusted-by">
+<div id="trusted-by" class:list={[{ "force-scroll": forceScroll }]}>
   <p>Trusted by</p>
   <div class="track-container">
     <div class="track">
@@ -23,7 +29,6 @@ import hostinger from "./assets/trustedBy/hostinger.webp";
       <Image src={truevo} alt="truevo logo image" />
       <Image src={deepImage} alt="deepimage logo image" />
 
-      <!-- Duplicate logos for seamless scrolling -->
       <div class="scroll-duplicate">
         <Image src={prusa} alt="prusa logo image" />
         <!-- <Image src={penske} alt="team penske logo image" /> -->
@@ -74,13 +79,13 @@ import hostinger from "./assets/trustedBy/hostinger.webp";
       width: 100%;
       display: flex;
       align-items: center;
-      column-gap: 30px;
+      column-gap: 50px;
 
       @include break-up(lg) {
         flex-flow: row wrap;
         justify-content: space-between;
         row-gap: 8px;
-        column-gap: 10px;
+        column-gap: 50px;
       }
 
       @include break-down(lg) {
@@ -97,12 +102,56 @@ import hostinger from "./assets/trustedBy/hostinger.webp";
       .scroll-duplicate {
         display: flex;
         align-items: center;
-        column-gap: 30px;
+        column-gap: 50px;
 
         @include break-up(lg) {
           display: none;
         }
       }
     }
+
+    &.force-scroll {
+      .track-container {
+        overflow: hidden;
+      }
+
+      .track {
+        animation: scroll 20s linear infinite;
+        width: max-content;
+        padding: 15px 0;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+
+        img {
+          max-height: 50px;
+          width: auto;
+        }
+
+        .scroll-duplicate {
+          display: flex;
+          align-items: center;
+          column-gap: 50px;
+        }
+      }
+
+      @include break-up(lg) {
+        .track-container {
+          overflow: hidden;
+        }
+
+        .track {
+          animation: scroll 25s linear infinite;
+          width: max-content;
+          flex-flow: row nowrap;
+          justify-content: flex-start;
+
+          .scroll-duplicate {
+            display: flex;
+            align-items: center;
+            column-gap: 30px;
+          }
+        }
+      }
+    }
   }
 </style>

src/pages/_server.astro

@@ -66,7 +66,7 @@ const tags = [
     <ProductSection padding="none">
       <FlexibleSection title="Download defguard Server" id="release-info" variant="white" theme="light">
         <div slot="left">
-          <GithubReleases repoUrl="https://github.com/DefGuard/defguard" count={5} />
+          <GithubReleases repoUrl="https://github.com/DefGuard/defguard" />
         </div>
         <div slot="right">
           <NewsletterSection

src/pages/download-confirm.astro

@@ -368,8 +368,8 @@ const tags = [
     <FlexibleIdentitySection />
 
     <CTASection
-      title="Ready to Experience the Most Secure, Flexible, and Compliant WireGuard® VPN?"
-      description="Deploy our open-source VPN in minutes and secure your remote workforce with enterprise-level features."
+      title="Ready to Experience the Most Secure, and Compliant VPN?"
+      description="Deploy our open-source WireGuard® protocol VPN in minutes and secure your remote workforce with enterprise-level features."
       buttonText="Book a Demo"
       buttonLink="/book-a-demo?utm_source=landingpage"
       id="cta-download"