OTSSigns-Website/theme/assets/svg/hero-infrastructure.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 440" fill="none">
  <!-- ─── Definitions ─────────────────────────────────────── -->
  <defs>
    <!-- LED glow filters -->
    <filter id="glow-green" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="glow-accent" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="glow-primary" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>

  <!-- ─── Central Cloud / Hub ─────────────────────────────── -->
  <g class="infra-hub">
    <rect x="195" y="30" width="130" height="80" rx="12" fill="#141c2e" stroke="#00757c" stroke-width="1.5"/>
    <!-- Cloud icon -->
    <path d="M240 60 a14 14 0 0 1 26 0 a10 10 0 0 1 9 10h-44a10 10 0 0 1 9-10z" fill="none" stroke="#00757c" stroke-width="1.5" stroke-linecap="round"/>
    <text x="260" y="92" text-anchor="middle" fill="rgba(255,255,255,.6)" font-size="9" font-family="Inter, sans-serif" font-weight="600" letter-spacing=".08em">CLOUD</text>
  </g>

  <!-- ─── Connection Lines (animated) ─────────────────────── -->
  <g class="infra-connections" stroke="#00757c" stroke-width="1" opacity=".5">
    <!-- Hub → Left Rack -->
    <line class="conn-line" x1="195" y1="90" x2="95" y2="160"/>
    <!-- Hub → Center Rack -->
    <line class="conn-line" x1="260" y1="110" x2="260" y2="160"/>
    <!-- Hub → Right Rack -->
    <line class="conn-line" x1="325" y1="90" x2="425" y2="160"/>
    <!-- Left → Center -->
    <line class="conn-line" x1="135" y1="265" x2="220" y2="265"/>
    <!-- Center → Right -->
    <line class="conn-line" x1="300" y1="265" x2="385" y2="265"/>
    <!-- Hub → Shield -->
    <line class="conn-line" x1="260" y1="350" x2="260" y2="380"/>
  </g>

  <!-- ─── Data flow particles ─────────────────────────────── -->
  <g class="infra-particles">
    <circle class="data-particle dp-1" r="2.5" fill="#00757c" filter="url(#glow-accent)"/>
    <circle class="data-particle dp-2" r="2.5" fill="#00757c" filter="url(#glow-accent)"/>
    <circle class="data-particle dp-3" r="2.5" fill="#00757c" filter="url(#glow-accent)"/>
    <circle class="data-particle dp-4" r="2" fill="#D83302" filter="url(#glow-primary)"/>
    <circle class="data-particle dp-5" r="2" fill="#D83302" filter="url(#glow-primary)"/>
  </g>

  <!-- ─── Server Rack 1 (Left) ────────────────────────────── -->
  <g class="infra-rack rack-left">
    <rect x="55" y="160" width="80" height="140" rx="6" fill="#0f1623" stroke="rgba(255,255,255,.1)" stroke-width="1"/>
    <!-- Rack label -->
    <text x="95" y="178" text-anchor="middle" fill="rgba(255,255,255,.35)" font-size="8" font-family="Inter, sans-serif" font-weight="600" letter-spacing=".1em">SRV-01</text>
    <!-- Server units -->
    <rect x="65" y="186" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="65" y="202" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="65" y="218" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="65" y="234" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="65" y="250" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="65" y="266" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="65" y="282" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <!-- LEDs -->
    <circle class="led led-green" cx="70" cy="192" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="70" cy="208" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-amber" cx="70" cy="224" r="2" fill="#f59e0b"/>
    <circle class="led led-green" cx="70" cy="240" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="70" cy="256" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="70" cy="272" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="70" cy="288" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <!-- Drive bays (small lines) -->
    <line x1="80" y1="190" x2="120" y2="190" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
    <line x1="80" y1="194" x2="110" y2="194" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
    <line x1="80" y1="206" x2="120" y2="206" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
    <line x1="80" y1="210" x2="115" y2="210" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
    <line x1="80" y1="222" x2="118" y2="222" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
    <line x1="80" y1="226" x2="108" y2="226" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
  </g>

  <!-- ─── Server Rack 2 (Center — primary) ───────────────── -->
  <g class="infra-rack rack-center">
    <rect x="220" y="160" width="80" height="188" rx="6" fill="#0f1623" stroke="#D83302" stroke-width="1.5"/>
    <!-- Rack label -->
    <text x="260" y="178" text-anchor="middle" fill="rgba(255,255,255,.35)" font-size="8" font-family="Inter, sans-serif" font-weight="600" letter-spacing=".1em">SRV-02</text>
    <!-- Server units -->
    <rect x="230" y="186" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="202" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="218" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="234" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="250" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="266" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="282" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="298" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="314" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="230" y="330" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <!-- LEDs -->
    <circle class="led led-green" cx="235" cy="192" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="208" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="224" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="240" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="256" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="272" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="288" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="304" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="320" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="235" cy="336" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <!-- Drive bays -->
    <line x1="245" y1="190" x2="285" y2="190" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
    <line x1="245" y1="194" x2="275" y2="194" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
    <line x1="245" y1="206" x2="285" y2="206" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
    <line x1="245" y1="210" x2="280" y2="210" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
    <line x1="245" y1="222" x2="283" y2="222" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
    <line x1="245" y1="226" x2="270" y2="226" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
  </g>

  <!-- ─── Server Rack 3 (Right) ──────────────────────────── -->
  <g class="infra-rack rack-right">
    <rect x="385" y="160" width="80" height="140" rx="6" fill="#0f1623" stroke="rgba(255,255,255,.1)" stroke-width="1"/>
    <!-- Rack label -->
    <text x="425" y="178" text-anchor="middle" fill="rgba(255,255,255,.35)" font-size="8" font-family="Inter, sans-serif" font-weight="600" letter-spacing=".1em">SRV-03</text>
    <!-- Server units -->
    <rect x="395" y="186" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="395" y="202" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="395" y="218" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="395" y="234" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="395" y="250" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="395" y="266" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <rect x="395" y="282" width="60" height="12" rx="2" fill="#141c2e" stroke="rgba(255,255,255,.06)" stroke-width=".5"/>
    <!-- LEDs -->
    <circle class="led led-green" cx="400" cy="192" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="400" cy="208" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="400" cy="224" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="400" cy="240" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-amber" cx="400" cy="256" r="2" fill="#f59e0b"/>
    <circle class="led led-green" cx="400" cy="272" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <circle class="led led-green" cx="400" cy="288" r="2" fill="#22c55e" filter="url(#glow-green)"/>
    <!-- Drive bays -->
    <line x1="410" y1="190" x2="450" y2="190" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
    <line x1="410" y1="194" x2="440" y2="194" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
    <line x1="410" y1="206" x2="450" y2="206" stroke="rgba(255,255,255,.08)" stroke-width="1"/>
    <line x1="410" y1="210" x2="445" y2="210" stroke="rgba(255,255,255,.05)" stroke-width="1"/>
  </g>

  <!-- ─── Shield (Security) ──────────────────────────────── -->
  <g class="infra-shield">
    <path d="M260 385 l-28 12 v22 c0 12 10 22 28 30 c18-8 28-18 28-30 v-22 z" fill="#141c2e" stroke="#00757c" stroke-width="1.5"/>
    <path d="M253 411 l5 5 l10-10" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- ─── Status badges ──────────────────────────────────── -->
  <!-- Badge: All Systems Operational -->
  <g class="infra-badge badge-status">
    <rect x="352" y="370" width="148" height="32" rx="16" fill="#141c2e" stroke="rgba(255,255,255,.1)" stroke-width="1"/>
    <circle class="led led-green" cx="370" cy="386" r="4" fill="#22c55e" filter="url(#glow-green)"/>
    <text x="382" y="390" fill="rgba(255,255,255,.7)" font-size="10" font-family="Inter, sans-serif" font-weight="600">All systems online</text>
  </g>

  <!-- Badge: Monitoring Active -->
  <g class="infra-badge badge-monitor">
    <rect x="20" y="115" width="132" height="32" rx="16" fill="#141c2e" stroke="rgba(255,255,255,.1)" stroke-width="1"/>
    <circle class="led led-accent" cx="38" cy="131" r="4" fill="#00757c" filter="url(#glow-accent)"/>
    <text x="50" y="135" fill="rgba(255,255,255,.7)" font-size="10" font-family="Inter, sans-serif" font-weight="600">Monitoring active</text>
  </g>

  <!-- Badge: 99.9% Uptime -->
  <g class="infra-badge badge-uptime">
    <rect x="390" y="115" width="118" height="32" rx="16" fill="#141c2e" stroke="rgba(255,255,255,.1)" stroke-width="1"/>
    <circle class="led led-primary" cx="408" cy="131" r="4" fill="#D83302" filter="url(#glow-primary)"/>
    <text x="420" y="135" fill="rgba(255,255,255,.7)" font-size="10" font-family="Inter, sans-serif" font-weight="600">99.9% uptime</text>
  </g>
</svg>