1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Matcha - Terminal Email Client</title>
7 <meta
8 name="description"
9 content="A beautiful, keyboard-driven terminal email client written in Go. Manage your inbox without ever leaving the command line."
10 />
11 <link rel="stylesheet" href="style.css" />
12 <link rel="preconnect" href="https://fonts.googleapis.com" />
13 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14 <link rel="icon" type="image/png" href="assets/favicon.ico" />
15 <link
16 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
17 rel="stylesheet"
18 />
19 <link rel="me" href="https://fosstodon.org/@floatpane" />
20 </head>
21 <body>
22 <style>
23 /* Reset */
24 *,
25 *::before,
26 *::after {
27 box-sizing: border-box;
28 margin: 0;
29 padding: 0;
30 }
31
32 :root {
33 --bg: #09090b;
34 --bg-subtle: #0f0f12;
35 --bg-card: #131316;
36 --bg-elevated: #1a1a1f;
37 --bg-hover: #222228;
38
39 --text: #fafafa;
40 --text-secondary: #a1a1aa;
41 --text-muted: #52525b;
42
43 --green: #22c55e;
44 --green-dim: #16a34a;
45 --green-glow: rgba(34, 197, 94, 0.15);
46 --teal: #14b8a6;
47
48 --border: rgba(255, 255, 255, 0.06);
49 --border-hover: rgba(255, 255, 255, 0.12);
50
51 --radius: 12px;
52 --radius-sm: 8px;
53
54 --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
55 --mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;
56 }
57
58 html {
59 scroll-behavior: smooth;
60 }
61
62 body {
63 font-family: var(--font);
64 background: var(--bg);
65 color: var(--text);
66 line-height: 1.6;
67 overflow-x: hidden;
68 -webkit-font-smoothing: antialiased;
69 }
70
71 /* Subtle noise texture */
72 .noise {
73 position: fixed;
74 inset: 0;
75 z-index: -1;
76 opacity: 0.03;
77 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
78 pointer-events: none;
79 }
80
81 /* Ambient glow orbs */
82 .gradient-orb {
83 position: fixed;
84 border-radius: 50%;
85 filter: blur(120px);
86 pointer-events: none;
87 z-index: -1;
88 }
89
90 .orb-1 {
91 width: 600px;
92 height: 600px;
93 top: -200px;
94 left: 50%;
95 transform: translateX(-50%);
96 background: radial-gradient(circle, var(--green-glow), transparent 70%);
97 }
98
99 .orb-2 {
100 width: 400px;
101 height: 400px;
102 bottom: -100px;
103 right: -100px;
104 background: radial-gradient(circle, rgba(20, 184, 166, 0.08), transparent 70%);
105 }
106
107 /* Header */
108 header {
109 position: fixed;
110 top: 0;
111 left: 0;
112 right: 0;
113 z-index: 100;
114 background: rgba(9, 9, 11, 0.7);
115 backdrop-filter: blur(24px);
116 -webkit-backdrop-filter: blur(24px);
117 border-bottom: 1px solid var(--border);
118 }
119
120 nav {
121 max-width: 1100px;
122 margin: 0 auto;
123 padding: 0.875rem 1.5rem;
124 display: flex;
125 justify-content: space-between;
126 align-items: center;
127 }
128
129 .logo {
130 display: flex;
131 align-items: center;
132 gap: 0.5rem;
133 text-decoration: none;
134 font-weight: 700;
135 font-size: 1.15rem;
136 color: var(--text);
137 transition: opacity 0.2s;
138 }
139
140 .logo:hover {
141 opacity: 0.8;
142 }
143
144 .nav-links {
145 display: flex;
146 align-items: center;
147 gap: 1.75rem;
148 }
149
150 .nav-links a {
151 color: var(--text-secondary);
152 text-decoration: none;
153 font-size: 0.875rem;
154 font-weight: 500;
155 transition: color 0.2s;
156 }
157
158 .nav-links a:hover {
159 color: var(--text);
160 }
161
162 .nav-btn {
163 display: inline-flex !important;
164 align-items: center;
165 gap: 0.4rem;
166 padding: 0.45rem 0.9rem;
167 background: var(--bg-elevated);
168 border: 1px solid var(--border-hover);
169 border-radius: var(--radius-sm);
170 transition: all 0.2s;
171 }
172
173 .nav-btn:hover {
174 background: var(--bg-hover);
175 border-color: rgba(255, 255, 255, 0.18);
176 }
177
178 /* Main */
179 main {
180 max-width: 1100px;
181 margin: 0 auto;
182 padding: 0 1.5rem;
183 }
184
185 /* Hero */
186 .hero {
187 min-height: 100vh;
188 display: flex;
189 flex-direction: column;
190 align-items: center;
191 text-align: center;
192 padding-top: 8rem;
193 padding-bottom: 4rem;
194 }
195
196 .hero-badge {
197 display: inline-flex;
198 align-items: center;
199 gap: 0.5rem;
200 padding: 0.4rem 1rem;
201 font-size: 0.8rem;
202 font-weight: 500;
203 color: var(--green);
204 background: rgba(34, 197, 94, 0.08);
205 border: 1px solid rgba(34, 197, 94, 0.2);
206 border-radius: 100px;
207 margin-bottom: 2rem;
208 animation: fadeIn 0.5s ease-out 0.1s both;
209 }
210
211 .hero-badge-dot {
212 width: 6px;
213 height: 6px;
214 background: var(--green);
215 border-radius: 50%;
216 animation: pulse 2s ease-in-out infinite;
217 }
218
219 @keyframes pulse {
220 0%, 100% { opacity: 1; }
221 50% { opacity: 0.4; }
222 }
223
224 .hero-title {
225 font-size: clamp(2.75rem, 7vw, 4.5rem);
226 font-weight: 800;
227 line-height: 1.1;
228 letter-spacing: -0.03em;
229 margin-bottom: 1.5rem;
230 animation: fadeIn 0.5s ease-out 0.2s both;
231 }
232
233 .gradient-text {
234 background: linear-gradient(135deg, var(--green), var(--teal));
235 -webkit-background-clip: text;
236 -webkit-text-fill-color: transparent;
237 background-clip: text;
238 }
239
240 .text-muted {
241 color: var(--text-muted);
242 }
243
244 .hero-subtitle {
245 font-size: 1.15rem;
246 color: var(--text-secondary);
247 max-width: 540px;
248 line-height: 1.75;
249 margin-bottom: 2.5rem;
250 animation: fadeIn 0.5s ease-out 0.3s both;
251 }
252
253 .hero-actions {
254 display: flex;
255 flex-wrap: wrap;
256 justify-content: center;
257 gap: 0.75rem;
258 margin-bottom: 4rem;
259 animation: fadeIn 0.5s ease-out 0.4s both;
260 }
261
262 /* Buttons */
263 .btn {
264 display: inline-flex;
265 align-items: center;
266 gap: 0.5rem;
267 padding: 0.7rem 1.4rem;
268 font-size: 0.9rem;
269 font-weight: 600;
270 font-family: var(--font);
271 text-decoration: none;
272 border-radius: var(--radius-sm);
273 transition: all 0.2s;
274 cursor: pointer;
275 border: none;
276 white-space: nowrap;
277 }
278
279 .btn-lg {
280 padding: 0.85rem 1.75rem;
281 font-size: 0.95rem;
282 }
283
284 .btn-primary {
285 background: var(--green);
286 color: #000;
287 }
288
289 .btn-primary:hover {
290 background: var(--green-dim);
291 transform: translateY(-1px);
292 box-shadow: 0 0 40px var(--green-glow);
293 }
294
295 .btn-ghost {
296 background: transparent;
297 color: var(--text-secondary);
298 border: 1px solid var(--border-hover);
299 }
300
301 .btn-ghost:hover {
302 color: var(--text);
303 background: var(--bg-elevated);
304 border-color: rgba(255, 255, 255, 0.18);
305 }
306
307 /* Hero Terminal */
308 .hero-terminal {
309 width: 100%;
310 max-width: 680px;
311 border-radius: var(--radius);
312 border: 1px solid var(--border-hover);
313 background: var(--bg-subtle);
314 overflow: hidden;
315 box-shadow:
316 0 0 0 1px rgba(255, 255, 255, 0.03),
317 0 20px 50px rgba(0, 0, 0, 0.5),
318 0 0 80px var(--green-glow);
319 animation: fadeUp 0.6s ease-out 0.5s both;
320 }
321
322 .terminal-chrome {
323 display: flex;
324 align-items: center;
325 justify-content: space-between;
326 padding: 0.7rem 1rem;
327 background: var(--bg-card);
328 border-bottom: 1px solid var(--border);
329 }
330
331 .terminal-dots {
332 display: flex;
333 gap: 6px;
334 }
335
336 .terminal-dots span {
337 width: 10px;
338 height: 10px;
339 border-radius: 50%;
340 background: var(--bg-hover);
341 }
342
343 .terminal-dots span:nth-child(1) { background: #ff5f57; }
344 .terminal-dots span:nth-child(2) { background: #ffbd2e; }
345 .terminal-dots span:nth-child(3) { background: #28ca41; }
346
347 .terminal-title {
348 font-family: var(--mono);
349 font-size: 0.75rem;
350 color: var(--text-muted);
351 }
352
353 .terminal-body {
354 padding: 1.25rem 1.5rem;
355 font-family: var(--mono);
356 font-size: 0.85rem;
357 }
358
359 .terminal-line {
360 display: flex;
361 gap: 0.5rem;
362 align-items: center;
363 margin-bottom: 1rem;
364 }
365
366 .t-prompt { color: var(--green); }
367 .t-cmd { color: var(--text-muted); }
368 .t-text { color: var(--text); }
369
370 .cursor {
371 color: var(--green);
372 animation: blink 1s step-end infinite;
373 }
374
375 @keyframes blink {
376 0%, 100% { opacity: 1; }
377 50% { opacity: 0; }
378 }
379
380 .terminal-content {
381 opacity: 1;
382 }
383
384 .ascii-logo {
385 color: var(--green);
386 font-size: 0.7rem;
387 line-height: 1.2;
388 margin: 0 0 1rem 0;
389 white-space: pre;
390 }
391
392 .tui-prompt {
393 color: var(--text-secondary);
394 font-size: 0.85rem;
395 margin-bottom: 1rem;
396 }
397
398 .tui-menu {
399 margin-bottom: 1.25rem;
400 padding-left: 0.25rem;
401 }
402
403 .tui-item {
404 line-height: 1.9;
405 font-size: 0.85rem;
406 color: var(--text-secondary);
407 }
408
409 .tui-item.active {
410 color: var(--green);
411 }
412
413 .tui-arrow {
414 color: var(--green);
415 font-weight: 700;
416 margin-right: 0.25rem;
417 }
418
419 .tui-space {
420 display: inline-block;
421 width: 0.85rem;
422 margin-right: 0.25rem;
423 }
424
425 .tui-hint {
426 color: var(--text-muted);
427 font-size: 0.75rem;
428 }
429
430 .tui-key {
431 color: var(--text-secondary);
432 }
433
434 /* Logos strip */
435 .logos-strip {
436 padding: 3rem 0;
437 border-top: 1px solid var(--border);
438 border-bottom: 1px solid var(--border);
439 margin-bottom: 2rem;
440 }
441
442 .strip-items {
443 display: flex;
444 justify-content: center;
445 align-items: center;
446 gap: 2rem;
447 flex-wrap: wrap;
448 }
449
450 .strip-item {
451 display: flex;
452 align-items: center;
453 gap: 0.5rem;
454 font-size: 0.875rem;
455 font-weight: 500;
456 color: var(--text-secondary);
457 }
458
459 .strip-item svg {
460 color: var(--text-muted);
461 }
462
463 .strip-tag {
464 display: inline-flex;
465 align-items: center;
466 justify-content: center;
467 padding: 0.15rem 0.5rem;
468 font-size: 0.7rem;
469 font-weight: 700;
470 font-family: var(--mono);
471 color: var(--text-muted);
472 border: 1px solid var(--border-hover);
473 border-radius: 4px;
474 }
475
476 .strip-divider {
477 width: 1px;
478 height: 20px;
479 background: var(--border-hover);
480 }
481
482 /* Sections */
483 .section-header {
484 text-align: center;
485 margin-bottom: 3.5rem;
486 }
487
488 .section-label {
489 display: inline-block;
490 font-size: 0.8rem;
491 font-weight: 600;
492 text-transform: uppercase;
493 letter-spacing: 0.08em;
494 color: var(--green);
495 margin-bottom: 0.75rem;
496 }
497
498 .section-title {
499 font-size: clamp(1.75rem, 4vw, 2.5rem);
500 font-weight: 700;
501 line-height: 1.2;
502 letter-spacing: -0.02em;
503 }
504
505 /* Features */
506 .features {
507 padding: 5rem 0;
508 }
509
510 .features-grid {
511 display: grid;
512 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
513 gap: 1rem;
514 }
515
516 .feature-card {
517 background: var(--bg-card);
518 border: 1px solid var(--border);
519 border-radius: var(--radius);
520 padding: 1.75rem;
521 transition: all 0.3s ease;
522 opacity: 0;
523 transform: translateY(12px);
524 }
525
526 .feature-card.visible {
527 opacity: 1;
528 transform: translateY(0);
529 }
530
531 .feature-card:hover {
532 border-color: var(--border-hover);
533 background: var(--bg-elevated);
534 }
535
536 .feature-highlight {
537 grid-column: 1 / -1;
538 display: grid;
539 grid-template-columns: auto 1fr;
540 grid-template-rows: auto auto;
541 column-gap: 1.25rem;
542 background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(20, 184, 166, 0.02));
543 border-color: rgba(34, 197, 94, 0.15);
544 }
545
546 .feature-highlight .feature-icon-wrap {
547 grid-row: 1 / 3;
548 }
549
550 .feature-highlight:hover {
551 border-color: rgba(34, 197, 94, 0.25);
552 }
553
554 .feature-icon-wrap {
555 display: flex;
556 align-items: center;
557 justify-content: center;
558 width: 44px;
559 height: 44px;
560 background: rgba(34, 197, 94, 0.08);
561 border: 1px solid rgba(34, 197, 94, 0.15);
562 border-radius: 10px;
563 color: var(--green);
564 margin-bottom: 1rem;
565 flex-shrink: 0;
566 }
567
568 .feature-highlight .feature-icon-wrap {
569 margin-bottom: 0;
570 }
571
572 .feature-card h3 {
573 font-size: 1.05rem;
574 font-weight: 600;
575 margin-bottom: 0.5rem;
576 color: var(--text);
577 }
578
579 .feature-card p {
580 color: var(--text-secondary);
581 font-size: 0.9rem;
582 line-height: 1.65;
583 }
584
585 /* Installation */
586 .installation {
587 padding: 5rem 0;
588 }
589
590 .install-grid {
591 display: grid;
592 grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
593 gap: 1.25rem;
594 max-width: 820px;
595 margin: 0 auto;
596 }
597
598 .install-card {
599 background: var(--bg-card);
600 border: 1px solid var(--border);
601 border-radius: var(--radius);
602 padding: 1.75rem;
603 opacity: 0;
604 transform: translateY(12px);
605 transition: all 0.3s ease;
606 }
607
608 .install-card.visible {
609 opacity: 1;
610 transform: translateY(0);
611 }
612
613 .primary-install {
614 border-color: rgba(34, 197, 94, 0.2);
615 background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), transparent);
616 }
617
618 .install-card-header {
619 display: flex;
620 align-items: center;
621 gap: 0.75rem;
622 margin-bottom: 1.25rem;
623 }
624
625 .install-card h3 {
626 font-size: 1.1rem;
627 font-weight: 600;
628 margin-bottom: 1.25rem;
629 }
630
631 .install-card-header h3 {
632 margin-bottom: 0;
633 }
634
635 .recommended-badge {
636 font-size: 0.7rem;
637 font-weight: 600;
638 text-transform: uppercase;
639 letter-spacing: 0.05em;
640 padding: 0.2rem 0.6rem;
641 color: var(--green);
642 background: rgba(34, 197, 94, 0.1);
643 border: 1px solid rgba(34, 197, 94, 0.2);
644 border-radius: 100px;
645 }
646
647 .code-block {
648 background: var(--bg);
649 border: 1px solid var(--border);
650 border-radius: var(--radius-sm);
651 overflow: hidden;
652 }
653
654 .code-header {
655 display: flex;
656 justify-content: space-between;
657 align-items: center;
658 padding: 0.6rem 0.9rem;
659 border-bottom: 1px solid var(--border);
660 font-size: 0.75rem;
661 color: var(--text-muted);
662 }
663
664 .copy-btn {
665 display: inline-flex;
666 align-items: center;
667 gap: 0.35rem;
668 padding: 0.25rem 0.6rem;
669 font-size: 0.72rem;
670 font-weight: 500;
671 font-family: var(--font);
672 color: var(--text-muted);
673 background: transparent;
674 border: 1px solid var(--border);
675 border-radius: 6px;
676 cursor: pointer;
677 transition: all 0.15s;
678 }
679
680 .copy-btn:hover {
681 color: var(--text);
682 background: var(--bg-elevated);
683 border-color: var(--border-hover);
684 }
685
686 .copy-btn.copied {
687 color: var(--green);
688 border-color: rgba(34, 197, 94, 0.3);
689 }
690
691 .code-body {
692 padding: 0.85rem 1rem;
693 font-family: var(--mono);
694 font-size: 0.82rem;
695 }
696
697 .code-line {
698 display: flex;
699 gap: 0.6rem;
700 line-height: 2;
701 }
702
703 .line-prompt {
704 color: var(--text-muted);
705 user-select: none;
706 }
707
708 .code-text {
709 color: var(--text);
710 }
711
712 .install-docs-hint {
713 text-align: center;
714 margin-top: 2rem;
715 font-size: 0.9rem;
716 color: var(--text-muted);
717 }
718
719 .install-docs-hint a {
720 color: var(--green);
721 text-decoration: none;
722 }
723
724 .install-docs-hint a:hover {
725 text-decoration: underline;
726 }
727
728 /* CTA Section */
729 .cta-section {
730 padding: 5rem 0;
731 }
732
733 .cta-card {
734 text-align: center;
735 padding: 4rem 2rem;
736 background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(20, 184, 166, 0.03));
737 border: 1px solid rgba(34, 197, 94, 0.12);
738 border-radius: 20px;
739 opacity: 0;
740 transform: translateY(12px);
741 transition: all 0.3s ease;
742 }
743
744 .cta-card.visible {
745 opacity: 1;
746 transform: translateY(0);
747 }
748
749 .cta-card h2 {
750 font-size: clamp(1.5rem, 3.5vw, 2.25rem);
751 font-weight: 700;
752 line-height: 1.2;
753 letter-spacing: -0.02em;
754 margin-bottom: 1rem;
755 }
756
757 .cta-card p {
758 color: var(--text-secondary);
759 font-size: 1.05rem;
760 max-width: 520px;
761 margin: 0 auto 2rem;
762 line-height: 1.7;
763 }
764
765 .cta-actions {
766 display: flex;
767 justify-content: center;
768 flex-wrap: wrap;
769 gap: 0.75rem;
770 margin-bottom: 2rem;
771 }
772
773 .cta-links {
774 display: flex;
775 justify-content: center;
776 align-items: center;
777 gap: 0.75rem;
778 font-size: 0.85rem;
779 }
780
781 .cta-links a {
782 color: var(--text-muted);
783 text-decoration: none;
784 transition: color 0.2s;
785 }
786
787 .cta-links a:hover {
788 color: var(--text-secondary);
789 }
790
791 .cta-divider {
792 color: var(--text-muted);
793 }
794
795 /* Footer */
796 footer {
797 border-top: 1px solid var(--border);
798 padding: 2rem 1.5rem;
799 margin-top: 2rem;
800 }
801
802 .footer-content {
803 max-width: 1100px;
804 margin: 0 auto;
805 display: flex;
806 justify-content: space-between;
807 align-items: center;
808 }
809
810 .footer-left {
811 display: flex;
812 align-items: center;
813 gap: 1.5rem;
814 }
815
816 .footer-brand {
817 display: flex;
818 align-items: center;
819 gap: 0.4rem;
820 font-weight: 600;
821 font-size: 0.95rem;
822 }
823
824 .footer-copyright {
825 color: var(--text-muted);
826 font-size: 0.8rem;
827 }
828
829 .footer-right {
830 display: flex;
831 gap: 1.5rem;
832 }
833
834 .footer-right a {
835 color: var(--text-muted);
836 text-decoration: none;
837 font-size: 0.85rem;
838 transition: color 0.2s;
839 }
840
841 .footer-right a:hover {
842 color: var(--text-secondary);
843 }
844
845 /* Animations */
846 @keyframes fadeIn {
847 from { opacity: 0; }
848 to { opacity: 1; }
849 }
850
851 @keyframes fadeUp {
852 from {
853 opacity: 0;
854 transform: translateY(20px);
855 }
856 to {
857 opacity: 1;
858 transform: translateY(0);
859 }
860 }
861
862 /* Responsive */
863 @media (max-width: 768px) {
864 nav {
865 padding: 0.75rem 1rem;
866 }
867
868 .nav-links {
869 gap: 1rem;
870 }
871
872 .nav-links a:not(.nav-btn) {
873 display: none;
874 }
875
876 .hero {
877 padding-top: 7rem;
878 }
879
880 .hero-terminal {
881 max-width: 100%;
882 }
883
884 .features-grid {
885 grid-template-columns: 1fr;
886 }
887
888 .feature-highlight {
889 grid-template-columns: 1fr;
890 grid-template-rows: auto;
891 }
892
893 .feature-highlight .feature-icon-wrap {
894 grid-row: auto;
895 margin-bottom: 1rem;
896 }
897
898 .install-grid {
899 grid-template-columns: 1fr;
900 }
901
902 .strip-divider {
903 display: none;
904 }
905
906 .strip-items {
907 gap: 1.25rem;
908 }
909
910 .footer-content {
911 flex-direction: column;
912 gap: 1rem;
913 text-align: center;
914 }
915
916 .footer-left {
917 flex-direction: column;
918 gap: 0.5rem;
919 }
920 }
921
922 @media (max-width: 480px) {
923 .hero-actions {
924 flex-direction: column;
925 width: 100%;
926 }
927
928 .btn {
929 width: 100%;
930 justify-content: center;
931 }
932
933 .cta-actions {
934 flex-direction: column;
935 }
936
937 .cta-card {
938 padding: 2.5rem 1.5rem;
939 }
940 }
941 </style>
942 <div class="noise"></div>
943 <div class="gradient-orb orb-1"></div>
944 <div class="gradient-orb orb-2"></div>
945
946 <header>
947 <nav>
948 <a href="/" class="logo">
949 <img
950 src="assets/logo-transparent.png"
951 alt="Matcha"
952 class="logo-icon"
953 width="28"
954 height="28"
955 />
956 <span class="logo-text">Matcha</span>
957 </a>
958 <div class="nav-links">
959 <a href="#features">Features</a>
960 <a href="#installation">Install</a>
961 <a href="https://docs.matcha.floatpane.com" target="_blank"
962 >Docs</a
963 >
964 <a
965 href="https://github.com/floatpane/matcha"
966 target="_blank"
967 class="nav-btn"
968 >
969 <svg
970 height="18"
971 width="18"
972 viewBox="0 0 16 16"
973 fill="currentColor"
974 >
975 <path
976 d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
977 />
978 </svg>
979 Star on GitHub
980 </a>
981 </div>
982 </nav>
983 </header>
984
985 <main>
986 <section class="hero">
987 <div class="hero-badge">
988 <span class="hero-badge-dot"></span>
989 Open Source · MIT Licensed
990 </div>
991
992 <h1 class="hero-title">
993 Email belongs in<br />
994 <span class="gradient-text">your terminal.</span>
995 </h1>
996
997 <p class="hero-subtitle">
998 Matcha is a fast, keyboard-driven email client that lives in
999 your terminal. Built with Go and designed for developers who
1000 never want to leave the command line.
1001 </p>
1002
1003 <div class="hero-actions">
1004 <a href="#installation" class="btn btn-primary">
1005 Get Started
1006 <svg
1007 width="16"
1008 height="16"
1009 viewBox="0 0 24 24"
1010 fill="none"
1011 stroke="currentColor"
1012 stroke-width="2.5"
1013 stroke-linecap="round"
1014 stroke-linejoin="round"
1015 >
1016 <path d="M5 12h14" />
1017 <path d="m12 5 7 7-7 7" />
1018 </svg>
1019 </a>
1020 <a
1021 href="https://github.com/floatpane/matcha"
1022 target="_blank"
1023 class="btn btn-ghost"
1024 >
1025 <svg
1026 height="18"
1027 width="18"
1028 viewBox="0 0 16 16"
1029 fill="currentColor"
1030 >
1031 <path
1032 d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25z"
1033 />
1034 </svg>
1035 Star on GitHub
1036 </a>
1037 <a
1038 href="https://docs.matcha.floatpane.com"
1039 target="_blank"
1040 class="btn btn-ghost"
1041 >
1042 <svg
1043 width="18"
1044 height="18"
1045 viewBox="0 0 24 24"
1046 fill="none"
1047 stroke="currentColor"
1048 stroke-width="2"
1049 stroke-linecap="round"
1050 stroke-linejoin="round"
1051 >
1052 <path
1053 d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"
1054 />
1055 <path
1056 d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
1057 />
1058 </svg>
1059 Documentation
1060 </a>
1061 </div>
1062
1063 <div class="hero-terminal">
1064 <div class="terminal-chrome">
1065 <div class="terminal-dots">
1066 <span></span><span></span><span></span>
1067 </div>
1068 <span class="terminal-title">matcha</span>
1069 <div class="terminal-dots" style="visibility: hidden">
1070 <span></span><span></span><span></span>
1071 </div>
1072 </div>
1073 <div class="terminal-body">
1074 <div class="terminal-line">
1075 <span class="t-prompt">~</span>
1076 <span class="t-cmd">$</span>
1077 <span class="t-text typing-anim">matcha</span>
1078 <span class="cursor">|</span>
1079 </div>
1080 <div
1081 class="terminal-content"
1082 id="terminal-content"
1083 ></div>
1084 </div>
1085 </div>
1086 </section>
1087
1088 <section class="logos-strip">
1089 <div class="strip-items">
1090 <div class="strip-item">
1091 <svg
1092 width="18"
1093 height="18"
1094 viewBox="0 0 24 24"
1095 fill="none"
1096 stroke="currentColor"
1097 stroke-width="2"
1098 >
1099 <path
1100 d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
1101 />
1102 <polyline points="22,6 12,13 2,6" />
1103 </svg>
1104 Gmail
1105 </div>
1106 <div class="strip-divider"></div>
1107 <div class="strip-item">
1108 <svg
1109 width="18"
1110 height="18"
1111 viewBox="0 0 24 24"
1112 fill="none"
1113 stroke="currentColor"
1114 stroke-width="2"
1115 >
1116 <path
1117 d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"
1118 />
1119 </svg>
1120 iCloud
1121 </div>
1122 <div class="strip-divider"></div>
1123 <div class="strip-item">
1124 <svg
1125 width="18"
1126 height="18"
1127 viewBox="0 0 24 24"
1128 fill="none"
1129 stroke="currentColor"
1130 stroke-width="2"
1131 >
1132 <circle cx="12" cy="12" r="3" />
1133 <path
1134 d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
1135 />
1136 </svg>
1137 Custom IMAP
1138 </div>
1139 <div class="strip-divider"></div>
1140 <div class="strip-item">
1141 <span class="strip-tag">Go</span>
1142 Written in Go
1143 </div>
1144 <div class="strip-divider"></div>
1145 <div class="strip-item">
1146 <span class="strip-tag">MIT</span>
1147 Open Source
1148 </div>
1149 </div>
1150 </section>
1151
1152 <section class="features" id="features">
1153 <div class="section-header">
1154 <span class="section-label">Features</span>
1155 <h2 class="section-title">
1156 Everything you need.<br /><span class="text-muted"
1157 >Nothing you don't.</span
1158 >
1159 </h2>
1160 </div>
1161
1162 <div class="features-grid">
1163 <div class="feature-card feature-highlight">
1164 <div class="feature-icon-wrap">
1165 <svg
1166 width="24"
1167 height="24"
1168 viewBox="0 0 24 24"
1169 fill="none"
1170 stroke="currentColor"
1171 stroke-width="2"
1172 stroke-linecap="round"
1173 stroke-linejoin="round"
1174 >
1175 <rect
1176 x="2"
1177 y="4"
1178 width="20"
1179 height="16"
1180 rx="2"
1181 />
1182 <path
1183 d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
1184 />
1185 </svg>
1186 </div>
1187 <h3>Full Inbox Management</h3>
1188 <p>
1189 Read, compose, reply, and manage your emails
1190 entirely from the terminal. Beautiful formatting,
1191 attachment support, and lightning-fast navigation.
1192 </p>
1193 </div>
1194
1195 <div class="feature-card">
1196 <div class="feature-icon-wrap">
1197 <svg
1198 width="24"
1199 height="24"
1200 viewBox="0 0 24 24"
1201 fill="none"
1202 stroke="currentColor"
1203 stroke-width="2"
1204 stroke-linecap="round"
1205 stroke-linejoin="round"
1206 >
1207 <path d="M12 20h9" />
1208 <path
1209 d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"
1210 />
1211 </svg>
1212 </div>
1213 <h3>Compose & Send</h3>
1214 <p>
1215 Intuitive compose interface with tab-based field
1216 navigation. Write and send emails without touching a
1217 browser.
1218 </p>
1219 </div>
1220
1221 <div class="feature-card">
1222 <div class="feature-icon-wrap">
1223 <svg
1224 width="24"
1225 height="24"
1226 viewBox="0 0 24 24"
1227 fill="none"
1228 stroke="currentColor"
1229 stroke-width="2"
1230 stroke-linecap="round"
1231 stroke-linejoin="round"
1232 >
1233 <path
1234 d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
1235 />
1236 <circle cx="9" cy="7" r="4" />
1237 <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
1238 <path d="M16 3.13a4 4 0 0 1 0 7.75" />
1239 </svg>
1240 </div>
1241 <h3>Multiple Accounts</h3>
1242 <p>
1243 Manage all your email accounts in one place. Switch
1244 between them seamlessly.
1245 </p>
1246 </div>
1247
1248 <div class="feature-card">
1249 <div class="feature-icon-wrap">
1250 <svg
1251 width="24"
1252 height="24"
1253 viewBox="0 0 24 24"
1254 fill="none"
1255 stroke="currentColor"
1256 stroke-width="2"
1257 stroke-linecap="round"
1258 stroke-linejoin="round"
1259 >
1260 <path d="m18 16 4-4-4-4" />
1261 <path d="m6 8-4 4 4 4" />
1262 <path d="m14.5 4-5 16" />
1263 </svg>
1264 </div>
1265 <h3>Keyboard-First</h3>
1266 <p>
1267 Vim-inspired keybindings. Navigate, select, and
1268 manage everything without ever touching the mouse.
1269 </p>
1270 </div>
1271
1272 <div class="feature-card">
1273 <div class="feature-icon-wrap">
1274 <svg
1275 width="24"
1276 height="24"
1277 viewBox="0 0 24 24"
1278 fill="none"
1279 stroke="currentColor"
1280 stroke-width="2"
1281 stroke-linecap="round"
1282 stroke-linejoin="round"
1283 >
1284 <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
1285 </svg>
1286 </div>
1287 <h3>Blazing Fast</h3>
1288 <p>
1289 Local email caching means instant load times. No
1290 Electron, no bloat -- just pure terminal speed.
1291 </p>
1292 </div>
1293
1294 <div class="feature-card">
1295 <div class="feature-icon-wrap">
1296 <svg
1297 width="24"
1298 height="24"
1299 viewBox="0 0 24 24"
1300 fill="none"
1301 stroke="currentColor"
1302 stroke-width="2"
1303 stroke-linecap="round"
1304 stroke-linejoin="round"
1305 >
1306 <rect
1307 width="18"
1308 height="11"
1309 x="3"
1310 y="11"
1311 rx="2"
1312 ry="2"
1313 />
1314 <path d="M7 11V7a5 5 0 0 1 10 0v4" />
1315 </svg>
1316 </div>
1317 <h3>Private & Secure</h3>
1318 <p>
1319 Your credentials stay on your machine. No telemetry,
1320 no tracking, no cloud middleman.
1321 </p>
1322 </div>
1323
1324 <div class="feature-card">
1325 <div class="feature-icon-wrap">
1326 <svg
1327 width="24"
1328 height="24"
1329 viewBox="0 0 24 24"
1330 fill="none"
1331 stroke="currentColor"
1332 stroke-width="2"
1333 stroke-linecap="round"
1334 stroke-linejoin="round"
1335 >
1336 <path
1337 d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"
1338 />
1339 <circle cx="9" cy="7" r="4" />
1340 <line x1="19" x2="19" y1="8" y2="14" />
1341 <line x1="22" x2="16" y1="11" y2="11" />
1342 </svg>
1343 </div>
1344 <h3>Contacts</h3>
1345 <p>
1346 Save and manage contacts locally with auto-complete
1347 support when composing.
1348 </p>
1349 </div>
1350
1351 <div class="feature-card">
1352 <div class="feature-icon-wrap">
1353 <svg
1354 width="24"
1355 height="24"
1356 viewBox="0 0 24 24"
1357 fill="none"
1358 stroke="currentColor"
1359 stroke-width="2"
1360 stroke-linecap="round"
1361 stroke-linejoin="round"
1362 >
1363 <rect
1364 width="18"
1365 height="18"
1366 x="3"
1367 y="3"
1368 rx="2"
1369 />
1370 <path d="M3 9h18" />
1371 <path d="M9 21V9" />
1372 </svg>
1373 </div>
1374 <h3>Beautiful TUI</h3>
1375 <p>
1376 Built with Bubble Tea. A clean, modern interface
1377 that makes terminal email a pleasure.
1378 </p>
1379 </div>
1380 </div>
1381 </section>
1382
1383 <section class="installation" id="installation">
1384 <div class="section-header">
1385 <span class="section-label">Get Started</span>
1386 <h2 class="section-title">
1387 Up and running<br /><span class="text-muted"
1388 >in seconds.</span
1389 >
1390 </h2>
1391 </div>
1392
1393 <div class="install-grid">
1394 <div class="install-card primary-install">
1395 <div class="install-card-header">
1396 <h3>Homebrew</h3>
1397 <span class="recommended-badge">Recommended</span>
1398 </div>
1399 <div class="code-block">
1400 <div class="code-header">
1401 <span>Terminal</span>
1402 <button
1403 class="copy-btn"
1404 onclick="copyCode(this)"
1405 >
1406 <svg
1407 width="14"
1408 height="14"
1409 viewBox="0 0 24 24"
1410 fill="none"
1411 stroke="currentColor"
1412 stroke-width="2"
1413 stroke-linecap="round"
1414 stroke-linejoin="round"
1415 >
1416 <rect
1417 width="14"
1418 height="14"
1419 x="8"
1420 y="8"
1421 rx="2"
1422 ry="2"
1423 />
1424 <path
1425 d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
1426 />
1427 </svg>
1428 Copy
1429 </button>
1430 </div>
1431 <div class="code-body">
1432 <div class="code-line">
1433 <span class="line-prompt">$</span
1434 ><span class="code-text"
1435 >brew install
1436 floatpane/matcha/matcha</span
1437 >
1438 </div>
1439 <div class="code-line">
1440 <span class="line-prompt">$</span
1441 ><span class="code-text">matcha</span>
1442 </div>
1443 </div>
1444 </div>
1445 </div>
1446
1447 <div class="install-card">
1448 <h3>Build from Source</h3>
1449 <div class="code-block">
1450 <div class="code-header">
1451 <span>Terminal</span>
1452 <button
1453 class="copy-btn"
1454 onclick="copyCode(this)"
1455 >
1456 <svg
1457 width="14"
1458 height="14"
1459 viewBox="0 0 24 24"
1460 fill="none"
1461 stroke="currentColor"
1462 stroke-width="2"
1463 stroke-linecap="round"
1464 stroke-linejoin="round"
1465 >
1466 <rect
1467 width="14"
1468 height="14"
1469 x="8"
1470 y="8"
1471 rx="2"
1472 ry="2"
1473 />
1474 <path
1475 d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
1476 />
1477 </svg>
1478 Copy
1479 </button>
1480 </div>
1481 <div class="code-body">
1482 <div class="code-line">
1483 <span class="line-prompt">$</span
1484 ><span class="code-text"
1485 >git clone
1486 https://github.com/floatpane/matcha.git</span
1487 >
1488 </div>
1489 <div class="code-line">
1490 <span class="line-prompt">$</span
1491 ><span class="code-text"
1492 >cd matcha && make build</span
1493 >
1494 </div>
1495 <div class="code-line">
1496 <span class="line-prompt">$</span
1497 ><span class="code-text">matcha</span>
1498 </div>
1499 </div>
1500 </div>
1501 </div>
1502 </div>
1503
1504 <p class="install-docs-hint">
1505 Need help setting up? Check the
1506 <a href="https://docs.matcha.floatpane.com" target="_blank"
1507 >documentation</a
1508 >
1509 for detailed guides.
1510 </p>
1511 </section>
1512
1513 <section class="cta-section">
1514 <div class="cta-card">
1515 <h2>Ready to ditch the browser<br />for your email?</h2>
1516 <p>
1517 Join developers who manage their inbox from the
1518 terminal. Star the project to show your support and stay
1519 updated.
1520 </p>
1521 <div class="cta-actions">
1522 <a
1523 href="https://github.com/floatpane/matcha"
1524 target="_blank"
1525 class="btn btn-primary btn-lg"
1526 >
1527 <svg
1528 height="20"
1529 width="20"
1530 viewBox="0 0 16 16"
1531 fill="currentColor"
1532 >
1533 <path
1534 d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25z"
1535 />
1536 </svg>
1537 Star on GitHub
1538 </a>
1539 <a
1540 href="https://docs.matcha.floatpane.com"
1541 target="_blank"
1542 class="btn btn-ghost btn-lg"
1543 >
1544 Read the Docs
1545 </a>
1546 </div>
1547 <div class="cta-links">
1548 <a href="https://andrinoff.com/sponsor" target="_blank"
1549 >Support the developer</a
1550 >
1551 </div>
1552 </section>
1553 </main>
1554
1555 <footer>
1556 <div class="footer-content">
1557 <div class="footer-left">
1558 <div class="footer-brand">
1559 <img
1560 src="assets/logo-transparent.png"
1561 alt="Matcha"
1562 class="logo-icon"
1563 width="20"
1564 height="20"
1565 />
1566 <span>Matcha</span>
1567 </div>
1568 <p class="footer-copyright">
1569 © 2026 floatpane. MIT Licensed.
1570 </p>
1571 </div>
1572 <div class="footer-right">
1573 <a href="https://docs.matcha.floatpane.com" target="_blank"
1574 >Docs</a
1575 >
1576 <a
1577 href="https://github.com/floatpane/matcha"
1578 target="_blank"
1579 >GitHub</a
1580 >
1581 <a
1582 href="https://github.com/floatpane/matcha/blob/master/LICENSE"
1583 target="_blank"
1584 >License</a
1585 >
1586 </div>
1587 </div>
1588 </footer>
1589
1590 <script>
1591 function copyCode(btn) {
1592 const codeBlock = btn.closest(".code-block");
1593 const codeLines = codeBlock.querySelectorAll(".code-text");
1594 const text = Array.from(codeLines)
1595 .map((line) => line.textContent)
1596 .join("\n");
1597
1598 navigator.clipboard.writeText(text).then(() => {
1599 const originalHTML = btn.innerHTML;
1600 btn.innerHTML =
1601 '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
1602 btn.classList.add("copied");
1603 setTimeout(() => {
1604 btn.innerHTML = originalHTML;
1605 btn.classList.remove("copied");
1606 }, 2000);
1607 });
1608 }
1609
1610 document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
1611 anchor.addEventListener("click", function (e) {
1612 e.preventDefault();
1613 const target = document.querySelector(
1614 this.getAttribute("href"),
1615 );
1616 if (target) {
1617 target.scrollIntoView({
1618 behavior: "smooth",
1619 block: "start",
1620 });
1621 }
1622 });
1623 });
1624
1625 // Fade in elements on scroll
1626 const observer = new IntersectionObserver(
1627 (entries) => {
1628 entries.forEach((entry) => {
1629 if (entry.isIntersecting) {
1630 entry.target.classList.add("visible");
1631 }
1632 });
1633 },
1634 { threshold: 0.1 },
1635 );
1636
1637 document
1638 .querySelectorAll(".feature-card, .install-card, .cta-card")
1639 .forEach((el) => {
1640 observer.observe(el);
1641 });
1642 </script>
1643 </body>
1644</html>