83 lines
3.3 KiB
TypeScript
83 lines
3.3 KiB
TypeScript
type PricingSectionProps = {
|
|
mailboxes: number;
|
|
onMailboxesChange: (mailboxes: number) => void;
|
|
};
|
|
|
|
export default function PricingSection({ mailboxes, onMailboxesChange }: PricingSectionProps) {
|
|
return (
|
|
<section className="content-section pricing-detail" id="pricing-detail" aria-labelledby="pricing-title">
|
|
<div className="section-heading">
|
|
<p className="eyebrow">Simple mailbox pricing</p>
|
|
<h2 id="pricing-title">$5 per inbox per month, scoped before you switch.</h2>
|
|
</div>
|
|
|
|
<div className="pricing-builder" data-mailboxes={mailboxes}>
|
|
<div className="pricing-control-panel">
|
|
<div>
|
|
<span className="panel-label">Mailbox count</span>
|
|
<div className="mailbox-options" role="group" aria-label="Estimated mailbox count">
|
|
{[10, 25, 50].map((mailboxCount) => (
|
|
<button
|
|
className={mailboxes === mailboxCount ? "is-active" : ""}
|
|
type="button"
|
|
data-mailboxes={mailboxCount}
|
|
aria-pressed={mailboxes === mailboxCount}
|
|
onClick={() => onMailboxesChange(mailboxCount)}
|
|
key={mailboxCount}
|
|
>
|
|
{mailboxCount}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="price-estimate">
|
|
<span className="panel-label">Estimated base hosting</span>
|
|
<p><span className="plan-total">${mailboxes * 5}</span><span>/ month</span></p>
|
|
<small>For teams of 10+ mailboxes.</small>
|
|
</div>
|
|
|
|
<div className="offer-banner">
|
|
<span className="offer-banner-icon" aria-hidden="true">★</span>
|
|
Free migration & setup for teams that switch by July 31, 2026.
|
|
</div>
|
|
|
|
<p className="price-subtext">$5 per mailbox / month. Free migration if you switch by July 31, 2026. Final scope confirmed in your assessment.</p>
|
|
|
|
<a className="button button-primary" href="#assessment">Get a mailbox count quote</a>
|
|
</div>
|
|
|
|
<div className="pricing-included-panel">
|
|
<span className="panel-label">What’s included</span>
|
|
<ul className="included-feature-list">
|
|
<li>
|
|
<span className="included-check" aria-hidden="true">✓</span>
|
|
25 GB mailbox
|
|
</li>
|
|
<li>
|
|
<span className="included-check" aria-hidden="true">✓</span>
|
|
Custom domain email
|
|
</li>
|
|
<li>
|
|
<span className="included-check" aria-hidden="true">✓</span>
|
|
SPF, DKIM, DMARC configured
|
|
</li>
|
|
<li>
|
|
<span className="included-check" aria-hidden="true">✓</span>
|
|
Migration from current provider
|
|
</li>
|
|
<li>
|
|
<span className="included-check" aria-hidden="true">✓</span>
|
|
Outlook, iPhone, iPad setup
|
|
</li>
|
|
<li>
|
|
<span className="included-check" aria-hidden="true">✓</span>
|
|
Local Corpus Christi support
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|