Skip to content

Commit 48f08e2

Browse files
committed
Refactor: Modularize coworking membership plans
- Extract 113-line membership plans section to _includes/coworking/ - Reduce coworking/index.html from 325 to 213 lines - Improve maintainability without over-modularizing - Keep community and index.html as-is (manageable sizes)
1 parent 8817bd7 commit 48f08e2

2 files changed

Lines changed: 116 additions & 114 deletions

File tree

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!-- Membership Plans -->
2+
<section class="max-w-6xl mx-auto px-8 py-16">
3+
<h2 class="text-4xl font-bold text-stone-800 mb-12 text-center">Planes de Membresía</h2>
4+
<div class="grid md:grid-cols-3 gap-8">
5+
<div class="bg-white p-8 rounded-lg shadow-lg border-2 border-stone-200 hover:border-orange-500 transition-all">
6+
<h3 class="text-2xl font-bold text-stone-800 mb-4">Hot Desk</h3>
7+
<div class="mb-6">
8+
<span class="text-4xl font-bold text-orange-600">$150</span>
9+
<span class="text-gray-600">/mes</span>
10+
</div>
11+
<ul class="space-y-3 mb-8 text-gray-700">
12+
<li class="flex items-start">
13+
<span class="text-orange-500 mr-2"></span>
14+
<span>Acceso a espacios compartidos</span>
15+
</li>
16+
<li class="flex items-start">
17+
<span class="text-orange-500 mr-2"></span>
18+
<span>Internet de alta velocidad</span>
19+
</li>
20+
<li class="flex items-start">
21+
<span class="text-orange-500 mr-2"></span>
22+
<span>Café y refreshments</span>
23+
</li>
24+
<li class="flex items-start">
25+
<span class="text-orange-500 mr-2"></span>
26+
<span>Acceso a eventos comunitarios</span>
27+
</li>
28+
<li class="flex items-start">
29+
<span class="text-orange-500 mr-2"></span>
30+
<span>Horario flexible</span>
31+
</li>
32+
</ul>
33+
<a href="https://github.com/Coderic" class="block w-full text-center bg-stone-600 hover:bg-stone-700 text-white font-bold py-3 px-6 rounded-lg transition-all">
34+
Seleccionar Plan
35+
</a>
36+
</div>
37+
38+
<div class="bg-gradient-to-br from-orange-50 to-orange-100 p-8 rounded-lg shadow-xl border-4 border-orange-500 transform scale-105">
39+
<div class="bg-orange-500 text-white text-xs font-bold py-1 px-3 rounded-full inline-block mb-4">
40+
MÁS POPULAR
41+
</div>
42+
<h3 class="text-2xl font-bold text-stone-800 mb-4">Dedicated Desk</h3>
43+
<div class="mb-6">
44+
<span class="text-4xl font-bold text-orange-600">$300</span>
45+
<span class="text-gray-600">/mes</span>
46+
</div>
47+
<ul class="space-y-3 mb-8 text-gray-700">
48+
<li class="flex items-start">
49+
<span class="text-orange-500 mr-2"></span>
50+
<span>Escritorio dedicado personal</span>
51+
</li>
52+
<li class="flex items-start">
53+
<span class="text-orange-500 mr-2"></span>
54+
<span>Acceso 24/7</span>
55+
</li>
56+
<li class="flex items-start">
57+
<span class="text-orange-500 mr-2"></span>
58+
<span>Casillero personal con llave</span>
59+
</li>
60+
<li class="flex items-start">
61+
<span class="text-orange-500 mr-2"></span>
62+
<span>Salas de reuniones (10h/mes)</span>
63+
</li>
64+
<li class="flex items-start">
65+
<span class="text-orange-500 mr-2"></span>
66+
<span>Impresión incluida</span>
67+
</li>
68+
<li class="flex items-start">
69+
<span class="text-orange-500 mr-2"></span>
70+
<span>Mentoría prioritaria</span>
71+
</li>
72+
</ul>
73+
<a href="https://github.com/Coderic" class="block w-full text-center bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-105">
74+
Seleccionar Plan
75+
</a>
76+
</div>
77+
78+
<div class="bg-white p-8 rounded-lg shadow-lg border-2 border-stone-200 hover:border-orange-500 transition-all">
79+
<h3 class="text-2xl font-bold text-stone-800 mb-4">Private Office</h3>
80+
<div class="mb-6">
81+
<span class="text-4xl font-bold text-orange-600">$800</span>
82+
<span class="text-gray-600">/mes</span>
83+
</div>
84+
<ul class="space-y-3 mb-8 text-gray-700">
85+
<li class="flex items-start">
86+
<span class="text-orange-500 mr-2"></span>
87+
<span>Oficina privada (2-6 personas)</span>
88+
</li>
89+
<li class="flex items-start">
90+
<span class="text-orange-500 mr-2"></span>
91+
<span>Acceso 24/7</span>
92+
</li>
93+
<li class="flex items-start">
94+
<span class="text-orange-500 mr-2"></span>
95+
<span>Mobiliario personalizable</span>
96+
</li>
97+
<li class="flex items-start">
98+
<span class="text-orange-500 mr-2"></span>
99+
<span>Salas de reuniones ilimitadas</span>
100+
</li>
101+
<li class="flex items-start">
102+
<span class="text-orange-500 mr-2"></span>
103+
<span>Servicio de recepción</span>
104+
</li>
105+
<li class="flex items-start">
106+
<span class="text-orange-500 mr-2"></span>
107+
<span>Dirección comercial</span>
108+
</li>
109+
</ul>
110+
<a href="https://github.com/Coderic" class="block w-full text-center bg-stone-600 hover:bg-stone-700 text-white font-bold py-3 px-6 rounded-lg transition-all">
111+
Contactar Ventas
112+
</a>
113+
</div>
114+
</div>
115+
</section>

