website/.superpowers/brainstorm/752312-1773515533/hero-visuals.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; box-sizing: border-box; }
  .hero-wrap { border-radius: 12px; overflow: hidden; position: relative; background: #0a0a0f; }
  .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px); background-size: 40px 40px; }
  .hero-glow { position: absolute; top: -80px; right: 10%; width: 500px; height: 400px; background: radial-gradient(ellipse, rgba(59,130,246,0.1) 0%, transparent 70%); }
  .hero-content { position: relative; z-index: 2; display: flex; padding: 40px 32px; gap: 40px; align-items: center; }
  .hero-text { flex: 1; }
  .hero-text h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 10px; }
  .hero-text p { font-size: 14px; opacity: 0.5; line-height: 1.6; }
  .hero-visual { flex: 0 0 320px; display: flex; align-items: center; justify-content: center; min-height: 240px; }

  @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.15); opacity: 0.1; } 100% { transform: scale(1); opacity: 0.3; } }
  @keyframes data-flow { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes dash { to { stroke-dashoffset: -20; } }
</style>

<h2>Hero Visual Elements</h2>
<p class="subtitle">Each shown on the dark grid background you selected. Click your preference.</p>

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

  <!-- A: CSS/SVG Geometric Art -->
  <div class="card" data-choice="css-geometric" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">A</span> <strong>CSS/SVG Geometric Art</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">No external assets needed</span></div>
    <div class="hero-wrap">
      <div class="hero-grid-bg"></div>
      <div class="hero-glow"></div>
      <div class="hero-content">
        <div class="hero-text">
          <h3>Cloud VPS Hosting</h3>
          <p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
        </div>
        <div class="hero-visual">
          <!-- CSS Server Rack -->
          <div style="position:relative;">
            <!-- Central node -->
            <div style="width:80px;height:80px;border-radius:50%;background:rgba(59,130,246,0.1);border:2px solid rgba(59,130,246,0.3);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;">
              <div style="width:40px;height:40px;border-radius:50%;background:rgba(59,130,246,0.2);border:1px solid rgba(59,130,246,0.4);display:flex;align-items:center;justify-content:center;">
                <div style="font-size:18px;">⚡</div>
              </div>
            </div>
            <!-- Orbiting nodes -->
            <div style="position:absolute;top:-50px;left:50%;transform:translateX(-50%);">
              <div style="width:44px;height:44px;border-radius:10px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out infinite;">
                <div style="font-size:11px;font-weight:600;color:#60a5fa;">VPS</div>
              </div>
            </div>
            <div style="position:absolute;top:20px;right:-80px;">
              <div style="width:44px;height:44px;border-radius:10px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out 0.5s infinite;">
                <div style="font-size:11px;font-weight:600;color:#4ade80;">DB</div>
              </div>
            </div>
            <div style="position:absolute;top:20px;left:-80px;">
              <div style="width:44px;height:44px;border-radius:10px;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.2);display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out 1s infinite;">
                <div style="font-size:11px;font-weight:600;color:#fbbf24;">CDN</div>
              </div>
            </div>
            <div style="position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);">
              <div style="width:44px;height:44px;border-radius:10px;background:rgba(168,85,247,0.08);border:1px solid rgba(168,85,247,0.2);display:flex;align-items:center;justify-content:center;animation:float 3s ease-in-out 1.5s infinite;">
                <div style="font-size:11px;font-weight:600;color:#a855f7;">API</div>
              </div>
            </div>
            <!-- Connection lines via SVG -->
            <svg style="position:absolute;top:-50px;left:-80px;width:240px;height:180px;pointer-events:none;z-index:1;" viewBox="0 0 240 180">
              <line x1="120" y1="30" x2="120" y2="70" stroke="rgba(59,130,246,0.2)" stroke-width="1" stroke-dasharray="4 4" style="animation:dash 1s linear infinite;"/>
              <line x1="180" y1="90" x2="160" y2="90" stroke="rgba(34,197,94,0.2)" stroke-width="1" stroke-dasharray="4 4" style="animation:dash 1s linear infinite;"/>
              <line x1="60" y1="90" x2="80" y2="90" stroke="rgba(251,191,36,0.2)" stroke-width="1" stroke-dasharray="4 4" style="animation:dash 1s linear infinite;"/>
              <line x1="120" y1="110" x2="120" y2="150" stroke="rgba(168,85,247,0.2)" stroke-width="1" stroke-dasharray="4 4" style="animation:dash 1s linear infinite;"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- B: 3D Render / Static Images -->
  <div class="card" data-choice="3d-render" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">B</span> <strong>3D Renders / Static Images</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Needs asset creation or purchase</span></div>
    <div class="hero-wrap">
      <div class="hero-grid-bg"></div>
      <div class="hero-glow"></div>
      <div class="hero-content">
        <div class="hero-text">
          <h3>Cloud VPS Hosting</h3>
          <p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
        </div>
        <div class="hero-visual">
          <!-- Simulated 3D isometric server -->
          <div style="position:relative;transform:perspective(500px) rotateY(-8deg) rotateX(5deg);">
            <div style="width:200px;background:linear-gradient(180deg, #1a2744 0%, #0f1a2e 100%);border-radius:12px;border:1px solid rgba(59,130,246,0.15);padding:16px;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(59,130,246,0.05);">
              <!-- Server unit 1 -->
              <div style="background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.12);border-radius:6px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:8px;">
                <div style="display:flex;gap:3px;">
                  <div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
                  <div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
                </div>
                <div style="flex:1;height:3px;background:rgba(59,130,246,0.15);border-radius:2px;"><div style="width:75%;height:100%;background:#3b82f6;border-radius:2px;"></div></div>
                <span style="font-size:9px;font-family:'JetBrains Mono';color:#60a5fa;">vps-01</span>
              </div>
              <!-- Server unit 2 -->
              <div style="background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.12);border-radius:6px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:8px;">
                <div style="display:flex;gap:3px;">
                  <div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
                  <div style="width:6px;height:6px;border-radius:50%;background:#fbbf24;"></div>
                </div>
                <div style="flex:1;height:3px;background:rgba(59,130,246,0.15);border-radius:2px;"><div style="width:45%;height:100%;background:#3b82f6;border-radius:2px;"></div></div>
                <span style="font-size:9px;font-family:'JetBrains Mono';color:#60a5fa;">vps-02</span>
              </div>
              <!-- Server unit 3 -->
              <div style="background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.12);border-radius:6px;padding:10px 12px;display:flex;align-items:center;gap:8px;">
                <div style="display:flex;gap:3px;">
                  <div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
                  <div style="width:6px;height:6px;border-radius:50%;background:#4ade80;"></div>
                </div>
                <div style="flex:1;height:3px;background:rgba(59,130,246,0.15);border-radius:2px;"><div style="width:90%;height:100%;background:#3b82f6;border-radius:2px;"></div></div>
                <span style="font-size:9px;font-family:'JetBrains Mono';color:#60a5fa;">vps-03</span>
              </div>
            </div>
            <!-- Shadow/glow under -->
            <div style="position:absolute;bottom:-12px;left:10%;width:80%;height:20px;background:radial-gradient(ellipse,rgba(59,130,246,0.15),transparent);filter:blur(8px);"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- C: Animated SVG Diagrams -->
  <div class="card" data-choice="animated-svg" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">C</span> <strong>Animated SVG Diagrams</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Eye-catching, more complex</span></div>
    <div class="hero-wrap">
      <div class="hero-grid-bg"></div>
      <div class="hero-glow"></div>
      <div class="hero-content">
        <div class="hero-text">
          <h3>Cloud VPS Hosting</h3>
          <p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
        </div>
        <div class="hero-visual">
          <svg width="280" height="200" viewBox="0 0 280 200">
            <!-- Network nodes -->
            <circle cx="140" cy="100" r="24" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.4)" stroke-width="1.5"/>
            <text x="140" y="104" text-anchor="middle" fill="#60a5fa" font-size="10" font-weight="600" font-family="Plus Jakarta Sans">CORE</text>

            <!-- Outer nodes -->
            <circle cx="60" cy="40" r="18" fill="rgba(59,130,246,0.08)" stroke="rgba(59,130,246,0.2)" stroke-width="1"/>
            <text x="60" y="44" text-anchor="middle" fill="#60a5fa" font-size="8" font-family="Plus Jakarta Sans">US-E</text>

            <circle cx="220" cy="40" r="18" fill="rgba(34,197,94,0.08)" stroke="rgba(34,197,94,0.2)" stroke-width="1"/>
            <text x="220" y="44" text-anchor="middle" fill="#4ade80" font-size="8" font-family="Plus Jakarta Sans">EU-W</text>

            <circle cx="40" cy="140" r="18" fill="rgba(251,191,36,0.08)" stroke="rgba(251,191,36,0.2)" stroke-width="1"/>
            <text x="40" y="144" text-anchor="middle" fill="#fbbf24" font-size="8" font-family="Plus Jakarta Sans">AP-SE</text>

            <circle cx="240" cy="140" r="18" fill="rgba(168,85,247,0.08)" stroke="rgba(168,85,247,0.2)" stroke-width="1"/>
            <text x="240" y="144" text-anchor="middle" fill="#a855f7" font-size="8" font-family="Plus Jakarta Sans">US-W</text>

            <!-- Animated connection lines -->
            <line x1="78" y1="52" x2="118" y2="84" stroke="rgba(59,130,246,0.2)" stroke-width="1" stroke-dasharray="4 3">
              <animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.5s" repeatCount="indefinite"/>
            </line>
            <line x1="202" y1="52" x2="162" y2="84" stroke="rgba(34,197,94,0.2)" stroke-width="1" stroke-dasharray="4 3">
              <animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.5s" repeatCount="indefinite"/>
            </line>
            <line x1="56" y1="124" x2="122" y2="108" stroke="rgba(251,191,36,0.2)" stroke-width="1" stroke-dasharray="4 3">
              <animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.5s" repeatCount="indefinite"/>
            </line>
            <line x1="224" y1="124" x2="158" y2="108" stroke="rgba(168,85,247,0.2)" stroke-width="1" stroke-dasharray="4 3">
              <animate attributeName="stroke-dashoffset" from="0" to="-14" dur="1.5s" repeatCount="indefinite"/>
            </line>

            <!-- Pulse rings on center -->
            <circle cx="140" cy="100" r="32" fill="none" stroke="rgba(59,130,246,0.15)" stroke-width="1">
              <animate attributeName="r" values="32;48;32" dur="3s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.3;0;0.3" dur="3s" repeatCount="indefinite"/>
            </circle>
            <circle cx="140" cy="100" r="40" fill="none" stroke="rgba(59,130,246,0.1)" stroke-width="1">
              <animate attributeName="r" values="40;60;40" dur="3s" begin="0.5s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.2;0;0.2" dur="3s" begin="0.5s" repeatCount="indefinite"/>
            </circle>

            <!-- Data packets flowing -->
            <circle r="2" fill="#60a5fa">
              <animateMotion dur="2s" repeatCount="indefinite" path="M78,52 L118,84"/>
            </circle>
            <circle r="2" fill="#4ade80">
              <animateMotion dur="2.2s" repeatCount="indefinite" path="M202,52 L162,84"/>
            </circle>
            <circle r="2" fill="#fbbf24">
              <animateMotion dur="2.4s" repeatCount="indefinite" path="M56,124 L122,108"/>
            </circle>
            <circle r="2" fill="#a855f7">
              <animateMotion dur="1.8s" repeatCount="indefinite" path="M224,124 L158,108"/>
            </circle>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- D: Minimal Abstract Shapes -->
  <div class="card" data-choice="minimal-abstract" onclick="toggleSelect(this)" style="padding:0;cursor:pointer;">
    <div style="padding:12px 16px;"><span class="label">D</span> <strong>Minimal Abstract Shapes</strong> <span style="opacity:0.4;font-size:12px;margin-left:8px;">Low effort, clean accent</span></div>
    <div class="hero-wrap">
      <div class="hero-grid-bg"></div>
      <div class="hero-glow"></div>
      <div class="hero-content">
        <div class="hero-text">
          <h3>Cloud VPS Hosting</h3>
          <p>Deploy high-performance virtual servers in seconds with NVMe SSD storage and dedicated vCPUs.</p>
        </div>
        <div class="hero-visual">
          <div style="position:relative;width:200px;height:200px;">
            <!-- Abstract circles -->
            <div style="position:absolute;top:20px;right:20px;width:120px;height:120px;border-radius:50%;border:1px solid rgba(59,130,246,0.12);"></div>
            <div style="position:absolute;top:40px;right:40px;width:80px;height:80px;border-radius:50%;border:1px solid rgba(59,130,246,0.08);"></div>
            <div style="position:absolute;top:55px;right:55px;width:50px;height:50px;border-radius:50%;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.15);"></div>
            <!-- Floating dots -->
            <div style="position:absolute;top:10px;left:30px;width:6px;height:6px;border-radius:50%;background:rgba(59,130,246,0.3);animation:float 4s ease-in-out infinite;"></div>
            <div style="position:absolute;bottom:30px;right:10px;width:4px;height:4px;border-radius:50%;background:rgba(59,130,246,0.2);animation:float 3s ease-in-out 0.5s infinite;"></div>
            <div style="position:absolute;top:80px;left:10px;width:8px;height:8px;border-radius:50%;background:rgba(59,130,246,0.15);animation:float 5s ease-in-out 1s infinite;"></div>
            <!-- Subtle lines -->
            <div style="position:absolute;top:35px;left:50px;width:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,0.15),transparent);"></div>
            <div style="position:absolute;bottom:50px;left:20px;width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,0.1),transparent);"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>