Skip to content

Commit 0a1e3d8

Browse files
committed
Transform: Coworking & Freelancers as steps 3 & 4 of the journey
STEP 3 - COWORKING: You have project + money, now need a place to work - Working from home: distractions, no separation - Working from your job: NOT ETHICAL, uses employer resources - Solution: Coworking space - professional, ethical, focused STEP 4 - FREELANCERS: You're working, need help + offer your talent - DUAL ROLE concept introduced: 1. You NEED help in areas you don't dominate (hire freelancers) 2. You OFFER talent in what you DO dominate (be a freelancer) - Circular economy: everyone needs help, everyone offers help - Example scenarios showing both sides Complete Journey Now: 1. Development: Idea → Plan 2. Crowdfunding: Plan → Money 3. Coworking: Money → Professional workspace 4. Freelancers: Working → Get help + Offer talent → Revenue Each step solves the natural next need.
1 parent b752c5f commit 0a1e3d8

File tree

4 files changed

+309
-18
lines changed

4 files changed

+309
-18
lines changed
Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!-- Why Coworking -->
2+
<section class="max-w-6xl mx-auto px-8 py-16">
3+
<div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white p-8 rounded-lg mb-12">
4+
<h2 class="text-4xl font-bold mb-4">🏢 La Necesidad de un Espacio</h2>
5+
<p class="text-xl text-orange-100 mb-6">
6+
Tienes tu proyecto definido y el dinero para realizarlo. Pero ahora enfrentas una realidad práctica: ¿Dónde vas a trabajar en esto?
7+
</p>
8+
<div class="grid md:grid-cols-3 gap-4">
9+
<div class="bg-white/10 p-4 rounded-lg">
10+
<div class="text-2xl mb-2">🏠</div>
11+
<p class="font-bold">Trabajar desde Casa</p>
12+
<p class="text-sm text-orange-100">Distracciones, familia, no hay separación trabajo-vida</p>
13+
</div>
14+
<div class="bg-white/10 p-4 rounded-lg">
15+
<div class="text-2xl mb-2">🏢</div>
16+
<p class="font-bold">Trabajar en tu Empleo</p>
17+
<p class="text-sm text-orange-100">No es ético usar recursos de tu trabajo para proyectos personales</p>
18+
</div>
19+
<div class="bg-white/10 p-4 rounded-lg">
20+
<div class="text-2xl mb-2"></div>
21+
<p class="font-bold">Espacio Coworking</p>
22+
<p class="text-sm text-orange-100">Profesional, ético, sin distracciones, con comunidad</p>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<div class="grid md:grid-cols-2 gap-8 mb-12">
28+
<div class="bg-white p-8 rounded-lg shadow-lg">
29+
<h3 class="text-2xl font-bold text-stone-900 mb-4">❌ Por qué Casa NO es Ideal</h3>
30+
<ul class="space-y-3 text-stone-800">
31+
<li class="flex items-start">
32+
<span class="text-red-500 mr-2 font-bold"></span>
33+
<span>Distracciones constantes (familia, mascotas, tareas del hogar)</span>
34+
</li>
35+
<li class="flex items-start">
36+
<span class="text-red-500 mr-2 font-bold"></span>
37+
<span>No hay separación entre vida personal y trabajo</span>
38+
</li>
39+
<li class="flex items-start">
40+
<span class="text-red-500 mr-2 font-bold"></span>
41+
<span>Difícil mantener disciplina y horarios</span>
42+
</li>
43+
<li class="flex items-start">
44+
<span class="text-red-500 mr-2 font-bold"></span>
45+
<span>Aislamiento - no hay intercambio de ideas</span>
46+
</li>
47+
<li class="flex items-start">
48+
<span class="text-red-500 mr-2 font-bold"></span>
49+
<span>Internet/electricidad personal puede ser limitado</span>
50+
</li>
51+
</ul>
52+
</div>
53+
54+
<div class="bg-white p-8 rounded-lg shadow-lg">
55+
<h3 class="text-2xl font-bold text-stone-900 mb-4">❌ Por qué tu Trabajo NO es Ético</h3>
56+
<ul class="space-y-3 text-stone-800">
57+
<li class="flex items-start">
58+
<span class="text-red-500 mr-2 font-bold"></span>
59+
<span>Usas recursos de la empresa (electricidad, internet, tiempo)</span>
60+
</li>
61+
<li class="flex items-start">
62+
<span class="text-red-500 mr-2 font-bold"></span>
63+
<span>Conflicto de interés con tu empleador</span>
64+
</li>
65+
<li class="flex items-start">
66+
<span class="text-red-500 mr-2 font-bold"></span>
67+
<span>Riesgo legal de propiedad intelectual</span>
68+
</li>
69+
<li class="flex items-start">
70+
<span class="text-red-500 mr-2 font-bold"></span>
71+
<span>No estás dando 100% a tu trabajo contratado</span>
72+
</li>
73+
<li class="flex items-start">
74+
<span class="text-red-500 mr-2 font-bold"></span>
75+
<span>Puede terminar tu relación laboral si te descubren</span>
76+
</li>
77+
</ul>
78+
</div>
79+
</div>
80+
81+
<div class="bg-gradient-to-br from-green-50 to-green-100 p-8 rounded-lg shadow-lg">
82+
<h3 class="text-3xl font-bold text-stone-900 mb-6 text-center">✅ La Solución: Coworking</h3>
83+
<p class="text-xl text-stone-800 text-center mb-8 max-w-3xl mx-auto">
84+
Un espacio profesional donde puedes dedicarte 100% a tu proyecto de forma ética, sin distracciones, con la infraestructura necesaria y rodeado de una comunidad que entiende lo que estás haciendo.
85+
</p>
86+
<div class="grid md:grid-cols-3 gap-6">
87+
<div class="bg-white p-6 rounded-lg">
88+
<div class="text-4xl mb-3 text-center">💼</div>
89+
<h4 class="font-bold text-stone-900 mb-2 text-center">Profesional</h4>
90+
<p class="text-stone-800 text-sm text-center">Espacio dedicado solo para trabajar, mentalidad enfocada</p>
91+
</div>
92+
<div class="bg-white p-6 rounded-lg">
93+
<div class="text-4xl mb-3 text-center">⚖️</div>
94+
<h4 class="font-bold text-stone-900 mb-2 text-center">Ético</h4>
95+
<p class="text-stone-800 text-sm text-center">Pagas por el espacio, sin conflictos ni compromisos</p>
96+
</div>
97+
<div class="bg-white p-6 rounded-lg">
98+
<div class="text-4xl mb-3 text-center">🤝</div>
99+
<h4 class="font-bold text-stone-900 mb-2 text-center">Comunidad</h4>
100+
<p class="text-stone-800 text-sm text-center">Rodeado de otros que también construyen sus proyectos</p>
101+
</div>
102+
<div class="bg-white p-6 rounded-lg">
103+
<div class="text-4xl mb-3 text-center"></div>
104+
<h4 class="font-bold text-stone-900 mb-2 text-center">Infraestructura</h4>
105+
<p class="text-stone-800 text-sm text-center">Internet rápido, electricidad, café, todo incluido</p>
106+
</div>
107+
<div class="bg-white p-6 rounded-lg">
108+
<div class="text-4xl mb-3 text-center">🎯</div>
109+
<h4 class="font-bold text-stone-900 mb-2 text-center">Enfoque</h4>
110+
<p class="text-stone-800 text-sm text-center">Sin distracciones de casa, horarios claros</p>
111+
</div>
112+
<div class="bg-white p-6 rounded-lg">
113+
<div class="text-4xl mb-3 text-center">🚀</div>
114+
<h4 class="font-bold text-stone-900 mb-2 text-center">Networking</h4>
115+
<p class="text-stone-800 text-sm text-center">Conoce colaboradores, inversionistas, mentores</p>
116+
</div>
117+
</div>
118+
</div>
119+
</section>
Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!-- Dual Role: Hire & Offer -->
2+
<section class="max-w-6xl mx-auto px-8 py-16">
3+
<div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-8 rounded-lg mb-12">
4+
<h2 class="text-4xl font-bold mb-4">🔄 Tu Doble Rol en la Red</h2>
5+
<p class="text-xl text-purple-100 mb-6">
6+
Estás trabajando en tu proyecto (ya lo planeaste, conseguiste dinero, tienes dónde trabajar). Ahora enfrentas dos realidades simultáneas:
7+
</p>
8+
<div class="grid md:grid-cols-2 gap-6">
9+
<div class="bg-white/10 p-6 rounded-lg">
10+
<div class="text-3xl mb-3">🔍</div>
11+
<p class="font-bold text-xl mb-2">Necesitas Ayuda</p>
12+
<p class="text-purple-100">Hay áreas que no conoces o no dominas aún. Necesitas contratar Freelancers que te ayuden en tu proyecto.</p>
13+
</div>
14+
<div class="bg-white/10 p-6 rounded-lg">
15+
<div class="text-3xl mb-3">💪</div>
16+
<p class="font-bold text-xl mb-2">Ofreces Talento</p>
17+
<p class="text-purple-100">Tienes habilidades valiosas en lo que sí dominas. Puedes ofrecer tu colaboración a otros proyectos y generar ingresos.</p>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div class="space-y-12">
23+
<!-- Rol 1: Necesitas Contratar -->
24+
<div class="bg-white p-8 rounded-lg shadow-lg">
25+
<div class="flex items-center mb-6">
26+
<div class="bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold mr-4">1</div>
27+
<h3 class="text-3xl font-bold text-stone-900">Necesitas Contratar Freelancers</h3>
28+
</div>
29+
30+
<p class="text-stone-800 mb-6 text-lg">
31+
Nadie puede dominar todo. Tu proyecto requiere múltiples habilidades y seguro hay áreas donde necesitas ayuda profesional:
32+
</p>
33+
34+
<div class="grid md:grid-cols-3 gap-6 mb-6">
35+
<div class="bg-stone-50 p-6 rounded-lg">
36+
<h4 class="font-bold text-stone-900 mb-3">Áreas Comunes que Necesitarás</h4>
37+
<ul class="space-y-2 text-stone-800 text-sm">
38+
<li><strong>Diseño UI/UX:</strong> Si eres backend</li>
39+
<li><strong>Backend/APIs:</strong> Si eres frontend</li>
40+
<li><strong>DevOps:</strong> Deploy, CI/CD, infraestructura</li>
41+
<li><strong>Mobile:</strong> Apps iOS/Android</li>
42+
<li><strong>Testing/QA:</strong> Asegurar calidad</li>
43+
<li><strong>Documentación:</strong> Technical writing</li>
44+
</ul>
45+
</div>
46+
<div class="bg-stone-50 p-6 rounded-lg">
47+
<h4 class="font-bold text-stone-900 mb-3">Cómo Funciona</h4>
48+
<ul class="space-y-2 text-stone-800 text-sm">
49+
<li>• Publicas tu necesidad específica</li>
50+
<li>• Defines alcance y presupuesto</li>
51+
<li>• Freelancers de la red aplican</li>
52+
<li>• Revisas perfiles y portafolios</li>
53+
<li>• Acuerdas términos claros</li>
54+
<li>• Trabajan en tu proyecto</li>
55+
</ul>
56+
</div>
57+
<div class="bg-stone-50 p-6 rounded-lg">
58+
<h4 class="font-bold text-stone-900 mb-3">Ventajas de la Red</h4>
59+
<ul class="space-y-2 text-stone-800 text-sm">
60+
<li>✓ Freelancers verificados</li>
61+
<li>✓ Portafolios en GitHub</li>
62+
<li>✓ Reviews de otros proyectos</li>
63+
<li>✓ Comisión baja (5-10%)</li>
64+
<li>✓ Escrow para pagos seguros</li>
65+
<li>✓ Resolución de conflictos</li>
66+
</ul>
67+
</div>
68+
</div>
69+
70+
<div class="bg-blue-50 p-6 rounded-lg">
71+
<p class="text-stone-900 font-bold mb-2">💡 Ejemplo Real:</p>
72+
<p class="text-stone-800">
73+
Eres desarrollador backend con Django. Tu proyecto necesita un dashboard bonito en React. Contratas un freelancer frontend por $3,000 para 3 semanas de trabajo. Él construye el UI, tú construyes el backend, ambos integran. Tu proyecto avanza más rápido y mejor.
74+
</p>
75+
</div>
76+
</div>
77+
78+
<!-- Rol 2: Ofreces tu Talento -->
79+
<div class="bg-white p-8 rounded-lg shadow-lg">
80+
<div class="flex items-center mb-6">
81+
<div class="bg-green-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold mr-4">2</div>
82+
<h3 class="text-3xl font-bold text-stone-900">Ofreces tu Talento a Otros Proyectos</h3>
83+
</div>
84+
85+
<p class="text-stone-800 mb-6 text-lg">
86+
Mientras construyes tu proyecto, también tienes habilidades valiosas que otros necesitan. Puedes ofrecer tu colaboración a otros proyectos del ecosistema:
87+
</p>
88+
89+
<div class="grid md:grid-cols-3 gap-6 mb-6">
90+
<div class="bg-stone-50 p-6 rounded-lg">
91+
<h4 class="font-bold text-stone-900 mb-3">Por Qué Ofrecer tu Talento</h4>
92+
<ul class="space-y-2 text-stone-800 text-sm">
93+
<li>💰 <strong>Genera ingresos</strong> mientras construyes tu proyecto</li>
94+
<li>📚 <strong>Aprende</strong> trabajando en proyectos diversos</li>
95+
<li>🤝 <strong>Networking</strong> con otros desarrolladores</li>
96+
<li>🎯 <strong>Portafolio</strong> crece con trabajo real</li>
97+
<li><strong>Experiencia</strong> en tecnologías nuevas</li>
98+
<li>🌟 <strong>Reputación</strong> en la comunidad</li>
99+
</ul>
100+
</div>
101+
<div class="bg-stone-50 p-6 rounded-lg">
102+
<h4 class="font-bold text-stone-900 mb-3">Cómo Funciona</h4>
103+
<ul class="space-y-2 text-stone-800 text-sm">
104+
<li>• Creas tu perfil de freelancer</li>
105+
<li>• Muestras tu portafolio en GitHub</li>
106+
<li>• Defines tus especialidades</li>
107+
<li>• Aplicas a proyectos que te interesan</li>
108+
<li>• Trabajas en horarios flexibles</li>
109+
<li>• Recibes pagos seguros</li>
110+
</ul>
111+
</div>
112+
<div class="bg-stone-50 p-6 rounded-lg">
113+
<h4 class="font-bold text-stone-900 mb-3">Tipos de Colaboración</h4>
114+
<ul class="space-y-2 text-stone-800 text-sm">
115+
<li><strong>Por proyecto:</strong> Alcance fijo, precio fijo</li>
116+
<li><strong>Por hora:</strong> Trabajo flexible, pago por tiempo</li>
117+
<li><strong>Revenue sharing:</strong> Participas de ganancias</li>
118+
<li><strong>Retainer:</strong> Horas garantizadas/mes</li>
119+
</ul>
120+
</div>
121+
</div>
122+
123+
<div class="bg-green-50 p-6 rounded-lg">
124+
<p class="text-stone-900 font-bold mb-2">💡 Ejemplo Real:</p>
125+
<p class="text-stone-800">
126+
Eres diseñador UI/UX. Tu proyecto personal está en fase de desarrollo backend (que contrataste). Mientras esperas, ofreces tu talento de diseño a 2 proyectos del ecosistema, 10 horas/semana cada uno. Ganas $2,000/mes que reinviertes en tu propio proyecto. Todos ganan.
127+
</p>
128+
</div>
129+
</div>
130+
131+
<!-- La Economía Circular -->
132+
<div class="bg-gradient-to-br from-orange-50 to-orange-100 p-8 rounded-lg shadow-lg">
133+
<h3 class="text-3xl font-bold text-stone-900 mb-6 text-center">🔄 La Economía Circular del Ecosistema</h3>
134+
<p class="text-xl text-stone-800 text-center mb-8 max-w-3xl mx-auto">
135+
Todos están en ambos lados: necesitan ayuda en algunas áreas y ofrecen talento en otras. Esto crea una economía circular donde todos se ayudan mutuamente.
136+
</p>
137+
<div class="grid md:grid-cols-4 gap-4 text-center">
138+
<div class="bg-white p-6 rounded-lg">
139+
<p class="text-3xl mb-2">👨‍💻</p>
140+
<p class="font-bold text-stone-900 mb-2">Desarrollador A</p>
141+
<p class="text-xs text-stone-700">Necesita: diseño<br>Ofrece: backend</p>
142+
</div>
143+
<div class="bg-white p-6 rounded-lg">
144+
<p class="text-3xl mb-2">🎨</p>
145+
<p class="font-bold text-stone-900 mb-2">Diseñador B</p>
146+
<p class="text-xs text-stone-700">Necesita: backend<br>Ofrece: UI/UX</p>
147+
</div>
148+
<div class="bg-white p-6 rounded-lg">
149+
<p class="text-3xl mb-2">☁️</p>
150+
<p class="font-bold text-stone-900 mb-2">DevOps C</p>
151+
<p class="text-xs text-stone-700">Necesita: frontend<br>Ofrece: infraestructura</p>
152+
</div>
153+
<div class="bg-white p-6 rounded-lg">
154+
<p class="text-3xl mb-2">📱</p>
155+
<p class="font-bold text-stone-900 mb-2">Mobile Dev D</p>
156+
<p class="text-xs text-stone-700">Necesita: APIs<br>Ofrece: apps nativas</p>
157+
</div>
158+
</div>
159+
<p class="text-center text-stone-700 mt-6">
160+
→ Todos contratan a otros → Todos ofrecen a otros → El ecosistema crece →
161+
</p>
162+
</div>
163+
</div>
164+
</section>

