@touchzada/claudinho 0.1.7 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GUIA_INICIO.md +836 -836
- package/README.md +288 -208
- package/bin/claudinho.cmd +2 -0
- package/dist/Landing/_prompts/loading-screen-analysis.md +227 -0
- package/dist/Landing/_prompts/prompt-loading-screen.md +43 -0
- package/dist/Landing/dark-landing-analysis.md +266 -0
- package/dist/Landing/index.html +1152 -0
- package/dist/Landing/index.v1.html +607 -0
- package/dist/Landing/index.v3.html +604 -0
- package/dist/Landing/index.v4.html +512 -0
- package/dist/Landing/index.v5.html +513 -0
- package/dist/cli.mjs +322 -242
- package/dist/cli.mjs.map +15 -15
- package/docs/advanced-setup.md +276 -276
- package/docs/quick-start-mac-linux.md +110 -110
- package/docs/quick-start-windows.md +106 -106
- package/package.json +2 -2
|
@@ -0,0 +1,607 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Claudinho — Claude Code, do Seu Jeito</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<script src="https://unpkg.com/lucide@latest"></script>
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
11
|
+
<script>
|
|
12
|
+
tailwind.config = {
|
|
13
|
+
theme: {
|
|
14
|
+
extend: {
|
|
15
|
+
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
16
|
+
colors: {
|
|
17
|
+
border: 'hsl(240 3.7% 15.9%)',
|
|
18
|
+
input: 'hsl(240 3.7% 15.9%)',
|
|
19
|
+
ring: 'hsl(240 4.9% 83.9%)',
|
|
20
|
+
background: 'hsl(240 10% 3.9%)',
|
|
21
|
+
foreground: 'hsl(0 0% 98%)',
|
|
22
|
+
muted: { DEFAULT: 'hsl(240 3.7% 15.9%)', foreground: 'hsl(240 5% 64.9%)' },
|
|
23
|
+
accent: { DEFAULT: 'hsl(240 3.7% 15.9%)', foreground: 'hsl(0 0% 98%)' },
|
|
24
|
+
card: { DEFAULT: 'hsl(240 10% 3.9%)', foreground: 'hsl(0 0% 98%)' },
|
|
25
|
+
primary: { DEFAULT: 'hsl(0 0% 98%)', foreground: 'hsl(240 5.9% 10%)' },
|
|
26
|
+
secondary: { DEFAULT: 'hsl(240 3.7% 15.9%)', foreground: 'hsl(0 0% 98%)' },
|
|
27
|
+
'claudinho-purple': '#a78bfa',
|
|
28
|
+
'claudinho-pink': '#f472b6',
|
|
29
|
+
'claudinho-cyan': '#22d3ee',
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
</script>
|
|
35
|
+
<style>
|
|
36
|
+
@keyframes gradient-shift { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
|
|
37
|
+
@keyframes float { 0%,100% { transform: translateY(0px) } 50% { transform: translateY(-10px) } }
|
|
38
|
+
@keyframes pulse-glow { 0%,100% { opacity: .3 } 50% { opacity: .7 } }
|
|
39
|
+
@keyframes slide-up { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
|
|
40
|
+
@keyframes slide-in { from { opacity: 0; transform: translateX(-20px) } to { opacity: 1; transform: translateX(0) } }
|
|
41
|
+
@keyframes count-up { from { opacity: 0; transform: scale(0.5) } to { opacity: 1; transform: scale(1) } }
|
|
42
|
+
@keyframes marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
|
|
43
|
+
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
|
|
44
|
+
@keyframes border-shimmer { 0% { background-position: 200% center } 100% { background-position: -200% center } }
|
|
45
|
+
|
|
46
|
+
.gradient-bg {
|
|
47
|
+
background: linear-gradient(-45deg, #0c0a09, #1a0a2e, #0f172a, #0c0a09);
|
|
48
|
+
background-size: 400% 400%;
|
|
49
|
+
animation: gradient-shift 15s ease infinite;
|
|
50
|
+
}
|
|
51
|
+
.gradient-text {
|
|
52
|
+
background: linear-gradient(135deg, #a78bfa, #f472b6, #22d3ee);
|
|
53
|
+
background-size: 200% 200%;
|
|
54
|
+
animation: gradient-shift 4s ease infinite;
|
|
55
|
+
-webkit-background-clip: text;
|
|
56
|
+
-webkit-text-fill-color: transparent;
|
|
57
|
+
background-clip: text;
|
|
58
|
+
}
|
|
59
|
+
.float { animation: float 6s ease-in-out infinite; }
|
|
60
|
+
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
|
|
61
|
+
.slide-up { animation: slide-up 0.6s ease-out forwards; }
|
|
62
|
+
.slide-in { animation: slide-in 0.4s ease-out forwards; }
|
|
63
|
+
.border-shimmer {
|
|
64
|
+
background: linear-gradient(90deg, transparent 0%, rgba(167,139,250,0.3) 50%, transparent 100%);
|
|
65
|
+
background-size: 200% 100%;
|
|
66
|
+
animation: border-shimmer 3s linear infinite;
|
|
67
|
+
}
|
|
68
|
+
.marquee-track { animation: marquee 30s linear infinite; }
|
|
69
|
+
.cursor-blink { animation: blink 1s step-end infinite; }
|
|
70
|
+
|
|
71
|
+
.glass {
|
|
72
|
+
background: rgba(240, 243, 250, 0.03);
|
|
73
|
+
backdrop-filter: blur(16px);
|
|
74
|
+
-webkit-backdrop-filter: blur(16px);
|
|
75
|
+
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
76
|
+
}
|
|
77
|
+
.glass-card {
|
|
78
|
+
background: rgba(240, 243, 250, 0.04);
|
|
79
|
+
backdrop-filter: blur(12px);
|
|
80
|
+
-webkit-backdrop-filter: blur(12px);
|
|
81
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
82
|
+
transition: all 0.3s ease;
|
|
83
|
+
}
|
|
84
|
+
.glass-card:hover {
|
|
85
|
+
background: rgba(240, 243, 250, 0.07);
|
|
86
|
+
border-color: rgba(167, 139, 250, 0.3);
|
|
87
|
+
transform: translateY(-4px);
|
|
88
|
+
box-shadow: 0 8px 32px rgba(167, 139, 250, 0.1);
|
|
89
|
+
}
|
|
90
|
+
.glow-hover:hover { box-shadow: 0 0 30px rgba(167, 139, 250, 0.15), 0 0 60px rgba(244, 114, 182, 0.08); }
|
|
91
|
+
|
|
92
|
+
.grid-bg {
|
|
93
|
+
background-image:
|
|
94
|
+
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
|
95
|
+
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
|
|
96
|
+
background-size: 60px 60px;
|
|
97
|
+
}
|
|
98
|
+
.radial-fade {
|
|
99
|
+
background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(167,139,250,0.08), transparent);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.delay-100 { animation-delay: 0.1s } .delay-200 { animation-delay: 0.2s }
|
|
103
|
+
.delay-300 { animation-delay: 0.3s } .delay-400 { animation-delay: 0.4s }
|
|
104
|
+
.delay-500 { animation-delay: 0.5s } .delay-600 { animation-delay: 0.6s }
|
|
105
|
+
.delay-700 { animation-delay: 0.7s } .delay-800 { animation-delay: 0.8s }
|
|
106
|
+
|
|
107
|
+
* { scrollbar-width: thin; scrollbar-color: #a78bfa #0c0a09; }
|
|
108
|
+
::-webkit-scrollbar { width: 6px; }
|
|
109
|
+
</style>
|
|
110
|
+
</head>
|
|
111
|
+
<body class="bg-[hsl(240,10%,3.9%)] text-white font-sans antialiased overflow-x-hidden">
|
|
112
|
+
|
|
113
|
+
<!-- ====== NAVBAR ====== -->
|
|
114
|
+
<nav class="fixed inset-x-0 top-0 z-50 glass border-b border-white/5">
|
|
115
|
+
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
116
|
+
<div class="flex items-center gap-2">
|
|
117
|
+
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-claudinho-purple to-claudinho-pink flex items-center justify-center text-sm font-bold">C</div>
|
|
118
|
+
<span class="font-bold text-lg">claudinho</span>
|
|
119
|
+
<span class="text-xs px-2 py-0.5 rounded-full bg-white/5 text-muted-foreground border border-white/5">v0.1.7</span>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="hidden md:flex items-center gap-8 text-sm text-muted-foreground">
|
|
122
|
+
<a href="#features" class="hover:text-white transition">Features</a>
|
|
123
|
+
<a href="#providers" class="hover:text-white transition">Providers</a>
|
|
124
|
+
<a href="#tools" class="hover:text-white transition">Tools</a>
|
|
125
|
+
<a href="#commands" class="hover:text-white transition">Commands</a>
|
|
126
|
+
<a href="#security" class="hover:text-white transition">Segurança</a>
|
|
127
|
+
<a href="https://github.com/Gitlawb/openclaude" target="_blank" class="text-white border border-white/10 px-4 py-2 rounded-lg text-xs hover:bg-white/5 transition">GitHub ↗</a>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</nav>
|
|
131
|
+
|
|
132
|
+
<!-- ====== HERO ====== -->
|
|
133
|
+
<section class="relative min-h-screen flex items-center justify-center gradient-bg grid-bg radial-fade pt-16 overflow-hidden">
|
|
134
|
+
<!-- Decorative orbs -->
|
|
135
|
+
<div class="absolute top-1/3 left-1/4 w-64 h-64 rounded-full bg-claudinho-purple/10 blur-[100px] pulse-glow"></div>
|
|
136
|
+
<div class="absolute bottom-1/3 right-1/4 w-48 h-48 rounded-full bg-claudinho-pink/10 blur-[80px] pulse-glow" style="animation-delay: 1.5s"></div>
|
|
137
|
+
<div class="absolute top-1/2 left-1/2 w-40 h-40 rounded-full bg-claudinho-cyan/5 blur-[80px] pulse-glow" style="animation-delay: 3s"></div>
|
|
138
|
+
|
|
139
|
+
<div class="relative text-center max-w-5xl mx-auto px-6 py-20">
|
|
140
|
+
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-xs text-muted-foreground mb-8 slide-up" style="animation-delay:.1s; opacity:0">
|
|
141
|
+
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
142
|
+
Fork open-source do Claude Code · 10 providers · ~100 commands
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<h1 class="text-5xl md:text-7xl lg:text-8xl font-black tracking-tight mb-6 slide-up" style="animation-delay:.2s; opacity:0">
|
|
146
|
+
Claude Code,<br><span class="gradient-text">do seu jeito.</span>
|
|
147
|
+
</h1>
|
|
148
|
+
|
|
149
|
+
<p class="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed slide-up" style="animation-delay:.3s; opacity:0">
|
|
150
|
+
Roda o Claude Code com qualquer modelo. OpenAI, Gemini, Ollama, Groq, Bedrock,
|
|
151
|
+
e mais <span class="text-claudinho-purple font-semibold">10 providers</span> —
|
|
152
|
+
tudo via shim OpenAI, sem depender de assinatura da Anthropic.
|
|
153
|
+
</p>
|
|
154
|
+
|
|
155
|
+
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 slide-up" style="animation-delay:.4s; opacity:0">
|
|
156
|
+
<a href="#features" class="px-8 py-3.5 rounded-xl bg-white text-black font-semibold text-sm hover:bg-white/90 transition glow-hover">
|
|
157
|
+
Ver Features
|
|
158
|
+
</a>
|
|
159
|
+
<button onclick="document.getElementById('terminal').scrollIntoView({behavior:'smooth'})" class="px-8 py-3.5 rounded-xl glass text-sm font-medium hover:bg-white/5 transition">
|
|
160
|
+
Terminal de Demo ↓
|
|
161
|
+
</button>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<!-- Stats strip -->
|
|
165
|
+
<div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 slide-up" style="animation-delay:.5s; opacity:0">
|
|
166
|
+
<div class="glass-card rounded-xl p-4">
|
|
167
|
+
<div class="text-2xl font-bold gradient-text">10+</div>
|
|
168
|
+
<div class="text-xs text-muted-foreground mt-1">Providers</div>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="glass-card rounded-xl p-4">
|
|
171
|
+
<div class="text-2xl font-bold gradient-text">~100</div>
|
|
172
|
+
<div class="text-xs text-muted-foreground mt-1">Commands</div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="glass-card rounded-xl p-4">
|
|
175
|
+
<div class="text-2xl font-bold gradient-text">45</div>
|
|
176
|
+
<div class="text-xs text-muted-foreground mt-1">Tools</div>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="glass-card rounded-xl p-4">
|
|
179
|
+
<div class="text-2xl font-bold gradient-text">32K</div>
|
|
180
|
+
<div class="text-xs text-muted-foreground mt-1">Max Output</div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<!-- Scroll indicator -->
|
|
185
|
+
<div class="mt-16 text-xs text-muted-foreground/50 flex flex-col items-center gap-2">
|
|
186
|
+
<div class="w-px h-12 bg-gradient-to-b from-transparent via-claudinho-purple/30 to-transparent"></div>
|
|
187
|
+
SCROLL
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</section>
|
|
191
|
+
|
|
192
|
+
<!-- ====== PROVIDERS MARQUEE ====== -->
|
|
193
|
+
<section class="py-10 border-y border-white/5 bg-black/30 overflow-hidden">
|
|
194
|
+
<div class="text-center text-xs text-muted-foreground uppercase tracking-[0.2em] mb-6">Providers Suportados</div>
|
|
195
|
+
<div class="flex marquee-track whitespace-nowrap">
|
|
196
|
+
<div class="flex items-center gap-8 px-8">
|
|
197
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-purple">Anthropic</span>
|
|
198
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-cyan">OpenAI</span>
|
|
199
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-pink">Gemini</span>
|
|
200
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-green-400">Ollama</span>
|
|
201
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-yellow-400">Groq</span>
|
|
202
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-orange-400">DeepSeek</span>
|
|
203
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-blue-400">Mistral</span>
|
|
204
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-red-400">GitHub Models</span>
|
|
205
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-sky-400">Azure OpenAI</span>
|
|
206
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-emerald-400">OpenRouter</span>
|
|
207
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-purple-400">AWS Bedrock</span>
|
|
208
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-rose-400">Google Vertex</span>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="flex items-center gap-8 px-8">
|
|
211
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-purple">Anthropic</span>
|
|
212
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-cyan">OpenAI</span>
|
|
213
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-claudinho-pink">Gemini</span>
|
|
214
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-green-400">Ollama</span>
|
|
215
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-yellow-400">Groq</span>
|
|
216
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-orange-400">DeepSeek</span>
|
|
217
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-blue-400">Mistral</span>
|
|
218
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-red-400">GitHub Models</span>
|
|
219
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-sky-400">Azure OpenAI</span>
|
|
220
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-emerald-400">OpenRouter</span>
|
|
221
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-purple-400">AWS Bedrock</span>
|
|
222
|
+
<span class="px-6 py-2 rounded-full glass text-sm font-medium text-rose-400">Google Vertex</span>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</section>
|
|
226
|
+
|
|
227
|
+
<!-- ====== FEATURES ====== -->
|
|
228
|
+
<section id="features" class="py-24 relative radial-fade">
|
|
229
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
230
|
+
<div class="text-center mb-16">
|
|
231
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-purple">Features</span>
|
|
232
|
+
<h2 class="text-4xl md:text-5xl font-bold mt-4">Tudo que o Claude Code tem —<br><span class="gradient-text">e o que ele não tem</span></h2>
|
|
233
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-4">Mesmo streaming, tool calling, sub-agentes, memória... só que com seus modelos favoritos.</p>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
237
|
+
<!-- Feature cards -->
|
|
238
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
239
|
+
<div class="w-10 h-10 rounded-lg bg-claudinho-purple/10 flex items-center justify-center mb-4">
|
|
240
|
+
<i data-lucide="zap" class="w-5 h-5 text-claudinho-purple"></i>
|
|
241
|
+
</div>
|
|
242
|
+
<h3 class="text-lg font-semibold mb-2">Shim OpenAI Bidirecional</h3>
|
|
243
|
+
<p class="text-sm text-muted-foreground leading-relaxed">Traduz Anthropic ↔ OpenAI Chat Completions. Tool calls, streaming SSE, system prompts — Claude Code nem percebe que tá falando com outro modelo.</p>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
247
|
+
<div class="w-10 h-10 rounded-lg bg-claudinho-pink/10 flex items-center justify-center mb-4">
|
|
248
|
+
<i data-lucide="cpu" class="w-5 h-5 text-claudinho-pink"></i>
|
|
249
|
+
</div>
|
|
250
|
+
<h3 class="text-lg font-semibold mb-2">45+ Tools Integradas</h3>
|
|
251
|
+
<p class="text-sm text-muted-foreground leading-relaxed">Bash, FileRead, FileEdit, Glob, Grep, WebFetch, WebSearch, Agent, MCP, LSP, NotebookEdit, Tasks e mais. Tudo com schema Zod e 23 checks de segurança.</p>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
255
|
+
<div class="w-10 h-10 rounded-lg bg-claudinho-cyan/10 flex items-center justify-center mb-4">
|
|
256
|
+
<i data-lucide="command" class="w-5 h-5 text-claudinho-cyan"></i>
|
|
257
|
+
</div>
|
|
258
|
+
<h3 class="text-lg font-semibold mb-2">~100+ Slash Commands</h3>
|
|
259
|
+
<p class="text-sm text-muted-foreground leading-relaxed">/status, /config, /provider, /model, /plan, /tasks, /clear, /exit... 3 tipos de dispatch com fast-path routing. Interface TUI completa.</p>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
263
|
+
<div class="w-10 h-10 rounded-lg bg-green-400/10 flex items-center justify-center mb-4">
|
|
264
|
+
<i data-lucide="users" class="w-5 h-5 text-green-400"></i>
|
|
265
|
+
</div>
|
|
266
|
+
<h3 class="text-lg font-semibold mb-2">Swarm & Multi-Agent</h3>
|
|
267
|
+
<p class="text-sm text-muted-foreground leading-relaxed">7 tipos de tasks, 5 tipos de agents, orquestração com abort hierárquico. Agents conversam entre si via mailbox.</p>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
271
|
+
<div class="w-10 h-10 rounded-lg bg-yellow-400/10 flex items-center justify-center mb-4">
|
|
272
|
+
<i data-lucide="refresh-cw" class="w-5 h-5 text-yellow-400"></i>
|
|
273
|
+
</div>
|
|
274
|
+
<h3 class="text-lg font-semibold mb-2">Retry & WebSocket</h3>
|
|
275
|
+
<p class="text-sm text-muted-foreground leading-relaxed">Retry exponencial automático. Bridge V2 com Remote Control, auth multi-camada, recovery de 401, e session management robusto.</p>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<div class="glass-card rounded-xl p-6 glow-hover">
|
|
279
|
+
<div class="w-10 h-10 rounded-lg bg-orange-400/10 flex items-center justify-center mb-4">
|
|
280
|
+
<i data-lucide="brain" class="w-5 h-5 text-orange-400"></i>
|
|
281
|
+
</div>
|
|
282
|
+
<h3 class="text-lg font-semibold mb-2">Memória Persistente</h3>
|
|
283
|
+
<p class="text-sm text-muted-foreground leading-relaxed">Sistema de memória file-based com 4 tipos: user, feedback, project, reference. Persiste entre sessões e conversas.</p>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<!-- "Not in original" sub-section -->
|
|
288
|
+
<div class="mt-20">
|
|
289
|
+
<div class="text-center mb-12">
|
|
290
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-pink">O que adicionamos</span>
|
|
291
|
+
<h3 class="text-3xl font-bold mt-3">Diferenças do Original</h3>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
|
294
|
+
<div class="glass-card rounded-xl p-6">
|
|
295
|
+
<div class="flex items-start gap-3">
|
|
296
|
+
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-green-400/10 flex items-center justify-center text-[10px] text-green-400">✓</span>
|
|
297
|
+
<div>
|
|
298
|
+
<h4 class="font-semibold text-sm">Todos os providers via OPENAI_BASE_URL</h4>
|
|
299
|
+
<p class="text-xs text-muted-foreground mt-1">Ollama local, Groq, DeepSeek, Mistral — qualquer OpenAI-compatible.</p>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
<div class="glass-card rounded-xl p-6">
|
|
304
|
+
<div class="flex items-start gap-3">
|
|
305
|
+
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-green-400/10 flex items-center justify-center text-[10px] text-green-400">✓</span>
|
|
306
|
+
<div>
|
|
307
|
+
<h4 class="font-semibold text-sm">Analytics desligado por padrão</h4>
|
|
308
|
+
<p class="text-xs text-muted-foreground mt-1">~2000+ linhas de Datadog, GrowthBook stubbed no build. Sem tracking.</p>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="glass-card rounded-xl p-6">
|
|
313
|
+
<div class="flex items-start gap-3">
|
|
314
|
+
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-green-400/10 flex items-center justify-center text-[10px] text-green-400">✓</span>
|
|
315
|
+
<div>
|
|
316
|
+
<h4 class="font-semibold text-sm">Build externo com 26 feature flags off</h4>
|
|
317
|
+
<p class="text-xs text-muted-foreground mt-1">Código proprietário da Anthropic removido via flags no Bun.build().</p>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="glass-card rounded-xl p-6">
|
|
322
|
+
<div class="flex items-start gap-3">
|
|
323
|
+
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-yellow-400/10 flex items-center justify-center text-[10px] text-yellow-400">!</span>
|
|
324
|
+
<div>
|
|
325
|
+
<h4 class="font-semibold text-sm">Sem Extended Thinking</h4>
|
|
326
|
+
<p class="text-xs text-muted-foreground mt-1">Extended thinking desabilitado para modelos OpenAI. Vem de fábrica.</p>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</section>
|
|
334
|
+
|
|
335
|
+
<!-- ====== TERMINAL DEMO ====== -->
|
|
336
|
+
<section id="terminal" class="py-24 relative">
|
|
337
|
+
<div class="max-w-4xl mx-auto px-6">
|
|
338
|
+
<div class="text-center mb-12">
|
|
339
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-cyan">Veja funcionando</span>
|
|
340
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">Poder real, modelo que você escolher</h2>
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
<div class="glass rounded-xl overflow-hidden border border-white/10">
|
|
344
|
+
<!-- Terminal header -->
|
|
345
|
+
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/5 bg-black/30">
|
|
346
|
+
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
|
|
347
|
+
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
|
|
348
|
+
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
|
|
349
|
+
<span class="ml-2 text-xs text-muted-foreground font-mono">claudinho — v0.1.7</span>
|
|
350
|
+
</div>
|
|
351
|
+
<!-- Terminal body -->
|
|
352
|
+
<div id="terminal" class="p-6 font-mono text-sm leading-relaxed min-h-[340px]">
|
|
353
|
+
<div class="text-muted-foreground">
|
|
354
|
+
<span class="text-green-400">➜</span> <span class="text-claudinho-purple">~</span> npm i -g @gitlawb/openclaude
|
|
355
|
+
</div>
|
|
356
|
+
<div class="text-muted-foreground mt-2">
|
|
357
|
+
<span class="text-claudinho-cyan">✔</span> installed @gitlawb/openclaude@0.1.7
|
|
358
|
+
</div>
|
|
359
|
+
<div class="text-green-400 mt-4">
|
|
360
|
+
<span>➜</span> <span class="text-claudinho-purple">~</span> claudinho
|
|
361
|
+
</div>
|
|
362
|
+
<div class="text-muted-foreground mt-2">
|
|
363
|
+
<span class="text-claudinho-pink">◐</span> connected to <span class="text-white">OpenRouter</span> · qwen/qwen3.6-plus:free
|
|
364
|
+
</div>
|
|
365
|
+
<div class="text-muted-foreground mt-4 text-claudinho-purple">
|
|
366
|
+
claudinho> <span class="text-white">me mostra os arquivos deste projeto</span>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="text-muted-foreground mt-2">
|
|
369
|
+
<span class="text-claudinho-cyan">[Glob]</span> src/commands/**/*.ts → <span class="text-white">1,956 arquivos</span>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="text-muted-foreground mt-1">
|
|
372
|
+
<span class="text-claudinho-cyan">[Bash]</span> find . -name "*.ts" | wc -l → <span class="text-white">1956</span>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="text-muted-foreground mt-4 text-claudinho-purple">
|
|
375
|
+
claudinho> <span class="text-white">quanta memory isso tá gastando?</span>
|
|
376
|
+
</div>
|
|
377
|
+
<div class="text-muted-foreground mt-2">
|
|
378
|
+
<span class="text-claudinho-cyan">[Bash]</span> ps aux | grep claudinho
|
|
379
|
+
</div>
|
|
380
|
+
<div class="text-muted-foreground mt-1">
|
|
381
|
+
PID 12847 · <span class="text-green-400">312MB RSS</span> · CPU 1.2%
|
|
382
|
+
</div>
|
|
383
|
+
<div class="text-muted-foreground mt-4 text-claudinho-purple">
|
|
384
|
+
claudinho> <span class="text-white cursor-blink">_</span>
|
|
385
|
+
</div>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
</section>
|
|
390
|
+
|
|
391
|
+
<!-- ====== TOOLS GRID ====== -->
|
|
392
|
+
<section id="tools" class="py-24 bg-black/20 radial-fade">
|
|
393
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
394
|
+
<div class="text-center mb-16">
|
|
395
|
+
<span class="text-xs uppercase tracking-[0.2em] text-green-400">Capacidades</span>
|
|
396
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">45 Tools — Todas Funcionando</h2>
|
|
397
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">Cada tool com schema Zod validado, AgentTool e MCPTool compatíveis.</p>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
|
401
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="terminal" class="w-5 h-5 mx-auto mb-2 text-claudinho-purple"></i><div class="text-xs font-medium">Bash</div></div>
|
|
402
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="file-text" class="w-5 h-5 mx-auto mb-2 text-claudinho-cyan"></i><div class="text-xs font-medium">FileRead</div></div>
|
|
403
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="file-edit" class="w-5 h-5 mx-auto mb-2 text-claudinho-pink"></i><div class="text-xs font-medium">FileEdit</div></div>
|
|
404
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="file-plus" class="w-5 h-5 mx-auto mb-2 text-green-400"></i><div class="text-xs font-medium">FileWrite</div></div>
|
|
405
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="search" class="w-5 h-5 mx-auto mb-2 text-yellow-400"></i><div class="text-xs font-medium">Glob</div></div>
|
|
406
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="filter" class="w-5 h-5 mx-auto mb-2 text-orange-400"></i><div class="text-xs font-medium">Grep</div></div>
|
|
407
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="globe" class="w-5 h-5 mx-auto mb-2 text-blue-400"></i><div class="text-xs font-medium">WebFetch</div></div>
|
|
408
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="search-check" class="w-5 h-5 mx-auto mb-2 text-teal-400"></i><div class="text-xs font-medium">WebSearch</div></div>
|
|
409
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="bot" class="w-5 h-5 mx-auto mb-2 text-claudinho-purple"></i><div class="text-xs font-medium">Agent</div></div>
|
|
410
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="plug" class="w-5 h-5 mx-auto mb-2 text-claudinho-pink"></i><div class="text-xs font-medium">MCP</div></div>
|
|
411
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="code" class="w-5 h-5 mx-auto mb-2 text-claudinho-cyan"></i><div class="text-xs font-medium">LSP</div></div>
|
|
412
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="list-todo" class="w-5 h-5 mx-auto mb-2 text-green-400"></i><div class="text-xs font-medium">Tasks</div></div>
|
|
413
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="notebook" class="w-5 h-5 mx-auto mb-2 text-yellow-400"></i><div class="text-xs font-medium">NotebookEdit</div></div>
|
|
414
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="image" class="w-5 h-5 mx-auto mb-2 text-pink-400"></i><div class="text-xs font-medium">Imagens</div></div>
|
|
415
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="message-square" class="w-5 h-5 mx-auto mb-2 text-indigo-400"></i><div class="text-xs font-medium">Streaming</div></div>
|
|
416
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="shield-check" class="w-5 h-5 mx-auto mb-2 text-emerald-400"></i><div class="text-xs font-medium">Security(23)</div></div>
|
|
417
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="memory-stick" class="w-5 h-5 mx-auto mb-2 text-lime-400"></i><div class="text-xs font-medium">Memória</div></div>
|
|
418
|
+
<div class="glass-card rounded-lg p-4 text-center"><i data-lucide="git-branch" class="w-5 h-5 mx-auto mb-2 text-amber-400"></i><div class="text-xs font-medium">Git</div></div>
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
</section>
|
|
422
|
+
|
|
423
|
+
<!-- ====== COMMANDS ====== -->
|
|
424
|
+
<section id="commands" class="py-24 relative">
|
|
425
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
426
|
+
<div class="text-center mb-16">
|
|
427
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-pink">Interface</span>
|
|
428
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">~100+ Slash Commands</h2>
|
|
429
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">Fast-path dispatch, 3 tipos de handler, tudo integrado no TUI em React 19 + Yoga WASM.</p>
|
|
430
|
+
</div>
|
|
431
|
+
|
|
432
|
+
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-3 max-w-6xl mx-auto">
|
|
433
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-claudinho-purple">/status</div>
|
|
434
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-claudinho-cyan">/provider</div>
|
|
435
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-claudinho-pink">/model</div>
|
|
436
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-green-400">/config</div>
|
|
437
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-yellow-400">/plan</div>
|
|
438
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-blue-400">/tasks</div>
|
|
439
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-teal-400">/clear</div>
|
|
440
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-orange-400">/exit</div>
|
|
441
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-red-400">/resume</div>
|
|
442
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-indigo-400">/ide</div>
|
|
443
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-emerald-400">/mcp</div>
|
|
444
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-lime-400">/hooks</div>
|
|
445
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-amber-400">/skills</div>
|
|
446
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-rose-400">/vim</div>
|
|
447
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-cyan-300">/diff</div>
|
|
448
|
+
<div class="font-mono text-sm glass-card rounded-lg px-4 py-3 text-violet-400">/+47 mais...</div>
|
|
449
|
+
</div>
|
|
450
|
+
</div>
|
|
451
|
+
</section>
|
|
452
|
+
|
|
453
|
+
<!-- ====== ARCHITECTURE ====== -->
|
|
454
|
+
<section class="py-24 bg-black/20 radial-fade">
|
|
455
|
+
<div class="max-w-7xl mx-auto px-6">
|
|
456
|
+
<div class="text-center mb-16">
|
|
457
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-cyan">Por dentro</span>
|
|
458
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">Arquitetura Técnica</h2>
|
|
459
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">1,956 arquivos TypeScript. Build com Bun.build(). 26 feature flags. Multi-provider real, não fake.</p>
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
<div class="grid md:grid-cols-3 gap-6">
|
|
463
|
+
<div class="glass-card rounded-xl p-6">
|
|
464
|
+
<div class="flex items-center gap-2 mb-4">
|
|
465
|
+
<i data-lucide="layers" class="w-5 h-5 text-claudinho-purple"></i>
|
|
466
|
+
<h3 class="font-semibold">Core</h3>
|
|
467
|
+
</div>
|
|
468
|
+
<div class="space-y-2 text-xs text-muted-foreground">
|
|
469
|
+
<div class="flex justify-between"><span>Arquivos TS</span><span class="text-white font-mono">1,956</span></div>
|
|
470
|
+
<div class="flex justify-between"><span>OpenAI Shim</span><span class="text-white font-mono">1,099 linhas</span></div>
|
|
471
|
+
<div class="flex justify-between"><span>Tools</span><span class="text-white font-mono">45 com Zod</span></div>
|
|
472
|
+
<div class="flex justify-between"><span>Bash Security</span><span class="text-white font-mono">23 checks</span></div>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<div class="glass-card rounded-xl p-6">
|
|
477
|
+
<div class="flex items-center gap-2 mb-4">
|
|
478
|
+
<i data-lucide="server" class="w-5 h-5 text-claudinho-pink"></i>
|
|
479
|
+
<h3 class="font-semibold">Bridge & Session</h3>
|
|
480
|
+
</div>
|
|
481
|
+
<div class="space-y-2 text-xs text-muted-foreground">
|
|
482
|
+
<div class="flex justify-between"><span>Bridge Version</span><span class="text-white font-mono">V1 + V2</span></div>
|
|
483
|
+
<div class="flex justify-between"><span>Auth</span><span class="text-white font-mono">Multi-camada</span></div>
|
|
484
|
+
<div class="flex justify-between"><span>WebSocket</span><span class="text-white font-mono">Reconnect</span></div>
|
|
485
|
+
<div class="flex justify-between"><span>Token Refresh</span><span class="text-white font-mono">Automático</span></div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
|
|
489
|
+
<div class="glass-card rounded-xl p-6">
|
|
490
|
+
<div class="flex items-center gap-2 mb-4">
|
|
491
|
+
<i data-lucide="palette" class="w-5 h-5 text-claudinho-cyan"></i>
|
|
492
|
+
<h3 class="font-semibold">UI / TUI</h3>
|
|
493
|
+
</div>
|
|
494
|
+
<div class="space-y-2 text-xs text-muted-foreground">
|
|
495
|
+
<div class="flex justify-between"><span>Framework</span><span class="text-white font-mono">React 19</span></div>
|
|
496
|
+
<div class="flex justify-between"><span>Layout</span><span class="text-white font-mono">Yoga WASM</span></div>
|
|
497
|
+
<div class="flex justify-between"><span>Componentes</span><span class="text-white font-mono">35+</span></div>
|
|
498
|
+
<div class="flex justify-between"><span>Render</span><span class="text-white font-mono">Double Buffer</span></div>
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
</div>
|
|
502
|
+
</div>
|
|
503
|
+
</section>
|
|
504
|
+
|
|
505
|
+
<!-- ====== SECURITY ====== -->
|
|
506
|
+
<section id="security" class="py-24 relative">
|
|
507
|
+
<div class="max-w-4xl mx-auto px-6">
|
|
508
|
+
<div class="text-center mb-16">
|
|
509
|
+
<span class="text-xs uppercase tracking-[0.2em] text-claudinho-purple">Segurança</span>
|
|
510
|
+
<h2 class="text-3xl md:text-4xl font-bold mt-4">Auditoria Completa de Segurança</h2>
|
|
511
|
+
<p class="text-muted-foreground max-w-xl mx-auto mt-3">15 vulnerabilidades mapeadas. 1 Crítica, 4 Altas, 5 Médias, 1 Baixa. Sabemos onde dói.</p>
|
|
512
|
+
</div>
|
|
513
|
+
|
|
514
|
+
<div class="space-y-4">
|
|
515
|
+
<!-- Critical -->
|
|
516
|
+
<div class="glass-card rounded-xl p-5 border-l-4 border-l-red-500">
|
|
517
|
+
<div class="flex items-center gap-3 mb-2">
|
|
518
|
+
<span class="px-2 py-0.5 rounded bg-red-500/10 text-red-400 text-xs font-bold">CRÍTICO</span>
|
|
519
|
+
<h4 class="font-semibold text-sm">API Key exposta no repo</h4>
|
|
520
|
+
</div>
|
|
521
|
+
<p class="text-xs text-muted-foreground">Chave OpenRouter visível em .env.example. .env tracked no git. Rotacionar imediatamente.</p>
|
|
522
|
+
</div>
|
|
523
|
+
<div class="glass-card rounded-xl p-5 border-l-4 border-l-orange-500">
|
|
524
|
+
<div class="flex items-center gap-3 mb-2">
|
|
525
|
+
<span class="px-2 py-0.5 rounded bg-orange-500/10 text-orange-400 text-xs font-bold">ALTO</span>
|
|
526
|
+
<h4 class="font-semibold text-sm">apiKeyHelper executa código arbitrário</h4>
|
|
527
|
+
</div>
|
|
528
|
+
<p class="text-xs text-muted-foreground">Qualquer projeto pode injetar execução shell. Gated por trust dialog só em sessions interativas.</p>
|
|
529
|
+
</div>
|
|
530
|
+
<div class="glass-card rounded-xl p-5 border-l-4 border-l-yellow-500">
|
|
531
|
+
<div class="flex items-center gap-3 mb-2">
|
|
532
|
+
<span class="px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-400 text-xs font-bold">MÉDIO</span>
|
|
533
|
+
<h4 class="font-semibold text-sm">Sem sandbox no Windows nativo</h4>
|
|
534
|
+
</div>
|
|
535
|
+
<p class="text-xs text-muted-foreground">Sandbox só funciona em macOS (seatbelt) e WSL2 (bubblewrap). No Windows: zero proteção.</p>
|
|
536
|
+
</div>
|
|
537
|
+
<div class="glass-card rounded-xl p-5 border-l-4 border-l-green-500">
|
|
538
|
+
<div class="flex items-center gap-3 mb-2">
|
|
539
|
+
<span class="px-2 py-0.5 rounded bg-green-500/10 text-green-400 text-xs font-bold">AUDITADO</span>
|
|
540
|
+
<h4 class="font-semibold text-sm">Matriz completa documentada</h4>
|
|
541
|
+
</div>
|
|
542
|
+
<p class="text-xs text-muted-foreground">Todas as 15 vulnerabilidades catalogadas com arquivo, linha, severidade e recomendação. Transparência total.</p>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
</div>
|
|
546
|
+
</section>
|
|
547
|
+
|
|
548
|
+
<!-- ====== CTA / FOOTER ====== -->
|
|
549
|
+
<section class="py-24 relative radial-fade">
|
|
550
|
+
<div class="max-w-3xl mx-auto text-center px-6">
|
|
551
|
+
<h2 class="text-4xl md:text-5xl font-bold mb-6">Pronto pra rodar?</h2>
|
|
552
|
+
<p class="text-lg text-muted-foreground mb-10">Instala, configura teu provider favorito e bora codar. É MIT, é open, é teu.</p>
|
|
553
|
+
|
|
554
|
+
<div class="glass rounded-xl border border-white/10 p-6 text-left font-mono text-sm max-w-lg mx-auto mb-8">
|
|
555
|
+
<div class="text-muted-foreground mb-1 text-xs"># Instalação</div>
|
|
556
|
+
<div class="text-green-400">npm i -g <span class="text-white">@gitlawb/openclaude</span></div>
|
|
557
|
+
<div class="mt-4 text-muted-foreground mb-1 text-xs"># Ou clona o repo</div>
|
|
558
|
+
<div class="text-green-400">git clone <span class="text-white">https://github.com/Gitlawb/openclaude</span></div>
|
|
559
|
+
<div class="mt-4 text-muted-foreground mb-1 text-xs"># Configura teu provider</div>
|
|
560
|
+
<div class="text-green-400">export OPENAI_BASE_URL="<span class="text-white">https://api.openrouter.ai/v1</span>"</div>
|
|
561
|
+
<div class="text-green-400">export OPENAI_API_KEY="<span class="text-claudinho-pink">sua-key-aqui</span>"</div>
|
|
562
|
+
<div class="mt-2 text-green-400">claudinho</div>
|
|
563
|
+
</div>
|
|
564
|
+
|
|
565
|
+
<a href="https://github.com/Gitlawb/openclaude" target="_blank" class="inline-flex items-center gap-2 px-8 py-4 rounded-xl bg-gradient-to-r from-claudinho-purple to-claudinho-pink font-semibold text-sm hover:opacity-90 transition glow-hover">
|
|
566
|
+
<i data-lucide="github" class="w-5 h-5"></i>
|
|
567
|
+
Ver no GitHub
|
|
568
|
+
</a>
|
|
569
|
+
|
|
570
|
+
<div class="mt-20 pt-10 border-t border-white/5 text-xs text-muted-foreground">
|
|
571
|
+
<p>Claudinho v0.1.7 · Fork do Claude Code via source map · 31/03/2026</p>
|
|
572
|
+
<p class="mt-1">NÃO afiliado ou endossado pela Anthropic · MIT License</p>
|
|
573
|
+
<p class="mt-4 text-muted-foreground/50">Feito com 💜 e muita gambiarra brasileira 🇧🇷</p>
|
|
574
|
+
</div>
|
|
575
|
+
</div>
|
|
576
|
+
</section>
|
|
577
|
+
|
|
578
|
+
<script>
|
|
579
|
+
// Init Lucide icons
|
|
580
|
+
lucide.createIcons();
|
|
581
|
+
|
|
582
|
+
// Intersection Observer for scroll animations
|
|
583
|
+
const observer = new IntersectionObserver((entries) => {
|
|
584
|
+
entries.forEach(entry => {
|
|
585
|
+
if (entry.isIntersecting) {
|
|
586
|
+
entry.target.classList.add('slide-up');
|
|
587
|
+
entry.target.style.opacity = '1';
|
|
588
|
+
}
|
|
589
|
+
});
|
|
590
|
+
}, { threshold: 0.1 });
|
|
591
|
+
|
|
592
|
+
document.querySelectorAll('section:not(:first-child)').forEach(s => {
|
|
593
|
+
s.style.opacity = '0';
|
|
594
|
+
observer.observe(s);
|
|
595
|
+
});
|
|
596
|
+
|
|
597
|
+
// Smooth scroll for nav links
|
|
598
|
+
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
|
599
|
+
a.addEventListener('click', e => {
|
|
600
|
+
e.preventDefault();
|
|
601
|
+
const target = document.querySelector(a.getAttribute('href'));
|
|
602
|
+
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
603
|
+
});
|
|
604
|
+
});
|
|
605
|
+
</script>
|
|
606
|
+
</body>
|
|
607
|
+
</html>
|