website/.superpowers/brainstorm/752312-1773515533/marketing-nav-comparison.html

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
  * { font-family: 'Plus Jakarta Sans', sans-serif; }
  .nav-demo { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 8px; }
  .nav-content { padding: 32px; min-height: 200px; }
  .nav-content h4 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
  .nav-content p { font-size: 14px; opacity: 0.5; }
  .feature-pills { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
  .feature-pill { background: rgba(59,130,246,0.1); color: #60a5fa; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
</style>

<h2>Marketing Site Navigation</h2>
<p class="subtitle">Click the navigation style that fits EZSCALE best</p>

<div style="display:flex;flex-direction:column;gap:32px;margin-top:24px;">

  <!-- Option A: Horizontal Top Navbar -->
  <div class="card" data-choice="horizontal" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">A — Horizontal Top Navbar</span> <span style="opacity:0.4;font-size:12px;margin-left:8px;">DigitalOcean, Vultr, Hetzner style</span></div>
    <div class="nav-demo">
      <!-- Navbar -->
      <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.08);">
        <div style="display:flex;align-items:center;gap:32px;">
          <span style="font-weight:800;font-size:18px;color:#60a5fa;">EZSCALE</span>
          <div style="display:flex;gap:24px;font-size:14px;">
            <span style="opacity:0.9;font-weight:500;">Products</span>
            <span style="opacity:0.5;">Pricing</span>
            <span style="opacity:0.5;">Docs</span>
            <span style="opacity:0.5;">About</span>
            <span style="opacity:0.5;">Contact</span>
          </div>
        </div>
        <div style="display:flex;gap:12px;align-items:center;">
          <span style="font-size:14px;opacity:0.6;">Log In</span>
          <span style="background:#3b82f6;color:white;padding:8px 20px;border-radius:8px;font-size:14px;font-weight:600;">Get Started</span>
        </div>
      </div>
      <!-- Page content -->
      <div class="nav-content" style="background:linear-gradient(180deg, rgba(59,130,246,0.05) 0%, transparent 100%);">
        <h4>Cloud VPS Hosting</h4>
        <p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
        <div class="feature-pills">
          <span class="feature-pill">NVMe SSD</span>
          <span class="feature-pill">10Gbps Network</span>
          <span class="feature-pill">99.99% Uptime</span>
          <span class="feature-pill">Root Access</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Option B: Vertical Sidebar -->
  <div class="card" data-choice="sidebar" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">B — Vertical Sidebar</span> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Current EZSCALE style — app-like feel</span></div>
    <div class="nav-demo">
      <div style="display:flex;">
        <!-- Sidebar -->
        <div style="width:220px;min-height:260px;background:rgba(255,255,255,0.03);border-right:1px solid rgba(255,255,255,0.08);padding:20px 16px;">
          <span style="font-weight:800;font-size:16px;color:#60a5fa;display:block;margin-bottom:24px;">EZSCALE</span>
          <div style="display:flex;flex-direction:column;gap:4px;font-size:13px;">
            <div style="padding:10px 12px;border-radius:8px;background:linear-gradient(90deg,#3b82f6,rgba(59,130,246,0.7));color:white;font-weight:500;">Products</div>
            <div style="padding:10px 12px;opacity:0.5;">Pricing</div>
            <div style="padding:10px 12px;opacity:0.5;">Documentation</div>
            <div style="padding:10px 12px;opacity:0.5;">About</div>
            <div style="padding:10px 12px;opacity:0.5;">Contact</div>
            <div style="margin-top:16px;padding:10px 12px;opacity:0.4;font-size:12px;border-top:1px solid rgba(255,255,255,0.08);padding-top:20px;">Log In</div>
            <div style="padding:8px 12px;background:#3b82f6;color:white;border-radius:8px;text-align:center;font-weight:600;font-size:13px;margin-top:4px;">Get Started</div>
          </div>
        </div>
        <!-- Page content -->
        <div class="nav-content" style="flex:1;">
          <h4>Cloud VPS Hosting</h4>
          <p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
          <div class="feature-pills">
            <span class="feature-pill">NVMe SSD</span>
            <span class="feature-pill">10Gbps Network</span>
            <span class="feature-pill">99.99% Uptime</span>
            <span class="feature-pill">Root Access</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Option C: Transparent / Minimal Header -->
  <div class="card" data-choice="transparent" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">C — Transparent / Minimal Header</span> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Vercel, Cloudflare style — goes solid on scroll</span></div>
    <div class="nav-demo">
      <!-- Transparent navbar overlaying hero -->
      <div style="position:relative;">
        <div style="background:linear-gradient(180deg, #0c1425 0%, #162036 100%);min-height:260px;padding-top:0;">
          <!-- Navbar floating on top -->
          <div style="display:flex;align-items:center;justify-content:space-between;padding:20px 32px;">
            <div style="display:flex;align-items:center;gap:32px;">
              <span style="font-weight:800;font-size:18px;color:#60a5fa;">EZSCALE</span>
              <div style="display:flex;gap:24px;font-size:14px;">
                <span style="opacity:0.8;font-weight:500;">Products</span>
                <span style="opacity:0.4;">Pricing</span>
                <span style="opacity:0.4;">Docs</span>
                <span style="opacity:0.4;">About</span>
              </div>
            </div>
            <div style="display:flex;gap:12px;align-items:center;">
              <span style="font-size:14px;opacity:0.5;">Log In</span>
              <span style="background:rgba(59,130,246,0.15);color:#60a5fa;padding:8px 20px;border-radius:8px;font-size:14px;font-weight:600;border:1px solid rgba(59,130,246,0.3);">Get Started</span>
            </div>
          </div>
          <!-- Hero content -->
          <div style="padding:32px 32px 40px;">
            <h4 style="font-size:28px;margin-bottom:8px;">Cloud VPS Hosting</h4>
            <p style="opacity:0.5;max-width:500px;">Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
            <div class="feature-pills" style="margin-top:20px;">
              <span class="feature-pill">NVMe SSD</span>
              <span class="feature-pill">10Gbps Network</span>
              <span class="feature-pill">99.99% Uptime</span>
              <span class="feature-pill">Root Access</span>
            </div>
          </div>
        </div>
        <!-- Scroll indicator -->
        <div style="text-align:center;padding:8px;font-size:11px;opacity:0.3;background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.05);">
          ↑ Navbar becomes solid with blur backdrop on scroll ↑
        </div>
      </div>
    </div>
  </div>

</div>