Hugging Face's logo

Spaces:
Kako2050
/
human-core
Running

App Files Community
Kako2050 commited on
Commit
eaaa4f3
·
verified ·
1 Parent(s): a339801

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +806 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Human Core
3
- emoji: 📊
4
- colorFrom: pink
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: human-core
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,806 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Human Core - Consultoría Transformacional</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, rgba(237, 233, 223, 0.9) 0%, rgba(247, 244, 237, 0.9) 100%);
19
+ }
20
+
21
+ .nav-link {
22
+ position: relative;
23
+ }
24
+
25
+ .nav-link::after {
26
+ content: '';
27
+ position: absolute;
28
+ width: 0;
29
+ height: 2px;
30
+ bottom: -2px;
31
+ left: 0;
32
+ background-color: #ea580c;
33
+ transition: width 0.3s ease;
34
+ }
35
+
36
+ .nav-link:hover::after {
37
+ width: 100%;
38
+ }
39
+
40
+ .active-nav::after {
41
+ content: '';
42
+ position: absolute;
43
+ width: 100%;
44
+ height: 2px;
45
+ bottom: -2px;
46
+ left: 0;
47
+ background-color: #ea580c;
48
+ }
49
+
50
+ .service-card:hover {
51
+ transform: translateY(-5px);
52
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
53
+ }
54
+
55
+ .phase-diagram {
56
+ position: relative;
57
+ }
58
+
59
+ .phase-connector {
60
+ position: absolute;
61
+ top: 50%;
62
+ width: 100px;
63
+ height: 2px;
64
+ background-color: #d6d3d1;
65
+ }
66
+
67
+ @media (max-width: 768px) {
68
+ .phase-connector {
69
+ display: none;
70
+ }
71
+ }
72
+
73
+ .logo-icon {
74
+ position: relative;
75
+ }
76
+
77
+ .logo-icon::before {
78
+ content: '';
79
+ position: absolute;
80
+ width: 100%;
81
+ height: 100%;
82
+ border: 2px solid #ea580c;
83
+ border-radius: 50%;
84
+ animation: pulse 2s infinite;
85
+ }
86
+
87
+ @keyframes pulse {
88
+ 0% {
89
+ transform: scale(1);
90
+ opacity: 1;
91
+ }
92
+ 70% {
93
+ transform: scale(1.3);
94
+ opacity: 0.5;
95
+ }
96
+ 100% {
97
+ transform: scale(1.4);
98
+ opacity: 0;
99
+ }
100
+ }
101
+ </style>
102
+ </head>
103
+ <body class="bg-stone-50 text-stone-800">
104
+ <!-- Header/Navigation -->
105
+ <header class="sticky top-0 z-50 bg-white shadow-sm">
106
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
107
+ <div class="flex items-center">
108
+ <div class="logo-icon w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center mr-3">
109
+ <i data-lucide="atom" class="text-white"></i>
110
+ </div>
111
+ <h1 class="text-xl font-bold text-orange-600">Human Core</h1>
112
+ </div>
113
+
114
+ <nav class="hidden md:flex space-x-8">
115
+ <a href="#inicio" class="nav-link text-stone-700 hover:text-orange-600 font-medium transition-colors duration-300">Inicio</a>
116
+ <a href="#metodologia" class="nav-link text-stone-700 hover:text-orange-600 font-medium transition-colors duration-300">Metodología</a>
117
+ <a href="#servicios" class="nav-link text-stone-700 hover:text-orange-600 font-medium transition-colors duration-300">Servicios</a>
118
+ <a href="#contacto" class="nav-link text-stone-700 hover:text-orange-600 font-medium transition-colors duration-300">Contacto</a>
119
+ </nav>
120
+
121
+ <button id="mobile-menu-button" class="md:hidden text-stone-700">
122
+ <i data-lucide="menu"></i>
123
+ </button>
124
+ </div>
125
+
126
+ <!-- Mobile Menu -->
127
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
128
+ <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
129
+ <a href="#inicio" class="py-2 text-stone-700 hover:text-orange-600">Inicio</a>
130
+ <a href="#metodologia" class="py-2 text-stone-700 hover:text-orange-600">Metodología</a>
131
+ <a href="#servicios" class="py-2 text-stone-700 hover:text-orange-600">Servicios</a>
132
+ <a href="#contacto" class="py-2 text-stone-700 hover:text-orange-600">Contacto</a>
133
+ </div>
134
+ </div>
135
+ </header>
136
+
137
+ <main>
138
+ <!-- Hero Section -->
139
+ <section id="inicio" class="hero-gradient py-20 md:py-32">
140
+ <div class="container mx-auto px-4">
141
+ <div class="flex flex-col md:flex-row items-center">
142
+ <div class="md:w-1/2 mb-12 md:mb-0">
143
+ <h1 class="text-4xl md:text-5xl font-bold text-stone-800 mb-6 leading-tight">
144
+ Transformación humana <span class="text-orange-600">radical</span> para individuos y organizaciones
145
+ </h1>
146
+ <p class="text-lg text-stone-600 mb-8">
147
+ Human Core es una metodología integral que combina coaching sistémico, desarrollo humano y ética en IA para crear cambios profundos y sostenibles.
148
+ </p>
149
+ <div class="flex space-x-4">
150
+ <a href="#contacto" class="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-300">
151
+ Contactar
152
+ </a>
153
+ <a href="#metodologia" class="border border-orange-600 text-orange-600 hover:bg-orange-50 px-6 py-3 rounded-lg font-medium transition-colors duration-300">
154
+ Conocer más
155
+ </a>
156
+ </div>
157
+ </div>
158
+ <div class="md:w-1/2 flex justify-center">
159
+ <div class="relative">
160
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-orange-100 rounded-full flex items-center justify-center">
161
+ <i data-lucide="users" class="w-32 h-32 text-orange-600"></i>
162
+ </div>
163
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-md">
164
+ <div class="flex items-center">
165
+ <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
166
+ <i data-lucide="lightbulb" class="text-orange-600"></i>
167
+ </div>
168
+ <p class="text-sm font-medium">"El cambio comienza desde el núcleo humano"</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Methodology Section -->
178
+ <section id="metodologia" class="py-20 bg-white">
179
+ <div class="container mx-auto px-4">
180
+ <div class="text-center mb-16">
181
+ <h2 class="text-3xl md:text-4xl font-bold text-stone-800 mb-4">Nuestra Metodología</h2>
182
+ <div class="w-20 h-1 bg-orange-600 mx-auto"></div>
183
+ </div>
184
+
185
+ <div class="mb-16">
186
+ <h3 class="text-2xl font-semibold text-stone-800 mb-6">Human Core</h3>
187
+ <p class="text-stone-600 mb-6 leading-relaxed">
188
+ Una metodología que integra de manera holística el Desarrollo Ético Humano (DEH) y los principios de Inteligencia Artificial Centrada en lo Humano (HCAI). Este enfoque radicalmente humano busca:
189
+ </p>
190
+ <ul class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
191
+ <li class="bg-stone-50 p-6 rounded-lg">
192
+ <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-4">
193
+ <i data-lucide="target" class="text-orange-600"></i>
194
+ </div>
195
+ <h4 class="font-semibold text-lg mb-2">Autoconocimiento profundo</h4>
196
+ <p class="text-stone-600">Exploración de los patrones fundamentales que definen nuestro ser.</p>
197
+ </li>
198
+ <li class="bg-stone-50 p-6 rounded-lg">
199
+ <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-4">
200
+ <i data-lucide="network" class="text-orange-600"></i>
201
+ </div>
202
+ <h4 class="font-semibold text-lg mb-2">Transformación sistémica</h4>
203
+ <p class="text-stone-600">Cambios que impactan al individuo, sus relaciones y su entorno.</p>
204
+ </li>
205
+ <li class="bg-stone-50 p-6 rounded-lg">
206
+ <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-4">
207
+ <i data-lucide="cpu" class="text-orange-600"></i>
208
+ </div>
209
+ <h4 class="font-semibold text-lg mb-2">Integración tecnológica ética</h4>
210
+ <p class="text-stone-600">Uso responsable de herramientas digitales para el desarrollo humano.</p>
211
+ </li>
212
+ </ul>
213
+ </div>
214
+
215
+ <div class="mb-16">
216
+ <h3 class="text-2xl font-semibold text-stone-800 mb-6">Las 4 Fases del Proceso</h3>
217
+
218
+ <div class="phase-diagram grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
219
+ <!-- Phase 1 -->
220
+ <div class="bg-orange-50 p-6 rounded-lg relative">
221
+ <div class="w-14 h-14 bg-orange-600 rounded-full flex items-center justify-center text-white mb-4 mx-auto">
222
+ <span class="font-bold">1</span>
223
+ </div>
224
+ <h4 class="font-semibold text-lg mb-2 text-center">Exploración</h4>
225
+ <p class="text-stone-600 text-center">Identificación de patrones y sistemas actuales.</p>
226
+ </div>
227
+
228
+ <!-- Connector -->
229
+ <div class="phase-connector left-1/2 transform -translate-y-1/2 hidden md:block"></div>
230
+
231
+ <!-- Phase 2 -->
232
+ <div class="bg-orange-50 p-6 rounded-lg relative">
233
+ <div class="w-14 h-14 bg-orange-600 rounded-full flex items-center justify-center text-white mb-4 mx-auto">
234
+ <span class="font-bold">2</span>
235
+ </div>
236
+ <h4 class="font-semibold text-lg mb-2 text-center">Desconstrucción</h4>
237
+ <p class="text-stone-600 text-center">Cuestionamiento de creencias y estructuras limitantes.</p>
238
+ </div>
239
+
240
+ <!-- Connector -->
241
+ <div class="phase-connector left-1/2 transform -translate-y-1/2 hidden md:block"></div>
242
+
243
+ <!-- Phase 3 -->
244
+ <div class="bg-orange-50 p-6 rounded-lg relative">
245
+ <div class="w-14 h-14 bg-orange-600 rounded-full flex items-center justify-center text-white mb-4 mx-auto">
246
+ <span class="font-bold">3</span>
247
+ </div>
248
+ <h4 class="font-semibold text-lg mb-2 text-center">Reconstrucción</h4>
249
+ <p class="text-stone-600 text-center">Creación de nuevos marcos y patrones saludables.</p>
250
+ </div>
251
+
252
+ <!-- Connector -->
253
+ <div class="phase-connector left-1/2 transform -translate-y-1/2 hidden md:block"></div>
254
+
255
+ <!-- Phase 4 -->
256
+ <div class="bg-orange-50 p-6 rounded-lg relative">
257
+ <div class="w-14 h-14 bg-orange-600 rounded-full flex items-center justify-center text-white mb-4 mx-auto">
258
+ <span class="font-bold">4</span>
259
+ </div>
260
+ <h4 class="font-semibold text-lg mb-2 text-center">Integración</h4>
261
+ <p class="text-stone-600 text-center">Aplicación sostenible en la vida cotidiana.</p>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
267
+ <div>
268
+ <h3 class="text-2xl font-semibold text-stone-800 mb-6">DEH - Desarrollo Ético Humano</h3>
269
+ <p class="text-stone-600 mb-4 leading-relaxed">
270
+ Un marco conceptual que prioriza el florecimiento humano integral, considerando dimensiones físicas, emocionales, cognitivas, relacionales y espirituales.
271
+ </p>
272
+ <div class="bg-stone-50 p-6 rounded-lg">
273
+ <h4 class="font-semibold text-lg mb-3 text-orange-600">Principios clave:</h4>
274
+ <ul class="space-y-3">
275
+ <li class="flex items-start">
276
+ <i data-lucide="check-circle" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
277
+ <span class="text-stone-600">Autonomía con responsabilidad</span>
278
+ </li>
279
+ <li class="flex items-start">
280
+ <i data-lucide="check-circle" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
281
+ <span class="text-stone-600">Dignidad humana inalienable</span>
282
+ </li>
283
+ <li class="flex items-start">
284
+ <i data-lucide="check-circle" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
285
+ <span class="text-stone-600">Interdependencia ecológica</span>
286
+ </li>
287
+ <li class="flex items-start">
288
+ <i data-lucide="check-circle" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
289
+ <span class="text-stone-600">Justicia generativa</span>
290
+ </li>
291
+ </ul>
292
+ </div>
293
+ </div>
294
+
295
+ <div>
296
+ <h3 class="text-2xl font-semibold text-stone-800 mb-6">HCAI - Human-Centered Artificial Intelligence</h3>
297
+ <p class="text-stone-600 mb-4 leading-relaxed">
298
+ Enfoque que asegura que el desarrollo y aplicación de tecnologías de IA estén alineados con valores humanos fundamentales y promuevan el bienestar.
299
+ </p>
300
+ <div class="bg-stone-50 p-6 rounded-lg">
301
+ <h4 class="font-semibold text-lg mb-3 text-orange-600">Pilares fundamentales:</h4>
302
+ <ul class="space-y-3">
303
+ <li class="flex items-start">
304
+ <i data-lucide="cpu" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
305
+ <span class="text-stone-600">Transparencia y explicabilidad</span>
306
+ </li>
307
+ <li class="flex items-start">
308
+ <i data-lucide="shield" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
309
+ <span class="text-stone-600">Privacidad y seguridad</span>
310
+ </li>
311
+ <li class="flex items-start">
312
+ <i data-lucide="scale" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
313
+ <span class="text-stone-600">Equidad y no discriminación</span>
314
+ </li>
315
+ <li class="flex items-start">
316
+ <i data-lucide="heart" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
317
+ <span class="text-stone-600">Bienestar humano como objetivo</span>
318
+ </li>
319
+ </ul>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </section>
325
+
326
+ <!-- Services Section -->
327
+ <section id="servicios" class="py-20 bg-stone-50">
328
+ <div class="container mx-auto px-4">
329
+ <div class="text-center mb-16">
330
+ <h2 class="text-3xl md:text-4xl font-bold text-stone-800 mb-4">Nuestros Servicios</h2>
331
+ <div class="w-20 h-1 bg-orange-600 mx-auto"></div>
332
+ </div>
333
+
334
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
335
+ <!-- Service 1 -->
336
+ <div class="service-card bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
337
+ <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6">
338
+ <i data-lucide="users" class="text-orange-600 w-6 h-6"></i>
339
+ </div>
340
+ <h3 class="text-xl font-semibold mb-3">Coaching Sistémico Organizacional</h3>
341
+ <p class="text-stone-600 mb-4">
342
+ Intervenciones diseñadas para transformar culturas organizacionales desde su núcleo, integrando equipos, procesos y propósitos.
343
+ </p>
344
+ <ul class="space-y-2 mb-6">
345
+ <li class="flex items-start">
346
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
347
+ <span class="text-stone-600">Diagnóstico cultural profundo</span>
348
+ </li>
349
+ <li class="flex items-start">
350
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
351
+ <span class="text-stone-600">Diseño de intervenciones personalizadas</span>
352
+ </li>
353
+ <li class="flex items-start">
354
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
355
+ <span class="text-stone-600">Acompañamiento en la implementación</span>
356
+ </li>
357
+ </ul>
358
+ <a href="#contacto" class="text-orange-600 font-medium inline-flex items-center hover:text-orange-700 transition-colors duration-300">
359
+ Más información
360
+ <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i>
361
+ </a>
362
+ </div>
363
+
364
+ <!-- Service 2 -->
365
+ <div class="service-card bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
366
+ <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6">
367
+ <i data-lucide="user" class="text-orange-600 w-6 h-6"></i>
368
+ </div>
369
+ <h3 class="text-xl font-semibold mb-3">Coaching Ejecutivo con Enfoque DEH</h3>
370
+ <p class="text-stone-600 mb-4">
371
+ Desarrollo de líderes conscientes que integran excelencia operativa con responsabilidad humana y ecológica.
372
+ </p>
373
+ <ul class="space-y-2 mb-6">
374
+ <li class="flex items-start">
375
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
376
+ <span class="text-stone-600">Programas individuales y grupales</span>
377
+ </li>
378
+ <li class="flex items-start">
379
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
380
+ <span class="text-stone-600">Herramientas de autoconocimiento avanzado</span>
381
+ </li>
382
+ <li class="flex items-start">
383
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
384
+ <span class="text-stone-600">Seguimiento con métricas humanas</span>
385
+ </li>
386
+ </ul>
387
+ <a href="#contacto" class="text-orange-600 font-medium inline-flex items-center hover:text-orange-700 transition-colors duration-300">
388
+ Más información
389
+ <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i>
390
+ </a>
391
+ </div>
392
+
393
+ <!-- Service 3 -->
394
+ <div class="service-card bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
395
+ <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6">
396
+ <i data-lucide="cpu" class="text-orange-600 w-6 h-6"></i>
397
+ </div>
398
+ <h3 class="text-xl font-semibold mb-3">Implementación HCAI</h3>
399
+ <p class="text-stone-600 mb-4">
400
+ Asesoría para integrar principios de Inteligencia Artificial Centrada en lo Humano en procesos organizacionales.
401
+ </p>
402
+ <ul class="space-y-2 mb-6">
403
+ <li class="flex items-start">
404
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
405
+ <span class="text-stone-600">Auditoría ética de sistemas de IA</span>
406
+ </li>
407
+ <li class="flex items-start">
408
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
409
+ <span class="text-stone-600">Diseño de políticas HCAI</span>
410
+ </li>
411
+ <li class="flex items-start">
412
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
413
+ <span class="text-stone-600">Capacitación en ética tecnológica</span>
414
+ </li>
415
+ </ul>
416
+ <a href="#contacto" class="text-orange-600 font-medium inline-flex items-center hover:text-orange-700 transition-colors duration-300">
417
+ Más información
418
+ <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i>
419
+ </a>
420
+ </div>
421
+
422
+ <!-- Service 4 -->
423
+ <div class="service-card bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
424
+ <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6">
425
+ <i data-lucide="home" class="text-orange-600 w-6 h-6"></i>
426
+ </div>
427
+ <h3 class="text-xl font-semibold mb-3">Transformación Familiar Sistémica</h3>
428
+ <p class="text-stone-600 mb-4">
429
+ Procesos para familias que buscan sanar dinámicas relacionales y crear entornos nutritivos para todos sus miembros.
430
+ </p>
431
+ <ul class="space-y-2 mb-6">
432
+ <li class="flex items-start">
433
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
434
+ <span class="text-stone-600">Terapia familiar con enfoque sistémico</span>
435
+ </li>
436
+ <li class="flex items-start">
437
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
438
+ <span class="text-stone-600">Talleres para padres conscientes</span>
439
+ </li>
440
+ <li class="flex items-start">
441
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
442
+ <span class="text-stone-600">Acompañamiento en transiciones familiares</span>
443
+ </li>
444
+ </ul>
445
+ <a href="#contacto" class="text-orange-600 font-medium inline-flex items-center hover:text-orange-700 transition-colors duration-300">
446
+ Más información
447
+ <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i>
448
+ </a>
449
+ </div>
450
+
451
+ <!-- Service 5 -->
452
+ <div class="service-card bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
453
+ <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6">
454
+ <i data-lucide="book-open" class="text-orange-600 w-6 h-6"></i>
455
+ </div>
456
+ <h3 class="text-xl font-semibold mb-3">Programas Educativos DEH</h3>
457
+ <p class="text-stone-600 mb-4">
458
+ Diseño e implementación de currículos y programas formativos basados en los principios del Desarrollo Ético Humano.
459
+ </p>
460
+ <ul class="space-y-2 mb-6">
461
+ <li class="flex items-start">
462
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
463
+ <span class="text-stone-600">Para instituciones educativas</span>
464
+ </li>
465
+ <li class="flex items-start">
466
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
467
+ <span class="text-stone-600">Formación docente</span>
468
+ </li>
469
+ <li class="flex items-start">
470
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
471
+ <span class="text-stone-600">Desarrollo de materiales pedagógicos</span>
472
+ </li>
473
+ </ul>
474
+ <a href="#contacto" class="text-orange-600 font-medium inline-flex items-center hover:text-orange-700 transition-colors duration-300">
475
+ Más información
476
+ <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i>
477
+ </a>
478
+ </div>
479
+
480
+ <!-- Service 6 -->
481
+ <div class="service-card bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
482
+ <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mb-6">
483
+ <i data-lucide="globe" class="text-orange-600 w-6 h-6"></i>
484
+ </div>
485
+ <h3 class="text-xl font-semibold mb-3">Consultoría Comunitaria</h3>
486
+ <p class="text-stone-600 mb-4">
487
+ Facilitación de procesos de transformación comunitaria que integran saberes locales con metodologías sistémicas.
488
+ </p>
489
+ <ul class="space-y-2 mb-6">
490
+ <li class="flex items-start">
491
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
492
+ <span class="text-stone-600">Diagnóstico participativo</span>
493
+ </li>
494
+ <li class="flex items-start">
495
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
496
+ <span class="text-stone-600">Diseño de proyectos comunitarios</span>
497
+ </li>
498
+ <li class="flex items-start">
499
+ <i data-lucide="check" class="text-orange-600 mr-2 mt-1 flex-shrink-0"></i>
500
+ <span class="text-stone-600">Formación de líderes comunitarios</span>
501
+ </li>
502
+ </ul>
503
+ <a href="#contacto" class="text-orange-600 font-medium inline-flex items-center hover:text-orange-700 transition-colors duration-300">
504
+ Más información
505
+ <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i>
506
+ </a>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </section>
511
+
512
+ <!-- Contact Section -->
513
+ <section id="contacto" class="py-20 bg-white">
514
+ <div class="container mx-auto px-4">
515
+ <div class="max-w-4xl mx-auto">
516
+ <div class="text-center mb-16">
517
+ <h2 class="text-3xl md:text-4xl font-bold text-stone-800 mb-4">Contáctanos</h2>
518
+ <div class="w-20 h-1 bg-orange-600 mx-auto"></div>
519
+ </div>
520
+
521
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
522
+ <div>
523
+ <h3 class="text-xl font-semibold mb-6">Información de contacto</h3>
524
+ <div class="space-y-6">
525
+ <div class="flex items-start">
526
+ <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
527
+ <i data-lucide="mail" class="text-orange-600"></i>
528
+ </div>
529
+ <div>
530
+ <h4 class="font-medium text-stone-800 mb-1">Correo electrónico</h4>
531
+ <p class="text-stone-600">[email protected]</p>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="flex items-start">
536
+ <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
537
+ <i data-lucide="phone" class="text-orange-600"></i>
538
+ </div>
539
+ <div>
540
+ <h4 class="font-medium text-stone-800 mb-1">Teléfono</h4>
541
+ <p class="text-stone-600">+1 (555) 123-4567</p>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="flex items-start">
546
+ <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
547
+ <i data-lucide="map-pin" class="text-orange-600"></i>
548
+ </div>
549
+ <div>
550
+ <h4 class="font-medium text-stone-800 mb-1">Oficina principal</h4>
551
+ <p class="text-stone-600">Calle Humanidad 123, Ciudad Consciente, País</p>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <div class="mt-10">
557
+ <h3 class="text-xl font-semibold mb-6">Síguenos</h3>
558
+ <div class="flex space-x-4">
559
+ <a href="#" class="w-10 h-10 bg-stone-100 hover:bg-orange-100 rounded-full flex items-center justify-center transition-colors duration-300">
560
+ <i data-lucide="facebook" class="text-stone-600"></i>
561
+ </a>
562
+ <a href="#" class="w-10 h-10 bg-stone-100 hover:bg-orange-100 rounded-full flex items-center justify-center transition-colors duration-300">
563
+ <i data-lucide="twitter" class="text-stone-600"></i>
564
+ </a>
565
+ <a href="#" class="w-10 h-10 bg-stone-100 hover:bg-orange-100 rounded-full flex items-center justify-center transition-colors duration-300">
566
+ <i data-lucide="linkedin" class="text-stone-600"></i>
567
+ </a>
568
+ <a href="#" class="w-10 h-10 bg-stone-100 hover:bg-orange-100 rounded-full flex items-center justify-center transition-colors duration-300">
569
+ <i data-lucide="instagram" class="text-stone-600"></i>
570
+ </a>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <div>
576
+ <form id="contact-form" class="space-y-6">
577
+ <div>
578
+ <label for="name" class="block text-sm font-medium text-stone-700 mb-1">Nombre completo</label>
579
+ <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300">
580
+ </div>
581
+
582
+ <div>
583
+ <label for="email" class="block text-sm font-medium text-stone-700 mb-1">Correo electrónico</label>
584
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300">
585
+ </div>
586
+
587
+ <div>
588
+ <label for="service" class="block text-sm font-medium text-stone-700 mb-1">Servicio de interés</label>
589
+ <select id="service" name="service" class="w-full px-4 py-3 border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300">
590
+ <option value="">Selecciona un servicio</option>
591
+ <option value="Coaching Sistémico Organizacional">Coaching Sistémico Organizacional</option>
592
+ <option value="Coaching Ejecutivo con Enfoque DEH">Coaching Ejecutivo con Enfoque DEH</option>
593
+ <option value="Implementación HCAI">Implementación HCAI</option>
594
+ <option value="Transformación Familiar Sistémica">Transformación Familiar Sistémica</option>
595
+ <option value="Programas Educativos DEH">Programas Educativos DEH</option>
596
+ <option value="Consultoría Comunitaria">Consultoría Comunitaria</option>
597
+ </select>
598
+ </div>
599
+
600
+ <div>
601
+ <label for="message" class="block text-sm font-medium text-stone-700 mb-1">Mensaje</label>
602
+ <textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 border border-stone-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300"></textarea>
603
+ </div>
604
+
605
+ <div id="form-status" class="hidden py-3 px-4 rounded-lg"></div>
606
+
607
+ <button type="submit" class="w-full bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-300 flex items-center justify-center">
608
+ <span id="submit-text">Enviar mensaje</span>
609
+ <i data-lucide="send" class="ml-2 w-5 h-5 hidden" id="submit-icon"></i>
610
+ </button>
611
+ </form>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </section>
617
+ </main>
618
+
619
+ <!-- Footer -->
620
+ <footer class="bg-stone-800 text-stone-300 py-12">
621
+ <div class="container mx-auto px-4">
622
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
623
+ <div>
624
+ <div class="flex items-center mb-4">
625
+ <div class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center mr-3">
626
+ <i data-lucide="atom" class="text-white"></i>
627
+ </div>
628
+ <h3 class="text-xl font-bold text-white">Human Core</h3>
629
+ </div>
630
+ <p class="text-stone-400">
631
+ Transformación humana radical para individuos, organizaciones y comunidades.
632
+ </p>
633
+ </div>
634
+
635
+ <div>
636
+ <h4 class="text-lg font-semibold text-white mb-4">Enlaces rápidos</h4>
637
+ <ul class="space-y-2">
638
+ <li><a href="#inicio" class="hover:text-orange-400 transition-colors duration-300">Inicio</a></li>
639
+ <li><a href="#metodologia" class="hover:text-orange-400 transition-colors duration-300">Metodología</a></li>
640
+ <li><a href="#servicios" class="hover:text-orange-400 transition-colors duration-300">Servicios</a></li>
641
+ <li><a href="#contacto" class="hover:text-orange-400 transition-colors duration-300">Contacto</a></li>
642
+ </ul>
643
+ </div>
644
+
645
+ <div>
646
+ <h4 class="text-lg font-semibold text-white mb-4">Servicios</h4>
647
+ <ul class="space-y-2">
648
+ <li><a href="#servicios" class="hover:text-orange-400 transition-colors duration-300">Coaching Organizacional</a></li>
649
+ <li><a href="#servicios" class="hover:text-orange-400 transition-colors duration-300">Coaching Ejecutivo</a></li>
650
+ <li><a href="#servicios" class="hover:text-orange-400 transition-colors duration-300">Implementación HCAI</a></li>
651
+ <li><a href="#servicios" class="hover:text-orange-400 transition-colors duration-300">Transformación Familiar</a></li>
652
+ </ul>
653
+ </div>
654
+
655
+ <div>
656
+ <h4 class="text-lg font-semibold text-white mb-4">Newsletter</h4>
657
+ <p class="text-stone-400 mb-4">
658
+ Suscríbete para recibir artículos y novedades sobre Human Core.
659
+ </p>
660
+ <form class="flex">
661
+ <input type="email" placeholder="Tu correo" class="px-4 py-2 rounded-l-lg focus:outline-none text-stone-800 w-full">
662
+ <button type="submit" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-r-lg transition-colors duration-300">
663
+ <i data-lucide="send" class="w-4 h-4"></i>
664
+ </button>
665
+ </form>
666
+ </div>
667
+ </div>
668
+
669
+ <div class="pt-8 border-t border-stone-700 flex flex-col md:flex-row justify-between items-center">
670
+ <p class="text-stone-400 mb-4 md:mb-0">
671
+ &copy; 2023 Human Core. Todos los derechos reservados.
672
+ </p>
673
+ <div class="flex space-x-6">
674
+ <a href="#" class="text-stone-400 hover:text-orange-400 transition-colors duration-300">
675
+ <i data-lucide="facebook" class="w-5 h-5"></i>
676
+ </a>
677
+ <a href="#" class="text-stone-400 hover:text-orange-400 transition-colors duration-300">
678
+ <i data-lucide="twitter" class="w-5 h-5"></i>
679
+ </a>
680
+ <a href="#" class="text-stone-400 hover:text-orange-400 transition-colors duration-300">
681
+ <i data-lucide="linkedin" class="w-5 h-5"></i>
682
+ </a>
683
+ <a href="#" class="text-stone-400 hover:text-orange-400 transition-colors duration-300">
684
+ <i data-lucide="instagram" class="w-5 h-5"></i>
685
+ </a>
686
+ </div>
687
+ </div>
688
+ </div>
689
+ </footer>
690
+
691
+ <script>
692
+ // Initialize Lucide icons
693
+ lucide.createIcons();
694
+
695
+ // Mobile menu toggle
696
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
697
+ const mobileMenu = document.getElementById('mobile-menu');
698
+
699
+ mobileMenuButton.addEventListener('click', () => {
700
+ mobileMenu.classList.toggle('hidden');
701
+ const icon = mobileMenuButton.querySelector('i');
702
+ if (mobileMenu.classList.contains('hidden')) {
703
+ lucide.createIcons();
704
+ } else {
705
+ icon.setAttribute('data-lucide', 'x');
706
+ lucide.createIcons();
707
+ }
708
+ });
709
+
710
+ // Smooth scrolling for anchor links
711
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
712
+ anchor.addEventListener('click', function(e) {
713
+ e.preventDefault();
714
+
715
+ const targetId = this.getAttribute('href');
716
+ const targetElement = document.querySelector(targetId);
717
+
718
+ if (targetElement) {
719
+ window.scrollTo({
720
+ top: targetElement.offsetTop - 80,
721
+ behavior: 'smooth'
722
+ });
723
+
724
+ // Close mobile menu if open
725
+ if (!mobileMenu.classList.contains('hidden')) {
726
+ mobileMenu.classList.add('hidden');
727
+ const icon = mobileMenuButton.querySelector('i');
728
+ icon.setAttribute('data-lucide', 'menu');
729
+ lucide.createIcons();
730
+ }
731
+ }
732
+ });
733
+ });
734
+
735
+ // Highlight active nav link on scroll
736
+ const sections = document.querySelectorAll('section');
737
+ const navLinks = document.querySelectorAll('header nav a');
738
+
739
+ window.addEventListener('scroll', () => {
740
+ let current = '';
741
+
742
+ sections.forEach(section => {
743
+ const sectionTop = section.offsetTop;
744
+ const sectionHeight = section.clientHeight;
745
+
746
+ if (pageYOffset >= (sectionTop - 150)) {
747
+ current = section.getAttribute('id');
748
+ }
749
+ });
750
+
751
+ navLinks.forEach(link => {
752
+ link.classList.remove('active-nav');
753
+ if (link.getAttribute('href') === `#${current}`) {
754
+ link.classList.add('active-nav');
755
+ }
756
+ });
757
+ });
758
+
759
+ // Contact form handling
760
+ const contactForm = document.getElementById('contact-form');
761
+ const formStatus = document.getElementById('form-status');
762
+ const submitText = document.getElementById('submit-text');
763
+ const submitIcon = document.getElementById('submit-icon');
764
+
765
+ contactForm.addEventListener('submit', function(e) {
766
+ e.preventDefault();
767
+
768
+ // Show loading state
769
+ submitText.textContent = 'Enviando...';
770
+ submitIcon.classList.remove('hidden');
771
+ formStatus.classList.add('hidden');
772
+
773
+ // Simulate form submission
774
+ setTimeout(() => {
775
+ // Check if required fields are filled
776
+ const name = document.getElementById('name').value;
777
+ const email = document.getElementById('email').value;
778
+ const message = document.getElementById('message').value;
779
+
780
+ if (name && email && message) {
781
+ // Success
782
+ formStatus.textContent = '¡Gracias por tu mensaje! Nos pondremos en contacto contigo pronto.';
783
+ formStatus.classList.remove('hidden', 'bg-red-100', 'text-red-700');
784
+ formStatus.classList.add('bg-green-100', 'text-green-700');
785
+
786
+ // Reset form
787
+ contactForm.reset();
788
+ } else {
789
+ // Error
790
+ formStatus.textContent = 'Por favor completa todos los campos requeridos.';
791
+ formStatus.classList.remove('hidden', 'bg-green-100', 'text-green-700');
792
+ formStatus.classList.add('bg-red-100', 'text-red-700');
793
+ }
794
+
795
+ // Reset button state
796
+ submitText.textContent = 'Enviar mensaje';
797
+ submitIcon.classList.add('hidden');
798
+ formStatus.classList.remove('hidden');
799
+
800
+ // Scroll to form status
801
+ formStatus.scrollIntoView({ behavior: 'smooth', block: 'center' });
802
+ }, 1500);
803
+ });
804
+ </script>
805
+ <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-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Kako2050/human-core" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
806
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Prompt para Generación de WebApp Full-Stack "Human Core" A - Action (Acción): Generar el código completo para una aplicación web full-stack, responsiva y moderna que sirva como sitio web informativo y de contacto para una consultora basada en la metodología "Human Core (Revisada)". S - Steps (Pasos): * Diseño de Arquitectura: Estructurar la aplicación en secciones claras: Inicio (presentación), Nuestra Metodología (detalles de Human Core Revisada, incluyendo DEH y HCAI), Servicios (descripción detallada de cada oferta), Contacto. * Desarrollo Frontend (React): * Crear componentes reutilizables para secciones, tarjetas de servicio, formulario de contacto, etc. * Implementar un diseño limpio, profesional, cálido y centrado en el humano, utilizando Tailwind CSS para todo el estilizado. * Asegurar la responsividad completa (mobile-first approach). * Utilizar lucide-react para iconos apropiados. * Usar el hook useState para manejar el estado del formulario de contacto. * Implementar navegación simple entre secciones (simulada con estado o componentes condicionales, sin react-router-dom). * Desarrollo Backend (Simulado/Básico): * Para este prompt, simular la lógica del backend para el formulario de contacto. En un entorno real, se necesitaría un servidor (Node.js, Python, etc.) y una base de datos o servicio de email. Dentro del código React, simular el envío del formulario mostrando un mensaje de éxito/error. * Integración y Contenido: * Poblar cada sección con el contenido relevante de la metodología "Human Core (Revisada)" proporcionada anteriormente (principios, fases, enfoque en coaching, DEH, HCAI). * Detallar claramente cada uno de los servicios ofrecidos en la sección correspondiente. * Incluir un formulario de contacto funcional (Nombre, Email, Mensaje) en la sección de Contacto, con manejo básico de estado y validación simple en el frontend. * Añadir un pie de página simple con información de copyright y quizás enlaces a redes sociales (placeholders). * Calidad del Código: * Escribir código limpio, bien comentado (en inglés para el código, español para el contenido visible si es necesario) y siguiendo las mejores prácticas de React y Tailwind. * Asegurar que la aplicación sea autocontenida y ejecutable. P - Person (Rol Experto): Actúa como un Desarrollador Full-Stack Senior con experiencia específica en: * React y ecosistema moderno (Hooks, Functional Components). * Tailwind CSS y diseño responsivo avanzado. * UX/UI con enfoque en diseño centrado en el humano, accesible y estéticamente agradable. * Comprensión de filosofías de coaching y metodologías de desarrollo humano (como DEH). * Principios de desarrollo de IA ética y responsable (HCAI). * Creación de aplicaciones web informativas para consultorías o servicios profesionales. E - Examples (Ejemplos): * Diseño: Paleta de colores cálida pero profesional (ej. tonos tierra suaves, azules apagados, naranjas quemados como acento), tipografía legible y moderna (ej. Inter), uso generoso de espacio en blanco, imágenes o gráficos abstractos/humanos que evoquen conexión y reflexión. Evitar estética corporativa fría o excesivamente tecnológica. * Componente de Servicio: Una tarjeta con icono, título del servicio (ej. "Coaching Sistémico Organizacional"), breve descripción y quizás un botón "Saber Más" (que podría llevar a una sección detallada o simplemente estar ahí por diseño). * Sección Metodología: Usar títulos claros, párrafos concisos, listas para los principios/fases. Considerar un diagrama simple (representado con HTML/CSS/SVG si es posible) para ilustrar las fases o la matriz DEH. * Formulario de Contacto: Campos claros, etiquetas visibles, botón de envío distintivo, mensajes de feedback claros (ej. "Mensaje enviado con éxito", "Por favor, completa todos los campos"). C - Context (Contexto): El objetivo es crear el sitio web principal para una consultora innovadora que aplica la metodología "Human Core (Revisada)". El sitio debe comunicar eficazmente la profundidad y el enfoque único de esta metodología (radicalmente humana, integrando coaching, DEH, HCAI) y sus servicios asociados. Debe atraer a clientes potenciales (individuos, líderes, organizaciones, comunidades) que buscan un enfoque transformador y ético. La web es la principal carta de presentación digital. C - Constraints (Restricciones): * Tecnología: React (Functional Components, Hooks), Tailwind CSS. Sin librerías de enrutamiento externas (react-router-dom). Simular navegación con estado local. * Full-Stack: Simular el backend del formulario de contacto en el frontend (mostrar mensaje de éxito/error). * Responsividad: Obligatoria y fluida en todos los dispositivos (móvil, tablet, desktop). * Contenido: Utilizar la información de la metodología "Human Core (Revisada)" previamente definida. El texto visible debe estar en español. * Estilo: Adherirse estrictamente a Tailwind CSS para estilos. Sin CSS externo o inline styles (excepto donde sea absolutamente inevitable). * Código: Completo, autocontenido en un solo bloque, bien comentado (comentarios en inglés). Exportar App como default. * NO usar ReactDOM.render(). * NO usar placeholders genéricos como ... en el código. T - Template (Plantilla de Salida Esperada): Un único bloque de código React (.jsx o .tsx) que contenga todos los componentes necesarios (App, Header, Footer, Home, Methodology, Services, Contact, ServiceCard, etc.) y estilos definidos con Tailwind CSS. El componente principal App debe gestionar la navegación/visualización de las diferentes secciones. // Plantilla básica esperada (solo estructura, no contenido completo) import React, { useState } from 'react'; // Importar iconos de lucide-react // Componente para Tarjeta de Servicio const ServiceCard = ({ icon, title, description }) => { // JSX con Tailwind }; // Componente para Sección de Inicio const HomeSection = () => { // JSX con Tailwind }; // Componente para Sección de Metodología const MethodologySection = () => { // JSX con Tailwind, explicando Human Core Revisada, DEH, HCAI }; // Componente para Sección de Servicios const ServicesSection = () => { // JSX con Tailwind, usando ServiceCard const services = [ // ... lista de servicios detallados ]; return ( // ... mapeo de servicios a ServiceCard ); }; // Componente para Sección de Contacto const ContactSection = () => { const [formData, setFormData] = useState({ name: '', email: '', message: '' }); const [formStatus, setFormStatus] = useState(''); // '', 'sending', 'success', 'error' const handleChange = (e) => { /* ... */ }; const handleSubmit = (e) => { e.preventDefault(); setFormStatus('sending'); // Simulación de envío setTimeout(() => { // Lógica simple de éxito/error simulada if (formData.name && formData.email && formData.message) { setFormStatus('success'); setFormData({ name: '', email: '', message: '' }); // Reset form } else { setFormStatus('error'); } }, 1500); }; return ( // JSX con Tailwind para el formulario y mensajes de estado ); }; // Componente Principal const App = () => { const [currentPage, setCurrentPage] = useState('home'); // 'home', 'methodology', 'services', 'contact' const renderPage = () => { switch (currentPage) { case 'methodology': return <MethodologySection />; case 'services': return <ServicesSection />; case 'contact': return <ContactSection />; case 'home': default: return <HomeSection />; } }; return ( <div className="min-h-screen flex flex-col font-sans bg-gray-50 text-gray-800"> {/* Header/Navbar con Tailwind */} <header className="..."> <nav> {/* Botones para cambiar currentPage */} </nav> </header> {/* Contenido Principal */} <main className="flex-grow container mx-auto px-4 py-8"> {renderPage()} </main> {/* Footer con Tailwind */} <footer className="..."> {/* Copyright, etc. */} </footer> </div> ); }; export default App; Este prompt detalla todos los requisitos para que una IA genere el código de la aplicación web que necesitas, siguiendo la estructura ASPECCT.
2
+ quita la palabra revisada y cambia el icono en la cabecera por otro mejorado