coworking/index.html

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@
1515
<span class="font-semibold">COWORKING</span>
1616
</div>
1717
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
18-
Espacios Colaborativos<br>
19-
<span class="text-orange-500">para Innovadores Tecnológicos</span>
18+
<span class="text-orange-500">Tienes tu Proyecto y el Dinero?</span><br>
19+
Ahora Necesitas un Lugar para Trabajar
2020
</h1>
2121
<p class="text-xl md:text-2xl mb-10 text-gray-200 max-w-3xl mx-auto">
22-
Espacios de trabajo colaborativo para la comunidad Coderic. Lugares donde desarrolladores, diseñadores y emprendedores se reúnen para trabajar en proyectos open source.
22+
Trabajar desde casa no siempre es la mejor opción. Trabajar en tu proyecto personal desde tu trabajo no es ético. La solución práctica: espacios Coworking donde puedes dedicarte a tu proyecto.
2323
</p>
2424
<div class="flex flex-wrap justify-center gap-4">
25-
<a href="https://github.com/Coderic" class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition-all transform hover:scale-105">
26-
Ver Proyectos
25+
<a href="#plans" class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition-all transform hover:scale-105">
26+
Ver Planes y Precios
2727
</a>
28-
<a href="/community" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-20 text-white font-bold py-4 px-8 rounded-lg text-lg transition-all">
29-
Únete a la Comunidad
28+
<a href="/crowdfunding" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-20 text-white font-bold py-4 px-8 rounded-lg text-lg transition-all">
29+
Aún No Tengo Financiamiento
3030
</a>
3131
</div>
3232
</div>
@@ -35,9 +35,9 @@ <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
3535

