Files
E-Mail-Webseite-Marketing/components/HeroSection.tsx
2026-06-14 18:14:16 -05:00

173 lines
8.1 KiB
TypeScript

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>
<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>
<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">&rarr;</span>
</a>
<a className="call-inline" href="tel:+13617658400">Call (361) 765-8400</a>
</div>
</div>
</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>
);
}