FEAT: Add chocomision (#56)

* Add responsive chocomision component * CHORE: code formatting * Add title * Change chocomision, title and hero to be responsive * format code
kokoaespol · Sep 22, 2024 · e6b07b4 · e6b07b4
1 parent cec5b90
commit e6b07b4
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 3 deletions.
diff --git a/src/lib/assets/logos/logo-semib.png b/src/lib/assets/logos/logo-semib.png
diff --git a/src/lib/components/Title.svelte b/src/lib/components/Title.svelte
@@ -6,6 +6,6 @@
 	let { title }: Props = $props();
 </script>
 
-<h2 class="font-fira text-xl font-semibold">
+<h2 class="text-center font-fira text-2xl font-semibold sm:text-left md:text-left lg:text-left">
 	<span class="text-lime-500">></span>{title}
 </h2>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import Hero from "./Hero.svelte";
+	import Chocomision from "./Chocomision.svelte";
+
 	import Title from "$lib/components/Title.svelte";
 	import Event from "$lib/components/HomeEvent.svelte";
 
 	let { data } = $props();
 </script>
 
-<main class="px-8">
+<main class="px-8 md:mx-20 lg:mx-20">
 	<Hero />
+	<Chocomision />
 	<section class="my-8">
 		<Title title="Chocoeventos" />
 		<div class="flex flex-col items-center px-8">

diff --git a/src/routes/Chocomision.svelte b/src/routes/Chocomision.svelte
@@ -0,0 +1,24 @@
+<script>
+	import Title from "$lib/components/Title.svelte";
+</script>
+
+<section
+	class="mt-10 flex flex-col items-center sm:flex-row md:flex-row lg:mt-16 lg:flex-row lg:items-center"
+>
+	<div class="flex w-full flex-col justify-between sm:flex-col md:flex-col lg:flex-col">
+		<Title title="Chocomisión" />
+		<p
+			id="mision"
+			class="mt-4 max-w-[20rem] text-center text-sm sm:max-w-[20rem] sm:text-left md:max-w-[23rem] md:text-left md:text-base lg:ml-3 lg:mt-5 lg:max-w-[25rem] lg:text-left lg:text-[1rem]"
+		>
+			Compartir, difundir e implementar, conocimiento y herramientas, para el desarrollo académico y
+			tecnológico de la sociedad Ecuatoriana.
+		</p>
+	</div>
+	<img
+		id="logo_kokoa"
+		src="/src/lib/assets/logos/logo-semib.png"
+		alt="Logo de KOKOA"
+		class="md:mr-15 mt-4 w-44 sm:mt-0 sm:w-44 md:mr-[7rem] md:w-48 lg:w-72"
+	/>
+</section>
diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
@@ -1,4 +1,4 @@
-<section class="mt-24 flex flex-col items-center justify-around gap-y-12 sm:flex-row lg:flex-row">
+<section class="mt-24 flex flex-col items-center justify-between gap-y-12 sm:flex-row lg:flex-row">
 	<div class="relative">
 		<img
 			src="https://images.unsplash.com/photo-1601933470096-0e34634ffcde?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"