82 lines
4.1 KiB
HTML
82 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Tomato — focused work timer</title>
|
|
<style>
|
|
:root {
|
|
--bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
|
|
--accent: #c96442; --surface: #ffffff;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 -apple-system, system-ui, sans-serif; }
|
|
header, main, footer { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
|
|
header { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }
|
|
.logo { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
|
|
nav a { color: var(--fg); text-decoration: none; margin-left: 24px; font-size: 14px; }
|
|
nav a:hover { color: var(--accent); }
|
|
.hero { padding: 96px 0 80px; text-align: center; }
|
|
.hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 18ch; margin-inline: auto; }
|
|
.hero p { color: var(--muted); font-size: 19px; max-width: 52ch; margin: 0 auto 32px; }
|
|
.cta { display: inline-flex; gap: 12px; }
|
|
button { font: inherit; cursor: pointer; padding: 12px 22px; border-radius: 8px; }
|
|
.btn-primary { background: var(--accent); color: white; border: 1px solid var(--accent); font-weight: 500; }
|
|
.btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); }
|
|
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 56px 0 96px; }
|
|
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }
|
|
.feature { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
|
|
.feature .icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); margin-bottom: 16px; opacity: 0.12; }
|
|
.feature h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
|
|
.feature p { margin: 0; color: var(--muted); font-size: 14px; }
|
|
.closing { padding: 64px 0 96px; text-align: center; border-top: 1px solid var(--border); }
|
|
.closing h2 { font-size: 32px; margin: 0 0 12px; letter-spacing: -0.01em; }
|
|
.closing p { color: var(--muted); margin: 0 0 28px; }
|
|
footer { padding: 32px; color: var(--muted); font-size: 13px; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header data-od-id="topnav">
|
|
<span class="logo">🍅 Tomato</span>
|
|
<nav>
|
|
<a href="#features">Features</a>
|
|
<a href="#pricing">Pricing</a>
|
|
<a href="#login">Sign in</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="hero" data-od-id="hero">
|
|
<h1>Twenty-five minutes at a time.</h1>
|
|
<p>The pomodoro timer that actually keeps your hands off Slack. Block notifications, log every cycle, ship more before lunch.</p>
|
|
<div class="cta">
|
|
<button class="btn-primary">Start a session</button>
|
|
<button class="btn-secondary">See how it works</button>
|
|
</div>
|
|
</section>
|
|
<section class="features" id="features">
|
|
<div class="feature" data-od-id="feature-block">
|
|
<div class="icon"></div>
|
|
<h3>Block on, not off</h3>
|
|
<p>Slack and email go quiet for 25 minutes. They come back loud at the break, with a digest.</p>
|
|
</div>
|
|
<div class="feature" data-od-id="feature-stats">
|
|
<div class="icon"></div>
|
|
<h3>Stats that don't lie</h3>
|
|
<p>Weekly review tells you which days you actually shipped versus which you only seemed busy.</p>
|
|
</div>
|
|
<div class="feature" data-od-id="feature-team">
|
|
<div class="icon"></div>
|
|
<h3>Team-friendly silences</h3>
|
|
<p>Your status auto-updates so teammates know when to ask, when to wait, and when you're done.</p>
|
|
</div>
|
|
</section>
|
|
<section class="closing" data-od-id="closing">
|
|
<h2>Stop measuring meetings. Start measuring focus.</h2>
|
|
<p>Free for solo. $4/mo per teammate after that.</p>
|
|
<button class="btn-primary">Try Tomato free</button>
|
|
</section>
|
|
</main>
|
|
<footer>© Tomato Labs · Made for people who'd rather be making.</footer>
|
|
</body>
|
|
</html>
|