|
1 | 1 | <div class="landing-hero"> |
2 | 2 | <div class="hero-content"> |
3 | | - <span class="version-badge">v0.6.0</span> |
| 3 | + <div class="hero-eyebrow"> |
| 4 | + <span class="version-badge">v1.0.0</span> |
| 5 | + <span class="eyebrow-text">Open Source</span> |
| 6 | + </div> |
4 | 7 | <h1 class="hero-title"> |
5 | | - Beautiful docs,<br> |
6 | | - <span class="gradient-text">zero config</span> |
| 8 | + Documentation that<br> |
| 9 | + developers actually love |
7 | 10 | </h1> |
8 | 11 | <p class="hero-subtitle"> |
9 | | - Lito is an open-source documentation generator that turns your Markdown into stunning, searchable documentation sites. |
| 12 | + Lito turns your Markdown into beautiful, searchable documentation sites. Zero config, blazing fast, fully customizable. |
10 | 13 | </p> |
11 | 14 | <div class="hero-buttons"> |
12 | 15 | <a href="/introduction" class="btn btn-primary"> |
13 | 16 | Get Started |
14 | | - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> |
| 17 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> |
15 | 18 | </a> |
16 | 19 | <a href="https://github.com/Lito-docs/cli" class="btn btn-secondary" target="_blank" rel="noopener"> |
17 | | - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> |
18 | | - GitHub |
| 20 | + <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> |
| 21 | + View on GitHub |
19 | 22 | </a> |
20 | 23 | </div> |
| 24 | + <div class="hero-install"> |
| 25 | + <div class="install-code"> |
| 26 | + <span class="install-prompt">$</span> |
| 27 | + <code>npx lito init</code> |
| 28 | + <button class="copy-btn" onclick="copyCode(this)" aria-label="Copy command"> |
| 29 | + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg> |
| 30 | + </button> |
| 31 | + </div> |
| 32 | + </div> |
21 | 33 | </div> |
22 | 34 | </div> |
23 | 35 |
|
24 | 36 | <section class="features-section"> |
25 | | - <div class="section-header"> |
26 | | - <h2>Why developers love Lito</h2> |
27 | | - <p>Everything you need to create world-class documentation</p> |
28 | | - </div> |
| 37 | + <div class="features-inner"> |
| 38 | + <div class="section-header"> |
| 39 | + <h2>Everything you need for great docs</h2> |
| 40 | + <p>Built for developers who value simplicity and speed.</p> |
| 41 | + </div> |
29 | 42 |
|
30 | | - <div class="features-grid"> |
31 | | - <div class="feature-card" data-animate> |
32 | | - <div class="feature-icon"> |
33 | | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg> |
| 43 | + <div class="features-grid"> |
| 44 | + <div class="feature-card" data-animate> |
| 45 | + <div class="feature-icon"> |
| 46 | + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg> |
| 47 | + </div> |
| 48 | + <h3>Zero Config</h3> |
| 49 | + <p>Start with a single JSON file. No complex setup, no build tools to configure.</p> |
34 | 50 | </div> |
35 | | - <h3>Zero Config</h3> |
36 | | - <p>Start with a single JSON file. No complex setup, no build tools to configure.</p> |
37 | | - </div> |
38 | 51 |
|
39 | | - <div class="feature-card" data-animate> |
40 | | - <div class="feature-icon"> |
41 | | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m8 12 2.5 2.5L16 9"/></svg> |
| 52 | + <div class="feature-card" data-animate> |
| 53 | + <div class="feature-icon"> |
| 54 | + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg> |
| 55 | + </div> |
| 56 | + <h3>20+ MDX Components</h3> |
| 57 | + <p>Callouts, tabs, cards, code groups, accordions, and more — all built in.</p> |
42 | 58 | </div> |
43 | | - <h3>MDX Components</h3> |
44 | | - <p>20+ built-in components for callouts, tabs, cards, code blocks, and more.</p> |
45 | | - </div> |
46 | 59 |
|
47 | | - <div class="feature-card" data-animate> |
48 | | - <div class="feature-icon"> |
49 | | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> |
| 60 | + <div class="feature-card" data-animate> |
| 61 | + <div class="feature-icon"> |
| 62 | + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> |
| 63 | + </div> |
| 64 | + <h3>Full-Text Search</h3> |
| 65 | + <p>Lightning-fast search powered by Pagefind. Works offline, no server needed.</p> |
50 | 66 | </div> |
51 | | - <h3>Full-Text Search</h3> |
52 | | - <p>Lightning-fast search powered by Pagefind. Works offline, no server needed.</p> |
53 | | - </div> |
54 | 67 |
|
55 | | - <div class="feature-card" data-animate> |
56 | | - <div class="feature-icon"> |
57 | | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m6.8 15-3.5 2"/><path d="m20.7 17-3.5-2"/><path d="M6.8 9 3.3 7"/><path d="m20.7 7-3.5 2"/><circle cx="12" cy="12" r="4"/></svg> |
| 68 | + <div class="feature-card" data-animate> |
| 69 | + <div class="feature-icon"> |
| 70 | + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6.1H3"/><path d="M21 12.1H3"/><path d="M15.1 18H3"/></svg> |
| 71 | + </div> |
| 72 | + <h3>API Documentation</h3> |
| 73 | + <p>OpenAPI integration for beautiful, interactive API reference pages.</p> |
58 | 74 | </div> |
59 | | - <h3>API Documentation</h3> |
60 | | - <p>OpenAPI integration for beautiful, interactive API reference pages.</p> |
61 | | - </div> |
62 | 75 |
|
63 | | - <div class="feature-card" data-animate> |
64 | | - <div class="feature-icon"> |
65 | | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9"/></svg> |
| 76 | + <div class="feature-card" data-animate> |
| 77 | + <div class="feature-icon"> |
| 78 | + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9"/></svg> |
| 79 | + </div> |
| 80 | + <h3>i18n Ready</h3> |
| 81 | + <p>Built-in internationalization for multilingual documentation sites.</p> |
66 | 82 | </div> |
67 | | - <h3>i18n Ready</h3> |
68 | | - <p>Built-in internationalization support for multilingual documentation.</p> |
69 | | - </div> |
70 | 83 |
|
71 | | - <div class="feature-card" data-animate> |
72 | | - <div class="feature-icon"> |
73 | | - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg> |
| 84 | + <div class="feature-card" data-animate> |
| 85 | + <div class="feature-icon"> |
| 86 | + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg> |
| 87 | + </div> |
| 88 | + <h3>Dark Mode</h3> |
| 89 | + <p>Beautiful light and dark themes with smooth transitions. System-aware.</p> |
74 | 90 | </div> |
75 | | - <h3>Dark Mode</h3> |
76 | | - <p>Beautiful light and dark themes with smooth transitions. Respects system preferences.</p> |
77 | 91 | </div> |
78 | 92 | </div> |
79 | 93 | </section> |
80 | 94 |
|
81 | 95 | <section class="cta-section"> |
82 | | - <div class="cta-content"> |
83 | | - <h2>Ready to build better docs?</h2> |
84 | | - <p>Get started in minutes with our CLI tool.</p> |
85 | | - <div class="cta-code"> |
86 | | - <code>npx lito init</code> |
87 | | - <button class="copy-btn" onclick="copyCode(this)"> |
88 | | - <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg> |
89 | | - </button> |
| 96 | + <div class="cta-inner"> |
| 97 | + <div class="cta-content"> |
| 98 | + <h2>Start building in minutes</h2> |
| 99 | + <p>Join developers who ship better docs, faster.</p> |
| 100 | + <div class="cta-actions"> |
| 101 | + <a href="/getting-started/installation" class="btn btn-primary"> |
| 102 | + Read the docs |
| 103 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> |
| 104 | + </a> |
| 105 | + <a href="https://github.com/Lito-docs/cli" class="btn btn-ghost" target="_blank" rel="noopener"> |
| 106 | + Star on GitHub |
| 107 | + </a> |
| 108 | + </div> |
90 | 109 | </div> |
91 | 110 | </div> |
92 | 111 | </section> |
0 commit comments