Skip to content

Commit f7075c0

Browse files
basicavisualbasicavisual
committed
maqueta recursos
1 parent 93af0b1 commit f7075c0

9 files changed

Lines changed: 162 additions & 0 deletions

File tree

‎src/components/Cards/RecursosCard.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script>
2+
export let title;
3+
export let url;
4+
export let author;
5+
</script>
6+
7+
<a href={url} target="_blank" rel="noopener noreferrer" class=" w-full md:w-1/3 md:pr-8 mb-5">
8+
<div class="bg-gray-100 hover:bg-gray-200 h-[150px] p-5 flex justify-between">
9+
<div>
10+
<h4 class="text-xl font-bold">{title}</h4>
11+
{#if author }
12+
<p>{author}</p>
13+
{/if }
14+
</div>
15+
<img src="/flecha-verde.png" alt="Ir al recurso" class="inline h-[20px] w-[20px] self-end">
16+
</div>
17+
</a>

‎src/routes/recursos/+page.svelte‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<script>
2+
import Hero from "@/components/Hero.svelte";
3+
import RecursosCard from "@/components/Cards/RecursosCard.svelte";
4+
let conocimiento = [
5+
{
6+
"name": "Curso de datos abiertos y hacking cívico",
7+
"content":
8+
[
9+
{
10+
"name": "Curso de datos abiertos y hacking cívico",
11+
"author": "Lab león",
12+
"url": "https://google.com/"
13+
}
14+
]
15+
},
16+
{
17+
"name": "Jornadas de hacking cívico (CMX)",
18+
"content":
19+
[
20+
{
21+
"name": "Mapeando el transporte público",
22+
"author": "Rolando Drouaillet",
23+
"url": "https://google.com/"
24+
},
25+
{
26+
"name": "Ciencia de Datos para el bien",
27+
"author": "Ricardo Alanís",
28+
"url": "https://google.com/"
29+
},
30+
{
31+
"name": "Plataformas Participativas",
32+
"author": "Viridiana Hernández",
33+
"url": "https://google.com/"
34+
},
35+
{
36+
"name": "Datos para no-programadores (OpenRefine)",
37+
"author": "Edgar Gutiérrez",
38+
"url": "https://google.com/"
39+
}
40+
]
41+
}
42+
]
43+
let herramientas = [
44+
{"name": "Awesome Civic Tech", "url": "https://google.com/"},
45+
{"name": "Awesome Open Data", "url": "https://google.com/"},
46+
{"name": "COVID Estados", "url": "https://google.com/"}
47+
]
48+
let proyectos = [
49+
{"name": "Mapaton Ciudadano", "url": "https://google.com/"},
50+
{"name": "Informe bajo Lupa", "url": "https://google.com/"},
51+
{"name": "Hackers Cívicos", "url": "https://google.com/"}
52+
]
53+
let eventos = [
54+
{"name": "Civic Hack Nights", "url": "https://google.com/"},
55+
{"name": "DataCon", "url": "https://google.com/"},
56+
{"name": "Open Data Day", "url": "https://google.com/"}
57+
]
58+
let oportunidades = [
59+
{"name": "Slack Chambas", "url": "https://google.com/"},
60+
{"name": "Github Chambas", "url": "https://google.com/"},
61+
{"name": "Job Boards Internacionales", "url": "https://google.com/"},
62+
{"name": "Code for All Slack Board", "url": "https://google.com/"}
63+
]
64+
let otros = [
65+
{"name": "Civic tech Guide", "url": "https://google.com/"}
66+
]
67+
</script>
68+
69+
<Hero accentColor="#FF6D53" image="/recursos.png" title="Recursos" subtitle="Conocimiento que hemos construido a lo largo del tiempo sobre tecnología cívica, datos abiertos y más." />
70+
71+
<div id="filtros" class="container mx-auto flex justify-start md:justify-center gap-3 my-8 flex-wrap p-3">
72+
<p class="uppercase font-bold inline">Todo</p>
73+
<p class="uppercase font-bold inline">Conocimiento</p>
74+
<p class="uppercase font-bold inline">Herramientas</p>
75+
<p class="uppercase font-bold inline">Proyectos</p>
76+
<p class="uppercase font-bold inline">Eventos</p>
77+
<p class="uppercase font-bold inline">Oportunidades</p>
78+
<p class="uppercase font-bold inline">Otros</p>
79+
</div>
80+
<section id="conocimiento" class="container mx-auto my-6 p-3">
81+
<h2 class="text-5xl font-bold"><img src="/recursos-conocimiento.png" class="inline h-[50px] my-5" alt="Conocimiento">
82+
Conocimiento</h2>
83+
{#each conocimiento as subseccion }
84+
<div class="my-5">
85+
<h3 class="text-3xl font-bold my-5">{subseccion.name}</h3>
86+
<div class="flex flex-wrap">
87+
{#each subseccion.content as item }
88+
<RecursosCard title={item.name} url={item.url} author={item.author}/>
89+
{/each}
90+
</div>
91+
</div>
92+
{/each}
93+
</section>
94+
95+
<section id="Herramientas" class="container mx-auto my-6 p-3">
96+
<h2 class="text-5xl font-bold"><img src="/recursos-herramientas.png" class="inline h-[50px] my-5" alt="Herramientas">
97+
Herramientas</h2>
98+
<div class="flex flex-wrap my-5">
99+
{#each herramientas as item }
100+
<RecursosCard title={item.name} url={item.url}/>
101+
{/each}
102+
</div>
103+
</section>
104+
105+
<section id="Proyectos" class="container mx-auto my-6 p-3">
106+
<h2 class="text-5xl font-bold"><img src="/recursos-proyectos.png" class="inline h-[50px] my-5" alt="Proyectos">
107+
Proyectos</h2>
108+
<div class="flex flex-wrap my-5">
109+
{#each proyectos as item }
110+
<RecursosCard title={item.name} url={item.url}/>
111+
{/each}
112+
</div>
113+
</section>
114+
115+
116+
<section id="Eventos" class="container mx-auto my-6 p-3">
117+
<h2 class="text-5xl font-bold"><img src="/recursos-eventos.png" class="inline h-[50px] my-5" alt="Eventos">
118+
Eventos</h2>
119+
<div class="flex flex-wrap my-5">
120+
{#each eventos as item }
121+
<RecursosCard title={item.name} url={item.url}/>
122+
{/each}
123+
</div>
124+
</section>
125+
126+
<section id="Oportunidades" class="container mx-auto my-6 p-3">
127+
<h2 class="text-5xl font-bold"><img src="/recursos-oportunidades.png" class="inline h-[50px] my-5" alt="Oportunidades">
128+
Oportunidades</h2>
129+
<div class="flex flex-wrap my-5">
130+
{#each oportunidades as item }
131+
<RecursosCard title={item.name} url={item.url}/>
132+
{/each}
133+
</div>
134+
</section>
135+
136+
137+
<section id="Otros" class="container mx-auto my-6 p-3">
138+
<h2 class="text-5xl font-bold">
139+
Otros</h2>
140+
<div class="flex flex-wrap my-5">
141+
{#each otros as item }
142+
<RecursosCard title={item.name} url={item.url}/>
143+
{/each}
144+
</div>
145+
</section>

‎static/flecha-verde.png‎

515 Bytes
Loading

‎static/recursos-conocimiento.png‎

727 Bytes
Loading

‎static/recursos-eventos.png‎

1.45 KB
Loading

‎static/recursos-herramientas.png‎

1.45 KB
Loading

‎static/recursos-oportunidades.png‎

1.74 KB
Loading

‎static/recursos-proyectos.png‎

1.46 KB
Loading

‎static/recursos.png‎

54.5 KB
Loading

0 commit comments

Comments
 (0)