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:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user