Spaces:
Running
Running
File size: 19,860 Bytes
24b1dcb | 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 | <!DOCTYPE html>
<html lang="it" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Condorhacker AI – Crea App Web con la Voce</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<script src="https://unpkg.com/feather-icons"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
.gradient-text {
background: linear-gradient(90deg, #a855f7, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass {
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.neon-border {
box-shadow: 0 0 15px rgba(168, 85, 247, 0.5), 0 0 30px rgba(59, 130, 246, 0.3);
}
.hover-glow:hover {
box-shadow: 0 0 25px rgba(168, 85, 247, 0.6), 0 0 50px rgba(59, 130, 246, 0.4);
}
.typing-animation {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #a855f7;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
width: 0;
margin: 0 auto;
max-width: 600px;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #a855f7 }
}
</style>
</head>
<body class="bg-slate-900 text-gray-100 overflow-x-hidden">
<!-- Navbar -->
<nav class="fixed w-full z-50 bg-slate-900/80 backdrop-blur-lg border-b border-slate-700">
<div class="container mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center">
<span class="text-white font-bold text-lg">CH</span>
</div>
<span class="text-xl font-bold gradient-text">Condorhacker AI</span>
</div>
<div class="hidden md:flex space-x-10">
<a href="#home" class="hover:text-purple-400 transition">Home</a>
<a href="#builder" class="hover:text-purple-400 transition">Builder</a>
<a href="#avatar" class="hover:text-purple-400 transition">Esperti AI</a>
<a href="#pricing" class="hover:text-purple-400 transition">Pricing</a>
</div>
<div>
<a href="#builder" class="bg-gradient-to-r from-purple-600 to-blue-500 px-6 py-2 rounded-full font-medium hover:shadow-lg hover:shadow-purple-500/30 transition">Inizia Ora</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="pt-32 pb-20 px-6 text-center relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-purple-900/20 to-transparent pointer-events-none"></div>
<div class="container mx-auto max-w-4xl relative z-10">
<h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight">
<span class="block">Crea App Web Complete</span>
<span class="gradient-text">Semplicemente Descrivendole</span>
</h1>
<p class="text-xl text-gray-300 mb-10 leading-relaxed">
Condorhacker AI trasforma le tue idee in applicazioni web funzionanti, dashboard, e-commerce e sistemi gestionali – tutto con parole, senza codice.
</p>
<div class="mb-12">
<div class="bg-slate-800 glass p-6 rounded-2xl border border-slate-700 neon-border hover-glow transition cursor-pointer">
<p class="font-mono text-green-400 text-sm">> Inserisci comando:</p>
<p class="font-mono text-white text-lg typing-animation">
"Crea una dashboard di analytics per e-commerce con login, grafici interattivi e integrazione Stripe"
</p>
</div>
</div>
<a href="#builder" class="bg-gradient-to-r from-purple-600 to-blue-500 px-10 py-4 rounded-full text-lg font-semibold hover:scale-105 transition transform shadow-xl shadow-purple-500/20">
Prova Gratuitamente →
</a>
</div>
</section>
<!-- Features -->
<section class="py-20 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">Cosa Puoi Fare con Condorhacker AI</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
<div class="glass p-8 rounded-2xl border border-slate-600 hover-glow transition group">
<div class="w-14 h-14 bg-purple-600 rounded-xl flex items-center justify-center mb-5 text-white group-hover:scale-110 transition">
<i data-feather="zap" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Crea da Zero</h3>
<p class="text-gray-300">Descrivi l’app che vuoi realizzare: Condorhacker genera il codice, il design e la logica completa in secondi.</p>
</div>
<div class="glass p-8 rounded-2xl border border-slate-600 hover-glow transition group">
<div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center mb-5 text-white group-hover:scale-110 transition">
<i data-feather="copy" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Clona e Personalizza</h3>
<p class="text-gray-300">Incolla l’URL di un sito esistente e personalizzalo con comandi testuali. Cambia stile, funzioni, contenuti.</p>
</div>
<div class="glass p-8 rounded-2xl border border-slate-600 hover-glow transition group">
<div class="w-14 h-14 bg-indigo-600 rounded-xl flex items-center justify-center mb-5 text-white group-hover:scale-110 transition">
<i data-feather="database" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Database e Login</h3>
<p class="text-gray-300">Aggiungi autenticazione, aree riservate, memorizzazione dati e relazioni complesse con una frase.</p>
</div>
<div class="glass p-8 rounded-2xl border border-slate-600 hover-glow transition group">
<div class="w-14 h-14 bg-pink-600 rounded-xl flex items-center justify-center mb-5 text-white group-hover:scale-110 transition">
<i data-feather="credit-card" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Pagamenti & API</h3>
<p class="text-gray-300">Integra Stripe, PayPal, WhatsApp, Mailchimp o qualsiasi API esterna con un semplice comando testuale.</p>
</div>
<div class="glass p-8 rounded-2xl border border-slate-600 hover-glow transition group">
<div class="w-14 h-14 bg-teal-600 rounded-xl flex items-center justify-center mb-5 text-white group-hover:scale-110 transition">
<i data-feather="layout" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Componenti Dinamici</h3>
<p class="text-gray-300">Genera moduli, tabelle, chatbot, carrelli e pagine con animazioni progressive.</p>
</div>
<div class="glass p-8 rounded-2xl border border-slate-600 hover-glow transition group">
<div class="w-14 h-14 bg-amber-600 rounded-xl flex items-center justify-center mb-5 text-white group-hover:scale-110 transition">
<i data-feather="users" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Sistemi Professionali</h3>
<p class="text-gray-300">CRM, ERP, e-learning, gestionali, blog dinamici e pannelli admin pronti in minuti.</p>
</div>
</div>
</div>
</section>
<!-- Builder Interface -->
<section id="builder" class="py-20 px-6 relative">
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent pointer-events-none z-0"></div>
<div class="container mx-auto max-w-5xl relative z-10 glass rounded-3xl p-8 md:p-12 border border-slate-700">
<h2 class="text-4xl font-bold mb-10 text-center">Il Tuo Assistente di Sviluppo AI</h2>
<div class="bg-slate-800 rounded-2xl p-6 h-96 md:h-[500px] flex flex-col overflow-hidden shadow-inner">
<div class="flex-1 overflow-y-auto space-y-6 pr-2 mb-4 scrollbar-thin scrollbar-thumb-purple-600">
<div class="bg-purple-600 text-white p-4 rounded-2xl max-w-xs ml-2">
Ciao! Sono Andrea, il tuo esperto full-stack. Cosa vuoi creare oggi?
</div>
<div class="bg-slate-700 text-gray-100 p-4 rounded-2xl max-w-md ml-auto mr-2">
Vorrei un gestionale per un centro estetico, con appuntamenti, clienti e pagamenti.
</div>
<div class="bg-blue-600 text-white p-4 rounded-2xl max-w-xs ml-2 animate-pulse">
Sto generando il sistema... creazione del database, interfaccia utente, integrazione calendario e Stripe.<br/><br/>✔️ Appuntamenti<br/>✔️ Clienti<br/>✔️ Login<br/>✔️ Pagamenti
</div>
</div>
<div class="flex items-center bg-slate-700 p-3 rounded-xl">
<input type="text" placeholder="Scrivi qui il tuo comando..." class="flex-1 bg-transparent outline-none text-white px-2" value="Crea un blog tematico su viaggi con newsletter integrata..." />
<button class="bg-gradient-to-r from-purple-600 to-blue-500 p-3 rounded-lg ml-2 hover:shadow-lg">
<i data-feather="send" class="w-5 h-5 text-white"></i>
</button>
</div>
</div>
<p class="text-center mt-6 text-gray-400">Parla. Crea. Pubblica. Senza scrivere una riga di codice.</p>
</div>
</section>
<!-- Avatar Showcase -->
<section id="avatar" class="py-20 px-6 bg-slate-800/30">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-6 gradient-text">I Tuoi Tutor Esperti AI</h2>
<p class="text-center text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
17 avatar con competenze specifiche, voci umane e personalità reali. Ti guidano, insegnano e costruiscono con te.
</p>
<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-10">
<!-- Avatar Cards -->
<div class="glass p-5 rounded-2xl text-center group hover-glow border border-slate-600 transition">
<img src="https://i.pravatar.cc/150?img=21" alt="Aurora" class="w-20 h-20 rounded-full mx-auto mb-4 object-cover border-2 border-purple-500">
<h3 class="font-bold text-lg">Aurora</h3>
<p class="text-sm text-gray-400">Marketing Digitale</p>
</div>
<div class="glass p-5 rounded-2xl text-center group hover-glow border border-slate-600 transition">
<img src="https://i.pravatar.cc/150?img=32" alt="Caterina" class="w-20 h-20 rounded-full mx-auto mb-4 object-cover border-2 border-blue-500">
<h3 class="font-bold text-lg">Caterina</h3>
<p class="text-sm text-gray-400">UX/UI Designer</p>
</div>
<div class="glass p-5 rounded-2xl text-center group hover-glow border border-slate-600 transition">
<img src="https://i.pravatar.cc/150?img=28" alt="Elisa" class="w-20 h-20 rounded-full mx-auto mb-4 object-cover border-2 border-pink-500">
<h3 class="font-bold text-lg">Elisa</h3>
<p class="text-sm text-gray-400">Psicologia & Comunicazione</p>
</div>
<div class="glass p-5 rounded-2xl text-center group hover-glow border border-slate-600 transition">
<img src="https://i.pravatar.cc/150?img=26" alt="Andrea" class="w-20 h-20 rounded-full mx-auto mb-4 object-cover border-2 border-teal-500">
<h3 class="font-bold text-lg">Andrea</h3>
<p class="text-sm text-gray-400">Sviluppatore Full-Stack</p>
</div>
<div class="glass p-5 rounded-2xl text-center group hover-glow border border-slate-600 transition">
<img src="https://i.pravatar.cc/150?img=36" alt="Sofia" class="w-20 h-20 rounded-full mx-auto mb-4 object-cover border-2 border-amber-500">
<h3 class="font-bold text-lg">Sofia</h3>
<p class="text-sm text-gray-400">Affari e Strategia</p>
</div>
</div>
<div class="text-center">
<a href="#" class="text-purple-400 hover:underline text-lg">Mostra tutti e 17 gli esperti →</a>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-20 px-6">
<div class="container mx-auto max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-6 gradient-text">Piani Semplici, Crescita Illimitata</h2>
<p class="text-center text-xl text-gray-300 mb-16">25 crediti gratuiti ogni mese. Nessun costo nascosto.</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Free -->
<div class="glass p-8 rounded-3xl border border-slate-600 text-center flex flex-col transition hover:scale-105">
<h3 class="text-2xl font-bold mb-2">Free</h3>
<div class="text-5xl font-bold mb-4">0<span class="text-sm text-gray-400">€</span></div>
<p class="text-gray-300 mb-6">Per iniziare e provare</p>
<ul class="space-y-3 mb-8 text-left">
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> 25 crediti/mese</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Interfaccia Chat</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Export HTML/CSS/JS</li>
</ul>
<a href="#" class="mt-auto bg-gray-700 hover:bg-gray-600 py-3 rounded-xl font-medium">In uso</a>
</div>
<!-- Base -->
<div class="glass p-8 rounded-3xl border border-purple-500 text-center flex flex-col relative transform hover:scale-105 transition neon-border">
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
<span class="bg-gradient-to-r from-purple-600 to-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">Più Popolare</span>
</div>
<h3 class="text-2xl font-bold mb-2 mt-6">Base</h3>
<div class="text-5xl font-bold mb-4">30<span class="text-sm text-gray-400">€</span></div>
<p class="text-gray-300 mb-6">Per creatori seri</p>
<ul class="space-y-3 mb-8 text-left">
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> 200 crediti/mese</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Clone & Customize</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Database semplice</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Assistenza base</li>
</ul>
<a href="#" class="mt-auto bg-gradient-to-r from-purple-600 to-blue-500 py-3 rounded-xl font-medium hover:shadow-lg">Scegli</a>
</div>
<!-- Pro -->
<div class="glass p-8 rounded-3xl border border-blue-500 text-center flex flex-col transition hover:scale-105">
<h3 class="text-2xl font-bold mb-2">Pro</h3>
<div class="text-5xl font-bold mb-4">50<span class="text-sm text-gray-400">€</span></div>
<p class="text-gray-300 mb-6">Per professionisti</p>
<ul class="space-y-3 mb-8 text-left">
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> 500 crediti/mese</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Login & Auth</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> API esterne</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Supporto prioritario</li>
</ul>
<a href="#" class="mt-auto bg-blue-600 hover:bg-blue-500 py-3 rounded-xl font-medium">Scegli</a>
</div>
<!-- Enterprise -->
<div class="glass p-8 rounded-3xl border border-amber-500 text-center flex flex-col transition hover:scale-105">
<h3 class="text-2xl font-bold mb-2">Enterprise</h3>
<div class="text-5xl font-bold mb-4">150<span class="text-sm text-gray-400">€</span></div>
<p class="text-gray-300 mb-6">Per aziende e team</p>
<ul class="space-y-3 mb-8 text-left">
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> 2000 crediti/mese</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Team collaboration</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Integrations avanzate</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i> Onboarding dedicato</li>
</ul>
<a href="#" class="mt-auto bg-amber-600 hover:bg-amber-500 py-3 rounded-xl font-medium">Contattaci</a>
</div>
</div>
</div>
</section>
<!-- CTA Footer -->
<section class="py-20 px-6 text-center">
<div class="container mx-auto max-w-4xl glass rounded-3xl p-12 border border-slate-600">
<h2 class="text-4xl font-bold mb-6">Pronto a Creare App Senza Codice?</h2>
<p class="text-xl text-gray-300 mb-10">
Inizia subito con 25 crediti gratuiti. Nessuna carta richiesta.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-6">
<a href="#builder" class="bg-gradient-to-r from-purple-600 to-blue-500 px-8 py-4 rounded-full text-lg font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition">
Inizia Gratuitamente
</a>
<a href="#" class="border border-slate-500 px-8 py-4 rounded-full text-lg font-medium hover:bg-slate-800 transition">
Richiedi Demo
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-6 border-t border-slate-800">
<div class="container mx-auto max-w-6xl text-center text-gray-500">
<div class="flex items-center justify-center space-x-2 mb-4">
<div class="w-8 h-8 rounded-md bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center">
<span class="text-white font-bold text-sm">CH</span>
</div>
<span class="text-lg font-bold">Condorhacker AI</span>
</div>
<p>Il futuro dello sviluppo software è nel linguaggio naturale.</p>
<div class="mt-6 space-x-6">
<a href="#" class="hover:text-purple-400 transition">Termini</a>
<a href="#" class="hover:text-purple-400 transition">Privacy</a>
<a href="#" class="hover:text-purple-400 transition">Supporto</a>
</div>
</div>
</footer>
<!-- Feather Icons Script -->
<script>
feather.replace();
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=condorhacker/condorhacker-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |