husteno-o feat: code review system, type safety, error handling, AI provider fallback · 9/9/2026
1985bf3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevPulse — GitHub Power Tools for Discord</title>
<meta name="description" content="Review pull requests, merge code, monitor CI/CD, and trace lifecycles directly from Discord. 21 powerful slash commands." />
<!-- OpenGraph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="DevPulse — GitHub Power Tools for Discord" />
<meta property="og:description" content="Deep GitHub intelligence, PR workflows, CI/CD telemetry inside Discord." />
<meta name="twitter:card" content="summary_large_image" />
<!-- Tailwind CSS v4 -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
bg: { canvas: '#090d16', subtle: '#0d1117', surface: '#161b22', hover: '#1c2128', active: '#21262d' },
border: { DEFAULT: '#30363d', muted: '#21262d' },
text: { primary: '#f0f6fc', secondary: '#8b949e', muted: '#6e7681' },
gh: { green: '#2ea043', 'green-h': '#3fb950', blue: '#58a6ff', purple: '#a371f7', coral: '#f85149', amber: '#d29922' },
discord: { blurple: '#5865f2', 'blurple-h': '#4752c4', embed: '#2b2d31', dark: '#1e1f22' }
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Noto Sans', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'monospace']
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'shimmer': 'shimmer 2s linear infinite',
'fade-in': 'fadeIn 0.5s ease-out forwards',
'slide-up': 'slideUp 0.5s ease-out forwards',
'slide-down': 'slideDown 0.3s ease-out forwards',
'scale-in': 'scaleIn 0.3s ease-out forwards',
'glow': 'glow 2s ease-in-out infinite alternate',
},
keyframes: {
float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' } },
shimmer: { '0%': { backgroundPosition: '-200% 0' }, '100%': { backgroundPosition: '200% 0' } },
fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
slideUp: { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
slideDown: { '0%': { opacity: '0', transform: 'translateY(-10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
scaleIn: { '0%': { opacity: '0', transform: 'scale(0.95)' }, '100%': { opacity: '1', transform: 'scale(1)' } },
glow: { '0%': { boxShadow: '0 0 5px rgba(46,160,67,0.2)' }, '100%': { boxShadow: '0 0 20px rgba(46,160,67,0.4)' } },
}
}
}
}
</script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<!-- Custom Styles -->
<link rel="stylesheet" href="./styles.css" />
<link rel="icon" type="image/svg+xml" href="./logo.svg" />
</head>
<body class="bg-bg-canvas text-text-primary font-sans antialiased overflow-x-hidden">
<!-- Background Effects -->
<div class="fixed inset-0 pointer-events-none z-0">
<div class="absolute inset-0 bg-[linear-gradient(to_right,rgba(48,54,61,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(48,54,61,0.06)_1px,transparent_1px)] bg-[size:48px_48px] [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_80%)]"></div>
<div class="absolute -top-32 left-[15%] w-[700px] h-[700px] rounded-full bg-gh-green/10 blur-[100px] animate-float"></div>
<div class="absolute top-[500px] right-[10%] w-[600px] h-[600px] rounded-full bg-gh-blue/8 blur-[100px] animate-float" style="animation-delay: -3s"></div>
<div class="absolute -bottom-24 left-1/2 w-[500px] h-[500px] rounded-full bg-gh-purple/6 blur-[100px] animate-float" style="animation-delay: -1.5s"></div>
</div>
<!-- Navigation -->
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-bg-subtle/80 backdrop-blur-xl border-b border-transparent">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<a href="#" class="flex items-center gap-3 group">
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-gh-green to-gh-blue flex items-center justify-center shadow-lg shadow-gh-green/20 group-hover:shadow-gh-green/40 transition-shadow duration-300">
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<span class="text-lg font-bold tracking-tight">DevPulse</span>
<span class="hidden sm:inline-flex text-[10px] font-semibold px-2 py-0.5 rounded-md bg-gh-green/10 text-gh-green-h border border-gh-green/30">BETA</span>
</a>
<!-- Desktop Nav -->
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-sm text-text-secondary hover:text-text-primary transition-colors">Features</a>
<a href="#simulator" class="text-sm text-text-secondary hover:text-text-primary transition-colors">Demo</a>
<a href="#commands" class="text-sm text-text-secondary hover:text-text-primary transition-colors">Commands</a>
<a href="#setup" class="text-sm text-text-secondary hover:text-text-primary transition-colors">Setup</a>
</div>
<!-- Actions -->
<div class="flex items-center gap-3">
<a href="https://github.com/husteno-o/git-discord-bot" target="_blank" rel="noopener noreferrer" class="hidden sm:inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-bg-surface border border-border hover:bg-bg-hover hover:border-text-secondary transition-all duration-200">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
<a href="#setup" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-gh-green text-white hover:bg-gh-green-h shadow-lg shadow-gh-green/20 hover:shadow-gh-green/40 transition-all duration-200">
<i data-lucide="rocket" class="w-4 h-4"></i>
Get Started
</a>
<!-- Mobile menu button -->
<button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-bg-surface transition-colors">
<i data-lucide="menu" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-bg-subtle/95 backdrop-blur-xl border-b border-border">
<div class="px-4 py-4 space-y-2">
<a href="#features" class="block px-4 py-3 rounded-lg text-sm text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors">Features</a>
<a href="#simulator" class="block px-4 py-3 rounded-lg text-sm text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors">Demo</a>
<a href="#commands" class="block px-4 py-3 rounded-lg text-sm text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors">Commands</a>
<a href="#setup" class="block px-4 py-3 rounded-lg text-sm text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors">Setup</a>
<a href="https://github.com/husteno-o/git-discord-bot" target="_blank" class="flex items-center gap-2 px-4 py-3 rounded-lg text-sm text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors">
<i data-lucide="github" class="w-4 h-4"></i>
GitHub
</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative z-10 pt-32 pb-20 sm:pt-40 sm:pb-28 px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-bg-surface/80 border border-border backdrop-blur-sm mb-8 animate-fade-in">
<span class="w-2 h-2 rounded-full bg-gh-green animate-pulse"></span>
<span class="text-sm text-text-secondary">21 Powerful GitHub Commands for Discord</span>
</div>
<!-- Title -->
<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 animate-slide-up">
GitHub Workflows.<br class="hidden sm:block" />
<span class="bg-gradient-to-r from-white via-gh-blue to-gh-purple bg-[length:200%_auto] bg-clip-text text-transparent animate-shimmer">
Inside Discord.
</span>
</h1>
<!-- Subtitle -->
<p class="text-lg sm:text-xl text-text-secondary max-w-2xl mx-auto mb-10 leading-relaxed animate-slide-up" style="animation-delay: 0.1s">
Review pull requests, merge code, monitor CI/CD pipelines, and trace commit lifecycles — without leaving your Discord server.
</p>
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12 animate-slide-up" style="animation-delay: 0.2s">
<a href="#setup" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold rounded-xl bg-gh-green text-white hover:bg-gh-green-h shadow-xl shadow-gh-green/25 hover:shadow-gh-green/40 hover:-translate-y-0.5 transition-all duration-200">
<i data-lucide="download" class="w-5 h-5"></i>
Self-Host Free
</a>
<a href="#simulator" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold rounded-xl bg-bg-surface border border-border text-text-primary hover:bg-bg-hover hover:border-text-secondary hover:-translate-y-0.5 transition-all duration-200">
<i data-lucide="play" class="w-5 h-5"></i>
Live Demo
</a>
</div>
<!-- Stats -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-8 max-w-3xl mx-auto animate-slide-up" style="animation-delay: 0.3s">
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold text-text-primary">21</div>
<div class="text-sm text-text-muted">Commands</div>
</div>
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold text-text-primary">0</div>
<div class="text-sm text-text-muted">Auth Required</div>
</div>
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold text-text-primary">AES</div>
<div class="text-sm text-text-muted">256-GCM</div>
</div>
<div class="text-center">
<div class="text-2xl sm:text-3xl font-bold text-text-primary"><100ms</div>
<div class="text-sm text-text-muted">Response</div>
</div>
</div>
</div>
</section>
<!-- Interactive Demo Section -->
<section id="simulator" class="relative z-10 py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">See It In Action</h2>
<p class="text-text-secondary text-lg max-w-2xl mx-auto">Interactive preview of what you'll see in Discord. Click the tabs to explore different commands.</p>
</div>
<!-- Simulator Window -->
<div class="rounded-2xl bg-bg-surface border border-border shadow-2xl overflow-hidden max-w-4xl mx-auto">
<!-- Window Header -->
<div class="flex items-center justify-between px-4 py-3 bg-bg-subtle border-b border-border">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="flex items-center gap-2 text-xs font-mono text-text-secondary">
<i data-lucide="hash" class="w-3 h-3"></i>
<span>engineering-ops</span>
</div>
<div class="flex items-center gap-1.5 px-2 py-1 rounded-full bg-gh-green/10 border border-gh-green/30">
<span class="w-1.5 h-1.5 rounded-full bg-gh-green animate-pulse"></span>
<span class="text-[10px] font-mono text-gh-green-h">LIVE</span>
</div>
</div>
<!-- Tabs -->
<div class="flex gap-1 px-4 py-2 bg-bg-surface border-b border-border overflow-x-auto scrollbar-hide">
<button class="sim-tab-btn active flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-mono text-text-secondary hover:text-text-primary hover:bg-bg-hover transition-colors whitespace-nowrap" data-tab="pr">
<i data-lucide="git-pull-request" class="w-3 h-3"></i> /pr
</button>
<button class="sim-tab-btn flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-mono text-text-secondary hover:text-text-primary hover:bg-bg-hover transition-colors whitespace-nowrap" data-tab="repo">
<i data-lucide="book-open" class="w-3 h-3"></i> /repo
</button>
<button class="sim-tab-btn flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-mono text-text-secondary hover:text-text-primary hover:bg-bg-hover transition-colors whitespace-nowrap" data-tab="actions">
<i data-lucide="play-circle" class="w-3 h-3"></i> /actions
</button>
<button class="sim-tab-btn flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-mono text-text-secondary hover:text-text-primary hover:bg-bg-hover transition-colors whitespace-nowrap" data-tab="investigate">
<i data-lucide="search" class="w-3 h-3"></i> /investigate
</button>
<button class="sim-tab-btn flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-mono text-text-secondary hover:text-text-primary hover:bg-bg-hover transition-colors whitespace-nowrap" data-tab="code">
<i data-lucide="code" class="w-3 h-3"></i> /code
</button>
<button class="sim-tab-btn flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-mono text-text-secondary hover:text-text-primary hover:bg-bg-hover transition-colors whitespace-nowrap" data-tab="activity">
<i data-lucide="bar-chart" class="w-3 h-3"></i> /activity
</button>
</div>
<!-- Content Area -->
<div id="simulator-body" class="p-6 min-h-[400px] bg-discord-dark">
<!-- Dynamic content rendered by app.ts -->
</div>
</div>
</div>
</section>
<!-- Features Grid -->
<section id="features" class="relative z-10 py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Everything You Need</h2>
<p class="text-text-secondary text-lg max-w-2xl mx-auto">From repository intelligence to security scanning — all accessible through simple slash commands.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Feature Cards -->
<div class="group p-6 rounded-2xl bg-bg-surface border border-border hover:border-gh-blue/30 hover:-translate-y-1 hover:shadow-xl hover:shadow-gh-blue/5 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gh-blue/10 border border-gh-blue/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i data-lucide="git-pull-request" class="w-6 h-6 text-gh-blue"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Pull Request Tools</h3>
<p class="text-sm text-text-secondary leading-relaxed">View details, CI status, approve, request changes, and merge — all from Discord.</p>
</div>
<div class="group p-6 rounded-2xl bg-bg-surface border border-border hover:border-gh-green/30 hover:-translate-y-1 hover:shadow-xl hover:shadow-gh-green/5 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gh-green/10 border border-gh-green/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i data-lucide="book-open" class="w-6 h-6 text-gh-green"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Repository Intel</h3>
<p class="text-sm text-text-secondary leading-relaxed">Health scores, dependencies, growth metrics, and interactive navigation tabs.</p>
</div>
<div class="group p-6 rounded-2xl bg-bg-surface border border-border hover:border-gh-purple/30 hover:-translate-y-1 hover:shadow-xl hover:shadow-gh-purple/5 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gh-purple/10 border border-gh-purple/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i data-lucide="search" class="w-6 h-6 text-gh-purple"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Universal Search</h3>
<p class="text-sm text-text-secondary leading-relaxed">Search code, issues, PRs, repos, and commits with GitHub qualifiers.</p>
</div>
<div class="group p-6 rounded-2xl bg-bg-surface border border-border hover:border-gh-amber/30 hover:-translate-y-1 hover:shadow-xl hover:shadow-gh-amber/5 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gh-amber/10 border border-gh-amber/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i data-lucide="shield-check" class="w-6 h-6 text-gh-amber"></i>
</div>
<h3 class="text-lg font-semibold mb-2">Security Guard</h3>
<p class="text-sm text-text-secondary leading-relaxed">Dependabot alerts, CVE lookup, and real-time secret leak scanning.</p>
</div>
<div class="group p-6 rounded-2xl bg-bg-surface border border-border hover:border-discord-blurple/30 hover:-translate-y-1 hover:shadow-xl hover:shadow-discord-blurple/5 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-discord-blurple/10 border border-discord-blurple/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i data-lucide="play-circle" class="w-6 h-6 text-discord-blurple"></i>
</div>
<h3 class="text-lg font-semibold mb-2">CI/CD Monitoring</h3>
<p class="text-sm text-text-secondary leading-relaxed">Visual workflow trees, run history, and rerun/cancel controls.</p>
</div>
<div class="group p-6 rounded-2xl bg-bg-surface border border-border hover:border-gh-coral/30 hover:-translate-y-1 hover:shadow-xl hover:shadow-gh-coral/5 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gh-coral/10 border border-gh-coral/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i data-lucide="brain" class="w-6 h-6 text-gh-coral"></i>
</div>
<h3 class="text-lg font-semibold mb-2">AI Copilot</h3>
<p class="text-sm text-text-secondary leading-relaxed">Code explanations, PR summaries, and intelligent bug fix suggestions.</p>
</div>
</div>
</div>
</section>
<!-- All Commands Section -->
<section id="commands" class="relative z-10 py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-bg-subtle/50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">All 21 Commands</h2>
<p class="text-text-secondary text-lg max-w-2xl mx-auto">Every command you need to manage your GitHub workflow from Discord.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<!-- Command cards generated by JS -->
<div id="commands-grid" class="contents"></div>
</div>
</div>
</section>
<!-- Setup Section -->
<section id="setup" class="relative z-10 py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Get Started in 2 Minutes</h2>
<p class="text-text-secondary text-lg">Clone, configure, and run. No complex setup required.</p>
</div>
<!-- Terminal -->
<div class="rounded-2xl bg-[#0d1117] border border-border overflow-hidden shadow-2xl">
<div class="flex items-center justify-between px-4 py-3 bg-bg-surface border-b border-border">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<span class="text-xs font-mono text-text-secondary">terminal</span>
<button id="copy-all-btn" class="flex items-center gap-1.5 px-2 py-1 rounded text-xs text-text-muted hover:text-text-primary hover:bg-bg-hover transition-colors">
<i data-lucide="copy" class="w-3 h-3"></i> Copy
</button>
</div>
<div class="p-6 font-mono text-sm space-y-3">
<div class="text-text-muted"># Clone the repository</div>
<div class="text-text-primary"><span class="text-gh-blue">$</span> git clone https://github.com/husteno-o/git-discord-bot.git</div>
<div class="text-text-primary"><span class="text-gh-blue">$</span> cd git-discord-bot</div>
<div class="text-text-muted"># Install dependencies</div>
<div class="text-text-primary"><span class="text-gh-blue">$</span> bun install</div>
<div class="text-text-muted"># Configure your bot token</div>
<div class="text-text-primary"><span class="text-gh-blue">$</span> cp .env.example .env</div>
<div class="text-text-muted"># Start the bot</div>
<div class="text-text-primary"><span class="text-gh-blue">$</span> bun run start</div>
</div>
</div>
<!-- Docker option -->
<div class="mt-8 p-6 rounded-2xl bg-bg-surface border border-border">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-lg bg-gh-blue/10 flex items-center justify-center flex-shrink-0">
<i data-lucide="container" class="w-5 h-5 text-gh-blue"></i>
</div>
<div>
<h3 class="font-semibold mb-1">Docker Available</h3>
<p class="text-sm text-text-secondary mb-3">Pre-built Dockerfile and docker-compose.yml included for containerized deployment.</p>
<code class="text-xs font-mono px-3 py-1.5 rounded-lg bg-bg-canvas text-gh-blue">docker compose up -d</code>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="relative z-10 border-t border-border bg-bg-subtle py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-gh-green to-gh-blue flex items-center justify-center">
<svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<span class="font-semibold">DevPulse</span>
<span class="text-text-muted text-sm">© 2026</span>
</div>
<div class="flex items-center gap-6">
<a href="https://github.com/husteno-o/git-discord-bot" target="_blank" rel="noopener noreferrer" class="text-text-secondary hover:text-text-primary transition-colors">
<i data-lucide="github" class="w-5 h-5"></i>
</a>
<a href="#" class="text-sm text-text-secondary hover:text-text-primary transition-colors">MIT License</a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script type="module" src="./app.js"></script>
</body>
</html>