Skip to content

Commit c802a32

Browse files
sinsniwalsinsniwal
committed
docs: add GitHub Pages landing page in docs/
1 parent 2acb78b commit c802a32

3 files changed

Lines changed: 392 additions & 0 deletions

File tree

‎docs/index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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>hey-cli | Your Terminal Buddy</title>
7+
<meta name="description" content="A secure, zero-bloat CLI companion that turns plain English into shell scripts. No cloud, no API keys, 100% private.">
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
12+
<script src="https://unpkg.com/lucide@latest"></script>
13+
</head>
14+
<body>
15+
16+
<div class="container">
17+
<!-- Navbar -->
18+
<nav>
19+
<div class="logo">
20+
<i data-lucide="terminal"></i> hey-<span>cli</span>
21+
</div>
22+
<a href="https://github.com/sinsniwal/hey-cli" class="github-link">
23+
<i data-lucide="github"></i> GitHub
24+
</a>
25+
</nav>
26+
27+
<!-- Hero Section -->
28+
<section class="hero">
29+
<h1>English in, Shell out.</h1>
30+
<p>A secure, zero-bloat CLI companion that turns natural language and error logs into executable commands. 100% private and locally-hosted.</p>
31+
32+
<div class="terminal-window">
33+
<div class="terminal-header">
34+
<div class="dot red"></div>
35+
<div class="dot yellow"></div>
36+
<div class="dot green"></div>
37+
</div>
38+
<div class="terminal-content">
39+
<img src="https://github.com/sinsniwal/hey-cli/raw/main/assets/demo.gif" alt="hey-cli demo animation">
40+
</div>
41+
</div>
42+
</section>
43+
44+
<!-- Features -->
45+
<section class="features">
46+
<div class="feature-card">
47+
<h3><i data-lucide="shield-check"></i> 100% Local</h3>
48+
<p>All reasoning happens on your machine via Ollama. No API keys, no telemetry, and your data never leaves your shell.</p>
49+
</div>
50+
<div class="feature-card">
51+
<h3><i data-lucide="monitor"></i> OS Aware</h3>
52+
<p>Detects macOS, Linux, and Windows natively. Generates the correct flags for your specific shell and package manager.</p>
53+
</div>
54+
<div class="feature-card">
55+
<h3><i data-lucide="lock"></i> Secure Governance</h3>
56+
<p>Dangerous commands are intercepted by the Built-in Governance Engine, requiring explicit confirmation before execution.</p>
57+
</div>
58+
</section>
59+
60+
<!-- Install Section -->
61+
<section class="install-section">
62+
<div class="install-container">
63+
<h2>Get Started in Seconds</h2>
64+
<div class="install-tabs">
65+
<button class="tab-btn active" onclick="switchInstall('uv')">uv</button>
66+
<button class="tab-btn" onclick="switchInstall('brew')">Homebrew</button>
67+
<button class="tab-btn" onclick="switchInstall('curl')">curl</button>
68+
<button class="tab-btn" onclick="switchInstall('scoop')">Scoop</button>
69+
</div>
70+
<div class="command-box">
71+
<code id="install-command">uv tool install hey-cli-python</code>
72+
<button class="copy-btn" onclick="copyCommand()">
73+
<i data-lucide="copy" id="copy-icon"></i>
74+
</button>
75+
</div>
76+
</div>
77+
</section>
78+
79+
<!-- Footer -->
80+
<footer>
81+
<p>&copy; 2026 Mohit Singh Sinsniwal. Licensed under MIT.</p>
82+
<p>Made with &hearts; for the Open Source community.</p>
83+
</footer>
84+
</div>
85+
86+
<script src="script.js"></script>
87+
<script>
88+
lucide.createIcons();
89+
</script>
90+
</body>
91+
</html>

