website/.superpowers/brainstorm/752312-1773515533/hero-styles.html

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

<style>
  * { font-family: 'Plus Jakarta Sans', sans-serif; }
  .hero-demo { border-radius: 12px; overflow: hidden; min-height: 280px; position: relative; }
  .hero-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; position: relative; z-index: 2; }
  .hero-nav-logo { font-weight: 800; font-size: 18px; color: #60a5fa; }
  .hero-nav-links { display: flex; gap: 24px; font-size: 14px; opacity: 0.5; }
  .hero-body { padding: 24px 32px 40px; position: relative; z-index: 2; }
  .hero-body h3 { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; line-height: 1.2; }
  .hero-body p { font-size: 16px; opacity: 0.6; max-width: 500px; line-height: 1.6; margin-bottom: 20px; }
  .hero-cta { display: flex; gap: 12px; }
  .hero-cta .primary { background: #3b82f6; color: white; padding: 12px 28px; border-radius: 10px; font-weight: 600; font-size: 14px; }
  .hero-cta .secondary { background: rgba(255,255,255,0.08); color: white; padding: 12px 28px; border-radius: 10px; font-weight: 500; font-size: 14px; border: 1px solid rgba(255,255,255,0.12); }
  .stat-row { display: flex; gap: 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }
  .stat-item { font-size: 12px; opacity: 0.4; }
  .stat-item strong { display: block; font-size: 20px; font-weight: 700; opacity: 1; color: #60a5fa; margin-bottom: 2px; }
</style>

<h2>Marketing Hero Style</h2>
<p class="subtitle">Click the hero style that best represents EZSCALE's brand</p>

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

  <!-- Option A: Gradient Backgrounds -->
  <div class="card" data-choice="gradient" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">A</span> <strong>Gradient Backgrounds</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Cloudflare, OVHcloud style</span></div>
    <div class="hero-demo" style="background:linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #1e40af 70%, #3b82f6 100%);">
      <div class="hero-nav">
        <span class="hero-nav-logo">EZSCALE</span>
        <div class="hero-nav-links"><span>Products</span><span>Pricing</span><span>Docs</span></div>
      </div>
      <div class="hero-body">
        <h3>Cloud Infrastructure<br>Built for Performance</h3>
        <p>Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.</p>
        <div class="hero-cta">
          <span class="primary">Get Started Free</span>
          <span class="secondary">View Pricing →</span>
        </div>
        <div class="stat-row">
          <div class="stat-item"><strong>99.99%</strong>Uptime SLA</div>
          <div class="stat-item"><strong>15+</strong>Global Locations</div>
          <div class="stat-item"><strong>&lt;1ms</strong>Avg Latency</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Option B: Dark with Subtle Patterns -->
  <div class="card" data-choice="dark-pattern" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">B</span> <strong>Dark + Subtle Grid Pattern</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Vercel, Linear style</span></div>
    <div class="hero-demo" style="background:#0a0a0f;position:relative;">
      <!-- Grid pattern overlay -->
      <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);background-size:48px 48px;"></div>
      <!-- Radial glow -->
      <div style="position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(59,130,246,0.12) 0%,transparent 70%);"></div>
      <div class="hero-nav" style="position:relative;z-index:2;">
        <span class="hero-nav-logo">EZSCALE</span>
        <div class="hero-nav-links"><span>Products</span><span>Pricing</span><span>Docs</span></div>
      </div>
      <div class="hero-body" style="position:relative;z-index:2;">
        <h3>Cloud Infrastructure<br>Built for Performance</h3>
        <p>Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.</p>
        <div class="hero-cta">
          <span class="primary">Get Started Free</span>
          <span class="secondary">View Pricing →</span>
        </div>
        <div class="stat-row">
          <div class="stat-item"><strong>99.99%</strong>Uptime SLA</div>
          <div class="stat-item"><strong>15+</strong>Global Locations</div>
          <div class="stat-item"><strong>&lt;1ms</strong>Avg Latency</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Option C: Illustration-Driven -->
  <div class="card" data-choice="illustration" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">C</span> <strong>Illustration-Driven</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">DigitalOcean, Vultr style</span></div>
    <div class="hero-demo" style="background:linear-gradient(180deg, #0c1222 0%, #111827 100%);">
      <div class="hero-nav">
        <span class="hero-nav-logo">EZSCALE</span>
        <div class="hero-nav-links"><span>Products</span><span>Pricing</span><span>Docs</span></div>
      </div>
      <div style="display:flex;padding:0 32px 40px;">
        <div class="hero-body" style="flex:1;padding:24px 0;">
          <h3>Cloud Infrastructure<br>Built for Performance</h3>
          <p>Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.</p>
          <div class="hero-cta">
            <span class="primary">Get Started Free</span>
            <span class="secondary">View Pricing →</span>
          </div>
        </div>
        <!-- Illustration placeholder -->
        <div style="flex:0 0 280px;display:flex;align-items:center;justify-content:center;">
          <div style="width:220px;height:180px;border-radius:16px;background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.05));border:1px solid rgba(59,130,246,0.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;">
            <div style="display:flex;gap:8px;">
              <div style="width:40px;height:48px;background:rgba(59,130,246,0.15);border-radius:6px;border:1px solid rgba(59,130,246,0.2);"></div>
              <div style="width:40px;height:48px;background:rgba(59,130,246,0.15);border-radius:6px;border:1px solid rgba(59,130,246,0.2);"></div>
              <div style="width:40px;height:48px;background:rgba(59,130,246,0.15);border-radius:6px;border:1px solid rgba(59,130,246,0.2);"></div>
            </div>
            <div style="width:140px;height:3px;background:rgba(59,130,246,0.2);border-radius:4px;"></div>
            <div style="font-size:11px;opacity:0.3;">Server illustration area</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Option D: Minimal / Strong Typography -->
  <div class="card" data-choice="minimal-typo" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">D</span> <strong>Minimal + Strong Typography</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Hetzner style — confident, no-nonsense</span></div>
    <div class="hero-demo" style="background:#0b0e14;">
      <div class="hero-nav">
        <span class="hero-nav-logo">EZSCALE</span>
        <div class="hero-nav-links"><span>Products</span><span>Pricing</span><span>Docs</span></div>
      </div>
      <div class="hero-body" style="text-align:center;max-width:none;display:flex;flex-direction:column;align-items:center;">
        <h3 style="font-size:44px;max-width:600px;letter-spacing:-1px;">Cloud Infrastructure<br>Built for Performance</h3>
        <p style="text-align:center;max-width:480px;">Deploy high-performance VPS, dedicated servers, and web hosting with enterprise-grade reliability.</p>
        <div class="hero-cta" style="justify-content:center;">
          <span class="primary">Get Started Free</span>
          <span class="secondary">View Pricing →</span>
        </div>
        <div class="stat-row" style="justify-content:center;border-top:none;padding-top:8px;">
          <div class="stat-item"><strong>99.99%</strong>Uptime SLA</div>
          <div class="stat-item"><strong>15+</strong>Global Locations</div>
          <div class="stat-item"><strong>&lt;1ms</strong>Avg Latency</div>
        </div>
      </div>
    </div>
  </div>

</div>