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

89
app/globals.css
View File

@@ -542,6 +542,14 @@ h3 {
line-height: 1.38;
}
.hero-local-trust {
max-width: 32rem;
margin: var(--space-2) 0 0;
color: var(--blue);
font-size: var(--step--1);
font-weight: 700;
}
.trust-list,
.check-stack,
.local-strip ul {
@@ -1489,10 +1497,16 @@ h3 {
.pain-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-4);
}
@media (min-width: 760px) {
.pain-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.pain-grid article {
padding-block: var(--space-4);
border-top: 1px solid var(--line);
@@ -2789,6 +2803,72 @@ h3 {
color: var(--green);
}
.offer-banner {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border: 1px solid oklch(67% 0.16 147 / 0.62);
border-radius: var(--radius-md);
background: oklch(16% 0.06 147 / 0.18);
color: var(--green);
font-size: var(--step--1);
font-weight: 800;
line-height: 1.4;
}
:root[data-theme="light"] .offer-banner {
background: oklch(90% 0.06 147 / 0.32);
}
.offer-banner-icon {
flex: 0 0 auto;
color: var(--green);
font-size: 1.1rem;
}
.price-subtext {
margin: 0;
color: var(--text-muted);
font-size: var(--step--1);
}
.pricing-included-panel {
display: grid;
gap: var(--space-4);
align-content: start;
padding: clamp(1.25rem, 2vw, 2rem);
border: 1px solid var(--line-soft);
border-radius: var(--radius-md);
background: oklch(12% 0.034 245 / 0.62);
}
:root[data-theme="light"] .pricing-included-panel {
background: oklch(99% 0.006 245 / 0.86);
}
.included-feature-list {
display: grid;
gap: var(--space-3);
list-style: none;
padding: 0;
margin: 0;
}
.included-feature-list li {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--text-muted);
}
.included-check {
flex: 0 0 auto;
color: var(--green);
font-weight: 800;
font-size: 0.95rem;
}
.plan-summary,
.pricing-note {
margin: 0;
@@ -3264,6 +3344,13 @@ textarea::placeholder {
font-size: var(--step--1);
}
.form-trust-line {
margin: var(--space-2) 0 0;
color: var(--text-dim);
font-size: var(--step--1);
text-align: center;
}
.form-status {
min-height: 1.5rem;
margin: 0;

67
app/page.tsx
View File

@@ -4,72 +4,20 @@ import { FormEvent, MouseEvent, useEffect, useState } from "react";
import SiteHeader from "../components/SiteHeader";
import HeroSection from "../components/HeroSection";
import ProblemSection from "../components/ProblemSection";
import ProcessSection from "../components/ProcessSection";
import DeliverabilitySection from "../components/DeliverabilitySection";
import ContinuitySection, { type ContinuityFeature, type FeatureKey } from "../components/ContinuitySection";
import MigrationProcessSection from "../components/MigrationProcessSection";
import PricingSection, { type Plan } from "../components/PricingSection";
import PricingSection from "../components/PricingSection";
import FaqSection from "../components/FaqSection";
import AssessmentSection from "../components/AssessmentSection";
import SiteFooter from "../components/SiteFooter";
type Theme = "dark" | "light";
const pricingSummaries: Record<Plan, string> = {
hosting:
"Core business email hosting with 25 GB mailboxes, custom domain email, and AWS-backed infrastructure.",
managed:
"Managed setup adds rollout planning, DNS validation, migration coordination, and device handoff checks during the assessment.",
};
const continuityFeatures: Record<FeatureKey, ContinuityFeature> = {
buffering: {
title: "Inbound buffering",
copy: "Incoming mail can be buffered before mailbox delivery during maintenance or provider-side disruption.",
proof: [
"Supports planned maintenance windows",
"Keeps delivery flow observable",
"Feeds mailbox delivery after processing",
],
},
sending: {
title: "Outbound sending",
copy: "Amazon SES gives outbound email an authenticated sending path with reputation tooling and clearer operational visibility.",
proof: [
"Separates outbound sending from old shared hosting mail",
"Uses domain authentication as part of setup",
"Makes sending behavior easier to troubleshoot",
],
},
standby: {
title: "Standby failover",
copy: "A standby environment is part of the continuity plan when primary systems need intervention or provider-side work.",
proof: [
"Keeps the fallback path visible",
"Reduces guesswork during incidents",
"Pairs with status checks and local support",
],
},
local: {
title: "Local management",
copy: "Domain records, migration, mailbox changes, device setup, and troubleshooting stay with a local Corpus Christi team.",
proof: [
"One support path for DNS and devices",
"Migration scope is reviewed before work starts",
"Mailbox changes stay tied to the business context",
],
},
};
export default function Page() {
const [menuOpen, setMenuOpen] = useState(false);
const [theme, setTheme] = useState<Theme>("dark");
const [activeFeature, setActiveFeature] = useState<FeatureKey>("buffering");
const [activePlan, setActivePlan] = useState<Plan>("hosting");
const [mailboxes, setMailboxes] = useState(25);
const [mailboxes, setMailboxes] = useState(10);
const [formErrors, setFormErrors] = useState({ name: "", email: "" });
const [formStatus, setFormStatus] = useState("");
const activeFeatureDetails = continuityFeatures[activeFeature];
useEffect(() => {
const storedTheme = window.localStorage.getItem("bes-theme");
@@ -211,19 +159,8 @@ export default function Page() {
<main id="main">
<HeroSection />
<ProblemSection />
<ProcessSection />
<DeliverabilitySection />
<ContinuitySection
activeFeature={activeFeature}
activeFeatureDetails={activeFeatureDetails}
onFeatureChange={setActiveFeature}
/>
<MigrationProcessSection />
<PricingSection
activePlan={activePlan}
mailboxes={mailboxes}
pricingSummaries={pricingSummaries}
onPlanChange={setActivePlan}
onMailboxesChange={setMailboxes}
/>
<FaqSection />

1
components/AssessmentSection.tsx
View File

@@ -60,6 +60,7 @@ export default function AssessmentSection({ formErrors, formStatus, onAssessment
Request email assessment
<span aria-hidden="true">→</span>
</button>
<p className="form-trust-line">We reply within one business day. We don&rsquo;t share your details.</p>
<p className="form-status" role="status" aria-live="polite">{formStatus}</p>
</form>
</div>

4
components/FaqSection.tsx
View File

@@ -26,6 +26,10 @@ export default function FaqSection() {
<summary>Is this Microsoft 365 or Google Workspace?</summary>
<p>No. It is a managed business email hosting service for teams that want professional email, DNS correctness, migration help, and local support without buying a full office suite by default.</p>
</details>
<details>
<summary>What does switching cost?</summary>
<p>Setup and migration are included at no extra charge for teams that switch by June 30, 2026. After that, the ongoing cost is $5 per mailbox per month. We confirm the final scope in your assessment before any work begins.</p>
</details>
</div>
</section>
);

3
components/HeroSection.tsx
View File

@@ -8,6 +8,9 @@ export default function HeroSection() {
<p className="hero-lede">
Infrastructure and support from a local team that understands how business gets done.
</p>
<p className="hero-local-trust">
Local team in downtown Corpus Christi — same neighborhood as you.
</p>
<ul className="trust-list" aria-label="Core trust points">
<li>

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>

8
components/ProblemSection.tsx
View File

@@ -10,17 +10,13 @@ export default function ProblemSection() {
</div>
<div className="pain-grid">
<article>
<strong>Free addresses cost trust</strong>
<p>Gmail and Yahoo are fine for personal use. A business domain signals that your company is established.</p>
<strong>Unprofessional email hurts trust</strong>
<p>Free Gmail or Yahoo addresses and unreliable shared-hosting mailboxes both signal to customers that your business is not serious about communication.</p>
</article>
<article>
<strong>DNS mistakes send mail to spam</strong>
<p>SPF, DKIM, and DMARC help receiving servers recognize legitimate mail from your domain.</p>
</article>
<article>
<strong>Shared hosting mail breaks quietly</strong>
<p>Old hosting mailboxes often hide weak deliverability, limited storage, and unclear support paths.</p>
</article>
<article>
<strong>Support queues slow the fix</strong>
<p>When email breaks, a local team can assess the domain, provider, device, and DNS together.</p>