96 lines
3.7 KiB
TypeScript
96 lines
3.7 KiB
TypeScript
export type FeatureKey = "buffering" | "sending" | "standby" | "local";
|
|
|
|
export type ContinuityFeature = {
|
|
title: string;
|
|
copy: string;
|
|
proof: string[];
|
|
};
|
|
|
|
type ContinuitySectionProps = {
|
|
activeFeature: FeatureKey;
|
|
activeFeatureDetails: ContinuityFeature;
|
|
onFeatureChange: (feature: FeatureKey) => void;
|
|
};
|
|
|
|
export default function ContinuitySection({ activeFeature, activeFeatureDetails, onFeatureChange }: ContinuitySectionProps) {
|
|
return (
|
|
<section className="content-section continuity-section" id="continuity" aria-labelledby="continuity-title">
|
|
<div className="section-heading narrow">
|
|
<p className="eyebrow">Continuity</p>
|
|
<h2 id="continuity-title">Designed for continuity, explained in plain English.</h2>
|
|
<p>
|
|
The platform uses AWS services including Amazon S3 and Amazon SES, plus standby infrastructure and local management.
|
|
</p>
|
|
</div>
|
|
<div className="feature-showcase" data-active-feature={activeFeature}>
|
|
<div className="feature-tabs" role="tablist" aria-label="Continuity capabilities">
|
|
<button
|
|
className={activeFeature === "buffering" ? "is-active" : ""}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={activeFeature === "buffering"}
|
|
data-feature="buffering"
|
|
onClick={() => onFeatureChange("buffering")}
|
|
>
|
|
<span>01</span>
|
|
<strong>Inbound buffering</strong>
|
|
<small>Hold mail before delivery when systems need attention.</small>
|
|
</button>
|
|
<button
|
|
className={activeFeature === "sending" ? "is-active" : ""}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={activeFeature === "sending"}
|
|
data-feature="sending"
|
|
onClick={() => onFeatureChange("sending")}
|
|
>
|
|
<span>02</span>
|
|
<strong>Outbound sending</strong>
|
|
<small>Use an authenticated sending path through Amazon SES.</small>
|
|
</button>
|
|
<button
|
|
className={activeFeature === "standby" ? "is-active" : ""}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={activeFeature === "standby"}
|
|
data-feature="standby"
|
|
onClick={() => onFeatureChange("standby")}
|
|
>
|
|
<span>03</span>
|
|
<strong>Standby failover</strong>
|
|
<small>Keep a standby environment visible in the continuity plan.</small>
|
|
</button>
|
|
<button
|
|
className={activeFeature === "local" ? "is-active" : ""}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={activeFeature === "local"}
|
|
data-feature="local"
|
|
onClick={() => onFeatureChange("local")}
|
|
>
|
|
<span>04</span>
|
|
<strong>Local management</strong>
|
|
<small>Keep DNS, devices, mailbox changes, and support together.</small>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="feature-panel" role="tabpanel" aria-live="polite">
|
|
<div className="feature-panel-top">
|
|
<span className="panel-label">Selected capability</span>
|
|
<span className="status-pill">Operational</span>
|
|
</div>
|
|
<h3 className="feature-panel-title">{activeFeatureDetails.title}</h3>
|
|
<p className="feature-panel-copy">
|
|
{activeFeatureDetails.copy}
|
|
</p>
|
|
<ul className="feature-proof-list">
|
|
{activeFeatureDetails.proof.map((proof) => (
|
|
<li key={proof}>{proof}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|