first commit

frontend/src/components/MobileLanding.jsx

@@ -0,0 +1,34 @@
+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>
+  );
+}