-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathindex.html
165 lines (161 loc) · 10 KB
/
index.html
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
---
layout: base
---
<section class="text-stone-800 py-36 md:py-56 px-5">
<div class="max-w-5xl mx-auto md:grid md:grid-cols-2 gap-20 items-center justify-between">
<div class="gap-2">
<p class="font-medium text-4xl">Bienvenidos a <b class="sr-only">Ruby Perú</b></p>
<img src="{{ '/img/rubyperu_logo_color.svg' | relative_url }}" alt="Ruby Peru logo" />
<p class="uppercase font-medium tracking-widest">Comunidad de entusiastas de Ruby en Perú</p>
<ul class="flex gap-4 mt-4">
<li><a href="https://www.facebook.com/rubypegroup" target="_blank">
<svg class="fill-rose-500 h-10 hover:fill-rose-700" fill="currentColor" height="229.9" preserveAspectRatio="xMidYMid meet"
version="1" viewBox="0.0 0.0 230.9 229.9" zoomAndPan="magnify" role="img">
<title>Facebook Logo</title>
<g>
<path
d="M115.5,0C51.7,0,0,51.7,0,115.5c0,57.3,41.8,104.9,96.5,113.9v-78.3H67.1v-34.3h29.4V91.9c0-27,21.9-45.3,48.9-45.3 c12,0,19.5,1.8,19.5,1.8v28.8h-19.5c-8.1,0-14.7,6.6-14.7,14.7v24.9h31.5l-4.4,34.3h-27.1v78.8c56.5-7.5,100.1-55.9,100.1-114.4 C230.9,51.7,179.2,0,115.5,0z" />
</g>
</svg>
<span class="sr-only">Facebook Account</span>
</a></li>
<li><a href="https://twitter.com/rubyperu" target="_blank">
<svg class="fill-rose-500 h-10 hover:fill-rose-700" fill="currentColor" preserveAspectRatio="xMidYMid meet" version="1"
viewBox="0.0 0.0 231.0 231.0" zoomAndPan="magnify" role="img">
<title>Twitter Logo</title>
<g>
<path
d="M115.5,0C51.7,0,0,51.7,0,115.5c0,63.8,51.7,115.5,115.5,115.5c63.8,0,115.5-51.7,115.5-115.5C230.9,51.7,179.2,0,115.5,0z M182.9,89.5c0,0,2,44.2-31.6,71.6C101,202,46.7,168.8,46.7,168.8s13.2,0.2,24.9-2.9c11.6-3.1,20-10.7,20-10.7s-12.7-2.6-19.3-7.4 c-6.6-4.8-9.2-14-9.2-14s4.4,0.4,7.1,0.3c2.8-0.1,6.1-1.4,6.1-1.4s-9.1-1.1-17.6-10.6c-6.7-7.5-6.2-20-6.2-20s4,2.4,6.1,2.9 c2.1,0.6,6.2,0.6,6.2,0.6s-8-4.7-11.5-17c-3.5-12.2,3.2-24.6,3.2-24.6S68.4,78.4,86,87.6c17.6,9.2,34.2,8.9,34.2,8.9 s-2.4-7.3,1.8-18.1c4.2-10.8,13.7-18.6,28.2-19.7c14.5-1.2,23.8,9.8,23.8,9.8s4.5-0.8,9.6-2.7c5.1-1.8,10.2-4.2,10.2-4.2 s-1.8,5.5-5.3,9.8c-3.5,4.3-7.4,6.9-7.4,6.9s4.6-0.3,9.2-1.6c4.6-1.3,7.1-2.6,7.1-2.6C192.1,82.9,182.9,89.5,182.9,89.5z" />
</g>
</svg>
<span class="sr-only">Twitter Account</span>
</a></li>
</ul>
</div>
<img src="{{ '/img/meetup_1.png' | relative_url }}" class="hidden md:block aspect-video rounded-3xl object-cover" alt="Ruby Peru meetup photo" />
</div>
</section>
<section class="bg-rose-700 py-20 px-5 text-red-50">
<div class="max-w-xl mx-auto flex items-center gap-6">
<img src="{{ '/img/icon_goal.svg' | relative_url }}" class="h-32" alt="" />
<p class="text-center uppercase text-lg font-medium tracking-widest">Nuestro principal objetivo es que ruby llegue a más personas</p>
</div>
</section>
<section class="text-stone-800 py-32 px-5 font-light">
<div class="max-w-5xl mx-auto flex flex-col gap-24">
<h3 class="text-center uppercase font-medium text-rose-500 text-5xl tracking-wider">Iniciativas</h3>
<ul class="flex flex-col gap-20">
<li class="grid sm:grid-cols-2 gap-6 md:gap-24 items-center">
<div class="flex flex-col gap-4">
<h4 class="text-rose-600 uppercase font-semibold text-xl tracking-widest">Meetups Mensuales</h4>
<p>Cada 2do jueves del mes tenemos una reunión virtual para reencontrarnos, aprender algo juntos o solo ponernos al día!</p>
</div>
<img src="{{ '/img/meetup_2.png' | relative_url }}" class="object-cover" alt="" />
</li>
<li class="grid sm:grid-cols-2 gap-6 sm:gap-24 items-center">
<div class="flex flex-col gap-4 sm:order-last">
<h4 class="text-rose-600 uppercase font-semibold text-xl tracking-widest">Club de Lectura</h4>
<p>Cada 2 semanas nos reunimos para discutir un nuevo capítulo del libro actual que estemos leyendo.</p>
</div>
<div class="bg-rose-100 flex gap-4 lg:gap-8 px-4 lg:px-12 items-center">
<img src="{{ '/img/book_refactoring.jpeg' | relative_url }}" class="object-cover h-40 md:h-56" alt="" />
<p class="md:text-lg">
<span class="font-bold text-sm uppercase tracking-widest">Libro actual:</span><br />
Refactoring - Ruby Edition
</p>
</div>
</li>
<li class="grid sm:grid-cols-2 gap-6 sm:gap-24 items-center">
<div class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h4 class="text-rose-600 uppercase font-semibold text-xl tracking-widest">Live Code Streaming</h4>
<span class="uppercase tracking-wide text-xs bg-stone-300 text-stone-950 font-medium px-4 py-2 rounded-full">Inactivo</span>
</div>
<p>Cada 2 semanas, algunos organizadores hacemos un streaming en Twitch programando un proyecto en Ruby.</p>
</div>
<img src="{{ '/img/project_1.png' | relative_url }}" class="object-cover" alt="" />
</li>
</ul>
</div>
</section>
<section class="bg-rose-700 py-20 px-5 text-red-50">
<div class="max-w-lg mx-auto flex flex-col gap-8 items-center text-center">
<p class="uppercase text-lg font-medium tracking-widest">Todas nuestras actividades son gratuitas y esto es gracias al apoyo de la comunidad</p>
<a href="https://github.com/sponsors/rubyperu" class="bg-red-50 text-rose-700 w-72 py-2 border border-red-50 rounded-full uppercase font-semibold flex-shrink-0 hover:bg-red-700 hover:text-red-50 focus-visible:outline-2 focus-visible:outline-red-700 focus-visible:outline-offset-2">Apóyanos en GitHub</a>
</div>
</section>
<section class="text-stone-800 py-32 px-5 font-light text-lg">
<div class="max-w-5xl mx-auto flex flex-col gap-20">
<div class="flex flex-col gap-12">
<h3 class="text-center uppercase font-medium text-rose-500 text-3xl md:text-5xl tracking-wider">Colaboradores</h3>
<ul class="grid grid-cols-2 md:grid-cols-4 gap-10 justify-evenly text-center">
<li class="group hover:bg-rose-200 p-2 rounded-lg">
<a href="https://twitter.com/KattyaCuevas" target="_blank">
<img src="https://pbs.twimg.com/profile_images/1405618697209880586/Q_kpcv5V_400x400.jpg" alt=@KattyaCuevas" class="object-cover h-32 w-32 sm:h-40 sm:w-40 md:h-32 md:w-32 lg:h-40 lg:w-40 mx-auto rounded-full border-2 border-rose-500">
<span class="underline group-hover:bg-red-50 px-2 py-1 rounded">@KattyaCuevas</span>
</a>
</li>
<li class="group hover:bg-rose-200 p-2 rounded-lg">
<a href="https://twitter.com/mayralunavarro" target="_blank">
<img src="https://pbs.twimg.com/profile_images/630831639749378049/H_GhywsG_400x400.jpg" alt="@mayralunavarro" class="object-cover h-32 w-32 sm:h-40 sm:w-40 md:h-32 md:w-32 lg:h-40 lg:w-40 mx-auto rounded-full border-2 border-rose-500">
<span class="underline group-hover:bg-red-50 px-2 py-1 rounded">@mayralunavarro</span>
</a>
</li>
<li class="group hover:bg-rose-200 p-2 rounded-lg">
<a href="https://twitter.com/DiegoGCuevas" target="_blank">
<img src="https://pbs.twimg.com/profile_images/1189206551405436931/y5kukAC2_400x400.jpg" alt="@DiegoGCuevas" class="object-cover h-32 w-32 sm:h-40 sm:w-40 md:h-32 md:w-32 lg:h-40 lg:w-40 mx-auto rounded-full border-2 border-rose-500">
<span class="underline group-hover:bg-red-50 px-2 py-1 rounded">@DiegoGCuevas</span>
</a>
</li>
<li class="group hover:bg-rose-200 p-2 rounded-lg">
<a href="https://twitter.com/marieth_pe" target="_blank">
<img src="https://pbs.twimg.com/profile_images/1274536169494188034/emxsagxy_400x400.jpg" alt="@marieth_pe" class="object-cover h-32 w-32 sm:h-40 sm:w-40 md:h-32 md:w-32 lg:h-40 lg:w-40 mx-auto rounded-full border-2 border-rose-500">
<span class="underline group-hover:bg-red-50 px-2 py-1 rounded">@marieth_pe</span>
</a>
</li>
</ul>
</div>
<div class="grid md:grid-cols-2 gap-28">
<div>
<h4 class="text-center uppercase text-rose-600 font-semibold text-3xl tracking-wider">¿Qué es lo que hacemos?</h4>
<ul class="mt-8 flex flex-col gap-6 px-8 max-w-sm mx-auto">
<li class="flex gap-4 items-center">
<img src="{{ '/img/icon_gem.svg' | relative_url }}" class="h-8 md:h-12" alt="" />
Organizar diferentes iniciativas
</li>
<li class="flex gap-4 items-center">
<img src="{{ '/img/icon_gem.svg' | relative_url }}" class="h-8 md:h-12" alt="" />
Gestión de redes sociales
</li>
<li class="flex gap-4 items-center">
<img src="{{ '/img/icon_gem.svg' | relative_url }}" class="h-8 md:h-12" alt="" />
Mantenimiento de proyectos
</li>
<li class="flex gap-4 items-center">
<img src="{{ '/img/icon_gem.svg' | relative_url }}" class="h-8 md:h-12" alt="" />
Otras actividades… (?!)
</li>
</ul>
</div>
<div>
<h4 class="text-center uppercase text-rose-600 font-semibold text-3xl tracking-wider">¿Cómo sumarte?</h4>
<ul class="mt-8 flex flex-col gap-6 px-8 max-w-sm mx-auto">
<li class="flex gap-4 items-center">
<img src="{{ '/img/icon_gem.svg' | relative_url }}" class="h-8 md:h-12" alt="" />
<span>
Unirte a nuestro <a href="https://ruby.pe/slack" target="_blank" class="underline hover:bg-red-50 px-2 py-1 rounded">Slack</a>
</span>
</li>
<li class="flex gap-4 items-center">
<img src="{{ '/img/icon_gem.svg' | relative_url }}" class="h-8 md:h-12" alt="" />
Unirte al canal #coordinación ó
</li>
<li class="flex gap-4 items-center">
<img src="{{ '/img/icon_gem.svg' | relative_url }}" class="h-8 md:h-12" alt="" />
Hablarle a uno de los organizadores
</li>
</ul>
</div>
</div>
</div>
</section>