Chocoevents under /events route using json as data and hardcoded image

src/lib/components/Event.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { CalendarDays, Clock3, MapPin, MoveRight } from "lucide-svelte";
+	import rust from "$lib/assets/rust.webp";
+
+	type Props = {
+		name: string;
+		description: string;
+		date: string;
+		time: string;
+		place: string;
+	};
+
+	let { name, description, date, time, place }: Props = $props();
+</script>
+
+<div class="my-4 overflow-hidden rounded-3xl border border-lime-500">
+	<div
+		class="flex flex-col justify-center bg-neutral-800 p-8 lg:grid lg:grid-cols-[1fr,2fr,1fr] lg:gap-x-4"
+	>
+		<div class="h-fit">
+			<img src={rust} alt="rust" class="mx-auto my-auto h-1/3 w-1/3 rounded-3xl" />
+		</div>
+		<div>
+			<h3 class="font-fira text-2xl font-semibold text-white">
+				{name}
+			</h3>
+			<p>
+				{description}
+			</p>
+		</div>
+		<div class="flex flex-col justify-center">
+			<p class="flex flex-row text-lg text-lime-500">
+				<CalendarDays /><span class="ml-2">{date}</span>
+			</p>
+			<p class="my-2 flex flex-row"><Clock3 /><span class="ml-2">{time}</span></p>
+			<p class="flex flex-row"><MapPin /><span class="ml-2">{place}</span></p>
+		</div>
+	</div>
+	<div class="flex flex-row justify-end bg-lime-500 py-2 pr-6 font-fira font-semibold text-black">
+		<button class="flex flex-row">
+			<span class="mr-4">Registrarse</span>
+			<MoveRight />
+		</button>
+	</div>
+</div>

src/lib/data/events.json

@@ -0,0 +1,25 @@
+{
+	"events": [
+		{
+			"name": "Rust 101",
+			"description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
+			"date": "15/08/2024",
+			"time": "11:00 - 12:00",
+			"place": "Lab Fiec 12A, ESPOL"
+		},
+		{
+			"name": "Rust 101",
+			"description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
+			"date": "15/08/2024",
+			"time": "11:00 - 12:00",
+			"place": "Lab Fiec 12A, ESPOL"
+		},
+		{
+			"name": "Rust 101",
+			"description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
+			"date": "15/08/2024",
+			"time": "11:00 - 12:00",
+			"place": "Lab Fiec 12A, ESPOL"
+		}
+	]
+}

src/routes/events/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import Event from "$lib/components/Event.svelte";
+
+	let { data } = $props();
+</script>
+
+<div class="flex flex-col items-center px-8">
+	{#each data.events as event}
+		<Event
+			name={event.name}
+			description={event.description}
+			date={event.date}
+			time={event.time}
+			place={event.place}
+		/>
+	{/each}
+</div>

src/routes/events/+page.ts

@@ -0,0 +1,11 @@
+import type { PageLoad } from "./$types";
+import { events } from "$lib/data/events.json";
+
+export const load = (async () => {
+	return {
+		title: "Chocoeventos",
+		// TODO: fetch from API
+		description: "Eventos del club Kokoa",
+		events,
+	};
+}) satisfies PageLoad;