69 lines
1.7 KiB
Text
69 lines
1.7 KiB
Text
---
|
|
import { formatUSD } from "../lib/intake_manifest";
|
|
|
|
export interface Props {
|
|
priceCents?: number;
|
|
govFeeLabel?: string;
|
|
note?: string;
|
|
}
|
|
|
|
const { priceCents, govFeeLabel, note } = Astro.props;
|
|
const hasPrice = typeof priceCents === "number";
|
|
---
|
|
|
|
{hasPrice && (
|
|
<aside class="pw-price-banner" aria-label="Service price">
|
|
<div>
|
|
<p class="pw-price-label">Service fee</p>
|
|
<p class="pw-price-value">{formatUSD(priceCents!)}</p>
|
|
</div>
|
|
<div class="pw-price-copy">
|
|
{govFeeLabel ? (
|
|
<p><strong>Pass-through fees:</strong>{" "}{govFeeLabel}. Billed separately at cost.</p>
|
|
) : (
|
|
<p>No hidden Performance West service fee. You will review the total before payment.</p>
|
|
)}
|
|
{note && <p>{note}</p>}
|
|
</div>
|
|
</aside>
|
|
)}
|
|
|
|
<style>
|
|
.pw-price-banner {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.15rem;
|
|
margin: 1rem 0 1.5rem;
|
|
border: 2px solid #fed7aa;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, #fff7ed, #ffffff);
|
|
box-shadow: 0 10px 28px rgba(249, 115, 22, 0.10);
|
|
}
|
|
.pw-price-label {
|
|
margin: 0 0 0.15rem;
|
|
color: #9a3412;
|
|
font-size: 0.78rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
.pw-price-value {
|
|
margin: 0;
|
|
color: #ea580c;
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|
line-height: 1;
|
|
font-weight: 900;
|
|
}
|
|
.pw-price-copy {
|
|
max-width: 30rem;
|
|
color: #475569;
|
|
font-size: 0.95rem;
|
|
line-height: 1.45;
|
|
}
|
|
.pw-price-copy p { margin: 0.2rem 0; }
|
|
@media (max-width: 640px) {
|
|
.pw-price-banner { align-items: flex-start; flex-direction: column; }
|
|
}
|
|
</style>
|