tknuth/E-Mail-Webseite-Marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Andreas Knuth
2026-06-13 14:36:27 -05:00
parent 75ece13f80
commit dfd5e744a4
7 changed files with 137 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
components/PricingSection.tsx
View File

@@ -1,50 +1,18 @@
export type Plan = "hosting" | "managed";
type PricingSectionProps = {
activePlan: Plan;
mailboxes: number;
pricingSummaries: Record<Plan, string>;
onPlanChange: (plan: Plan) => void;
onMailboxesChange: (mailboxes: number) => void;
};
export default function PricingSection({ activePlan, mailboxes, pricingSummaries, onPlanChange, onMailboxesChange }: PricingSectionProps) {
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>
<p>
Pick a mailbox count and plan focus. The base mailbox price is transparent; setup, migration, support scope, minimums, taxes, and add-ons are confirmed during the assessment.
</p>
</div>
<div className="pricing-builder" data-plan={activePlan} data-mailboxes={mailboxes}>
<div className="pricing-builder" data-mailboxes={mailboxes}>
<div className="pricing-control-panel">
<div>
<span className="panel-label">Plan focus</span>
<div className="pricing-segmented" data-active={activePlan} role="group" aria-label="Plan focus">
<button
className={activePlan === "hosting" ? "is-active" : ""}
type="button"
data-plan="hosting"
aria-pressed={activePlan === "hosting"}
onClick={() => onPlanChange("hosting")}
>
Hosting
</button>
<button
className={activePlan === "managed" ? "is-active" : ""}
type="button"
data-plan="managed"
aria-pressed={activePlan === "managed"}
onClick={() => onPlanChange("managed")}
>
Managed setup
</button>
</div>
</div>
<div>
<span className="panel-label">Mailbox count</span>
<div className="mailbox-options" role="group" aria-label="Estimated mailbox count">
@@ -66,66 +34,47 @@ export default function PricingSection({ activePlan, mailboxes, pricingSummaries
<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>Based on <strong className="selected-mailboxes">{mailboxes}</strong> inboxes at $5 each.</small>
<small>For teams of 10+ mailboxes.</small>
</div>
<p className="plan-summary">
{pricingSummaries[activePlan]}
</p>
<div className="offer-banner">
<span className="offer-banner-icon" aria-hidden="true">&#9733;</span>
Free migration &amp; setup for teams that switch by June&nbsp;30,&nbsp;2026.
</div>
<p className="price-subtext">$5 per mailbox / month. Free migration if you switch by June 30, 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-comparison-panel">
<div className="comparison-head">
<div>
<span className="panel-label">What changes by scope</span>
<h3>Hosting first, managed help when the migration needs it.</h3>
</div>
<span className="status-pill">Operational plan</span>
</div>
<div className="plan-feature-grid" role="table" aria-label="Plan feature comparison">
<div className="plan-feature-row table-head" role="row">
<span role="columnheader">Feature</span>
<span role="columnheader">Hosting</span>
<span role="columnheader">Managed setup</span>
</div>
<div className="plan-feature-row" role="row">
<span role="cell">25 GB mailbox</span>
<span role="cell">Included</span>
<span role="cell">Included</span>
</div>
<div className="plan-feature-row" role="row">
<span role="cell">Custom domain email</span>
<span role="cell">Included</span>
<span role="cell">Included</span>
</div>
<div className="plan-feature-row" role="row">
<span role="cell">SPF, DKIM, DMARC check</span>
<span role="cell">Configured</span>
<span role="cell">Configured + validated</span>
</div>
<div className="plan-feature-row" role="row">
<span role="cell">Migration from current provider</span>
<span role="cell">Scoped</span>
<span role="cell">Planned with handoff</span>
</div>
<div className="plan-feature-row" role="row">
<span role="cell">Outlook, iPhone, iPad setup</span>
<span role="cell">Guided</span>
<span role="cell">Checked before handoff</span>
</div>
<div className="plan-feature-row" role="row">
<span role="cell">Local support</span>
<span role="cell">Available</span>
<span role="cell">Priority during rollout</span>
</div>
</div>
<p className="pricing-note">
No inbox placement guarantees, no zero-downtime promise. The assessment confirms DNS access, provider constraints, migration timing, and device needs before work starts.
</p>
<div className="pricing-included-panel">
<span className="panel-label">What&rsquo;s included</span>
<ul className="included-feature-list">
<li>
<span className="included-check" aria-hidden="true">&#10003;</span>
25 GB mailbox
</li>
<li>
<span className="included-check" aria-hidden="true">&#10003;</span>
Custom domain email
</li>
<li>
<span className="included-check" aria-hidden="true">&#10003;</span>
SPF, DKIM, DMARC configured
</li>
<li>
<span className="included-check" aria-hidden="true">&#10003;</span>
Migration from current provider
</li>
<li>
<span className="included-check" aria-hidden="true">&#10003;</span>
Outlook, iPhone, iPad setup
</li>
<li>
<span className="included-check" aria-hidden="true">&#10003;</span>
Local Corpus Christi support
</li>
</ul>
</div>
</div>
</section>