3636
<section class="max-w-6xl mx-auto px-8 py-16">
3737
<div class="text-center mb-16">
38-
<h2 class="text-4xl font-bold text-stone-800 mb-4">Espacios para la Comunidad</h2>
38+
<h2 class="text-4xl font-bold text-stone-800 mb-4">Por Qué Necesitas un Espacio Coworking</h2>
3939
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
40-
Los espacios Coworking de Coderic son parte del ecosistema de apoyo a desarrolladores. Lugares físicos donde la comunidad puede reunirse, colaborar y trabajar en proyectos.
40+
Ya tienes tu proyecto planeado y el dinero para ejecutarlo. Ahora necesitas un lugar donde dedicarte a construirlo de forma ética y profesional, sin distracciones de casa ni conflictos con tu trabajo.
4141
</p>
4242
</div>
4343

@@ -144,7 +144,11 @@ <h4 class="text-xl font-bold text-stone-800 mb-2">Casillero Personal</h4>
144144
</div>
145145
</section>
146146

147+
{% include coworking/why-coworking.html %}
148+
149+
<div id="plans">
147150
{% include coworking/membership-plans.html %}
151+
</div>
148152

149153
<section class="bg-stone-800 text-white py-16">
150154
<div class="max-w-6xl mx-auto px-8">

0 commit comments

Comments
 (0)