<script lang="ts" setup>
import NetworkHero from './NetworkHero.vue'
</script>

<template>
  <div style="position: relative;">
    <NetworkHero :node-count="6" primary-color="#1d4ed8" secondary-color="#3b82f6" />
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
      <div
        style="
          width: 64px;
          height: 64px;
          border-radius: 14px;
          background: rgba(29, 78, 216, 0.15);
          border: 1px solid rgba(29, 78, 216, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(8px);
        "
      >
        <VIcon icon="tabler-server-2" size="32" color="#1d4ed8" />
      </div>
    </div>
  </div>
</template>