‎docs/script.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
const commands = {
2+
uv: 'uv tool install hey-cli-python',
3+
brew: 'brew tap sinsniwal/hey-cli && brew install hey-cli',
4+
curl: 'curl -sL https://raw.githubusercontent.com/sinsniwal/hey-cli/main/install.sh | bash',
5+
scoop: 'scoop install https://raw.githubusercontent.com/sinsniwal/hey-cli/main/scoop/hey-cli.json'
6+
};
7+
8+
function switchInstall(platform) {
9+
const commandBox = document.getElementById('install-command');
10+
const buttons = document.querySelectorAll('.tab-btn');
11+
12+
// Update command
13+
commandBox.innerText = commands[platform];
14+
15+
// Update active button
16+
buttons.forEach(btn => btn.classList.remove('active'));
17+
event.target.classList.add('active');
18+
}
19+
20+
function copyCommand() {
21+
const command = document.getElementById('install-command').innerText;
22+
const icon = document.getElementById('copy-icon');
23+
24+
navigator.clipboard.writeText(command).then(() => {
25+
// Basic visual feedback
26+
const originalIcon = icon.getAttribute('data-lucide');
27+
icon.setAttribute('data-lucide', 'check');
28+
lucide.createIcons();
29+
30+
setTimeout(() => {
31+
icon.setAttribute('data-lucide', 'copy');
32+
lucide.createIcons();
33+
}, 2000);
34+
});
35+
}
36+
37+
// Simple Intersection Observer for animation
38+
document.addEventListener('DOMContentLoaded', () => {
39+
const observerOptions = {
40+
threshold: 0.1
41+
};
42+
43+
const observer = new IntersectionObserver((entries) => {
44+
entries.forEach(entry => {
45+
if (entry.isIntersecting) {
46+
entry.target.style.opacity = '1';
47+
entry.target.style.transform = 'translateY(0)';
48+
}
49+
});
50+
}, observerOptions);
51+
52+
document.querySelectorAll('.feature-card, .install-container').forEach(el => {
53+
el.style.opacity = '0';
54+
el.style.transform = 'translateY(20px)';
55+
el.style.transition = 'all 0.6s ease-out';
56+
observer.observe(el);
57+
});
58+
});

