First commit
This commit is contained in:
114
components/AssessmentSection.tsx
Normal file
114
components/AssessmentSection.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import type { FormEventHandler } from "react";
|
||||
|
||||
type AssessmentSectionProps = {
|
||||
formErrors: { name: string; email: string };
|
||||
formStatus: string;
|
||||
onAssessmentSubmit: FormEventHandler<HTMLFormElement>;
|
||||
};
|
||||
|
||||
export default function AssessmentSection({ formErrors, formStatus, onAssessmentSubmit }: AssessmentSectionProps) {
|
||||
return (
|
||||
<section className="content-section assessment-section" id="assessment" aria-labelledby="assessment-title">
|
||||
<div className="assessment-bg" aria-hidden="true"></div>
|
||||
<div className="assessment-layout">
|
||||
<div className="assessment-form-card">
|
||||
<div className="assessment-form-head">
|
||||
<div>
|
||||
<p>Bay Area Email Services</p>
|
||||
<h3>Request an assessment</h3>
|
||||
</div>
|
||||
<span className="form-head-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M22 17a2 2 0 0 1-2 2H6.8a2 2 0 0 0-1.4.6l-2.2 2.2A.7.7 0 0 1 2 21.3V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form className="assessment-form" noValidate onSubmit={onAssessmentSubmit}>
|
||||
<div className="form-row">
|
||||
<label htmlFor="name">Your name <span>*</span></label>
|
||||
<input id="name" name="name" type="text" autoComplete="name" placeholder="Jane Doe" required />
|
||||
<p className="field-error" id="name-error">{formErrors.name}</p>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="email">Business email <span>*</span></label>
|
||||
<input id="email" name="email" type="email" autoComplete="email" placeholder="you@company.com" required />
|
||||
<p className="field-error" id="email-error">{formErrors.email}</p>
|
||||
</div>
|
||||
<div className="form-row split-form-row">
|
||||
<div>
|
||||
<label htmlFor="mailboxes">Mailboxes</label>
|
||||
<input id="mailboxes" name="mailboxes" type="number" min="1" inputMode="numeric" placeholder="12" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="provider">Current provider</label>
|
||||
<select id="provider" name="provider">
|
||||
<option value="">Select one</option>
|
||||
<option>Gmail or Google Workspace</option>
|
||||
<option>Microsoft 365</option>
|
||||
<option>Yahoo</option>
|
||||
<option>Shared hosting email</option>
|
||||
<option>Old or unknown provider</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="message">What should we review?</label>
|
||||
<textarea id="message" name="message" rows={4} placeholder="Domain, mailbox count, migration timing, device setup..."></textarea>
|
||||
</div>
|
||||
<button className="button button-primary button-large" type="submit">
|
||||
Request email assessment
|
||||
<span aria-hidden="true">→</span>
|
||||
</button>
|
||||
<p className="form-status" role="status" aria-live="polite">{formStatus}</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="assessment-copy">
|
||||
<p className="eyebrow">Start here</p>
|
||||
<h2 id="assessment-title">Let’s review your email setup.</h2>
|
||||
<p>
|
||||
Tell us about your domain, mailbox count, current provider, and support needs. We will reply with clear next steps for hosting, DNS, migration, and device setup.
|
||||
</p>
|
||||
|
||||
<div className="assessment-highlights" aria-label="Assessment includes">
|
||||
<article>
|
||||
<span aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 6v6h4"></path><circle cx="12" cy="12" r="10"></circle></svg>
|
||||
</span>
|
||||
<div>
|
||||
<strong>Quick response</strong>
|
||||
<p>Most requests receive a reply within one business day.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<span aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><circle cx="6" cy="19" r="3"></circle><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"></path><circle cx="18" cy="5" r="3"></circle></svg>
|
||||
</span>
|
||||
<div>
|
||||
<strong>Clear next steps</strong>
|
||||
<p>We outline DNS, migration, mailbox, and device requirements before work starts.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div className="direct-contact-card">
|
||||
<span className="contact-avatar" aria-hidden="true">
|
||||
<svg viewBox="0 0 40 32">
|
||||
<path d="M3 5.5h34v21H3z"></path>
|
||||
<path d="m4.5 7 15.5 11.5L35.5 7"></path>
|
||||
<path d="m4.5 25 11.2-9.2"></path>
|
||||
<path d="m35.5 25-11.2-9.2"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<p>Prefer to talk?</p>
|
||||
<strong>Local Corpus Christi support</strong>
|
||||
</div>
|
||||
<a href="tel:+13617658400">Call (361) 765-8400</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
95
components/ContinuitySection.tsx
Normal file
95
components/ContinuitySection.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
75
components/DeliverabilitySection.tsx
Normal file
75
components/DeliverabilitySection.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
export default function DeliverabilitySection() {
|
||||
return (
|
||||
<section className="content-section deliverability-section" id="deliverability" aria-labelledby="deliverability-title">
|
||||
<div className="deliverability-panel">
|
||||
<div className="deliverability-bg" aria-hidden="true"></div>
|
||||
<div className="deliverability-head">
|
||||
<div>
|
||||
<p className="eyebrow">Deliverability foundation</p>
|
||||
<h2 id="deliverability-title">Authenticate your domain before mail starts moving.</h2>
|
||||
</div>
|
||||
<p>
|
||||
Receiving mail systems look for SPF, DKIM, and DMARC before they decide how much they trust your messages.
|
||||
We configure and check those records before migration work begins.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="deliverability-card-grid" aria-label="Email authentication records">
|
||||
<article className="deliverability-card">
|
||||
<div className="record-visual record-visual-spf" aria-hidden="true">
|
||||
<div className="record-code">
|
||||
<span>TXT</span>
|
||||
<code>v=spf1 include:mail.bes.host -all</code>
|
||||
</div>
|
||||
<div className="record-route">
|
||||
<span>Domain</span>
|
||||
<i></i>
|
||||
<span>Allowed sender</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>SPF</h3>
|
||||
<p>Defines which servers are allowed to send email for your domain.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="deliverability-card">
|
||||
<div className="record-visual record-visual-dkim" aria-hidden="true">
|
||||
<div className="signature-card">
|
||||
<span>DKIM signature</span>
|
||||
<strong>key verified</strong>
|
||||
</div>
|
||||
<div className="key-row">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>DKIM</h3>
|
||||
<p>Adds a signed key to outgoing messages so receiving systems can verify they were not altered.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="deliverability-card">
|
||||
<div className="record-visual record-visual-dmarc" aria-hidden="true">
|
||||
<div className="policy-meter">
|
||||
<span>none</span>
|
||||
<span>quarantine</span>
|
||||
<span>reject</span>
|
||||
</div>
|
||||
<div className="report-line">
|
||||
<span>Policy</span>
|
||||
<strong>aligned</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>DMARC</h3>
|
||||
<p>Sets the policy for suspicious mail and gives you a clearer path for domain protection.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
32
components/FaqSection.tsx
Normal file
32
components/FaqSection.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
export default function FaqSection() {
|
||||
return (
|
||||
<section className="content-section faq-section" id="faq" aria-labelledby="faq-title">
|
||||
<div className="section-heading narrow">
|
||||
<p className="eyebrow">Questions</p>
|
||||
<h2 id="faq-title">Business email questions, answered directly.</h2>
|
||||
</div>
|
||||
<div className="faq-list">
|
||||
<details>
|
||||
<summary>What is a professional business email address?</summary>
|
||||
<p>It is an email address on your domain, such as info@yourcompany.com or name@yourcompany.com, instead of a free Gmail or Yahoo address.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Why are my business emails going to spam?</summary>
|
||||
<p>Common causes include missing or incorrect SPF, DKIM, and DMARC records, old provider reputation, shared sending systems, or inconsistent domain settings.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Can you migrate our existing email?</summary>
|
||||
<p>Yes. The migration plan depends on your current provider, mailbox count, domain access, and preferred migration window.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Does this work with Outlook, iPhone, and iPad?</summary>
|
||||
<p>Yes. Outlook, iPhone, iPad, web, and desktop access are part of the setup conversation.</p>
|
||||
</details>
|
||||
<details>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
187
components/HeroSection.tsx
Normal file
187
components/HeroSection.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section id="top" className="hero-section" aria-labelledby="hero-title">
|
||||
<div className="hero-grid">
|
||||
<div className="hero-copy">
|
||||
<p className="eyebrow">Corpus Christi business email hosting</p>
|
||||
<h1 id="hero-title">Business Email Hosting in Corpus Christi</h1>
|
||||
<p className="hero-lede">
|
||||
Infrastructure and support from a local team that understands how business gets done.
|
||||
</p>
|
||||
|
||||
<ul className="trust-list" aria-label="Core trust points">
|
||||
<li>
|
||||
<span className="check-icon" aria-hidden="true"></span>
|
||||
AWS-built architecture
|
||||
</li>
|
||||
<li>
|
||||
<span className="chart-icon" aria-hidden="true"></span>
|
||||
Configured to improve deliverability
|
||||
</li>
|
||||
<li>
|
||||
<span className="people-icon" aria-hidden="true"></span>
|
||||
Real people. Local support.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="hero-actions">
|
||||
<a className="button button-primary button-large" href="#assessment">
|
||||
Book a 20-minute email assessment
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
<a className="call-inline" href="tel:+13617658400">Call (361) 765-8400</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="infrastructure" className="architecture-panel" aria-labelledby="architecture-title">
|
||||
<h2 id="architecture-title" className="sr-only">Mail flow designed for continuity</h2>
|
||||
<img
|
||||
className="architecture-image architecture-image-dark"
|
||||
src="/assets/mail-flow-panel.png"
|
||||
alt="Mail flow diagram showing inbound email, Amazon S3 buffering, mailbox delivery, Amazon SES outbound sending, standby infrastructure, and operational system status."
|
||||
/>
|
||||
<img
|
||||
className="architecture-image architecture-image-light"
|
||||
src="/assets/mail-flow-panel-light.png"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="sr-only">
|
||||
Inbound messages are collected from the internet, remote mail servers, and other providers, buffered and processed through Amazon S3, delivered to mailboxes, sent outbound through Amazon SES, and supported by standby infrastructure.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="module-grid" aria-label="Service highlights">
|
||||
<article className="module-card" id="services">
|
||||
<div className="module-title">
|
||||
<h2>DNS authentication</h2>
|
||||
<span className="shield-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"></path><path d="m9 12 2 2 4-5"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<p>We configure and validate the records that help protect your domain.</p>
|
||||
<ul className="check-stack">
|
||||
<li>SPF</li>
|
||||
<li>DKIM</li>
|
||||
<li>DMARC</li>
|
||||
</ul>
|
||||
<a href="#deliverability">Learn more about email security</a>
|
||||
</article>
|
||||
|
||||
<article className="module-card" id="migration">
|
||||
<span className="module-icon migration-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 7h10"></path><path d="M4 17h10"></path><path d="m14 3 4 4-4 4"></path><path d="m14 13 4 4-4 4"></path><path d="M18 7h2"></path><path d="M18 17h2"></path></svg>
|
||||
</span>
|
||||
<h2>Local migration help</h2>
|
||||
<ol className="process-steps">
|
||||
<li>
|
||||
<span>1</span>
|
||||
<strong>Discover</strong>
|
||||
<p>We learn your setup, volume, and needs.</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>2</span>
|
||||
<strong>Plan</strong>
|
||||
<p>We design the migration and share the plan.</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>3</span>
|
||||
<strong>Migrate</strong>
|
||||
<p>We move mail, users, and settings.</p>
|
||||
</li>
|
||||
<li>
|
||||
<span>4</span>
|
||||
<strong>Validate</strong>
|
||||
<p>We test, verify, and hand it over.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<a href="#migration-detail">See the full migration checklist</a>
|
||||
</article>
|
||||
|
||||
<article className="module-card price-card" id="pricing">
|
||||
<span className="module-icon hosting-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 6.5h16v11H4z"></path><path d="m5 8 7 5 7-5"></path><path d="M8 21h8"></path><path d="M12 17.5V21"></path></svg>
|
||||
</span>
|
||||
<h2>AWS-backed email</h2>
|
||||
<p className="price"><span>$5</span> / inbox / month</p>
|
||||
<p className="included">25 GB mailbox included.</p>
|
||||
<ul className="check-stack compact">
|
||||
<li>Business email on your domain</li>
|
||||
<li>AWS-backed infrastructure</li>
|
||||
<li>Web, mobile, and desktop access</li>
|
||||
<li>Local support from real people</li>
|
||||
</ul>
|
||||
<a className="button button-primary" href="#assessment">Book a 20-minute email assessment</a>
|
||||
</article>
|
||||
|
||||
<article className="module-card compare-card">
|
||||
<h2>Compare Plans</h2>
|
||||
<div className="compare-table" role="table" aria-label="Business email plan comparison">
|
||||
<div role="row" className="table-head">
|
||||
<span role="columnheader">Feature</span>
|
||||
<span role="columnheader">BES Basic</span>
|
||||
<span role="columnheader">BES Pro</span>
|
||||
<span role="columnheader">Other Providers</span>
|
||||
</div>
|
||||
<div role="row">
|
||||
<span role="cell">Business email</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">✓</span>
|
||||
</div>
|
||||
<div role="row">
|
||||
<span role="cell">Custom domain</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">✓</span>
|
||||
</div>
|
||||
<div role="row">
|
||||
<span role="cell">AWS infrastructure</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">Varies</span>
|
||||
</div>
|
||||
<div role="row">
|
||||
<span role="cell">Local support</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">Varies</span>
|
||||
</div>
|
||||
<div role="row">
|
||||
<span role="cell">Transparent pricing</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">Varies</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#pricing-detail">View full plan details</a>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<section className="local-strip" aria-labelledby="local-title">
|
||||
<div>
|
||||
<h2 id="local-title">Local Support. Real People.</h2>
|
||||
<p>Corpus Christi support for setup, migration, DNS, and day-to-day email questions.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<span className="building-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 21V7l8-4 8 4v14"></path><path d="M9 21v-7h6v7"></path><path d="M8 9h.1M12 9h.1M16 9h.1"></path></svg>
|
||||
</span>
|
||||
<strong>Corpus Christi team</strong>
|
||||
</li>
|
||||
<li>
|
||||
<span className="headset-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 13a8 8 0 0 1 16 0"></path><path d="M4 13v4a2 2 0 0 0 2 2h2v-8H6a2 2 0 0 0-2 2Z"></path><path d="M20 13v4a2 2 0 0 1-2 2h-2v-8h2a2 2 0 0 1 2 2Z"></path><path d="M16 19a4 4 0 0 1-4 2"></path></svg>
|
||||
</span>
|
||||
<strong>U.S.-based support</strong>
|
||||
</li>
|
||||
<li>
|
||||
<span className="clock-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
|
||||
</span>
|
||||
<strong>Business-hour response</strong>
|
||||
</li>
|
||||
<li>
|
||||
<span className="people-outline-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"></path><circle cx="9.5" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.8"></path><path d="M16 3.3a4 4 0 0 1 0 7.4"></path></svg>
|
||||
</span>
|
||||
<strong>Small business focused</strong>
|
||||
</li>
|
||||
<li>
|
||||
<span className="shield-outline-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"></path><path d="m9 12 2 2 4-5"></path></svg>
|
||||
</span>
|
||||
<strong>Bay Area IT family</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
51
components/MigrationProcessSection.tsx
Normal file
51
components/MigrationProcessSection.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
export default function MigrationProcessSection() {
|
||||
return (
|
||||
<section className="content-section migration-detail" id="migration-detail" aria-labelledby="migration-title">
|
||||
<div className="migration-process-panel">
|
||||
<div className="migration-process-head">
|
||||
<div>
|
||||
<p className="eyebrow">Switching providers</p>
|
||||
<h2 id="migration-title">Migration process</h2>
|
||||
</div>
|
||||
<span aria-hidden="true"></span>
|
||||
<p>how we move your business email</p>
|
||||
</div>
|
||||
|
||||
<div className="migration-process-line" aria-hidden="true"></div>
|
||||
|
||||
<ol className="migration-process-grid" aria-label="Email migration steps">
|
||||
<li>
|
||||
<div className="migration-step-badge badge-blue">01</div>
|
||||
<h3>Assess</h3>
|
||||
<p>Domain, provider, mailbox count, aliases, forwards, and device needs are reviewed first.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="migration-step-badge badge-purple">02</div>
|
||||
<h3>Prepare DNS</h3>
|
||||
<p>MX, SPF, DKIM, DMARC, routing, aliases, and spam rules are staged before cutover.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="migration-step-badge badge-green">03</div>
|
||||
<h3>Migrate mail</h3>
|
||||
<p>Existing mail is moved from Gmail, Yahoo, Microsoft 365, shared hosting, or legacy providers.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div className="migration-step-badge badge-amber">04</div>
|
||||
<h3>Set up devices</h3>
|
||||
<p>Outlook, iPhone, iPad, web access, and login details are verified before handoff.</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div className="migration-needs">
|
||||
<strong>What we need from you</strong>
|
||||
<ul>
|
||||
<li>Domain access</li>
|
||||
<li>User and mailbox list</li>
|
||||
<li>Current provider details</li>
|
||||
<li>Preferred migration window</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
133
components/PricingSection.tsx
Normal file
133
components/PricingSection.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
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) {
|
||||
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-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">
|
||||
{[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>Based on <strong className="selected-mailboxes">{mailboxes}</strong> inboxes at $5 each.</small>
|
||||
</div>
|
||||
|
||||
<p className="plan-summary">
|
||||
{pricingSummaries[activePlan]}
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
31
components/ProblemSection.tsx
Normal file
31
components/ProblemSection.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
export default function ProblemSection() {
|
||||
return (
|
||||
<section className="content-section problem-section" aria-labelledby="problem-title">
|
||||
<div className="section-heading">
|
||||
<p className="eyebrow">Why it matters</p>
|
||||
<h2 id="problem-title">Email problems rarely look technical at first.</h2>
|
||||
<p>
|
||||
They show up as missed leads, delayed approvals, confused customers, and a team that does not know who to call.
|
||||
</p>
|
||||
</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>
|
||||
</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>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
73
components/ProcessSection.tsx
Normal file
73
components/ProcessSection.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
export default function ProcessSection() {
|
||||
return (
|
||||
<section className="content-section process-section" id="process" aria-labelledby="process-title">
|
||||
<div className="process-inner">
|
||||
<div className="section-heading narrow process-heading">
|
||||
<p className="process-kicker">Process</p>
|
||||
<h2 id="process-title">How your email move works.</h2>
|
||||
<p>
|
||||
A clear three-step path from assessment to working mailboxes, DNS records, and device setup.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="process-card-grid">
|
||||
<article className="process-card">
|
||||
<span className="process-corner process-corner-tl" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-tr" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-bl" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-br" aria-hidden="true"></span>
|
||||
<div className="process-card-content">
|
||||
<div className="process-step-label">
|
||||
<span>Step 1</span>
|
||||
</div>
|
||||
<h3>Assess the setup</h3>
|
||||
<p>
|
||||
We review your domain, mailbox count, current provider, DNS status, aliases, and device needs before anything changes.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="process-card">
|
||||
<span className="process-corner process-corner-tl" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-tr" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-bl" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-br" aria-hidden="true"></span>
|
||||
<div className="process-card-content">
|
||||
<div className="process-step-label">
|
||||
<span>Step 2</span>
|
||||
</div>
|
||||
<h3>Configure the records</h3>
|
||||
<p>
|
||||
Mailboxes, MX routing, SPF, DKIM, DMARC, aliases, forwards, and sending paths are prepared and checked.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="process-card">
|
||||
<span className="process-corner process-corner-tl" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-tr" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-bl" aria-hidden="true"></span>
|
||||
<span className="process-corner process-corner-br" aria-hidden="true"></span>
|
||||
<div className="process-card-content">
|
||||
<div className="process-step-label">
|
||||
<span>Step 3</span>
|
||||
</div>
|
||||
<h3>Migrate and hand off</h3>
|
||||
<p>
|
||||
We move mail when needed, verify delivery, set up Outlook and mobile devices, and leave your team with a clear support path.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div className="process-cta">
|
||||
<p>Ready to review your current email setup?</p>
|
||||
<a className="button button-outline" href="#assessment">
|
||||
Request an assessment
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
63
components/SiteFooter.tsx
Normal file
63
components/SiteFooter.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
export default function SiteFooter() {
|
||||
return (
|
||||
<footer className="site-footer" aria-label="Footer">
|
||||
<div className="footer-inner">
|
||||
<div className="footer-main">
|
||||
<div className="footer-brand">
|
||||
<a className="footer-logo" href="#top" aria-label="Bay Area Email Services home">
|
||||
<span className="brand-mark" aria-hidden="true">
|
||||
<svg viewBox="0 0 40 32" role="img">
|
||||
<path d="M3 5.5h34v21H3z"></path>
|
||||
<path d="m4.5 7 15.5 11.5L35.5 7"></path>
|
||||
<path d="m4.5 25 11.2-9.2"></path>
|
||||
<path d="m35.5 25-11.2-9.2"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
<strong>Bay Area</strong>
|
||||
<span>Email Services</span>
|
||||
</span>
|
||||
</a>
|
||||
<p>
|
||||
Business email hosting, DNS authentication, migration help, and local support for Corpus Christi teams.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<nav className="footer-links" aria-label="Footer navigation">
|
||||
<h2>Explore</h2>
|
||||
<ul>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#infrastructure">Infrastructure</a></li>
|
||||
<li><a href="#pricing-detail">Pricing</a></li>
|
||||
<li><a href="#migration-detail">Migration</a></li>
|
||||
<li><a href="#faq">FAQ</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div className="footer-contact">
|
||||
<h2>Contact</h2>
|
||||
<ul>
|
||||
<li><a href="tel:+13617658400">Call (361) 765-8400</a></li>
|
||||
<li><a href="#assessment">Book a 20-minute email assessment</a></li>
|
||||
<li>Corpus Christi and the Coastal Bend</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="footer-bottom">
|
||||
<p>Bay Area Email Services, part of Bay Area IT. All rights reserved.</p>
|
||||
<div>
|
||||
<a href="#assessment">Support</a>
|
||||
<a href="#top" className="back-to-top">
|
||||
Back to top
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="m5 12 7-7 7 7"></path>
|
||||
<path d="M12 19V5"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
87
components/SiteHeader.tsx
Normal file
87
components/SiteHeader.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import type { MouseEventHandler } from "react";
|
||||
|
||||
type Theme = "dark" | "light";
|
||||
|
||||
type SiteHeaderProps = {
|
||||
menuOpen: boolean;
|
||||
theme: Theme;
|
||||
onMenuToggle: () => void;
|
||||
onThemeToggle: () => void;
|
||||
onNavClick: MouseEventHandler<HTMLElement>;
|
||||
};
|
||||
|
||||
export default function SiteHeader({ menuOpen, theme, onMenuToggle, onThemeToggle, onNavClick }: SiteHeaderProps) {
|
||||
return (
|
||||
<header className="site-header" aria-label="Primary navigation">
|
||||
<a className="brand" href="#top" aria-label="Bay Area Email Services home">
|
||||
<span className="brand-mark" aria-hidden="true">
|
||||
<svg viewBox="0 0 40 32" role="img">
|
||||
<path d="M3 5.5h34v21H3z"></path>
|
||||
<path d="m4.5 7 15.5 11.5L35.5 7"></path>
|
||||
<path d="m4.5 25 11.2-9.2"></path>
|
||||
<path d="m35.5 25-11.2-9.2"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
<strong>Bay Area</strong>
|
||||
<span>Email Services</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<button
|
||||
className="menu-toggle"
|
||||
type="button"
|
||||
aria-expanded={menuOpen}
|
||||
aria-controls="nav-menu"
|
||||
onClick={onMenuToggle}
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<b>Menu</b>
|
||||
<span className="sr-only">Open menu</span>
|
||||
</button>
|
||||
|
||||
<nav id="nav-menu" className={`nav-menu${menuOpen ? " is-open" : ""}`} onClick={onNavClick}>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#infrastructure">Infrastructure</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#migration">Migration</a>
|
||||
<a href="#faq">Resources</a>
|
||||
<a href="#assessment">Support</a>
|
||||
</nav>
|
||||
|
||||
<div className="header-actions">
|
||||
<a className="phone-link" href="tel:+13617658400" aria-label="Call Bay Area Email Services at 361 765 8400">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"></path>
|
||||
</svg>
|
||||
Call (361) 765-8400
|
||||
</a>
|
||||
<button
|
||||
className="theme-toggle"
|
||||
type="button"
|
||||
aria-pressed={theme === "light"}
|
||||
aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
|
||||
onClick={onThemeToggle}
|
||||
>
|
||||
<svg className="theme-icon theme-icon-sun" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M12 2v2.5"></path>
|
||||
<path d="M12 19.5V22"></path>
|
||||
<path d="m4.9 4.9 1.8 1.8"></path>
|
||||
<path d="m17.3 17.3 1.8 1.8"></path>
|
||||
<path d="M2 12h2.5"></path>
|
||||
<path d="M19.5 12H22"></path>
|
||||
<path d="m4.9 19.1 1.8-1.8"></path>
|
||||
<path d="m17.3 6.7 1.8-1.8"></path>
|
||||
</svg>
|
||||
<svg className="theme-icon theme-icon-moon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<a className="button button-primary" href="#assessment">Book a 20-minute email assessment</a>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user