feat(vps): add hardware transparency band + per-card meta

Adds a "Built on" hardware band above the plan grid and a small
meta line on each plan card so shoppers can see what's actually
running their VPS.

Hardware band lists: Dell PowerEdge hypervisors · Intel Xeon · ECC
memory · Enterprise SSD storage · Atlanta, GA datacenter.

Per-card meta line: "Intel Xeon · ECC memory" in muted small type
under the regular spec list.

Copy is intentionally generic ("Intel Xeon", not Broadwell-EP /
Cascade Lake) to remain accurate across the current mixed pool
(R720xd Ivy Bridge being retired into the new R740xd ATL-04 next
week per infrastructure/docs/hypervisor-consolidation-r740xd-build.md).
Tighten the wording once consolidation lands.

Dropped the originally-proposed "10 Gbps inter-host" row — it's
internal cluster networking (used for live migration + shared
storage), and customers were likely to confuse it with their own
egress bandwidth.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-26 16:49:18 -04:00
parent c688180842
commit ffb7f47e7d
2 changed files with 82 additions and 0 deletions

View File

@@ -77,6 +77,10 @@ const bandwidth = computed<string>(() => String(props.plan.features?.bandwidth ?
<VIcon icon="tabler-arrows-right-left" size="18" />
<span>{{ bandwidth }}</span>
</div>
<div class="plan-card__spec plan-card__spec--meta">
<VIcon icon="tabler-microchip" size="18" />
<span>Intel Xeon · ECC memory</span>
</div>
</div>
<div class="plan-card__actions">
@@ -210,6 +214,15 @@ const bandwidth = computed<string>(() => String(props.plan.features?.bandwidth ?
}
}
.plan-card__spec--meta {
font-size: 12px;
color: rgba(var(--v-theme-on-surface), 0.55);
letter-spacing: 0.01em;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed rgba(var(--v-theme-on-surface), 0.06);
}
.plan-card__actions {
margin-top: auto;
display: flex;

View File

@@ -264,6 +264,33 @@ function prefillEstimator(planId: number): void {
subtitle="All plans hosted in our Atlanta, GA datacenter. Free ZFS snapshots, full root access, and the VirtFusion panel are included on every tier."
/>
<!-- Hardware band single line, real infrastructure transparency. -->
<div class="hardware-band mb-8" role="note" aria-label="Underlying hardware">
<div class="hardware-band__label">Built on</div>
<ul class="hardware-band__list">
<li>
<VIcon icon="tabler-server-2" size="16" />
<span>Dell PowerEdge hypervisors</span>
</li>
<li>
<VIcon icon="tabler-cpu" size="16" />
<span>Intel Xeon</span>
</li>
<li>
<VIcon icon="tabler-shield-bolt" size="16" />
<span>ECC memory</span>
</li>
<li>
<VIcon icon="tabler-database" size="16" />
<span>Enterprise SSD storage</span>
</li>
<li>
<VIcon icon="tabler-map-pin" size="16" />
<span>Atlanta, GA datacenter</span>
</li>
</ul>
</div>
<h3 class="text-h6 font-weight-bold mb-4 plan-grid-heading">Standard VPS</h3>
<VRow class="mb-8">
<VCol
@@ -391,4 +418,46 @@ function prefillEstimator(planId: number): void {
letter-spacing: -0.01em;
color: rgba(var(--v-theme-on-surface), 0.85);
}
.hardware-band {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding: 14px 20px;
border-radius: 12px;
background: rgba(var(--v-theme-surface), 0.45);
border: 1px solid rgba(var(--v-theme-on-surface), 0.06);
&__label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(var(--v-theme-on-surface), 0.5);
white-space: nowrap;
}
&__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 18px;
flex-grow: 1;
li {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(var(--v-theme-on-surface), 0.78);
.v-icon {
color: rgb(var(--v-theme-primary));
}
}
}
}
</style>