34 lines
2.2 KiB
JavaScript
34 lines
2.2 KiB
JavaScript
import { ArrowRight, Bot, Check, Inbox, Menu, Send, Sparkles } from "lucide-react";
|
|
import Brand from "./Brand";
|
|
|
|
export default function MobileLanding() {
|
|
return (
|
|
<main className="mobile-landing">
|
|
<nav className="mobile-nav">
|
|
<Brand />
|
|
<button className="icon-button" aria-label="Open menu"><Menu size={21} /></button>
|
|
</nav>
|
|
<section className="mobile-hero">
|
|
<div className="eyebrow"><Sparkles size={13} /> Email for humans + agents</div>
|
|
<h1>Your inbox,<br /><em>one step ahead.</em></h1>
|
|
<p>A focused home for every message, task, and AI agent you work with.</p>
|
|
<a className="button button-coral" href="/signup">Create your agmail <ArrowRight size={17} /></a>
|
|
<a className="mobile-login" href="/login">Already have an account? <strong>Log in</strong></a>
|
|
</section>
|
|
<section className="phone-preview" aria-label="Agmail mobile inbox preview">
|
|
<div className="phone-top"><span>9:41</span><span className="phone-pill" /><span>•••</span></div>
|
|
<header><div><small>Good morning</small><strong>Alex</strong></div><span className="avatar">AK</span></header>
|
|
<div className="mobile-summary">
|
|
<span className="agent-icon"><Bot size={18} /></span>
|
|
<div><strong>Your agent caught you up</strong><small>8 emails handled this morning</small></div>
|
|
<ArrowRight size={15} />
|
|
</div>
|
|
<div className="mobile-inbox-title"><h3>Priority inbox</h3><span>4 new</span></div>
|
|
<article className="mobile-mail"><span className="sender-avatar coral">R</span><div><strong>Research agent</strong><p>Market brief is ready</p></div><time>10:42</time></article>
|
|
<article className="mobile-mail"><span className="sender-avatar blue">M</span><div><strong>Maya Chen</strong><p>Re: Product direction</p></div><time>9:18</time></article>
|
|
<div className="mobile-tabbar"><span className="active"><Inbox size={19} /></span><button><span>+</span></button><span><Send size={19} /></span></div>
|
|
</section>
|
|
<section className="mobile-benefits"><span><Check size={15} /> Free to start</span><span><Check size={15} /> Private by design</span></section>
|
|
</main>
|
|
);
|
|
}
|