feat: Improve navigation UX and reorganize customer journey

This commit introduces comprehensive improvements to navigation structure,
dropdown menu functionality, and customer journey organization.

### Navigation Component (Navigation.astro)

**CSS Fixes for Dropdown Menu:**
- Fixed dropdown menu width issue by removing min-width: 280px and adding min-width: fit-content
- Removed all unnecessary !important declarations (was causing CSS specificity issues)
- Changed dropdown links from display: block to display: flex with proper alignment
- Added width: 100% and justify-content: flex-start to ensure consistent left alignment
- Added gap: 6px between text and external link icons
- Fixed 'hover bridge' by changing pointer-events from none to auto in ::after pseudo-element
- Ensured white-space: nowrap on both links and spans to prevent text wrapping

**Result:** Dropdown menus now properly size to content, text doesn't overflow background,
and hover state is maintained when moving mouse from menu item to dropdown.

### Navigation Data (nav.json)

**Fixed Incorrect URLs:**
- Server: /product/server → /server
- Client: /product/client → /client
- Compare vs. Fortinet: /compare/defguard-vs-fortinet → /defguard-vs-fortinet
- True VPN MFA: https://defguard.net/vpn_mfa/ → /vpn_mfa

**Changed External Links to Internal:**
- Prusa case study: https://defguard.net/blog/... → /blog/prusa-vpn-scaling-with-defguard
- Acquinox case study: https://defguard.net/blog/... → /blog/self-hosted-vpn-private-cloud-acquinox-defguard
(These now open in same tab instead of new tab)

**Added Developer/Community Links to Resources:**
- GitHub (Source) → https://github.com/DefGuard/defguard
- Matrix (Community) → https://matrix.to/#/#defguard:teonite.com
(Automatic external link detection via startsWith('http') opens in new tab)

**Added Enterprise Features to Solutions:**
- Enterprise Features → https://docs.defguard.net/enterprise/license
(Better placement than Product - it's a business solution, not a product feature)

### Customer Journey Optimization

**Removed FloatingLinks.astro:**
- Deleted redundant floating sidebar menu (created 'CTA soup')
- Removed import and usage from BaseLayout.astro
- Mixed personas (Adam/developers + Eva/business) in wrong context

**Reorganized CTAs by Persona:**
- Eva (Business): Book a Demo remains prominent in main navigation
- Adam (Developers): GitHub & Matrix moved to Resources dropdown
- Newsletter: Moved from floating menu to footer (more natural placement)

### Footer Redesign (Footer.astro)

**Grid-Based Layout:**
- Replaced separate .footer-cols + .newsletter-section with unified .footer-grid
- Desktop (lg): 4-column grid (1.5fr 1fr 1fr 1.5fr) - Logo | Company | Community | Newsletter
- Tablet (md): 2-column grid
- Mobile: Single column stack

**Newsletter as Equal Column:**
- Positioned as last column in grid (equal importance)
- Removed max-width, border-top/bottom, and padding constraints
- Form now displays as vertical flex column (better UX in column context)
- Full-width input and button within column

**Strategic Benefits:**
- Newsletter treated as equal business goal, not an afterthought
- Natural eye scanning across columns lands on conversion action
- Professional SaaS-like appearance
- Better mobile responsiveness

### Impact

**Before:**
- Broken dropdown menus (text overflow, couldn't click links)
- Incorrect URLs leading to 404s
- Redundant CTAs (Book a Demo in nav + floating menu)
- Mixed audience targeting (developers + business in same widget)
- Newsletter hidden at bottom

**After:**
- ✅ Functional, properly-sized dropdown menus
- ✅ All URLs corrected and working
- ✅ Clean, persona-focused CTAs
- ✅ Eva (business) → Book a Demo in nav
- ✅ Adam (developers) → GitHub/Matrix in Resources
- ✅ Newsletter prominent in footer grid
- ✅ Professional, organized customer journey

Author: piotr-bor

src/components/FloatingLinks.astro

@@ -5,14 +5,17 @@ import LogoFull from "/public/svg/logo-full.svg?raw";
 
 <footer>
   <div class="content-container">
-    <header>
-      <Fragment set:html={LogoFull} />
-    </header>
-    <div class="footer-cols">
+    
+    <div class="footer-grid">
+      
+      <header>
+        <Fragment set:html={LogoFull} />
+      </header>
+
       {
         footerData.map((col) => (
           <div class="col">
-            <p>{col.header}</p>{" "}
+            <p>{col.header}</p>
             <ul>
               {col.children.map((colItem) => (
                 <li>
@@ -41,7 +44,24 @@ import LogoFull from "/public/svg/logo-full.svg?raw";
           </div>
         ))
       }
+
+      <div class="newsletter-section">
+        <h3>Subscribe to our Newsletter</h3>
+        <p>Get product updates, security insights, and community news.</p>
+        <form action="/newsletter" method="get">
+          <input 
+            type="email" 
+            name="email" 
+            placeholder="Enter your email..." 
+            required
+            aria-label="Email address"
+          />
+          <button type="submit">Subscribe</button>
+        </form>
+      </div>
+
     </div>
+
     <div class="bottom">
       <p class="copyright">
         © 2025 <a href="https://defguard.net">defguard sp. z o.o.</a>
@@ -158,25 +178,113 @@ import LogoFull from "/public/svg/logo-full.svg?raw";
     }
   }
 
-  .footer-cols {
+  .footer-grid {
     display: grid;
-    column-gap: 15px;
-    row-gap: 20px;
-
     grid-template-columns: 1fr;
-    grid-template-columns: repeat(auto-fill, 300px);
+    gap: 40px;
+
+    @include break-up(md) {
+      grid-template-columns: 1fr 1fr;
+      gap: 30px;
+    }
+    
+    @include break-up(lg) {
+      grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
+      gap: 20px;
+    }
+
+    header {
+      display: flex;
+      flex-flow: row;
+      min-height: 0;
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+    
     .col {
-      min-width: 300px;
+      min-width: 0;
+      
       & > p {
         min-height: 35px;
         padding-bottom: 5px;
         @include typography(footer-section);
       }
+      
       & > ul {
         display: flex;
         flex-flow: column;
         row-gap: 5px;
       }
     }
   }
+
+  .newsletter-section {
+    width: 100%;
+    max-width: none;
+    padding: 0;
+    border: none;
+
+    h3 {
+      @include typography(footer-section);
+      margin: 0 0 0.5rem 0;
+      color: var(--text-body-primary);
+    }
+
+    p {
+      @include typography(h3);
+      margin: 0 0 1rem 0;
+      color: var(--text-body-secondary);
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      input {
+        width: 100%;
+        padding: 10px 15px;
+        border: 1px solid var(--text-body-primary);
+        border-radius: 6px;
+        background-color: var(--surface-frame-bg);
+        color: var(--text-body-primary);
+        @include typography(h3);
+        box-sizing: border-box;
+
+        &::placeholder {
+          color: var(--text-body-secondary);
+        }
+
+        &:focus {
+          outline: none;
+          border-color: var(--surface-main-primary);
+          box-shadow: 0 0 0 2px rgba(var(--surface-main-primary-rgb, 59, 130, 246), 0.1);
+        }
+      }
+
+      button {
+        width: 100%;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 6px;
+        background-color: var(--surface-main-primary);
+        color: white;
+        @include typography(menu);
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        white-space: nowrap;
+
+        &:hover {
+          background-color: var(--surface-main-primary);
+          opacity: 0.9;
+          transform: translateY(-1px);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
 </style>