‎docs/style.css‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
:root {
2+
--bg-dark: #0a0c10;
3+
--bg-card: rgba(255, 255, 255, 0.03);
4+
--primary: #3b82f6;
5+
--primary-hover: #2563eb;
6+
--accent: #10b981;
7+
--text-main: #f3f4f6;
8+
--text-muted: #9ca3af;
9+
--border: rgba(255, 255, 255, 0.1);
10+
--glass: rgba(255, 255, 255, 0.05);
11+
--glass-blur: blur(12px);
12+
}
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
body {
21+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
22+
background-color: var(--bg-dark);
23+
color: var(--text-main);
24+
line-height: 1.6;
25+
-webkit-font-smoothing: antialiased;
26+
overflow-x: hidden;
27+
}
28+
29+
.container {
30+
max-width: 1100px;
31+
margin: 0 auto;
32+
padding: 0 1.5rem;
33+
}
34+
35+
/* Navbar */
36+
nav {
37+
padding: 2rem 0;
38+
display: flex;
39+
justify-content: space-between;
40+
align-items: center;
41+
}
42+
43+
.logo {
44+
font-size: 1.5rem;
45+
font-weight: 800;
46+
letter-spacing: -0.02em;
47+
display: flex;
48+
align-items: center;
49+
gap: 0.5rem;
50+
}
51+
52+
.logo span {
53+
color: var(--primary);
54+
}
55+
56+
.github-link {
57+
color: var(--text-muted);
58+
text-decoration: none;
59+
font-weight: 500;
60+
transition: color 0.2s;
61+
display: flex;
62+
align-items: center;
63+
gap: 0.5rem;
64+
}
65+
66+
.github-link:hover {
67+
color: var(--text-main);
68+
}
69+
70+
/* Hero Section */
71+
.hero {
72+
padding: 5rem 0 8rem;
73+
text-align: center;
74+
}
75+
76+
h1 {
77+
font-size: 4rem;
78+
font-weight: 900;
79+
letter-spacing: -0.04em;
80+
line-height: 1.1;
81+
margin-bottom: 1.5rem;
82+
background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
83+
-webkit-background-clip: text;
84+
-webkit-text-fill-color: transparent;
85+
}
86+
87+
.hero p {
88+
font-size: 1.25rem;
89+
color: var(--text-muted);
90+
max-width: 600px;
91+
margin: 0 auto 3rem;
92+
}
93+
94+
/* Terminal Mockup */
95+
.terminal-window {
96+
max-width: 850px;
97+
margin: 0 auto;
98+
background: #1e1e1e;
99+
border-radius: 12px;
100+
border: 1px solid var(--border);
101+
box-shadow: 0 40px 100px rgba(0,0,0,0.5);
102+
overflow: hidden;
103+
}
104+
105+
.terminal-header {
106+
height: 44px;
107+
background: #2d2d2d;
108+
display: flex;
109+
align-items: center;
110+
padding: 0 1rem;
111+
gap: 8px;
112+
}
113+
114+
.dot {
115+
width: 12px;
116+
height: 12px;
117+
border-radius: 50%;
118+
}
119+
120+
.red { background: #ff5f56; }
121+
.yellow { background: #ffbd2e; }
122+
.green { background: #27c93f; }
123+
124+
.terminal-content {
125+
background: #0d1117;
126+
}
127+
128+
.terminal-content img {
129+
width: 100%;
130+
display: block;
131+
}
132+
133+
/* Features */
134+
.features {
135+
padding: 6rem 0;
136+
display: grid;
137+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
138+
gap: 2rem;
139+
}
140+
141+
.feature-card {
142+
padding: 2.5rem;
143+
background: var(--bg-card);
144+
border-radius: 1.5rem;
145+
border: 1px solid var(--border);
146+
transition: transform 0.3s, border-color 0.3s;
147+
}
148+
149+
.feature-card:hover {
150+
transform: translateY(-5px);
151+
border-color: var(--primary);
152+
}
153+
154+
.feature-card h3 {
155+
font-size: 1.5rem;
156+
margin-bottom: 1rem;
157+
}
158+
159+
.feature-card p {
160+
color: var(--text-muted);
161+
}
162+
163+
/* Install Section */
164+
.install-section {
165+
padding: 6rem 0;
166+
text-align: center;
167+
}
168+
169+
.install-container {
170+
max-width: 600px;
171+
margin: 0 auto;
172+
background: var(--glass);
173+
backdrop-filter: var(--glass-blur);
174+
padding: 2.5rem;
175+
border-radius: 2rem;
176+
border: 1px solid var(--border);
177+
}
178+
179+
.install-tabs {
180+
display: flex;
181+
justify-content: center;
182+
gap: 1rem;
183+
margin-bottom: 2rem;
184+
}
185+
186+
.tab-btn {
187+
padding: 0.5rem 1.25rem;
188+
border-radius: 999px;
189+
border: 1px solid var(--border);
190+
background: transparent;
191+
color: var(--text-muted);
192+
cursor: pointer;
193+
font-weight: 500;
194+
transition: all 0.2s;
195+
}
196+
197+
.tab-btn.active {
198+
background: var(--primary);
199+
color: #fff;
200+
border-color: var(--primary);
201+
}
202+
203+
.command-box {
204+
background: #000;
205+
padding: 1.25rem;
206+
border-radius: 1rem;
207+
display: flex;
208+
justify-content: space-between;
209+
align-items: center;
210+
font-family: 'JetBrains Mono', monospace;
211+
font-size: 0.9rem;
212+
border: 1px solid var(--border);
213+
}
214+
215+
.command-box code {
216+
color: var(--accent);
217+
}
218+
219+
.copy-btn {
220+
background: transparent;
221+
border: none;
222+
color: var(--text-muted);
223+
cursor: pointer;
224+
padding: 0.5rem;
225+
}
226+
227+
.copy-btn:hover {
228+
color: var(--text-main);
229+
}
230+
231+
/* Footer */
232+
footer {
233+
padding: 4rem 0;
234+
border-top: 1px solid var(--border);
235+
text-align: center;
236+
color: var(--text-muted);
237+
font-size: 0.9rem;
238+
}
239+
240+
@media (max-width: 768px) {
241+
h1 { font-size: 2.5rem; }
242+
.hero { padding: 3rem 0; }
243+
}

0 commit comments

Comments
 (0)