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" />
|
<VIcon icon="tabler-arrows-right-left" size="18" />
|
||||||
<span>{{ bandwidth }}</span>
|
<span>{{ bandwidth }}</span>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="plan-card__actions">
|
<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 {
|
.plan-card__actions {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
display: flex;
|
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."
|
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>
|
<h3 class="text-h6 font-weight-bold mb-4 plan-grid-heading">Standard VPS</h3>
|
||||||
<VRow class="mb-8">
|
<VRow class="mb-8">
|
||||||
<VCol
|
<VCol
|
||||||
@@ -391,4 +418,46 @@ function prefillEstimator(planId: number): void {
|
|||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
color: rgba(var(--v-theme-on-surface), 0.85);
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user