65 lines
4.4 KiB
JavaScript
65 lines
4.4 KiB
JavaScript
import {
|
|
ArrowRight, Bot, Check, ChevronDown, Clock3, Inbox, Menu,
|
|
Paperclip, Search, Send, ShieldCheck, Sparkles,
|
|
} from "lucide-react";
|
|
import Brand from "./Brand";
|
|
|
|
const mail = [
|
|
{ sender: "Research agent", subject: "Market brief is ready", time: "10:42", color: "coral" },
|
|
{ sender: "Maya Chen", subject: "Re: Product direction", time: "9:18", color: "blue" },
|
|
{ sender: "Calendar", subject: "Design review in 30 minutes", time: "8:30", color: "gold" },
|
|
];
|
|
|
|
export default function WebLanding() {
|
|
return (
|
|
<main className="landing">
|
|
<nav className="nav shell">
|
|
<Brand />
|
|
<div className="nav-links"><a href="#product">Product</a><a href="#security">Security</a><a href="#about">About</a></div>
|
|
<div className="nav-actions"><a className="button button-quiet" href="/login">Log in</a><a className="button button-dark" href="/signup">Create account <ArrowRight size={15} /></a></div>
|
|
</nav>
|
|
<section className="hero shell">
|
|
<div className="hero-copy">
|
|
<div className="eyebrow"><Sparkles size={14} /> Built for you and your agents</div>
|
|
<h1>Email that works<br /><em>at your speed.</em></h1>
|
|
<p>A calm, intelligent inbox where you and your AI agents can send, receive, organize, and get work done.</p>
|
|
<div className="hero-actions"><a className="button button-coral" href="/signup">Get your @agmail <ArrowRight size={17} /></a><a className="button button-outline" href="#product">See how it works</a></div>
|
|
<div className="trust-line"><span><Check size={13} /> Free to start</span><span><Check size={13} /> No card required</span></div>
|
|
</div>
|
|
<div className="product-stage" aria-label="Agmail inbox preview">
|
|
<div className="orb orb-one" /><div className="orb orb-two" />
|
|
<div className="inbox-window">
|
|
<aside className="inbox-sidebar">
|
|
<div className="mini-brand"><Brand compact /></div>
|
|
<button className="compose"><span>+</span></button>
|
|
<div className="side-icons"><span className="active"><Inbox size={18} /></span><span><Send size={18} /></span><span><Clock3 size={18} /></span></div>
|
|
<div className="avatar">AK</div>
|
|
</aside>
|
|
<div className="mail-panel">
|
|
<header className="mail-toolbar"><div><small>Good morning,</small><strong>Alex</strong></div><div className="toolbar-actions"><Search size={17} /><Menu size={17} /></div></header>
|
|
<div className="inbox-heading"><div><h3>Inbox</h3><span>12</span></div><button>Priority <ChevronDown size={13} /></button></div>
|
|
<div className="agent-summary"><div className="agent-icon"><Bot size={19} /></div><div><strong>Your agent handled 8 emails</strong><p>3 replies drafted · 2 tasks completed</p></div><ArrowRight size={16} /></div>
|
|
<div className="mail-list">
|
|
{mail.map((item, index) => (
|
|
<article className={index === 0 ? "mail-item selected" : "mail-item"} key={item.sender}>
|
|
<span className={`sender-avatar ${item.color}`}>{item.sender[0]}</span><div><strong>{item.sender}</strong><p>{item.subject}</p></div><time>{item.time}</time>
|
|
</article>
|
|
))}
|
|
</div>
|
|
<div className="quick-reply"><Paperclip size={16} /><span>Ask your agent to draft a reply…</span><button><ArrowRight size={15} /></button></div>
|
|
</div>
|
|
</div>
|
|
<div className="floating-note"><span><Check size={14} /></span><div><strong>Follow-up sent</strong><small>Handled by your agent</small></div></div>
|
|
</div>
|
|
</section>
|
|
<section className="feature-strip shell" id="product">
|
|
<div className="feature-intro"><span>One inbox. Less noise.</span><h2>Made for the way work is changing.</h2></div>
|
|
<div className="feature-grid">
|
|
<article><span className="feature-icon peach"><Bot size={21} /></span><h3>Agent-ready</h3><p>Give every agent a secure address and clear permissions.</p></article>
|
|
<article><span className="feature-icon cyan"><Sparkles size={21} /></span><h3>Quietly intelligent</h3><p>Summaries, sorting, and replies—without the clutter.</p></article>
|
|
<article id="security"><span className="feature-icon violet"><ShieldCheck size={21} /></span><h3>Private by design</h3><p>Your conversations stay encrypted and in your control.</p></article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|