New landing

.vscode/settings.json

@@ -8,5 +8,6 @@
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "editor.tabSize": 2,
   "editor.insertSpaces": true,
-  "editor.detectIndentation": false
+  "editor.detectIndentation": false,
+  "editor.fontFamily": "'Operator Mono Light', Consolas, 'Courier New', monospace"
 }

src/components/CTASection.astro

@@ -9,11 +9,15 @@ interface Props {
   buttonText: string;
   buttonLink: string;
   buttonTarget?: string;
+  button2Text?: string;
+  button2Link?: string;
+  button2Target?: string;
   className?: string;
   id?: string;
   maxWidth?: number;
   variant?: "white" | "gray";
   theme?: "light" | "dark";
+  showBorder?: boolean;
 }
 
 const {
@@ -22,21 +26,25 @@ const {
   buttonText,
   buttonLink,
   buttonTarget = "_self",
+  button2Text,
+  button2Link,
+  button2Target = "_self",
   className,
   id,
   maxWidth = 900,
   variant = "gray",
   theme = "light",
+  showBorder = false,
 } = Astro.props;
 ---
 
 <section
-  class={clsx("cta-section", `variant-${variant}`, `theme-${theme}`, className)}
+  class={clsx("cta-section", `variant-${variant}`, `theme-${theme}`, className, { 'with-border': showBorder })}
   id={id}
   aria-labelledby={id ? `${id}-title` : undefined}
 >
   <ContentLimiter maxWidth={maxWidth}>
-    <div class="cta-content">
+    <div class={clsx("cta-content", { 'with-border': showBorder })}>
       <h2 class="cta-title" id={id ? `${id}-title` : undefined}>{title}</h2>
       <p class="cta-description">{description}</p>
       <div class="cta-button-container">
@@ -48,6 +56,17 @@ const {
             preload: true,
           }}
         />
+        {button2Text && button2Link && (
+          <AstroButton
+            text={button2Text}
+            link={{
+              href: button2Link,
+              target: button2Target,
+              preload: true,
+            }}
+            className="secondary"
+          />
+        )}
       </div>
     </div>
   </ContentLimiter>
@@ -58,8 +77,13 @@ const {
 
   .cta-section {
     width: 100%;
-    padding: 5rem 0;
+    padding-top: 2rem;
+    padding-bottom: 5rem;
 
+    &.with-border{
+      padding-top: 0rem;
+    }
+
     &.variant-white {
       background-color: var(--background-primary, #f9f9f9);
     }
@@ -108,7 +132,14 @@ const {
 
       .cta-button-container {
         margin-bottom: 0;
+        display: flex;
+        gap: 1rem;
       }
     }
   }
+
+  .cta-content.with-border {
+    border-top: 1px solid var(--border-separator);
+    padding-top: 2rem;
+  }
 </style>

src/components/FlexibleSection.astro

@@ -11,6 +11,7 @@ interface Props {
   variant?: "white" | "gray";
   theme?: "light" | "dark";
   bottomBorder?: boolean;
+  leftRatio?: number;
 }
 
 const {
@@ -22,13 +23,18 @@ const {
   variant = "white",
   theme = "light",
   bottomBorder = true,
+  leftRatio = 0.5,
 } = Astro.props;
+
+// Calculate right ratio automatically
+const rightRatio = 1 - leftRatio;
 ---
 
 <section
   class={clsx("flexible-section", `variant-${variant}`, `theme-${theme}`, className)}
   id={id}
   aria-labelledby={id ? `${id}-title` : undefined}
+  style={`--left-ratio: ${leftRatio}; --right-ratio: ${rightRatio};`}
 >
   <ContentLimiter maxWidth={maxWidth}>
     <div class="flexible-content">
@@ -131,9 +137,22 @@ const {
           flex-direction: column;
 
           @media (min-width: 768px) {
-            width: calc(50% - 1rem); // explicit width calculation
+            width: calc(50% - 1rem); // fallback for older browsers
           }
 
+          &.left-column {
+            @media (min-width: 768px) {
+              width: calc((var(--left-ratio, 0.5) * 100%) - 1rem);
+            }
+          }
+
+          &.right-column {
+            @media (min-width: 768px) {
+              width: calc((var(--right-ratio, 0.5) * 100%) - 1rem);
+            }
+          }
+
+
           &.left-column,
           &.right-column {
             display: flex;

src/components/FloatingLinks.astro

@@ -4,12 +4,12 @@
 
 <ul id="floating-links">
   <li>
-    <a href="/book-a-demo/" class="highlight" data-astro-prefetch>
+    <a href="/book-a-demo?utm_source=floating-link" class="highlight" data-astro-prefetch>
       <span>Book a Demo</span>
     </a>
   </li>
   <li>
-    <a href="/newsletter/" data-astro-prefetch><span>Newsletter</span></a>
+    <a href="/newsletter?utm_source=floating-link" data-astro-prefetch><span>Newsletter</span></a>
   </li>
   <li>
     <a href="https://github.com/DefGuard/defguard" target="_blank">

src/components/HeaderSection.astro

@@ -0,0 +1,42 @@
+---
+import HomeSection from "./home/HomeSection.astro";
+
+interface Props {
+  title: string;
+  description: string;
+  variant?: "white" | "gray";
+}
+
+const { title, description, variant = "white" } = Astro.props;
+---
+
+<HomeSection variant={variant} contentId="header-section">
+  <h1>{title}</h1>
+  <p>
+    {description}
+  </p>
+</HomeSection>
+
+<style lang="scss" is:global>
+  #header-section {
+    padding-bottom: page-spacing(40px);
+    padding-top: 50px;
+
+    & > p {
+      @include typography(paragraph);
+      padding-bottom: 8px;
+    }
+
+    h1 {
+      color: var(--text-body-primary);
+      padding-bottom: 10px;
+      text-align: left;
+      text-wrap: balance;
+      @include typography(title);
+
+      & {
+        font-size: calc(3.2rem * var(--font-scale-factor));
+      }
+    }
+  }
+</style>

src/components/TextDivider.astro

@@ -0,0 +1,31 @@
+---
+import ContentLimiter from "./ContentLimiter.astro";
+interface Props {
+  text: string;
+  paddingTop?: string;
+}
+const { text, paddingTop = '3rem' } = Astro.props;
+---
+<ContentLimiter>
+  <div class="text-divider" style={`padding-top: ${paddingTop};`}>
+    <span class="divider-text">{text}</span>
+  </div>
+</ContentLimiter>
+
+<style lang="scss">
+.text-divider {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+  border-bottom: 1px solid var(--border-separator);
+  margin: 2rem 0;
+  padding-top: 3rem;
+}
+
+.divider-text {
+  @include typography(h3);
+  white-space: nowrap;
+  color: var(--text-body-primary, #333);
+}
+</style>