coworking/index.html

Lines changed: 1 addition & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -144,120 +144,7 @@ <h4 class="text-xl font-bold text-stone-800 mb-2">Casillero Personal</h4>
144144
</div>
145145
</section>
146146

147-
<section class="max-w-6xl mx-auto px-8 py-16">
148-
<h2 class="text-4xl font-bold text-stone-800 mb-12 text-center">Planes de Membresía</h2>
149-
<div class="grid md:grid-cols-3 gap-8">
150-
<div class="bg-white p-8 rounded-lg shadow-lg border-2 border-stone-200 hover:border-orange-500 transition-all">
151-
<h3 class="text-2xl font-bold text-stone-800 mb-4">Hot Desk</h3>
152-
<div class="mb-6">
153-
<span class="text-4xl font-bold text-orange-600">$150</span>
154-
<span class="text-gray-600">/mes</span>
155-
</div>
156-
<ul class="space-y-3 mb-8 text-gray-700">
157-
<li class="flex items-start">
158-
<span class="text-orange-500 mr-2"></span>
159-
<span>Acceso a espacios compartidos</span>
160-
</li>
161-
<li class="flex items-start">
162-
<span class="text-orange-500 mr-2"></span>
163-
<span>Internet de alta velocidad</span>
164-
</li>
165-
<li class="flex items-start">
166-
<span class="text-orange-500 mr-2"></span>
167-
<span>Café y refreshments</span>
168-
</li>
169-
<li class="flex items-start">
170-
<span class="text-orange-500 mr-2"></span>
171-
<span>Acceso a eventos comunitarios</span>
172-
</li>
173-
<li class="flex items-start">
174-
<span class="text-orange-500 mr-2"></span>
175-
<span>Horario flexible</span>
176-
</li>
177-
</ul>
178-
<a href="https://github.com/Coderic" class="block w-full text-center bg-stone-600 hover:bg-stone-700 text-white font-bold py-3 px-6 rounded-lg transition-all">
179-
Seleccionar Plan
180-
</a>
181-
</div>
182-
183-
<div class="bg-gradient-to-br from-orange-50 to-orange-100 p-8 rounded-lg shadow-xl border-4 border-orange-500 transform scale-105">
184-
<div class="bg-orange-500 text-white text-xs font-bold py-1 px-3 rounded-full inline-block mb-4">
185-
MÁS POPULAR
186-
</div>
187-
<h3 class="text-2xl font-bold text-stone-800 mb-4">Dedicated Desk</h3>
188-
<div class="mb-6">
189-
<span class="text-4xl font-bold text-orange-600">$300</span>
190-
<span class="text-gray-600">/mes</span>
191-
</div>
192-
<ul class="space-y-3 mb-8 text-gray-700">
193-
<li class="flex items-start">
194-
<span class="text-orange-500 mr-2"></span>
195-
<span>Escritorio dedicado personal</span>
196-
</li>
197-
<li class="flex items-start">
198-
<span class="text-orange-500 mr-2"></span>
199-
<span>Acceso 24/7</span>
200-
</li>
201-
<li class="flex items-start">
202-
<span class="text-orange-500 mr-2"></span>
203-
<span>Casillero personal con llave</span>
204-
</li>
205-
<li class="flex items-start">
206-
<span class="text-orange-500 mr-2"></span>
207-
<span>Salas de reuniones (10h/mes)</span>
208-
</li>
209-
<li class="flex items-start">
210-
<span class="text-orange-500 mr-2"></span>
211-
<span>Impresión incluida</span>
212-
</li>
213-
<li class="flex items-start">
214-
<span class="text-orange-500 mr-2"></span>
215-
<span>Mentoría prioritaria</span>
216-
</li>
217-
</ul>
218-
<a href="https://github.com/Coderic" class="block w-full text-center bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-105">
219-
Seleccionar Plan
220-
</a>
221-
</div>
222-
223-
<div class="bg-white p-8 rounded-lg shadow-lg border-2 border-stone-200 hover:border-orange-500 transition-all">
224-
<h3 class="text-2xl font-bold text-stone-800 mb-4">Private Office</h3>
225-
<div class="mb-6">
226-
<span class="text-4xl font-bold text-orange-600">$800</span>
227-
<span class="text-gray-600">/mes</span>
228-
</div>
229-
<ul class="space-y-3 mb-8 text-gray-700">
230-
<li class="flex items-start">
231-
<span class="text-orange-500 mr-2"></span>
232-
<span>Oficina privada (2-6 personas)</span>
233-
</li>
234-
<li class="flex items-start">
235-
<span class="text-orange-500 mr-2"></span>
236-
<span>Acceso 24/7</span>
237-
</li>
238-
<li class="flex items-start">
239-
<span class="text-orange-500 mr-2"></span>
240-
<span>Mobiliario personalizable</span>
241-
</li>
242-
<li class="flex items-start">
243-
<span class="text-orange-500 mr-2"></span>
244-
<span>Salas de reuniones ilimitadas</span>
245-
</li>
246-
<li class="flex items-start">
247-
<span class="text-orange-500 mr-2"></span>
248-
<span>Servicio de recepción</span>
249-
</li>
250-
<li class="flex items-start">
251-
<span class="text-orange-500 mr-2"></span>
252-
<span>Dirección comercial</span>
253-
</li>
254-
</ul>
255-
<a href="https://github.com/Coderic" class="block w-full text-center bg-stone-600 hover:bg-stone-700 text-white font-bold py-3 px-6 rounded-lg transition-all">
256-
Contactar Ventas
257-
</a>
258-
</div>
259-
</div>
260-
</section>
147+
{% include coworking/membership-plans.html %}
261148

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

0 commit comments

Comments
 (0)